@lobehub/chat 0.72.3 → 0.73.0

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

@@ -0,0 +1,51 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Button, Dropdown, Skeleton } from 'antd';
+import { MenuItemType } from 'antd/lib/menu/hooks/useItems';
+import { RotateCwIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { getModelList } from './getModelList';
+
+interface ModelListProps {
+  value?: string[];
+}
+const ModelList = memo<ModelListProps>(({ value }) => {
+  const { t } = useTranslation('setting');
+
+  const isLoading = !value;
+
+  if (isLoading)
+    return (
+      <Skeleton active paragraph={false} title={{ style: { marginBottom: 0 }, width: '50%' }} />
+    );
+
+  const isEmpty = value?.length === 0;
+
+  return isEmpty ? (
+    <Button
+      onClick={() => {
+        getModelList('openAI');
+      }}
+    >
+      {t('llm.OpenAI.models.fetch')}
+    </Button>
+  ) : (
+    <Dropdown
+      menu={{
+        items: (value || []).map<MenuItemType>((v) => ({
+          key: v,
+          label: v,
+        })),
+      }}
+    >
+      <Flexbox align={'center'} gap={8} horizontal>
+        {t('llm.OpenAI.models.count', { count: value.length })}
+        <ActionIcon icon={RotateCwIcon} size={'small'} title={t('llm.OpenAI.models.refetch')} />
+      </Flexbox>
+    </Dropdown>
+  );
+});
+
+export default ModelList;

package/src/pages/settings/features/Settings/LLM/getModelList.ts

@@ -0,0 +1,9 @@
+import { fetchModelList } from '@/services/modelList';
+import { useGlobalStore } from '@/store/global';
+
+export const getModelList = async (brand = 'openAI') => {
+  const setSettings = useGlobalStore.getState().setSettings;
+  const models = await fetchModelList();
+
+  setSettings({ languageModel: { [brand]: { models } } });
+};

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',
 };