@lobehub/chat 0.152.1 → 0.152.2

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;

package/src/app/@modal/(.)settings/about/layout.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/about/layout';

package/src/app/@modal/(.)settings/about/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/about/page';

package/src/app/@modal/(.)settings/agent/layout.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/agent/layout';

package/src/app/@modal/(.)settings/agent/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/agent/page';

package/src/app/@modal/(.)settings/common/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/common/page';

package/src/app/@modal/(.)settings/layout.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren } from 'react';
+
+import SettingModalLayout from '../_layout/SettingModalLayout';
+
+const CategoryContent = dynamic(
+  () => import('@/app/(main)/settings/@category/features/CategoryContent'),
+  { loading: () => <Skeleton paragraph={{ rows: 6 }} title={false} /> },
+);
+const UpgradeAlert = dynamic(() => import('@/app/(main)/settings/features/UpgradeAlert'), {});
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <SettingModalLayout
+      category={
+        <>
+          <CategoryContent modal />
+          <UpgradeAlert />
+        </>
+      }
+    >
+      {children}
+    </SettingModalLayout>
+  );
+};
+
+export default Layout;

package/src/app/@modal/(.)settings/llm/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/llm/page';

package/src/app/@modal/(.)settings/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'antd';
+
+export default () => {
+  return <Skeleton paragraph={{ rows: 6 }} style={{ paddingBlock: 16 }} />;
+};

package/src/app/@modal/(.)settings/sync/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/sync/page';

package/src/app/@modal/(.)settings/tts/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/app/(main)/settings/tts/page';

package/src/app/@modal/_layout/SettingModalLayout.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useResponsive, useTheme, useThemeMode } from 'antd-style';
+import { ReactNode, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '@/app/(main)/settings/_layout/Desktop/Header';
+import SideBar from '@/app/(main)/settings/_layout/Desktop/SideBar';
+
+interface SettingLayoutProps {
+  category: ReactNode;
+  children: ReactNode;
+  desc?: string;
+  title?: string;
+}
+
+const SettingModalLayout = ({ children, category, desc, title }: SettingLayoutProps) => {
+  const ref = useRef<any>(null);
+  const theme = useTheme();
+  const { isDarkMode } = useThemeMode();
+  const { md = true } = useResponsive();
+
+  return (
+    <>
+      {md ? (
+        <SideBar
+          desc={desc}
+          style={{
+            background: isDarkMode ? theme.colorBgContainer : theme.colorFillTertiary,
+            borderColor: theme.colorFillTertiary,
+          }}
+          title={title}
+        >
+          {category}
+        </SideBar>
+      ) : (
+        <Header getContainer={() => ref.current}>{category}</Header>
+      )}
+      <Flexbox
+        align={'center'}
+        gap={64}
+        style={{
+          background: isDarkMode ? theme.colorFillQuaternary : theme.colorBgElevated,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          paddingBlock: 32,
+          paddingInline: 56,
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+    </>
+  );
+};
+
+SettingModalLayout.displayName = 'SettingModalLayout';
+
+export default SettingModalLayout;

package/src/app/@modal/chat/(.)settings/features/CategoryContent.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
+import Menu from '@/components/Menu';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+import { SettingsTabs, useCategory } from './useCategory';
+
+const CategoryContent = memo(() => {
+  const cateItems = useCategory();
+  const router = useQueryRoute();
+  const { tab = SettingsTabs.Meta } = useQuery();
+
+  return (
+    <>
+      <Menu
+        items={cateItems}
+        onClick={({ key }) => {
+          router.replace('/chat/settings', { tab: key });
+        }}
+        selectable
+        selectedKeys={[tab as any]}
+        variant={'compact'}
+      />
+      <Flexbox align={'center'} gap={8} paddingInline={8} width={'100%'}>
+        <HeaderContent modal />
+      </Flexbox>
+    </>
+  );
+});
+
+export default CategoryContent;

package/src/app/@modal/chat/(.)settings/features/useCategory.tsx

@@ -0,0 +1,62 @@
+import { Icon } from '@lobehub/ui';
+import { Blocks, Bot, BrainCog, MessagesSquare, Mic2, UserCircle } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuProps } from '@/components/Menu';
+
+export enum SettingsTabs {
+  Chat = 'chat',
+  Meta = 'meta',
+  Modal = 'modal',
+  Plugin = 'plugin',
+  Prompt = 'prompt',
+  TTS = 'tts',
+}
+
+interface UseCategoryOptions {
+  mobile?: boolean;
+}
+
+export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
+  const { t } = useTranslation('setting');
+  const iconSize = mobile ? { fontSize: 20 } : undefined;
+
+  const cateItems: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={UserCircle} size={iconSize} />,
+        key: SettingsTabs.Meta,
+        label: t('settingAgent.title'),
+      },
+      {
+        icon: <Icon icon={Bot} size={iconSize} />,
+        key: SettingsTabs.Prompt,
+        label: t('settingAgent.prompt.title'),
+      },
+      {
+        icon: <Icon icon={MessagesSquare} size={iconSize} />,
+        key: SettingsTabs.Chat,
+        label: t('settingChat.title'),
+      },
+      {
+        icon: <Icon icon={BrainCog} size={iconSize} />,
+        key: SettingsTabs.Modal,
+        label: t('settingModel.title'),
+      },
+      {
+        icon: <Icon icon={Mic2} size={iconSize} />,
+        key: SettingsTabs.TTS,
+        label: t('settingTTS.title'),
+      },
+      {
+        icon: <Icon icon={Blocks} size={iconSize} />,
+        key: SettingsTabs.Plugin,
+        label: t('settingPlugin.title'),
+      },
+    ],
+    [t],
+  );
+
+  return cateItems;
+};

package/src/app/@modal/chat/(.)settings/layout.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import isEqual from 'fast-deep-equal';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
+import { Provider, createStore } from '@/features/AgentSetting/store';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+
+import SettingModalLayout from '../../_layout/SettingModalLayout';
+
+const CategoryContent = dynamic(() => import('./features/CategoryContent'), {
+  loading: () => <Skeleton paragraph={{ rows: 6 }} title={false} />,
+  ssr: false,
+});
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const { t } = useTranslation('setting');
+  const id = useSessionStore((s) => s.activeId);
+  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
+  const [updateAgentConfig] = useAgentStore((s) => [s.updateAgentConfig]);
+
+  const [updateAgentMeta] = useSessionStore((s) => [
+    s.updateSessionMeta,
+    sessionMetaSelectors.currentAgentTitle(s),
+  ]);
+
+  return (
+    <SettingModalLayout
+      category={<CategoryContent />}
+      desc={t('header.sessionDesc')}
+      title={t('header.session')}
+    >
+      <Provider createStore={createStore}>
+        <StoreUpdater
+          config={config}
+          id={id}
+          meta={meta}
+          onConfigChange={updateAgentConfig}
+          onMetaChange={updateAgentMeta}
+        />
+        {children}
+      </Provider>
+    </SettingModalLayout>
+  );
+};
+
+export default Layout;

package/src/app/@modal/chat/(.)settings/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'antd';
+
+export default () => {
+  return <Skeleton paragraph={{ rows: 6 }} style={{ paddingBlock: 16 }} />;
+};