@lobehub/chat 0.152.3 → 0.152.5

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

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

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

@@ -1,8 +1,8 @@
-'use client';
-
 import { Form, type ItemGroup } from '@lobehub/ui';
-import { Select, Switch } from 'antd';
+import { Form as AntForm, 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 { sttOptions } from './const';
+import { opeanaiSTTOptions, opeanaiTTSOptions, sttOptions } from './options';
 
 type SettingItemGroup = ItemGroup;
 
 const TTS_SETTING_KEY = 'tts';
 
-const STT = memo(() => {
+const TTS = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = Form.useForm();
+  const [form] = AntForm.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
@@ -39,20 +39,36 @@ const STT = 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]}
-      itemsType={'group'}
-      onValuesChange={setSettings}
-      variant={'pure'}
+      items={[stt, openai]}
+      onValuesChange={debounce(setSettings, 100)}
       {...FORM_STYLE}
     />
   );
 });
 
-export default STT;
+export default TTS;

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

@@ -0,0 +1,3 @@
+import { Skeleton } from 'antd';
+
+export default () => <Skeleton paragraph={{ rows: 8 }} />;

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

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

package/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { ResolvingViewport } from 'next';
 import { cookies } from 'next/headers';
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { isRtlLang } from 'rtl-detect';
 
 import Analytics from '@/components/Analytics';
@@ -10,12 +10,7 @@ import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
 import { isMobileDevice } from '@/utils/responsive';
 
-type RootLayoutProps = {
-  children: ReactNode;
-  modal: ReactNode;
-};
-
-const RootLayout = async ({ children, modal }: RootLayoutProps) => {
+const RootLayout = async ({ children }: PropsWithChildren) => {
   const cookieStore = cookies();
 
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
@@ -25,10 +20,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <GlobalProvider>
-          <AuthProvider>
-            {children}
-            {modal}
-          </AuthProvider>
+          <AuthProvider>{children}</AuthProvider>
         </GlobalProvider>
         <Analytics />
         <SpeedInsights />

package/src/const/url.ts

@@ -29,7 +29,6 @@ export const ABOUT = OFFICIAL_SITE;
 export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 export const PRIVACY_URL = urlJoin(OFFICIAL_SITE, '/privacy');
-export const TERMS_URL = urlJoin(OFFICIAL_SITE, '/terms');
 
 export const PLUGINS_INDEX_URL = 'https://chat-plugins.lobehub.com';
 

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -0,0 +1,202 @@
+import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
+import { Form as AFrom, Input, Switch } from 'antd';
+import { useThemeMode } from 'antd-style';
+import { debounce } from 'lodash-es';
+import { BrainCog, LayoutList, MessageSquare, MessagesSquare } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { imageUrl } from '@/const/url';
+
+import { useStore } from '../store';
+import ModelSelect from './ModelSelect';
+import { useSyncConfig } from './useSyncConfig';
+
+const AgentConfig = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = AFrom.useForm();
+  const { isDarkMode } = useThemeMode();
+
+  const [
+    displayMode,
+    enableAutoCreateTopic,
+    enableHistoryCount,
+    enableCompressThreshold,
+    enableMaxTokens,
+    updateConfig,
+  ] = useStore((s) => [
+    s.config.displayMode,
+    s.config.enableAutoCreateTopic,
+    s.config.enableHistoryCount,
+    s.config.enableCompressThreshold,
+    s.config.enableMaxTokens,
+    s.setAgentConfig,
+  ]);
+
+  useSyncConfig(form);
+
+  const formItems = useMemo(() => {
+    const chat: ItemGroup = {
+      children: [
+        {
+          children: (
+            <SelectWithImg
+              height={86}
+              onChange={(mode) => updateConfig({ displayMode: mode })}
+              options={[
+                {
+                  icon: MessagesSquare,
+                  img: imageUrl(`chatmode_chat_${isDarkMode ? 'dark' : 'light'}.webp`),
+                  label: t('settingChat.chatStyleType.type.chat'),
+                  value: 'chat',
+                },
+                {
+                  icon: LayoutList,
+                  img: imageUrl(`chatmode_docs_${isDarkMode ? 'dark' : 'light'}.webp`),
+                  label: t('settingChat.chatStyleType.type.docs'),
+                  value: 'docs',
+                },
+              ]}
+              unoptimized={false}
+              value={displayMode}
+              width={144}
+            />
+          ),
+          label: t('settingChat.chatStyleType.title'),
+          minWidth: undefined,
+        },
+        {
+          children: <Input.TextArea placeholder={t('settingChat.inputTemplate.placeholder')} />,
+          desc: t('settingChat.inputTemplate.desc'),
+          label: t('settingChat.inputTemplate.title'),
+          name: 'inputTemplate',
+        },
+        {
+          children: <Switch />,
+          desc: t('settingChat.enableAutoCreateTopic.desc'),
+          label: t('settingChat.enableAutoCreateTopic.title'),
+          minWidth: undefined,
+          name: 'enableAutoCreateTopic',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={8} min={0} />,
+          desc: t('settingChat.autoCreateTopicThreshold.desc'),
+          divider: false,
+          hidden: !enableAutoCreateTopic,
+          label: t('settingChat.autoCreateTopicThreshold.title'),
+          name: 'autoCreateTopicThreshold',
+        },
+        {
+          children: <Switch />,
+          label: t('settingChat.enableHistoryCount.title'),
+          minWidth: undefined,
+          name: 'enableHistoryCount',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={1} />,
+          desc: t('settingChat.historyCount.desc'),
+          divider: false,
+          hidden: !enableHistoryCount,
+          label: t('settingChat.historyCount.title'),
+          name: 'historyCount',
+        },
+        {
+          children: <Switch />,
+          label: t('settingChat.enableCompressThreshold.title'),
+          minWidth: undefined,
+          name: 'enableCompressThreshold',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={0} />,
+          desc: t('settingChat.compressThreshold.desc'),
+          divider: false,
+          hidden: !enableCompressThreshold,
+          label: t('settingChat.compressThreshold.title'),
+          name: 'compressThreshold',
+        },
+      ],
+      icon: MessageSquare,
+      title: t('settingChat.title'),
+    };
+
+    const model: ItemGroup = {
+      children: [
+        {
+          children: <ModelSelect />,
+          desc: t('settingModel.model.desc'),
+          label: t('settingModel.model.title'),
+          name: 'model',
+          tag: 'model',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.temperature.desc'),
+          label: t('settingModel.temperature.title'),
+          name: ['params', 'temperature'],
+          tag: 'temperature',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.topP.desc'),
+          label: t('settingModel.topP.title'),
+          name: ['params', 'top_p'],
+          tag: 'top_p',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.presencePenalty.desc'),
+          label: t('settingModel.presencePenalty.title'),
+          name: ['params', 'presence_penalty'],
+          tag: 'presence_penalty',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.frequencyPenalty.desc'),
+          label: t('settingModel.frequencyPenalty.title'),
+          name: ['params', 'frequency_penalty'],
+          tag: 'frequency_penalty',
+        },
+        {
+          children: <Switch />,
+          label: t('settingModel.enableMaxTokens.title'),
+          minWidth: undefined,
+          name: 'enableMaxTokens',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32_000} min={0} step={100} />,
+          desc: t('settingModel.maxTokens.desc'),
+          divider: false,
+          hidden: !enableMaxTokens,
+          label: t('settingModel.maxTokens.title'),
+          name: ['params', 'max_tokens'],
+          tag: 'max_tokens',
+        },
+      ],
+      icon: BrainCog,
+      title: t('settingModel.title'),
+    };
+    return [chat, model];
+  }, [
+    displayMode,
+    enableAutoCreateTopic,
+    enableHistoryCount,
+    enableMaxTokens,
+    enableCompressThreshold,
+  ]);
+
+  return (
+    <Form
+      form={form}
+      items={formItems}
+      onValuesChange={debounce(updateConfig, 100)}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default AgentConfig;

package/src/features/AgentSetting/AgentConfig/useSyncConfig.ts

@@ -0,0 +1,23 @@
+import { FormInstance } from 'antd/es/form/hooks/useForm';
+import { useEffect } from 'react';
+
+import { useStoreApi } from '../store';
+
+export const useSyncConfig = (form: FormInstance) => {
+  const storeApi = useStoreApi();
+
+  useEffect(() => {
+    // set the first time
+    form.setFieldsValue(storeApi.getState().config);
+
+    // sync with later updated settings
+    const unsubscribe = storeApi.subscribe(
+      (s) => s.config,
+      (config) => form.setFieldsValue(config),
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+};

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { isString } from 'lodash-es';
-import { Wand2 } from 'lucide-react';
+import { UserCircle, Wand2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -120,12 +118,13 @@ const AgentMeta = memo(() => {
           </Button>
         </Tooltip>
       ),
+      icon: UserCircle,
       title: t('settingAgent.title'),
     }),
     [autocompleteItems, meta],
   );
 
-  return <Form items={[metaData]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />;
+  return <Form items={[metaData]} {...FORM_STYLE} />;
 });
 
 export default AgentMeta;

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -1,9 +1,7 @@
-'use client';
-
-import { Avatar, Form, Icon, ItemGroup, Tooltip } from '@lobehub/ui';
+import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
 import { Button, Empty, Space, Switch, Tag, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideTrash2, Store } from 'lucide-react';
+import { LucideToyBrick, LucideTrash2, Store } from 'lucide-react';
 import { memo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -92,70 +90,73 @@ const AgentPlugin = memo(() => {
   const hasDeprecated = deprecatedList.length > 0;
 
   const loadingSkeleton = LoadingList();
-
-  const extra = (
-    <Space.Compact style={{ width: 'auto' }}>
-      <AddPluginButton />
-      {hasDeprecated ? (
-        <Tooltip title={t('plugin.clearDeprecated')}>
-          <Button
-            icon={<Icon icon={LucideTrash2} />}
-            onClick={(e) => {
-              e.stopPropagation();
-              for (const i of deprecatedList) {
-                toggleAgentPlugin(i.tag as string);
-              }
-            }}
-            size={'small'}
-          />
-        </Tooltip>
-      ) : null}
-      <Tooltip title={t('plugin.store')}>
-        <Button
-          icon={<Icon icon={Store} />}
-          onClick={(e) => {
-            e.stopPropagation();
-            setShowStore(true);
-          }}
-          size={'small'}
-        />
-      </Tooltip>
-    </Space.Compact>
-  );
-
-  const empty = (
-    <Center padding={40}>
-      <Empty
-        description={
-          <Trans i18nKey={'plugin.empty'} ns={'setting'}>
-            暂无安装插件，
-            <Typography.Link
-              href={'/'}
-              onClick={(e) => {
-                e.preventDefault();
-                setShowStore(true);
-              }}
-            >
-              前往插件市场
-            </Typography.Link>
-            安装
-          </Trans>
-        }
-        image={Empty.PRESENTED_IMAGE_SIMPLE}
-      />
-    </Center>
-  );
-
-  const plugin: ItemGroup = {
-    children: isLoading ? loadingSkeleton : isEmpty ? empty : [...deprecatedList, ...list],
-    extra,
-    title: t('settingPlugin.title'),
-  };
-
   return (
     <>
       <PluginStore open={showStore} setOpen={setShowStore} />
-      <Form items={[plugin]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
+      <Form
+        items={[
+          {
+            children: isLoading ? (
+              loadingSkeleton
+            ) : isEmpty ? (
+              <Center padding={40}>
+                <Empty
+                  description={
+                    <Trans i18nKey={'plugin.empty'} ns={'setting'}>
+                      暂无安装插件，
+                      <Typography.Link
+                        href={'/'}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setShowStore(true);
+                        }}
+                      >
+                        前往插件市场
+                      </Typography.Link>
+                      安装
+                    </Trans>
+                  }
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                />
+              </Center>
+            ) : (
+              [...deprecatedList, ...list]
+            ),
+            extra: (
+              <Space.Compact style={{ width: 'auto' }}>
+                <AddPluginButton />
+                {hasDeprecated ? (
+                  <Tooltip title={t('plugin.clearDeprecated')}>
+                    <Button
+                      icon={<Icon icon={LucideTrash2} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        for (const i of deprecatedList) {
+                          toggleAgentPlugin(i.tag as string);
+                        }
+                      }}
+                      size={'small'}
+                    />
+                  </Tooltip>
+                ) : null}
+                <Tooltip title={t('plugin.store')}>
+                  <Button
+                    icon={<Icon icon={Store} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowStore(true);
+                    }}
+                    size={'small'}
+                  />
+                </Tooltip>
+              </Space.Compact>
+            ),
+            icon: LucideToyBrick,
+            title: t('settingPlugin.title'),
+          },
+        ]}
+        {...FORM_STYLE}
+      />
     </>
   );
 });