@lobehub/chat 0.127.0 → 0.127.2

package/src/app/settings/features/SettingList/Item.tsx

@@ -0,0 +1,50 @@
+import { Icon, List } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { ChevronRight, type LucideIcon } from 'lucide-react';
+import { CSSProperties, ReactNode, memo } from 'react';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  container: css`
+    position: relative;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    border-radius: ${token.borderRadius}px;
+    ${responsive.mobile} {
+      border-radius: 0;
+    }
+  `,
+  noHover: css`
+    pointer-events: none;
+  `,
+}));
+
+export interface ItemProps {
+  active?: boolean;
+  className?: string;
+  hoverable?: boolean;
+  icon: LucideIcon;
+  label: ReactNode;
+  style?: CSSProperties;
+}
+
+const SettingItem = memo<ItemProps>(
+  ({ label, icon, hoverable = true, active = false, style, className }) => {
+    const { cx, styles } = useStyles();
+    const { mobile } = useResponsive();
+    return (
+      <Item
+        active={active}
+        avatar={<Icon icon={icon} size={{ fontSize: 20 }} />}
+        className={cx(styles.container, !hoverable && styles.noHover, className)}
+        style={style}
+        title={label as string}
+      >
+        {mobile && <Icon icon={ChevronRight} size={{ fontSize: 16 }} />}
+      </Item>
+    );
+  },
+);
+
+export default SettingItem;

package/src/app/settings/features/{SideBar/List.tsx → SettingList/index.tsx}

@@ -1,18 +1,19 @@
-import { useResponsive } from 'antd-style';
 import { Bot, Mic2, Settings2, Webhook } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import Item from './Item';
 
-const List = memo(() => {
+export interface SettingListProps {
+  activeTab?: SettingsTabs;
+  mobile?: boolean;
+}
+
+const SettingList = memo<SettingListProps>(({ activeTab, mobile }) => {
   const { t } = useTranslation('setting');
-  const [tab, switchSettingTabs] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
-  const { mobile } = useResponsive();
 
   const items = [
     { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },
@@ -22,17 +23,15 @@ const List = memo(() => {
   ];
 
   return items.map(({ value, icon, label }) => (
-    <Link
-      aria-label={label}
-      href={`/settings/${value}`}
-      key={value}
-      onClick={() => {
-        switchSettingTabs(value);
-      }}
-    >
-      <Item active={mobile ? false : tab === value} icon={icon} label={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 List;
+export default SettingList;

package/src/app/settings/layout.server.tsx

@@ -1,12 +1,19 @@
-import { PropsWithChildren, memo } from 'react';
+import { PropsWithChildren, ReactNode, memo } from 'react';
 
 import ResponsiveLayout from '@/layout/ResponsiveLayout.server';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import DesktopLayout from './(desktop)/layout.responsive';
 import MobileLayout from './(mobile)/layout.mobile';
 
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+export interface SettingLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+const SettingLayout = memo<SettingLayoutProps>(({ children, ...res }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} {...res}>
     {children}
   </ResponsiveLayout>
 ));
+
+export default SettingLayout;

package/src/app/settings/llm/Azure/index.tsx

@@ -1,20 +1,16 @@
 import { Azure, OpenAI } from '@lobehub/icons';
-import { Form, type ItemGroup, Markdown } from '@lobehub/ui';
-import { Form as AntForm, AutoComplete, Divider, Input, Switch } from 'antd';
+import { Markdown } from '@lobehub/ui';
+import { AutoComplete, Divider, Input } from 'antd';
 import { createStyles } from 'antd-style';
-import { debounce } from 'lodash-es';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelProvider } from '@/libs/agent-runtime';
-import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
 
-import Checker from '../Checker';
+import Checker from '../components/Checker';
+import ProviderConfig from '../components/ProviderConfig';
 import { LLMProviderApiTokenKey, LLMProviderBaseUrlKey, LLMProviderConfigKey } from '../const';
-import { useSyncSettings } from '../useSyncSettings';
 
 const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
@@ -37,107 +33,83 @@ const providerKey = 'azure';
 
 const AzureOpenAIProvider = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
-  const { styles } = useStyles();
-
-  const [toggleProviderEnabled, setSettings] = useGlobalStore((s) => [
-    s.toggleProviderEnabled,
-    s.setSettings,
-  ]);
-
-  const enabled = useGlobalStore(modelProviderSelectors.enableAzure);
-
-  useSyncSettings(form);
 
-  const openAI: ItemGroup = {
-    children: [
-      {
-        children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={t('llm.AzureOpenAI.token.placeholder')}
-          />
-        ),
-        desc: t('llm.AzureOpenAI.token.desc'),
-        label: t('llm.AzureOpenAI.token.title'),
-        name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-      },
-      {
-        children: <Input allowClear placeholder={t('llm.AzureOpenAI.endpoint.placeholder')} />,
-        desc: t('llm.AzureOpenAI.endpoint.desc'),
-        label: t('llm.AzureOpenAI.endpoint.title'),
-        name: [LLMProviderConfigKey, providerKey, LLMProviderBaseUrlKey],
-      },
-      {
-        children: (
-          <AutoComplete
-            options={[
-              '2023-12-01-preview',
-              '2023-08-01-preview',
-              '2023-07-01-preview',
-              '2023-06-01-preview',
-              '2023-03-15-preview',
-            ].map((i) => ({
-              label: i,
-              value: i,
-            }))}
-            placeholder={'20XX-XX-XX'}
-          />
-        ),
-        desc: (
-          <Markdown className={styles.markdown}>
-            {t('llm.AzureOpenAI.azureApiVersion.desc')}
-          </Markdown>
-        ),
-        label: t('llm.AzureOpenAI.azureApiVersion.title'),
-        name: [LLMProviderConfigKey, providerKey, 'apiVersion'],
-      },
-      {
-        children: (
-          <Input.TextArea
-            allowClear
-            placeholder={'gpt-35-16k,my-gpt=gpt-35-turbo'}
-            style={{ height: 100 }}
-          />
-        ),
-        desc: (
-          <Markdown className={styles.markdown}>{t('llm.AzureOpenAI.deployments.desc')}</Markdown>
-        ),
-
-        label: t('llm.AzureOpenAI.deployments.title'),
-        name: [LLMProviderConfigKey, providerKey, 'deployments'],
-      },
-      {
-        children: <Checker model={'gpt-3.5-turbo'} provider={ModelProvider.Azure} />,
-        desc: t('llm.checker.desc'),
-        label: t('llm.checker.title'),
-        minWidth: undefined,
-      },
-    ],
-    defaultActive: enabled,
-    extra: (
-      <Switch
-        onChange={(enabled) => {
-          toggleProviderEnabled(providerKey, enabled);
-        }}
-        value={enabled}
-      />
-    ),
-    title: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Azure.Combine size={24} type={'color'}></Azure.Combine>
-        <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-        <OpenAI.Combine size={24}></OpenAI.Combine>
-      </Flexbox>
-    ),
-  };
+  const { styles } = useStyles();
 
   return (
-    <Form
-      form={form}
-      items={[openAI]}
-      onValuesChange={debounce(setSettings, 100)}
-      {...FORM_STYLE}
+    <ProviderConfig
+      configItems={[
+        {
+          children: (
+            <Input.Password
+              autoComplete={'new-password'}
+              placeholder={t('llm.AzureOpenAI.token.placeholder')}
+            />
+          ),
+          desc: t('llm.AzureOpenAI.token.desc'),
+          label: t('llm.AzureOpenAI.token.title'),
+          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
+        },
+        {
+          children: <Input allowClear placeholder={t('llm.AzureOpenAI.endpoint.placeholder')} />,
+          desc: t('llm.AzureOpenAI.endpoint.desc'),
+          label: t('llm.AzureOpenAI.endpoint.title'),
+          name: [LLMProviderConfigKey, providerKey, LLMProviderBaseUrlKey],
+        },
+        {
+          children: (
+            <AutoComplete
+              options={[
+                '2023-12-01-preview',
+                '2023-08-01-preview',
+                '2023-07-01-preview',
+                '2023-06-01-preview',
+                '2023-03-15-preview',
+              ].map((i) => ({
+                label: i,
+                value: i,
+              }))}
+              placeholder={'20XX-XX-XX'}
+            />
+          ),
+          desc: (
+            <Markdown className={styles.markdown}>
+              {t('llm.AzureOpenAI.azureApiVersion.desc')}
+            </Markdown>
+          ),
+          label: t('llm.AzureOpenAI.azureApiVersion.title'),
+          name: [LLMProviderConfigKey, providerKey, 'apiVersion'],
+        },
+        {
+          children: (
+            <Input.TextArea
+              allowClear
+              placeholder={'gpt-35-16k,my-gpt=gpt-35-turbo'}
+              style={{ height: 100 }}
+            />
+          ),
+          desc: (
+            <Markdown className={styles.markdown}>{t('llm.AzureOpenAI.deployments.desc')}</Markdown>
+          ),
+
+          label: t('llm.AzureOpenAI.deployments.title'),
+          name: [LLMProviderConfigKey, providerKey, 'deployments'],
+        },
+        {
+          children: <Checker model={'gpt-3.5-turbo'} provider={ModelProvider.Azure} />,
+          desc: t('llm.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: undefined,
+        },
+      ]}
+      provider={providerKey}
+      title={
+        <Flexbox align={'center'} gap={8} horizontal>
+          <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/settings/llm/Bedrock/index.tsx

@@ -1,108 +1,79 @@
 import { Aws, Bedrock } from '@lobehub/icons';
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, Divider, Input, Select, Switch } from 'antd';
-import { debounce } from 'lodash-es';
+import { Divider, Input, Select } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelProvider } from '@/libs/agent-runtime';
-import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
 import { GlobalLLMProviderKey } from '@/types/settings';
 
-import Checker from '../Checker';
+import Checker from '../components/Checker';
+import ProviderConfig from '../components/ProviderConfig';
 import { LLMProviderConfigKey } from '../const';
-import { useSyncSettings } from '../useSyncSettings';
 
 const providerKey: GlobalLLMProviderKey = 'bedrock';
 
 const BedrockProvider = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
-  const [toggleProviderEnabled, setSettings] = useGlobalStore((s) => [
-    s.toggleProviderEnabled,
-    s.setSettings,
-  ]);
-  const enabled = useGlobalStore(modelProviderSelectors.enableBedrock);
-
-  useSyncSettings(form);
-
-  const model: ItemGroup = {
-    children: [
-      {
-        children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={t('llm.Bedrock.accessKeyId.placeholder')}
-          />
-        ),
-        desc: t('llm.Bedrock.accessKeyId.desc'),
-        label: t('llm.Bedrock.accessKeyId.title'),
-        name: [LLMProviderConfigKey, providerKey, 'accessKeyId'],
-      },
-      {
-        children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={t('llm.Bedrock.secretAccessKey.placeholder')}
-          />
-        ),
-        desc: t('llm.Bedrock.secretAccessKey.desc'),
-        label: t('llm.Bedrock.secretAccessKey.title'),
-        name: [LLMProviderConfigKey, providerKey, 'secretAccessKey'],
-      },
-      {
-        children: (
-          <Select
-            allowClear
-            options={['us-east-1', 'us-west-2', 'ap-southeast-1'].map((i) => ({
-              label: i,
-              value: i,
-            }))}
-            placeholder={'us-east-1'}
-          />
-        ),
-        desc: t('llm.Bedrock.region.desc'),
-        label: t('llm.Bedrock.region.title'),
-        name: [LLMProviderConfigKey, providerKey, 'region'],
-      },
-      {
-        children: (
-          <Checker model={'anthropic.claude-instant-v1'} provider={ModelProvider.Bedrock} />
-        ),
-        desc: t('llm.Bedrock.checker.desc'),
-        label: t('llm.checker.title'),
-        minWidth: '100%',
-      },
-    ],
-    defaultActive: enabled,
-    extra: (
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <Switch
-          onChange={(enabled) => {
-            toggleProviderEnabled(providerKey, enabled);
-          }}
-          value={enabled}
-        />
-      </div>
-    ),
-    title: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Aws.Color size={32} />
-        <Divider style={{ margin: '0 4px' }} type={'vertical'} />
-        <Bedrock.Combine size={24} type={'color'} />
-      </Flexbox>
-    ),
-  };
 
   return (
-    <Form form={form} items={[model]} onValuesChange={debounce(setSettings, 100)} {...FORM_STYLE} />
+    <ProviderConfig
+      configItems={[
+        {
+          children: (
+            <Input.Password
+              autoComplete={'new-password'}
+              placeholder={t('llm.Bedrock.accessKeyId.placeholder')}
+            />
+          ),
+          desc: t('llm.Bedrock.accessKeyId.desc'),
+          label: t('llm.Bedrock.accessKeyId.title'),
+          name: [LLMProviderConfigKey, providerKey, 'accessKeyId'],
+        },
+        {
+          children: (
+            <Input.Password
+              autoComplete={'new-password'}
+              placeholder={t('llm.Bedrock.secretAccessKey.placeholder')}
+            />
+          ),
+          desc: t('llm.Bedrock.secretAccessKey.desc'),
+          label: t('llm.Bedrock.secretAccessKey.title'),
+          name: [LLMProviderConfigKey, providerKey, 'secretAccessKey'],
+        },
+        {
+          children: (
+            <Select
+              allowClear
+              options={['us-east-1', 'us-west-2', 'ap-southeast-1'].map((i) => ({
+                label: i,
+                value: i,
+              }))}
+              placeholder={'us-east-1'}
+            />
+          ),
+          desc: t('llm.Bedrock.region.desc'),
+          label: t('llm.Bedrock.region.title'),
+          name: [LLMProviderConfigKey, providerKey, 'region'],
+        },
+        {
+          children: (
+            <Checker model={'anthropic.claude-instant-v1'} provider={ModelProvider.Bedrock} />
+          ),
+          desc: t('llm.Bedrock.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: '100%',
+        },
+      ]}
+      provider={providerKey}
+      title={
+        <Flexbox align={'center'} gap={8} horizontal>
+          <Aws.Color size={32} />
+          <Divider style={{ margin: '0 4px' }} type={'vertical'} />
+          <Bedrock.Combine size={24} type={'color'} />
+        </Flexbox>
+      }
+    />
   );
 });
 

package/src/app/settings/llm/Google/index.tsx

@@ -1,73 +1,44 @@
 import { Google } from '@lobehub/icons';
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, Input, Switch } from 'antd';
-import { debounce } from 'lodash-es';
+import { Input } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelProvider } from '@/libs/agent-runtime';
-import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
 import { GlobalLLMProviderKey } from '@/types/settings';
 
-import Checker from '../Checker';
+import Checker from '../components/Checker';
+import ProviderConfig from '../components/ProviderConfig';
 import { LLMProviderApiTokenKey, LLMProviderConfigKey } from '../const';
-import { useSyncSettings } from '../useSyncSettings';
 
 const providerKey: GlobalLLMProviderKey = 'google';
 
 const GoogleProvider = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
-  useSyncSettings(form);
-
-  const [toggleProviderEnabled, setSettings] = useGlobalStore((s) => [
-    s.toggleProviderEnabled,
-    s.setSettings,
-  ]);
-
-  const enabled = useGlobalStore(modelProviderSelectors.enableGoogle);
-
-  const model: ItemGroup = {
-    children: [
-      {
-        children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={t('llm.Google.token.placeholder')}
-          />
-        ),
-        desc: t('llm.Google.token.desc'),
-        label: t('llm.Google.token.title'),
-        name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-      },
-      {
-        children: <Checker model={'gemini-pro'} provider={ModelProvider.Google} />,
-        desc: t('llm.checker.desc'),
-        label: t('llm.checker.title'),
-        minWidth: '100%',
-      },
-    ],
-    defaultActive: enabled,
-    extra: (
-      <Switch
-        onChange={(enabled) => {
-          toggleProviderEnabled(providerKey, enabled);
-        }}
-        value={enabled}
-      />
-    ),
-    title: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Google.BrandColor size={28} />
-      </Flexbox>
-    ),
-  };
 
   return (
-    <Form form={form} items={[model]} onValuesChange={debounce(setSettings, 100)} {...FORM_STYLE} />
+    <ProviderConfig
+      configItems={[
+        {
+          children: (
+            <Input.Password
+              autoComplete={'new-password'}
+              placeholder={t('llm.Google.token.placeholder')}
+            />
+          ),
+          desc: t('llm.Google.token.desc'),
+          label: t('llm.Google.token.title'),
+          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
+        },
+        {
+          children: <Checker model={'gemini-pro'} provider={ModelProvider.Google} />,
+          desc: t('llm.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: '100%',
+        },
+      ]}
+      provider={providerKey}
+      title={<Google.BrandColor size={28} />}
+    />
   );
 });