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

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

@@ -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/Tool/Tool/index.tsx

@@ -3,6 +3,7 @@ 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/TodoProgress/index.tsx

@@ -3,7 +3,7 @@
 import { type StepContextTodos } from '@lobechat/types';
 import { Checkbox, Flexbox, Icon, Tag } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { ChevronDown, ChevronUp, ListTodo } from 'lucide-react';
+import { ChevronDown, ChevronUp, CircleArrowRight, ListTodo } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -73,6 +73,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       opacity 0.2s ${cssVar.motionEaseInOut},
       padding 0.2s ${cssVar.motionEaseInOut};
   `,
+  processingRow: css`
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  `,
   progress: css`
     flex: 1;
     height: 4px;
@@ -85,10 +90,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     background: ${cssVar.colorSuccess};
     transition: width 0.3s ${cssVar.motionEaseInOut};
   `,
-  textChecked: css`
+  textCompleted: css`
     color: ${cssVar.colorTextQuaternary};
     text-decoration: line-through;
   `,
+  textProcessing: css`
+    color: ${cssVar.colorText};
+  `,
+  textTodo: css`
+    color: ${cssVar.colorTextSecondary};
+  `,
 }));
 
 interface TodoProgressProps {
@@ -112,11 +123,13 @@ const TodoProgress = memo<TodoProgressProps>(({ className }) => {
   // Calculate progress
   const items = todos?.items || [];
   const total = items.length;
-  const completed = items.filter((item) => item.completed).length;
+  const completed = items.filter((item) => item.status === 'completed').length;
   const progressPercent = total > 0 ? (completed / total) * 100 : 0;
 
-  // Find current pending task (first incomplete item)
-  const currentPendingTask = items.find((item) => !item.completed);
+  // Find current pending task (first non-completed item, prioritize processing)
+  const currentPendingTask =
+    items.find((item) => item.status === 'processing') ||
+    items.find((item) => item.status === 'todo');
 
   // Don't render if no todos
   if (total === 0) return null;
@@ -156,24 +169,44 @@ const TodoProgress = memo<TodoProgressProps>(({ className }) => {
 
         {/* Expandable Todo List */}
         <div className={cx(styles.listContainer, expanded ? styles.expanded : styles.collapsed)}>
-          {items.map((item, index) => (
-            <Checkbox
-              backgroundColor={cssVar.colorSuccess}
-              checked={item.completed}
-              classNames={{
-                text: item.completed ? styles.textChecked : undefined,
-                wrapper: styles.itemRow,
-              }}
-              key={index}
-              shape="circle"
-              style={{ borderWidth: 1.5, cursor: 'default', pointerEvents: 'none' }}
-              textProps={{
-                type: item.completed ? 'secondary' : undefined,
-              }}
-            >
-              {item.text}
-            </Checkbox>
-          ))}
+          {items.map((item, index) => {
+            const isCompleted = item.status === 'completed';
+            const isProcessing = item.status === 'processing';
+
+            // Processing state uses CircleArrowRight icon
+            if (isProcessing) {
+              return (
+                <div className={cx(styles.itemRow, styles.processingRow)} key={index}>
+                  <Icon
+                    icon={CircleArrowRight}
+                    size={17}
+                    style={{ color: cssVar.colorTextSecondary }}
+                  />
+                  <span className={styles.textProcessing}>{item.text}</span>
+                </div>
+              );
+            }
+
+            // Todo and completed states use Checkbox
+            return (
+              <Checkbox
+                backgroundColor={cssVar.colorSuccess}
+                checked={isCompleted}
+                classNames={{
+                  text: cx(styles.textTodo, isCompleted && styles.textCompleted),
+                  wrapper: styles.itemRow,
+                }}
+                key={index}
+                shape="circle"
+                style={{ borderWidth: 1.5, cursor: 'default', pointerEvents: 'none' }}
+                textProps={{
+                  type: isCompleted ? 'secondary' : undefined,
+                }}
+              >
+                {item.text}
+              </Checkbox>
+            );
+          })}
         </div>
       </div>
     </WideScreenContainer>

package/src/features/PluginsUI/Render/MCPType/index.tsx

@@ -1,7 +1,7 @@
 import { Flexbox, Image, Markdown } from '@lobehub/ui';
 import { memo } from 'react';
 
-import Arguments from '@/features/Conversation/Messages/AssistantGroup/Tool/Render/Arguments';
+import Arguments from '@/features/Conversation/Messages/AssistantGroup/Tool/Detail/Arguments';
 import { type ToolCallResult } from '@/libs/mcp';
 
 export interface MCPTypeProps {

package/src/features/ResourceManager/components/Explorer/Header/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { ActionIcon, Flexbox } from '@lobehub/ui';
+import { App } from 'antd';
 import { cssVar } from 'antd-style';
-import { SearchIcon } from 'lucide-react';
+import { BookMinusIcon, FileBoxIcon, SearchIcon, Trash2Icon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +19,8 @@ import ViewSwitcher from '../ToolBar/ViewSwitcher';
 import Breadcrumb from './Breadcrumb';
 
 const Header = memo(() => {
-  const { t } = useTranslation('file');
+  const { t } = useTranslation(['components', 'common', 'file', 'knowledgeBase']);
+  const { modal, message } = App.useApp();
 
   // Get state and actions from store
   const [libraryId, category, onActionClick, selectFileIds] = useResourceManagerStore((s) => [
@@ -29,8 +31,59 @@ const Header = memo(() => {
   ]);
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
 
+  const selectCount = selectFileIds.length;
+  const isMultiSelected = selectCount > 1;
+
   // If no libraryId, show category name or "Resource" for All
-  const leftContent = !libraryId ? (
+  const leftContent = isMultiSelected ? (
+    <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 0 }}>
+      {libraryId ? (
+        <ActionIcon
+          icon={BookMinusIcon}
+          onClick={() => {
+            modal.confirm({
+              okButtonProps: {
+                danger: true,
+              },
+              onOk: async () => {
+                await onActionClick('removeFromKnowledgeBase');
+                message.success(t('FileManager.actions.removeFromKnowledgeBaseSuccess'));
+              },
+              title: t('FileManager.actions.confirmRemoveFromKnowledgeBase', {
+                count: selectCount,
+              }),
+            });
+          }}
+          title={t('FileManager.actions.removeFromKnowledgeBase')}
+        />
+      ) : null}
+
+      <ActionIcon
+        icon={FileBoxIcon}
+        onClick={async () => {
+          await onActionClick('batchChunking');
+        }}
+        title={t('FileManager.actions.batchChunking')}
+      />
+
+      <ActionIcon
+        icon={Trash2Icon}
+        onClick={() => {
+          modal.confirm({
+            okButtonProps: {
+              danger: true,
+            },
+            onOk: async () => {
+              await onActionClick('delete');
+              message.success(t('FileManager.actions.deleteSuccess'));
+            },
+            title: t('FileManager.actions.confirmDeleteMultiFiles', { count: selectCount }),
+          });
+        }}
+        title={t('delete', { ns: 'common' })}
+      />
+    </Flexbox>
+  ) : !libraryId ? (
     <Flexbox style={{ marginLeft: 8 }}>
       {category === FilesTabs.All
         ? t('resource', { defaultValue: 'Resource' })
@@ -49,7 +102,7 @@ const Header = memo(() => {
         <>
           <ActionIcon icon={SearchIcon} onClick={() => toggleCommandMenu(true)} />
           <SortDropdown />
-          <BatchActionsDropdown onActionClick={onActionClick} selectCount={selectFileIds.length} />
+          <BatchActionsDropdown onActionClick={onActionClick} selectCount={selectCount} />
           <ViewSwitcher />
           <Flexbox style={{ marginLeft: 8 }}>
             <AddButton />

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx

@@ -48,11 +48,12 @@ const styles = createStaticStyles(({ css }) => {
     `,
 
     dragOver: css`
-      color: ${cssVar.colorBgElevated} !important;
-      background-color: ${cssVar.colorText} !important;
+      outline: 1px dashed ${cssVar.colorPrimaryBorder};
+      outline-offset: -2px;
 
-      * {
-        color: ${cssVar.colorBgElevated} !important;
+      &,
+      &:hover {
+        background: ${cssVar.colorPrimaryBg};
       }
     `,
 
@@ -510,6 +511,7 @@ const FileListItem = memo<FileListItemProps>(
                 e.stopPropagation();
               }}
               onPointerDown={(e) => e.stopPropagation()}
+              paddingInline={8}
             >
               {!isFolder &&
                 !isPage &&