@lobehub/chat 1.82.0 → 1.82.1

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

@@ -0,0 +1,222 @@
+import { Input } from '@lobehub/ui';
+import { LobeHub } from '@lobehub/ui/brand';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { ComputerIcon, Server } from 'lucide-react';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useElectronStore } from '@/store/electron';
+
+import { AccessOption, Option } from './Option';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    cardGroup: css`
+      width: 400px; /* Increased width */
+    `,
+    container: css`
+      overflow-y: auto;
+
+      width: 100%;
+      height: 100%;
+      padding-block: 0 40px;
+      padding-inline: 24px; /* Increased top padding */
+    `,
+    continueButton: css`
+      width: 100%;
+      margin-block-start: 40px;
+    `,
+    groupTitle: css`
+      padding-inline-start: 4px; /* Align with card padding */
+      font-size: 16px;
+      font-weight: 500;
+      color: ${token.colorTextSecondary};
+    `,
+    header: css`
+      text-align: center;
+    `,
+    inputError: css`
+      margin-block-start: 8px;
+      font-size: 12px;
+      color: ${token.colorError};
+    `,
+    modal: css`
+      .ant-drawer-close {
+        position: absolute;
+        inset-block-start: 8px;
+        inset-inline-end: 0;
+      }
+    `,
+    selfHostedInput: css`
+      margin-block-start: 12px;
+    `,
+    selfHostedText: css`
+      cursor: pointer;
+      font-size: 14px;
+      color: ${token.colorTextTertiary};
+
+      :hover {
+        color: ${token.colorTextSecondary};
+      }
+    `,
+    title: css`
+      margin-block: 16px 48px; /* Increased Spacing below title */
+      font-size: 24px; /* Increased font size */
+      font-weight: 600;
+      color: ${token.colorTextHeading};
+    `,
+  };
+});
+
+interface ConnectionModeProps {
+  setIsOpen: (open: boolean) => void;
+  setWaiting: (waiting: boolean) => void;
+}
+
+const ConnectionMode = memo<ConnectionModeProps>(({ setIsOpen, setWaiting }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['electron', 'common']);
+  const [selectedOption, setSelectedOption] = useState<AccessOption>();
+  const [selfHostedUrl, setSelfHostedUrl] = useState('');
+  const [urlError, setUrlError] = useState<string | undefined>();
+
+  const connect = useElectronStore((s) => s.connectRemoteServer);
+  const disconnect = useElectronStore((s) => s.disconnectRemoteServer);
+
+  const validateUrl = useCallback((url: string) => {
+    if (!url) {
+      return t('remoteServer.urlRequired');
+    }
+    try {
+      new URL(url);
+      if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        throw new Error('Invalid protocol');
+      }
+      return undefined;
+    } catch {
+      return t('remoteServer.invalidUrl');
+    }
+  }, []);
+
+  const handleSelectOption = (option: AccessOption) => {
+    setSelectedOption(option);
+    if (option !== 'self-hosted') {
+      setUrlError(undefined);
+    } else {
+      setUrlError(validateUrl(selfHostedUrl));
+    }
+  };
+
+  const handleContinue = async () => {
+    if (selectedOption === 'self-hosted') {
+      const error = validateUrl(selfHostedUrl);
+      setUrlError(error);
+      if (error) {
+        return;
+      }
+    }
+
+    if (selectedOption === 'local') {
+      await disconnect();
+      setIsOpen(false);
+      return;
+    }
+
+    // try to connect
+    setWaiting(true);
+    await connect(
+      selectedOption === 'self-hosted'
+        ? { isSelfHosted: true, serverUrl: selfHostedUrl }
+        : { isSelfHosted: false },
+    );
+  };
+
+  return (
+    <Center className={styles.container}>
+      <Flexbox align={'center'} gap={0}>
+        <h1 className={styles.title}>{t('sync.mode.title')}</h1>
+      </Flexbox>
+
+      <Flexbox className={styles.cardGroup} gap={24}>
+        <Flexbox gap={16}>
+          <Flexbox align="center" horizontal justify="space-between">
+            <div className={styles.groupTitle}>{t('sync.mode.cloudSync')}</div>
+            <div
+              className={styles.selfHostedText}
+              onClick={() => handleSelectOption('self-hosted')}
+            >
+              {t('sync.mode.useSelfHosted')}
+            </div>
+          </Flexbox>
+          <Option
+            description={t('sync.lobehubCloud.description')}
+            icon={LobeHub}
+            isSelected={selectedOption === 'cloud'}
+            label={t('sync.lobehubCloud.title')}
+            onClick={handleSelectOption}
+            value="cloud"
+          />
+          {selectedOption === 'self-hosted' && (
+            <Option
+              description={t('sync.selfHosted.description')}
+              icon={Server}
+              isSelected={selectedOption === 'self-hosted'}
+              label={t('sync.selfHosted.title')}
+              onClick={handleSelectOption}
+              value="self-hosted"
+            >
+              {selectedOption === 'self-hosted' && (
+                <>
+                  <Input
+                    autoFocus
+                    className={styles.selfHostedInput}
+                    onChange={(e) => {
+                      const newUrl = e.target.value;
+                      setSelfHostedUrl(newUrl);
+                      setUrlError(validateUrl(newUrl));
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                    placeholder="https://your-lobechat.com"
+                    status={urlError ? 'error' : undefined}
+                    value={selfHostedUrl}
+                  />
+                  {urlError && <div className={styles.inputError}>{urlError}</div>}
+                </>
+              )}
+            </Option>
+          )}
+        </Flexbox>
+        <Flexbox>
+          <div className={styles.groupTitle} style={{ marginBottom: 12 }}>
+            {t('sync.mode.localStorage')}
+          </div>
+          <Option
+            description={t('sync.local.description')}
+            icon={ComputerIcon}
+            isSelected={selectedOption === 'local'}
+            label={t('sync.local.title')}
+            onClick={handleSelectOption}
+            value="local"
+          />
+        </Flexbox>
+      </Flexbox>
+
+      <Button
+        className={styles.continueButton}
+        disabled={
+          !selectedOption || (selectedOption === 'self-hosted' && (!!urlError || !selfHostedUrl))
+        }
+        onClick={handleContinue}
+        size="large"
+        style={{ maxWidth: 400 }}
+        type="primary"
+      >
+        {selectedOption === 'local' ? t('save', { ns: 'common' }) : t('sync.continue')}
+      </Button>
+    </Center>
+  );
+});
+
+export default ConnectionMode;

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

@@ -0,0 +1,104 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { createStyles } from 'antd-style';
+import { ComponentType, ReactNode } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => ({
+  checked: css`
+    position: relative;
+    border: 1px solid ${token.colorPrimary};
+  `,
+  description: css`
+    margin-block-start: 4px; /* Adjust spacing */
+    font-size: 13px; /* Slightly larger description */
+    color: ${token.colorTextSecondary};
+  `,
+  iconWrapper: css`
+    margin-block-start: 2px;
+    padding: 0;
+    color: ${token.colorTextSecondary};
+
+    svg {
+      display: block;
+      font-size: 24px; /* Increased icon size */
+      stroke-width: 2; /* Ensure lucide icons look bolder */
+    }
+  `,
+  label: css`
+    font-size: 16px;
+    font-weight: 600; /* Bolder label */
+    color: ${token.colorText};
+  `,
+  optionCard: css`
+    cursor: pointer;
+
+    width: 100%;
+    padding: 16px;
+    border: 1px solid ${token.colorBorderSecondary}; /* Use secondary border */
+    border-radius: ${token.borderRadiusLG}px;
+
+    color: ${token.colorText};
+
+    background-color: ${token.colorBgContainer};
+
+    transition: all 0.2s ${token.motionEaseInOut};
+
+    :hover {
+      border-color: ${token.colorPrimary};
+    }
+  `,
+  optionInner: css`
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: space-between;
+  `,
+}));
+
+// 定义选项类型
+export type AccessOption = 'cloud' | 'self-hosted' | 'local';
+
+export interface OptionProps {
+  children?: ReactNode;
+  description: string;
+  icon: ComponentType<any>;
+  isSelected: boolean;
+  label: string;
+  onClick: (value: AccessOption) => void;
+  value: AccessOption; // For self-hosted input
+}
+
+export const Option = ({
+  description,
+  icon: PrefixIcon,
+  label,
+  value,
+  isSelected,
+  onClick,
+  children,
+}: OptionProps) => {
+  const { styles, cx } = useStyles();
+
+  return (
+    <Flexbox
+      className={cx(styles.optionCard, isSelected && styles.checked)}
+      direction="vertical"
+      key={value}
+      onClick={() => onClick(value)}
+    >
+      <div className={styles.optionInner}>
+        <Flexbox gap={16} horizontal>
+          <Center className={styles.iconWrapper}>
+            <PrefixIcon />
+          </Center>
+          <Flexbox gap={8}>
+            <div className={styles.label}>{label}</div>
+            <div className={styles.description}>{description}</div>
+          </Flexbox>
+        </Flexbox>
+        {isSelected && <CheckCircleFilled style={{ fontSize: 16 }} />}
+      </div>
+      {children}
+    </Flexbox>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Loader, Wifi, WifiOffIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useElectronStore } from '@/store/electron';
+import { electronSyncSelectors } from '@/store/electron/selectors';
+
+interface SyncProps {
+  onClick: () => void;
+}
+const Sync = memo<SyncProps>(({ onClick }) => {
+  const { t } = useTranslation('electron');
+
+  const [isIniting, isSyncActive, useRemoteServerConfig] = useElectronStore((s) => [
+    !s.isInitRemoteServerConfig,
+    electronSyncSelectors.isSyncActive(s),
+    s.useRemoteServerConfig,
+  ]);
+
+  // 使用useSWR获取远程服务器配置
+  useRemoteServerConfig();
+
+  return (
+    <ActionIcon
+      icon={isIniting ? Loader : isSyncActive ? Wifi : WifiOffIcon}
+      loading={isIniting}
+      onClick={onClick}
+      placement={'bottomRight'}
+      size="small"
+      title={
+        isIniting
+          ? t('sync.isIniting')
+          : isSyncActive
+            ? t('sync.inCloud')
+            : t('sync.inLocalStorage')
+      }
+    />
+  );
+});
+
+export default Sync;

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;