@lobehub/chat 0.157.0 → 0.157.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.157.1](https://github.com/lobehub/lobe-chat/compare/v0.157.0...v0.157.1)
+
+<sup>Released on **2024-05-12**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix dalle error.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix dalle error ([7c493de](https://github.com/lobehub/lobe-chat/commit/7c493de))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.157.0](https://github.com/lobehub/lobe-chat/compare/v0.156.2...v0.157.0)
 
 <sup>Released on **2024-05-11**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.157.0",
+  "version": "0.157.1",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -81,25 +81,25 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "^5.3.6",
+    "@ant-design/icons": "^5.3.7",
     "@anthropic-ai/sdk": "^0.20.9",
     "@auth/core": "0.28.0",
-    "@aws-sdk/client-bedrock-runtime": "^3.565.0",
-    "@azure/openai": "^1.0.0-beta.12",
+    "@aws-sdk/client-bedrock-runtime": "^3.574.0",
+    "@azure/openai": "1.0.0-beta.12",
     "@cfworker/json-schema": "^1.12.8",
     "@clerk/localizations": "2.0.0",
-    "@clerk/nextjs": "^5.0.6",
-    "@clerk/themes": "^2.0.0",
+    "@clerk/nextjs": "^5.0.8",
+    "@clerk/themes": "^2.1.3",
     "@google/generative-ai": "^0.10.0",
-    "@icons-pack/react-simple-icons": "^9.4.1",
+    "@icons-pack/react-simple-icons": "^9.5.0",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/icons": "latest",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "^1.138.17",
+    "@lobehub/ui": "^1.138.23",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@next/third-parties": "^14.2.3",
-    "@sentry/nextjs": "^7.112.2",
+    "@sentry/nextjs": "^7.114.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@trpc/client": "next",
     "@trpc/next": "next",
@@ -118,15 +118,15 @@
     "diff": "^5.2.0",
     "fast-deep-equal": "^3.1.3",
     "gpt-tokenizer": "^2.1.2",
-    "i18next": "^23.11.3",
+    "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^7.2.1",
     "i18next-resources-to-backend": "^1.2.1",
     "idb-keyval": "^6.2.1",
     "immer": "^10.1.1",
     "ip": "^2.0.1",
-    "jose": "^5.2.4",
-    "langfuse": "^3.8.0",
-    "langfuse-core": "^3.8.0",
+    "jose": "^5.3.0",
+    "langfuse": "^3.10.0",
+    "langfuse-core": "^3.10.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "latest",
     "modern-screenshot": "^4.4.39",
@@ -135,12 +135,12 @@
     "next-auth": "5.0.0-beta.15",
     "next-sitemap": "^4.2.3",
     "numeral": "^2.0.6",
-    "nuqs": "^1.17.1",
-    "ollama": "^0.5.0",
-    "openai": "^4.39.0",
+    "nuqs": "^1.17.2",
+    "ollama": "^0.5.1",
+    "openai": "^4.45.0",
     "pino": "^9.0.0",
     "polished": "^4.3.1",
-    "posthog-js": "^1.130.1",
+    "posthog-js": "^1.131.4",
     "query-string": "^9.0.0",
     "random-words": "^2.0.1",
     "react": "^18.3.1",
@@ -155,7 +155,7 @@
     "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.2",
     "rtl-detect": "^1.1.2",
-    "semver": "^7.6.0",
+    "semver": "^7.6.2",
     "sharp": "^0.33.3",
     "superjson": "^2.2.1",
     "swr": "^2.2.5",
@@ -170,13 +170,13 @@
     "y-webrtc": "^10.3.0",
     "yaml": "^2.4.2",
     "yjs": "^13.6.15",
-    "zod": "^3.23.5",
+    "zod": "^3.23.8",
     "zustand": "^4.5.2",
     "zustand-utils": "^1.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
-    "@ducanh2912/next-pwa": "^10.2.6",
+    "@ducanh2912/next-pwa": "^10.2.7",
     "@edge-runtime/vm": "^3.2.0",
     "@lobehub/i18n-cli": "^1.18.1",
     "@lobehub/lint": "^1.23.4",
@@ -185,24 +185,24 @@
     "@next/eslint-plugin-next": "^14.2.3",
     "@peculiar/webcrypto": "^1.4.6",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.6",
+    "@testing-library/react": "^15.0.7",
     "@types/chroma-js": "^2.4.4",
     "@types/debug": "^4.1.12",
-    "@types/diff": "^5.2.0",
+    "@types/diff": "^5.2.1",
     "@types/ip": "^1.1.3",
     "@types/json-schema": "^7.0.15",
-    "@types/lodash": "^4.17.0",
+    "@types/lodash": "^4.17.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.12.11",
     "@types/numeral": "^2.0.5",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/rtl-detect": "^1.0.3",
     "@types/semver": "^7.5.8",
     "@types/systemjs": "^6.13.5",
     "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^9.0.8",
-    "@umijs/lint": "^4.1.10",
+    "@umijs/lint": "^4.2.2",
     "@vitest/coverage-v8": "~1.2.2",
     "ajv-keywords": "^5.1.0",
     "commitlint": "^19.3.0",
@@ -211,9 +211,9 @@
     "eslint": "^8.57.0",
     "eslint-plugin-mdx": "^2.3.4",
     "fake-indexeddb": "^5.0.2",
-    "glob": "^10.3.12",
+    "glob": "^10.3.15",
     "gray-matter": "^4.0.3",
-    "happy-dom": "^14.7.1",
+    "happy-dom": "^14.10.1",
     "husky": "^9.0.11",
     "just-diff": "^6.0.2",
     "lint-staged": "^15.2.2",
@@ -227,11 +227,11 @@
     "remark-parse": "^10.0.2",
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
-    "tsx": "^4.7.3",
+    "tsx": "^4.10.0",
     "typescript": "^5.4.5",
     "unified": "^11.0.4",
     "unist-util-visit": "^5.0.0",
-    "vite": "^5.2.10",
+    "vite": "^5.2.11",
     "vitest": "~1.2.2",
     "vitest-canvas-mock": "^0.3.3"
   },

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

@@ -2,18 +2,18 @@
 import { getAuth } from '@clerk/nextjs/server';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { checkAuthMethod, getJWTPayload } from '@/app/api/middleware/auth/utils';
 import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
 import { AgentRuntime, LobeRuntimeAI } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
-import { checkAuthMethod, getJWTPayload } from '../auth/utils';
 import { POST } from './route';
 
 vi.mock('@clerk/nextjs/server', () => ({
   getAuth: vi.fn(),
 }));
 
-vi.mock('../auth/utils', () => ({
+vi.mock('../../middleware/auth/utils', () => ({
   getJWTPayload: vi.fn(),
   checkAuthMethod: vi.fn(),
 }));

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

@@ -5,8 +5,8 @@ import { ChatErrorType } from '@/types/fetch';
 import { ChatStreamPayload } from '@/types/openai/chat';
 import { getTracePayload } from '@/utils/trace';
 
+import { checkAuth } from '../../middleware/auth';
 import { createTraceOptions, initAgentRuntimeWithUserPayload } from '../agentRuntime';
-import { checkAuth } from '../auth';
 
 export const runtime = 'edge';
 

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

@@ -5,8 +5,8 @@ import { createErrorResponse } from '@/app/api/errorResponse';
 import { ChatCompletionErrorPayload, ModelProvider } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
+import { checkAuth } from '../../../middleware/auth';
 import { initAgentRuntimeWithUserPayload } from '../../agentRuntime';
-import { checkAuth } from '../../auth';
 
 export const runtime = 'edge';
 

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

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { checkAuth } from './auth';
 import { getPreferredRegion } from './config';
+import { checkAuth } from './openai/createBizOpenAI/auth';
 
 // Stub the global process object to safely mock environment variables
 vi.stubGlobal('process', {
@@ -41,53 +41,3 @@ describe('getPreferredRegion', () => {
     expect(preferredRegion).toStrictEqual(['ida1', 'sfo1']);
   });
 });
-
-describe('ACCESS_CODE', () => {
-  let auth = false;
-
-  beforeEach(() => {
-    auth = false;
-    process.env.ACCESS_CODE = undefined;
-    // Reset environment variables before each test case
-    vi.restoreAllMocks();
-  });
-
-  it('set multiple access codes', () => {
-    process.env.ACCESS_CODE = ',code1,code2,code3';
-    ({ auth } = checkAuth({ accessCode: 'code1' }));
-    expect(auth).toBe(true);
-    ({ auth } = checkAuth({ accessCode: 'code2' }));
-    expect(auth).toBe(true);
-    ({ auth } = checkAuth({ accessCode: 'code1,code2' }));
-    expect(auth).toBe(false);
-  });
-
-  it('set individual access code', () => {
-    process.env.ACCESS_CODE = 'code1';
-    ({ auth } = checkAuth({ accessCode: 'code1' }));
-    expect(auth).toBe(true);
-    ({ auth } = checkAuth({ accessCode: 'code2' }));
-    expect(auth).toBe(false);
-  });
-
-  it('no access code', () => {
-    ({ auth } = checkAuth({ accessCode: 'code1' }));
-    expect(auth).toBe(true);
-    ({ auth } = checkAuth({}));
-    expect(auth).toBe(true);
-  });
-
-  it('empty access code', () => {
-    process.env.ACCESS_CODE = '';
-    ({ auth } = checkAuth({ accessCode: 'code1' }));
-    expect(auth).toBe(true);
-    ({ auth } = checkAuth({}));
-    expect(auth).toBe(true);
-
-    process.env.ACCESS_CODE = ',,';
-    ({ auth } = checkAuth({ accessCode: 'code1' }));
-    expect(auth).toBe(true);
-    ({ auth } = checkAuth({}));
-    expect(auth).toBe(true);
-  });
-});

package/src/app/api/openai/createBizOpenAI/auth.test.ts

@@ -0,0 +1,52 @@
+import { checkAuth } from './auth';
+
+describe('ACCESS_CODE', () => {
+  let auth = false;
+
+  beforeEach(() => {
+    auth = false;
+    process.env.ACCESS_CODE = undefined;
+    // Reset environment variables before each test case
+    vi.restoreAllMocks();
+  });
+
+  it('set multiple access codes', () => {
+    process.env.ACCESS_CODE = ',code1,code2,code3';
+    ({ auth } = checkAuth({ accessCode: 'code1' }));
+    expect(auth).toBe(true);
+    ({ auth } = checkAuth({ accessCode: 'code2' }));
+    expect(auth).toBe(true);
+    ({ auth } = checkAuth({ accessCode: 'code1,code2' }));
+    expect(auth).toBe(false);
+  });
+
+  it('set individual access code', () => {
+    process.env.ACCESS_CODE = 'code1';
+    ({ auth } = checkAuth({ accessCode: 'code1' }));
+    expect(auth).toBe(true);
+    ({ auth } = checkAuth({ accessCode: 'code2' }));
+    expect(auth).toBe(false);
+  });
+
+  it('no access code', () => {
+    delete process.env.ACCESS_CODE;
+    ({ auth } = checkAuth({ accessCode: 'code1' }));
+    expect(auth).toBe(true);
+    ({ auth } = checkAuth({}));
+    expect(auth).toBe(true);
+  });
+
+  it('empty access code', () => {
+    process.env.ACCESS_CODE = '';
+    ({ auth } = checkAuth({ accessCode: 'code1' }));
+    expect(auth).toBe(true);
+    ({ auth } = checkAuth({}));
+    expect(auth).toBe(true);
+
+    process.env.ACCESS_CODE = ',,';
+    ({ auth } = checkAuth({ accessCode: 'code1' }));
+    expect(auth).toBe(true);
+    ({ auth } = checkAuth({}));
+    expect(auth).toBe(true);
+  });
+});

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

@@ -1,10 +1,10 @@
 import OpenAI from 'openai';
 
-import { checkAuth } from '@/app/api/auth';
 import { getOpenAIAuthFromRequest } from '@/const/fetch';
 import { ChatErrorType, ErrorType } from '@/types/fetch';
 
 import { createErrorResponse } from '../../errorResponse';
+import { checkAuth } from './auth';
 import { createOpenai } from './createOpenai';
 
 /**

package/src/app/api/plugin/gateway/route.ts

@@ -1,8 +1,8 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { createGatewayOnEdgeRuntime } from '@lobehub/chat-plugins-gateway';
 
-import { getJWTPayload } from '@/app/api/chat/auth/utils';
 import { createErrorResponse } from '@/app/api/errorResponse';
+import { getJWTPayload } from '@/app/api/middleware/auth/utils';
 import { getServerConfig } from '@/config/server';
 import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED, enableNextAuth } from '@/const/auth';
 import { LOBE_CHAT_TRACE_ID, TraceNameMap } from '@/const/trace';

package/src/app/api/text-to-image/[provider]/route.ts

@@ -0,0 +1,61 @@
+import { NextResponse } from 'next/server';
+
+import { getPreferredRegion } from '@/app/api/config';
+import { createErrorResponse } from '@/app/api/errorResponse';
+import { ChatCompletionErrorPayload } from '@/libs/agent-runtime';
+import { TextToImagePayload } from '@/libs/agent-runtime/types';
+import { ChatErrorType } from '@/types/fetch';
+
+import { initAgentRuntimeWithUserPayload } from '../../chat/agentRuntime';
+import { checkAuth } from '../../middleware/auth';
+
+export const runtime = 'edge';
+
+export const preferredRegion = getPreferredRegion();
+
+// return NextResponse.json(
+//   {
+//     body: {
+//       endpoint: 'https://ai****ix.com/v1',
+//       error: {
+//         code: 'content_policy_violation',
+//         message:
+//           'Your request was rejected as a result of our safety system. Image descriptions generated from your prompt may contain text that is not allowed by our safety system. If you believe this was done in error, your request may succeed if retried, or by adjusting your prompt.',
+//         param: null,
+//         type: 'invalid_request_error',
+//       },
+//       provider: 'openai',
+//     },
+//     errorType: 'OpenAIBizError',
+//   },
+//   { status: 400 },
+// );
+
+export const POST = checkAuth(async (req: Request, { params, jwtPayload }) => {
+  const { provider } = params;
+
+  try {
+    // ============  1. init chat model   ============ //
+    const agentRuntime = await initAgentRuntimeWithUserPayload(provider, jwtPayload);
+
+    // ============  2. create chat completion   ============ //
+
+    const data = (await req.json()) as TextToImagePayload;
+
+    const images = await agentRuntime.textToImage(data);
+
+    return NextResponse.json(images);
+  } catch (e) {
+    const {
+      errorType = ChatErrorType.InternalServerError,
+      error: errorContent,
+      ...res
+    } = e as ChatCompletionErrorPayload;
+
+    const error = errorContent || e;
+    // track the error at server side
+    console.error(`Route: [${provider}] ${errorType}:`, error);
+
+    return createErrorResponse(errorType, { error, ...res, provider });
+  }
+});

package/src/components/GalleyGrid/index.tsx

@@ -41,13 +41,13 @@ const GalleyGrid = memo<GalleyGridProps>(({ items, renderItem: Render }) => {
     <Flexbox gap={gap}>
       <Grid col={firstRow.length} gap={gap} max={max}>
         {firstRow.map((i, index) => (
-          <Render {...i} key={index} />
+          <Render {...i} index={index} key={index} />
         ))}
       </Grid>
       {lastRow.length > 0 && (
         <Grid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
           {lastRow.map((i, index) => (
-            <Render {...i} key={index} />
+            <Render {...i} index={index} key={index} />
           ))}
         </Grid>
       )}

package/src/database/client/schemas/message.ts

@@ -30,6 +30,8 @@ export const DB_MessageSchema = z.object({
 
   plugin: PluginSchema.optional(),
   pluginState: z.any().optional(),
+  pluginError: z.any().optional(),
+
   fromModel: z.string().optional(),
   fromProvider: z.string().optional(),
   translate: TranslateSchema.optional().or(z.literal(false)),

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

@@ -6,9 +6,10 @@ import { RenderAction } from '../types';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 
-export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, error }) => {
+export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, error, tools }) => {
   const { regenerate, edit, delAndRegenerate, copy, divider, del } = useChatListActionsBar();
   const { translate, tts } = useCustomActions();
+  const hasTools = !!tools;
 
   if (id === 'default') return;
 
@@ -27,7 +28,7 @@ export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, erro
         delAndRegenerate,
         del,
       ]}
-      items={[edit, copy]}
+      items={[hasTools ? delAndRegenerate : edit, copy]}
       onActionClick={onActionClick}
       type="ghost"
     />

package/src/features/Conversation/Actions/Tool.tsx

@@ -1,16 +1,28 @@
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { useChatStore } from '@/store/chat';
+
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { RenderAction } from '../types';
 
-export const ToolActionsBar: RenderAction = memo(() => {
-  return undefined;
-  // const { regenerate } = useChatListActionsBar();
-  // return (
-  //   <ActionIconGroup
-  //     dropdownMenu={[regenerate]}
-  //     items={[regenerate]}
-  //     onActionClick={onActionClick}
-  //     type="ghost"
-  //   />
-  // );
+export const ToolActionsBar: RenderAction = memo(({ id }) => {
+  const { regenerate } = useChatListActionsBar();
+  const [reInvokeToolMessage] = useChatStore((s) => [s.reInvokeToolMessage]);
+
+  return (
+    <ActionIconGroup
+      // dropdownMenu={[regenerate]}
+      items={[regenerate]}
+      onActionClick={(event) => {
+        switch (event.key) {
+          case 'regenerate': {
+            reInvokeToolMessage(id);
+            break;
+          }
+        }
+      }}
+      type="ghost"
+    />
+  );
 });

package/src/features/Conversation/Messages/Assistant/ToolCalls/index.tsx

@@ -1,12 +1,12 @@
 import { Avatar, Highlighter, Icon } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { Loader2, LucideChevronDown, LucideChevronRight, LucideToyBrick } from 'lucide-react';
-import { memo, useState } from 'react';
+import { CSSProperties, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/slices/message/selectors';
+import { chatSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
@@ -15,15 +15,17 @@ import { useStyles } from './style';
 export interface InspectorProps {
   arguments?: string;
   identifier: string;
+  index: number;
   messageId: string;
+  style: CSSProperties;
 }
 
 const CallItem = memo<InspectorProps>(
-  ({ arguments: requestArgs = '{}', messageId, identifier }) => {
+  ({ arguments: requestArgs = '{}', messageId, index, identifier, style }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
-    const loading = useChatStore(chatSelectors.isMessageGenerating(messageId));
+    const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, index));
 
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
@@ -32,20 +34,13 @@ const CallItem = memo<InspectorProps>(
     const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
     const avatar = pluginAvatar ? (
-      <Avatar avatar={pluginAvatar} size={32} />
+      <Avatar alt={pluginTitle} avatar={pluginAvatar} size={32} />
     ) : (
       <Icon icon={LucideToyBrick} />
     );
 
-    let params;
-    try {
-      params = JSON.stringify(JSON.parse(requestArgs), null, 2);
-    } catch {
-      params = requestArgs;
-    }
-
     return (
-      <Flexbox gap={8}>
+      <Flexbox gap={8} style={style}>
         <Flexbox
           align={'center'}
           className={styles.container}
@@ -69,7 +64,7 @@ const CallItem = memo<InspectorProps>(
           </Flexbox>
           <Icon icon={open ? LucideChevronDown : LucideChevronRight} />
         </Flexbox>
-        {(open || loading) && <Highlighter language={'json'}>{params}</Highlighter>}
+        {(open || loading) && <Highlighter language={'json'}>{requestArgs}</Highlighter>}
       </Flexbox>
     );
   },

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -7,7 +7,7 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
 import { DefaultMessage } from '../Default';
-import ToolCalls from './ToolCalls';
+import ToolCall from './ToolCalls';
 
 export const AssistantMessage = memo<
   ChatMessage & {
@@ -32,12 +32,16 @@ export const AssistantMessage = memo<
       )}
       {!editing && tools && (
         <Flexbox gap={8} horizontal>
-          {tools.map((toolCall) => (
-            <ToolCalls
+          {tools.map((toolCall, index) => (
+            <ToolCall
               arguments={toolCall.arguments}
               identifier={toolCall.identifier}
+              index={index}
               key={toolCall.id}
               messageId={id}
+              style={{
+                maxWidth: `max(${100 / tools.length}%, 300px)`,
+              }}
             />
           ))}
         </Flexbox>

package/src/features/Conversation/Messages/Tool/Inspector/index.tsx

@@ -53,7 +53,7 @@ const Inspector = memo<InspectorProps>(
     const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
     const avatar = pluginAvatar ? (
-      <Avatar avatar={pluginAvatar} size={32} />
+      <Avatar alt={pluginTitle} avatar={pluginAvatar} size={32} />
     ) : (
       <Icon icon={LucideToyBrick} />
     );

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

@@ -1,12 +1,21 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
 import { LobeToolRenderType } from '@/types/tool';
 
-import BuiltinType from '././BuiltinType';
 import DefaultType from './DefaultType';
 import Markdown from './MarkdownType';
-import Standalone from './StandaloneType';
+
+const loading = () => (
+  <Skeleton.Node active style={{ width: '100%' }}>
+    {' '}
+  </Skeleton.Node>
+);
+
+const Standalone = dynamic(() => import('./StandaloneType'), { loading });
+const BuiltinType = dynamic(() => import('./BuiltinType'), { loading });
 
 export interface PluginRenderProps {
   content: string;