@lobehub/chat 0.152.0 → 0.152.2

package/src/app/(main)/settings/llm/components/Footer.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Divider } from 'antd';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Trans } from 'react-i18next';
+
+import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
+
+const Footer = memo(() => {
+  return (
+    <Divider>
+      <p style={{ fontSize: 14 }}>
+        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
+          更多模型正在
+          <Link aria-label={'todo'} href={MORE_MODEL_PROVIDER_REQUEST_URL} target="_blank">
+            计划接入
+          </Link>
+          中 ，敬请期待 ✨
+        </Trans>
+      </p>
+    </Divider>
+  );
+});
+
+export default Footer;

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -1,8 +1,11 @@
+'use client';
+
 import { Form, type FormItemProps, type ItemGroup } from '@lobehub/ui';
 import { Form as AntForm, Input, Switch } from 'antd';
 import { debounce } from 'lodash-es';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import {
@@ -142,7 +145,19 @@ const ProviderConfig = memo<ProviderConfigProps>(
           value={enabled}
         />
       ) : undefined,
-      title,
+      title: (
+        <Flexbox
+          align={'center'}
+          horizontal
+          style={{
+            height: 24,
+            maxHeight: 24,
+            ...(enabled ? {} : { filter: 'grayscale(100%)', maxHeight: 24, opacity: 0.66 }),
+          }}
+        >
+          {title}
+        </Flexbox>
+      ),
     };
 
     return (

package/src/app/(main)/settings/llm/page.tsx

@@ -1,5 +1,59 @@
-import Page from './index';
+import { notFound } from 'next/navigation';
+import { Flexbox } from 'react-layout-kit';
 
-export default () => {
-  return <Page />;
+import { serverFeatureFlags } from '@/config/server/featureFlags';
+import { translation } from '@/server/translation';
+
+import Anthropic from './Anthropic';
+import Azure from './Azure';
+import Bedrock from './Bedrock';
+import Google from './Google';
+import Groq from './Groq';
+import Minimax from './Minimax';
+import Mistral from './Mistral';
+import Moonshot from './Moonshot';
+import Ollama from './Ollama';
+import OpenAI from './OpenAI';
+import OpenRouter from './OpenRouter';
+import Perplexity from './Perplexity';
+import TogetherAI from './TogetherAI';
+import ZeroOne from './ZeroOne';
+import Zhipu from './Zhipu';
+import Footer from './components/Footer';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.llm'),
+  };
 };
+
+const Page = () => {
+  const showLLM = serverFeatureFlags().showLLM;
+  if (!showLLM) return notFound();
+
+  return (
+    <Flexbox gap={24}>
+      <OpenAI />
+      <Azure />
+      <Ollama />
+      <Google />
+      <Anthropic />
+      <Bedrock />
+      <OpenRouter />
+      <TogetherAI />
+      <Groq />
+      <Perplexity />
+      <Minimax />
+      <Mistral />
+      <Moonshot />
+      <Zhipu />
+      <ZeroOne />
+      <Footer />
+    </Flexbox>
+  );
+};
+
+Page.displayName = 'LlmSetting';
+
+export default Page;

package/src/app/(main)/settings/loading.tsx

@@ -0,0 +1,9 @@
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => {
+  return (
+    <div style={{ flex: 1 }}>
+      <SkeletonLoading paragraph={{ rows: 8 }} title={false} />
+    </div>
+  );
+};

package/src/app/(main)/settings/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

package/src/app/(main)/settings/page.tsx

@@ -1,19 +1,7 @@
-import { getServerConfig } from '@/config/server';
-import { isMobileDevice } from '@/utils/responsive';
-
-import DesktopPage from './(desktop)';
-import MobilePage from './(mobile)';
+import { redirect } from 'next/navigation';
 
 const Page = () => {
-  const mobile = isMobileDevice();
-
-  if (mobile) return <MobilePage />;
-
-  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
-
-  return (
-    <DesktopPage showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
-  );
+  return redirect('/settings/common');
 };
 
 export default Page;

package/src/app/(main)/settings/sync/{DeviceInfo → features/DeviceInfo}/Card.tsx

@@ -5,18 +5,18 @@ import { Center, Flexbox } from 'react-layout-kit';
 const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
     background: ${token.colorFillTertiary};
-    border-radius: 12px;
+    border-radius: ${token.borderRadius}px;
 
     .${responsive.mobile} {
       width: 100%;
     }
   `,
   icon: css`
-    width: 40px;
-    height: 40px;
+    width: 24px;
+    height: 24px;
   `,
   title: css`
-    font-size: 20px;
+    font-size: 16px;
   `,
 }));
 
@@ -27,13 +27,14 @@ const Card = memo<{ icon: ReactNode; title: string }>(({ title, icon }) => {
     <Flexbox
       align={'center'}
       className={styles.container}
+      flex={1}
       gap={12}
       horizontal
       paddingBlock={12}
       paddingInline={20}
     >
       <Center className={styles.icon}>{icon}</Center>
-      <Flexbox className={styles.title}>{title}</Flexbox>
+      <div className={styles.title}>{title}</div>
     </Flexbox>
   );
 });

package/src/app/(main)/settings/sync/features/DeviceInfo/DeviceName.tsx

@@ -0,0 +1,63 @@
+'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 { useUserStore } from '@/store/user';
+import { syncSettingsSelectors } from '@/store/user/selectors';
+
+const DeviceName = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const [deviceName, setSettings] = useUserStore((s) => [
+    syncSettingsSelectors.deviceName(s),
+    s.setSettings,
+  ]);
+
+  const [editing, setEditing] = useState(false);
+
+  const updateDeviceName = (deviceName: string) => {
+    setSettings({ sync: { deviceName } });
+    setEditing(false);
+  };
+
+  return (
+    <Flexbox
+      align={'center'}
+      flex={1}
+      height={40}
+      horizontal
+      style={{ fontSize: 20, fontWeight: 'bold', lineHeight: 1, minWidth: 240, paddingLeft: 8 }}
+    >
+      {!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'}
+        type={'block'}
+        value={deviceName}
+      />
+    </Flexbox>
+  );
+});
+
+export default DeviceName;

package/src/app/(main)/settings/sync/{components → features/DeviceInfo}/SystemIcon.tsx

@@ -8,28 +8,20 @@ import {
 } from '@icons-pack/react-simple-icons';
 import { memo } from 'react';
 
-// TODO: 等 simple icons 修复类型，移除 ignore
-
 const SystemIcon = memo<{ title?: string }>(({ title }) => {
   if (!title) return;
 
-  // @ts-ignore
-  if (['Mac OS', 'iOS', 'iPadOS'].includes(title)) return <SiApple size={32} />;
+  if (['Mac OS', 'iOS', 'iPadOS'].includes(title)) return <SiApple size={24} />;
 
-  // @ts-ignore
-  if (['Windows'].includes(title)) return <SiWindows11 size={32} />;
+  if (['Windows'].includes(title)) return <SiWindows11 size={24} />;
 
-  // @ts-ignore
-  if (title === 'Android') return <SiAndroid size={32} />;
+  if (title === 'Android') return <SiAndroid size={24} />;
 
-  // @ts-ignore
-  if (['BlackBerry'].includes(title)) return <SiBlackberry size={32} />;
+  if (['BlackBerry'].includes(title)) return <SiBlackberry size={24} />;
 
-  // @ts-ignore
-  if (title === 'Linux') return <SiLinux size={32} />;
+  if (title === 'Linux') return <SiLinux size={24} />;
 
-  // @ts-ignore
-  if (title === 'Chrome OS') return <SiGooglechrome size={32} />;
+  if (title === 'Chrome OS') return <SiGooglechrome size={24} />;
 
   return null;
 });

package/src/app/(main)/settings/sync/{DeviceInfo → features/DeviceInfo}/index.tsx

@@ -10,47 +10,22 @@ 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';
+import SystemIcon from './SystemIcon';
 
 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;
-      }
-    `,
-  ),
+  content: css`
+    z-index: 2;
+    padding: 8px;
+    background: ${rgba(token.colorBgContainer, isDarkMode ? 0.7 : 1)};
+    border-radius: ${token.borderRadiusLG - 1}px;
+  `,
   glow: cx(
     stylish.gradientAnimation,
     css`
@@ -90,15 +65,26 @@ const DeviceCard = memo<DeviceCardProps>(({ browser, os }) => {
       <Flexbox className={styles.container} padding={4}>
         <Flexbox horizontal paddingBlock={8} paddingInline={12}>
           <div>
-            <Typography style={{ fontWeight: 'bold' }}>{t('sync.device.title')}</Typography>
+            <Typography style={{ fontSize: 18, fontWeight: 'bold' }}>
+              {t('sync.device.title')}
+            </Typography>
           </div>
         </Flexbox>
-        <Flexbox align={'center'} className={styles.content} flex={1} padding={12}>
+        <Flexbox
+          align={'center'}
+          className={styles.content}
+          flex={1}
+          gap={16}
+          horizontal
+          justify={'space-between'}
+          padding={12}
+          wrap={'wrap'}
+        >
           <DeviceName />
-          <Flexbox className={styles.cards} gap={12}>
+          <Flexbox flex={1} gap={12} horizontal>
             <Card icon={<SystemIcon title={os} />} title={os || t('sync.device.unknownOS')} />
             <Card
-              icon={browser && <BrowserIcon browser={browser} size={32} />}
+              icon={browser && <BrowserIcon browser={browser} size={24} />}
               title={browser || t('sync.device.unknownBrowser')}
             />
           </Flexbox>

package/src/app/(main)/settings/sync/{WebRTC → features/WebRTC}/ChannelNameInput.tsx

@@ -5,13 +5,13 @@ import { LucideDices } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { generateRandomRoomName } from '../util';
+import { generateRandomRoomName } from './generateRandomRoomName';
 
 interface ChannelNameInputProps extends Omit<InputProps, 'form'> {
   form: FormInstance;
 }
 
-const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...res }) => {
+const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...rest }) => {
   const { t } = useTranslation('setting');
   const [loading, setLoading] = useState(false);
 
@@ -38,7 +38,7 @@ const ChannelNameInput = memo<ChannelNameInputProps>(({ form, ...res }) => {
           title={t('sync.webrtc.channelName.shuffle')}
         />
       }
-      {...res}
+      {...rest}
     />
   );
 });

package/src/app/(main)/settings/sync/{WebRTC → features/WebRTC}/index.tsx

@@ -7,18 +7,18 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import SyncStatusInspector from '@/features/SyncStatusInspector';
 import { useUserStore } from '@/store/user';
 
-import { useSyncSettings } from '../../hooks/useSyncSettings';
 import ChannelNameInput from './ChannelNameInput';
 
 type SettingItemGroup = ItemGroup;
 
 const WebRTC = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
+  const [form] = Form.useForm();
 
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
@@ -70,15 +70,14 @@ const WebRTC = memo(() => {
       </div>
     ),
     title: (
-      <Flexbox gap={8} horizontal>
-        {/* @ts-ignore */}
-        <SiWebrtc />
-        <Flexbox align={'baseline'} gap={8} horizontal>
+      <Flexbox align={'center'} gap={12} horizontal wrap={'wrap'}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <SiWebrtc style={{ flex: 'none' }} />
           {t('sync.webrtc.title')}
-          <Typography.Text style={{ fontWeight: 'normal' }} type={'secondary'}>
-            {t('sync.webrtc.desc')}
-          </Typography.Text>
         </Flexbox>
+        <Typography.Text style={{ fontWeight: 'normal' }} type={'secondary'}>
+          {t('sync.webrtc.desc')}
+        </Typography.Text>
       </Flexbox>
     ),
   };
@@ -87,8 +86,10 @@ const WebRTC = memo(() => {
     <Form
       form={form}
       items={[config]}
+      itemsType={'group'}
       onFinish={setSettings}
       onValuesChange={setSettings}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );

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

@@ -1,28 +1,36 @@
 import { notFound } from 'next/navigation';
 
 import { serverFeatureFlags } from '@/config/server/featureFlags';
+import { translation } from '@/server/translation';
 import { gerServerDeviceInfo, isMobileDevice } from '@/utils/responsive';
 
-import Alert from './Alert';
-import DeviceCard from './DeviceInfo';
-import PageTitle from './PageTitle';
-import WebRTC from './WebRTC';
+import Alert from './features/Alert';
+import DeviceInfo from './features/DeviceInfo';
+import WebRTC from './features/WebRTC';
 
-export default () => {
-  const enableWebrtc = serverFeatureFlags().enableWebrtc;
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.sync'),
+  };
+};
 
+const Page = () => {
+  const enableWebrtc = serverFeatureFlags().enableWebrtc;
   if (!enableWebrtc) return notFound();
 
-  const { os, browser } = gerServerDeviceInfo();
   const isMobile = isMobileDevice();
+  const { os, browser } = gerServerDeviceInfo();
 
   return (
     <>
-      {isMobile && <Alert mobile />}
-      <PageTitle />
-      <DeviceCard browser={browser} os={os} />
+      <DeviceInfo browser={browser} os={os} />
       <WebRTC />
-      {!isMobile && <Alert />}
+      <Alert mobile={isMobile} />
     </>
   );
 };
+
+Page.displayName = 'SyncSetting';
+
+export default Page;

package/src/app/(main)/settings/tts/features/OpenAI.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { Select } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+import { opeanaiSTTOptions, opeanaiTTSOptions } from './const';
+
+type SettingItemGroup = ItemGroup;
+
+const TTS_SETTING_KEY = 'tts';
+
+const OpenAI = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = Form.useForm();
+  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings] = useUserStore((s) => [s.setSettings]);
+
+  const openai: SettingItemGroup = {
+    children: [
+      {
+        children: <Select options={opeanaiTTSOptions} />,
+        label: t('settingTTS.openai.ttsModel'),
+        name: [TTS_SETTING_KEY, 'openAI', 'ttsModel'],
+      },
+      {
+        children: <Select options={opeanaiSTTOptions} />,
+        label: t('settingTTS.openai.sttModel'),
+        name: [TTS_SETTING_KEY, 'openAI', 'sttModel'],
+      },
+    ],
+    title: t('settingTTS.openai.title'),
+  };
+
+  return (
+    <Form
+      form={form}
+      initialValues={settings}
+      items={[openai]}
+      itemsType={'group'}
+      onValuesChange={setSettings}
+      variant={'pure'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default OpenAI;

package/src/app/(main)/settings/tts/{TTS/index.tsx → features/STT.tsx}

@@ -1,8 +1,8 @@
+'use client';
+
 import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, Select, Switch } from 'antd';
+import { Select, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { debounce } from 'lodash-es';
-import { Mic, Webhook } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,15 +10,15 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
-import { opeanaiSTTOptions, opeanaiTTSOptions, sttOptions } from './options';
+import { sttOptions } from './const';
 
 type SettingItemGroup = ItemGroup;
 
 const TTS_SETTING_KEY = 'tts';
 
-const TTS = memo(() => {
+const STT = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
+  const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
@@ -39,36 +39,20 @@ const TTS = memo(() => {
         valuePropName: 'checked',
       },
     ],
-    icon: Mic,
     title: t('settingTTS.stt'),
   };
 
-  const openai: SettingItemGroup = {
-    children: [
-      {
-        children: <Select options={opeanaiTTSOptions} />,
-        label: t('settingTTS.openai.ttsModel'),
-        name: [TTS_SETTING_KEY, 'openAI', 'ttsModel'],
-      },
-      {
-        children: <Select options={opeanaiSTTOptions} />,
-        label: t('settingTTS.openai.sttModel'),
-        name: [TTS_SETTING_KEY, 'openAI', 'sttModel'],
-      },
-    ],
-    icon: Webhook,
-    title: t('settingTTS.openai.title'),
-  };
-
   return (
     <Form
       form={form}
       initialValues={settings}
-      items={[stt, openai]}
-      onValuesChange={debounce(setSettings, 100)}
+      items={[stt]}
+      itemsType={'group'}
+      onValuesChange={setSettings}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );
 });
 
-export default TTS;
+export default STT;

package/src/app/(main)/settings/tts/page.tsx

@@ -1,18 +1,24 @@
-'use client';
+import { translation } from '@/server/translation';
 
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import OpenAI from './features/OpenAI';
+import STT from './features/STT';
 
-import PageTitle from '@/components/PageTitle';
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.tts'),
+  };
+};
 
-import TTS from './TTS';
-
-export default memo(() => {
-  const { t } = useTranslation('setting');
+const Page = () => {
   return (
     <>
-      <PageTitle title={t('tab.tts')} />
-      <TTS />
+      <STT />
+      <OpenAI />
     </>
   );
-});
+};
+
+Page.displayName = 'TtsSetting';
+
+export default Page;