@lobehub/chat 1.82.0 → 1.82.1

package/src/app/[variants]/(main)/_layout/Desktop/ElectronTitlebar/UpdateModal.tsx

@@ -0,0 +1,242 @@
+import { ProgressInfo, UpdateInfo, useWatchBroadcast } from '@lobechat/electron-client-ipc';
+import { App, Button, Modal, Progress, Spin } from 'antd';
+import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { autoUpdateService } from '@/services/electron/autoUpdate';
+
+export const UpdateModal = memo(() => {
+  const { t } = useTranslation(['electron', 'common']);
+
+  const [isChecking, setIsChecking] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  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); // State for latest version modal
+  const { modal } = App.useApp();
+  // --- Event Listeners ---
+
+  useWatchBroadcast('manualUpdateCheckStart', () => {
+    console.log('[Manual Update] Check Start');
+    setIsChecking(true);
+    setUpdateAvailableInfo(null);
+    setDownloadedInfo(null);
+    setProgress(null);
+    setLatestVersionInfo(null); // Reset latest version info
+    // Optional: Show a brief notification that check has started
+    // notification.info({ message: t('updater.checking') });
+  });
+
+  useWatchBroadcast('manualUpdateAvailable', (info: UpdateInfo) => {
+    console.log('[Manual Update] Available:', info);
+    // Only react if it's part of a manual check flow (i.e., isChecking was true)
+    // No need to check isChecking here as this event is specific
+    setIsChecking(false);
+    setUpdateAvailableInfo(info);
+  });
+
+  useWatchBroadcast('manualUpdateNotAvailable', (info) => {
+    console.log('[Manual Update] Not Available:', info);
+    // Only react if it's part of a manual check flow
+    // No need to check isChecking here as this event is specific
+    setIsChecking(false);
+    setLatestVersionInfo(info); // Set info for the modal
+    // notification.success({
+    //   description: t('updater.isLatestVersionDesc', { version: info.version }),
+    //   message: t('updater.isLatestVersion'),
+    // });
+  });
+
+  useWatchBroadcast('updateError', (message: string) => {
+    console.log('[Manual Update] Error:', message);
+    // Only react if it's part of a manual check/download flow
+    if (isChecking || isDownloading) {
+      setIsChecking(false);
+      setIsDownloading(false);
+      // Show error modal or notification
+      modal.error({ content: message, title: t('updater.updateError') });
+      setLatestVersionInfo(null); // Ensure other modals are closed on error
+      setUpdateAvailableInfo(null);
+      setDownloadedInfo(null);
+    }
+  });
+
+  useWatchBroadcast('updateDownloadStart', () => {
+    console.log('[Manual Update] Download Start');
+    // This event implies a manual download was triggered (likely from the 'updateAvailable' modal)
+    setIsDownloading(true);
+    setUpdateAvailableInfo(null); // Hide the 'download' button modal
+    setProgress({ bytesPerSecond: 0, percent: 0, total: 0, transferred: 0 }); // Reset progress
+    setLatestVersionInfo(null); // Ensure other modals are closed
+    // Optional: Show notification that download started
+    // notification.info({ message: t('updater.downloadingUpdate') });
+  });
+
+  useWatchBroadcast('updateDownloadProgress', (progressInfo: ProgressInfo) => {
+    console.log('[Manual Update] Progress:', progressInfo);
+    // Only update progress if we are in the manual download state
+    setProgress(progressInfo);
+  });
+
+  useWatchBroadcast('updateDownloaded', (info: UpdateInfo) => {
+    console.log('[Manual Update] Downloaded:', info);
+    // This event implies a download finished, likely the one we started manually
+    setIsChecking(false);
+    setIsDownloading(false);
+    setDownloadedInfo(info);
+    setProgress(null); // Clear progress
+    setLatestVersionInfo(null); // Ensure other modals are closed
+    setUpdateAvailableInfo(null);
+  });
+
+  // --- Render Logic ---
+
+  const handleDownload = () => {
+    if (!updateAvailableInfo) return;
+    // No need to set states here, 'updateDownloadStart' will handle it
+    autoUpdateService.downloadUpdate();
+  };
+
+  const handleInstallNow = () => {
+    setDownloadedInfo(null); // Close modal immediately
+    autoUpdateService.installNow();
+  };
+
+  const handleInstallLater = () => {
+    // No need to set state here, 'updateWillInstallLater' handles it
+    autoUpdateService.installLater();
+    setDownloadedInfo(null); // Close the modal after clicking
+  };
+
+  const closeAvailableModal = () => setUpdateAvailableInfo(null);
+  const closeDownloadedModal = () => setDownloadedInfo(null);
+  const closeLatestVersionModal = () => setLatestVersionInfo(null);
+
+  const renderCheckingModal = () => (
+    <Modal
+      closable={false}
+      footer={null}
+      maskClosable={false}
+      open={isChecking}
+      title={t('updater.checkingUpdate')}
+    >
+      <Spin spinning={true}>
+        <div style={{ padding: '20px', textAlign: 'center' }}>
+          {t('updater.checkingUpdateDesc')}
+        </div>
+      </Spin>
+    </Modal>
+  );
+
+  const renderAvailableModal = () => (
+    <Modal
+      footer={[
+        <Button key="cancel" onClick={closeAvailableModal}>
+          {t('cancel', { ns: 'common' })}
+        </Button>,
+        <Button key="download" onClick={handleDownload} type="primary">
+          {t('updater.downloadNewVersion')}
+        </Button>,
+      ]}
+      onCancel={closeAvailableModal}
+      open={!!updateAvailableInfo}
+      title={t('updater.newVersionAvailable')}
+    >
+      <h4>{t('updater.newVersionAvailableDesc', { version: updateAvailableInfo?.version })}</h4>
+      {updateAvailableInfo?.releaseNotes && (
+        <div
+          dangerouslySetInnerHTML={{ __html: updateAvailableInfo.releaseNotes as string }}
+          style={{
+            // background:theme
+            borderRadius: 4,
+            marginTop: 8,
+            maxHeight: 300,
+            overflow: 'auto',
+            padding: '8px 12px',
+          }}
+        />
+      )}
+    </Modal>
+  );
+
+  const renderDownloadingModal = () => {
+    const percent = progress ? Math.round(progress.percent) : 0;
+    return (
+      <Modal
+        closable={false}
+        footer={null}
+        maskClosable={false}
+        open={isDownloading && !downloadedInfo}
+        title={t('updater.downloadingUpdate')}
+      >
+        <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> ({(progress.bytesPerSecond / 1024 / 1024).toFixed(2)} MB/s)</span>
+            )}
+          </div>
+        </div>
+      </Modal>
+    );
+  };
+
+  const renderDownloadedModal = () => (
+    <Modal
+      footer={[
+        <Button key="later" onClick={handleInstallLater}>
+          {t('updater.installLater')}
+        </Button>,
+        <Button key="now" onClick={handleInstallNow} type="primary">
+          {t('updater.restartAndInstall')}
+        </Button>,
+      ]}
+      onCancel={closeDownloadedModal} // Allow closing if they don't want to decide now
+      open={!!downloadedInfo}
+      title={t('updater.updateReady')}
+    >
+      <h4>{t('updater.updateReadyDesc', { version: downloadedInfo?.version })}</h4>
+      {downloadedInfo?.releaseNotes && (
+        <div
+          dangerouslySetInnerHTML={{ __html: downloadedInfo.releaseNotes as string }}
+          style={{
+            borderRadius: 4,
+            marginTop: 8,
+            maxHeight: 300,
+            overflow: 'auto',
+            padding: '8px 12px',
+          }}
+        />
+      )}
+    </Modal>
+  );
+
+  // New modal for "latest version"
+  const renderLatestVersionModal = () => (
+    <Modal
+      footer={[
+        <Button key="ok" onClick={closeLatestVersionModal} type="primary">
+          {t('ok', { ns: 'common' })}
+        </Button>,
+      ]}
+      onCancel={closeLatestVersionModal}
+      open={!!latestVersionInfo}
+      title={t('updater.isLatestVersion')}
+    >
+      <p>{t('updater.isLatestVersionDesc', { version: latestVersionInfo?.version })}</p>
+    </Modal>
+  );
+
+  return (
+    <>
+      {renderCheckingModal()}
+      {renderAvailableModal()}
+      {renderDownloadingModal()}
+      {renderDownloadedModal()}
+      {renderLatestVersionModal()}
+      {/* Error state is handled by Modal.error currently */}
+    </>
+  );
+});

package/src/app/[variants]/(main)/_layout/Desktop/ElectronTitlebar/UpdateNotification.tsx

@@ -0,0 +1,193 @@
+import { DownloadOutlined } from '@ant-design/icons';
+import { UpdateInfo, useWatchBroadcast } from '@lobechat/electron-client-ipc';
+import { Icon } from '@lobehub/ui';
+import { Badge, Button, Popover, Progress, Tooltip, theme } from 'antd';
+import { createStyles } from 'antd-style';
+import { Download } from 'lucide-react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { autoUpdateService } from '@/services/electron/autoUpdate';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    height: 24px;
+    padding-inline: 8px;
+    border: 1px solid ${token.green7A};
+    border-radius: 24px;
+
+    font-size: 12px;
+    line-height: 22px;
+    color: ${token.green11A};
+
+    background: ${token.green2A};
+  `,
+
+  releaseNote: css`
+    overflow: scroll;
+
+    max-height: 300px;
+    padding: 8px;
+    border-radius: 8px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+}));
+
+export const UpdateNotification: React.FC = () => {
+  const { t } = useTranslation('electron');
+  const { styles } = useStyles();
+  const { token } = theme.useToken();
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [updateDownloaded, setUpdateDownloaded] = useState(false);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
+  const [willInstallLater, setWillInstallLater] = useState(false);
+  const [isPopoverVisible, setIsPopoverVisible] = useState(false);
+
+  useWatchBroadcast('updateDownloadProgress', (progress: { percent: number }) => {
+    setDownloadProgress(progress.percent);
+  });
+
+  useWatchBroadcast('updateDownloaded', (info: UpdateInfo) => {
+    setUpdateInfo(info);
+    setUpdateDownloaded(true);
+    setUpdateAvailable(false);
+  });
+
+  useWatchBroadcast('updateWillInstallLater', () => {
+    setWillInstallLater(true);
+    setTimeout(() => setWillInstallLater(false), 5000); // 5秒后自动隐藏提示
+  });
+
+  // 没有更新或正在下载时不显示任何内容
+  if ((!updateAvailable && !updateDownloaded) || (downloadProgress > 0 && downloadProgress < 100)) {
+    return null;
+  }
+
+  // 如果正在下载，显示下载进度
+  if (downloadProgress > 0 && downloadProgress < 100) {
+    return (
+      <div
+        style={{
+          position: 'fixed',
+          right: 12,
+          top: 12,
+          zIndex: 1000,
+        }}
+      >
+        <Tooltip title={t('updater.downloadingUpdateDesc', '正在下载更新...')}>
+          <Badge
+            count={<DownloadOutlined style={{ color: token.colorPrimary }} />}
+            offset={[-4, 4]}
+          >
+            <div
+              style={{
+                alignItems: 'center',
+                background: token.colorBgElevated,
+                borderRadius: '50%',
+                boxShadow: token.boxShadow,
+                display: 'flex',
+                height: 32,
+                justifyContent: 'center',
+                position: 'relative',
+                width: 32,
+              }}
+            >
+              <Progress
+                percent={Math.round(downloadProgress)}
+                showInfo={false}
+                strokeWidth={12}
+                type="circle"
+                width={30}
+              />
+              <span
+                style={{
+                  fontSize: 10,
+                  fontWeight: 'bold',
+                  position: 'absolute',
+                }}
+              >
+                {Math.round(downloadProgress)}%
+              </span>
+            </div>
+          </Badge>
+        </Tooltip>
+      </div>
+    );
+  }
+
+  return (
+    <Flexbox>
+      <Popover
+        arrow={false}
+        content={
+          <Flexbox gap={8} style={{ maxWidth: 380 }}>
+            <div>
+              <h3 style={{ margin: 0 }}>{t('updater.updateReady')}</h3>
+              <div style={{ color: token.colorTextSecondary, fontSize: 12 }}>
+                {updateInfo?.version}
+              </div>
+            </div>
+
+            {updateInfo?.releaseNotes && (
+              <div
+                className={styles.releaseNote}
+                dangerouslySetInnerHTML={{ __html: updateInfo.releaseNotes }}
+                style={{ maxHeight: 300, overflow: 'scroll' }}
+              />
+            )}
+
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+              <Button
+                onClick={() => {
+                  autoUpdateService.installNow();
+                }}
+                size="small"
+                type="primary"
+              >
+                {t('updater.upgradeNow')}
+              </Button>
+            </div>
+          </Flexbox>
+        }
+        onOpenChange={setIsPopoverVisible}
+        open={isPopoverVisible}
+        placement="bottomRight"
+        title={null}
+        trigger="hover"
+      >
+        <Flexbox
+          align={'center'}
+          className={styles.container}
+          gap={4}
+          horizontal
+          onClick={() => setIsPopoverVisible(true)}
+        >
+          <Icon icon={Download} style={{ fontSize: 14 }} /> 已有可用更新
+        </Flexbox>
+      </Popover>
+      {/* 下次启动时更新提示 */}
+      {willInstallLater && (
+        <div
+          style={{
+            backgroundColor: token.colorBgElevated,
+            borderRadius: token.borderRadius,
+            bottom: 20,
+            boxShadow: token.boxShadow,
+            color: token.colorText,
+            padding: '10px 16px',
+            position: 'fixed',
+            right: 20,
+            zIndex: 1000,
+          }}
+        >
+          {t('updater.willInstallLater', '更新将在下次启动时安装')}
+        </div>
+      )}
+    </Flexbox>
+  );
+};

package/src/app/[variants]/(main)/_layout/Desktop/{Titlebar.tsx → ElectronTitlebar/index.tsx}

@@ -1,11 +1,20 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useElectronStore } from '@/store/electron';
 import { electronStylish } from '@/styles/electron';
 
+import Connection from './Connection';
+import { UpdateModal } from './UpdateModal';
+import { UpdateNotification } from './UpdateNotification';
+
 export const TITLE_BAR_HEIGHT = 36;
 
 const TitleBar = memo(() => {
+  const initElectronAppState = useElectronStore((s) => s.useInitElectronAppState);
+
+  initElectronAppState();
+
   return (
     <Flexbox
       align={'center'}
@@ -19,7 +28,12 @@ const TitleBar = memo(() => {
     >
       <div />
       <div>{/* TODO */}</div>
-      <div>{/* TODO */}</div>
+
+      <Flexbox className={electronStylish.nodrag} gap={8} horizontal>
+        <UpdateNotification />
+        <Connection />
+      </Flexbox>
+      <UpdateModal />
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/BottomActions.tsx

@@ -3,6 +3,7 @@ import { Book, Github } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { DOCUMENTS_REFER_URL, GITHUB } from '@/const/url';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
@@ -12,7 +13,7 @@ const BottomActions = memo(() => {
   const { hideGitHub, hideDocs } = useServerConfigStore(featureFlagsSelectors);
 
   return (
-    <>
+    <Flexbox gap={8}>
       {!hideGitHub && (
         <Link aria-label={'GitHub'} href={GITHUB} target={'_blank'}>
           <ActionIcon icon={Github} placement={'right'} title={'GitHub'} />
@@ -23,7 +24,7 @@ const BottomActions = memo(() => {
           <ActionIcon icon={Book} placement={'right'} title={t('document')} />
         </Link>
       )}
-    </>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/_layout/Desktop/index.tsx

@@ -14,9 +14,9 @@ import { usePlatform } from '@/hooks/usePlatform';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { HotkeyScopeEnum } from '@/types/hotkey';
 
+import TitleBar, { TITLE_BAR_HEIGHT } from './ElectronTitlebar';
 import RegisterHotkeys from './RegisterHotkeys';
 import SideBar from './SideBar';
-import TitleBar, { TITLE_BAR_HEIGHT } from './Titlebar';
 
 const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 

package/src/app/[variants]/layout.tsx

@@ -7,6 +7,7 @@ import { isRtlLang } from 'rtl-detect';
 
 import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG } from '@/const/locale';
+import { isDesktop } from '@/const/version';
 import PWAInstall from '@/features/PWAInstall';
 import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
@@ -78,7 +79,7 @@ export const generateViewport = async (props: DynamicLayoutProps): ResolvingView
 
 export const generateStaticParams = () => {
   const themes: ThemeAppearance[] = ['dark', 'light'];
-  const mobileOptions = [true, false];
+  const mobileOptions = isDesktop ? [false] : [true, false];
   // only static for serveral page, other go to dynamtic
   const staticLocales: Locales[] = [DEFAULT_LANG, 'zh-CN'];
 

package/src/features/Conversation/components/MarkdownElements/LocalFile/Render/LocalFile.tsx

@@ -0,0 +1,65 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { localFileService } from '@/services/electron/localFileService';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    padding-block: 2px;
+    padding-inline: 4px 8px;
+    border-radius: 4px;
+
+    color: ${token.colorTextSecondary};
+
+    :hover {
+      color: ${token.colorText};
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  title: css`
+    overflow: hidden;
+    display: block;
+
+    line-height: 20px;
+    color: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));
+
+const LocalFile = ({
+  name,
+  path,
+  isDirectory,
+}: {
+  isDirectory: boolean;
+  name: string;
+  path: string;
+}) => {
+  const { styles } = useStyles();
+  const handleClick = () => {
+    localFileService.openLocalFileOrFolder(path, isDirectory);
+  };
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={styles.container}
+      gap={4}
+      horizontal
+      onClick={handleClick}
+      style={{ display: 'inline-flex', verticalAlign: 'middle' }}
+    >
+      <FileIcon fileName={name} isDirectory={isDirectory} size={22} variant={'pure'} />
+      <Flexbox align={'baseline'} gap={4} horizontal style={{ overflow: 'hidden', width: '100%' }}>
+        <div className={styles.title}>{name}</div>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default LocalFile;

package/src/features/Conversation/components/MarkdownElements/LocalFile/Render/index.tsx

@@ -0,0 +1,29 @@
+import isEqual from 'fast-deep-equal';
+import React, { memo } from 'react';
+
+import { MarkdownElementProps } from '../../type';
+import LocalFile from './LocalFile';
+
+interface LocalFileProps {
+  isDirectory: boolean;
+  name: string;
+  path: string;
+}
+
+const Render = memo<MarkdownElementProps<LocalFileProps>>(({ node }) => {
+  // 从 node.properties 中提取属性
+  const { name, path, isDirectory } = node?.properties || {};
+
+  if (!name || !path) {
+    // 如果缺少必要属性，可以选择渲染错误提示或 null
+    console.error('LocalFile Render component missing required properties:', node?.properties);
+    return null; // 或者返回一个错误占位符
+  }
+
+  // isDirectory 属性可能为 true (来自插件) 或 undefined，我们需要确保它是 boolean
+  const isDir = isDirectory === true;
+
+  return <LocalFile isDirectory={isDir} name={name} path={path} />;
+}, isEqual);
+
+export default Render;

package/src/features/Conversation/components/MarkdownElements/LocalFile/index.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+import { createRemarkSelfClosingTagPlugin } from '../remarkPlugins/createRemarkSelfClosingTagPlugin';
+import { MarkdownElement, MarkdownElementProps } from '../type';
+import RenderComponent from './Render';
+
+// 定义此元素的标签名
+const tag = 'localFile';
+
+const LocalFileElement: MarkdownElement = {
+  Component: RenderComponent as FC<MarkdownElementProps>,
+  remarkPlugin: createRemarkSelfClosingTagPlugin(tag),
+  tag,
+};
+
+export default LocalFileElement;

package/src/features/Conversation/components/MarkdownElements/index.ts

@@ -1,6 +1,12 @@
 import LobeArtifact from './LobeArtifact';
 import LobeThinking from './LobeThinking';
+import LocalFile from './LocalFile';
 import Thinking from './Thinking';
 import { MarkdownElement } from './type';
 
-export const markdownElements: MarkdownElement[] = [Thinking, LobeArtifact, LobeThinking];
+export const markdownElements: MarkdownElement[] = [
+  Thinking,
+  LobeArtifact,
+  LobeThinking,
+  LocalFile,
+];