@lobehub/lobehub 2.0.0-next.24 → 2.0.0-next.25

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.25](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.24...v2.0.0-next.25)
+
+<sup>Released on **2025-11-04**</sup>
+
+#### ✨ Features
+
+- **misc**: Display assistant message in group.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Display assistant message in group, closes [#9941](https://github.com/lobehub/lobe-chat/issues/9941) ([59b6ac3](https://github.com/lobehub/lobe-chat/commit/59b6ac3))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.24](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.23...v2.0.0-next.24)
 
 <sup>Released on **2025-11-04**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "features": [
+        "Display assistant message in group."
+      ]
+    },
+    "date": "2025-11-04",
+    "version": "2.0.0-next.25"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.24",
+  "version": "2.0.0-next.25",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/labs/page.tsx

@@ -24,13 +24,13 @@ const LabsPage = memo(() => {
   const [
     isPreferenceInit,
     enableInputMarkdown,
-    // enableAssistantMessageGroup,
+    enableAssistantMessageGroup,
     // enableGroupChat,
     updateLab,
   ] = useUserStore((s) => [
     preferenceSelectors.isPreferenceInit(s),
     labPreferSelectors.enableInputMarkdown(s),
-    // labPreferSelectors.enableAssistantMessageGroup(s),
+    labPreferSelectors.enableAssistantMessageGroup(s),
     // labPreferSelectors.enableGroupChat(s),
     s.updateLab,
   ]);
@@ -43,12 +43,13 @@ const LabsPage = memo(() => {
       key: 'enableInputMarkdown',
       title: t('features.inputMarkdown.title'),
     },
-    // {
-    //   checked: enableAssistantMessageGroup,
-    //   desc: t('features.assistantMessageGroup.desc'),
-    //   key: 'enableAssistantMessageGroup',
-    //   title: t('features.assistantMessageGroup.title'),
-    // },
+    {
+      checked: enableAssistantMessageGroup,
+      cover: 'https://github.com/user-attachments/assets/ba517751-1f3b-4269-979e-f8471e3ebb89',
+      desc: t('features.assistantMessageGroup.desc'),
+      key: 'enableAssistantMessageGroup',
+      title: t('features.assistantMessageGroup.title'),
+    },
     // {
     //   checked: enableGroupChat,
     //   cover: 'https://github.com/user-attachments/assets/72894d24-a96a-4d7c-a823-ff9e6a1a8b6d',

package/src/features/Conversation/Messages/Group/Actions/WithContentId.tsx

@@ -0,0 +1,152 @@
+import { AssistantContentBlock, UIChatMessage } from '@lobechat/types';
+import { ActionIconGroup, type ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
+import { App } from 'antd';
+import { useSearchParams } from 'next/navigation';
+import { memo, use, useCallback, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ShareMessageModal from '@/features/Conversation/components/ShareMessageModal';
+import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
+
+interface GroupActionsProps {
+  contentBlock?: AssistantContentBlock;
+  data: UIChatMessage;
+  id: string;
+  index: number;
+}
+
+const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }) => {
+  const { tools } = data;
+  const [isThreadMode, hasThread] = useChatStore((s) => [
+    !!s.activeThreadId,
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+  ]);
+  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+  const [showShareModal, setShareModal] = useState(false);
+
+  const { edit, delAndRegenerate, copy, divider, del, branching, share } = useChatListActionsBar({
+    hasThread,
+  });
+
+  const hasTools = !!tools;
+
+  const inPortalThread = useContext(InPortalThreadContext);
+  const inThread = isThreadMode || inPortalThread;
+
+  const items = useMemo(() => {
+    if (hasTools) return [delAndRegenerate, copy];
+
+    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
+      Boolean,
+    ) as ActionIconGroupItemType[];
+  }, [inThread, hasTools, isGroupSession]);
+
+  const { t } = useTranslation('common');
+  const searchParams = useSearchParams();
+  const topic = searchParams.get('topic');
+  const [
+    deleteMessage,
+    translateMessage,
+    delAndRegenerateMessage,
+    copyMessage,
+    openThreadCreator,
+    delAndResendThreadMessage,
+    toggleMessageEditing,
+  ] = useChatStore((s) => [
+    s.deleteMessage,
+    s.translateMessage,
+    s.delAndRegenerateMessage,
+    s.copyMessage,
+    s.openThreadCreator,
+    s.delAndResendThreadMessage,
+    s.toggleMessageEditing,
+  ]);
+  const { message } = App.useApp();
+  const virtuosoRef = use(VirtuosoContext);
+
+  const onActionClick = useCallback(
+    async (action: ActionIconGroupEvent) => {
+      switch (action.key) {
+        case 'edit': {
+          toggleMessageEditing(id, true);
+
+          virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
+        }
+      }
+      if (!data) return;
+
+      switch (action.key) {
+        case 'copy': {
+          if (!contentBlock) return;
+          await copyMessage(id, contentBlock.content);
+          message.success(t('copySuccess', { defaultValue: 'Copy Success' }));
+          break;
+        }
+        case 'branching': {
+          if (!topic) {
+            message.warning(t('branchingRequiresSavedTopic'));
+            break;
+          }
+          openThreadCreator(id);
+          break;
+        }
+
+        case 'del': {
+          deleteMessage(id);
+          break;
+        }
+
+        case 'delAndRegenerate': {
+          if (inPortalThread) {
+            delAndResendThreadMessage(id);
+          } else {
+            delAndRegenerateMessage(id);
+          }
+          break;
+        }
+
+        case 'share': {
+          setShareModal(true);
+          break;
+        }
+      }
+
+      if (action.keyPath.at(-1) === 'translate') {
+        // click the menu data with translate data, the result is:
+        // key: 'en-US'
+        // keyPath: ['en-US','translate']
+        const lang = action.keyPath[0];
+        translateMessage(id, lang);
+      }
+    },
+    [data, topic],
+  );
+
+  return (
+    <>
+      <ActionIconGroup
+        items={items}
+        menu={{
+          items: [edit, copy, divider, share, divider, delAndRegenerate, del],
+        }}
+        onActionClick={onActionClick}
+      />
+      <ShareMessageModal
+        message={data!}
+        onCancel={() => {
+          setShareModal(false);
+        }}
+        open={showShareModal}
+      />
+    </>
+  );
+});
+
+export default WithContentId;

package/src/features/Conversation/Messages/Group/Actions/WithoutContentId.tsx

@@ -0,0 +1,70 @@
+import { UIChatMessage } from '@lobechat/types';
+import { ActionIconGroup, type ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
+import { useSearchParams } from 'next/navigation';
+import { memo, useCallback, useContext, useMemo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
+
+interface GroupActionsProps {
+  data: UIChatMessage;
+  id: string;
+}
+
+const WithoutContentId = memo<GroupActionsProps>(({ id, data }) => {
+  const [isThreadMode, hasThread] = useChatStore((s) => [
+    !!s.activeThreadId,
+    threadSelectors.hasThreadBySourceMsgId(id)(s),
+  ]);
+  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+
+  const { delAndRegenerate, del } = useChatListActionsBar({ hasThread });
+
+  const inPortalThread = useContext(InPortalThreadContext);
+  const inThread = isThreadMode || inPortalThread;
+
+  const items = useMemo(() => {
+    return [delAndRegenerate, del].filter(Boolean) as ActionIconGroupItemType[];
+  }, [inThread, isGroupSession]);
+
+  const searchParams = useSearchParams();
+  const topic = searchParams.get('topic');
+
+  const [deleteMessage, delAndRegenerateMessage, delAndResendThreadMessage] = useChatStore((s) => [
+    s.deleteMessage,
+    s.delAndRegenerateMessage,
+    s.delAndResendThreadMessage,
+  ]);
+
+  const onActionClick = useCallback(
+    async (action: ActionIconGroupEvent) => {
+      if (!data) return;
+
+      switch (action.key) {
+        case 'del': {
+          deleteMessage(id);
+          break;
+        }
+
+        case 'delAndRegenerate': {
+          if (inPortalThread) {
+            delAndResendThreadMessage(id);
+          } else {
+            delAndRegenerateMessage(id);
+          }
+          break;
+        }
+      }
+    },
+    [data, topic],
+  );
+
+  return <ActionIconGroup items={items} onActionClick={onActionClick} />;
+});
+
+export default WithoutContentId;

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

@@ -0,0 +1,21 @@
+import { AssistantContentBlock, UIChatMessage } from '@lobechat/types';
+import { memo } from 'react';
+
+import WithContentId from './WithContentId';
+import WithoutContentId from './WithoutContentId';
+
+interface GroupActionsProps {
+  contentBlock?: AssistantContentBlock;
+  contentId?: string;
+  data: UIChatMessage;
+  id: string;
+  index: number;
+}
+
+export const GroupActionsBar = memo<GroupActionsProps>(
+  ({ id, data, contentBlock, index, contentId }) => {
+    if (!contentId) return <WithoutContentId data={data} id={id} />;
+
+    return <WithContentId contentBlock={contentBlock} data={data} id={contentId} index={index} />;
+  },
+);

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

@@ -0,0 +1,91 @@
+import { AssistantContentBlock } from '@lobechat/types';
+import { MarkdownProps } from '@lobehub/ui';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LOADING_FLAT } from '@/const/message';
+import { markdownElements } from '@/features/Conversation/MarkdownElements';
+import Reasoning from '@/features/Conversation/Messages/Assistant/Reasoning';
+import { useChatStore } from '@/store/chat';
+import { aiChatSelectors, messageStateSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
+
+import ImageFileListViewer from '../User/ImageFileListViewer';
+import ErrorContent from './Error';
+import MessageContent from './MessageContent';
+import { Tools } from './Tools';
+
+const rehypePlugins = markdownElements.map((element) => element.rehypePlugin).filter(Boolean);
+const remarkPlugins = markdownElements.map((element) => element.remarkPlugin).filter(Boolean);
+
+interface ContentBlockProps extends AssistantContentBlock {
+  index: number;
+}
+
+export const ContentBlock = memo<ContentBlockProps>((props) => {
+  const { id, tools, content, imageList, reasoning, error } = props;
+  const showImageItems = !!imageList && imageList.length > 0;
+  const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
+
+  const hasTools = tools && tools.length > 0;
+  const showReasoning =
+    (!!reasoning && reasoning.content?.trim() !== '') || (!reasoning && isReasoning);
+
+  const { transitionMode, highlighterTheme, mermaidTheme } = useUserStore(
+    userGeneralSettingsSelectors.config,
+  );
+
+  const generating = useChatStore(messageStateSelectors.isMessageGenerating(id));
+
+  const animated = transitionMode === 'fadeIn' && generating;
+
+  const components = useMemo(
+    () =>
+      Object.fromEntries(
+        markdownElements.map((element) => {
+          const Component = element.Component;
+
+          return [element.tag, (props: any) => <Component {...props} id={id} />];
+        }),
+      ),
+    [id],
+  );
+
+  const markdownProps: Omit<MarkdownProps, 'className' | 'style' | 'children'> = useMemo(
+    () => ({
+      animated,
+      componentProps: {
+        highlight: {
+          theme: highlighterTheme,
+        },
+        mermaid: { theme: mermaidTheme },
+      },
+      components,
+      enableCustomFootnotes: true,
+      rehypePlugins,
+      remarkPlugins,
+    }),
+    [animated, components, highlighterTheme, mermaidTheme],
+  );
+
+  if (error && (content === LOADING_FLAT || !content))
+    return <ErrorContent error={error} id={id} />;
+
+  return (
+    <Flexbox gap={8} id={id}>
+      {showReasoning && <Reasoning {...reasoning} id={id} />}
+
+      {/* Content - markdown text */}
+      {content && (
+        <MessageContent content={content} hasTools={hasTools} markdownProps={markdownProps} />
+      )}
+
+      {/* Image files */}
+      {showImageItems && <ImageFileListViewer items={imageList} />}
+
+      {/* Tools */}
+      {hasTools && <Tools messageId={id} tools={tools} />}
+    </Flexbox>
+  );
+});

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

@@ -0,0 +1,51 @@
+import { MessageInput } from '@lobehub/ui/chat';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+export interface EditStateProps {
+  content: string;
+  id: string;
+}
+
+const EditState = memo<EditStateProps>(({ id, content }) => {
+  const { t } = useTranslation('common');
+
+  const text = useMemo(
+    () => ({
+      cancel: t('cancel'),
+      confirm: t('ok'),
+      edit: t('edit'),
+    }),
+    [],
+  );
+
+  const [toggleMessageEditing, updateMessageContent] = useChatStore((s) => [
+    s.toggleMessageEditing,
+    s.modifyMessageContent,
+  ]);
+
+  const onEditingChange = (value: string) => {
+    updateMessageContent(id, value);
+    toggleMessageEditing(id, false);
+  };
+
+  return (
+    <Flexbox paddingBlock={'0 8px'}>
+      <MessageInput
+        defaultValue={content ? String(content) : ''}
+        editButtonSize={'small'}
+        onCancel={() => {
+          toggleMessageEditing(id, false);
+        }}
+        onConfirm={onEditingChange}
+        text={text}
+        variant={'outlined'}
+      />
+    </Flexbox>
+  );
+});
+
+export default EditState;

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

@@ -0,0 +1,53 @@
+import { ChatMessageError } from '@lobechat/types';
+import { Alert } from '@lobehub/ui';
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ErrorMessageExtra, { useErrorContent } from '@/features/Conversation/Error';
+import { useChatStore } from '@/store/chat';
+
+export interface ErrorContentProps {
+  error?: ChatMessageError;
+  id: string;
+}
+
+const ErrorContent = memo<ErrorContentProps>(({ error, id }) => {
+  const { t } = useTranslation('common');
+  const errorProps = useErrorContent(error);
+
+  const [deleteMessage] = useChatStore((s) => [s.deleteMessage]);
+  const message = <ErrorMessageExtra block data={{ error, id }} />;
+
+  if (!error?.message) {
+    if (!message) return null;
+    return <Flexbox>{message}</Flexbox>;
+  }
+
+  return (
+    <Flexbox>
+      <Alert
+        action={
+          <Button
+            color={'default'}
+            onClick={() => {
+              deleteMessage(id);
+            }}
+            size={'small'}
+            variant={'filled'}
+          >
+            {t('delete')}
+          </Button>
+        }
+        closable={false}
+        extra={message}
+        showIcon
+        type={'error'}
+        {...errorProps}
+      />
+    </Flexbox>
+  );
+});
+
+export default ErrorContent;

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

@@ -0,0 +1,73 @@
+import { AssistantContentBlock } from '@lobechat/types';
+import { createStyles } from 'antd-style';
+import { motion } from 'framer-motion';
+import { memo, use } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { useChatStore } from '@/store/chat';
+
+import { ContentBlock } from './ContentBlock';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      &:has(.tool-blocks) {
+        width: 100%;
+      }
+    `,
+  };
+});
+
+interface GroupChildrenProps {
+  blocks: AssistantContentBlock[];
+  contentId?: string;
+  disableEditing?: boolean;
+  messageIndex: number;
+}
+
+const GroupChildren = memo<GroupChildrenProps>(
+  ({ blocks, contentId, disableEditing, messageIndex }) => {
+    const { styles } = useStyles();
+
+    const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
+    const virtuosoRef = use(VirtuosoContext);
+
+    return (
+      <Flexbox className={styles.container} gap={8}>
+        {blocks.map((item, index) => {
+          return item.id === contentId ? (
+            <Flexbox
+              key={index}
+              onDoubleClick={(e) => {
+                if (disableEditing || item.error || !e.altKey) return;
+
+                toggleMessageEditing(item.id, true);
+                virtuosoRef?.current?.scrollIntoView({
+                  align: 'start',
+                  behavior: 'auto',
+                  index: messageIndex,
+                });
+              }}
+            >
+              <ContentBlock index={index} {...item} />
+            </Flexbox>
+          ) : (
+            <motion.div
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              initial={{ height: 0, opacity: 0 }}
+              key={index}
+              style={{ overflow: 'hidden' }}
+              transition={{ duration: 0.3, ease: 'easeInOut' }}
+            >
+              <ContentBlock index={index} {...item} />
+            </motion.div>
+          );
+        })}
+      </Flexbox>
+    );
+  },
+);
+
+export default GroupChildren;

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

@@ -0,0 +1,39 @@
+import { Markdown, MarkdownProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { LOADING_FLAT } from '@/const/message';
+
+import { normalizeThinkTags, processWithArtifact } from '../../utils/markdown';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    pWithTool: css`
+      color: ${token.colorTextTertiary};
+    `,
+  };
+});
+interface ContentBlockProps {
+  content: string;
+  hasTools?: boolean;
+  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+}
+
+const MessageContent = memo<ContentBlockProps>(({ content, hasTools, markdownProps }) => {
+  const message = normalizeThinkTags(processWithArtifact(content));
+
+  const { styles, cx } = useStyles();
+
+  if (content === LOADING_FLAT) return <BubblesLoading />;
+
+  return (
+    content && (
+      <Markdown {...markdownProps} className={cx(hasTools && styles.pWithTool)} variant={'chat'}>
+        {message}
+      </Markdown>
+    )
+  );
+});
+
+export default MessageContent;