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

package/src/features/Electron/updater/UpdateModal.tsx

@@ -0,0 +1,299 @@
+import {
+  type ProgressInfo,
+  type UpdateInfo,
+  useWatchBroadcast,
+} from '@lobechat/electron-client-ipc';
+import { Button, Flexbox, type ModalInstance, createModal } from '@lobehub/ui';
+import { App, Progress, Spin } from 'antd';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { autoUpdateService } from '@/services/electron/autoUpdate';
+import { formatSpeed } from '@/utils/format';
+
+type UpdateStage = 'checking' | 'available' | 'latest' | 'downloading' | 'downloaded';
+
+interface ModalUpdateOptions {
+  closable?: boolean;
+  keyboard?: boolean;
+  maskClosable?: boolean;
+  title?: React.ReactNode;
+}
+
+interface UpdateModalContentProps {
+  onClose: () => void;
+  setModalProps: (props: ModalUpdateOptions) => void;
+}
+
+const UpdateModalContent = memo<UpdateModalContentProps>(({ onClose, setModalProps }) => {
+  const { t } = useTranslation(['electron', 'common']);
+  const { modal } = App.useApp();
+  const errorHandledRef = useRef(false);
+  const isClosingRef = useRef(false);
+
+  const [stage, setStage] = useState<UpdateStage>('checking');
+  const [updateAvailableInfo, setUpdateAvailableInfo] = useState<UpdateInfo | null>(null);
+  const [downloadedInfo, setDownloadedInfo] = useState<UpdateInfo | null>(null);
+  const [progress, setProgress] = useState<ProgressInfo | null>(null);
+  const [latestVersionInfo, setLatestVersionInfo] = useState<UpdateInfo | null>(null);
+
+  useEffect(() => {
+    const isDownloading = stage === 'downloading';
+    const modalTitle = (() => {
+      switch (stage) {
+        case 'checking': {
+          return t('updater.checkingUpdate');
+        }
+        case 'available': {
+          return t('updater.newVersionAvailable');
+        }
+        case 'downloading': {
+          return t('updater.downloadingUpdate');
+        }
+        case 'downloaded': {
+          return t('updater.updateReady');
+        }
+        case 'latest': {
+          return t('updater.isLatestVersion');
+        }
+        default: {
+          return '';
+        }
+      }
+    })();
+
+    setModalProps({
+      closable: !isDownloading,
+      keyboard: !isDownloading,
+      maskClosable: !isDownloading,
+      title: modalTitle,
+    });
+  }, [setModalProps, stage, t]);
+
+  useWatchBroadcast('manualUpdateAvailable', (info: UpdateInfo) => {
+    if (isClosingRef.current) return;
+    setStage('available');
+    setUpdateAvailableInfo(info);
+    setDownloadedInfo(null);
+    setLatestVersionInfo(null);
+  });
+
+  useWatchBroadcast('manualUpdateNotAvailable', (info: UpdateInfo) => {
+    if (isClosingRef.current) return;
+    setStage('latest');
+    setLatestVersionInfo(info);
+    setUpdateAvailableInfo(null);
+    setDownloadedInfo(null);
+    setProgress(null);
+  });
+
+  useWatchBroadcast('updateDownloadStart', () => {
+    if (isClosingRef.current) return;
+    setStage('downloading');
+    setProgress({ bytesPerSecond: 0, percent: 0, total: 0, transferred: 0 });
+    setUpdateAvailableInfo(null);
+    setLatestVersionInfo(null);
+  });
+
+  useWatchBroadcast('updateDownloadProgress', (progressInfo: ProgressInfo) => {
+    if (isClosingRef.current) return;
+    setProgress(progressInfo);
+  });
+
+  useWatchBroadcast('updateDownloaded', (info: UpdateInfo) => {
+    if (isClosingRef.current) return;
+    setStage('downloaded');
+    setDownloadedInfo(info);
+    setProgress(null);
+    setUpdateAvailableInfo(null);
+    setLatestVersionInfo(null);
+  });
+
+  useWatchBroadcast('updateError', (message: string) => {
+    if (isClosingRef.current || errorHandledRef.current) return;
+    errorHandledRef.current = true;
+    isClosingRef.current = true;
+    onClose();
+    modal.error({ content: message, title: t('updater.updateError') });
+  });
+
+  const closeModal = () => {
+    if (isClosingRef.current) return;
+    errorHandledRef.current = true;
+    isClosingRef.current = true;
+    onClose();
+  };
+
+  const handleDownload = () => {
+    if (!updateAvailableInfo) return;
+    autoUpdateService.downloadUpdate();
+  };
+
+  const handleInstallNow = () => {
+    autoUpdateService.installNow();
+    closeModal();
+  };
+
+  const handleInstallLater = () => {
+    autoUpdateService.installLater();
+    closeModal();
+  };
+
+  const renderReleaseNotes = (notes?: UpdateInfo['releaseNotes']) => {
+    if (!notes) return null;
+    return (
+      <div
+        dangerouslySetInnerHTML={{ __html: notes as string }}
+        style={{
+          borderRadius: 4,
+          marginTop: 8,
+          maxHeight: 300,
+          overflow: 'auto',
+          padding: '8px 12px',
+        }}
+      />
+    );
+  };
+
+  const renderBody = () => {
+    switch (stage) {
+      case 'checking': {
+        return (
+          <Spin spinning>
+            <div style={{ padding: '20px', textAlign: 'center' }}>
+              {t('updater.checkingUpdateDesc')}
+            </div>
+          </Spin>
+        );
+      }
+      case 'available': {
+        return (
+          <>
+            <h4>
+              {t('updater.newVersionAvailableDesc', { version: updateAvailableInfo?.version })}
+            </h4>
+            {renderReleaseNotes(updateAvailableInfo?.releaseNotes)}
+          </>
+        );
+      }
+      case 'downloading': {
+        const percent = progress ? Math.round(progress.percent) : 0;
+        return (
+          <div style={{ padding: '20px 0' }}>
+            <Progress percent={percent} status="active" />
+            <div style={{ fontSize: 12, marginTop: 8, textAlign: 'center' }}>
+              {t('updater.downloadingUpdateDesc', { percent })}
+              {progress && progress.bytesPerSecond > 0 && (
+                <span>{formatSpeed(progress.bytesPerSecond)}</span>
+              )}
+            </div>
+          </div>
+        );
+      }
+      case 'downloaded': {
+        return (
+          <>
+            <h4>{t('updater.updateReadyDesc', { version: downloadedInfo?.version })}</h4>
+            {renderReleaseNotes(downloadedInfo?.releaseNotes)}
+          </>
+        );
+      }
+      case 'latest': {
+        return <p>{t('updater.isLatestVersionDesc', { version: latestVersionInfo?.version })}</p>;
+      }
+      default: {
+        return null;
+      }
+    }
+  };
+
+  const renderActions = () => {
+    if (stage === 'downloading') return null;
+
+    let actions: React.ReactNode[] = [];
+
+    if (stage === 'checking') {
+      actions = [
+        <Button key="cancel" onClick={closeModal}>
+          {t('cancel', { ns: 'common' })}
+        </Button>,
+      ];
+    }
+
+    if (stage === 'available') {
+      actions = [
+        <Button key="cancel" onClick={closeModal}>
+          {t('cancel', { ns: 'common' })}
+        </Button>,
+        <Button key="download" onClick={handleDownload} type="primary">
+          {t('updater.downloadNewVersion')}
+        </Button>,
+      ];
+    }
+
+    if (stage === 'downloaded') {
+      actions = [
+        <Button key="later" onClick={handleInstallLater}>
+          {t('updater.installLater')}
+        </Button>,
+        <Button key="now" onClick={handleInstallNow} type="primary">
+          {t('updater.restartAndInstall')}
+        </Button>,
+      ];
+    }
+
+    if (stage === 'latest') {
+      actions = [
+        <Button key="ok" onClick={closeModal} type="primary">
+          {t('ok', { ns: 'common' })}
+        </Button>,
+      ];
+    }
+
+    if (actions.length === 0) return null;
+
+    return (
+      <Flexbox gap={8} horizontal justify="end">
+        {actions}
+      </Flexbox>
+    );
+  };
+
+  return (
+    <Flexbox gap={16} style={{ padding: 16 }}>
+      <div>{renderBody()}</div>
+      {renderActions()}
+    </Flexbox>
+  );
+});
+
+UpdateModalContent.displayName = 'UpdateModalContent';
+
+interface UpdateModalOpenProps {
+  onAfterClose?: () => void;
+}
+
+export const useUpdateModal = () => {
+  const instanceRef = useRef<ModalInstance | null>(null);
+
+  const open = useCallback((props?: UpdateModalOpenProps) => {
+    const setModalProps = (nextProps: ModalUpdateOptions) => {
+      instanceRef.current?.update?.(nextProps);
+    };
+
+    const handleClose = () => {
+      instanceRef.current?.close();
+    };
+
+    instanceRef.current = createModal({
+      afterClose: props?.onAfterClose,
+      children: <UpdateModalContent onClose={handleClose} setModalProps={setModalProps} />,
+      footer: null,
+      keyboard: true,
+      maskClosable: true,
+      title: '',
+    });
+  }, []);
+
+  return { open };
+};

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

@@ -0,0 +1,24 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useAddFilesToKnowledgeBaseModal } from './index';
+
+const mockCreateModal = vi.hoisted(() => vi.fn());
+
+vi.mock('@lobehub/ui', () => ({
+  Flexbox: () => null,
+  Icon: () => null,
+  createModal: mockCreateModal,
+  useModalContext: () => ({ close: vi.fn() }),
+}));
+
+describe('useAddFilesToKnowledgeBaseModal', () => {
+  it('should forward onClose to createModal afterClose', () => {
+    const onClose = vi.fn();
+    const { result } = renderHook(() => useAddFilesToKnowledgeBaseModal());
+
+    result.current.open({ fileIds: ['file-1'], onClose });
+
+    expect(mockCreateModal).toHaveBeenCalledWith(expect.objectContaining({ afterClose: onClose }));
+  });
+});

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/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';
-import useSWRMutation from 'swr/mutation';
 
 /**
- * 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,18 +50,27 @@ export const useOnlyFetchOnceSWR: SWRHook = (key, fetch, config) =>
   });
 
 /**
- * 这一类请求方法用于做操作触发，必须使用 mutate 来触发请求操作，好处是自带了 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.
  *
- * 使用 useSWRMutation 而非 useSWR，因为 useSWR 即使设置了 revalidateOnMount: false，
- * 在缓存为空时仍会自动调用 fetcher。而 useSWRMutation 只会在手动调用 trigger 时执行。
+ * Uses fallbackData as empty object so SWR thinks initial data exists.
+ * Combined with revalidateOnMount: false, this prevents auto-fetch on mount.
  */
-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 };
-};
+// @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,
+    revalidateOnMount: false,
+    revalidateOnReconnect: false,
+    ...config,
+  });
 
 export interface SWRRefreshParams<T, A = (...args: any[]) => any> {
   action: A;
@@ -85,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/store/aiInfra/slices/aiProvider/action.ts

@@ -29,7 +29,6 @@ import {
   type UpdateAiProviderParams,
 } from '@/types/aiProvider';
 
-
 export type ProviderModelListItem = {
   abilities: ModelAbilities;
   approximatePricePerImage?: number;
@@ -77,10 +76,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
@@ -321,23 +320,23 @@ export const createAiProviderSlice: StateCreator<
           aiProviderDetailMap:
             currentDetailConfig && Object.keys(detailUpdates).length > 0
               ? {
-                ...state.aiProviderDetailMap,
-                [id]: {
-                  ...currentDetailConfig,
-                  ...detailUpdates,
-                },
-              }
+                  ...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,
+                  [id]: {
+                    ...currentRuntimeConfig,
+                    ...updates,
+                  },
+                }
               : state.aiProviderRuntimeConfig,
         };
       },

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);
     });
   });
-
 });