@lobehub/chat 0.122.9 → 0.123.1

package/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx

@@ -1,10 +1,10 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { Avatar, ChatHeaderTitle, Logo, Markdown, Tag } from '@lobehub/ui';
+import { Avatar, ChatHeaderTitle, Logo, Markdown } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
+import ModelTag from '@/components/ModelTag';
 import ChatList from '@/features/Conversation/components/ChatList';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
@@ -42,7 +42,7 @@ const Preview = memo<FieldType & { title?: string }>(
                   desc={displayDesc}
                   tag={
                     <>
-                      <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
+                      <ModelTag model={model} />
                       {plugins?.length > 0 && <PluginTag plugins={plugins} />}
                     </>
                   }

package/src/app/chat/features/SessionListContent/List/Item/index.tsx

@@ -1,9 +1,8 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { Tag } from '@lobehub/ui';
 import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import ModelTag from '@/components/ModelTag';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
@@ -64,7 +63,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
     () =>
       !showModel ? undefined : (
         <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap' }}>
-          {showModel && <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>}
+          {showModel && <ModelTag model={model} />}
         </Flexbox>
       ),
     [showModel, model],

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

@@ -0,0 +1,145 @@
+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 { 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 { LLMProviderApiTokenKey, LLMProviderBaseUrlKey, LLMProviderConfigKey } from '../const';
+import { useSyncSettings } from '../useSyncSettings';
+
+const useStyles = createStyles(({ css, token }) => ({
+  markdown: css`
+    a {
+      font-size: 12px !important;
+    }
+
+    p {
+      font-size: 12px !important;
+      color: ${token.colorTextDescription} !important;
+    }
+  `,
+  tip: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+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>
+    ),
+  };
+
+  return (
+    <Form
+      form={form}
+      items={[openAI]}
+      onValuesChange={debounce(setSettings, 100)}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default AzureOpenAIProvider;

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

@@ -0,0 +1,109 @@
+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 { 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 { 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: undefined,
+      },
+    ],
+    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} />
+  );
+});
+
+export default BedrockProvider;

package/src/app/settings/llm/{LLM/Checker.tsx → Checker.tsx}

@@ -10,12 +10,12 @@ import { useIsMobile } from '@/hooks/useIsMobile';
 import { chatService } from '@/services/chat';
 import { ChatMessageError } from '@/types/message';
 
-import { getModelList } from './getModelList';
-
-interface CheckerProps {
-  checkModel?: boolean;
+interface ConnectionCheckerProps {
+  model: string;
+  provider: string;
 }
-const Checker = memo<CheckerProps>(({ checkModel }) => {
+
+const Checker = memo<ConnectionCheckerProps>(({ model, provider }) => {
   const { t } = useTranslation('setting');
 
   const [loading, setLoading] = useState(false);
@@ -25,10 +25,6 @@ const Checker = memo<CheckerProps>(({ checkModel }) => {
   const [error, setError] = useState<ChatMessageError | undefined>();
 
   const checkConnection = async () => {
-    if (checkModel) {
-      getModelList();
-    }
-
     const data = await chatService.fetchPresetTaskResult({
       onError: (_, rawError) => {
         setError(rawError);
@@ -44,7 +40,8 @@ const Checker = memo<CheckerProps>(({ checkModel }) => {
             role: 'user',
           },
         ],
-        model: 'gpt-3.5-turbo',
+        model,
+        provider,
       },
     });
 
@@ -65,11 +62,11 @@ const Checker = memo<CheckerProps>(({ checkModel }) => {
                 color: theme.colorSuccess,
               }}
             />
-            {t('llm.OpenAI.check.pass')}
+            {t('llm.checker.pass')}
           </Flexbox>
         )}
         <Button loading={loading} onClick={checkConnection}>
-          {t('llm.OpenAI.check.button')}
+          {t('llm.checker.button')}
         </Button>
       </Flexbox>
       {error && (
@@ -79,11 +76,11 @@ const Checker = memo<CheckerProps>(({ checkModel }) => {
             extra={
               <Flexbox>
                 <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
-                  {JSON.stringify(error.body, null, 2)}
+                  {JSON.stringify(error.body || error, null, 2)}
                 </Highlighter>
               </Flexbox>
             }
-            message={error.message}
+            message={t(`response.${error.type}` as any, { ns: 'error' })}
             showIcon
             type={'error'}
           />

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

@@ -0,0 +1,74 @@
+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 { 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 { 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: undefined,
+      },
+    ],
+    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} />
+  );
+});
+
+export default GoogleProvider;

package/src/app/settings/llm/{LLM → OpenAI}/index.tsx

@@ -1,16 +1,20 @@
+import { OpenAI } from '@lobehub/icons';
 import { Form, type ItemGroup, Markdown } from '@lobehub/ui';
 import { Form as AntForm, AutoComplete, Input, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
-import { Webhook } from 'lucide-react';
-import { memo, useEffect } from 'react';
+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 '../Checker';
+import { LLMProviderConfigKey } from '../const';
+import { useSyncSettings } from '../useSyncSettings';
 
 const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
@@ -28,29 +32,19 @@ const useStyles = createStyles(({ css, token }) => ({
     color: ${token.colorTextDescription};
   `,
 }));
-
-const configKey = 'languageModel';
+const providerKey = 'openAI';
 
 const LLM = memo(() => {
   const { t } = useTranslation('setting');
-  const [form] = AntForm.useForm();
   const { styles } = useStyles();
+  const [form] = AntForm.useForm();
+
   const [useAzure, setSettings] = useGlobalStore((s) => [
     modelProviderSelectors.enableAzure(s),
     s.setSettings,
   ]);
 
-  useEffect(() => {
-    const unsubscribe = useGlobalStore.subscribe(
-      (s) => s.settings,
-      (settings) => {
-        form.setFieldsValue(settings);
-      },
-    );
-    return () => {
-      unsubscribe();
-    };
-  }, []);
+  useSyncSettings(form);
 
   const openAI: ItemGroup = {
     children: [
@@ -65,7 +59,7 @@ const LLM = memo(() => {
         ),
         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: [configKey, 'openAI', 'OPENAI_API_KEY'],
+        name: [LLMProviderConfigKey, providerKey, 'OPENAI_API_KEY'],
       },
       {
         children: (
@@ -80,7 +74,7 @@ const LLM = memo(() => {
         ),
         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: [configKey, 'openAI', 'endpoint'],
+        name: [LLMProviderConfigKey, providerKey, 'endpoint'],
       },
       {
         children: (
@@ -92,30 +86,21 @@ const LLM = memo(() => {
         ),
         desc: t('llm.OpenAI.customModelName.desc'),
         label: t('llm.OpenAI.customModelName.title'),
-        name: [configKey, 'openAI', 'customModelName'],
+        name: [LLMProviderConfigKey, providerKey, 'customModelName'],
       },
       {
-        children: (
-          <Switch />
-          //   <Flexbox gap={4}>
-          //   <div>
-          //
-          //   </div>
-          //   {getClientConfig().USE_AZURE_OPENAI && (
-          //     <div className={styles.tip}>{t('llm.OpenAI.useAzure.serverConfig')}</div>
-          //   )}
-          // </Flexbox>
-        ),
+        children: <Switch />,
         desc: t('llm.OpenAI.useAzure.desc'),
         label: t('llm.OpenAI.useAzure.title'),
         minWidth: undefined,
-        name: [configKey, 'openAI', 'useAzure'],
+        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',
@@ -133,23 +118,20 @@ const LLM = memo(() => {
         ),
         hidden: !useAzure,
         label: t('llm.OpenAI.azureApiVersion.title'),
-        name: [configKey, 'openAI', 'azureApiVersion'],
+        name: [LLMProviderConfigKey, providerKey, 'azureApiVersion'],
       },
       {
-        children: <Checker checkModel={!useAzure} />,
-        desc: t('llm.OpenAI.check.desc'),
-        label: t('llm.OpenAI.check.title'),
+        children: <Checker model={'gpt-3.5-turbo'} provider={ModelProvider.OpenAI} />,
+        desc: t('llm.checker.desc'),
+        label: t('llm.checker.title'),
         minWidth: '100%',
       },
-      // {
-      //   children: useAzure ? <Flexbox>{t('llm.OpenAI.models.notSupport')}</Flexbox> : <ModelList />,
-      //   desc: useAzure ? t('llm.OpenAI.models.notSupportTip') : t('llm.OpenAI.models.desc'),
-      //   label: t('llm.OpenAI.models.title'),
-      //   name: [configKey, 'openAI', 'models'],
-      // },
     ],
-    icon: Webhook,
-    title: t('llm.OpenAI.title'),
+    title: (
+      <Flexbox align={'center'} gap={8} horizontal>
+        <OpenAI.Combine size={24}></OpenAI.Combine>
+      </Flexbox>
+    ),
   };
 
   return (

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

@@ -0,0 +1,78 @@
+import { Zhipu } from '@lobehub/icons';
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { Form as AntForm, Input, Switch } 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 { 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 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: undefined,
+      },
+    ],
+    defaultActive: enabled,
+    extra: (
+      <Switch
+        onChange={(enabled) => {
+          toggleProviderEnabled(providerKey, enabled);
+        }}
+        value={enabled}
+      />
+    ),
+    title: (
+      <Flexbox align={'center'} gap={8} horizontal>
+        <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} />
+  );
+});
+
+export default ZhipuProvider;

package/src/app/settings/llm/const.ts

@@ -0,0 +1,13 @@
+export const LLMProviderConfigKey = 'languageModel';
+
+/**
+ * we use this key to define default api key
+ * equal GOOGLE_API_KEY or ZHIPU_API_KEY
+ */
+export const LLMProviderApiTokenKey = 'apiKey';
+
+/**
+ * we use this key to define the baseURL
+ * equal OPENAI_PROXY_URL
+ */
+export const LLMProviderBaseUrlKey = 'endpoint';