@lobehub/chat 1.82.0 → 1.82.2

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

@@ -0,0 +1,203 @@
+'use client';
+
+import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
+import { Icon } from '@lobehub/ui';
+import { Button, Typography } from 'antd';
+import { createStyles, cx, keyframes } from 'antd-style';
+import { WifiIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useElectronStore } from '@/store/electron';
+
+const { Text, Title } = Typography;
+
+const airdropPulse = keyframes`
+    0% {
+      transform: translate(-50%, -50%) scale(0.8);
+      opacity: 0.5;
+    }
+    100% {
+      transform: translate(-50%, -50%) scale(2.5);
+      opacity: 0;
+    }
+`;
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 100vh;
+
+    color: ${token.colorTextBase};
+
+    background-color: ${token.colorBgContainer};
+  `,
+
+  content: css`
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `,
+
+  description: css`
+    margin-block-end: ${token.marginXL}px !important;
+    color: ${token.colorTextSecondary} !important;
+  `,
+
+  helpLink: css`
+    margin-inline-start: ${token.marginXXS}px;
+    color: ${token.colorTextSecondary};
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+      color: ${token.colorText};
+    }
+  `,
+
+  helpText: css`
+    margin-block-start: ${token.marginLG}px;
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextTertiary};
+  `,
+  // 新增：图标和脉冲动画的容器
+  iconContainer: css`
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 160px;
+    height: 160px;
+    margin-block-end: ${token.marginXL}px;
+  `,
+
+  // 新增：不同延迟的脉冲动画
+  pulse1: css`
+    animation: ${airdropPulse} 3s ease-out infinite;
+  `,
+
+  pulse2: css`
+    animation: ${airdropPulse} 3s ease-out 1.2s infinite;
+  `,
+
+  pulse3: css`
+    animation: ${airdropPulse} 3s ease-out 1.8s infinite;
+  `,
+  // 新增：基础脉冲样式
+  pulseBase: css`
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+
+    opacity: 0;
+    background-color: ${token.colorPrimaryBgHover};
+  `,
+
+  // 新增：Radar 图标样式
+  radarIcon: css`
+    z-index: 1;
+    color: ${token.colorPrimary};
+  `,
+
+  ring1: css`
+    width: 80px;
+    height: 80px;
+    border: 1px solid ${token.colorText};
+  `,
+
+  ring2: css`
+    width: 120px;
+    height: 120px;
+    border: 1px solid ${token.colorTextQuaternary};
+  `,
+
+  ring3: css`
+    width: 160px;
+    height: 160px;
+    border: 1px solid ${token.colorFillSecondary};
+  `,
+
+  // 新增：星环基础样式
+  ringBase: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+
+    border-radius: 50%;
+  `,
+  title: css`
+    margin-block-end: ${token.marginSM}px !important;
+    color: ${token.colorText} !important;
+  `,
+}));
+
+interface WaitingOAuthProps {
+  setIsOpen: (open: boolean) => void;
+  setWaiting: (waiting: boolean) => void;
+}
+const WaitingOAuth = memo<WaitingOAuthProps>(({ setWaiting, setIsOpen }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('electron'); // 指定 namespace 为 electron
+  const [disconnect, refreshServerConfig] = useElectronStore((s) => [
+    s.disconnectRemoteServer,
+    s.refreshServerConfig,
+  ]);
+
+  const handleCancel = async () => {
+    await disconnect();
+    setWaiting(false);
+  };
+
+  useWatchBroadcast('authorizationSuccessful', async () => {
+    setIsOpen(false);
+    setWaiting(false);
+    await refreshServerConfig();
+  });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        {/* 更新为新的图标和脉冲动画结构 */}
+        <div className={styles.iconContainer}>
+          {/* 新增：星环 */}
+          <div className={cx(styles.ringBase, styles.ring1)} />
+          <div className={cx(styles.ringBase, styles.ring2)} />
+          <div className={cx(styles.ringBase, styles.ring3)} />
+          {/* 脉冲 */}
+          <div className={cx(styles.pulseBase, styles.pulse1)} />
+          <div className={cx(styles.pulseBase, styles.pulse2)} />
+          <div className={cx(styles.pulseBase, styles.pulse3)} />
+
+          <Icon className={styles.radarIcon} icon={WifiIcon} size={{ fontSize: 40 }} />
+        </div>
+        <Title className={styles.title} level={4}>
+          {t('waitingOAuth.title')}
+        </Title>
+        <Text className={styles.description}>{t('waitingOAuth.description')}</Text>
+        <Button onClick={handleCancel}>{t('waitingOAuth.cancel')}</Button>{' '}
+        <Text className={styles.helpText}>{t('waitingOAuth.helpText')}</Text>
+      </div>
+    </div>
+  );
+});
+
+export default WaitingOAuth;

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

@@ -0,0 +1,57 @@
+import { Drawer } from 'antd';
+import { createStyles } from 'antd-style';
+import { useState } from 'react';
+
+import Mode from './Mode';
+import Sync from './Sync';
+import WaitingOAuth from './Waiting';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    modal: css`
+      .ant-drawer-close {
+        position: absolute;
+        inset-block-start: 8px;
+        inset-inline-end: 0;
+      }
+    `,
+  };
+});
+
+const Connection = () => {
+  const { styles, theme } = useStyles();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isWaiting, setWaiting] = useState(false);
+
+  return (
+    <>
+      <Sync
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      />
+      <Drawer
+        classNames={{ header: styles.modal }}
+        height={'100vh'}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        open={isOpen}
+        placement={'top'}
+        style={{
+          background: theme.colorBgLayout,
+        }}
+        styles={{ body: { padding: 0 }, header: { padding: 0 } }}
+      >
+        {isWaiting ? (
+          <WaitingOAuth setIsOpen={setIsOpen} setWaiting={setWaiting} />
+        ) : (
+          <Mode setIsOpen={setIsOpen} setWaiting={setWaiting} />
+        )}
+      </Drawer>
+    </>
+  );
+};
+
+export default Connection;

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