@lobehub/chat 0.127.0 → 0.127.2

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

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

@@ -1,80 +1,54 @@
 import { Ollama } 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 { LLMProviderBaseUrlKey, LLMProviderConfigKey } from '../const';
-import { useSyncSettings } from '../useSyncSettings';
 
 const providerKey = 'ollama';
 
 const OllamaProvider = 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.enableOllama);
-
-  useSyncSettings(form);
-
-  const model: ItemGroup = {
-    children: [
-      {
-        children: <Input allowClear placeholder={t('llm.Ollama.endpoint.placeholder')} />,
-        desc: t('llm.Ollama.endpoint.desc'),
-        label: t('llm.Ollama.endpoint.title'),
-        name: [LLMProviderConfigKey, providerKey, LLMProviderBaseUrlKey],
-      },
-      {
-        children: (
-          <Input.TextArea
-            allowClear
-            placeholder={t('llm.Ollama.customModelName.placeholder')}
-            style={{ height: 100 }}
-          />
-        ),
-        desc: t('llm.Ollama.customModelName.desc'),
-        label: t('llm.Ollama.customModelName.title'),
-        name: [LLMProviderConfigKey, providerKey, 'customModelName'],
-      },
-      {
-        children: <Checker model={'llama2'} provider={ModelProvider.Ollama} />,
-        desc: t('llm.Ollama.checker.desc'),
-        label: t('llm.checker.title'),
-        minWidth: undefined,
-      },
-    ],
-    defaultActive: enabled,
-    extra: (
-      <Switch
-        onChange={(enabled: boolean) => {
-          toggleProviderEnabled(providerKey, enabled);
-        }}
-        value={enabled}
-      />
-    ),
-    title: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Ollama.Combine color={theme.isDarkMode ? theme.colorText : theme.colorPrimary} size={24} />
-      </Flexbox>
-    ),
-  };
 
   return (
-    <Form form={form} items={[model]} onValuesChange={debounce(setSettings, 100)} {...FORM_STYLE} />
+    <ProviderConfig
+      configItems={[
+        {
+          children: <Input allowClear placeholder={t('llm.Ollama.endpoint.placeholder')} />,
+          desc: t('llm.Ollama.endpoint.desc'),
+          label: t('llm.Ollama.endpoint.title'),
+          name: [LLMProviderConfigKey, providerKey, LLMProviderBaseUrlKey],
+        },
+        {
+          children: (
+            <Input.TextArea
+              allowClear
+              placeholder={t('llm.Ollama.customModelName.placeholder')}
+              style={{ height: 100 }}
+            />
+          ),
+          desc: t('llm.Ollama.customModelName.desc'),
+          label: t('llm.Ollama.customModelName.title'),
+          name: [LLMProviderConfigKey, providerKey, 'customModelName'],
+        },
+        {
+          children: <Checker model={'llama2'} provider={ModelProvider.Ollama} />,
+          desc: t('llm.Ollama.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: undefined,
+        },
+      ]}
+      provider={providerKey}
+      title={
+        <Ollama.Combine color={theme.isDarkMode ? theme.colorText : theme.colorPrimary} size={24} />
+      }
+    />
   );
 });
 

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

@@ -1,20 +1,17 @@
 import { OpenAI } from '@lobehub/icons';
-import { Form, type ItemGroup, Markdown } from '@lobehub/ui';
-import { Form as AntForm, AutoComplete, Input, Switch } from 'antd';
+import { Markdown } from '@lobehub/ui';
+import { AutoComplete, Input, Switch } 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 { LLMProviderConfigKey } from '../const';
-import { useSyncSettings } from '../useSyncSettings';
 
 const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
@@ -37,109 +34,96 @@ const providerKey = 'openAI';
 const LLM = memo(() => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
-  const [form] = AntForm.useForm();
 
-  const [useAzure, setSettings] = useGlobalStore((s) => [
-    modelProviderSelectors.enableAzure(s),
-    s.setSettings,
-  ]);
-
-  useSyncSettings(form);
-
-  const openAI: ItemGroup = {
-    children: [
-      {
-        children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={
-              useAzure ? t('llm.AzureOpenAI.token.placeholder') : t('llm.OpenAI.token.placeholder')
-            }
-          />
-        ),
-        desc: useAzure ? t('llm.AzureOpenAI.token.desc') : t('llm.OpenAI.token.desc'),
-        label: useAzure ? t('llm.AzureOpenAI.token.title') : t('llm.OpenAI.token.title'),
-        name: [LLMProviderConfigKey, providerKey, 'OPENAI_API_KEY'],
-      },
-      {
-        children: (
-          <Input
-            allowClear
-            placeholder={
-              useAzure
-                ? t('llm.AzureOpenAI.endpoint.placeholder')
-                : t('llm.OpenAI.endpoint.placeholder')
-            }
-          />
-        ),
-        desc: useAzure ? t('llm.AzureOpenAI.endpoint.desc') : t('llm.OpenAI.endpoint.desc'),
-        label: useAzure ? t('llm.AzureOpenAI.endpoint.title') : t('llm.OpenAI.endpoint.title'),
-        name: [LLMProviderConfigKey, providerKey, 'endpoint'],
-      },
-      {
-        children: (
-          <Input.TextArea
-            allowClear
-            placeholder={t('llm.OpenAI.customModelName.placeholder')}
-            style={{ height: 100 }}
-          />
-        ),
-        desc: t('llm.OpenAI.customModelName.desc'),
-        label: t('llm.OpenAI.customModelName.title'),
-        name: [LLMProviderConfigKey, providerKey, 'customModelName'],
-      },
-      {
-        children: <Switch />,
-        desc: t('llm.OpenAI.useAzure.desc'),
-        label: t('llm.OpenAI.useAzure.title'),
-        minWidth: undefined,
-        name: [LLMProviderConfigKey, 'openAI', 'useAzure'],
-        valuePropName: 'checked',
-      },
-      {
-        children: (
-          <AutoComplete
-            options={[
-              '2023-12-01-preview',
-              '2023-08-01-preview',
-              '2023-07-01-preview',
-              '2023-06-01-preview',
-              '2023-05-15',
-              '2023-03-15-preview',
-            ].map((i) => ({
-              label: i,
-              value: i,
-            }))}
-            placeholder={'20XX-XX-XX'}
-          />
-        ),
-        desc: (
-          <Markdown className={styles.markdown}>{t('llm.OpenAI.azureApiVersion.desc')}</Markdown>
-        ),
-        hidden: !useAzure,
-        label: t('llm.OpenAI.azureApiVersion.title'),
-        name: [LLMProviderConfigKey, providerKey, 'azureApiVersion'],
-      },
-      {
-        children: <Checker model={'gpt-3.5-turbo'} provider={ModelProvider.OpenAI} />,
-        desc: t('llm.checker.desc'),
-        label: t('llm.checker.title'),
-        minWidth: '100%',
-      },
-    ],
-    title: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        <OpenAI.Combine size={24}></OpenAI.Combine>
-      </Flexbox>
-    ),
-  };
+  const [useAzure] = useGlobalStore((s) => [modelProviderSelectors.enableAzure(s)]);
 
   return (
-    <Form
-      form={form}
-      items={[openAI]}
-      onValuesChange={debounce(setSettings, 100)}
-      {...FORM_STYLE}
+    <ProviderConfig
+      canDeactivate={false}
+      configItems={[
+        {
+          children: (
+            <Input.Password
+              autoComplete={'new-password'}
+              placeholder={
+                useAzure
+                  ? t('llm.AzureOpenAI.token.placeholder')
+                  : t('llm.OpenAI.token.placeholder')
+              }
+            />
+          ),
+          desc: useAzure ? t('llm.AzureOpenAI.token.desc') : t('llm.OpenAI.token.desc'),
+          label: useAzure ? t('llm.AzureOpenAI.token.title') : t('llm.OpenAI.token.title'),
+          name: [LLMProviderConfigKey, providerKey, 'OPENAI_API_KEY'],
+        },
+        {
+          children: (
+            <Input
+              allowClear
+              placeholder={
+                useAzure
+                  ? t('llm.AzureOpenAI.endpoint.placeholder')
+                  : t('llm.OpenAI.endpoint.placeholder')
+              }
+            />
+          ),
+          desc: useAzure ? t('llm.AzureOpenAI.endpoint.desc') : t('llm.OpenAI.endpoint.desc'),
+          label: useAzure ? t('llm.AzureOpenAI.endpoint.title') : t('llm.OpenAI.endpoint.title'),
+          name: [LLMProviderConfigKey, providerKey, 'endpoint'],
+        },
+        {
+          children: (
+            <Input.TextArea
+              allowClear
+              placeholder={t('llm.OpenAI.customModelName.placeholder')}
+              style={{ height: 100 }}
+            />
+          ),
+          desc: t('llm.OpenAI.customModelName.desc'),
+          label: t('llm.OpenAI.customModelName.title'),
+          name: [LLMProviderConfigKey, providerKey, 'customModelName'],
+        },
+        {
+          children: <Switch />,
+          desc: t('llm.OpenAI.useAzure.desc'),
+          label: t('llm.OpenAI.useAzure.title'),
+          minWidth: undefined,
+          name: [LLMProviderConfigKey, 'openAI', 'useAzure'],
+          valuePropName: 'checked',
+        },
+        {
+          children: (
+            <AutoComplete
+              options={[
+                '2023-12-01-preview',
+                '2023-08-01-preview',
+                '2023-07-01-preview',
+                '2023-06-01-preview',
+                '2023-05-15',
+                '2023-03-15-preview',
+              ].map((i) => ({
+                label: i,
+                value: i,
+              }))}
+              placeholder={'20XX-XX-XX'}
+            />
+          ),
+          desc: (
+            <Markdown className={styles.markdown}>{t('llm.OpenAI.azureApiVersion.desc')}</Markdown>
+          ),
+          hidden: !useAzure,
+          label: t('llm.OpenAI.azureApiVersion.title'),
+          name: [LLMProviderConfigKey, providerKey, 'azureApiVersion'],
+        },
+        {
+          children: <Checker model={'gpt-3.5-turbo'} provider={ModelProvider.OpenAI} />,
+          desc: t('llm.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: '100%',
+        },
+      ]}
+      provider={providerKey}
+      title={<OpenAI.Combine size={24}></OpenAI.Combine>}
     />
   );
 });

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

@@ -1,77 +1,52 @@
 import { Zhipu } 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 { lighten } from 'polished';
 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 = 'zhipu';
 
 const ZhipuProvider = 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.enableZhipu);
 
-  useSyncSettings(form);
+  const theme = useTheme();
 
-  const model: ItemGroup = {
-    children: [
-      {
-        children: (
-          <Input.Password
-            autoComplete={'new-password'}
-            placeholder={t('llm.Zhipu.token.placeholder')}
-          />
-        ),
-        desc: t('llm.Zhipu.token.desc'),
-        label: t('llm.Zhipu.token.title'),
-        name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-      },
-      {
-        children: <Checker model={'glm-3-turbo'} provider={ModelProvider.ZhiPu} />,
-        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.Zhipu.token.placeholder')}
+            />
+          ),
+          desc: t('llm.Zhipu.token.desc'),
+          label: t('llm.Zhipu.token.title'),
+          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
+        },
+        {
+          children: <Checker model={'glm-3-turbo'} provider={ModelProvider.ZhiPu} />,
+          desc: t('llm.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: '100%',
+        },
+      ]}
+      provider={providerKey}
+      title={
         <Zhipu.Combine
           color={theme.isDarkMode ? lighten(0.1, Zhipu.colorPrimary) : Zhipu.colorPrimary}
           size={32}
         />
-      </Flexbox>
-    ),
-  };
-
-  return (
-    <Form form={form} items={[model]} onValuesChange={debounce(setSettings, 100)} {...FORM_STYLE} />
+      }
+    />
   );
 });
 

package/src/app/settings/llm/components/ProviderConfig/index.tsx

@@ -0,0 +1,58 @@
+import { Form, type ItemGroup } from '@lobehub/ui';
+import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
+import { Form as AntForm, Switch } from 'antd';
+import { debounce } from 'lodash-es';
+import { ReactNode, memo } from 'react';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+import { GlobalLLMProviderKey } from '@/types/settings';
+
+import { useSyncSettings } from './useSyncSettings';
+
+interface ProviderConfigProps {
+  canDeactivate?: boolean;
+  configItems: FormItemProps[];
+  provider: GlobalLLMProviderKey;
+  title: ReactNode;
+}
+
+const ProviderConfig = memo<ProviderConfigProps>(
+  ({ provider, canDeactivate = true, title, configItems }) => {
+    const [form] = AntForm.useForm();
+    const [toggleProviderEnabled, setSettings] = useGlobalStore((s) => [
+      s.toggleProviderEnabled,
+      s.setSettings,
+    ]);
+
+    const enabled = useGlobalStore(modelProviderSelectors.providerEnabled(provider));
+
+    useSyncSettings(form);
+
+    const model: ItemGroup = {
+      children: configItems,
+      defaultActive: canDeactivate ? enabled : undefined,
+      extra: canDeactivate ? (
+        <Switch
+          onChange={(enabled) => {
+            toggleProviderEnabled(provider, enabled);
+          }}
+          value={enabled}
+        />
+      ) : undefined,
+      title,
+    };
+
+    return (
+      <Form
+        form={form}
+        items={[model]}
+        onValuesChange={debounce(setSettings, 100)}
+        {...FORM_STYLE}
+      />
+    );
+  },
+);
+
+export default ProviderConfig;

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

@@ -0,0 +1,42 @@
+'use client';
+
+import Link from 'next/link';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import { MORE_MODEL_PROVIDER_REQUEST_URL } from '@/const/url';
+
+import Footer from '../features/Footer';
+import Bedrock from './Bedrock';
+import Google from './Google';
+import Moonshot from './Moonshot';
+import Ollama from './Ollama';
+import OpenAI from './OpenAI';
+import Zhipu from './Zhipu';
+
+export default memo<{ showOllama: boolean }>(({ showOllama }) => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <>
+      <PageTitle title={t('tab.llm')} />
+      <OpenAI />
+      {/*<AzureOpenAI />*/}
+      <Zhipu />
+      <Moonshot />
+      <Google />
+      <Bedrock />
+      {showOllama && <Ollama />}
+      <Footer>
+        <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
+          更多模型正在
+          <Link aria-label={'todo'} href={MORE_MODEL_PROVIDER_REQUEST_URL} target="_blank">
+            计划接入
+          </Link>
+          中 ，敬请期待 ✨
+        </Trans>
+      </Footer>
+    </>
+  );
+});

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

@@ -1 +1,9 @@
-export { default } from '../layout.server';
+import { PropsWithChildren } from 'react';
+
+import { SettingsTabs } from '@/store/global/initialState';
+
+import SettingLayout from '../layout.server';
+
+export default ({ children }: PropsWithChildren) => {
+  return <SettingLayout activeTab={SettingsTabs.LLM}>{children}</SettingLayout>;
+};