From 7ae024ffd4d091d33305e886ec0aee3b9a0a98f8 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Tue, 23 Jun 2026 20:19:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20SearchableSelect=20?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E9=80=BB=E8=BE=91=E5=92=8C=20AI=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=80=89=E6=8B=A9=E5=99=A8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: staff <staff@qimaos-MacBook-Pro.local>
---
 .../src/components/editor/AiAssistant.vue     |  3 ++-
 .../ui/searchable-select/SearchableSelect.vue | 27 ++++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/components/editor/AiAssistant.vue b/apps/desktop/src/components/editor/AiAssistant.vue
index 368c7716b..890e04840 100644
--- a/apps/desktop/src/components/editor/AiAssistant.vue
+++ b/apps/desktop/src/components/editor/AiAssistant.vue
@@ -1287,6 +1287,7 @@ const messageRenderer = computed(() => {
               item-class="text-xs px-2"
               @update:model-value="(value) => selectAction(value as AiAction)"
             />
+            <span class="min-w-0 flex-1" />
             <SearchableSelect
               v-if="settings.isConfigured()"
               :model-value="settings.aiConfig.model"
@@ -1297,7 +1298,7 @@ const messageRenderer = computed(() => {
               :loading-text="t('ai.loadingModels')"
               :loading="modelLoading"
               :display-name="displayModelName"
-              trigger-class="min-w-0 flex-1 shrink justify-end rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+              trigger-class="min-w-0 w-auto max-w-[220px] shrink justify-end rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
               content-class="w-72"
               item-class="text-xs px-2"
               @update:model-value="handleModelSelect"
diff --git a/apps/desktop/src/components/ui/searchable-select/SearchableSelect.vue b/apps/desktop/src/components/ui/searchable-select/SearchableSelect.vue
index 61b571b46..3c779aa00 100644
--- a/apps/desktop/src/components/ui/searchable-select/SearchableSelect.vue
+++ b/apps/desktop/src/components/ui/searchable-select/SearchableSelect.vue
@@ -57,6 +57,20 @@ function highlightSelectedOption() {
   highlightIndex.value = selectedIndex >= 0 ? selectedIndex : 0;
 }
 
+async function scrollHighlightedOptionIntoView() {
+  await nextTick();
+  const container = listContainer.value;
+  if (!container || highlightIndex.value < 0) return;
+  const buttons = container.querySelectorAll("button");
+  const target = buttons[highlightIndex.value];
+  target?.scrollIntoView({ block: "nearest" });
+}
+
+function highlightAndScrollSelectedOption() {
+  highlightSelectedOption();
+  void scrollHighlightedOptionIntoView();
+}
+
 watch(open, async (value) => {
   emit("update:open", value);
   if (!value) {
@@ -67,7 +81,7 @@ watch(open, async (value) => {
   await nextTick();
   const input = searchInput.value?.$el as HTMLInputElement | undefined;
   input?.focus();
-  highlightSelectedOption();
+  highlightAndScrollSelectedOption();
 });
 
 watch(searchText, () => {
@@ -78,19 +92,12 @@ watch(
   () => [props.modelValue, props.options],
   () => {
     if (!open.value || searchText.value) return;
-    highlightSelectedOption();
+    highlightAndScrollSelectedOption();
   },
   { deep: true },
 );
 
-watch(highlightIndex, async () => {
-  await nextTick();
-  const container = listContainer.value;
-  if (!container || highlightIndex.value < 0) return;
-  const buttons = container.querySelectorAll("button");
-  const target = buttons[highlightIndex.value];
-  target?.scrollIntoView({ block: "nearest" });
-});
+watch(highlightIndex, scrollHighlightedOptionIntoView);
 
 function selectOption(option: string) {
   emit("update:modelValue", option);