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

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/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/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/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/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/{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 }));
+  });
+});