@lobehub/chat 1.119.2 → 1.120.1

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/index.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { Text } from '@lobehub/ui';
-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 Card from './Card';
-import DeviceName from './DeviceName';
-import SystemIcon from './SystemIcon';
-
-const useStyles = createStyles(({ css, cx, responsive, isDarkMode, token, stylish }) => ({
-  container: css`
-    position: relative;
-    width: 100%;
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-  content: css`
-    z-index: 2;
-    padding: 8px;
-    border-radius: ${token.borderRadiusLG - 1}px;
-    background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
-  `,
-  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>
-            <Text strong style={{ fontSize: 18 }}>
-              {t('sync.device.title')}
-            </Text>
-          </div>
-        </Flexbox>
-        <Flexbox
-          align={'center'}
-          className={styles.content}
-          flex={1}
-          gap={16}
-          horizontal
-          justify={'space-between'}
-          padding={12}
-          wrap={'wrap'}
-        >
-          <DeviceName />
-          <Flexbox flex={1} gap={12} horizontal>
-            <Card icon={<SystemIcon title={os} />} title={os || t('sync.device.unknownOS')} />
-            <Card
-              icon={browser && <BrowserIcon browser={browser} size={24} />}
-              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/[variants]/(main)/settings/sync/features/WebRTC/ChannelNameInput.tsx

@@ -1,45 +0,0 @@
-import { ActionIcon, Input, InputProps } from '@lobehub/ui';
-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 './generateRandomRoomName';
-
-interface ChannelNameInputProps extends Omit<InputProps, 'form'> {
-  form: FormInstance;
-}
-
-const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...rest }) => {
-  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')}
-        />
-      }
-      {...rest}
-    />
-  );
-});
-
-export default ChannelNameInput;

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/SyncSwitch/index.css

@@ -1,238 +0,0 @@
-/* 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/[variants]/(main)/settings/sync/features/WebRTC/SyncSwitch/index.tsx

@@ -1,79 +0,0 @@
-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 className="switch__base-inner" />
-        <svg className="switch__base-neon" height="24px" viewBox="0 0 40 24" width="40px">
-          <defs>
-            <filter id="switch-glow">
-              <feGaussianBlur result="coloredBlur" stdDeviation="1" />
-              <feMerge>
-                <feMergeNode in="coloredBlur" />
-                <feMergeNode in="SourceGraphic" />
-              </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 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 className="switch__text">Power</span>
-      </label>
-    </div>
-  );
-});
-
-export default SyncSwitch;

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/generateRandomRoomName.ts

@@ -1,4 +0,0 @@
-export const generateRandomRoomName = async () => {
-  const { generate } = await import('random-words');
-  return (generate(3) as string[]).join('-');
-};

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/index.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { SiWebrtc } from '@icons-pack/react-simple-icons';
-import { Form, type FormGroupItemType, Input, InputPassword, Text, Tooltip } from '@lobehub/ui';
-import { Form as AntForm, Switch } from 'antd';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
-import { FORM_STYLE } from '@/const/layoutTokens';
-import SyncStatusInspector from '@/features/SyncStatusInspector';
-import { useUserStore } from '@/store/user';
-
-import ChannelNameInput from './ChannelNameInput';
-
-const WebRTC = memo(() => {
-  const { t } = useTranslation('setting');
-  const [form] = Form.useForm();
-
-  const [setSettings] = useUserStore((s) => [s.setSettings]);
-
-  useSyncSettings(form);
-
-  const channelName = AntForm.useWatch(['sync', 'webrtc', 'channelName'], form);
-  const signaling = AntForm.useWatch(['sync', 'webrtc', 'signaling'], form);
-
-  const config: FormGroupItemType = {
-    children: [
-      {
-        children: <Input placeholder={t('sync.webrtc.signaling.placeholder')} />,
-        desc: t('sync.webrtc.signaling.desc'),
-        label: t('sync.webrtc.signaling.title'),
-        name: ['sync', 'webrtc', 'signaling'],
-      },
-      {
-        children: <ChannelNameInput form={form} />,
-        desc: t('sync.webrtc.channelName.desc'),
-        label: t('sync.webrtc.channelName.title'),
-        name: ['sync', 'webrtc', 'channelName'],
-      },
-      {
-        children: (
-          <InputPassword
-            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 || !signaling ? (
-            <Tooltip title={t('sync.webrtc.enabled.invalid')}>
-              <Switch disabled />
-            </Tooltip>
-          ) : (
-            <Switch />
-          ),
-
-        label: t('sync.webrtc.enabled.title'),
-        minWidth: undefined,
-        name: ['sync', 'webrtc', 'enabled'],
-      },
-    ],
-    extra: (
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <SyncStatusInspector hiddenActions hiddenEnableGuide />
-      </div>
-    ),
-    title: (
-      <Flexbox align={'center'} gap={12} horizontal wrap={'wrap'}>
-        <Flexbox align={'center'} gap={8} horizontal>
-          <SiWebrtc style={{ flex: 'none' }} />
-          {t('sync.webrtc.title')}
-        </Flexbox>
-        <Text style={{ fontWeight: 'normal' }} type={'secondary'}>
-          {t('sync.webrtc.desc')}
-        </Text>
-      </Flexbox>
-    ),
-  };
-
-  return (
-    <Form
-      form={form}
-      items={[config]}
-      itemsType={'group'}
-      onFinish={setSettings}
-      onValuesChange={setSettings}
-      variant={'borderless'}
-      {...FORM_STYLE}
-    />
-  );
-});
-
-export default WebRTC;

package/src/app/[variants]/(main)/settings/sync/index.tsx

@@ -1,17 +0,0 @@
-import Alert from './features/Alert';
-import DeviceInfo from './features/DeviceInfo';
-import WebRTC from './features/WebRTC';
-
-const Page = ({ browser, os, mobile }: { browser?: string; mobile?: boolean; os?: string }) => {
-  return (
-    <>
-      <DeviceInfo browser={browser} os={os} />
-      <WebRTC />
-      <Alert mobile={mobile} />
-    </>
-  );
-};
-
-Page.displayName = 'SyncSetting';
-
-export default Page;

package/src/app/[variants]/(main)/settings/sync/page.tsx

@@ -1,29 +0,0 @@
-import { gerServerDeviceInfo } from '@lobechat/utils/server';
-import { notFound } from 'next/navigation';
-
-import { serverFeatureFlags } from '@/config/featureFlags';
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Page from './index';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('setting', locale);
-  return metadataModule.generate({
-    description: t('header.desc'),
-    title: t('tab.sync'),
-    url: '/settings/sync',
-  });
-};
-export default async (props: DynamicLayoutProps) => {
-  const enableWebrtc = serverFeatureFlags().enableWebrtc;
-  if (!enableWebrtc) return notFound();
-
-  const isMobile = await RouteVariants.getIsMobile(props);
-  const { os, browser } = await gerServerDeviceInfo();
-
-  return <Page browser={browser} mobile={isMobile} os={os} />;
-};