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

package/src/app/[variants]/(main)/resource/library/_layout/Header/LibraryHead.tsx

@@ -1,8 +1,16 @@
 'use client';
 
-import { Center, type DropdownItem, DropdownMenu, Flexbox, Skeleton, Text } from '@lobehub/ui';
+import {
+  ActionIcon,
+  Block,
+  Center,
+  type DropdownItem,
+  DropdownMenu,
+  Skeleton,
+  Text,
+} from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import { ChevronsUpDown } from 'lucide-react';
+import { ChevronsUpDownIcon } from 'lucide-react';
 import { type DragEvent, memo, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -12,15 +20,6 @@ import RepoIcon from '@/components/LibIcon';
 import { knowledgeBaseSelectors, useKnowledgeBaseStore } from '@/store/library';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
-  clickableHeader: css`
-    cursor: pointer;
-    border-radius: ${cssVar.borderRadius}px;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: ${cssVar.colorFillTertiary};
-    }
-  `,
   dropZoneActive: css`
     color: ${cssVar.colorBgElevated} !important;
     background-color: ${cssVar.colorText} !important;
@@ -29,14 +28,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       color: ${cssVar.colorBgElevated} !important;
     }
   `,
-  icon: css`
-    color: ${cssVar.colorTextSecondary};
-    transition: all 0.2s;
-
-    &:hover {
-      color: ${cssVar.colorText};
-    }
-  `,
   menuIcon: css`
     color: ${cssVar.colorTextTertiary};
   `,
@@ -101,43 +92,47 @@ const Head = memo<{ id: string }>(({ id }) => {
   }, [libraries, handleLibrarySwitch, id, styles.menuIcon]);
 
   return (
-    <Flexbox
+    <Block
       align={'center'}
-      className={cx(styles.clickableHeader, isDropZoneActive && styles.dropZoneActive)}
+      className={cx(isDropZoneActive && styles.dropZoneActive)}
+      clickable
       data-drop-target-id="root"
       data-is-folder="true"
       data-root-drop="true"
       gap={8}
       horizontal
+      onClick={handleClick}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
-      paddingBlock={6}
-      paddingInline={'12px 14px'}
+      padding={2}
+      style={{ minWidth: 32, overflow: 'hidden' }}
+      variant={'borderless'}
     >
-      <Center style={{ minWidth: 24 }} width={24}>
-        <RepoIcon />
+      <Center style={{ minWidth: 32 }} width={32}>
+        <RepoIcon size={18} />
       </Center>
       {!name ? (
         <Skeleton active paragraph={false} title={{ style: { marginBottom: 0 }, width: 80 }} />
       ) : (
-        <Flexbox align={'center'} flex={1} gap={4} horizontal onClick={handleClick}>
-          <Text ellipsis strong style={{ flex: 1, fontSize: 16 }}>
-            {name}
-          </Text>
-        </Flexbox>
+        <Text ellipsis style={{ flex: 1 }} weight={500}>
+          {name}
+        </Text>
       )}
       {name && (
         <DropdownMenu items={menuItems} placement="bottomRight">
-          <ChevronsUpDown
-            className={styles.icon}
+          <ActionIcon
+            icon={ChevronsUpDownIcon}
             onClick={(e) => e.stopPropagation()}
-            size={16}
-            style={{ cursor: 'pointer', flex: 'none' }}
+            size={{
+              blockSize: 28,
+              size: 16,
+            }}
+            style={{ width: 24 }}
           />
         </DropdownMenu>
       )}
-    </Flexbox>
+    </Block>
   );
 });
 

package/src/app/[variants]/(main)/resource/library/_layout/Header/index.tsx

@@ -12,17 +12,15 @@ const Header = memo(() => {
   const { id } = useParams<{ id: string }>();
   const { t } = useTranslation('common');
   return (
-    <>
-      <SideBarHeaderLayout
-        breadcrumb={[
-          {
-            href: '/resource',
-            title: t('tab.resource'),
-          },
-        ]}
-      />
-      <LibraryHead id={id || ''} />
-    </>
+    <SideBarHeaderLayout
+      breadcrumb={[
+        {
+          href: '/resource',
+          title: t('tab.resource'),
+        },
+      ]}
+      left={<LibraryHead id={id || ''} />}
+    />
   );
 });
 

package/src/app/[variants]/router/desktopRouter.config.tsx

@@ -168,6 +168,13 @@ export const desktopRoutes: RouteConfig[] = [
                 ),
                 path: 'assistant/:slug',
               },
+              {
+                element: dynamicElement(
+                  () => import('../(main)/community/(detail)/group_agent'),
+                  'Desktop > Discover > Detail > Group Agent',
+                ),
+                path: 'group_agent/:slug',
+              },
               {
                 element: dynamicElement(
                   () => import('../(main)/community/(detail)/model'),

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

@@ -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}
             />