@lobehub/lobehub 2.0.0-next.290 → 2.0.0-next.291

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 # Changelog
 
+## [Version 2.0.0-next.291](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.290...v2.0.0-next.291)
+
+<sup>Released on **2026-01-15**</sup>
+
+#### 🐛 Bug Fixes
+
+- **settings**: Add instant UI feedback for provider config switches.
+- **misc**: Click lobe ai topic trigger create new agent.
+
+#### 💄 Styles
+
+- **misc**: Improve agent loading state.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **settings**: Add instant UI feedback for provider config switches, closes [#11362](https://github.com/lobehub/lobe-chat/issues/11362) ([a758d01](https://github.com/lobehub/lobe-chat/commit/a758d01))
+- **misc**: Click lobe ai topic trigger create new agent, closes [#11508](https://github.com/lobehub/lobe-chat/issues/11508) ([2443189](https://github.com/lobehub/lobe-chat/commit/2443189))
+
+#### Styles
+
+- **misc**: Improve agent loading state, closes [#11511](https://github.com/lobehub/lobe-chat/issues/11511) ([3bb7f33](https://github.com/lobehub/lobe-chat/commit/3bb7f33))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.290](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.289...v2.0.0-next.290)
 
 <sup>Released on **2026-01-15**</sup>

package/changelog/v1.json

@@ -1,4 +1,16 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Click lobe ai topic trigger create new agent."
+      ],
+      "improvements": [
+        "Improve agent loading state."
+      ]
+    },
+    "date": "2026-01-15",
+    "version": "2.0.0-next.291"
+  },
   {
     "children": {
       "fixes": [

package/locales/en-US/chat.json

@@ -203,6 +203,8 @@
   "noMembersYet": "This group doesn't have any members yet. Click the + button to invite agents.",
   "noSelectedAgents": "No members selected yet",
   "openInNewWindow": "Open in New Window",
+  "operation.execAgentRuntime": "Preparing response",
+  "operation.sendMessage": "Sending message",
   "owner": "Group owner",
   "pageCopilot.title": "Page Agent",
   "pageCopilot.welcome": "**Clearer, sharper writing**\n\nDraft, rewrite, or polish—tell me your intent and I’ll refine the rest.",

package/locales/zh-CN/chat.json

@@ -203,6 +203,8 @@
   "noMembersYet": "这个群组还没有成员。点击「+」邀请助理加入",
   "noSelectedAgents": "还未选择成员",
   "openInNewWindow": "在新窗口打开",
+  "operation.execAgentRuntime": "准备响应中",
+  "operation.sendMessage": "消息发送中",
   "owner": "群主",
   "pageCopilot.title": "文稿助理",
   "pageCopilot.welcome": "**让文字更清晰、更到位**\n\n起草、改写、润色都可以。你把意图说清楚，其余交给我打磨",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.290",
+  "version": "2.0.0-next.291",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/Checker.tsx

@@ -6,7 +6,7 @@ import { ModelIcon } from '@lobehub/icons';
 import { Alert, Button, Flexbox, Highlighter, Icon, Select } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Loader2Icon } from 'lucide-react';
-import { type ReactNode, memo, useState } from 'react';
+import { type ReactNode, memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useProviderName } from '@/hooks/useProviderName';
@@ -58,9 +58,10 @@ const Checker = memo<ConnectionCheckerProps>(
   ({ model, provider, checkErrorRender: CheckErrorRender, onBeforeCheck, onAfterCheck }) => {
     const { t } = useTranslation('setting');
 
-    const isProviderConfigUpdating = useAiInfraStore(
-      aiProviderSelectors.isProviderConfigUpdating(provider),
-    );
+    const [isProviderConfigUpdating, updateAiProviderConfig] = useAiInfraStore((s) => [
+      aiProviderSelectors.isProviderConfigUpdating(provider)(s),
+      s.updateAiProviderConfig,
+    ]);
     const totalModels = useAiInfraStore(aiModelSelectors.aiProviderChatModelListIds);
 
     const [loading, setLoading] = useState(false);
@@ -69,6 +70,11 @@ const Checker = memo<ConnectionCheckerProps>(
 
     const [error, setError] = useState<ChatMessageError | undefined>();
 
+    // Sync checkModel state when model prop changes
+    useEffect(() => {
+      setCheckModel(model);
+    }, [model]);
+
     const checkConnection = async () => {
       // Clear previous check results immediately
       setPass(false);
@@ -131,11 +137,14 @@ const Checker = memo<ConnectionCheckerProps>(
           <Select
             listItemHeight={36}
             onSelect={async (value) => {
-              // Changing the check model should be a local UI concern only.
-              // Persisting it to provider config would trigger global refresh/revalidation.
+              // Update local state
               setCheckModel(value);
               setPass(false);
               setError(undefined);
+
+              // Persist the selected model to provider config
+              // This allows the model to be retained after page refresh
+              await updateAiProviderConfig(provider, { checkModel: value });
             }}
             optionRender={({ value }) => {
               return (
@@ -177,9 +186,9 @@ const Checker = memo<ConnectionCheckerProps>(
             style={
               pass
                 ? {
-                    borderColor: cssVar.colorSuccess,
-                    color: cssVar.colorSuccess,
-                  }
+                  borderColor: cssVar.colorSuccess,
+                  color: cssVar.colorSuccess,
+                }
                 : undefined
             }
           >

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -13,7 +13,7 @@ import {
 } from '@lobehub/ui';
 import { Center, Flexbox, Skeleton } from '@lobehub/ui';
 import { useDebounceFn } from 'ahooks';
-import { Switch } from 'antd';
+import { Form as AntdForm, Switch } from 'antd';
 import { createStaticStyles, cssVar, cx, responsive } from 'antd-style';
 import { Loader2Icon, LockIcon } from 'lucide-react';
 import Link from 'next/link';
@@ -150,26 +150,72 @@ const ProviderConfig = memo<ProviderConfigProps>(
       enabled,
       isLoading,
       configUpdating,
-      enableResponseApi,
-      isProviderEndpointNotEmpty,
-      isProviderApiKeyNotEmpty,
+      providerRuntimeConfig,
     ] = useAiInfraStore((s) => [
       aiProviderSelectors.providerDetailById(id)(s),
       s.updateAiProviderConfig,
       aiProviderSelectors.isProviderEnabled(id)(s),
       aiProviderSelectors.isAiProviderConfigLoading(id)(s),
       aiProviderSelectors.isProviderConfigUpdating(id)(s),
-      aiProviderSelectors.isProviderEnableResponseApi(id)(s),
-      aiProviderSelectors.isActiveProviderEndpointNotEmpty(s),
-      aiProviderSelectors.isActiveProviderApiKeyNotEmpty(s),
+      aiProviderSelectors.providerConfigById(id)(s),
     ]);
 
+    // Watch form values in real-time to show/hide switches immediately
+    // Watch nested form values for endpoints
+    const formBaseURL = AntdForm.useWatch(['keyVaults', 'baseURL'], form);
+    const formEndpoint = AntdForm.useWatch(['keyVaults', 'endpoint'], form);
+    // Watch all possible credential fields for different providers
+    const formApiKey = AntdForm.useWatch(['keyVaults', 'apiKey'], form);
+    const formAccessKeyId = AntdForm.useWatch(['keyVaults', 'accessKeyId'], form);
+    const formSecretAccessKey = AntdForm.useWatch(['keyVaults', 'secretAccessKey'], form);
+    const formUsername = AntdForm.useWatch(['keyVaults', 'username'], form);
+    const formPassword = AntdForm.useWatch(['keyVaults', 'password'], form);
+
+    // Check if provider has endpoint and apiKey based on runtime config
+    // Fallback to data.keyVaults if runtime config is not yet loaded
+    const keyVaults = providerRuntimeConfig?.keyVaults || data?.keyVaults;
+    // Use form values first (for immediate update), fallback to stored values
+    const isProviderEndpointNotEmpty =
+      !!formBaseURL || !!formEndpoint || !!keyVaults?.baseURL || !!keyVaults?.endpoint;
+    // Check if any credential is present for different authentication types:
+    // - Standard apiKey (OpenAI, Azure, Cloudflare, VertexAI, etc.)
+    // - AWS Bedrock credentials (accessKeyId, secretAccessKey)
+    // - ComfyUI basic auth (username and password)
+    const isProviderApiKeyNotEmpty = !!(
+      formApiKey ||
+      keyVaults?.apiKey ||
+      formAccessKeyId ||
+      keyVaults?.accessKeyId ||
+      formSecretAccessKey ||
+      keyVaults?.secretAccessKey ||
+      (formUsername && formPassword) ||
+      (keyVaults?.username && keyVaults?.password)
+    );
+
+    // Track the last initialized provider ID to avoid resetting form during edits
+    const lastInitializedIdRef = useRef<string | null>(null);
+
     useLayoutEffect(() => {
       if (isLoading) return;
 
-      // set the first time
-      form.setFieldsValue(data);
-    }, [isLoading, id, data]);
+      // Only initialize form when:
+      // 1. First load (lastInitializedIdRef.current === null)
+      // 2. Provider ID changed (switching between providers)
+      const shouldInitialize = lastInitializedIdRef.current !== id;
+      if (!shouldInitialize) return;
+
+      // Merge data from both sources to ensure all fields are initialized correctly
+      // data: contains basic info like apiKey, baseURL, fetchOnClient
+      // providerRuntimeConfig: contains nested config like enableResponseApi
+      const mergedData = {
+        ...data,
+        ...(providerRuntimeConfig?.config && { config: providerRuntimeConfig.config }),
+      };
+
+      // Set form values and mark as initialized
+      form.setFieldsValue(mergedData);
+      lastInitializedIdRef.current = id;
+    }, [isLoading, id, data, providerRuntimeConfig, form]);
 
     // 标记是否正在进行连接测试
     const isCheckingConnection = useRef(false);
@@ -298,24 +344,23 @@ const ProviderConfig = memo<ProviderConfigProps>(
       (defaultShowBrowserRequest ||
         (showEndpoint && isProviderEndpointNotEmpty) ||
         (showApiKey && isProviderApiKeyNotEmpty));
-    const clientFetchItem = showClientFetch && {
-      children: isLoading ? <SkeletonSwitch /> : <Switch loading={configUpdating} />,
-      desc: t('providerModels.config.fetchOnClient.desc'),
-      label: t('providerModels.config.fetchOnClient.title'),
-      minWidth: undefined,
-      name: 'fetchOnClient',
-    };
+
+    const clientFetchItem = showClientFetch
+      ? {
+          children: isLoading ? <SkeletonSwitch /> : <Switch loading={configUpdating} />,
+          desc: t('providerModels.config.fetchOnClient.desc'),
+          label: t('providerModels.config.fetchOnClient.title'),
+          minWidth: undefined,
+          name: 'fetchOnClient',
+        }
+      : undefined;
 
     const configItems = [
       ...apiKeyItem,
       endpointItem,
       supportResponsesApi
         ? {
-            children: isLoading ? (
-              <Skeleton.Button active />
-            ) : (
-              <Switch loading={configUpdating} value={enableResponseApi} />
-            ),
+            children: isLoading ? <Skeleton.Button active /> : <Switch loading={configUpdating} />,
             desc: t('providerModels.config.responsesApi.desc'),
             label: t('providerModels.config.responsesApi.title'),
             minWidth: undefined,
@@ -364,7 +409,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
 
           {isCustom && <UpdateProviderInfo />}
           {canDeactivate && !(ENABLE_BUSINESS_FEATURES && id === 'lobehub') && (
-            <EnableSwitch id={id} />
+            <EnableSwitch id={id} key={id} />
           )}
         </Flexbox>
       ),

package/src/features/ChatInput/ChatInputProvider.tsx

@@ -21,7 +21,7 @@ export const ChatInputProvider = memo<ChatInputProviderProps>(
     chatInputEditorRef,
     onMarkdownContentChange,
     mentionItems,
-    allowExpand,
+    allowExpand = true,
   }) => {
     const editor = useEditor();
     const slashMenuRef = useRef<HTMLDivElement>(null);

package/src/features/Conversation/Messages/Assistant/components/MessageContent.tsx

@@ -8,7 +8,6 @@ import { CollapsedMessage } from '../../AssistantGroup/components/CollapsedMessa
 import DisplayContent from '../../components/DisplayContent';
 import FileChunks from '../../components/FileChunks';
 import ImageFileListViewer from '../../components/ImageFileListViewer';
-import IntentUnderstanding from '../../components/IntentUnderstanding';
 import Reasoning from '../../components/Reasoning';
 import SearchGrounding from '../../components/SearchGrounding';
 import { useMarkdown } from '../useMarkdown';
@@ -23,9 +22,6 @@ const MessageContent = memo<UIChatMessage>(
 
     const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
 
-    // TODO: Need to implement isIntentUnderstanding selector in ConversationStore if needed
-    const isIntentUnderstanding = false;
-
     const showSearch = !!search && !!search.citations?.length;
     const showImageItems = !!imageList && imageList.length > 0;
 
@@ -46,18 +42,15 @@ const MessageContent = memo<UIChatMessage>(
         )}
         {showFileChunks && <FileChunks data={chunksList} />}
         {showReasoning && <Reasoning {...props.reasoning} id={id} />}
-        {isIntentUnderstanding ? (
-          <IntentUnderstanding />
-        ) : (
-          <DisplayContent
-            content={content}
-            hasImages={showImageItems}
-            isMultimodal={metadata?.isMultimodal}
-            isToolCallGenerating={isToolCallGenerating}
-            markdownProps={markdownProps}
-            tempDisplayContent={metadata?.tempDisplayContent}
-          />
-        )}
+        <DisplayContent
+          content={content}
+          hasImages={showImageItems}
+          id={id}
+          isMultimodal={metadata?.isMultimodal}
+          isToolCallGenerating={isToolCallGenerating}
+          markdownProps={markdownProps}
+          tempDisplayContent={metadata?.tempDisplayContent}
+        />
         {showImageItems && <ImageFileListViewer items={imageList} />}
       </Flexbox>
     );

package/src/features/Conversation/Messages/Task/components/MessageContent.tsx

@@ -52,6 +52,7 @@ const MessageContent = memo<UIChatMessage>(
           <DisplayContent
             content={content}
             hasImages={showImageItems}
+            id={id}
             isMultimodal={metadata?.isMultimodal}
             isToolCallGenerating={isToolCallGenerating}
             markdownProps={markdownProps}

package/src/features/Conversation/Messages/components/ContentLoading.tsx

@@ -0,0 +1,64 @@
+import { Flexbox, Text } from '@lobehub/ui';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { useChatStore } from '@/store/chat';
+import { operationSelectors } from '@/store/chat/selectors';
+import type { OperationType } from '@/store/chat/slices/operation/types';
+
+const ELAPSED_TIME_THRESHOLD = 2100; // Show elapsed time after 2 seconds
+
+interface ContentLoadingProps {
+  id: string;
+}
+
+const ContentLoading = memo<ContentLoadingProps>(({ id }) => {
+  const { t } = useTranslation('chat');
+  const operations = useChatStore(operationSelectors.getOperationsByMessage(id));
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+
+  // Get the running operation
+  const runningOp = operations.find((op) => op.status === 'running');
+  const operationType = runningOp?.type as OperationType | undefined;
+  const startTime = runningOp?.metadata?.startTime;
+
+  // Track elapsed time, reset when operation type changes
+  useEffect(() => {
+    if (!startTime) {
+      setElapsedSeconds(0);
+      return;
+    }
+
+    const updateElapsed = () => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1000);
+      setElapsedSeconds(elapsed);
+    };
+
+    updateElapsed();
+    const interval = setInterval(updateElapsed, 1000);
+
+    return () => clearInterval(interval);
+  }, [startTime, operationType]);
+
+  // Get localized label based on operation type
+  const operationLabel = operationType
+    ? (t(`operation.${operationType}` as any) as string)
+    : undefined;
+
+  const showElapsedTime = elapsedSeconds >= ELAPSED_TIME_THRESHOLD / 1000;
+
+  return (
+    <Flexbox align={'center'} horizontal>
+      <BubblesLoading />
+      {operationLabel && (
+        <Text type={'secondary'}>
+          {operationLabel}...
+          {showElapsedTime && ` (${elapsedSeconds}s)`}
+        </Text>
+      )}
+    </Flexbox>
+  );
+});
+
+export default ContentLoading;

package/src/features/Conversation/Messages/components/DisplayContent.tsx

@@ -2,17 +2,18 @@ import { deserializeParts } from '@lobechat/utils';
 import { type MarkdownProps } from '@lobehub/ui';
 import { memo } from 'react';
 
-import BubblesLoading from '@/components/BubblesLoading';
 import { LOADING_FLAT } from '@/const/message';
 import MarkdownMessage from '@/features/Conversation/Markdown';
 
 import { normalizeThinkTags, processWithArtifact } from '../../utils/markdown';
+import ContentLoading from './ContentLoading';
 import { RichContentRenderer } from './RichContentRenderer';
 
 const DisplayContent = memo<{
   addIdOnDOM?: boolean;
   content: string;
   hasImages?: boolean;
+  id: string;
   isMultimodal?: boolean;
   isToolCallGenerating?: boolean;
   markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
@@ -25,11 +26,12 @@ const DisplayContent = memo<{
     hasImages,
     isMultimodal,
     tempDisplayContent,
+    id,
   }) => {
     const message = normalizeThinkTags(processWithArtifact(content));
     if (isToolCallGenerating) return;
 
-    if ((!content && !hasImages) || content === LOADING_FLAT) return <BubblesLoading />;
+    if ((!content && !hasImages) || content === LOADING_FLAT) return <ContentLoading id={id} />;
 
     const contentParts = isMultimodal ? deserializeParts(tempDisplayContent || content) : null;
 

package/src/features/OllamaModelDownloader/index.tsx

@@ -41,10 +41,10 @@ const OllamaModelDownloader = memo<OllamaModelDownloaderProps>(
       isValidating: isDownloading,
       error,
     } = useActionSWR(
-      [modelToPull],
-      async ([model]) => {
+      ['ollama.downloadModel', modelToPull],
+      async () => {
         await modelsService.downloadModel(
-          { model, provider: 'ollama' },
+          { model: modelToPull, provider: 'ollama' },
           { onProgress: handleProgress },
         );
 

package/src/libs/swr/index.ts

@@ -1,5 +1,5 @@
 import useSWR, { type SWRHook } from 'swr';
-
+import useSWRMutation from 'swr/mutation';
 
 /**
  * This type of request method is relatively flexible data, which will be triggered on the first time
@@ -63,20 +63,18 @@ export const useOnlyFetchOnceSWR: SWRHook = (key, fetch, config) =>
   });
 
 /**
- * 这一类请求方法用于做操作触发，必须使用 mutute 来触发请求操作，好处是自带了 loading / error 状态。
- * 可以很简单地完成 loading / error 态的交互处理，同时，相同 swr key 的请求会自动共享 loading态（例如新建助理按钮和右上角的 + 号）
+ * 这一类请求方法用于做操作触发，必须使用 mutate 来触发请求操作，好处是自带了 loading / error 状态。
+ * 可以很简单地完成 loading / error 态的交互处理，同时，相同 swr key 的请求会自动共享 loading 态（例如新建助理按钮和右上角的 + 号）
  * 非常适用于新建等操作。
+ *
+ * 使用 useSWRMutation 而非 useSWR，因为 useSWR 即使设置了 revalidateOnMount: false，
+ * 在缓存为空时仍会自动调用 fetcher。而 useSWRMutation 只会在手动调用 trigger 时执行。
  */
-// @ts-ignore
-export const useActionSWR: SWRHook = (key, fetch, config) =>
-  useSWR(key, fetch, {
-    refreshWhenHidden: false,
-    refreshWhenOffline: false,
-    revalidateOnFocus: false,
-    revalidateOnMount: false,
-    revalidateOnReconnect: false,
-    ...config,
-  });
+export const useActionSWR = <T>(key: string | any[], fetcher: () => Promise<T>, config?: any) => {
+  const { trigger, isMutating, ...rest } = useSWRMutation(key, fetcher, config);
+  // Return with legacy property names for backward compatibility
+  return { ...rest, isValidating: isMutating, mutate: trigger };
+};
 
 export interface SWRRefreshParams<T, A = (...args: any[]) => any> {
   action: A;

package/src/locales/default/chat.ts

@@ -229,6 +229,8 @@ export default {
   'noMembersYet': "This group doesn't have any members yet. Click the + button to invite agents.",
   'noSelectedAgents': 'No members selected yet',
   'openInNewWindow': 'Open in New Window',
+  'operation.execAgentRuntime': 'Preparing response',
+  'operation.sendMessage': 'Sending message',
   'owner': 'Group owner',
   'pageCopilot.title': 'Page Agent',
   'pageCopilot.welcome':

package/src/store/aiInfra/slices/aiProvider/action.ts

@@ -77,10 +77,10 @@ export const normalizeImageModel = async (
   const fallbackParametersPromise = model.parameters
     ? Promise.resolve<ModelParamsSchema | undefined>(model.parameters)
     : getModelPropertyWithFallback<ModelParamsSchema | undefined>(
-        model.id,
-        'parameters',
-        model.providerId,
-      );
+      model.id,
+      'parameters',
+      model.providerId,
+    );
 
   const modelWithPricing = model as AIImageModelCard;
   const fallbackPricingPromise = modelWithPricing.pricing
@@ -260,6 +260,19 @@ export const createAiProviderSlice: StateCreator<
   toggleProviderEnabled: async (id: string, enabled: boolean) => {
     get().internal_toggleAiProviderLoading(id, true);
     await aiProviderService.toggleProviderEnabled(id, enabled);
+
+    // Immediately update local aiProviderList to reflect the change
+    // This ensures the switch displays correctly without waiting for SWR refresh
+    set(
+      (state) => ({
+        aiProviderList: state.aiProviderList.map((item) =>
+          item.id === id ? { ...item, enabled } : item,
+        ),
+      }),
+      false,
+      'toggleProviderEnabled/syncEnabled',
+    );
+
     await get().refreshAiProviderList();
 
     get().internal_toggleAiProviderLoading(id, false);
@@ -277,6 +290,61 @@ export const createAiProviderSlice: StateCreator<
   updateAiProviderConfig: async (id, value) => {
     get().internal_toggleAiProviderConfigUpdating(id, true);
     await aiProviderService.updateAiProviderConfig(id, value);
+
+    // Immediately update local state for instant UI feedback
+    set(
+      (state) => {
+        const currentRuntimeConfig = state.aiProviderRuntimeConfig[id];
+        const currentDetailConfig = state.aiProviderDetailMap[id];
+
+        const updates: Partial<typeof currentRuntimeConfig> = {};
+        const detailUpdates: Partial<typeof currentDetailConfig> = {};
+
+        // Update fetchOnClient if changed
+        if (typeof value.fetchOnClient !== 'undefined') {
+          // Convert null to undefined to match the interface definition
+          const fetchOnClientValue = value.fetchOnClient === null ? undefined : value.fetchOnClient;
+          updates.fetchOnClient = fetchOnClientValue;
+          detailUpdates.fetchOnClient = fetchOnClientValue;
+        }
+
+        // Update config.enableResponseApi if changed
+        if (value.config?.enableResponseApi !== undefined && currentRuntimeConfig?.config) {
+          updates.config = {
+            ...currentRuntimeConfig.config,
+            enableResponseApi: value.config.enableResponseApi,
+          };
+        }
+
+        return {
+          // Update detail map for form display
+          aiProviderDetailMap:
+            currentDetailConfig && Object.keys(detailUpdates).length > 0
+              ? {
+                ...state.aiProviderDetailMap,
+                [id]: {
+                  ...currentDetailConfig,
+                  ...detailUpdates,
+                },
+              }
+              : state.aiProviderDetailMap,
+          // Update runtime config for selectors
+          aiProviderRuntimeConfig:
+            currentRuntimeConfig && Object.keys(updates).length > 0
+              ? {
+                ...state.aiProviderRuntimeConfig,
+                [id]: {
+                  ...currentRuntimeConfig,
+                  ...updates,
+                },
+              }
+              : state.aiProviderRuntimeConfig,
+        };
+      },
+      false,
+      'updateAiProviderConfig/syncChanges',
+    );
+
     await get().refreshAiProviderDetail();
 
     get().internal_toggleAiProviderConfigUpdating(id, false);

package/src/store/chat/slices/aiChat/actions/conversationLifecycle.ts

@@ -204,8 +204,9 @@ export const conversationLifecycle: StateCreator<
     );
     get().internal_toggleMessageLoading(true, tempId);
 
-    // Associate temp message with operation
+    // Associate temp messages with operation
     get().associateMessageWithOperation(tempId, operationId);
+    get().associateMessageWithOperation(tempAssistantId, operationId);
 
     // Store editor state in operation metadata for cancel restoration
     const jsonState = mainInputEditor?.getJSONState();