@lobehub/lobehub 2.0.0-next.294 → 2.0.0-next.296

package/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -2,7 +2,6 @@ import { Form } from '@lobehub/ui';
 import type { FormItemProps } from '@lobehub/ui';
 import { Form as AntdForm, Grid, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import Link from 'next/link';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -62,12 +61,13 @@ const ControlsForm = memo(() => {
         <span style={isNarrow ? descNarrow : descWide}>
           <Trans i18nKey={'extendParams.disableContextCaching.desc'} ns={'chat'}>
             单条对话生成成本最高可降低 90%，响应速度提升 4 倍（
-            <Link
+            <a
               href={'https://www.anthropic.com/news/prompt-caching?utm_source=lobechat'}
-              rel={'nofollow'}
+              rel="noreferrer nofollow"
+              target="_blank"
             >
               了解更多
-            </Link>
+            </a>
             ）。开启后将自动禁用历史记录限制
           </Trans>
         </span>
@@ -83,14 +83,15 @@ const ControlsForm = memo(() => {
         <span style={isNarrow ? descNarrow : descWide}>
           <Trans i18nKey={'extendParams.enableReasoning.desc'} ns={'chat'}>
             基于 Claude Thinking 机制限制（
-            <Link
+            <a
               href={
                 'https://docs.anthropic.com/en/docs/build-with-claude/extended-thinking?utm_source=lobechat#why-thinking-blocks-must-be-preserved'
               }
-              rel={'nofollow'}
+              rel="noreferrer nofollow"
+              target="_blank"
             >
               了解更多
-            </Link>
+            </a>
             ），开启后将自动禁用历史消息数限制
           </Trans>
         </span>

package/src/features/ChatInput/ActionBar/Params/Controls.tsx

@@ -306,9 +306,7 @@ const Controls = memo<ControlsProps>(({ setUpdating }) => {
     ...(enableMaxTokens
       ? [
           {
-            children: (
-              <SliderWithInput max={32_000} min={0} step={100} unlimitedInput />
-            ),
+            children: <SliderWithInput max={32_000} min={0} step={100} unlimitedInput />,
             label: (
               <Flexbox align={'center'} className={styles.label} gap={8} horizontal>
                 {t('settingModel.maxTokens.title')}

package/src/features/ChatInput/ActionBar/Token/index.tsx

@@ -1,4 +1,4 @@
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type PropsWithChildren, memo } from 'react';
 
 import { useModelHasContextWindowToken } from '@/hooks/useModelHasContextWindowToken';

package/src/features/ChatInput/Mobile/index.tsx

@@ -3,7 +3,7 @@
 import { ChatInput, ChatInputActionBar } from '@lobehub/editor/react';
 import { Flexbox } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import { useChatInputStore } from '@/features/ChatInput/store';

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

@@ -1,6 +1,6 @@
 import { Flexbox } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type ReactNode, Suspense, memo, useCallback } from 'react';
 
 import { useConversationStore } from '@/features/Conversation/store';

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

@@ -1,6 +1,6 @@
 import { type ChatMessageError } from '@lobechat/types';
 import { type AlertProps, Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import ErrorContent from '@/features/Conversation/ChatItem/components/ErrorContent';

package/src/features/Conversation/Error/OllamaSetupGuide/Desktop.tsx

@@ -1,6 +1,5 @@
 import { Ollama } from '@lobehub/icons';
 import { Button } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -29,7 +28,7 @@ const OllamaDesktopSetupGuide = memo<{ id?: string }>(({ id }) => {
       avatar={<Ollama.Avatar shape={'square'} size={40} />}
       desc={
         <Trans
-          components={[<span key="0" />, <Link href={'https://ollama.com/download'} key="1" />]}
+          components={[<span key="0" />, <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />]}
           i18nKey={'OllamaSetupGuide.install.description'}
           ns={'components'}
         />

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

@@ -3,7 +3,7 @@ import { AgentRuntimeErrorType, type ILobeAgentRuntimeErrorType } from '@lobecha
 import { ChatErrorType, type ChatMessageError, type ErrorType } from '@lobechat/types';
 import { type IPluginErrorType } from '@lobehub/chat-plugin-sdk';
 import { type AlertProps, Block, Highlighter, Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/features/Conversation/Messages/AssistantGroup/Tool/Actions/Settings.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, createRawModal } from '@lobehub/ui';
 import { LucideSettings } from 'lucide-react';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/features/Conversation/Messages/AssistantGroup/Tool/Actions/index.tsx

@@ -8,49 +8,43 @@ import Settings from './Settings';
 
 interface ActionsProps {
   assistantMessageId: string;
-  handleExpand?: (expand?: boolean) => void;
+  canToggleCustomToolRender?: boolean;
   identifier: string;
+  setShowCustomToolRender?: (show: boolean) => void;
   setShowDebug?: (show: boolean) => void;
-  setShowPluginRender: (show: boolean) => void;
-  showCustomPluginRender: boolean;
+  showCustomToolRender?: boolean;
   showDebug?: boolean;
-  showPluginRender: boolean;
 }
 
 const Actions = memo<ActionsProps>(
   ({
     assistantMessageId,
+    canToggleCustomToolRender,
     identifier,
+    setShowCustomToolRender,
     setShowDebug,
-    setShowPluginRender,
-    showCustomPluginRender,
+    showCustomToolRender,
     showDebug,
-    showPluginRender,
-    handleExpand,
   }) => {
     const { t } = useTranslation('plugin');
     const deleteAssistantMessage = useConversationStore((s) => s.deleteAssistantMessage);
 
     return (
       <>
-        {showCustomPluginRender && (
+        {canToggleCustomToolRender && (
           <ActionIcon
-            icon={showPluginRender ? LogsIcon : LayoutPanelTop}
+            icon={showCustomToolRender ? LogsIcon : LayoutPanelTop}
             onClick={() => {
-              setShowPluginRender(!showPluginRender);
-              handleExpand?.(true);
+              setShowCustomToolRender?.(!showCustomToolRender);
             }}
             size={'small'}
-            title={showPluginRender ? t('inspector.args') : t('inspector.pluginRender')}
+            title={showCustomToolRender ? t('inspector.args') : t('inspector.pluginRender')}
           />
         )}
         <ActionIcon
           active={showDebug}
           icon={showDebug ? LucideBugOff : LucideBug}
-          onClick={() => {
-            setShowDebug?.(!showDebug);
-            handleExpand?.(true);
-          }}
+          onClick={() => setShowDebug?.(!showDebug)}
           size={'small'}
           title={t(showDebug ? 'debug.off' : 'debug.on')}
         />

package/src/features/Conversation/Messages/AssistantGroup/Tool/{Render → Detail}/LoadingPlaceholder/index.tsx

@@ -2,6 +2,7 @@ import { safeParseJSON } from '@lobechat/utils';
 import { memo } from 'react';
 
 import { getBuiltinPlaceholder } from '@/tools/placeholders';
+import { getBuiltinStreaming } from '@/tools/streamings';
 
 import Arguments from '../Arguments';
 
@@ -9,16 +10,25 @@ interface LoadingPlaceholderProps {
   apiName: string;
   identifier: string;
   loading?: boolean;
+  messageId: string;
   requestArgs?: string;
+  toolCallId: string;
 }
 
 const LoadingPlaceholder = memo<LoadingPlaceholderProps>(
-  ({ identifier, requestArgs, apiName, loading }) => {
-    const Render = getBuiltinPlaceholder(identifier, apiName);
+  ({ identifier, requestArgs, apiName, loading, toolCallId, messageId }) => {
+    const Render =
+      getBuiltinPlaceholder(identifier, apiName) || getBuiltinStreaming(identifier, apiName);
 
     if (Render) {
       return (
-        <Render apiName={apiName} args={safeParseJSON(requestArgs) || {}} identifier={identifier} />
+        <Render
+          apiName={apiName}
+          args={safeParseJSON(requestArgs) || {}}
+          identifier={identifier}
+          messageId={messageId}
+          toolCallId={toolCallId}
+        />
       );
     }
 

package/src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Render/CustomRender.tsx

@@ -0,0 +1,43 @@
+import { type ChatPluginPayload } from '@/types/index';
+import { Flexbox } from '@lobehub/ui';
+import { memo } from 'react';
+
+import PluginRender from '@/features/PluginsUI/Render';
+
+interface CustomRenderProps {
+  content: string;
+  /**
+   * The real message ID (tool message ID)
+   */
+  messageId?: string;
+  plugin?: ChatPluginPayload;
+  pluginState?: any;
+  /**
+   * The tool call ID from the assistant message
+   */
+  toolCallId: string;
+}
+
+const CustomRender = memo<CustomRenderProps>(
+  ({ toolCallId, messageId, content, pluginState, plugin }) => {
+    return (
+      <Flexbox gap={12} id={toolCallId} width={'100%'}>
+        <PluginRender
+          arguments={plugin?.arguments}
+          content={content}
+          identifier={plugin?.identifier}
+          loading={false}
+          messageId={messageId}
+          payload={plugin}
+          pluginState={pluginState}
+          toolCallId={toolCallId}
+          type={plugin?.type}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+CustomRender.displayName = 'GroupCustomRender';
+
+export default CustomRender;

package/src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Render/FallbacktArgumentRender.tsx

@@ -0,0 +1,59 @@
+import { Block, Flexbox, Highlighter, Text } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Arguments from '../Arguments';
+
+interface FallbackArgumentRenderProps {
+  content: string;
+  requestArgs?: string;
+  toolCallId: string;
+}
+
+export const FallbackArgumentRender = memo<FallbackArgumentRenderProps>(
+  ({ toolCallId, content, requestArgs }) => {
+    const { t } = useTranslation('plugin');
+
+    // Parse and display result content
+    const { data, language } = useMemo(() => {
+      try {
+        const parsed = JSON.parse(content || '');
+        // If parsed result is a string, return it directly
+        if (typeof parsed === 'string') {
+          return { data: parsed, language: 'plaintext' };
+        }
+        return { data: JSON.stringify(parsed, null, 2), language: 'json' };
+      } catch {
+        return { data: content || '', language: 'plaintext' };
+      }
+    }, [content]);
+
+    // Default render: show arguments and result
+    return (
+      <Block id={toolCallId} variant={'outlined'} width={'100%'}>
+        <Arguments arguments={requestArgs} />
+        {content && (
+          <>
+            <Divider style={{ marginBlock: 0 }} />
+            <Flexbox paddingBlock={'8px 0'} paddingInline={16}>
+              <Text>{t('debug.response')}</Text>
+            </Flexbox>
+            <Highlighter
+              language={language}
+              style={{
+                background: 'transparent',
+                borderRadius: 0,
+                maxHeight: 300,
+                overflow: 'auto',
+              }}
+              variant={'filled'}
+            >
+              {data}
+            </Highlighter>
+          </>
+        )}
+      </Block>
+    );
+  },
+);

package/src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Render/index.tsx

@@ -0,0 +1,46 @@
+import { type ChatPluginPayload } from '@lobechat/types';
+import { memo } from 'react';
+
+import { getBuiltinRender } from '@/tools/renders';
+
+import CustomRender from './CustomRender';
+import { FallbackArgumentRender } from './FallbacktArgumentRender';
+
+interface ToolRenderProps {
+  content: string;
+  messageId?: string;
+  plugin?: ChatPluginPayload;
+  pluginState?: any;
+  showCustomToolRender?: boolean;
+  toolCallId: string;
+}
+
+const ToolRender = memo<ToolRenderProps>(
+  ({ showCustomToolRender, content, messageId, plugin, pluginState, toolCallId }) => {
+    const hasCustomRender = !!getBuiltinRender(plugin?.identifier, plugin?.apiName);
+
+    if (hasCustomRender && showCustomToolRender) {
+      return (
+        <CustomRender
+          content={content}
+          messageId={messageId}
+          plugin={plugin}
+          pluginState={pluginState}
+          toolCallId={toolCallId}
+        />
+      );
+    }
+
+    return (
+      <FallbackArgumentRender
+        content={content}
+        requestArgs={plugin?.arguments}
+        toolCallId={toolCallId}
+      />
+    );
+  },
+);
+
+ToolRender.displayName = 'ToolResultRender';
+
+export default ToolRender;

package/src/features/Conversation/Messages/AssistantGroup/Tool/{Render → Detail}/index.tsx

@@ -6,12 +6,12 @@ import { Suspense, memo } from 'react';
 import { getBuiltinStreaming } from '@/tools/streamings';
 
 import AbortResponse from './AbortResponse';
-import CustomRender from './CustomRender';
 import ErrorResponse from './ErrorResponse';
 import Intervention from './Intervention';
 import ModeSelector from './Intervention/ModeSelector';
 import LoadingPlaceholder from './LoadingPlaceholder';
 import RejectedResponse from './RejectedResponse';
+import ToolRender from './Render';
 
 interface RenderProps {
   apiName: string;
@@ -26,8 +26,7 @@ interface RenderProps {
    */
   messageId: string;
   result?: ChatToolResult;
-  setShowPluginRender: (show: boolean) => void;
-  showPluginRender: boolean;
+  showCustomToolRender?: boolean;
   toolCallId: string;
   toolMessageId?: string;
   type?: string;
@@ -45,8 +44,6 @@ const Render = memo<RenderProps>(
     messageId,
     arguments: requestArgs,
     disableEditing,
-    showPluginRender,
-    setShowPluginRender,
     identifier,
     apiName,
     result,
@@ -55,6 +52,7 @@ const Render = memo<RenderProps>(
     toolMessageId,
     isArgumentsStreaming,
     isToolCalling,
+    showCustomToolRender,
   }) => {
     if (toolMessageId && intervention?.status === 'pending' && !disableEditing) {
       return (
@@ -124,7 +122,9 @@ const Render = memo<RenderProps>(
         apiName={apiName}
         identifier={identifier}
         loading
+        messageId={messageId}
         requestArgs={requestArgs}
+        toolCallId={toolCallId}
       />
     );
 
@@ -133,23 +133,17 @@ const Render = memo<RenderProps>(
     return (
       <Suspense fallback={placeholder}>
         <Flexbox gap={8}>
-          <CustomRender
+          <ToolRender
             content={result.content || ''}
             messageId={toolMessageId}
-            plugin={
-              type
-                ? ({
-                    apiName,
-                    arguments: requestArgs || '',
-                    identifier,
-                    type,
-                  } as any)
-                : undefined
-            }
+            plugin={{
+              apiName,
+              arguments: requestArgs || '',
+              identifier,
+              type: type as any,
+            }}
             pluginState={result.state}
-            requestArgs={requestArgs}
-            setShowPluginRender={setShowPluginRender}
-            showPluginRender={showPluginRender}
+            showCustomToolRender={showCustomToolRender}
             toolCallId={toolCallId}
           />
           {!disableEditing && (

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

@@ -2,9 +2,9 @@ import { LOADING_FLAT } from '@lobechat/const';
 import { type ChatToolResult, type ToolIntervention } from '@lobechat/types';
 import { AccordionItem, Flexbox, Skeleton } from '@lobehub/ui';
 import { Divider } from 'antd';
-import dynamic from 'next/dynamic';
 import { memo, useEffect, useState } from 'react';
 
+import dynamic from '@/libs/next/dynamic';
 import { useChatStore } from '@/store/chat';
 import { operationSelectors } from '@/store/chat/slices/operation/selectors';
 import { useToolStore } from '@/store/tool';
@@ -21,7 +21,7 @@ const Debug = dynamic(() => import('./Debug'), {
   ssr: false,
 });
 
-const Render = dynamic(() => import('./Render'), {
+const Detail = dynamic(() => import('./Detail'), {
   loading: () => <Skeleton.Block active height={120} width={'100%'} />,
   ssr: false,
 });
@@ -57,7 +57,9 @@ const Tool = memo<GroupToolProps>(
       toolSelectors.getRenderDisplayControl(identifier, apiName),
     );
     const [showDebug, setShowDebug] = useState(false);
-    const [showPluginRender, setShowPluginRender] = useState(false);
+    const [showToolRender, setShowToolRender] = useState(false);
+    // Controls switching between custom render and fallback ArgumentRender
+    const [showCustomToolRender, setShowCustomToolRender] = useState(true);
 
     const isPending = intervention?.status === 'pending';
     const isReject = intervention?.status === 'rejected';
@@ -65,8 +67,6 @@ const Tool = memo<GroupToolProps>(
     const needExpand = renderDisplayControl !== 'collapsed' || isPending;
     const isAlwaysExpand = renderDisplayControl === 'alwaysExpand';
 
-    const showCustomPluginRender = !isPending && !isReject && !isAbort;
-
     let isArgumentsStreaming = false;
     try {
       JSON.parse(requestArgs || '{}');
@@ -88,14 +88,16 @@ const Tool = memo<GroupToolProps>(
     const isToolCalling = isToolCallingFromOperation || isToolCallingFallback;
 
     const hasCustomRender = !!getBuiltinRender(identifier, apiName);
+    // Only allow toggle when has custom render and not in pending/reject/abort state
+    const canToggleCustomToolRender = hasCustomRender && !isPending && !isReject && !isAbort;
 
-    // Handle expand state changes with showPluginRender
+    // Handle expand state changes
     const handleExpand = (expand?: boolean) => {
       // Block collapse action when alwaysExpand is set
       if (isAlwaysExpand && expand === false) {
         return;
       }
-      setShowPluginRender(!!expand);
+      setShowToolRender(!!expand);
     };
 
     useEffect(() => {
@@ -104,27 +106,26 @@ const Tool = memo<GroupToolProps>(
       }
     }, [needExpand]);
 
-    const isToolRenderExpand = forceShowStreamingRender || showPluginRender;
+    const isToolDetailExpand = forceShowStreamingRender || showToolRender || showDebug;
+
     return (
       <AccordionItem
         action={
           !disableEditing && (
             <Actions
               assistantMessageId={assistantMessageId}
-              handleExpand={handleExpand}
+              canToggleCustomToolRender={canToggleCustomToolRender}
               identifier={identifier}
+              setShowCustomToolRender={setShowCustomToolRender}
               setShowDebug={setShowDebug}
-              setShowPluginRender={setShowPluginRender}
-              showCustomPluginRender={showCustomPluginRender}
+              showCustomToolRender={showCustomToolRender}
               showDebug={showDebug}
-              showPluginRender={showPluginRender}
             />
           )
         }
-        allowExpand={hasCustomRender}
-        expand={isToolRenderExpand}
+        expand={isToolDetailExpand}
         itemKey={id}
-        onExpandChange={setShowPluginRender}
+        onExpandChange={handleExpand}
         paddingBlock={4}
         paddingInline={4}
         title={
@@ -151,7 +152,7 @@ const Tool = memo<GroupToolProps>(
             />
           )}
           <ToolErrorBoundary apiName={apiName} identifier={identifier}>
-            <Render
+            <Detail
               apiName={apiName}
               arguments={requestArgs}
               disableEditing={disableEditing}
@@ -161,8 +162,7 @@ const Tool = memo<GroupToolProps>(
               isToolCalling={isToolCalling}
               messageId={assistantMessageId}
               result={result}
-              setShowPluginRender={setShowPluginRender}
-              showPluginRender={showPluginRender}
+              showCustomToolRender={showCustomToolRender}
               toolCallId={id}
               toolMessageId={toolMessageId}
               type={type}

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

@@ -2,7 +2,7 @@
 
 import type { AssistantContentBlock } from '@lobechat/types';
 import isEqual from 'fast-deep-equal';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type MouseEventHandler, Suspense, memo, useCallback, useMemo } from 'react';
 
 import { MESSAGE_ACTION_BAR_PORTAL_ATTRIBUTES } from '@/const/messageActionPortal';

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

@@ -1,8 +1,9 @@
 import { Accordion, AccordionItem, Flexbox, Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
 import { type CSSProperties, memo, useState } from 'react';
 
 import Actions from '@/features/Conversation/Messages/AssistantGroup/Tool/Actions';
+import dynamic from '@/libs/next/dynamic';
+import { getBuiltinRender } from '@/tools/renders';
 
 import { dataSelectors, messageStateSelectors, useConversationStore } from '../../../store';
 import Inspectors from '../../AssistantGroup/Tool/Inspector';
@@ -12,7 +13,7 @@ const Debug = dynamic(() => import('../../AssistantGroup/Tool/Debug'), {
   ssr: false,
 });
 
-const Render = dynamic(() => import('../../AssistantGroup/Tool/Render'), {
+const Detail = dynamic(() => import('../../AssistantGroup/Tool/Detail'), {
   loading: () => <Skeleton.Block active height={120} width={'100%'} />,
   ssr: false,
 });
@@ -44,7 +45,7 @@ const Tool = memo<InspectorProps>(
     type,
   }) => {
     const [showDebug, setShowDebug] = useState(false);
-    const [showPluginRender, setShowPluginRender] = useState(false);
+    const [showCustomToolRender, setShowCustomToolRender] = useState(true);
     const [expand, setExpand] = useState(true);
 
     // Fetch tool message from store
@@ -68,6 +69,8 @@ const Tool = memo<InspectorProps>(
     // Don't render if still loading and no message yet
     if (loading && !toolMessage) return null;
 
+    const hasCustomRender = !!getBuiltinRender(identifier, apiName);
+
     return (
       <Accordion
         expandedKeys={expand ? ['tool'] : []}
@@ -79,13 +82,12 @@ const Tool = memo<InspectorProps>(
             !disableEditing && (
               <Actions
                 assistantMessageId={messageId}
-                handleExpand={(expand) => setExpand(!!expand)}
+                canToggleCustomToolRender={hasCustomRender}
                 identifier={identifier}
+                setShowCustomToolRender={setShowCustomToolRender}
                 setShowDebug={setShowDebug}
-                setShowPluginRender={setShowPluginRender}
-                showCustomPluginRender={false}
+                showCustomToolRender={showCustomToolRender}
                 showDebug={showDebug}
-                showPluginRender={showPluginRender}
               />
             )
           }
@@ -105,15 +107,14 @@ const Tool = memo<InspectorProps>(
                 type={type}
               />
             )}
-            <Render
+            <Detail
               apiName={apiName}
               arguments={requestArgs}
               disableEditing={disableEditing}
               identifier={identifier}
               messageId={messageId}
               result={result}
-              setShowPluginRender={setShowPluginRender}
-              showPluginRender={showPluginRender}
+              showCustomToolRender={showCustomToolRender}
               toolCallId={toolCallId}
               type={type}
             />

package/src/features/Conversation/Messages/components/SearchGrounding.tsx

@@ -2,7 +2,7 @@ import { Flexbox, Icon, SearchResultCards, Tag } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { ChevronDown, ChevronRight, Globe } from 'lucide-react';
 import { AnimatePresence, m as motion } from 'motion/react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';