@lobehub/lobehub 2.0.0-next.89 → 2.0.0-next.90

package/src/features/Conversation/Messages/Group/Tool/Inspector/BuiltinPluginTitle.tsx

@@ -18,6 +18,9 @@ export const useStyles = createStyles(({ css, token }) => ({
     text-overflow: ellipsis;
   `,
 
+  expand: css`
+    color: ${token.colorText};
+  `,
   shinyText: shinyTextStylish(token),
 }));
 
@@ -26,22 +29,30 @@ interface BuiltinPluginTitleProps {
   icon?: ReactNode;
   identifier: string;
   index: number;
+  isExpanded?: boolean;
   isLoading?: boolean;
   messageId: string;
   title: string;
   toolCallId: string;
 }
 
-const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(({ apiName, title, isLoading }) => {
-  const { styles } = useStyles();
-
-  return (
-    <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={4} horizontal>
-      <div>{title}</div>
-      <Icon icon={ChevronRight} />
-      <span className={styles.apiName}>{apiName}</span>
-    </Flexbox>
-  );
-});
+const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(
+  ({ apiName, title, isLoading, isExpanded }) => {
+    const { styles, cx } = useStyles();
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(isLoading && styles.shinyText, isExpanded && styles.expand)}
+        gap={4}
+        horizontal
+      >
+        <div>{title}</div>
+        <Icon icon={ChevronRight} />
+        <span className={styles.apiName}>{apiName}</span>
+      </Flexbox>
+    );
+  },
+);
 
 export default BuiltinPluginTitle;

package/src/features/Conversation/Messages/Group/Tool/Inspector/StatusIndicator.tsx

@@ -0,0 +1,41 @@
+import { ToolIntervention } from '@lobechat/types';
+import { Icon, Tooltip } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Ban, Check, CircleStop, X } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+interface StatusIndicatorProps {
+  intervention?: ToolIntervention;
+  result?: { content: string | null; error?: any; state?: any };
+}
+
+const StatusIndicator = memo<StatusIndicatorProps>(({ intervention, result }) => {
+  const { t } = useTranslation('chat');
+  const theme = useTheme();
+
+  const hasError = !!result?.error;
+  const isReject = intervention?.status === 'rejected';
+  const isAbort = intervention?.status === 'aborted';
+
+  return (
+    <Flexbox align={'center'} gap={4} horizontal style={{ fontSize: 12 }}>
+      {isAbort ? (
+        <Tooltip title={t('tool.intervention.toolAbort')}>
+          <Icon color={theme.colorTextTertiary} icon={CircleStop} />
+        </Tooltip>
+      ) : isReject ? (
+        <Tooltip title={t('tool.intervention.toolRejected')}>
+          <Icon color={theme.colorTextTertiary} icon={Ban} />
+        </Tooltip>
+      ) : hasError ? (
+        <Icon color={theme.colorError} icon={X} />
+      ) : (
+        <Icon color={theme.colorSuccess} icon={Check} />
+      )}
+    </Flexbox>
+  );
+});
+
+export default StatusIndicator;

package/src/features/Conversation/Messages/Group/Tool/Inspector/ToolTitle.tsx

@@ -26,6 +26,9 @@ export const useStyles = createStyles(({ css, token }) => ({
     text-overflow: ellipsis;
   `,
 
+  expand: css`
+    color: ${token.colorText};
+  `,
   shinyText: shinyTextStylish(token),
 }));
 
@@ -33,15 +36,16 @@ interface ToolTitleProps {
   apiName: string;
   identifier: string;
   index: number;
+  isExpanded?: boolean;
   isLoading?: boolean;
   messageId: string;
   toolCallId: string;
 }
 
 const ToolTitle = memo<ToolTitleProps>(
-  ({ identifier, apiName, isLoading, index, toolCallId, messageId }) => {
+  ({ identifier, apiName, isLoading, index, toolCallId, messageId, isExpanded }) => {
     const { t } = useTranslation('plugin');
-    const { styles } = useStyles();
+    const { styles, cx } = useStyles();
 
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
@@ -69,6 +73,7 @@ const ToolTitle = memo<ToolTitleProps>(
           {...builtinPluginTitle}
           identifier={identifier}
           index={index}
+          isExpanded={isExpanded}
           isLoading={isLoading}
           messageId={messageId}
           toolCallId={toolCallId}
@@ -79,7 +84,12 @@ const ToolTitle = memo<ToolTitleProps>(
     const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
     return (
-      <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={6} horizontal>
+      <Flexbox
+        align={'center'}
+        className={cx(isLoading && styles.shinyText, isExpanded && styles.expand)}
+        gap={6}
+        horizontal
+      >
         <div>{pluginTitle}</div> <Icon icon={ChevronRight} />
         <span className={styles.apiName}>{apiName}</span>
       </Flexbox>

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

@@ -1,26 +1,19 @@
 import { ToolIntervention } from '@lobechat/types';
-import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import {
-  Ban,
-  Check,
-  LayoutPanelTop,
-  LogsIcon,
-  LucideBug,
-  LucideBugOff,
-  Trash2,
-  X,
-} from 'lucide-react';
+import { LayoutPanelTop, LogsIcon, LucideBug, LucideBugOff, Trash2 } from 'lucide-react';
 import { CSSProperties, memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { LOADING_FLAT } from '@/const/message';
 import { useChatStore } from '@/store/chat';
+import { dbMessageSelectors } from '@/store/chat/slices/message/selectors';
 import { shinyTextStylish } from '@/styles/loading';
 
 import Debug from './Debug';
 import Settings from './Settings';
+import StatusIndicator from './StatusIndicator';
 import ToolTitle from './ToolTitle';
 
 export const useStyles = createStyles(({ css, token, cx }) => ({
@@ -86,6 +79,7 @@ interface InspectorProps {
   showPortal?: boolean;
   showRender: boolean;
   style?: CSSProperties;
+  toolMessageId?: string;
   type?: string;
 }
 
@@ -103,15 +97,18 @@ const Inspectors = memo<InspectorProps>(
     setShowPluginRender,
     type,
     intervention,
+    toolMessageId,
   }) => {
     const { t } = useTranslation('plugin');
-    const { styles, theme } = useStyles();
+    const { styles } = useStyles();
 
     const [showDebug, setShowDebug] = useState(false);
-    const [isPinned, setIsPinned] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
 
-    const [deleteAssistantMessage] = useChatStore((s) => [s.deleteAssistantMessage]);
+    const [deleteAssistantMessage, toggleInspectExpanded] = useChatStore((s) => [
+      s.deleteAssistantMessage,
+      s.toggleInspectExpanded,
+    ]);
 
     const hasError = !!result?.error;
     const hasSuccessResult = !!result?.content && result.content !== LOADING_FLAT;
@@ -119,18 +116,26 @@ const Inspectors = memo<InspectorProps>(
     const hasResult = hasSuccessResult || hasError;
 
     const isPending = intervention?.status === 'pending';
-    const isReject = intervention?.status === 'rejected' || intervention?.status === 'aborted';
+    const isReject = intervention?.status === 'rejected';
+    const isAbort = intervention?.status === 'aborted';
     const isTitleLoading = !hasResult && !isPending;
 
-    // Compute actual render state based on pinned or hovered
-    const shouldShowRender = isPinned || isHovered;
+    const isPersistentExpanded = useChatStore((s) => {
+      if (!toolMessageId) return undefined;
+
+      const message = dbMessageSelectors.getDbMessageById(toolMessageId)(s);
+      return message?.metadata?.inspectExpanded;
+    });
+
+    // Compute actual render state based on persistent expanded or hovered
+    const shouldShowRender = isPersistentExpanded || isHovered;
 
     // Sync with parent state
     useEffect(() => {
       setShowRender(shouldShowRender);
     }, [shouldShowRender, setShowRender]);
 
-    const showCustomPluginRender = shouldShowRender && !isPending && !isReject;
+    const showCustomPluginRender = shouldShowRender && !isPending && !isReject && !isAbort;
     return (
       <Flexbox className={styles.container} gap={4}>
         <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
@@ -140,15 +145,15 @@ const Inspectors = memo<InspectorProps>(
             gap={8}
             horizontal
             onClick={() => {
-              setIsPinned(!isPinned);
+              if (toolMessageId) toggleInspectExpanded(toolMessageId);
             }}
             onMouseEnter={() => {
-              if (!isPinned) {
+              if (!isPersistentExpanded) {
                 setIsHovered(true);
               }
             }}
             onMouseLeave={() => {
-              if (!isPinned) {
+              if (!isPersistentExpanded) {
                 setIsHovered(false);
               }
             }}
@@ -158,6 +163,7 @@ const Inspectors = memo<InspectorProps>(
               apiName={apiName}
               identifier={identifier}
               index={index}
+              isExpanded={isPersistentExpanded}
               isLoading={isTitleLoading}
               messageId={assistantMessageId}
               toolCallId={id}
@@ -194,19 +200,7 @@ const Inspectors = memo<InspectorProps>(
 
               <Settings id={identifier} />
             </Flexbox>
-            {hasResult && (
-              <Flexbox align={'center'} gap={4} horizontal style={{ fontSize: 12 }}>
-                {isReject ? (
-                  <Tooltip title={t('tool.intervention.toolRejected', { ns: 'chat' })}>
-                    <Icon color={theme.colorTextTertiary} icon={Ban} />
-                  </Tooltip>
-                ) : hasError ? (
-                  <Icon color={theme.colorError} icon={X} />
-                ) : (
-                  <Icon color={theme.colorSuccess} icon={Check} />
-                )}
-              </Flexbox>
-            )}
+            {hasResult && <StatusIndicator intervention={intervention} result={result} />}
           </Flexbox>
         </Flexbox>
         {showDebug && (

package/src/features/Conversation/Messages/Group/Tool/Render/AbortResponse.tsx

@@ -0,0 +1,37 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BanIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: 8px;
+    padding-inline: 6px;
+  `,
+  reason: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    font-size: 14px;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+const AbortResponse = memo(() => {
+  const { t } = useTranslation('chat');
+  const { styles, theme } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} gap={8}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Icon color={theme.colorTextTertiary} icon={BanIcon} size={16} />
+        <div className={styles.title}>{t('tool.intervention.toolAbort')}</div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default AbortResponse;

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

@@ -3,6 +3,8 @@ import { ChatToolResult, ToolIntervention } from '@lobechat/types';
 import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import AbortResponse from '@/features/Conversation/Messages/Group/Tool/Render/AbortResponse';
+
 import CustomRender from './CustomRender';
 import ErrorResponse from './ErrorResponse';
 import Intervention from './Intervention';
@@ -63,6 +65,10 @@ const Render = memo<RenderProps>(
       return <RejectedResponse reason={intervention.rejectedReason} />;
     }
 
+    if (intervention?.status === 'aborted') {
+      return <AbortResponse />;
+    }
+
     if (!result) return null;
 
     // Handle error state

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

@@ -70,6 +70,7 @@ const Tool = memo<GroupToolProps>(
           setShowRender={setShowToolDetail}
           showPluginRender={showCustomPluginUI}
           showRender={showToolContent}
+          toolMessageId={toolMessageId}
           type={type}
         />
         <AnimatedCollapsed open={showToolContent} width={{ collapsed: 'auto' }}>

package/src/locales/default/chat.ts

@@ -430,6 +430,7 @@ export default {
       rejectReasonPlaceholder: '输入拒绝原因将帮助 Agent 理解并优化后续行动',
       rejectTitle: '拒绝本次工具调用',
       rejectedWithReason: '本次工具调用被主动拒绝:{{reason}}',
+      toolAbort: '本次工具调用被用户取消',
       toolRejected: '本次工具调用被主动拒绝',
     },
   },

package/src/locales/default/common.ts

@@ -286,6 +286,7 @@ export default {
     business: '商务合作',
     support: '邮件支持',
   },
+  new: '新',
   oauth: 'SSO 登录',
   officialSite: '官方网站',
   ok: '确定',

package/src/server/routers/lambda/file.ts

@@ -220,12 +220,6 @@ export const fileRouter = router({
           embeddingStatus: null,
           finishEmbedding: false,
         } as FileListItem;
-        console.log('[API getKnowledgeItems] Processing document:', {
-          editorDataPreview: item.editorData ? JSON.stringify(item.editorData).slice(0, 100) : null,
-          hasEditorData: !!item.editorData,
-          id: item.id,
-          name: item.name,
-        });
         resultItems.push(documentItem);
       }
     }

package/src/store/chat/slices/message/actions/publicApi.ts

@@ -47,6 +47,10 @@ export interface MessagePublicApiAction {
    * Toggle message collapsed state
    */
   toggleMessageCollapsed: (id: string, collapsed?: boolean) => Promise<void>;
+  /**
+   * Toggle tool inspect expanded state
+   */
+  toggleInspectExpanded: (id: string, expanded?: boolean) => Promise<void>;
 
   // ===== Others ===== //
   copyMessage: (id: string, content: string) => Promise<void>;
@@ -258,4 +262,15 @@ export const messagePublicApi: StateCreator<
       collapsed: nextCollapsed,
     });
   },
+
+  toggleInspectExpanded: async (id, expanded) => {
+    const message = dbMessageSelectors.getDbMessageById(id)(get());
+    if (!message) return;
+
+    // 如果没有传入 expanded，则取反当前状态
+    const nextExpanded = expanded ?? !message.metadata?.inspectExpanded;
+
+    // 直接调用现有的 optimisticUpdateMessageMetadata
+    await get().optimisticUpdateMessageMetadata(id, { inspectExpanded: nextExpanded });
+  },
 });