@lobehub/chat 0.122.8 → 0.123.0

package/src/app/api/chat/[provider]/route.ts

@@ -0,0 +1,64 @@
+import { getPreferredRegion } from '@/app/api/config';
+import { createErrorResponse } from '@/app/api/errorResponse';
+import { LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
+import {
+  AgentInitErrorPayload,
+  AgentRuntimeError,
+  ChatCompletionErrorPayload,
+  ILobeAgentRuntimeErrorType,
+} from '@/libs/agent-runtime';
+import { ChatErrorType } from '@/types/fetch';
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+import { checkPasswordOrUseUserApiKey, getJWTPayload } from '../auth';
+import AgentRuntime from './agentRuntime';
+
+export const runtime = 'edge';
+
+export const preferredRegion = getPreferredRegion();
+
+export const POST = async (req: Request, { params }: { params: { provider: string } }) => {
+  let agentRuntime: AgentRuntime;
+
+  // ============  1. init chat model   ============ //
+
+  try {
+    // get Authorization from header
+    const authorization = req.headers.get(LOBE_CHAT_AUTH_HEADER);
+    if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
+
+    // check the Auth With payload
+    const payload = await getJWTPayload(authorization);
+    checkPasswordOrUseUserApiKey(payload.accessCode, payload.apiKey);
+
+    const body = await req.clone().json();
+    agentRuntime = await AgentRuntime.initializeWithUserPayload(params.provider, payload, {
+      apiVersion: payload.azureApiVersion,
+      model: body.model,
+      useAzure: payload.useAzure,
+    });
+  } catch (e) {
+    // if catch the error, just return it
+    const err = e as AgentInitErrorPayload;
+
+    return createErrorResponse(err.type as ILobeAgentRuntimeErrorType, {
+      error: err.error,
+      provider: params.provider,
+    });
+  }
+
+  // ============  2. create chat completion   ============ //
+
+  try {
+    const payload = (await req.json()) as ChatStreamPayload;
+
+    return await agentRuntime.chat(payload);
+  } catch (e) {
+    const { errorType, provider, error: errorContent, ...res } = e as ChatCompletionErrorPayload;
+
+    // track the error at server side
+    console.error(`Route: [${provider}] ${errorType}:`, errorContent);
+
+    return createErrorResponse(errorType, { error: errorContent, provider, ...res });
+  }
+};

package/src/app/api/chat/auth.ts

@@ -0,0 +1,42 @@
+import { importJWK, jwtVerify } from 'jose';
+
+import { getServerConfig } from '@/config/server';
+import { JWTPayload, JWT_SECRET_KEY } from '@/const/auth';
+import { AgentRuntimeError } from '@/libs/agent-runtime';
+import { ChatErrorType } from '@/types/fetch';
+
+export const getJWTPayload = async (token: string) => {
+  const encoder = new TextEncoder();
+  const secretKey = await crypto.subtle.digest('SHA-256', encoder.encode(JWT_SECRET_KEY));
+
+  const jwkSecretKey = await importJWK(
+    { k: Buffer.from(secretKey).toString('base64'), kty: 'oct' },
+    'HS256',
+  );
+
+  const { payload } = await jwtVerify(token, jwkSecretKey);
+
+  return payload as JWTPayload;
+};
+
+/**
+ * Check if the provided access code is valid or if a user API key should be used.
+ *
+ * @param {string} accessCode - The access code to check.
+ * @param {string} apiKey - The user API key.
+ * @throws {AgentRuntimeError} If the access code is invalid and no user API key is provided.
+ */
+export const checkPasswordOrUseUserApiKey = (accessCode?: string, apiKey?: string) => {
+  const { ACCESS_CODES } = getServerConfig();
+
+  // if apiKey exist
+  if (apiKey) return;
+
+  // if accessCode doesn't exist
+  if (!ACCESS_CODES.length) return;
+
+  if (!accessCode || !ACCESS_CODES.includes(accessCode)) {
+    console.warn('tracked an invalid access code, 检查到输入的错误密码：', accessCode);
+    throw AgentRuntimeError.createError(ChatErrorType.InvalidAccessCode);
+  }
+};

package/src/app/api/chat/google/route.ts

@@ -0,0 +1,86 @@
+import { createErrorResponse } from '@/app/api/errorResponse';
+import { getServerConfig } from '@/config/server';
+import { LOBE_CHAT_AUTH_HEADER } from '@/const/auth';
+import {
+  AgentInitErrorPayload,
+  AgentRuntimeError,
+  ChatCompletionErrorPayload,
+  ILobeAgentRuntimeErrorType,
+  LobeGoogleAI,
+} from '@/libs/agent-runtime';
+import { ChatErrorType } from '@/types/fetch';
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+import { checkPasswordOrUseUserApiKey, getJWTPayload } from '../auth';
+
+// due to the Chinese region does not support accessing Google
+// we need to use proxy to access it
+// refs: https://github.com/google/generative-ai-js/issues/29#issuecomment-1866246513
+// if (process.env.HTTP_PROXY_URL) {
+//   const { setGlobalDispatcher, ProxyAgent } = require('undici');
+//
+//   setGlobalDispatcher(new ProxyAgent({ uri: process.env.HTTP_PROXY_URL }));
+// }
+// undici only can be used in NodeJS
+// export const runtime = 'nodejs';
+
+export const runtime = 'edge';
+
+export const preferredRegion = [
+  'bom1',
+  'cle1',
+  'cpt1',
+  'gru1',
+  'hnd1',
+  'iad1',
+  'icn1',
+  'kix1',
+  'pdx1',
+  'sfo1',
+  'sin1',
+  'syd1',
+];
+
+export const POST = async (req: Request) => {
+  let agentRuntime: LobeGoogleAI;
+
+  // ============  1. init chat model   ============ //
+
+  try {
+    // get Authorization from header
+    const authorization = req.headers.get(LOBE_CHAT_AUTH_HEADER);
+    if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
+
+    // check the Auth With payload
+    const payload = await getJWTPayload(authorization);
+    checkPasswordOrUseUserApiKey(payload.accessCode, payload.apiKey);
+
+    const { GOOGLE_API_KEY } = getServerConfig();
+    const apiKey = payload?.apiKey || GOOGLE_API_KEY;
+
+    agentRuntime = new LobeGoogleAI(apiKey);
+  } catch (e) {
+    // if catch the error, just return it
+    const err = e as AgentInitErrorPayload;
+
+    return createErrorResponse(err.type as ILobeAgentRuntimeErrorType, {
+      error: err.error,
+      provider: 'google',
+    });
+  }
+
+  // ============  2. create chat completion   ============ //
+
+  try {
+    const payload = (await req.json()) as ChatStreamPayload;
+
+    return await agentRuntime.chat(payload);
+  } catch (e) {
+    const { errorType, provider, error: errorContent, ...res } = e as ChatCompletionErrorPayload;
+
+    // track the error at server side
+    console.error(`Route: [${provider}] ${errorType}:`, errorContent);
+
+    return createErrorResponse(errorType, { error: errorContent, provider, ...res });
+  }
+};

package/src/app/api/config/route.ts

@@ -7,10 +7,15 @@ export const runtime = 'edge';
  * get Server config to client
  */
 export const GET = async () => {
-  const { CUSTOM_MODELS } = getServerConfig();
+  const { CUSTOM_MODELS, ENABLED_ZHIPU, ENABLED_AWS_BEDROCK, ENABLED_GOOGLE } = getServerConfig();
 
   const config: GlobalServerConfig = {
     customModelName: CUSTOM_MODELS,
+    languageModel: {
+      bedrock: { enabled: ENABLED_AWS_BEDROCK },
+      google: { enabled: ENABLED_GOOGLE },
+      zhipu: { enabled: ENABLED_ZHIPU },
+    },
   };
 
   return new Response(JSON.stringify(config));

package/src/app/api/config.ts

@@ -1,15 +1,15 @@
 import { getServerConfig } from '@/config/server';
 
-export const getPreferredRegion = () => {
+export const getPreferredRegion = (region: string | string[] = 'auto') => {
   try {
     const cfg = getServerConfig();
     if (cfg.OPENAI_FUNCTION_REGIONS.length <= 0) {
-      return 'auto';
+      return region;
     }
 
     return cfg.OPENAI_FUNCTION_REGIONS;
   } catch (error) {
     console.error('get server config failed, error:', error);
-    return 'auto';
+    return region;
   }
 };

package/src/app/api/errorResponse.test.ts

@@ -6,34 +6,34 @@ import { createErrorResponse } from './errorResponse';
 
 describe('createErrorResponse', () => {
   // 测试各种错误类型的状态码
-  it('returns a 401 status for NoAPIKey error type', () => {
-    const errorType = ChatErrorType.NoAPIKey;
+  it('returns a 401 status for NoOpenAIAPIKey error type', () => {
+    const errorType = ChatErrorType.NoOpenAIAPIKey;
     const response = createErrorResponse(errorType);
     expect(response.status).toBe(401);
   });
 
   it('returns a 401 status for InvalidAccessCode error type', () => {
     const errorType = ChatErrorType.InvalidAccessCode;
-    const response = createErrorResponse(errorType);
+    const response = createErrorResponse(errorType as any);
     expect(response.status).toBe(401);
   });
 
-  it('returns a 577 status for OpenAIBizError error type', () => {
+  it('returns a 471 status for OpenAIBizError error type', () => {
     const errorType = ChatErrorType.OpenAIBizError;
     const response = createErrorResponse(errorType);
-    expect(response.status).toBe(577);
+    expect(response.status).toBe(471);
   });
 
   // 测试默认情况
   it('returns the same error type as status for unknown error types', () => {
     const errorType = 500; // 假设500是一个未知的错误类型
-    const response = createErrorResponse(errorType);
+    const response = createErrorResponse(errorType as any);
     expect(response.status).toBe(errorType);
   });
 
   // 测试返回的Response对象是否包含正确的body和errorType
   it('returns a Response object with the correct body and errorType', () => {
-    const errorType = ChatErrorType.NoAPIKey;
+    const errorType = ChatErrorType.NoOpenAIAPIKey;
     const body = { message: 'No API key provided' };
     const response = createErrorResponse(errorType, body);
     return response.json().then((data) => {
@@ -46,7 +46,7 @@ describe('createErrorResponse', () => {
 
   // 测试没有提供body时，返回的Response对象的body是否为undefined
   it('returns a Response object with an undefined body when no body is provided', () => {
-    const errorType = ChatErrorType.NoAPIKey;
+    const errorType = ChatErrorType.NoOpenAIAPIKey;
     const response = createErrorResponse(errorType);
     return response.json().then((data) => {
       expect(data.body).toBeUndefined();

package/src/app/api/errorResponse.ts

@@ -1,23 +1,60 @@
+import { consola } from 'consola';
+
+import { AgentRuntimeErrorType, ILobeAgentRuntimeErrorType } from '@/libs/agent-runtime';
 import { ChatErrorType, ErrorResponse, ErrorType } from '@/types/fetch';
 
-const getStatus = (errorType: ErrorType) => {
+const getStatus = (errorType: ILobeAgentRuntimeErrorType | ErrorType) => {
   switch (errorType) {
-    case ChatErrorType.NoAPIKey:
-    case ChatErrorType.InvalidAccessCode: {
+    case ChatErrorType.InvalidAccessCode:
+    case AgentRuntimeErrorType.NoOpenAIAPIKey:
+    case AgentRuntimeErrorType.InvalidAzureAPIKey:
+    case AgentRuntimeErrorType.InvalidBedrockCredentials:
+    case AgentRuntimeErrorType.InvalidZhipuAPIKey:
+    case AgentRuntimeErrorType.InvalidGoogleAPIKey: {
       return 401;
     }
 
-    case ChatErrorType.OpenAIBizError: {
-      return 577;
+    case AgentRuntimeErrorType.LocationNotSupportError: {
+      return 403;
+    }
+
+    // define the 471~480 as provider error
+    case AgentRuntimeErrorType.AgentRuntimeError: {
+      return 470;
+    }
+    case AgentRuntimeErrorType.OpenAIBizError: {
+      return 471;
+    }
+    case AgentRuntimeErrorType.AzureBizError: {
+      return 472;
+    }
+    case AgentRuntimeErrorType.ZhipuBizError: {
+      return 473;
+    }
+    case AgentRuntimeErrorType.BedrockBizError: {
+      return 474;
+    }
+    case AgentRuntimeErrorType.GoogleBizError: {
+      return 475;
     }
   }
   return errorType;
 };
 
-export const createErrorResponse = (errorType: ErrorType, body?: any) => {
+export const createErrorResponse = (
+  errorType: ErrorType | ILobeAgentRuntimeErrorType,
+  body?: any,
+) => {
   const statusCode = getStatus(errorType);
 
   const data: ErrorResponse = { body, errorType };
 
+  if (typeof statusCode !== 'number' || statusCode < 200 || statusCode > 599) {
+    consola.error(
+      `current StatusCode: \`${statusCode}\` .`,
+      'Please go to `./src/app/api/errorResponse.ts` to defined the statusCode.',
+    );
+  }
+
   return new Response(JSON.stringify(data), { status: statusCode });
 };

package/src/app/api/openai/createBizOpenAI/createAzureOpenai.ts

@@ -20,7 +20,7 @@ export const createAzureOpenai = (params: {
   const apiVersion = !params.apiVersion ? defaultApiVersion : params.apiVersion;
   const apiKey = !params.userApiKey ? AZURE_API_KEY : params.userApiKey;
 
-  if (!apiKey) throw new Error('AZURE_API_KEY is empty', { cause: ChatErrorType.NoAPIKey });
+  if (!apiKey) throw new Error('AZURE_API_KEY is empty', { cause: ChatErrorType.NoOpenAIAPIKey });
 
   const config: ClientOptions = {
     apiKey,

package/src/app/api/openai/createBizOpenAI/createOpenai.ts

@@ -11,7 +11,7 @@ export const createOpenai = (userApiKey: string | null, endpoint?: string | null
 
   const apiKey = !userApiKey ? OPENAI_API_KEY : userApiKey;
 
-  if (!apiKey) throw new Error('OPENAI_API_KEY is empty', { cause: ChatErrorType.NoAPIKey });
+  if (!apiKey) throw new Error('OPENAI_API_KEY is empty', { cause: ChatErrorType.NoOpenAIAPIKey });
 
   return new OpenAI({ apiKey, baseURL });
 };

package/src/app/api/openai/createBizOpenAI/index.ts

@@ -34,8 +34,8 @@ export const createBizOpenAI = (req: Request, model: string): Response | OpenAI
       openai = createOpenai(apiKey, endpoint);
     }
   } catch (error) {
-    if ((error as Error).cause === ChatErrorType.NoAPIKey) {
-      return createErrorResponse(ChatErrorType.NoAPIKey);
+    if ((error as Error).cause === ChatErrorType.NoOpenAIAPIKey) {
+      return createErrorResponse(ChatErrorType.NoOpenAIAPIKey);
     }
 
     console.error(error); // log error to trace it

package/src/app/chat/(desktop)/features/ChatHeader.tsx

@@ -1,5 +1,4 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
+import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -7,8 +6,10 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import ModelTag from '@/components/ModelTag';
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/slices/settings/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
@@ -34,6 +35,7 @@ const Left = memo(() => {
       agentSelectors.currentAgentPlugins(s),
     ]);
 
+  const showPlugin = useGlobalStore(modelProviderSelectors.modelEnabledFunctionCall(model));
   const displayTitle = isInbox ? t('inbox.title') : title;
   const displayDesc = isInbox ? t('inbox.desc') : description;
 
@@ -63,8 +65,8 @@ const Left = memo(() => {
         desc={displayDesc}
         tag={
           <>
-            <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
-            {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+            <ModelTag model={model} />
+            {showPlugin && plugins?.length > 0 && <PluginTag plugins={plugins} />}
           </>
         }
         title={displayTitle}

package/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx

@@ -19,11 +19,12 @@ import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
-import { preferenceSelectors } from '@/store/global/selectors';
+import { modelProviderSelectors, preferenceSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { isMacOS } from '@/utils/platform';
 
+import DragUpload from './DragUpload';
 import { LocalFiles } from './LocalFiles';
 
 const useStyles = createStyles(({ css, prefixCls, token }) => {
@@ -59,7 +60,7 @@ const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) =
   const { t } = useTranslation('chat');
 
   const { theme, styles } = useStyles();
-  const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
+
   const [loading, stopGenerateMessage] = useChatStore((s) => [
     !!s.chatLoadingId,
     s.stopGenerateMessage,
@@ -68,6 +69,10 @@ const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) =
     preferenceSelectors.useCmdEnterToSend(s),
     s.updatePreference,
   ]);
+
+  const model = useSessionStore(agentSelectors.currentAgentModel);
+  const canUpload = useGlobalStore(modelProviderSelectors.modelEnabledVision(model));
+
   const sendMessage = useSendMessage();
 
   const cmdEnter = (
@@ -98,7 +103,12 @@ const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) =
       padding={'0 24px'}
     >
       <Flexbox align={'center'} gap={8} horizontal>
-        {canUpload && <LocalFiles />}
+        {canUpload && (
+          <>
+            <DragUpload />
+            <LocalFiles />
+          </>
+        )}
       </Flexbox>
       <Flexbox align={'center'} gap={8} horizontal>
         <Flexbox

package/src/app/chat/(desktop)/features/ChatInput/Header/index.tsx

@@ -3,31 +3,23 @@ import { Maximize2, Minimize2 } from 'lucide-react';
 import { memo } from 'react';
 
 import ActionBar from '@/features/ChatInput/ActionBar';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
 
-import DragUpload from './DragUpload';
+interface HeaderProps {
+  expand: boolean;
+  setExpand: (expand: boolean) => void;
+}
 
-const Header = memo<{ expand: boolean; setExpand: (expand: boolean) => void }>(
-  ({ expand, setExpand }) => {
-    const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
-
-    return (
-      <>
-        {canUpload && <DragUpload />}
-        <ActionBar
-          rightAreaEndRender={
-            <ActionIcon
-              icon={expand ? Minimize2 : Maximize2}
-              onClick={() => {
-                setExpand(!expand);
-              }}
-            />
-          }
-        />
-      </>
-    );
-  },
-);
+const Header = memo<HeaderProps>(({ expand, setExpand }) => (
+  <ActionBar
+    rightAreaEndRender={
+      <ActionIcon
+        icon={expand ? Minimize2 : Maximize2}
+        onClick={() => {
+          setExpand(!expand);
+        }}
+      />
+    }
+  />
+));
 
 export default Header;

package/src/app/chat/(desktop)/features/SideBar/index.tsx

@@ -19,6 +19,7 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 100% !important;
   `,
   drawer: css`
+    z-index: 0;
     background: ${token.colorBgLayout};
   `,
   header: css`

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],