From 82f586ac73d3a3641176336ca6fa6cd33bf3a1ff Mon Sep 17 00:00:00 2001
From: Anton A S <eddclyde@yandex.ru>
Date: Wed, 11 Mar 2026 01:23:36 +0300
Subject: [PATCH] Fix AI chat not reacting to provider/model changes

- Mark transport dirty instead of resetting chat on settings change
- Rebuild Chat with new transport while preserving message history
- Watch apiKey and customBaseURL changes in addition to model/provider
- Fix provider select z-index inside settings popover (z-52 + isolate)
- Prevent popover dismiss when interacting with select dropdown
---
 src/components/ChatPanel.vue             |  6 ++----
 src/components/chat/ProviderSelect.vue   |  2 +-
 src/components/chat/ProviderSettings.vue | 11 +++++++++-
 src/composables/use-chat.ts              | 26 +++++++++++++++++-------
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/ChatPanel.vue b/src/components/ChatPanel.vue
index 3491fa1af..ca67a80a5 100644
--- a/src/components/ChatPanel.vue
+++ b/src/components/ChatPanel.vue
@@ -32,10 +32,8 @@ function scrollToBottom() {
 watch(messages, scrollToBottom, { deep: true })
 
 function handleSubmit(text: string) {
-  if (!chat.value) {
-    const c = ensureChat()
-    if (c) chat.value = markRaw(c)
-  }
+  const c = ensureChat()
+  if (c) chat.value = markRaw(c)
   chat.value?.sendMessage({ text }).catch(() => {
     /* user-facing error handled by UI */
   })
diff --git a/src/components/chat/ProviderSelect.vue b/src/components/chat/ProviderSelect.vue
index 138d0666e..ef0ef5bde 100644
--- a/src/components/chat/ProviderSelect.vue
+++ b/src/components/chat/ProviderSelect.vue
@@ -41,7 +41,7 @@ const { triggerClass, itemClass, testId } = defineProps<{
       <SelectContent
         position="popper"
         :side-offset="4"
-        :class="selectContent({ radius: 'lg', padding: 'md' })"
+        :class="selectContent({ radius: 'lg', padding: 'md', class: 'isolate z-[52]' })"
       >
         <SelectViewport>
           <SelectItem
diff --git a/src/components/chat/ProviderSettings.vue b/src/components/chat/ProviderSettings.vue
index e7b01ace8..aa7012cba 100644
--- a/src/components/chat/ProviderSettings.vue
+++ b/src/components/chat/ProviderSettings.vue
@@ -78,7 +78,16 @@ function clearKey() {
         :collision-padding="16"
         :avoid-collisions="true"
         class="isolate z-[51] w-64 rounded-lg border border-border bg-panel p-3 shadow-lg"
-        @interact-outside="save"
+        @interact-outside="
+          (e: Event) => {
+            const target = e.target as HTMLElement | null
+            if (target?.closest('[role=listbox], [data-reka-popper-content-wrapper]')) {
+              e.preventDefault()
+              return
+            }
+            save()
+          }
+        "
       >
         <div class="flex flex-col gap-2.5">
           <h3 class="text-[11px] font-semibold text-surface">AI Provider</h3>
diff --git a/src/composables/use-chat.ts b/src/composables/use-chat.ts
index 6363e2de2..1f23f6037 100644
--- a/src/composables/use-chat.ts
+++ b/src/composables/use-chat.ts
@@ -64,17 +64,25 @@ const isConfigured = computed(() => {
   return true
 })
 
+let transportDirty = false
+
+function markTransportDirty() {
+  transportDirty = true
+}
+
 watch(providerID, (id) => {
   const def = AI_PROVIDERS.find((p) => p.id === id)
   if (def?.defaultModel) {
     modelID.value = def.defaultModel
   }
-  resetChat()
+  markTransportDirty()
 })
 
-watch(modelID, () => resetChat())
-watch(customModelID, () => resetChat())
-watch(customAPIType, () => resetChat())
+watch(modelID, markTransportDirty)
+watch(customModelID, markTransportDirty)
+watch(customAPIType, markTransportDirty)
+watch(apiKey, markTransportDirty)
+watch(customBaseURL, markTransportDirty)
 
 function setAPIKey(key: string) {
   apiKey.value = key
@@ -170,15 +178,19 @@ function createTransport() {
 function ensureChat(): Chat<UIMessage> | null {
   if (!isConfigured.value) return null
   if (!chat) {
-    chat = new Chat<UIMessage>({
-      transport: createTransport()
-    })
+    chat = new Chat<UIMessage>({ transport: createTransport() })
+    transportDirty = false
+  } else if (transportDirty) {
+    const messages = chat.messages
+    chat = new Chat<UIMessage>({ transport: createTransport(), messages })
+    transportDirty = false
   }
   return chat
 }
 
 function resetChat() {
   chat = null
+  transportDirty = false
 }
 
 if (typeof window !== 'undefined') {