@lobehub/lobehub 2.0.0-next.5 → 2.0.0-next.51

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/RejectedResponse.tsx

@@ -0,0 +1,45 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { AlertTriangle } 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};
+  `,
+}));
+
+interface RejectedResponseProps {
+  reason?: string;
+}
+
+const RejectedResponse = memo<RejectedResponseProps>(({ reason }) => {
+  const { t } = useTranslation('chat');
+  const { styles, theme } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} gap={8}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Icon color={theme.colorWarning} icon={AlertTriangle} size={16} />
+        <div className={styles.title}>
+          {reason
+            ? t('tool.intervention.rejectedWithReason', { reason })
+            : t('tool.intervention.toolRejected')}
+        </div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default RejectedResponse;

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

@@ -0,0 +1,134 @@
+import { LOADING_FLAT } from '@lobechat/const';
+import { ChatToolResult, ToolIntervention } from '@lobechat/types';
+import { Suspense, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+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';
+
+interface RenderProps {
+  apiName: string;
+  arguments?: string;
+  identifier: string;
+  intervention?: ToolIntervention;
+  /**
+   * ContentBlock ID (not the group message ID)
+   */
+  messageId: string;
+  result?: ChatToolResult;
+  setShowPluginRender: (show: boolean) => void;
+  showPluginRender: boolean;
+  toolCallId: string;
+  toolMessageId?: 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,
+    intervention,
+    toolMessageId,
+  }) => {
+    if (toolMessageId && intervention?.status === 'pending') {
+      return (
+        <Intervention
+          apiName={apiName}
+          id={toolMessageId}
+          identifier={identifier}
+          requestArgs={requestArgs || ''}
+          toolCallId={toolCallId}
+        />
+      );
+    }
+
+    if (intervention?.status === 'rejected') {
+      return <RejectedResponse reason={intervention.rejectedReason} />;
+    }
+
+    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}>
+        <Flexbox gap={8}>
+          <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}
+          />
+          <div>
+            <ModeSelector />
+          </div>
+        </Flexbox>
+      </Suspense>
+    );
+  },
+);
+
+Render.displayName = 'GroupToolRender';
+
+export default Render;

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

@@ -0,0 +1,97 @@
+import { ChatToolResult, ToolIntervention } from '@lobechat/types';
+import { CSSProperties, memo, useEffect, 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;
+  /**
+   * ContentBlock ID (not the group message ID)
+   */
+  assistantMessageId: string;
+  id: string;
+  identifier: string;
+  index: number;
+  intervention?: ToolIntervention;
+  result?: ChatToolResult;
+  style?: CSSProperties;
+  toolMessageId?: string;
+  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,
+    assistantMessageId,
+    id,
+    intervention,
+    index,
+    identifier,
+    style,
+    result,
+    type,
+    toolMessageId,
+  }) => {
+    // Default to false since group messages are all completed
+
+    const [showToolContent, setShowToolDetail] = useState(false);
+    const [showCustomPluginUI, setShowCustomPluginUI] = useState(false);
+
+    useEffect(() => {
+      if (intervention?.status === 'pending') {
+        setShowToolDetail(true);
+      }
+    }, [intervention?.status]);
+
+    return (
+      <Flexbox gap={8} style={style}>
+        <Inspectors
+          apiName={apiName}
+          arguments={requestArgs}
+          id={id}
+          identifier={identifier}
+          index={index}
+          intervention={intervention}
+          messageId={assistantMessageId}
+          result={result}
+          setShowPluginRender={setShowCustomPluginUI}
+          setShowRender={setShowToolDetail}
+          showPluginRender={showCustomPluginUI}
+          showRender={showToolContent}
+          type={type}
+        />
+        <AnimatedCollapsed open={showToolContent} width={{ collapsed: 'auto' }}>
+          <Render
+            apiName={apiName}
+            arguments={requestArgs}
+            identifier={identifier}
+            intervention={intervention}
+            messageId={assistantMessageId}
+            result={result}
+            setShowPluginRender={setShowCustomPluginUI}
+            showPluginRender={showCustomPluginUI}
+            toolCallId={id}
+            toolMessageId={toolMessageId}
+            type={type}
+          />
+        </AnimatedCollapsed>
+      </Flexbox>
+    );
+  },
+);
+
+Tool.displayName = 'GroupTool';
+
+export default Tool;

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

@@ -0,0 +1,48 @@
+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}
+          assistantMessageId={messageId}
+          id={tool.id}
+          identifier={tool.identifier}
+          index={index}
+          intervention={tool.intervention}
+          key={tool.id}
+          result={tool.result}
+          toolMessageId={tool.result_msg_id}
+          type={tool.type}
+        />
+      ))}
+    </Flexbox>
+  );
+});

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

@@ -0,0 +1,145 @@
+'use client';
+
+import { UIChatMessage } from '@lobechat/types';
+import { useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+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 {
+  disableEditing?: boolean;
+  id: string;
+  index: number;
+}
+
+const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+  const { usage, createdAt, meta, children, performance, model, provider } = item;
+  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: true,
+    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}
+        />
+        <Title
+          avatar={avatar}
+          placement={placement}
+          showTitle
+          style={{ marginBlockEnd: 0 }}
+          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 model={model} performance={performance} provider={provider!} usage={usage} />
+          )}
+          {!disableEditing && (
+            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
+              <GroupActionsBar
+                contentBlock={lastAssistantMsg}
+                contentId={contentId}
+                data={item}
+                id={id}
+                index={index}
+              />
+            </Flexbox>
+          )}
+        </Flexbox>
+      )}
+
+      {mobile && <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />}
+    </Flexbox>
+  );
+}, isEqual);
+
+export default GroupMessage;

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

@@ -4,6 +4,7 @@ import { UIChatMessage } from '@lobechat/types';
 import { ModelIcon } from '@lobehub/icons';
 import { Button, Text } from '@lobehub/ui';
 import { createStyles, useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { LucideRefreshCw } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +13,7 @@ import { Flexbox } from 'react-layout-kit';
 import { DEFAULT_SUPERVISOR_AVATAR } from '@/const/meta';
 import { ChatItem } from '@/features/ChatItem';
 import { useChatStore } from '@/store/chat';
+import { displayMessageSelectors } from '@/store/chat/slices/message/selectors';
 import { ChatErrorType } from '@/types/fetch';
 
 import TodoList, { TodoData } from './TodoList';
@@ -54,13 +56,20 @@ const parseMarkdownTodos = (content: string): TodoData => {
   };
 };
 
-interface SupervisorMessageProps extends UIChatMessage {
+interface SupervisorMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
 }
 
-const SupervisorMessage = memo<SupervisorMessageProps>((props) => {
-  const { id, content, error, groupId, role, updatedAt, createdAt } = props;
+const SupervisorMessage = memo<SupervisorMessageProps>(({ id }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+
+  const { content, error, groupId, role, updatedAt, createdAt } = item;
+
   const { t } = useTranslation('chat');
   const theme = useTheme();
   const { styles } = useStyles();
@@ -128,8 +137,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 = item.extra?.model;
+    const provider = item.extra?.provider;
     const hasModelInfo = model || provider;
 
     return (