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

package/src/features/LibraryModal/AddFilesToKnowledgeBase/index.tsx

@@ -1,10 +1,8 @@
-import { Flexbox, Icon } from '@lobehub/ui';
+import { Flexbox, Icon, createModal, useModalContext } from '@lobehub/ui';
 import { BookUp2Icon } from 'lucide-react';
-import { Suspense, memo } from 'react';
+import { Suspense, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { createModal } from '@/components/FunctionModal';
-
 import SelectForm from './SelectForm';
 
 interface AddFilesToKnowledgeBaseModalProps {
@@ -16,12 +14,11 @@ interface AddFilesToKnowledgeBaseModalProps {
 interface ModalContentProps {
   fileIds: string[];
   knowledgeBaseId?: string;
-  onClose?: () => void;
 }
 
-const ModalContent = memo<ModalContentProps>(({ fileIds, knowledgeBaseId, onClose }) => {
+const ModalContent = memo<ModalContentProps>(({ fileIds, knowledgeBaseId }) => {
   const { t } = useTranslation('knowledgeBase');
-
+  const { close } = useModalContext();
   return (
     <>
       <Flexbox gap={8} horizontal paddingBlock={16} paddingInline={16} style={{ paddingBottom: 0 }}>
@@ -29,7 +26,7 @@ const ModalContent = memo<ModalContentProps>(({ fileIds, knowledgeBaseId, onClos
         {t('addToKnowledgeBase.title')}
       </Flexbox>
       <Flexbox padding={16} style={{ paddingTop: 0 }}>
-        <SelectForm fileIds={fileIds} knowledgeBaseId={knowledgeBaseId} onClose={onClose} />
+        <SelectForm fileIds={fileIds} knowledgeBaseId={knowledgeBaseId} onClose={close} />
       </Flexbox>
     </>
   );
@@ -37,19 +34,19 @@ const ModalContent = memo<ModalContentProps>(({ fileIds, knowledgeBaseId, onClos
 
 ModalContent.displayName = 'AddFilesToKnowledgeBaseModalContent';
 
-export const useAddFilesToKnowledgeBaseModal = createModal<AddFilesToKnowledgeBaseModalProps>(
-  (instance, params) => ({
-    content: (
-      <Suspense fallback={<div style={{ minHeight: 200 }} />}>
-        <ModalContent
-          fileIds={params?.fileIds || []}
-          knowledgeBaseId={params?.knowledgeBaseId}
-          onClose={() => {
-            instance.current?.destroy();
-            params?.onClose?.();
-          }}
-        />
-      </Suspense>
-    ),
-  }),
-);
+export const useAddFilesToKnowledgeBaseModal = () => {
+  const open = useCallback((params?: AddFilesToKnowledgeBaseModalProps) => {
+    createModal({
+      afterClose: params?.onClose,
+      children: (
+        <Suspense fallback={<div style={{ minHeight: 200 }} />}>
+          <ModalContent fileIds={params?.fileIds || []} knowledgeBaseId={params?.knowledgeBaseId} />
+        </Suspense>
+      ),
+      footer: null,
+      title: null,
+    });
+  }, []);
+
+  return { open };
+};

package/src/features/LibraryModal/CreateNew/index.tsx

@@ -1,41 +1,37 @@
-import { Flexbox } from '@lobehub/ui';
-import { Suspense, memo } from 'react';
-
-import { createModal } from '@/components/FunctionModal';
+import { Flexbox, createModal, useModalContext } from '@lobehub/ui';
+import { Suspense, memo, useCallback } from 'react';
 
 import CreateForm from './CreateForm';
 
 interface ModalContentProps {
-  onClose?: () => void;
   onSuccess?: (id: string) => void;
 }
 
-const ModalContent = memo<ModalContentProps>(({ onClose, onSuccess }) => {
+const ModalContent = memo<ModalContentProps>(({ onSuccess }) => {
+  const { close } = useModalContext();
+
   return (
     <Flexbox paddingInline={16} style={{ paddingBottom: 16 }}>
-      <CreateForm onClose={onClose} onSuccess={onSuccess} />
+      <CreateForm onClose={close} onSuccess={onSuccess} />
     </Flexbox>
   );
 });
 
 ModalContent.displayName = 'KnowledgeBaseCreateModalContent';
 
-// eslint-disable-next-line unused-imports/no-unused-vars
-export const useCreateNewModal = createModal<{ onSuccess?: (id: string) => void }>(
-  (instance, props) => {
-    return {
-      content: (
+export const useCreateNewModal = () => {
+  const open = useCallback((props?: { onSuccess?: (id: string) => void }) => {
+    createModal({
+      children: (
         <Suspense fallback={<div style={{ minHeight: 200 }} />}>
-          <ModalContent
-            onClose={() => {
-              instance.current?.destroy();
-            }}
-            onSuccess={props?.onSuccess}
-          />
+          <ModalContent onSuccess={props?.onSuccess} />
         </Suspense>
       ),
       focusTriggerAfterClose: true,
-      footer: false,
-    };
-  },
-);
+      footer: null,
+      title: null,
+    });
+  }, []);
+
+  return { open };
+};

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/features/PluginDevModal/index.tsx

@@ -1,3 +1,4 @@
+import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { Alert, Button, Drawer, Flexbox, Icon, Segmented, Tag } from '@lobehub/ui';
 import { App, Form, Popconfirm } from 'antd';
 import { useResponsive } from 'antd-style';
@@ -7,7 +8,6 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { isDesktop } from '@/const/version';
-import { TITLE_BAR_HEIGHT } from '@/features/ElectronTitlebar';
 import { type LobeToolCustomPlugin } from '@/types/tool/plugin';
 
 import MCPManifestForm from './MCPManifestForm';

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import {
   ConfigProvider,
   FontLoader,
@@ -19,7 +20,6 @@ import { type ReactNode, memo, useEffect, useMemo, useState } from 'react';
 import AntdStaticMethods from '@/components/AntdStaticMethods';
 import { LOBE_THEME_NEUTRAL_COLOR, LOBE_THEME_PRIMARY_COLOR } from '@/const/theme';
 import { isDesktop } from '@/const/version';
-import { TITLE_BAR_HEIGHT } from '@/features/ElectronTitlebar';
 import { useIsDark } from '@/hooks/useIsDark';
 import { getUILocaleAndResources } from '@/libs/getUILocaleAndResources';
 import { useGlobalStore } from '@/store/global';

package/src/libs/swr/index.ts

@@ -1,23 +1,13 @@
 import useSWR, { type SWRHook } from 'swr';
 
-
 /**
- * This type of request method is relatively flexible data, which will be triggered on the first time
+ * This type of request method is for relatively flexible data, which will be triggered on the first time.
  *
  * Refresh rules have two types:
- *
- * - when the user refocuses, it will be refreshed outside the 5mins interval.
- * - can be combined with refreshXXX methods to refresh data
+ * - When the user refocuses, it will be refreshed outside the 5mins interval.
+ * - Can be combined with refreshXXX methods to refresh data.
  *
  * Suitable for messages, topics, sessions, and other data that users will interact with on the client.
- *
- * 这一类请求方法是相对灵活的数据，会在请求时触发
- *
- * 刷新规则有两种：
- * - 当用户重新聚焦时，在 5mins 间隔外会重新刷新一次
- * - 可以搭配 refreshXXX 这样的方法刷新数据
- *
- * 适用于 messages、topics、sessions 等用户会在客户端交互的数据
  */
 // @ts-ignore
 export const useClientDataSWR: SWRHook = (key, fetch, config) =>
@@ -47,11 +37,8 @@ export const useClientDataSWR: SWRHook = (key, fetch, config) =>
   });
 
 /**
- * This type of request method is relatively "dead" request mode, which will only be triggered on the first request.
- * it suitable for first time request like `initUserState`
-
- * 这一类请求方法是相对"死"的请求模式，只会在第一次请求时触发。
- * 适用于第一次请求，例如 `initUserState`
+ * This type of request method is a relatively "static" request mode, which will only be triggered on the first request.
+ * Suitable for first time requests like `initUserState`.
  */
 // @ts-ignore
 export const useOnlyFetchOnceSWR: SWRHook = (key, fetch, config) =>
@@ -63,13 +50,20 @@ export const useOnlyFetchOnceSWR: SWRHook = (key, fetch, config) =>
   });
 
 /**
- * 这一类请求方法用于做操作触发，必须使用 mutute 来触发请求操作，好处是自带了 loading / error 状态。
- * 可以很简单地完成 loading / error 态的交互处理，同时，相同 swr key 的请求会自动共享 loading态（例如新建助理按钮和右上角的 + 号）
- * 非常适用于新建等操作。
+ * This type of request method is for action triggers. Must use mutate to trigger the request.
+ * Benefits: built-in loading/error states, easy to handle loading/error UI interactions.
+ * Components with the same SWR key will automatically share loading state (e.g., create agent button and the + button in header).
+ * Very suitable for create operations.
+ *
+ * Uses fallbackData as empty object so SWR thinks initial data exists.
+ * Combined with revalidateOnMount: false, this prevents auto-fetch on mount.
  */
 // @ts-ignore
 export const useActionSWR: SWRHook = (key, fetch, config) =>
   useSWR(key, fetch, {
+    // Use empty object as fallback to prevent auto-fetch when cache is empty
+    // Combined with revalidateOnMount: false, SWR won't call fetcher on mount
+    fallbackData: {},
     refreshWhenHidden: false,
     refreshWhenOffline: false,
     revalidateOnFocus: false,
@@ -87,8 +81,8 @@ export type SWRefreshMethod<T> = <A extends (...args: any[]) => Promise<any>>(
   params?: SWRRefreshParams<T, A>,
 ) => ReturnType<A>;
 
-// 导出带自动同步功能的 hook
+// Export hook with auto-sync functionality
 export { useClientDataSWRWithSync } from './useClientDataSWRWithSync';
 
-// 导出 scoped mutate（用于自定义 cache provider 场景）
+// Export scoped mutate (for custom cache provider scenarios)
 export { mutate, setScopedMutate } from './mutate';

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

@@ -29,7 +29,6 @@ import {
   type UpdateAiProviderParams,
 } from '@/types/aiProvider';
 
-
 export type ProviderModelListItem = {
   abilities: ModelAbilities;
   approximatePricePerImage?: number;
@@ -260,6 +259,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 +289,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();

package/src/store/chat/slices/portal/action.test.ts

@@ -203,7 +203,6 @@ describe('chatDockSlice', () => {
     });
   });
 
-
   describe('closeToolUI', () => {
     it('should pop ToolUI view from stack', () => {
       const { result } = renderHook(() => useChatStore());
@@ -267,5 +266,4 @@ describe('chatDockSlice', () => {
       expect(result.current.showPortal).toBe(true);
     });
   });
-
 });

package/src/store/chat/slices/portal/action.ts

@@ -42,71 +42,57 @@ export const chatPortalSlice: StateCreator<
   [],
   ChatPortalAction
 > = (set, get) => ({
-
-
   clearPortalStack: () => {
     set({ portalStack: [], showPortal: false }, false, 'clearPortalStack');
   },
 
-
-closeArtifact: () => {
+  closeArtifact: () => {
     const { portalStack } = get();
     if (getCurrentViewType(portalStack) === PortalViewType.Artifact) {
       get().popPortalView();
     }
   },
 
-
-closeDocument: () => {
+  closeDocument: () => {
     const { portalStack } = get();
     if (getCurrentViewType(portalStack) === PortalViewType.Document) {
       get().popPortalView();
     }
   },
 
-
-closeFilePreview: () => {
+  closeFilePreview: () => {
     const { portalStack } = get();
     if (getCurrentViewType(portalStack) === PortalViewType.FilePreview) {
       get().popPortalView();
     }
   },
 
-
-closeMessageDetail: () => {
+  closeMessageDetail: () => {
     const { portalStack } = get();
     if (getCurrentViewType(portalStack) === PortalViewType.MessageDetail) {
       get().popPortalView();
     }
   },
 
-
-closeNotebook: () => {
+  closeNotebook: () => {
     const { portalStack } = get();
     if (getCurrentViewType(portalStack) === PortalViewType.Notebook) {
       get().popPortalView();
     }
   },
 
-
-
-
-closeToolUI: () => {
+  closeToolUI: () => {
     const { portalStack } = get();
     if (getCurrentViewType(portalStack) === PortalViewType.ToolUI) {
       get().popPortalView();
     }
   },
 
-
-
-goBack: () => {
+  goBack: () => {
     get().popPortalView();
   },
 
-
-
-goHome: () => {
+  goHome: () => {
     set(
       {
         portalStack: [{ type: PortalViewType.Home }],
@@ -117,45 +103,32 @@ goHome: () => {
     );
   },
 
-
-
-// ============== Convenience Methods (using stack operations) ==============
-openArtifact: (artifact) => {
+  // ============== Convenience Methods (using stack operations) ==============
+  openArtifact: (artifact) => {
     get().pushPortalView({ artifact, type: PortalViewType.Artifact });
   },
 
-
-
-
-openDocument: (documentId) => {
+  openDocument: (documentId) => {
     get().pushPortalView({ documentId, type: PortalViewType.Document });
   },
 
-
-
-
-openFilePreview: (file) => {
+  openFilePreview: (file) => {
     get().pushPortalView({ file, type: PortalViewType.FilePreview });
   },
 
-
-
-openMessageDetail: (messageId) => {
+  openMessageDetail: (messageId) => {
     get().pushPortalView({ messageId, type: PortalViewType.MessageDetail });
   },
 
-
-openNotebook: () => {
+  openNotebook: () => {
     get().pushPortalView({ type: PortalViewType.Notebook });
   },
 
-
-openToolUI: (messageId, identifier) => {
+  openToolUI: (messageId, identifier) => {
     get().pushPortalView({ identifier, messageId, type: PortalViewType.ToolUI });
   },
 
-
-popPortalView: () => {
+  popPortalView: () => {
     const { portalStack } = get();
 
     if (portalStack.length <= 1) {
@@ -167,7 +140,7 @@ popPortalView: () => {
   },
 
   // ============== Core Stack Operations ==============
-pushPortalView: (view) => {
+  pushPortalView: (view) => {
     const { portalStack } = get();
     const top = portalStack.at(-1);
 

package/src/store/chat/slices/thread/action.test.ts

@@ -150,7 +150,10 @@ describe('thread action', () => {
       expect(result.current.threadStartMessageId).toBe('message-id');
       expect(result.current.portalThreadId).toBeUndefined();
       expect(result.current.startToForkThread).toBe(true);
-      expect(pushPortalViewSpy).toHaveBeenCalledWith({ type: 'thread', startMessageId: 'message-id' });
+      expect(pushPortalViewSpy).toHaveBeenCalledWith({
+        type: 'thread',
+        startMessageId: 'message-id',
+      });
     });
   });
 

package/src/store/chat/slices/thread/action.ts

@@ -2,7 +2,12 @@
 // Disable the auto sort key eslint rule to make the code more logic and readable
 import { LOADING_FLAT } from '@lobechat/const';
 import { chainSummaryTitle } from '@lobechat/prompts';
-import { type CreateMessageParams, type IThreadType, type ThreadItem, type UIChatMessage } from '@lobechat/types';
+import {
+  type CreateMessageParams,
+  type IThreadType,
+  type ThreadItem,
+  type UIChatMessage,
+} from '@lobechat/types';
 import isEqual from 'fast-deep-equal';
 import type { SWRResponse } from 'swr';
 import { type StateCreator } from 'zustand/vanilla';

package/src/components/FunctionModal/createModalHooks.ts

@@ -1,48 +0,0 @@
-import { App } from 'antd';
-import { type ModalFuncProps } from 'antd/es/modal/interface';
-import { type MutableRefObject, type ReactNode, type RefObject, useRef } from 'react';
-
-import { closeIcon, styles } from './style';
-
-interface CreateModalProps extends ModalFuncProps {
-  content: ReactNode;
-}
-
-interface ModalInstance {
-  destroy: (...args: any[]) => void;
-}
-
-type PropsFunc<T = undefined> = (
-  instance: MutableRefObject<ModalInstance | undefined>,
-  props?: T,
-) => CreateModalProps;
-
-const createModal = <T>(params: CreateModalProps | PropsFunc<T>) => {
-  const useModal = () => {
-    const { modal } = App.useApp();
-    const instanceRef = useRef<ModalInstance>(null);
-
-    const open = (outProps?: T) => {
-      const props =
-        typeof params === 'function'
-          ? params(instanceRef as RefObject<ModalInstance>, outProps)
-          : params;
-
-      instanceRef.current = modal.confirm({
-        className: styles.content,
-        closable: true,
-        closeIcon,
-        footer: false,
-        icon: null,
-        wrapClassName: styles.wrap,
-        ...props,
-      });
-    };
-
-    return { open };
-  };
-
-  return useModal;
-};
-
-export { createModal };

package/src/components/FunctionModal/index.ts

@@ -1 +0,0 @@
-export * from './createModalHooks';

package/src/components/FunctionModal/style.tsx

@@ -1,44 +0,0 @@
-import { Icon } from '@lobehub/ui';
-import { createStaticStyles , responsive } from 'antd-style';
-import { XIcon } from 'lucide-react';
-
-const prefixCls = 'ant';
-
-export const styles = createStaticStyles(({ css, cssVar }) => {
-  return {
-    content: css`
-      .${prefixCls}-modal-container {
-        overflow: hidden;
-
-        width: min(90vw, 450px);
-        padding: 0;
-        border: 1px solid ${cssVar.colorSplit};
-        border-radius: ${cssVar.borderRadiusLG};
-
-        background: ${cssVar.colorBgLayout};
-
-        ${responsive.sm} {
-          width: unset;
-        }
-      }
-      .${prefixCls}-modal-confirm-title {
-        display: block;
-        padding-block: 16px 0;
-        padding-inline: 16px;
-      }
-      .${prefixCls}-modal-confirm-btns {
-        margin-block-start: 0;
-        padding: 16px;
-      }
-
-      .${prefixCls}-modal-confirm-paragraph {
-        max-width: 100%;
-      }
-    `,
-    wrap: css`
-      overflow: hidden auto;
-    `,
-  };
-});
-
-export const closeIcon = <Icon icon={XIcon} size={20} />;