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

package/src/features/Conversation/Messages/AssistantGroup/components/GroupItem.tsx

@@ -25,10 +25,20 @@ const GroupItem = memo<GroupItemProps>(
           toggleMessageEditing(item.id, true);
         }}
       >
-        <ContentBlock {...item} assistantId={assistantId} disableEditing={disableEditing} error={error} />
+        <ContentBlock
+          {...item}
+          assistantId={assistantId}
+          disableEditing={disableEditing}
+          error={error}
+        />
       </Flexbox>
     ) : (
-      <ContentBlock {...item} assistantId={assistantId} disableEditing={disableEditing} error={error} />
+      <ContentBlock
+        {...item}
+        assistantId={assistantId}
+        disableEditing={disableEditing}
+        error={error}
+      />
     );
   },
   isEqual,

package/src/features/Conversation/Messages/Tool/Tool/index.tsx

@@ -33,7 +33,16 @@ export interface InspectorProps {
  * Tool message component - adapts Tool message data to use AssistantGroup/Tool components
  */
 const Tool = memo<InspectorProps>(
-  ({ arguments: requestArgs, apiName, disableEditing, messageId, toolCallId, index, identifier, type }) => {
+  ({
+    arguments: requestArgs,
+    apiName,
+    disableEditing,
+    messageId,
+    toolCallId,
+    index,
+    identifier,
+    type,
+  }) => {
     const [showDebug, setShowDebug] = useState(false);
     const [showPluginRender, setShowPluginRender] = useState(false);
     const [expand, setExpand] = useState(true);

package/src/features/{ElectronTitlebar/hooks → Electron/navigation}/useNavigationHistory.ts

@@ -7,7 +7,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useElectronStore } from '@/store/electron';
 
-import { getRouteMetadata } from '../helpers/routeMetadata';
+import { getRouteMetadata } from './routeMetadata';
 
 /**
  * Hook to manage navigation history in Electron desktop app

package/src/features/{ElectronTitlebar/NavigationBar/index.tsx → Electron/titlebar/NavigationBar.tsx}

@@ -10,7 +10,7 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 import { electronStylish } from '@/styles/electron';
 import { isMacOS } from '@/utils/platform';
 
-import { useNavigationHistory } from '../hooks/useNavigationHistory';
+import { useNavigationHistory } from '../navigation/useNavigationHistory';
 import RecentlyViewed from './RecentlyViewed';
 
 const isMac = isMacOS();

package/src/features/{ElectronTitlebar/NavigationBar → Electron/titlebar}/RecentlyViewed.tsx

@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import { useElectronStore } from '@/store/electron';
 import type { HistoryEntry } from '@/store/electron/actions/navigationHistory';
 
-import { getRouteIcon } from '../helpers/routeMetadata';
+import { getRouteIcon } from '../navigation/routeMetadata';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`

package/src/features/{ElectronTitlebar/index.tsx → Electron/titlebar/TitleBar.tsx}

@@ -1,18 +1,19 @@
 import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
+import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
 import { Flexbox } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useRef } from 'react';
 
 import { useElectronStore } from '@/store/electron';
 import { electronStylish } from '@/styles/electron';
 import { isMacOS } from '@/utils/platform';
 
-import Connection from './Connection';
+import Connection from '../connection/Connection';
+import { useWatchThemeUpdate } from '../system/useWatchThemeUpdate';
+import { useUpdateModal } from '../updater/UpdateModal';
+import { UpdateNotification } from '../updater/UpdateNotification';
 import NavigationBar from './NavigationBar';
-import { UpdateModal } from './UpdateModal';
-import { UpdateNotification } from './UpdateNotification';
 import WinControl from './WinControl';
-import { useWatchThemeUpdate } from './hooks/useWatchThemeUpdate';
 
 const isMac = isMacOS();
 
@@ -25,6 +26,19 @@ const TitleBar = memo(() => {
   initElectronAppState();
   useWatchThemeUpdate();
 
+  const { open: openUpdateModal } = useUpdateModal();
+  const updateModalOpenRef = useRef(false);
+
+  useWatchBroadcast('manualUpdateCheckStart', () => {
+    if (updateModalOpenRef.current) return;
+    updateModalOpenRef.current = true;
+    openUpdateModal({
+      onAfterClose: () => {
+        updateModalOpenRef.current = false;
+      },
+    });
+  });
+
   const showWinControl = isAppStateInit && !isMac;
 
   const padding = useMemo(() => {
@@ -59,12 +73,8 @@ const TitleBar = memo(() => {
           </>
         )}
       </Flexbox>
-      <UpdateModal />
     </Flexbox>
   );
 });
 
 export default TitleBar;
-
-export { default as SimpleTitleBar } from './SimpleTitleBar';
-export { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';

package/src/features/Electron/titlebar/WinControl.tsx

@@ -0,0 +1,5 @@
+const WinControl = () => {
+  return <div style={{ width: 132 }} />;
+};
+
+export default WinControl;

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';