@lobehub/chat 0.122.8 → 0.123.0

package/src/features/Conversation/Error/OpenAiBizError.tsx

@@ -1,12 +1,12 @@
-import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
-import { RenderErrorMessage } from '../types';
-import OpenAPIKey from './OpenAPIKey';
+import { ChatMessage } from '@/types/message';
+
+import ErrorJsonViewer from './ErrorJsonViewer';
+import InvalidAPIKey from './InvalidAPIKey';
 
 interface OpenAIError {
-  code: 'invalid_api_key' | string;
+  code: 'invalid_api_key' | 'insufficient_quota' | string;
   message: string;
   param?: any;
   type: string;
@@ -16,22 +16,14 @@ interface OpenAIErrorResponse {
   error: OpenAIError;
 }
 
-const OpenAiBizError: RenderErrorMessage['Render'] = memo(({ error, id, ...props }) => {
+const OpenAiBizError = memo<ChatMessage>(({ error, id }) => {
   const errorBody: OpenAIErrorResponse = (error as any)?.body;
 
   const errorCode = errorBody.error?.code;
 
-  if (errorCode === 'invalid_api_key')
-    // @ts-ignore
-    return <OpenAPIKey error={error} id={id} {...props} />;
-
-  return (
-    <Flexbox style={{ maxWidth: 600 }}>
-      <Highlighter copyButtonSize={'small'} language={'json'}>
-        {JSON.stringify(errorBody, null, 2)}
-      </Highlighter>
-    </Flexbox>
-  );
+  if (errorCode === 'invalid_api_key') return <InvalidAPIKey id={id} />;
+
+  return <ErrorJsonViewer error={error} id={id} />;
 });
 
 export default OpenAiBizError;

package/src/features/Conversation/Error/{Plugin/PluginSettings.tsx → PluginSettings.tsx}

@@ -10,11 +10,16 @@ import PluginSettingsConfig from '@/features/PluginSettings';
 import { useChatStore } from '@/store/chat';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
+import { ChatPluginPayload } from '@/types/message';
 
-import { RenderErrorMessage } from '../../types';
-import { ErrorActionContainer, useStyles } from '../style';
+import { ErrorActionContainer, useStyles } from './style';
 
-const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {
+interface PluginSettingsProps {
+  id: string;
+  plugin?: ChatPluginPayload;
+}
+
+const PluginSettings = memo<PluginSettingsProps>(({ id, plugin }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('error');
   const theme = useTheme();

package/src/features/Conversation/Error/index.tsx

@@ -1,78 +1,83 @@
-import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
+import { IPluginErrorType, PluginErrorType } from '@lobehub/chat-plugin-sdk';
+import type { AlertProps } from '@lobehub/ui';
+import { memo } from 'react';
 
-import { ChatErrorType } from '@/types/fetch';
+import { AgentRuntimeErrorType, ILobeAgentRuntimeErrorType } from '@/libs/agent-runtime';
+import { ChatErrorType, ErrorType } from '@/types/fetch';
+import { ChatMessage, ChatMessageError } from '@/types/message';
 
-import { RenderErrorMessage } from '../types';
-import InvalidAccess from './InvalidAccess';
-import OpenAPIKey from './OpenAPIKey';
+import ErrorJsonViewer from './ErrorJsonViewer';
+import InvalidAPIKey from './InvalidAPIKey';
+import InvalidAccessCode from './InvalidAccessCode';
 import OpenAiBizError from './OpenAiBizError';
-import PluginError from './Plugin/PluginError';
-import PluginSettings from './Plugin/PluginSettings';
+import PluginSettings from './PluginSettings';
 
-export const renderErrorMessages: Record<string, RenderErrorMessage> = {
-  [PluginErrorType.PluginMarketIndexNotFound]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginMarketIndexInvalid]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginMetaInvalid]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginMetaNotFound]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginManifestInvalid]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginManifestNotFound]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginApiNotFound]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginApiParamsError]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginServerError]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginGatewayError]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginOpenApiInitError]: {
-    Render: PluginError,
-  },
-  [PluginErrorType.PluginSettingsInvalid]: {
-    Render: PluginSettings,
-    config: {
+// Config for the errorMessage display
+export const getErrorAlertConfig = (
+  errorType?: IPluginErrorType | ILobeAgentRuntimeErrorType | ErrorType,
+): AlertProps | undefined => {
+  // OpenAIBizError / ZhipuBizError / GoogleBizError / ...
+  if (typeof errorType === 'string' && errorType.includes('Biz'))
+    return {
       extraDefaultExpand: true,
       extraIsolate: true,
       type: 'warning',
-    },
-  },
-  [ChatErrorType.InvalidAccessCode]: {
-    Render: InvalidAccess,
-    config: {
-      extraDefaultExpand: true,
-      extraIsolate: true,
-      type: 'warning',
-    },
-  },
-  [ChatErrorType.NoAPIKey]: {
-    Render: OpenAPIKey,
-    config: {
-      extraDefaultExpand: true,
-      extraIsolate: true,
-      type: 'warning',
-    },
-  },
-  [ChatErrorType.OpenAIBizError]: {
-    Render: OpenAiBizError,
-    config: {
-      extraDefaultExpand: true,
-      extraIsolate: true,
-      type: 'warning',
-    },
-  },
+    };
+
+  switch (errorType) {
+    case AgentRuntimeErrorType.LocationNotSupportError: {
+      return {
+        type: 'warning',
+      };
+    }
+
+    case PluginErrorType.PluginSettingsInvalid:
+    case ChatErrorType.InvalidAccessCode:
+    case AgentRuntimeErrorType.NoOpenAIAPIKey:
+    case AgentRuntimeErrorType.InvalidBedrockCredentials:
+    case AgentRuntimeErrorType.InvalidGoogleAPIKey:
+    case AgentRuntimeErrorType.InvalidZhipuAPIKey: {
+      return {
+        extraDefaultExpand: true,
+        extraIsolate: true,
+        type: 'warning',
+      };
+    }
+
+    default: {
+      return undefined;
+    }
+  }
 };
+
+const ErrorMessageExtra = memo<{ data: ChatMessage }>(({ data }) => {
+  const error = data.error as ChatMessageError;
+  if (!error?.type) return;
+
+  switch (error.type) {
+    case PluginErrorType.PluginSettingsInvalid: {
+      return <PluginSettings id={data.id} plugin={data.plugin} />;
+    }
+
+    case AgentRuntimeErrorType.OpenAIBizError: {
+      return <OpenAiBizError {...data} />;
+    }
+
+    case ChatErrorType.InvalidAccessCode: {
+      return <InvalidAccessCode id={data.id} provider={data.error?.body?.provider} />;
+    }
+
+    case AgentRuntimeErrorType.InvalidBedrockCredentials:
+    case AgentRuntimeErrorType.InvalidZhipuAPIKey:
+    case AgentRuntimeErrorType.InvalidGoogleAPIKey:
+    case AgentRuntimeErrorType.NoOpenAIAPIKey: {
+      return <InvalidAPIKey id={data.id} provider={data.error?.body?.provider} />;
+    }
+
+    default: {
+      return <ErrorJsonViewer error={data.error} id={data.id} />;
+    }
+  }
+});
+
+export default ErrorMessageExtra;

package/src/features/Conversation/Error/style.tsx

@@ -27,16 +27,22 @@ export const ErrorActionContainer = memo<{ children: ReactNode }>(({ children })
 });
 
 export const FormAction = memo<{
-  avatar: string;
+  avatar: ReactNode;
+  background?: string;
   children: ReactNode;
   description: string;
   title: string;
-}>(({ children, title, description, avatar }) => {
+}>(({ children, background, title, description, avatar }) => {
   const { styles, theme } = useStyles();
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>
-      <Avatar avatar={avatar} background={theme.colorFillContent} gap={12} size={80} />
+      <Avatar
+        avatar={avatar}
+        background={background ?? theme.colorFillContent}
+        gap={12}
+        size={80}
+      />
       <Flexbox style={{ fontSize: 20 }}>{title}</Flexbox>
       <Flexbox className={styles.desc}>{description}</Flexbox>
       {children}

package/src/features/Conversation/Extras/Assistant.tsx

@@ -1,8 +1,7 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { Tag } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import ModelTag from '@/components/ModelTag';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
@@ -30,7 +29,7 @@ export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
       <Flexbox gap={8} style={{ marginTop: 8 }}>
         {showModelTag && (
           <div>
-            <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
+            <ModelTag model={extra?.fromModel as string} />
           </div>
         )}
         <>

package/src/features/Conversation/Plugins/Inspector/index.tsx

@@ -60,8 +60,14 @@ const Inspector = memo<InspectorProps>(
       <Icon icon={LucideToyBrick} />
     );
 
-    const args = JSON.stringify(command, null, 2);
-    const params = JSON.stringify(JSON.parse(requestArgs), null, 2);
+    let args, params;
+    try {
+      args = JSON.stringify(command, null, 2);
+      params = JSON.stringify(JSON.parse(requestArgs), null, 2);
+    } catch {
+      args = '';
+      params = '';
+    }
 
     return (
       <Flexbox gap={8}>

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -1,4 +1,4 @@
-import { type AlertProps, ChatItem } from '@lobehub/ui';
+import { AlertProps, ChatItem } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ReactNode, memo, useCallback, useMemo, useState } from 'react';
@@ -10,7 +10,7 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
 
-import { renderErrorMessages } from '../../Error';
+import ErrorMessageExtra, { getErrorAlertConfig } from '../../Error';
 import { renderMessagesExtra } from '../../Extras';
 import { renderMessages, useAvatarsClick } from '../../Messages';
 import ActionsBar from './ActionsBar';
@@ -81,28 +81,13 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
     [item?.role],
   );
 
-  const ErrorMessage = useCallback(
-    ({ data }: { data: ChatMessage }) => {
-      if (!renderErrorMessages || !item?.error?.type) return;
-      let RenderFunction;
-      if (renderErrorMessages?.[item.error.type])
-        RenderFunction = renderErrorMessages[item.error.type].Render;
-      if (!RenderFunction && renderErrorMessages?.['default'])
-        RenderFunction = renderErrorMessages['default'].Render;
-      if (!RenderFunction) return;
-      return <RenderFunction {...data} />;
-    },
-    [item?.error],
-  );
-
-  const error = useMemo(() => {
+  const error = useMemo<AlertProps | undefined>(() => {
     if (!item?.error) return;
-    const message = item.error?.message;
-    let alertConfig = {};
-    if (item.error.type && renderErrorMessages?.[item.error.type]) {
-      alertConfig = renderErrorMessages[item.error.type]?.config as AlertProps;
-    }
-    return { message, ...alertConfig };
+    const messageError = item.error;
+
+    const alertConfig = getErrorAlertConfig(messageError.type);
+
+    return { message: t(`response.${messageError.type}` as any, { ns: 'error' }), ...alertConfig };
   }, [item?.error]);
 
   const enableHistoryDivider = useSessionStore((s) => {
@@ -124,7 +109,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
           className={styles.message}
           editing={editing}
           error={error}
-          errorMessage={<ErrorMessage data={item} />}
+          errorMessage={<ErrorMessageExtra data={item} />}
           loading={loading}
           message={item.content}
           messageExtra={<MessageExtra data={item} />}

package/src/features/Conversation/types/index.tsx

@@ -1,4 +1,4 @@
-import { type AlertProps, type ChatItemProps } from '@lobehub/ui';
+import { type ChatItemProps } from '@lobehub/ui';
 import { ActionEvent } from '@lobehub/ui';
 import { FC, ReactNode } from 'react';
 
@@ -12,10 +12,7 @@ export type OnAvatarsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'
 export type RenderRole = LLMRoleType | 'default' | string;
 export type RenderMessage = FC<ChatMessage & { editableContent: ReactNode }>;
 export type RenderMessageExtra = FC<ChatMessage>;
-export interface RenderErrorMessage {
-  Render?: FC<ChatMessage>;
-  config?: AlertProps;
-}
+
 export type RenderAction = FC<ActionsBarProps & ChatMessage>;
 
 export type RenderItem = FC<{ key: string } & ChatMessage & ListItemProps>;

package/src/hooks/_header.ts

@@ -0,0 +1,35 @@
+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';
+import { modelProviderSelectors, settingsSelectors } from '@/store/global/selectors';
+
+// TODO: Need to be removed after tts refactor
+// eslint-disable-next-line no-undef
+export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
+  const openai = modelProviderSelectors.openAIConfig(useGlobalStore.getState());
+
+  const apiKey = openai.OPENAI_API_KEY || '';
+  const endpoint = openai.endpoint || '';
+
+  // eslint-disable-next-line no-undef
+  const result: HeadersInit = {
+    ...header,
+    [LOBE_CHAT_ACCESS_CODE]: settingsSelectors.password(useGlobalStore.getState()),
+    [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/libs/agent-runtime/BaseAI.ts

@@ -0,0 +1,9 @@
+import { StreamingTextResponse } from 'ai';
+
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export interface LobeRuntimeAI {
+  baseURL?: string;
+
+  chat(payload: ChatStreamPayload): Promise<StreamingTextResponse>;
+}

package/src/libs/agent-runtime/azureOpenai/index.ts

@@ -0,0 +1,72 @@
+import {
+  AzureKeyCredential,
+  ChatRequestMessage,
+  GetChatCompletionsOptions,
+  OpenAIClient,
+} from '@azure/openai';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+import { LobeRuntimeAI } from '../BaseAI';
+import { AgentRuntimeErrorType } from '../error';
+import { ChatStreamPayload, ModelProvider } from '../types';
+import { AgentRuntimeError } from '../utils/createError';
+import { debugStream } from '../utils/debugStream';
+import { DEBUG_CHAT_COMPLETION } from '../utils/env';
+
+export class LobeAzureOpenAI implements LobeRuntimeAI {
+  private _client: OpenAIClient;
+
+  constructor(endpoint?: string, apikey?: string, apiVersion?: string) {
+    if (!apikey || !endpoint)
+      throw AgentRuntimeError.createError(AgentRuntimeErrorType.InvalidAzureAPIKey);
+
+    this._client = new OpenAIClient(endpoint, new AzureKeyCredential(apikey), { apiVersion });
+
+    this.baseURL = endpoint;
+  }
+
+  baseURL: string;
+
+  async chat(payload: ChatStreamPayload) {
+    // ============  1. preprocess messages   ============ //
+    const { messages, model, ...params } = payload;
+
+    // ============  2. send api   ============ //
+
+    try {
+      const response = await this._client.streamChatCompletions(
+        model,
+        messages as ChatRequestMessage[],
+        params as GetChatCompletionsOptions,
+      );
+
+      const stream = OpenAIStream(response);
+
+      const [debug, prod] = stream.tee();
+
+      if (DEBUG_CHAT_COMPLETION) {
+        debugStream(debug).catch(console.error);
+      }
+
+      return new StreamingTextResponse(prod);
+    } catch (e) {
+      let error = e as { [key: string]: any; code: string; message: string };
+
+      switch (error.code) {
+        case 'DeploymentNotFound': {
+          error = { ...error, deployId: model };
+        }
+      }
+
+      const errorType = error.code
+        ? AgentRuntimeErrorType.AzureBizError
+        : AgentRuntimeErrorType.AgentRuntimeError;
+
+      throw AgentRuntimeError.chat({
+        error,
+        errorType,
+        provider: ModelProvider.Azure,
+      });
+    }
+  }
+}

package/src/libs/agent-runtime/bedrock/index.ts

@@ -0,0 +1,134 @@
+import {
+  BedrockRuntimeClient,
+  InvokeModelWithResponseStreamCommand,
+} from '@aws-sdk/client-bedrock-runtime';
+import { AWSBedrockAnthropicStream, AWSBedrockLlama2Stream, StreamingTextResponse } from 'ai';
+import { experimental_buildAnthropicPrompt, experimental_buildLlama2Prompt } from 'ai/prompts';
+
+import { LobeRuntimeAI } from '../BaseAI';
+import { AgentRuntimeErrorType } from '../error';
+import { ChatStreamPayload, ModelProvider } from '../types';
+import { AgentRuntimeError } from '../utils/createError';
+import { debugStream } from '../utils/debugStream';
+import { DEBUG_CHAT_COMPLETION } from '../utils/env';
+
+export interface LobeBedrockAIParams {
+  accessKeyId?: string;
+  accessKeySecret?: string;
+  region?: string;
+}
+
+export class LobeBedrockAI implements LobeRuntimeAI {
+  private client: BedrockRuntimeClient;
+
+  region: string;
+
+  constructor({ region, accessKeyId, accessKeySecret }: LobeBedrockAIParams) {
+    if (!(accessKeyId && accessKeySecret))
+      throw AgentRuntimeError.createError(AgentRuntimeErrorType.InvalidBedrockCredentials);
+
+    this.region = region ?? 'us-east-1';
+
+    this.client = new BedrockRuntimeClient({
+      credentials: {
+        accessKeyId: accessKeyId,
+        secretAccessKey: accessKeySecret,
+      },
+      region: this.region,
+    });
+  }
+
+  async chat(payload: ChatStreamPayload) {
+    if (payload.model.startsWith('meta')) return this.invokeLlamaModel(payload);
+
+    return this.invokeClaudeModel(payload);
+  }
+
+  private invokeClaudeModel = async (
+    payload: ChatStreamPayload,
+  ): Promise<StreamingTextResponse> => {
+    const command = new InvokeModelWithResponseStreamCommand({
+      accept: 'application/json',
+      body: JSON.stringify({
+        max_tokens_to_sample: payload.max_tokens || 400,
+        prompt: experimental_buildAnthropicPrompt(payload.messages as any),
+      }),
+      contentType: 'application/json',
+      modelId: payload.model,
+    });
+
+    try {
+      // Ask Claude for a streaming chat completion given the prompt
+      const bedrockResponse = await this.client.send(command);
+
+      // Convert the response into a friendly text-stream
+      const stream = AWSBedrockAnthropicStream(bedrockResponse);
+
+      const [debug, output] = stream.tee();
+
+      if (DEBUG_CHAT_COMPLETION) {
+        debugStream(debug).catch(console.error);
+      }
+
+      // Respond with the stream
+      return new StreamingTextResponse(output);
+    } catch (e) {
+      const err = e as Error & { $metadata: any };
+
+      throw AgentRuntimeError.chat({
+        error: {
+          body: err.$metadata,
+          message: err.message,
+          type: err.name,
+        },
+        errorType: AgentRuntimeErrorType.BedrockBizError,
+        provider: ModelProvider.Bedrock,
+        region: this.region,
+      });
+    }
+  };
+
+  private invokeLlamaModel = async (payload: ChatStreamPayload) => {
+    const command = new InvokeModelWithResponseStreamCommand({
+      accept: 'application/json',
+      body: JSON.stringify({
+        max_gen_len: payload.max_tokens || 400,
+        prompt: experimental_buildLlama2Prompt(payload.messages as any),
+      }),
+      contentType: 'application/json',
+      modelId: payload.model,
+    });
+
+    try {
+      // Ask Claude for a streaming chat completion given the prompt
+      const bedrockResponse = await this.client.send(command);
+
+      // Convert the response into a friendly text-stream
+      const stream = AWSBedrockLlama2Stream(bedrockResponse);
+
+      const [debug, output] = stream.tee();
+
+      if (DEBUG_CHAT_COMPLETION) {
+        debugStream(debug).catch(console.error);
+      }
+      // Respond with the stream
+      return new StreamingTextResponse(output);
+    } catch (e) {
+      const err = e as Error & { $metadata: any };
+
+      throw AgentRuntimeError.chat({
+        error: {
+          body: err.$metadata,
+          message: err.message,
+          region: this.region,
+          type: err.name,
+        },
+        errorType: AgentRuntimeErrorType.BedrockBizError,
+        provider: ModelProvider.Bedrock,
+        region: this.region,
+      });
+    }
+  };
+}
+
+export default LobeBedrockAI;

package/src/libs/agent-runtime/error.ts

@@ -0,0 +1,26 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+
+// ******* Runtime Biz Error ******* //
+export const AgentRuntimeErrorType = {
+  AgentRuntimeError: 'AgentRuntimeError', // Agent Runtime 模块运行时错误
+  LocationNotSupportError: 'LocationNotSupportError',
+
+  OpenAIBizError: 'OpenAIBizError', // OpenAI 返回的业务错误
+
+  NoOpenAIAPIKey: 'NoOpenAIAPIKey',
+
+  InvalidAzureAPIKey: 'InvalidAzureAPIKey',
+  AzureBizError: 'AzureBizError', // Azure 返回的业务错误
+
+  InvalidZhipuAPIKey: 'InvalidZhipuAPIKey',
+  ZhipuBizError: 'ZhipuBizError',
+
+  InvalidGoogleAPIKey: 'InvalidGoogleAPIKey',
+  GoogleBizError: 'GoogleBizError',
+
+  InvalidBedrockCredentials: 'InvalidBedrockCredentials',
+  BedrockBizError: 'BedrockBizError', // Bedrock 返回的业务错误
+} as const;
+
+export type ILobeAgentRuntimeErrorType =
+  (typeof AgentRuntimeErrorType)[keyof typeof AgentRuntimeErrorType];