@lobehub/chat 0.127.0 → 0.127.1

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} />}
+    />
   );
 });
 

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

@@ -1,76 +1,51 @@
 import { Moonshot } from '@lobehub/icons';
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, Input, Switch } from 'antd';
+import { Input } from 'antd';
 import { useTheme } 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, LLMProviderConfigKey } from '../const';
-import { useSyncSettings } from '../useSyncSettings';
 
 const providerKey = 'moonshot';
 
 const MoonshotProvider = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
-  const theme = useTheme();
-  const [toggleProviderEnabled, setSettings] = useGlobalStore((s) => [
-    s.toggleProviderEnabled,
-    s.setSettings,
-  ]);
-  const enabled = useGlobalStore(modelProviderSelectors.enableMoonshot);
 
-  useSyncSettings(form);
+  const theme = useTheme();
 
-  const model: ItemGroup = {
-    children: [
-      {
-        children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={t('llm.Moonshot.token.placeholder')}
-          />
-        ),
-        desc: t('llm.Moonshot.token.desc'),
-        label: t('llm.Moonshot.token.title'),
-        name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-      },
-      {
-        children: <Checker model={'moonshot-v1-8k'} provider={ModelProvider.Moonshot} />,
-        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>
+  return (
+    <ProviderConfig
+      configItems={[
+        {
+          children: (
+            <Input.Password
+              autoComplete={'new-password'}
+              placeholder={t('llm.Moonshot.token.placeholder')}
+            />
+          ),
+          desc: t('llm.Moonshot.token.desc'),
+          label: t('llm.Moonshot.token.title'),
+          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
+        },
+        {
+          children: <Checker model={'moonshot-v1-8k'} provider={ModelProvider.Moonshot} />,
+          desc: t('llm.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: '100%',
+        },
+      ]}
+      provider={providerKey}
+      title={
         <Moonshot.Combine
           color={theme.isDarkMode ? theme.colorText : Moonshot.colorPrimary}
           size={24}
         />
-      </Flexbox>
-    ),
-  };
-
-  return (
-    <Form form={form} items={[model]} onValuesChange={debounce(setSettings, 100)} {...FORM_STYLE} />
+      }
+    />
   );
 });