@lobehub/chat 0.152.0 → 0.152.2

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

@@ -1,18 +1,31 @@
-'use client';
+import AgentChat from '@/features/AgentSetting/AgentChat';
+import AgentMeta from '@/features/AgentSetting/AgentMeta';
+import AgentModal from '@/features/AgentSetting/AgentModal';
+import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
+import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
+import AgentTTS from '@/features/AgentSetting/AgentTTS';
+import { translation } from '@/server/translation';
 
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.agent'),
+  };
+};
 
-import PageTitle from '@/components/PageTitle';
-
-import Agent from './Agent';
-
-export default memo(() => {
-  const { t } = useTranslation('setting');
+const Page = () => {
   return (
     <>
-      <PageTitle title={t('tab.agent')} />
-      <Agent />
+      <AgentPrompt />
+      <AgentMeta />
+      <AgentChat />
+      <AgentModal />
+      <AgentTTS />
+      <AgentPlugin />
     </>
   );
-});
+};
+
+Page.displayName = 'AgentSetting';
+
+export default Page;

package/src/app/(main)/settings/common/{Common.tsx → features/Common.tsx}

@@ -1,12 +1,13 @@
+'use client';
+
 import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, App, Button, Input } from 'antd';
+import { App, Button, Input } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { AppWindow } from 'lucide-react';
 import { signIn, signOut } from 'next-auth/react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { useSyncSettings } from '@/app/(main)/settings//hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import { useOAuthSession } from '@/hooks/useOAuthSession';
@@ -26,7 +27,7 @@ export interface SettingsCommonProps {
 
 const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin }) => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
+  const [form] = Form.useForm();
 
   const { user, isOAuthLoggedIn } = useOAuthSession();
 
@@ -146,7 +147,6 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
         minWidth: undefined,
       },
     ],
-    icon: AppWindow,
     title: t('settingSystem.title'),
   };
 
@@ -157,7 +157,9 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
       form={form}
       initialValues={settings}
       items={[system]}
+      itemsType={'group'}
       onValuesChange={setSettings}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );

package/src/app/(main)/settings/common/{Theme.tsx → features/Theme/index.tsx}

@@ -1,7 +1,9 @@
+'use client';
+
 import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
-import { Form as AntForm, Select } from 'antd';
+import { Select } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { Monitor, Moon, Palette, Sun } from 'lucide-react';
+import { Monitor, Moon, Sun } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,14 +16,13 @@ import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { switchLang } from '@/utils/client/switchLang';
 
-import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches';
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
 
 type SettingItemGroup = ItemGroup;
 
 const Theme = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
-
+  const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
 
@@ -125,7 +126,6 @@ const Theme = memo(() => {
         minWidth: undefined,
       },
     ],
-    icon: Palette,
     title: t('settingTheme.title'),
   };
 
@@ -134,7 +134,9 @@ const Theme = memo(() => {
       form={form}
       initialValues={settings}
       items={[theme]}
+      itemsType={'group'}
       onValuesChange={setSettings}
+      variant={'pure'}
       {...FORM_STYLE}
     />
   );

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

@@ -1,9 +1,26 @@
 import { getServerConfig } from '@/config/server';
+import { translation } from '@/server/translation';
 
-import Index from './index';
+import Common from './features/Common';
+import Theme from './features/Theme';
 
-export default () => {
-  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.common'),
+  };
+};
 
-  return <Index showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />;
+const Page = () => {
+  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+  return (
+    <>
+      <Theme />
+      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+    </>
+  );
 };
+
+Page.displayName = 'CommonSetting';
+
+export default Page;

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

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/settings/features/Footer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Divider } from 'antd';
 import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';

package/src/app/(main)/settings/features/UpgradeAlert.tsx

@@ -1,8 +1,11 @@
+'use client';
+
 import { Alert } from '@lobehub/ui';
 import { Button } from 'antd';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { MANUAL_UPGRADE_URL } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
@@ -11,23 +14,28 @@ const UpgradeAlert = memo(() => {
   const [hasNewVersion, latestVersion] = useGlobalStore((s) => [s.hasNewVersion, s.latestVersion]);
   const { t } = useTranslation('common');
 
+  if (!hasNewVersion) return;
+
   return (
-    hasNewVersion && (
-      <Alert
-        action={
-          <Link aria-label={t('upgradeVersion.action')} href={MANUAL_UPGRADE_URL} target={'_blank'}>
-            <Button size={'small'} type={'primary'}>
+    <Alert
+      closable
+      message={
+        <Flexbox gap={8}>
+          <p>{t('upgradeVersion.newVersion', { version: `v${latestVersion}` })}</p>
+          <Link
+            aria-label={t('upgradeVersion.action')}
+            href={MANUAL_UPGRADE_URL}
+            style={{ marginBottom: 6 }}
+            target={'_blank'}
+          >
+            <Button block size={'small'} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>
           </Link>
-        }
-        closable
-        message={t('upgradeVersion.newVersion', { version: latestVersion })}
-        showIcon={false}
-        style={{ marginBottom: 6 }}
-        type={'info'}
-      />
-    )
+        </Flexbox>
+      }
+      type={'info'}
+    />
   );
 });
 

package/src/app/(main)/settings/hooks/useCategory.tsx

@@ -0,0 +1,54 @@
+import { Icon } from '@lobehub/ui';
+import { Bot, Cloudy, Info, Mic2, Settings2, Webhook } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuProps } from '@/components/Menu';
+import { SettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+
+interface UseCategoryOptions {
+  mobile?: boolean;
+}
+
+export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
+  const { t } = useTranslation('setting');
+  const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
+
+  const iconSize = mobile ? { fontSize: 20 } : undefined;
+
+  const cateItems: MenuProps['items'] = useMemo(
+    () =>
+      [
+        {
+          icon: <Icon icon={Settings2} size={iconSize} />,
+          key: SettingsTabs.Common,
+          label: t('tab.common'),
+        },
+        enableWebrtc && {
+          icon: <Icon icon={Cloudy} size={iconSize} />,
+          key: SettingsTabs.Sync,
+          label: t('tab.sync'),
+        },
+        showLLM && {
+          icon: <Icon icon={Webhook} size={iconSize} />,
+          key: SettingsTabs.LLM,
+          label: t('tab.llm'),
+        },
+        { icon: <Icon icon={Mic2} size={iconSize} />, key: SettingsTabs.TTS, label: t('tab.tts') },
+        {
+          icon: <Icon icon={Bot} size={iconSize} />,
+          key: SettingsTabs.Agent,
+          label: t('tab.agent'),
+        },
+        {
+          icon: <Icon icon={Info} size={iconSize} />,
+          key: SettingsTabs.About,
+          label: t('tab.about'),
+        },
+      ].filter(Boolean) as MenuProps['items'],
+    [t, enableWebrtc, showLLM],
+  );
+
+  return cateItems;
+};

package/src/app/(main)/settings/hooks/useSyncSettings.ts

@@ -1,10 +1,10 @@
 import { FormInstance } from 'antd/es/form/hooks/useForm';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
 import { useUserStore } from '@/store/user';
 
 export const useSyncSettings = (form: FormInstance) => {
-  useEffect(() => {
+  useLayoutEffect(() => {
     // set the first time
     form.setFieldsValue(useUserStore.getState().settings);
 

package/src/app/(main)/settings/layout.ts

@@ -2,7 +2,10 @@ import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
 
-const SettingsLayout = ServerLayout({ Desktop, Mobile });
+const SettingsLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+
+SettingsLayout.displayName = 'SettingsLayout';
 
 export default SettingsLayout;

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

@@ -1,5 +1,6 @@
-import { Anthropic, Claude } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
+'use client';
+
+import { Anthropic } from '@lobehub/icons';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -7,19 +8,12 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const AnthropicProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'claude-3-haiku-20240307'}
       provider={ModelProvider.Anthropic}
       showEndpoint
-      title={
-        <Anthropic.Text
-          color={theme.isDarkMode ? theme.colorText : Claude.colorPrimary}
-          size={18}
-        />
-      }
+      title={<Anthropic.Text size={15} />}
     />
   );
 });

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Azure, OpenAI } from '@lobehub/icons';
 import { Markdown } from '@lobehub/ui';
 import { AutoComplete, Divider, Input } from 'antd';
@@ -95,7 +97,7 @@ const AzureOpenAIProvider = memo(() => {
       provider={providerKey}
       title={
         <Flexbox align={'center'} gap={8} horizontal>
-          <Azure.Combine size={24} type={'color'}></Azure.Combine>
+          <Azure.Combine size={22} type={'color'}></Azure.Combine>
           <Divider style={{ margin: '0 4px' }} type={'vertical'} />
           <OpenAI.Combine size={24}></OpenAI.Combine>
         </Flexbox>

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Aws, Bedrock } from '@lobehub/icons';
 import { Divider, Input, Select } from 'antd';
 import { memo } from 'react';
@@ -62,7 +64,7 @@ const BedrockProvider = memo(() => {
         <Flexbox align={'center'} gap={8} horizontal>
           <Aws.Color size={32} />
           <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-          <Bedrock.Combine size={24} type={'color'} />
+          <Bedrock.Combine size={26} type={'color'} />
         </Flexbox>
       }
     />

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Gemini, Google } from '@lobehub/icons';
 import { Divider } from 'antd';
 import { memo } from 'react';
@@ -15,9 +17,9 @@ const GoogleProvider = memo(() => {
       showEndpoint
       title={
         <Flexbox align={'center'} gap={8} horizontal>
-          <Google.BrandColor size={28} />
+          <Google.BrandColor size={22} />
           <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-          <Gemini.Combine size={24} type={'color'} />
+          <Gemini.Combine size={22} type={'color'} />
         </Flexbox>
       }
     />

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Groq } from '@lobehub/icons';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
@@ -13,7 +15,7 @@ const GroqProvider = memo(() => {
     <ProviderConfig
       checkModel={'gemma-7b-it'}
       provider={ModelProvider.Groq}
-      title={<Groq.Text color={theme.isDarkMode ? theme.colorText : Groq.colorPrimary} size={24} />}
+      title={<Groq.Text color={theme.isDarkMode ? theme.colorText : Groq.colorPrimary} size={20} />}
     />
   );
 });

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

@@ -1,5 +1,6 @@
+'use client';
+
 import { Minimax } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -7,18 +8,11 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const MinimaxProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'abab5.5s-chat'}
       provider={ModelProvider.Minimax}
-      title={
-        <Minimax.Combine
-          color={theme.isDarkMode ? theme.colorText : Minimax.colorPrimary}
-          size={32}
-        />
-      }
+      title={<Minimax.Combine size={32} type={'color'} />}
     />
   );
 });

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

@@ -1,5 +1,6 @@
+'use client';
+
 import { Mistral } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -7,18 +8,11 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const MistralProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'open-mistral-7b'}
       provider={ModelProvider.Mistral}
-      title={
-        <Mistral.Combine
-          color={theme.isDarkMode ? theme.colorText : Mistral.colorPrimary}
-          size={24}
-        />
-      }
+      title={<Mistral.Combine size={26} type={'color'} />}
     />
   );
 });

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Moonshot } from '@lobehub/icons';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
@@ -16,7 +18,7 @@ const MoonshotProvider = memo(() => {
       title={
         <Moonshot.Combine
           color={theme.isDarkMode ? theme.colorText : Moonshot.colorPrimary}
-          size={24}
+          size={22}
         />
       }
     />

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Ollama } from '@lobehub/icons';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,7 +25,7 @@ const OllamaProvider = memo(() => {
       showApiKey={false}
       showBrowserRequest
       showEndpoint
-      title={<Ollama.Combine size={24} />}
+      title={<Ollama.Combine size={28} />}
     />
   );
 });

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { OpenAI } from '@lobehub/icons';
 import { memo } from 'react';
 

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

@@ -1,5 +1,6 @@
+'use client';
+
 import { OpenRouter } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -7,19 +8,12 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const OpenRouterProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'mistralai/mistral-7b-instruct:free'}
       modelList={{ showModelFetcher: true }}
       provider={ModelProvider.OpenRouter}
-      title={
-        <OpenRouter.Combine
-          color={theme.isDarkMode ? theme.colorText : OpenRouter.colorPrimary}
-          size={24}
-        />
-      }
+      title={<OpenRouter.Combine iconProps={{ color: OpenRouter.colorPrimary }} size={20} />}
     />
   );
 });

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

@@ -1,5 +1,6 @@
+'use client';
+
 import { Perplexity } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -7,18 +8,11 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const PerplexityProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'pplx-7b-chat'}
       provider={ModelProvider.Perplexity}
-      title={
-        <Perplexity.Combine
-          color={theme.isDarkMode ? theme.colorText : Perplexity.colorPrimary}
-          size={24}
-        />
-      }
+      title={<Perplexity.Combine size={24} type={'color'} />}
     />
   );
 });

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

@@ -1,23 +1,17 @@
+'use client';
+
 import { Together } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import ProviderConfig from '../components/ProviderConfig';
 
 const TogetherAIProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'togethercomputer/alpaca-7b'}
       modelList={{ showModelFetcher: true }}
       provider={'togetherai'}
-      title={
-        <Together.Combine
-          color={theme.isDarkMode ? theme.colorText : Together.colorPrimary}
-          size={24}
-        />
-      }
+      title={<Together.Combine size={26} type={'color'} />}
     />
   );
 });

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

@@ -1,5 +1,6 @@
+'use client';
+
 import { ZeroOne } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -7,18 +8,11 @@ import { ModelProvider } from '@/libs/agent-runtime';
 import ProviderConfig from '../components/ProviderConfig';
 
 const ZeroOneProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'yi-34b-chat-0205'}
       provider={ModelProvider.ZeroOne}
-      title={
-        <ZeroOne.Combine
-          color={theme.isDarkMode ? theme.colorText : ZeroOne.colorPrimary}
-          size={32}
-        />
-      }
+      title={<ZeroOne.Text size={20} />}
     />
   );
 });

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

@@ -1,23 +1,16 @@
+'use client';
+
 import { Zhipu } from '@lobehub/icons';
-import { useTheme } from 'antd-style';
-import { lighten } from 'polished';
 import { memo } from 'react';
 
 import ProviderConfig from '../components/ProviderConfig';
 
 const ZhipuProvider = memo(() => {
-  const theme = useTheme();
-
   return (
     <ProviderConfig
       checkModel={'glm-3-turbo'}
       provider={'zhipu'}
-      title={
-        <Zhipu.Combine
-          color={theme.isDarkMode ? lighten(0.1, Zhipu.colorPrimary) : Zhipu.colorPrimary}
-          size={32}
-        />
-      }
+      title={<Zhipu.Combine size={32} type={'color'} />}
     />
   );
 });

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { CheckCircleFilled } from '@ant-design/icons';
 import { Alert, Highlighter } from '@lobehub/ui';
 import { Button } from 'antd';