@lobehub/chat 0.72.4 → 0.74.0

package/src/pages/api/{openai.ts → createChatCompletion.ts}

@@ -1,46 +1,17 @@
 import { OpenAIStream, StreamingTextResponse } from 'ai';
-import OpenAI, { ClientOptions } from 'openai';
+import OpenAI from 'openai';
 
-import { getServerConfig } from '@/config/server';
 import { createErrorResponse } from '@/pages/api/error';
 import { ChatErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
-// 创建 OpenAI 实例
-export const createOpenAI = (userApiKey: string | null, endpoint?: string | null) => {
-  const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
-
-  const baseURL = endpoint ? endpoint : OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined;
-
-  const config: ClientOptions = {
-    apiKey: !userApiKey ? OPENAI_API_KEY : userApiKey,
-  };
-
-  // a bug with openai: https://github.com/openai/openai-node/issues/283
-  // TODO: should refactor when openai fix the bug
-  if (baseURL) {
-    config.baseURL = baseURL;
-  }
-
-  return new OpenAI(config);
-};
-
 interface CreateChatCompletionOptions {
-  OPENAI_API_KEY: string | null;
-  endpoint?: string | null;
+  openai: OpenAI;
   payload: OpenAIStreamPayload;
 }
 
-export const createChatCompletion = async ({
-  payload,
-  OPENAI_API_KEY,
-  endpoint,
-}: CreateChatCompletionOptions) => {
-  // ============  0.创建 OpenAI 实例   ============ //
-
-  const openai = createOpenAI(OPENAI_API_KEY, endpoint);
-
-  // ============  1. 前置处理 messages   ============ //
+export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
+  // ============  1. preprocess messages   ============ //
   const { messages, ...params } = payload;
 
   const formatMessages = messages.map((m) => ({
@@ -49,7 +20,7 @@ export const createChatCompletion = async ({
     role: m.role,
   }));
 
-  // ============  2. 发送请求   ============ //
+  // ============  2. send api   ============ //
 
   try {
     const response = await openai.chat.completions.create({
@@ -63,7 +34,7 @@ export const createChatCompletion = async ({
     // Check if the error is an OpenAI APIError
     if (error instanceof OpenAI.APIError) {
       return createErrorResponse(ChatErrorType.OpenAIBizError, {
-        endpoint: !!endpoint ? endpoint : undefined,
+        endpoint: openai.baseURL,
         error: error.error ?? error.cause,
       });
     }
@@ -73,7 +44,7 @@ export const createChatCompletion = async ({
 
     // return as a GatewayTimeout error
     return createErrorResponse(ChatErrorType.InternalServerError, {
-      endpoint,
+      endpoint: openai.baseURL,
       error: JSON.stringify(error),
     });
   }

package/src/pages/api/openai/chat.api.ts

@@ -0,0 +1,43 @@
+import OpenAI from 'openai';
+
+import { getOpenAIAuthFromRequest } from '@/const/fetch';
+import { ChatErrorType, ErrorType } from '@/types/fetch';
+import { OpenAIStreamPayload } from '@/types/openai';
+
+import { checkAuth } from '../auth';
+import { createChatCompletion } from '../createChatCompletion';
+import { createErrorResponse } from '../error';
+import { createAzureOpenai } from './createAzureOpenai';
+import { createOpenai } from './createOpenai';
+
+export const runtime = 'edge';
+
+export default async function handler(req: Request) {
+  const payload = (await req.json()) as OpenAIStreamPayload;
+
+  const { apiKey, accessCode, endpoint, useAzure, apiVersion } = getOpenAIAuthFromRequest(req);
+
+  const result = checkAuth({ accessCode, apiKey });
+
+  if (!result.auth) {
+    return createErrorResponse(result.error as ErrorType);
+  }
+
+  let openai: OpenAI;
+  if (useAzure) {
+    if (!apiVersion) return createErrorResponse(ChatErrorType.BadRequest);
+
+    // `https://test-001.openai.azure.com/openai/deployments/gpt-35-turbo`,
+    const url = `${endpoint}/openai/deployments/${payload.model.replace('.', '')}`;
+
+    openai = createAzureOpenai({
+      apiVersion,
+      endpoint: url,
+      userApiKey: apiKey,
+    });
+  } else {
+    openai = createOpenai(apiKey, endpoint);
+  }
+
+  return createChatCompletion({ openai, payload });
+}

package/src/pages/api/openai/createAzureOpenai.ts

@@ -0,0 +1,26 @@
+import OpenAI, { ClientOptions } from 'openai';
+
+import { getServerConfig } from '@/config/server';
+
+// 创建 Azure OpenAI 实例
+export const createAzureOpenai = (params: {
+  apiVersion: string;
+  endpoint: string;
+  userApiKey?: string | null;
+}) => {
+  const { AZURE_API_KEY } = getServerConfig();
+
+  const baseURL = params.endpoint;
+  const apiKey = !params.userApiKey ? AZURE_API_KEY : params.userApiKey;
+
+  const config: ClientOptions = {
+    apiKey: apiKey,
+    baseURL,
+    defaultHeaders: { 'api-key': apiKey },
+    defaultQuery: {
+      'api-version': params.apiVersion,
+    },
+  };
+
+  return new OpenAI(config);
+};

package/src/pages/api/openai/createOpenai.ts

@@ -0,0 +1,17 @@
+import OpenAI, { ClientOptions } from 'openai';
+
+import { getServerConfig } from '@/config/server';
+
+// 创建 OpenAI 实例
+export const createOpenai = (userApiKey: string | null, endpoint?: string | null) => {
+  const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
+
+  const baseURL = endpoint ? endpoint : OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined;
+
+  const config: ClientOptions = {
+    apiKey: !userApiKey ? OPENAI_API_KEY : userApiKey,
+    baseURL,
+  };
+
+  return new OpenAI(config);
+};

package/src/pages/api/openai/models.api.ts

@@ -0,0 +1,17 @@
+import { getOpenAIAuthFromRequest } from '@/const/fetch';
+
+import { createOpenai } from './createOpenai';
+
+export const runtime = 'edge';
+
+export default async function handler(req: Request) {
+  const { apiKey, endpoint } = getOpenAIAuthFromRequest(req);
+
+  const openAI = createOpenai(apiKey, endpoint);
+
+  const res = await openAI.models.list();
+
+  const modelList = res.data.map((i) => i.id);
+
+  return new Response(JSON.stringify(modelList));
+}

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

@@ -3,7 +3,7 @@ import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { changeLanguage } from 'i18next';
 import { debounce } from 'lodash-es';
-import { AppWindow, Monitor, Moon, Palette, Sun, Webhook } from 'lucide-react';
+import { AppWindow, Monitor, Moon, Palette, Sun } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -144,30 +144,6 @@ const Common = memo(() => {
     [settings],
   );
 
-  const openAI: SettingItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: <Input.Password placeholder={t('settingOpenAI.token.placeholder')} />,
-          desc: t('settingOpenAI.token.desc'),
-          label: t('settingOpenAI.token.title'),
-          name: 'OPENAI_API_KEY',
-        },
-        {
-          children: <Input placeholder={t('settingOpenAI.endpoint.placeholder')} />,
-          desc: t('settingOpenAI.endpoint.desc'),
-
-          label: t('settingOpenAI.endpoint.title'),
-
-          name: 'endpoint',
-        },
-      ],
-      icon: Webhook,
-      title: t('settingOpenAI.title'),
-    }),
-    [settings],
-  );
-
   const system: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -204,7 +180,7 @@ const Common = memo(() => {
     [settings],
   );
 
-  const items = useMemo(() => [theme, openAI, system], [settings]);
+  const items = useMemo(() => [theme, system], [settings]);
 
   return (
     <Form

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

@@ -0,0 +1,85 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Highlighter } from '@lobehub/ui';
+import { Alert, Button } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatMessageError } from '@/types/chatMessage';
+import { fetchPresetTaskResult } from '@/utils/fetch';
+
+import { getModelList } from './getModelList';
+
+interface CheckerProps {
+  checkModel?: boolean;
+}
+const Checker = memo<CheckerProps>(({ checkModel }) => {
+  const { t } = useTranslation('setting');
+
+  const [loading, setLoading] = useState(false);
+  const [pass, setPass] = useState(false);
+
+  const theme = useTheme();
+  const [error, setError] = useState<ChatMessageError | undefined>();
+
+  const checkConnection = async () => {
+    if (checkModel) {
+      getModelList();
+    }
+
+    const data = await fetchPresetTaskResult({
+      onError: (_, rawError) => {
+        setError(rawError);
+      },
+      onLoadingChange: (loading) => {
+        setLoading(loading);
+      },
+      params: {
+        messages: [
+          {
+            content: '你好',
+            role: 'user',
+          },
+        ],
+        model: 'gpt-3.5-turbo',
+      },
+    });
+
+    if (data) {
+      setError(undefined);
+      setPass(true);
+    }
+  };
+  return (
+    <Flexbox gap={8}>
+      <Flexbox align={'center'} gap={12} horizontal>
+        <Button loading={loading} onClick={checkConnection}>
+          {t('llm.OpenAI.check.button')}
+        </Button>
+
+        {pass && (
+          <Flexbox gap={4} horizontal>
+            <CheckCircleFilled
+              style={{
+                color: theme.colorSuccess,
+              }}
+            />
+            {t('llm.OpenAI.check.pass')}
+          </Flexbox>
+        )}
+      </Flexbox>
+
+      {error && (
+        <Flexbox gap={8}>
+          <Alert banner message={error.message} showIcon type={'error'}></Alert>
+          <Flexbox style={{ maxWidth: 600 }}>
+            <Highlighter language={'json'}>{JSON.stringify(error.body, null, 2)}</Highlighter>
+          </Flexbox>
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Checker;

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