@lobehub/chat 0.140.1 → 0.141.1

package/src/app/settings/sync/DeviceInfo/Card.tsx

@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  container: css`
+    background: ${token.colorFillTertiary};
+    border-radius: 12px;
+
+    .${responsive.mobile} {
+      width: 100%;
+    }
+  `,
+  icon: css`
+    width: 40px;
+    height: 40px;
+  `,
+  title: css`
+    font-size: 20px;
+  `,
+}));
+
+const Card = memo<{ icon: ReactNode; title: string }>(({ title, icon }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={styles.container}
+      gap={12}
+      horizontal
+      paddingBlock={12}
+      paddingInline={20}
+    >
+      <Center className={styles.icon}>{icon}</Center>
+      <Flexbox className={styles.title}>{title}</Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Card;

package/src/app/settings/sync/DeviceInfo/DeviceName.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { EditableText } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { syncSettingsSelectors } from '@/store/global/selectors';
+
+const DeviceName = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const [deviceName, setSettings] = useGlobalStore((s) => [
+    syncSettingsSelectors.deviceName(s),
+    s.setSettings,
+  ]);
+
+  const [editing, setEditing] = useState(false);
+
+  const updateDeviceName = (deviceName: string) => {
+    setSettings({ sync: { deviceName } });
+    setEditing(false);
+  };
+
+  return (
+    <Flexbox gap={4}>
+      <Flexbox
+        align={'center'}
+        height={40}
+        horizontal
+        style={{ fontSize: 20, fontWeight: 'bold' }}
+        width={'100%'}
+      >
+        {!deviceName && !editing && (
+          <Flexbox
+            onClick={() => {
+              setEditing(true);
+            }}
+            style={{ cursor: 'pointer' }}
+          >
+            <Typography.Text type={'secondary'}>{t('sync.device.deviceName.hint')}</Typography.Text>
+          </Flexbox>
+        )}
+        <EditableText
+          editing={editing}
+          onBlur={(e) => {
+            updateDeviceName(e.target.value);
+          }}
+          onChange={(e) => {
+            updateDeviceName(e);
+          }}
+          onEditingChange={setEditing}
+          placeholder={t('sync.device.deviceName.placeholder')}
+          size={'large'}
+          style={{ maxWidth: 200 }}
+          type={'block'}
+          value={deviceName}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default DeviceName;

package/src/app/settings/sync/DeviceInfo/index.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { BrowserIcon } from '@/components/BrowserIcon';
+import { MAX_WIDTH } from '@/const/layoutTokens';
+
+import SystemIcon from '../components/SystemIcon';
+import Card from './Card';
+import DeviceName from './DeviceName';
+
+const useStyles = createStyles(({ css, cx, responsive, isDarkMode, token, stylish }) => ({
+  cards: css`
+    flex-direction: row;
+    ${responsive.mobile} {
+      flex-direction: column;
+      width: 100%;
+    }
+  `,
+  container: css`
+    position: relative;
+    width: 100%;
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  content: cx(
+    stylish.blurStrong,
+    css`
+      z-index: 2;
+
+      flex-direction: row;
+      justify-content: space-between;
+
+      height: 88px;
+      padding: 12px;
+
+      background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
+      border-radius: ${token.borderRadiusLG - 1}px;
+
+      ${responsive.mobile} {
+        flex-direction: column;
+        gap: 16px;
+        align-items: flex-start;
+
+        width: 100%;
+        padding: 8px;
+      }
+    `,
+  ),
+  glow: cx(
+    stylish.gradientAnimation,
+    css`
+      pointer-events: none;
+      opacity: 0.5;
+      background-image: linear-gradient(
+        -45deg,
+        ${isDarkMode ? token.geekblue4 : token.geekblue},
+        ${isDarkMode ? token.cyan4 : token.cyan}
+      );
+      animation-duration: 10s;
+    `,
+  ),
+  wrapper: css`
+    ${responsive.mobile} {
+      padding-block: 8px;
+      padding-inline: 4px;
+    }
+  `,
+}));
+
+interface DeviceCardProps {
+  browser?: string;
+  os?: string;
+}
+
+const DeviceCard = memo<DeviceCardProps>(({ browser, os }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('setting');
+
+  return (
+    <Flexbox
+      className={styles.wrapper}
+      style={{ maxWidth: MAX_WIDTH, position: 'relative' }}
+      width={'100%'}
+    >
+      <Flexbox className={styles.container} padding={4}>
+        <Flexbox horizontal paddingBlock={8} paddingInline={12}>
+          <div>
+            <Typography style={{ fontWeight: 'bold' }}>{t('sync.device.title')}</Typography>
+          </div>
+        </Flexbox>
+        <Flexbox align={'center'} className={styles.content} flex={1} padding={12}>
+          <DeviceName />
+          <Flexbox className={styles.cards} gap={12}>
+            <Card icon={<SystemIcon title={os} />} title={os || t('sync.device.unknownOS')} />
+            <Card
+              icon={browser && <BrowserIcon browser={browser} size={32} />}
+              title={browser || t('sync.device.unknownBrowser')}
+            />
+          </Flexbox>
+        </Flexbox>
+        <Flexbox
+          className={styles.glow}
+          height={'100%'}
+          style={{ left: 0, position: 'absolute', top: 0 }}
+          width={'100%'}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default DeviceCard;

package/src/app/settings/sync/PageTitle.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+export default memo(() => {
+  const { t } = useTranslation('setting');
+  return <PageTitle title={t('tab.sync')} />;
+});

package/src/app/settings/sync/WebRTC/ChannelNameInput.tsx

@@ -0,0 +1,46 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Input, InputProps } from 'antd';
+import { FormInstance } from 'antd/es/form/hooks/useForm';
+import { LucideDices } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { generateRandomRoomName } from '@/app/settings/sync/util';
+
+interface ChannelNameInputProps extends Omit<InputProps, 'form'> {
+  form: FormInstance;
+}
+
+const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...res }) => {
+  const { t } = useTranslation('setting');
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Input
+      placeholder={t('sync.webrtc.channelName.placeholder')}
+      suffix={
+        <ActionIcon
+          active
+          icon={LucideDices}
+          loading={loading}
+          onClick={async () => {
+            setLoading(true);
+            const name = await generateRandomRoomName();
+            setLoading(false);
+            form.setFieldValue(['sync', 'webrtc', 'channelName'], name);
+            form.setFieldValue(['sync', 'webrtc', 'enabled'], false);
+            form.submit();
+          }}
+          size={'small'}
+          style={{
+            marginRight: -4,
+          }}
+          title={t('sync.webrtc.channelName.shuffle')}
+        />
+      }
+      {...res}
+    />
+  );
+});
+
+export default ChannelNameInput;

package/src/app/settings/sync/WebRTC/index.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { SiWebrtc } from '@icons-pack/react-simple-icons';
+import { Form, type ItemGroup, Tooltip } from '@lobehub/ui';
+import { Form as AntForm, Input, Switch, Typography } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import SyncStatusInspector from '@/features/SyncStatusInspector';
+import { useGlobalStore } from '@/store/global';
+
+import { useSyncSettings } from '../../hooks/useSyncSettings';
+import ChannelNameInput from './ChannelNameInput';
+
+type SettingItemGroup = ItemGroup;
+
+const WebRTC = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = AntForm.useForm();
+
+  const [setSettings] = useGlobalStore((s) => [s.setSettings]);
+
+  useSyncSettings(form);
+
+  const channelName = AntForm.useWatch(['sync', 'webrtc', 'channelName'], form);
+
+  const config: SettingItemGroup = {
+    children: [
+      {
+        children: <ChannelNameInput form={form} />,
+        desc: t('sync.webrtc.channelName.desc'),
+        label: t('sync.webrtc.channelName.title'),
+        name: ['sync', 'webrtc', 'channelName'],
+      },
+      {
+        children: (
+          <Input.Password
+            autoComplete={'nw-password'}
+            placeholder={t('sync.webrtc.channelPassword.placeholder')}
+          />
+        ),
+        desc: t('sync.webrtc.channelPassword.desc'),
+        label: t('sync.webrtc.channelPassword.title'),
+        name: ['sync', 'webrtc', 'channelPassword'],
+      },
+      {
+        children: !channelName ? (
+          <Tooltip title={t('sync.webrtc.enabled.invalid')}>
+            <Switch disabled />
+          </Tooltip>
+        ) : (
+          <Switch />
+          // <SyncSwitch />
+        ),
+
+        label: t('sync.webrtc.enabled.title'),
+        minWidth: undefined,
+        name: ['sync', 'webrtc', 'enabled'],
+      },
+    ],
+    extra: (
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <SyncStatusInspector hiddenActions hiddenEnableGuide />
+      </div>
+    ),
+    title: (
+      <Flexbox gap={8} horizontal>
+        {/* @ts-ignore */}
+        <SiWebrtc />
+        <Flexbox align={'baseline'} gap={8} horizontal>
+          {t('sync.webrtc.title')}
+          <Typography.Text style={{ fontWeight: 'normal' }} type={'secondary'}>
+            {t('sync.webrtc.desc')}
+          </Typography.Text>
+        </Flexbox>
+      </Flexbox>
+    ),
+  };
+
+  return (
+    <Form
+      form={form}
+      items={[config]}
+      onFinish={setSettings}
+      onValuesChange={setSettings}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default WebRTC;

package/src/app/settings/sync/components/SyncSwitch/index.css

@@ -0,0 +1,237 @@
+/* stylelint-disable */
+.wrapper {
+  --hue: 223;
+  --off-hue: 3;
+  --on-hue1: 123;
+  --on-hue2: 168;
+  --fg: hsl(var(--hue), 10%, 90%);
+  --primary: hsl(var(--hue), 90%, 50%);
+  --trans-dur: 0.6s;
+  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
+
+  font-size: 14px;
+}
+
+.switch,
+.switch__input {
+  -webkit-tap-highlight-color: #0000;
+}
+
+.switch {
+  position: relative;
+
+  display: block;
+
+  width: 5em;
+  height: 3em;
+  margin: auto;
+}
+
+.switch__base-outer,
+.switch__base-inner {
+  position: absolute;
+  display: block;
+}
+
+.switch__base-outer {
+  top: 0.125em;
+  left: 0.125em;
+
+  width: 4.75em;
+  height: 2.75em;
+
+  border-radius: 1.25em;
+  box-shadow:
+    -0.125em -0.125em 0.25em hsl(var(--hue), 10%, 30%),
+    0.125em 0.125em 0.125em hsl(var(--hue), 10%, 30%) inset,
+    0.125em 0.125em 0.25em hsl(0deg, 0%, 0%),
+    -0.125em -0.125em 0.125em hsl(var(--hue), 10%, 5%) inset;
+}
+
+.switch__base-inner {
+  top: 0.375em;
+  left: 0.375em;
+
+  width: 4.25em;
+  height: 2.25em;
+
+  border-radius: 1.125em;
+  box-shadow:
+    -0.25em -0.25em 0.25em hsl(var(--hue), 10%, 30%) inset,
+    0.0625em 0.0625em 0.125em hsla(var(--hue), 10%, 30%),
+    0.125em 0.25em 0.25em hsl(var(--hue), 10%, 5%) inset,
+    -0.0625em -0.0625em 0.125em hsla(var(--hue), 10%, 5%);
+}
+
+.switch__base-neon {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: visible;
+  display: block;
+
+  width: 100%;
+  height: auto;
+}
+
+.switch__base-neon path {
+  stroke-dasharray: 0 104.26 0;
+  transition: stroke-dasharray var(--trans-dur) var(--trans-timing);
+}
+
+.switch__input {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  appearance: none;
+  outline: transparent;
+}
+
+.switch__input::before {
+  content: '';
+
+  position: absolute;
+  inset: -0.125em;
+
+  display: block;
+
+  border-radius: 0.125em;
+  box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0%);
+
+  transition: box-shadow 0.15s linear;
+}
+
+.switch__input:focus-visible::before {
+  box-shadow: 0 0 0 0.125em var(--primary);
+}
+
+.switch__knob,
+.switch__knob-container {
+  position: absolute;
+  display: block;
+  border-radius: 1em;
+}
+
+.switch__knob {
+  width: 2em;
+  height: 2em;
+
+  background-color: hsl(var(--hue), 10%, 15%);
+  background-image: radial-gradient(
+      88% 88% at 50% 50%,
+      hsl(var(--hue), 10%, 20%) 47%,
+      hsla(var(--hue), 10%, 20%, 0%) 50%
+    ),
+    radial-gradient(
+      88% 88% at 47% 47%,
+      hsl(var(--hue), 10%, 85%) 45%,
+      hsla(var(--hue), 10%, 85%, 0%) 50%
+    ),
+    radial-gradient(
+      65% 70% at 40% 60%,
+      hsl(var(--hue), 10%, 20%) 46%,
+      hsla(var(--hue), 10%, 20%, 0%) 50%
+    );
+  box-shadow:
+    -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 15%) inset,
+    -0.125em -0.125em 0.0625em hsl(var(--hue), 10%, 5%) inset,
+    0.75em 0.25em 0.125em hsla(0deg, 0%, 0%, 80%);
+
+  transition: transform var(--trans-dur) var(--trans-timing);
+}
+
+.switch__knob-container {
+  top: 0.5em;
+  left: 0.5em;
+
+  overflow: hidden;
+
+  width: 4em;
+  height: 2em;
+}
+
+.switch__knob-neon {
+  display: block;
+  width: 2em;
+  height: auto;
+}
+
+.switch__knob-neon circle {
+  opacity: 0;
+  stroke-dasharray: 0 90.32 0 54.19;
+  transition:
+    opacity var(--trans-dur) steps(1, end),
+    stroke-dasharray var(--trans-dur) var(--trans-timing);
+}
+
+.switch__knob-shadow {
+  position: absolute;
+  top: 0.5em;
+  left: 0.5em;
+
+  display: block;
+
+  width: 2em;
+  height: 2em;
+
+  border-radius: 50%;
+  box-shadow: 0.125em 0.125em 0.125em hsla(0deg, 0%, 0%, 90%);
+
+  transition: transform var(--trans-dur) var(--trans-timing);
+}
+
+.switch__led {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: block;
+
+  width: 0.25em;
+  height: 0.25em;
+
+  background-color: hsl(var(--off-hue), 90%, 70%);
+  border-radius: 50%;
+  box-shadow:
+    0 -0.0625em 0.0625em hsl(var(--off-hue), 90%, 40%) inset,
+    0 0 0.125em hsla(var(--off-hue), 90%, 70%, 30%),
+    0 0 0.125em hsla(var(--off-hue), 90%, 70%, 30%),
+    0.125em 0.125em 0.125em hsla(0deg, 0%, 0%, 50%);
+
+  transition:
+    background-color var(--trans-dur) var(--trans-timing),
+    box-shadow var(--trans-dur) var(--trans-timing);
+}
+
+.switch__text {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+}
+
+.switch__input:checked ~ .switch__led {
+  background-color: hsl(var(--on-hue1), 90%, 70%);
+  box-shadow:
+    0 -0.0625em 0.0625em hsl(var(--on-hue1), 90%, 40%) inset,
+    0 -0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 30%),
+    0 0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 30%),
+    0.125em 0.125em 0.125em hsla(0deg, 0%, 0%, 50%);
+}
+
+.switch__input:checked ~ .switch__base-neon path {
+  stroke-dasharray: 52.13 0 52.13;
+}
+
+.switch__input:checked ~ .switch__knob-shadow,
+.switch__input:checked ~ .switch__knob-container .switch__knob {
+  transform: translateX(100%);
+}
+
+.switch__input:checked ~ .switch__knob-container .switch__knob-neon circle {
+  opacity: 1;
+  stroke-dasharray: 45.16 0 45.16 54.19;
+  transition-timing-function: steps(1, start), var(--trans-timing);
+}

package/src/app/settings/sync/components/SyncSwitch/index.tsx

@@ -0,0 +1,79 @@
+import { memo } from 'react';
+
+import './index.css';
+
+interface SyncSwitchProps {
+  onChange?: (checked: boolean) => void;
+  value?: boolean;
+}
+const SyncSwitch = memo<SyncSwitchProps>(({ value, onChange }) => {
+  return (
+    <div className={'wrapper'}>
+      <label className="switch">
+        <input
+          checked={value}
+          className="switch__input"
+          onChange={(e) => {
+            onChange?.(e.target.checked);
+          }}
+          role="switch"
+          type="checkbox"
+        />
+        <span className="switch__base-outer"></span>
+        <span className="switch__base-inner"></span>
+        <svg className="switch__base-neon" height="24px" viewBox="0 0 40 24" width="40px">
+          <defs>
+            <filter id="switch-glow">
+              <feGaussianBlur result="coloredBlur" stdDeviation="1"></feGaussianBlur>
+              <feMerge>
+                <feMergeNode in="coloredBlur"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+              </feMerge>
+            </filter>
+            <linearGradient id="switch-gradient1" x1="0" x2="1" y1="0" y2="0">
+              <stop offset="0%" stopColor="hsl(var(--on-hue1),90%,70%)" />
+              <stop offset="100%" stopColor="hsl(var(--on-hue2),90%,70%)" />
+            </linearGradient>
+            <linearGradient id="switch-gradient2" x1="0.7" x2="0.3" y1="0" y2="1">
+              <stop offset="25%" stopColor="hsla(var(--on-hue1),90%,70%,0)" />
+              <stop offset="50%" stopColor="hsla(var(--on-hue1),90%,70%,0.3)" />
+              <stop offset="100%" stopColor="hsla(var(--on-hue2),90%,70%,0.3)" />
+            </linearGradient>
+          </defs>
+          <path
+            d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z"
+            fill="none"
+            filter="url(#switch-glow)"
+            stroke="url(#switch-gradient1)"
+            strokeDasharray="0 104.26 0"
+            strokeDashoffset="0.01"
+            strokeLinecap="round"
+            strokeWidth="1"
+          />
+        </svg>
+        <span className="switch__knob-shadow"></span>
+        <span className="switch__knob-container">
+          <span className="switch__knob">
+            <svg className="switch__knob-neon" height="48px" viewBox="0 0 48 48" width="48px">
+              <circle
+                cx="24"
+                cy="24"
+                fill="none"
+                r="23"
+                stroke="url(#switch-gradient2)"
+                strokeDasharray="0 90.32 0 54.19"
+                strokeLinecap="round"
+                strokeWidth="1"
+                transform="rotate(-112.5,24,24)"
+              />
+            </svg>
+          </span>
+        </span>
+        <span className="switch__led"></span>
+        <span className="switch__text">Power</span>
+      </label>
+    </div>
+  );
+});
+
+export default SyncSwitch;