@lobehub/lobehub 2.0.0-next.4 → 2.0.0-next.41

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

@@ -0,0 +1,88 @@
+import { ChatPluginPayload } from '@lobechat/types';
+import { Highlighter } from '@lobehub/ui';
+import { memo, useEffect, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginRender from '@/features/PluginsUI/Render';
+
+import Arguments from './Arguments';
+
+interface CustomRenderProps {
+  content: string;
+  id: string;
+  plugin?: ChatPluginPayload;
+  pluginState?: any;
+  requestArgs?: string;
+  setShowPluginRender: (value: boolean) => void;
+  showPluginRender: boolean;
+}
+
+/**
+ * Custom Render for Group Messages
+ *
+ * Group messages are already completed, so:
+ * - No loading state needed
+ * - No edit/re-run functionality
+ * - Results are directly available in content prop
+ */
+const CustomRender = memo<CustomRenderProps>(
+  ({ id, content, pluginState, plugin, requestArgs, showPluginRender, setShowPluginRender }) => {
+    // Determine if plugin UI should be shown based on plugin type
+    useEffect(() => {
+      if (!plugin?.type) return;
+      setShowPluginRender(plugin.type !== 'default');
+    }, [plugin?.type, setShowPluginRender]);
+
+    // 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]);
+
+    // Show plugin custom UI if applicable
+    if (showPluginRender) {
+      return (
+        <Flexbox gap={12} id={id} width={'100%'}>
+          <PluginRender
+            arguments={plugin?.arguments}
+            content={content}
+            id={id}
+            identifier={plugin?.identifier}
+            loading={false}
+            payload={plugin}
+            pluginState={pluginState}
+            type={plugin?.type}
+          />
+        </Flexbox>
+      );
+    }
+
+    // Default render: show arguments and result
+    return (
+      <Flexbox gap={12} id={id} width={'100%'}>
+        <Arguments arguments={requestArgs} />
+        {content && (
+          <Highlighter
+            language={language}
+            style={{ maxHeight: 200, overflow: 'scroll', width: '100%' }}
+            variant={'outlined'}
+          >
+            {data}
+          </Highlighter>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+CustomRender.displayName = 'GroupCustomRender';
+
+export default CustomRender;

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

@@ -0,0 +1,35 @@
+import { ChatMessageError, ChatPluginPayload } from '@lobechat/types';
+import { Alert, Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginSettings from './PluginSettings';
+
+interface ErrorResponseProps extends ChatMessageError {
+  id: string;
+  plugin?: ChatPluginPayload;
+}
+
+const ErrorResponse = memo<ErrorResponseProps>(({ id, type, body, message, plugin }) => {
+  const { t } = useTranslation('error');
+  if (type === 'PluginSettingsInvalid') {
+    return <PluginSettings id={id} plugin={plugin} />;
+  }
+
+  return (
+    <Alert
+      extra={
+        <Flexbox>
+          <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
+            {JSON.stringify(body || { message, type }, null, 2)}
+          </Highlighter>
+        </Flexbox>
+      }
+      message={t(`response.${type}` as any)}
+      showIcon
+      type={'error'}
+    />
+  );
+});
+export default ErrorResponse;

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

@@ -0,0 +1,29 @@
+import { safeParseJSON } from '@lobechat/utils';
+import { memo } from 'react';
+
+import { BuiltinToolPlaceholders } from '@/tools/placeholders';
+
+import Arguments from '../Arguments';
+
+interface LoadingPlaceholderProps {
+  apiName: string;
+  identifier: string;
+  loading?: boolean;
+  requestArgs?: string;
+}
+
+const LoadingPlaceholder = memo<LoadingPlaceholderProps>(
+  ({ identifier, requestArgs, apiName, loading }) => {
+    const Render = BuiltinToolPlaceholders[identifier || ''];
+
+    if (identifier && Render) {
+      return (
+        <Render apiName={apiName} args={safeParseJSON(requestArgs) || {}} identifier={identifier} />
+      );
+    }
+
+    return <Arguments arguments={requestArgs} shine={loading} />;
+  },
+);
+
+export default LoadingPlaceholder;

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

@@ -0,0 +1,66 @@
+import { ChatPluginPayload } from '@lobechat/types';
+import { Avatar, Button } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import PluginSettingsConfig from '@/features/PluginSettings';
+import { useChatStore } from '@/store/chat';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import { ErrorActionContainer, useStyles } from '../../../../Error/style';
+
+interface PluginSettingsProps {
+  id: string;
+  plugin?: ChatPluginPayload;
+}
+
+const PluginSettings = memo<PluginSettingsProps>(({ id, plugin }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('error');
+  const theme = useTheme();
+  const [resend, deleteMessage] = useChatStore((s) => [s.delAndRegenerateMessage, s.deleteMessage]);
+  const pluginIdentifier = plugin?.identifier as string;
+  const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
+  const manifest = useToolStore(pluginSelectors.getToolManifestById(pluginIdentifier), isEqual);
+
+  return (
+    !!manifest && (
+      <ErrorActionContainer>
+        <Center gap={16} style={{ maxWidth: 400 }}>
+          <Avatar
+            avatar={pluginHelpers.getPluginAvatar(pluginMeta) || '⚙️'}
+            background={theme.colorFillContent}
+            gap={12}
+            size={80}
+          />
+          <Flexbox style={{ fontSize: 20 }}>
+            {t('pluginSettings.title', { name: pluginHelpers.getPluginTitle(pluginMeta) })}
+          </Flexbox>
+          <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
+          <Divider style={{ margin: '0 16px' }} />
+          {manifest.settings && (
+            <PluginSettingsConfig id={manifest.identifier} schema={manifest.settings} />
+          )}
+          <Button
+            block
+            onClick={() => {
+              resend(id);
+              deleteMessage(id);
+            }}
+            style={{ marginTop: 8 }}
+            type={'primary'}
+          >
+            {t('unlock.confirm')}
+          </Button>
+        </Center>
+      </ErrorActionContainer>
+    )
+  );
+});
+
+export default PluginSettings;

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

@@ -0,0 +1,105 @@
+import { LOADING_FLAT } from '@lobechat/const';
+import { ChatToolResult } from '@lobechat/types';
+import { Suspense, memo } from 'react';
+
+import CustomRender from './CustomRender';
+import ErrorResponse from './ErrorResponse';
+import LoadingPlaceholder from './LoadingPlaceholder';
+
+interface RenderProps {
+  apiName: string;
+  arguments?: string;
+  identifier: string;
+  /**
+   * ContentBlock ID (not the group message ID)
+   */
+  messageId: string;
+  result?: ChatToolResult;
+  setShowPluginRender: (show: boolean) => void;
+  showPluginRender: boolean;
+  toolCallId: string;
+  type?: string;
+}
+
+/**
+ * Tool Render for Group Messages
+ *
+ * In group messages, tool results are already embedded in the payload,
+ * so we don't need to query them from the store or handle streaming.
+ */
+const Render = memo<RenderProps>(
+  ({
+    toolCallId,
+    messageId,
+    arguments: requestArgs,
+    showPluginRender,
+    setShowPluginRender,
+    identifier,
+    apiName,
+    result,
+    type,
+  }) => {
+    if (!result) return null;
+
+    // Handle error state
+    if (result.error) {
+      return (
+        <ErrorResponse
+          {...result.error}
+          id={messageId}
+          plugin={
+            type
+              ? ({
+                  apiName,
+                  arguments: requestArgs || '',
+                  identifier,
+                  type,
+                } as any)
+              : undefined
+          }
+        />
+      );
+    }
+
+    const placeholder = (
+      <LoadingPlaceholder
+        apiName={apiName}
+        identifier={identifier}
+        loading
+        requestArgs={requestArgs}
+      />
+    );
+
+    // Standalone plugins always have LOADING_FLAT as content
+    const inPlaceholder = result.content === LOADING_FLAT && type !== 'standalone';
+
+    if (inPlaceholder) return placeholder;
+
+    return (
+      <Suspense fallback={placeholder}>
+        <CustomRender
+          content={result.content || ''}
+          id={toolCallId}
+          plugin={
+            type
+              ? ({
+                  apiName,
+                  arguments: requestArgs || '',
+                  identifier,
+                  type,
+                } as any)
+              : undefined
+          }
+          pluginState={result.state}
+          requestArgs={requestArgs}
+          setShowPluginRender={setShowPluginRender}
+          showPluginRender={showPluginRender}
+        />
+      </Suspense>
+    );
+  },
+);
+
+Render.displayName = 'GroupToolRender';
+
+export default Render;

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

@@ -0,0 +1,73 @@
+import { ChatToolResult } from '@lobechat/types';
+import { CSSProperties, memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AnimatedCollapsed from '@/components/AnimatedCollapsed';
+
+import Inspectors from './Inspector';
+import Render from './Render';
+
+export interface GroupToolProps {
+  apiName: string;
+  arguments?: string;
+  id: string;
+  identifier: string;
+  index: number;
+  /**
+   * ContentBlock ID (not the group message ID)
+   */
+  messageId: string;
+  result?: ChatToolResult;
+  style?: CSSProperties;
+  type?: string;
+}
+
+/**
+ * Tool component for Group Messages
+ *
+ * In group messages, all tools are completed (no streaming),
+ * so we always show the results directly.
+ */
+const Tool = memo<GroupToolProps>(
+  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, result, type }) => {
+    // Default to false since group messages are all completed
+    const [showDetail, setShowDetail] = useState(false);
+    const [showPluginRender, setShowPluginRender] = useState(false);
+
+    return (
+      <Flexbox gap={8} style={style}>
+        <Inspectors
+          apiName={apiName}
+          arguments={requestArgs}
+          id={id}
+          identifier={identifier}
+          index={index}
+          messageId={messageId}
+          result={result}
+          setShowPluginRender={setShowPluginRender}
+          setShowRender={setShowDetail}
+          showPluginRender={showPluginRender}
+          showRender={showDetail}
+          type={type}
+        />
+        <AnimatedCollapsed open={showDetail} width={{ collapsed: 'auto' }}>
+          <Render
+            apiName={apiName}
+            arguments={requestArgs}
+            identifier={identifier}
+            messageId={messageId}
+            result={result}
+            setShowPluginRender={setShowPluginRender}
+            showPluginRender={showPluginRender}
+            toolCallId={id}
+            type={type}
+          />
+        </AnimatedCollapsed>
+      </Flexbox>
+    );
+  },
+);
+
+Tool.displayName = 'GroupTool';
+
+export default Tool;

package/src/features/Conversation/Messages/Group/Tools.tsx

@@ -0,0 +1,46 @@
+import { ChatToolPayloadWithResult } from '@lobechat/types';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Tool from './Tool';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    toolsContainer: css`
+      padding-block: 6px;
+      padding-inline: 12px;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: 8px;
+    `,
+  };
+});
+
+interface ToolsRendererProps {
+  messageId: string;
+  tools: ChatToolPayloadWithResult[];
+}
+
+export const Tools = memo<ToolsRendererProps>(({ messageId, tools }) => {
+  const { styles, cx } = useStyles();
+
+  if (!tools || tools.length === 0) return null;
+
+  return (
+    <Flexbox className={cx(styles.toolsContainer, 'tool-blocks')} gap={8}>
+      {tools.map((tool, index) => (
+        <Tool
+          apiName={tool.apiName}
+          arguments={tool.arguments}
+          id={tool.id}
+          identifier={tool.identifier}
+          index={index}
+          key={tool.id}
+          messageId={messageId}
+          result={tool.result}
+          type={tool.type}
+        />
+      ))}
+    </Flexbox>
+  );
+});

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

@@ -0,0 +1,146 @@
+'use client';
+
+import { UIChatMessage } from '@lobechat/types';
+import { useResponsive } from 'antd-style';
+import { memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Avatar from '@/features/ChatItem/components/Avatar';
+import BorderSpacing from '@/features/ChatItem/components/BorderSpacing';
+import Title from '@/features/ChatItem/components/Title';
+import { useStyles } from '@/features/ChatItem/style';
+import GroupChildren from '@/features/Conversation/Messages/Group/GroupChildren';
+import Usage from '@/features/Conversation/components/Extras/Usage';
+import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
+import { useAgentStore } from '@/store/agent';
+import { agentChatConfigSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import {
+  displayMessageSelectors,
+  messageStateSelectors,
+} from '@/store/chat/slices/message/selectors';
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import { GroupActionsBar } from './Actions';
+import EditState from './EditState';
+
+const MOBILE_AVATAR_SIZE = 32;
+
+interface GroupMessageProps extends UIChatMessage {
+  disableEditing?: boolean;
+  index: number;
+  showTitle?: boolean;
+}
+
+const GroupMessage = memo<GroupMessageProps>((props) => {
+  const {
+    showTitle,
+    id,
+    disableEditing,
+    usage,
+    index,
+    createdAt,
+    meta,
+    children,
+    performance,
+    model,
+    provider,
+  } = props;
+  const avatar = meta;
+  const { mobile } = useResponsive();
+  const placement = 'left';
+  const type = useAgentStore(agentChatConfigSelectors.displayMode);
+  const variant = type === 'chat' ? 'bubble' : 'docs';
+
+  const { styles } = useStyles({
+    editing: false,
+    placement,
+    primary: false,
+    showTitle,
+    time: createdAt,
+    title: avatar.title,
+    variant,
+  });
+
+  const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
+  const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
+  const openChatSettings = useOpenChatSettings();
+  const lastAssistantMsg = useChatStore(
+    displayMessageSelectors.getGroupLatestMessageWithoutTools(id),
+  );
+
+  const contentId = lastAssistantMsg?.id;
+
+  const isEditing = useChatStore(messageStateSelectors.isMessageEditing(contentId || ''));
+
+  // ======================= Performance Optimization ======================= //
+  // these useMemo/useCallback are all for the performance optimization
+  // maybe we can remove it in React 19
+  // ======================================================================== //
+  const onAvatarClick = useCallback(() => {
+    if (!isInbox) {
+      toggleSystemRole(true);
+    } else {
+      openChatSettings();
+    }
+  }, [isInbox]);
+
+  return (
+    <Flexbox className={styles.container} gap={mobile ? 6 : 12}>
+      <Flexbox gap={4} horizontal>
+        <Avatar
+          alt={avatar.title || 'avatar'}
+          avatar={avatar}
+          onClick={onAvatarClick}
+          placement={placement}
+          size={MOBILE_AVATAR_SIZE}
+          style={{ marginTop: 6 }}
+        />
+        <Title avatar={avatar} placement={placement} showTitle time={createdAt} />
+      </Flexbox>
+      {isEditing && contentId ? (
+        <EditState content={lastAssistantMsg?.content} id={contentId} />
+      ) : (
+        <Flexbox
+          align={'flex-start'}
+          className={styles.messageContent}
+          data-layout={'vertical'}
+          direction={'vertical'}
+          gap={8}
+          width={'100%'}
+        >
+          {children && children.length > 0 && (
+            <GroupChildren
+              blocks={children}
+              contentId={contentId}
+              disableEditing={disableEditing}
+              id={id}
+              messageIndex={index}
+            />
+          )}
+
+          {model && (
+            <Usage metadata={{ ...performance, ...usage }} model={model} provider={provider!} />
+          )}
+          {!disableEditing && (
+            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
+              <GroupActionsBar
+                contentBlock={lastAssistantMsg}
+                contentId={contentId}
+                data={props}
+                id={id}
+                index={index}
+              />
+            </Flexbox>
+          )}
+        </Flexbox>
+      )}
+
+      {mobile && <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />}
+    </Flexbox>
+  );
+});
+
+export default GroupMessage;

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

@@ -128,8 +128,8 @@ const SupervisorMessage = memo<SupervisorMessageProps>((props) => {
 
   // Render todo message with dedicated component
   if (isTodoMessage && todoData) {
-    const model = props.extra?.fromModel;
-    const provider = props.extra?.fromProvider;
+    const model = props.extra?.model;
+    const provider = props.extra?.provider;
     const hasModelInfo = model || provider;
 
     return (