@lobehub/chat 0.152.3 → 0.152.5

package/src/app/(main)/settings/about/Analytics.tsx

@@ -0,0 +1,40 @@
+import { Switch } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors } from '@/store/user/selectors';
+
+import { useStyles } from './style';
+
+const Analytics = memo(() => {
+  const { t } = useTranslation('setting');
+  const { styles } = useStyles();
+  const checked = useUserStore(preferenceSelectors.userAllowTrace);
+  const [updatePreference] = useUserStore((s) => [s.updatePreference]);
+
+  return (
+    <div className={styles.wrapper}>
+      <Flexbox className={styles.container} gap={24} padding={16}>
+        <Flexbox className={styles.title} gap={8} horizontal>
+          {t('analytics.title')}
+        </Flexbox>
+        <Flexbox gap={24} horizontal>
+          <Switch
+            checked={!!checked}
+            onChange={(e) => {
+              updatePreference({ telemetry: e });
+            }}
+          />
+          <Flexbox gap={8}>
+            <Flexbox>{t('analytics.telemetry.title')}</Flexbox>
+            <Flexbox className={styles.desc}>{t('analytics.telemetry.desc')}</Flexbox>
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    </div>
+  );
+});
+
+export default Analytics;

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

@@ -1,17 +1,37 @@
-import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/responsive';
+'use client';
 
-import Page from './index';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-export const generateMetadata = async () => {
-  const { t } = await translation('setting');
-  return {
-    title: t('tab.about'),
-  };
-};
+import PageTitle from '@/components/PageTitle';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 
-export default () => {
-  const isMobile = isMobileDevice();
+import AboutList from './AboutList';
+import Analytics from './Analytics';
 
-  return <Page mobile={isMobile} />;
-};
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    max-width: 1024px;
+  `,
+}));
+
+export default memo(() => {
+  const { t } = useTranslation('setting');
+
+  const { styles } = useStyles();
+  const enabledTelemetryChat = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
+
+  return (
+    <>
+      <PageTitle title={t('tab.tts')} />
+      <Flexbox align={'center'} className={styles.container} gap={12}>
+        <AboutList />
+        {enabledTelemetryChat && <Analytics />}
+      </Flexbox>
+    </>
+  );
+});

package/src/app/(main)/settings/about/style.ts

@@ -0,0 +1,22 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, responsive }) => ({
+  container: css`
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+  `,
+  desc: css`
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    font-size: 16px;
+    font-weight: 600;
+  `,
+  wrapper: css`
+    width: 100%;
+
+    ${responsive.mobile} {
+      padding: 0 12px;
+    }
+  `,
+}));

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

@@ -0,0 +1,29 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import AgentSetting from '@/features/AgentSetting';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const Agent = memo(() => {
+  const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
+  const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
+  const [updateAgent] = useUserStore((s) => [s.updateDefaultAgent]);
+
+  return (
+    <AgentSetting
+      config={config}
+      id={INBOX_SESSION_ID}
+      meta={meta}
+      onConfigChange={(config) => {
+        updateAgent({ config });
+      }}
+      onMetaChange={(meta) => {
+        updateAgent({ meta });
+      }}
+    />
+  );
+});
+
+export default Agent;

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

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

package/src/app/(main)/settings/agent/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.agent'),
-  };
-};
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
-export { default } from './index';
+import PageTitle from '@/components/PageTitle';
+
+import Agent from './Agent';
+
+export default memo(() => {
+  const { t } = useTranslation('setting');
+  return (
+    <>
+      <PageTitle title={t('tab.agent')} />
+      <Agent />
+    </>
+  );
+});

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

@@ -1,13 +1,12 @@
-'use client';
-
 import { Form, type ItemGroup } from '@lobehub/ui';
-import { App, Button, Input } from 'antd';
+import { Form as AntForm, 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';
@@ -27,7 +26,7 @@ export interface SettingsCommonProps {
 
 const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin }) => {
   const { t } = useTranslation('setting');
-  const [form] = Form.useForm();
+  const [form] = AntForm.useForm();
 
   const { user, isOAuthLoggedIn } = useOAuthSession();
 
@@ -147,6 +146,7 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin
         minWidth: undefined,
       },
     ],
+    icon: AppWindow,
     title: t('settingSystem.title'),
   };
 
@@ -157,9 +157,7 @@ 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/{features/Theme/index.tsx → Theme.tsx}

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

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

@@ -1,19 +1,24 @@
-import { getServerConfig } from '@/config/server';
+'use client';
 
-import Common from './features/Common';
-import Theme from './features/Theme';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
-const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+import PageTitle from '@/components/PageTitle';
+import { CURRENT_VERSION } from '@/const/version';
+
+import Footer from '../features/Footer';
+import Common, { SettingsCommonProps } from './Common';
+import Theme from './Theme';
+
+export default memo<SettingsCommonProps>((props) => {
+  const { t } = useTranslation('setting');
 
-const Page = () => {
   return (
     <>
+      <PageTitle title={t('tab.common')} />
       <Theme />
-      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+      <Common {...props} />
+      <Footer>LobeChat v{CURRENT_VERSION}</Footer>
     </>
   );
-};
-
-Page.displayName = 'CommonSetting';
-
-export default Page;
+});

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

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

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

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

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

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

package/src/app/(main)/settings/features/SettingList/index.tsx

@@ -0,0 +1,47 @@
+import { Bot, Cloudy, Info, Mic2, Settings2, Webhook } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+
+import Item from './Item';
+
+interface TabItem {
+  icon: any;
+  label: string;
+  value: SettingsTabs;
+}
+
+export interface SettingListProps {
+  activeTab?: SettingsTabs;
+  mobile?: boolean;
+}
+
+const SettingList = memo<SettingListProps>(({ activeTab, mobile }) => {
+  const { t } = useTranslation('setting');
+  const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
+
+  const items = [
+    { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },
+    enableWebrtc && { icon: Cloudy, label: t('tab.sync'), value: SettingsTabs.Sync },
+    showLLM && { icon: Webhook, label: t('tab.llm'), value: SettingsTabs.LLM },
+    { icon: Mic2, label: t('tab.tts'), value: SettingsTabs.TTS },
+    { icon: Bot, label: t('tab.agent'), value: SettingsTabs.Agent },
+    { icon: Info, label: t('tab.about'), value: SettingsTabs.About },
+  ].filter(Boolean) as TabItem[];
+
+  return items.map(({ value, icon, label }) => (
+    <Link aria-label={label} href={`/settings/${value}`} key={value}>
+      <Item
+        active={mobile ? false : activeTab === value}
+        hoverable={!mobile}
+        icon={icon}
+        label={label}
+      />
+    </Link>
+  ));
+});
+
+export default SettingList;

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

@@ -1,11 +1,8 @@
-'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';
@@ -14,28 +11,23 @@ const UpgradeAlert = memo(() => {
   const [hasNewVersion, latestVersion] = useGlobalStore((s) => [s.hasNewVersion, s.latestVersion]);
   const { t } = useTranslation('common');
 
-  if (!hasNewVersion) return;
-
   return (
-    <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'}>
+    hasNewVersion && (
+      <Alert
+        action={
+          <Link aria-label={t('upgradeVersion.action')} href={MANUAL_UPGRADE_URL} target={'_blank'}>
+            <Button size={'small'} type={'primary'}>
               {t('upgradeVersion.action')}
             </Button>
           </Link>
-        </Flexbox>
-      }
-      type={'info'}
-    />
+        }
+        closable
+        message={t('upgradeVersion.newVersion', { version: latestVersion })}
+        showIcon={false}
+        style={{ marginBottom: 6 }}
+        type={'info'}
+      />
+    )
   );
 });
 

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

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

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

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

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

@@ -1,6 +1,5 @@
-'use client';
-
-import { Anthropic } from '@lobehub/icons';
+import { Anthropic, Claude } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,12 +7,19 @@ 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 size={15} />}
+      title={
+        <Anthropic.Text
+          color={theme.isDarkMode ? theme.colorText : Claude.colorPrimary}
+          size={18}
+        />
+      }
     />
   );
 });

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
-'use client';
-
 import { Minimax } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,11 +7,18 @@ 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 size={32} type={'color'} />}
+      title={
+        <Minimax.Combine
+          color={theme.isDarkMode ? theme.colorText : Minimax.colorPrimary}
+          size={32}
+        />
+      }
     />
   );
 });

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

@@ -1,6 +1,5 @@
-'use client';
-
 import { Mistral } from '@lobehub/icons';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import { ModelProvider } from '@/libs/agent-runtime';
@@ -8,11 +7,18 @@ 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 size={26} type={'color'} />}
+      title={
+        <Mistral.Combine
+          color={theme.isDarkMode ? theme.colorText : Mistral.colorPrimary}
+          size={24}
+        />
+      }
     />
   );
 });

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

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

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

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

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

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