@lobehub/chat 0.72.4 → 0.73.0

package/src/pages/settings/features/Settings/LLM/index.tsx

@@ -0,0 +1,152 @@
+import { Form, 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 Link from 'next/link';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { globalSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
+
+import Checker from './Checker';
+
+const useStyles = createStyles(({ css, token }) => ({
+  markdown: css`
+    a {
+      font-size: 12px !important;
+    }
+
+    p {
+      font-size: 12px !important;
+      color: ${token.colorTextDescription} !important;
+    }
+  `,
+  plan: css`
+    color: ${token.colorTextDescription};
+  `,
+  tip: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const configKey = 'languageModel';
+
+const LLM = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = AntForm.useForm();
+  const { styles } = useStyles();
+  const [setSettings] = useGlobalStore((s) => [s.setSettings]);
+
+  useEffectAfterGlobalHydrated((store) => {
+    const settings = globalSelectors.currentSettings(store.getState());
+
+    form.setFieldsValue(settings);
+  }, []);
+
+  const useAzure = useGlobalStore((s) => s.settings.languageModel.openAI.useAzure);
+
+  const openAI = {
+    children: [
+      {
+        children: (
+          <Input.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: [configKey, 'openAI', '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: [configKey, 'openAI', 'endpoint'],
+      },
+      {
+        children: <Switch />,
+        desc: t('llm.OpenAI.useAzure.desc'),
+        label: t('llm.OpenAI.useAzure.title'),
+        name: [configKey, 'openAI', 'useAzure'],
+        valuePropName: 'checked',
+      },
+      {
+        children: (
+          <AutoComplete
+            options={[
+              '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: [configKey, 'openAI', 'azureApiVersion'],
+      },
+      {
+        children: <Checker checkModel={!useAzure} />,
+        desc: t('llm.OpenAI.check.desc'),
+        label: t('llm.OpenAI.check.title'),
+      },
+      // {
+      //   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'),
+  };
+
+  return (
+    <Flexbox align={'center'} gap={24} width={'100%'}>
+      <Form
+        form={form}
+        items={[openAI]}
+        onValuesChange={debounce(setSettings, 100)}
+        {...FORM_STYLE}
+      />
+      <Flexbox align={'center'} className={styles.plan}>
+        <div>
+          <Trans i18nKey="llm.waitingForMore" ns={'setting'}>
+            更多模型正在
+            <Link href="https://github.com/lobehub/lobe-chat/issues/151" target="_blank">
+              计划接入
+            </Link>
+            中 ，敬请期待 ✨
+          </Trans>
+        </div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default LLM;

package/src/pages/settings/features/Settings/index.tsx

@@ -2,13 +2,16 @@ import { GridBackground, Icon, Logo, TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { PackageCheck } from 'lucide-react';
 import { rgba } from 'polished';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { useGlobalStore } from '@/store/global';
+
 import pkg from '../../../../../package.json';
 import Agent from './Agent';
 import Common from './Common';
+import LLM from './LLM';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   background: css`
@@ -55,16 +58,12 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
 }));
 
-enum Tabs {
-  agent = 'agent',
-  common = 'common',
-}
-
 const Settings = memo(() => {
-  const [tab, setTab] = useState<Tabs>(Tabs.common);
   const { styles, theme } = useStyles();
   const { t } = useTranslation('setting');
 
+  const [tab, setTab] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
+
   return (
     <Center gap={16} width={'100%'}>
       <Flexbox align={'flex-end'} className={styles.tabs} horizontal justify={'center'}>
@@ -78,10 +77,11 @@ const Settings = memo(() => {
         <TabsNav
           activeKey={tab}
           items={[
-            { key: Tabs.common, label: t('tab.common') },
-            { key: Tabs.agent, label: t('tab.agent') },
+            { key: 'common', label: t('tab.common') },
+            { key: 'llm', label: t('tab.llm') },
+            { key: 'agent', label: t('tab.agent') },
           ]}
-          onChange={(e) => setTab(e as Tabs)}
+          onChange={(e) => setTab(e as any)}
         />
         <div className={styles.logo}>
           <Logo extra={'Chat'} type={'text'} />
@@ -91,8 +91,9 @@ const Settings = memo(() => {
           <div>{`${pkg.version}`}</div>
         </Flexbox>
       </Flexbox>
-      {tab === Tabs.common && <Common />}
-      {tab === Tabs.agent && <Agent />}
+      {tab === 'common' && <Common />}
+      {tab === 'llm' && <LLM />}
+      {tab === 'agent' && <Agent />}
     </Center>
   );
 });

package/src/services/_header.ts

@@ -0,0 +1,33 @@
+import {
+  AZURE_OPENAI_API_VERSION,
+  LOBE_CHAT_ACCESS_CODE,
+  OPENAI_API_KEY_HEADER_KEY,
+  OPENAI_END_POINT,
+  USE_AZURE_OPENAI,
+} from '@/const/fetch';
+import { useGlobalStore } from '@/store/global';
+
+// eslint-disable-next-line no-undef
+export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
+  const openai = useGlobalStore.getState().settings.languageModel.openAI;
+
+  const apiKey = openai.OPENAI_API_KEY || useGlobalStore.getState().settings.OPENAI_API_KEY || '';
+  const endpoint = openai.endpoint || useGlobalStore.getState().settings.endpoint || '';
+
+  // eslint-disable-next-line no-undef
+  const result: HeadersInit = {
+    ...header,
+    [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',
+    [OPENAI_API_KEY_HEADER_KEY]: apiKey,
+    [OPENAI_END_POINT]: endpoint,
+  };
+
+  if (openai.useAzure) {
+    Object.assign(result, {
+      [AZURE_OPENAI_API_VERSION]: openai.azureApiVersion,
+      [USE_AZURE_OPENAI]: '1',
+    });
+  }
+
+  return result;
+};

package/src/services/_url.ts

@@ -0,0 +1,17 @@
+const isDev = process.env.NODE_ENV === 'development';
+
+const prefix = isDev ? '-dev' : '';
+
+export const URLS = {
+  plugins: '/api/plugins' + prefix,
+};
+
+export const OPENAI_URLS = {
+  chat: '/api/openai/chat' + prefix,
+  models: '/api/openai/models' + prefix,
+};
+
+export const AZURE_OPENAI_URLS = {
+  chat: '/api/azure-openai/chat' + prefix,
+  models: '/api/azure-openai/models' + prefix,
+};

package/src/services/chatModel.ts

@@ -1,12 +1,11 @@
 import { merge } from 'lodash-es';
 
-import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
-import { useGlobalStore } from '@/store/global';
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 import { initialLobeAgentConfig } from '@/store/session/initialState';
 import type { ChatCompletionFunctions, OpenAIStreamPayload } from '@/types/openai';
 
-import { URLS } from './url';
+import { createHeaderWithOpenAI } from './_header';
+import { OPENAI_URLS } from './_url';
 
 interface FetchChatModelOptions {
   signal?: AbortSignal | undefined;
@@ -35,14 +34,9 @@ export const fetchChatModel = (
 
   const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
 
-  return fetch(URLS.openai, {
+  return fetch(OPENAI_URLS.chat, {
     body: JSON.stringify({ ...payload, functions }),
-    headers: {
-      'Content-Type': 'application/json',
-      [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',
-      [OPENAI_API_KEY_HEADER_KEY]: useGlobalStore.getState().settings.OPENAI_API_KEY || '',
-      [OPENAI_END_POINT]: useGlobalStore.getState().settings.endpoint || '',
-    },
+    headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
     method: 'POST',
     signal: options?.signal,
   });

package/src/services/modelList.ts

@@ -0,0 +1,15 @@
+import { LanguageModelWhiteList } from '@/const/llm';
+
+import { createHeaderWithOpenAI } from './_header';
+import { OPENAI_URLS } from './_url';
+
+export const fetchModelList = async (): Promise<string[]> => {
+  const res = await fetch(OPENAI_URLS.models, {
+    headers: createHeaderWithOpenAI(),
+    method: 'POST',
+  });
+
+  const modelList: string[] = await res.json();
+
+  return LanguageModelWhiteList.filter((i) => modelList.includes(i));
+};

package/src/services/plugin.ts

@@ -3,7 +3,7 @@ import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 import { getMessageError } from '@/utils/fetch';
 
-import { URLS } from './url';
+import { URLS } from './_url';
 
 interface FetchChatModelOptions {
   signal?: AbortSignal | undefined;

package/src/services/pluginMarket.ts

@@ -2,7 +2,7 @@ import { getPluginIndexJSON } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
 
 /**
- * 请求插件列表
+ * fetch Plugin Market List
  */
 export const getPluginList = async () => {
   const url = getPluginIndexJSON(useGlobalStore.getState().settings.language);

package/src/store/global/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useEffectAfterHydrated';
 export * from './useHydrated';
 export * from './useOnFinishHydrationGlobal';
 export * from './useSwitchSideBarOnInit';

package/src/store/global/hooks/useEffectAfterHydrated.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useGlobalStore } from '../store';
+
+export const useEffectAfterGlobalHydrated = (
+  fn: (store: typeof useGlobalStore) => void,
+  deps: any[] = [],
+) => {
+  useEffect(() => {
+    const hasRehydrated = useGlobalStore.persist.hasHydrated();
+
+    if (hasRehydrated) {
+      // 等价 useEffect 多次触发
+      fn(useGlobalStore);
+    } else {
+      // 等价于 useEffect 第一次触发
+      useGlobalStore.persist.onFinishHydration(() => {
+        fn(useGlobalStore);
+      });
+    }
+  }, deps);
+};

package/src/store/global/initialState.ts

@@ -3,6 +3,8 @@ import type { GlobalSettings } from '@/types/settings';
 
 export type SidebarTabKey = 'chat' | 'market' | 'settings';
 
+export type SettingsTabs = 'agent' | 'common' | 'llm';
+
 export interface Guide {
   // Topic 引导
   topic?: boolean;
@@ -19,6 +21,7 @@ export interface GlobalState {
    * 用户设置
    */
   settings: GlobalSettings;
+  settingsTab: SettingsTabs;
   sidebarKey: SidebarTabKey;
 }
 
@@ -41,5 +44,6 @@ export const initialState: GlobalState = {
     showSessionPanel: true,
   },
   settings: DEFAULT_SETTINGS,
+  settingsTab: 'common',
   sidebarKey: 'chat',
 };

package/src/store/global/selectors.test.ts

@@ -0,0 +1,264 @@
+import { LanguageModel } from '@/types/llm';
+
+import { globalSelectors } from './selectors';
+import { GlobalStore } from './store';
+
+describe('globalSelectors', () => {
+  describe('currentSettings', () => {
+    it('should merge DEFAULT_SETTINGS and s.settings correctly', () => {
+      const s = {
+        settings: {
+          avatar: 'avatar.jpg',
+          fontSize: 14,
+          language: 'en-US',
+          neutralColor: 'sand',
+          password: 'password123',
+          primaryColor: 'blue',
+          themeMode: 'light',
+          defaultAgent: {
+            config: {
+              systemRole: '',
+              model: LanguageModel.GPT3_5,
+              params: {},
+            },
+            meta: {
+              avatar: 'Default Agent',
+              description: 'Default agent for testing',
+            },
+          },
+          languageModel: {
+            openAI: {
+              OPENAI_API_KEY: 'openai-api-key',
+              endpoint: 'https://openai-endpoint.com',
+              models: ['gpt-3.5-turbo'],
+            },
+          },
+        },
+      } as unknown as GlobalStore;
+
+      const result = globalSelectors.currentSettings(s);
+
+      expect(result).toEqual({
+        avatar: 'avatar.jpg',
+        fontSize: 14,
+        language: 'en-US',
+        neutralColor: 'sand',
+        password: 'password123',
+        primaryColor: 'blue',
+        themeMode: 'light',
+        defaultAgent: {
+          config: {
+            displayMode: 'chat',
+            historyCount: 1,
+            systemRole: '',
+            model: LanguageModel.GPT3_5,
+            params: {
+              frequency_penalty: 0,
+              presence_penalty: 0,
+              temperature: 0.6,
+              top_p: 1,
+            },
+            plugins: [],
+          },
+          meta: {
+            avatar: 'Default Agent',
+            description: 'Default agent for testing',
+          },
+        },
+        languageModel: {
+          openAI: {
+            OPENAI_API_KEY: 'openai-api-key',
+            azureApiVersion: '2023-08-01-preview',
+            endpoint: 'https://openai-endpoint.com',
+            models: ['gpt-3.5-turbo'],
+          },
+        },
+      });
+    });
+  });
+  //
+  // describe('defaultAgent', () => {
+  //   it('should merge DEFAULT_AGENT and s.settings.defaultAgent correctly', () => {
+  //     const s: GlobalStore = {
+  //       settings: {
+  //         defaultAgent: {
+  //           config: {
+  //             model: 'gpt-3.5-turbo',
+  //             maxTokens: 100,
+  //           },
+  //           meta: {
+  //             name: 'Default Agent',
+  //             description: 'Default agent for testing',
+  //           },
+  //         },
+  //       },
+  //     };
+  //
+  //     const result = globalSelectors.defaultAgent(s);
+  //
+  //
+  //
+  //     expect(result).toEqual(expected);
+  //   });
+  // });
+  //
+  // describe('defaultAgentConfig', () => {
+  //   it('should merge DEFAULT_AGENT_CONFIG and defaultAgent(s).config correctly', () => {
+  //     const s: GlobalStore = {
+  //       settings: {
+  //         defaultAgent: {
+  //           config: {
+  //             model: 'gpt-3.5-turbo',
+  //             maxTokens: 100,
+  //           },
+  //         },
+  //       },
+  //     };
+  //
+  //     const result = globalSelectors.defaultAgentConfig(s);
+  //
+  //     const defaultAgent = globalSelectors.defaultAgent(s);
+  //     const expected = merge({}, DEFAULT_AGENT_CONFIG, defaultAgent.config);
+  //
+  //     expect(result).toEqual(expected);
+  //   });
+  // });
+  //
+  // describe('defaultAgentMeta', () => {
+  //   it('should merge DEFAULT_AGENT_META and defaultAgent(s).meta correctly', () => {
+  //     const s: GlobalStore = {
+  //       settings: {
+  //         defaultAgent: {
+  //           meta: {
+  //             name: 'Default Agent',
+  //             description: 'Default agent for testing',
+  //           },
+  //         },
+  //       },
+  //     };
+  //
+  //     const result = globalSelectors.defaultAgentMeta(s);
+  //
+  //     const defaultAgent = globalSelectors.defaultAgent(s);
+  //     const expected = merge({}, DEFAULT_AGENT_META, defaultAgent.meta);
+  //
+  //     expect(result).toEqual(expected);
+  //   });
+  // });
+  //
+  // describe('exportSettings', () => {
+  //   it('should remove OPENAI_API_KEY and password fields from s.settings', () => {
+  //     const s: GlobalStore = {
+  //       settings: {
+  //         OPENAI_API_KEY: 'openai-api-key',
+  //         password: 'password123',
+  //         avatar: 'avatar.jpg',
+  //         fontSize: 14,
+  //         language: 'en',
+  //         neutralColor: 'white',
+  //         primaryColor: 'blue',
+  //         themeMode: 'light',
+  //         defaultAgent: {
+  //           config: {
+  //             model: 'gpt-3.5-turbo',
+  //             maxTokens: 100,
+  //           },
+  //           meta: {
+  //             name: 'Default Agent',
+  //             description: 'Default agent for testing',
+  //           },
+  //         },
+  //         languageModel: {
+  //           azureOpenAI: {
+  //             AZURE_API_KEY: 'azure-api-key',
+  //             apiVersion: 'v1',
+  //             endpoint: 'https://azure-openai-endpoint.com',
+  //             models: ['gpt-3.5-turbo'],
+  //           },
+  //           openAI: {
+  //             OPENAI_API_KEY: 'openai-api-key',
+  //             endpoint: 'https://openai-endpoint.com',
+  //             models: ['gpt-3.5-turbo'],
+  //           },
+  //         },
+  //       },
+  //     };
+  //
+  //     const result = globalSelectors.exportSettings(s);
+  //
+  //     const expected = {
+  //       avatar: 'avatar.jpg',
+  //       fontSize: 14,
+  //       language: 'en',
+  //       neutralColor: 'white',
+  //       primaryColor: 'blue',
+  //       themeMode: 'light',
+  //       defaultAgent: {
+  //         config: {
+  //           model: 'gpt-3.5-turbo',
+  //           maxTokens: 100,
+  //         },
+  //         meta: {
+  //           name: 'Default Agent',
+  //           description: 'Default agent for testing',
+  //         },
+  //       },
+  //       languageModel: {
+  //         azureOpenAI: {
+  //           AZURE_API_KEY: 'azure-api-key',
+  //           apiVersion: 'v1',
+  //           endpoint: 'https://azure-openai-endpoint.com',
+  //           models: ['gpt-3.5-turbo'],
+  //         },
+  //         openAI: {
+  //           endpoint: 'https://openai-endpoint.com',
+  //           models: ['gpt-3.5-turbo'],
+  //         },
+  //       },
+  //     };
+  //
+  //     expect(result).toEqual(expected);
+  //   });
+  //
+  //   it('should return the result as GlobalSettings type', () => {
+  //     const s: GlobalStore = {
+  //       settings: {
+  //         avatar: 'avatar.jpg',
+  //         fontSize: 14,
+  //         language: 'en',
+  //         neutralColor: 'white',
+  //         password: 'password123',
+  //         primaryColor: 'blue',
+  //         themeMode: 'light',
+  //         defaultAgent: {
+  //           config: {
+  //             model: 'gpt-3.5-turbo',
+  //             maxTokens: 100,
+  //           },
+  //           meta: {
+  //             name: 'Default Agent',
+  //             description: 'Default agent for testing',
+  //           },
+  //         },
+  //         languageModel: {
+  //           azureOpenAI: {
+  //             AZURE_API_KEY: 'azure-api-key',
+  //             apiVersion: 'v1',
+  //             endpoint: 'https://azure-openai-endpoint.com',
+  //             models: ['gpt-3.5-turbo'],
+  //           },
+  //           openAI: {
+  //             OPENAI_API_KEY: 'openai-api-key',
+  //             endpoint: 'https://openai-endpoint.com',
+  //             models: ['gpt-3.5-turbo'],
+  //           },
+  //         },
+  //       },
+  //     };
+  //
+  //     const result = globalSelectors.exportSettings(s);
+  //
+  //     expect(result).toBeInstanceOf(GlobalSettings);
+  //   });
+  // });
+});

package/src/store/global/selectors.ts

@@ -5,14 +5,13 @@ import { merge } from '@/utils/merge';
 
 import { GlobalStore } from './store';
 
-const currentSettings = (s: GlobalStore) => merge({}, DEFAULT_SETTINGS, s.settings);
+const currentSettings = (s: GlobalStore) => merge(DEFAULT_SETTINGS, s.settings);
 
-const defaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
+const defaultAgent = (s: GlobalStore) => merge(DEFAULT_AGENT, s.settings.defaultAgent);
 
-const defaultAgentConfig = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
+const defaultAgentConfig = (s: GlobalStore) => merge(DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
 
-const defaultAgentMeta = (s: GlobalStore) => merge({}, DEFAULT_AGENT_META, defaultAgent(s).meta);
+const defaultAgentMeta = (s: GlobalStore) => merge(DEFAULT_AGENT_META, defaultAgent(s).meta);
 
 export const exportSettings = (s: GlobalStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars