@lobehub/lobehub 2.0.0-next.34 → 2.0.0-next.36

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

@@ -8,7 +8,7 @@ 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 { messageStateSelectors, threadSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
@@ -23,9 +23,10 @@ interface AssistantActionsProps {
 }
 export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, index }) => {
   const { error, tools } = data;
-  const [isThreadMode, hasThread] = useChatStore((s) => [
+  const [isThreadMode, hasThread, isRegenerating] = useChatStore((s) => [
     !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
+    messageStateSelectors.isMessageRegenerating(id)(s),
   ]);
   const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
   const [showShareModal, setShareModal] = useState(false);
@@ -42,7 +43,7 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
     share,
     tts,
     translate,
-  } = useChatListActionsBar({ hasThread });
+  } = useChatListActionsBar({ hasThread, isRegenerating });
 
   const hasTools = !!tools;
 
@@ -52,17 +53,19 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
   const items = useMemo(() => {
     if (hasTools) return [delAndRegenerate, copy];
 
-    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
-      Boolean,
-    ) as ActionIconGroupItemType[];
-  }, [inThread, hasTools, isGroupSession]);
+    return [
+      edit,
+      copy,
+      // inThread || isGroupSession ? null : branching
+    ].filter(Boolean) as ActionIconGroupItemType[];
+  }, [inThread, hasTools, isGroupSession, delAndRegenerate, copy, edit, branching]);
 
   const { t } = useTranslation('common');
   const searchParams = useSearchParams();
   const topic = searchParams.get('topic');
   const [
     deleteMessage,
-    regenerateMessage,
+    regenerateAssistantMessage,
     translateMessage,
     ttsMessage,
     delAndRegenerateMessage,
@@ -73,7 +76,7 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
     toggleMessageEditing,
   ] = useChatStore((s) => [
     s.deleteMessage,
-    s.regenerateMessage,
+    s.regenerateAssistantMessage,
     s.translateMessage,
     s.ttsMessage,
     s.delAndRegenerateMessage,
@@ -120,7 +123,7 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
         case 'regenerate': {
           if (inPortalThread) {
             resendThreadMessage(id);
-          } else regenerateMessage(id);
+          } else regenerateAssistantMessage(id);
 
           // if this message is an error message, we need to delete it
           if (data.error) deleteMessage(id);

package/src/features/Conversation/Messages/Assistant/Extra/index.test.tsx

@@ -46,20 +46,15 @@ describe('AssistantMessageExtra', () => {
     expect(screen.queryByText('Translate Component')).toBeNull();
   });
 
-  it('should not render content if extra is defined but does not contain fromModel, tts, or translate', async () => {
+  it('should not render content if extra is defined but does not contain model, tts, or translate', async () => {
     render(<AssistantMessageExtra {...mockData} extra={{}} />);
     expect(screen.queryByText('Usage Component')).toBeNull();
     expect(screen.queryByText('TTS Component')).toBeNull();
     expect(screen.queryByText('Translate Component')).toBeNull();
   });
 
-  it('should render Usage component if extra.fromModel exists', async () => {
-    render(
-      <AssistantMessageExtra
-        {...mockData}
-        extra={{ fromModel: 'gpt-4', fromProvider: 'openai' }}
-      />,
-    );
+  it('should render Usage component if extra.model exists', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ model: 'gpt-4', provider: 'openai' }} />);
 
     expect(screen.getByText('Usage Component')).toBeInTheDocument();
   });

package/src/features/Conversation/Messages/Assistant/Extra/index.tsx

@@ -24,12 +24,8 @@ export const AssistantMessageExtra = memo<AssistantMessageExtraProps>(
 
     return (
       <Flexbox gap={8} style={{ marginTop: !!tools?.length ? 8 : 4 }}>
-        {content !== LOADING_FLAT && extra?.fromModel && (
-          <Usage
-            metadata={metadata || {}}
-            model={extra?.fromModel}
-            provider={extra.fromProvider!}
-          />
+        {content !== LOADING_FLAT && extra?.model && (
+          <Usage metadata={metadata || {}} model={extra?.model} provider={extra.provider!} />
         )}
         <>
           {!!extra?.tts && (

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

@@ -58,15 +58,13 @@ export const AssistantMessageContent = memo<
       {isIntentUnderstanding ? (
         <IntentUnderstanding />
       ) : (
-        content && (
-          <DefaultMessage
-            addIdOnDOM={false}
-            content={content}
-            id={id}
-            isToolCallGenerating={isToolCallGenerating}
-            {...props}
-          />
-        )
+        <DefaultMessage
+          addIdOnDOM={false}
+          content={content}
+          id={id}
+          isToolCallGenerating={isToolCallGenerating}
+          {...props}
+        />
       )}
       {showImageItems && <ImageFileListViewer items={imageList} />}
       {tools && (

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/PluginResult.tsx

@@ -2,7 +2,7 @@ import { Highlighter } from '@lobehub/ui';
 import { memo, useMemo } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { dbMessageSelectors } from '@/store/chat/selectors';
 
 export interface FunctionMessageProps {
   toolCallId: string;
@@ -10,7 +10,7 @@ export interface FunctionMessageProps {
 }
 
 const PluginResult = memo<FunctionMessageProps>(({ toolCallId, variant }) => {
-  const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId));
+  const toolMessage = useChatStore(dbMessageSelectors.getDbMessageByToolCallId(toolCallId));
 
   const { data, language } = useMemo(() => {
     try {

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/PluginState.tsx

@@ -2,14 +2,14 @@ import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { dbMessageSelectors } from '@/store/chat/selectors';
 
 export interface FunctionMessageProps {
   toolCallId: string;
 }
 
 const PluginState = memo<FunctionMessageProps>(({ toolCallId }) => {
-  const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId));
+  const toolMessage = useChatStore(dbMessageSelectors.getDbMessageByToolCallId(toolCallId));
 
   return (
     toolMessage?.pluginState && (

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

@@ -23,7 +23,10 @@ const PluginSettings = memo<PluginSettingsProps>(({ id, plugin }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('error');
   const theme = useTheme();
-  const [resend, deleteMessage] = useChatStore((s) => [s.regenerateMessage, s.deleteMessage]);
+  const [resend, deleteMessage] = useChatStore((s) => [
+    s.regenerateAssistantMessage,
+    s.deleteMessage,
+  ]);
   const pluginIdentifier = plugin?.identifier as string;
   const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
   const manifest = useToolStore(pluginSelectors.getToolManifestById(pluginIdentifier), isEqual);

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

@@ -1,9 +1,8 @@
 import { LOADING_FLAT } from '@lobechat/const';
-import isEqual from 'fast-deep-equal';
 import { Suspense, memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
+import { dbMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import CustomRender from './CustomRender';
 import ErrorResponse from './ErrorResponse';
@@ -32,7 +31,7 @@ const Render = memo<RenderProps>(
     apiName,
   }) => {
     const loading = useChatStore(messageStateSelectors.isToolCallStreaming(messageId, toolIndex));
-    const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId), isEqual);
+    const toolMessage = useChatStore(dbMessageSelectors.getDbMessageByToolCallId(toolCallId));
 
     if (loading || !toolMessage) return null;
 

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

@@ -204,75 +204,72 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
   );
   const errorMessage = <ErrorMessageExtra data={props} />;
   return (
-    <Flexbox
-      className={styles.container}
-      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-      gap={mobile ? 6 : 12}
-    >
-      <Avatar
-        alt={avatar.title || 'avatar'}
-        avatar={avatar}
-        loading={loading}
-        onClick={onAvatarClick}
-        placement={placement}
-        size={mobile ? MOBILE_AVATAR_SIZE : undefined}
-        style={{ marginTop: 6 }}
-      />
-      <Flexbox align={'flex-start'} className={styles.messageContainer}>
+    <Flexbox className={styles.container} gap={mobile ? 6 : 12}>
+      <Flexbox gap={4} horizontal>
+        <Avatar
+          alt={avatar.title || 'avatar'}
+          avatar={avatar}
+          loading={loading}
+          onClick={onAvatarClick}
+          placement={placement}
+          size={MOBILE_AVATAR_SIZE}
+          style={{ marginTop: 6 }}
+        />
         <Title
           avatar={avatar}
           placement={placement}
-          showTitle={showTitle}
+          showTitle
           time={createdAt}
           titleAddon={dmIndicator}
         />
-        <Flexbox
-          align={'flex-start'}
-          className={styles.messageContent}
-          data-layout={'vertical'} // 添加数据属性以方便样式选择
-          direction={'vertical'}
-          gap={8}
-        >
-          <Flexbox style={{ flex: 1, maxWidth: '100%' }}>
-            {error && (message === LOADING_FLAT || !message) ? (
-              <ErrorContent error={errorContent} message={errorMessage} placement={placement} />
-            ) : (
-              <MessageContent
-                editing={editing}
-                id={id}
-                markdownProps={markdownProps}
-                message={reducted ? `*${t('hideForYou')}*` : message}
-                messageExtra={
-                  <>
-                    {errorContent && (
-                      <ErrorContent
-                        error={errorContent}
-                        message={errorMessage}
-                        placement={placement}
-                      />
-                    )}
-                    <AssistantMessageExtra
-                      content={content}
-                      extra={extra}
-                      id={id}
-                      metadata={metadata}
-                      tools={tools}
+      </Flexbox>
+      <Flexbox
+        align={'flex-start'}
+        className={styles.messageContent}
+        data-layout={'vertical'} // 添加数据属性以方便样式选择
+        direction={'vertical'}
+        gap={8}
+        width={'fit-content'}
+      >
+        <Flexbox style={{ flex: 1, maxWidth: '100%' }}>
+          {error && (message === LOADING_FLAT || !message) ? (
+            <ErrorContent error={errorContent} message={errorMessage} placement={placement} />
+          ) : (
+            <MessageContent
+              editing={editing}
+              id={id}
+              markdownProps={markdownProps}
+              message={reducted ? `*${t('hideForYou')}*` : message}
+              messageExtra={
+                <>
+                  {errorContent && (
+                    <ErrorContent
+                      error={errorContent}
+                      message={errorMessage}
+                      placement={placement}
                     />
-                  </>
-                }
-                onDoubleClick={onDoubleClick}
-                placement={placement}
-                renderMessage={renderMessage}
-                variant={variant}
-              />
-            )}
-          </Flexbox>
-          {!disableEditing && !editing && (
-            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
-              <AssistantActionsBar data={props} id={id} index={index} />
-            </Flexbox>
+                  )}
+                  <AssistantMessageExtra
+                    content={content}
+                    extra={extra}
+                    id={id}
+                    metadata={metadata}
+                    tools={tools}
+                  />
+                </>
+              }
+              onDoubleClick={onDoubleClick}
+              placement={placement}
+              renderMessage={renderMessage}
+              variant={variant}
+            />
           )}
         </Flexbox>
+        {!disableEditing && !editing && (
+          <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
+            <AssistantActionsBar data={props} id={id} index={index} />
+          </Flexbox>
+        )}
       </Flexbox>
       {mobile && <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />}
     </Flexbox>

package/src/features/Conversation/Messages/Default.tsx

@@ -17,6 +17,7 @@ export const DefaultMessage = memo<
 
   if (isToolCallGenerating) return;
 
+  if (!content) return <BubblesLoading />;
   if (content === LOADING_FLAT && !editing) return <BubblesLoading />;
 
   return <div id={addIdOnDOM ? id : undefined}>{editableContent}</div>;

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

@@ -8,7 +8,7 @@ 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 { messageStateSelectors, threadSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
@@ -24,16 +24,19 @@ interface GroupActionsProps {
 
 const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }) => {
   const { tools } = data;
-  const [isThreadMode, hasThread] = useChatStore((s) => [
+  const [isThreadMode, hasThread, isRegenerating] = useChatStore((s) => [
     !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
+    messageStateSelectors.isMessageRegenerating(id)(s),
   ]);
   const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
   const [showShareModal, setShareModal] = useState(false);
 
-  const { edit, delAndRegenerate, copy, divider, del, branching, share } = useChatListActionsBar({
-    hasThread,
-  });
+  const { edit, delAndRegenerate, regenerate, copy, divider, del, branching, share } =
+    useChatListActionsBar({
+      hasThread,
+      isRegenerating,
+    });
 
   const hasTools = !!tools;
 
@@ -43,28 +46,34 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
   const items = useMemo(() => {
     if (hasTools) return [delAndRegenerate, copy];
 
-    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
-      Boolean,
-    ) as ActionIconGroupItemType[];
-  }, [inThread, hasTools, isGroupSession]);
+    return [
+      edit,
+      copy,
+      // inThread || isGroupSession ? null : branching
+    ].filter(Boolean) as ActionIconGroupItemType[];
+  }, [inThread, hasTools, isGroupSession, delAndRegenerate, copy, edit, branching]);
 
   const { t } = useTranslation('common');
   const searchParams = useSearchParams();
   const topic = searchParams.get('topic');
   const [
     deleteMessage,
+    regenerateAssistantMessage,
     translateMessage,
     delAndRegenerateMessage,
     copyMessage,
     openThreadCreator,
+    resendThreadMessage,
     delAndResendThreadMessage,
     toggleMessageEditing,
   ] = useChatStore((s) => [
     s.deleteMessage,
+    s.regenerateAssistantMessage,
     s.translateMessage,
     s.delAndRegenerateMessage,
     s.copyMessage,
     s.openThreadCreator,
+    s.resendThreadMessage,
     s.delAndResendThreadMessage,
     s.toggleMessageEditing,
   ]);
@@ -103,6 +112,16 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
           break;
         }
 
+        case 'regenerate': {
+          if (inPortalThread) {
+            resendThreadMessage(id);
+          } else regenerateAssistantMessage(id);
+
+          // if this message is an error message, we need to delete it
+          if (data.error) deleteMessage(id);
+          break;
+        }
+
         case 'delAndRegenerate': {
           if (inPortalThread) {
             delAndResendThreadMessage(id);
@@ -134,7 +153,16 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
       <ActionIconGroup
         items={items}
         menu={{
-          items: [edit, copy, divider, share, divider, delAndRegenerate, del],
+          items: [
+            edit,
+            copy,
+            divider,
+            share,
+            divider,
+            regenerate,
+            // delAndRegenerate,
+            del,
+          ],
         }}
         onActionClick={onActionClick}
       />

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

@@ -16,6 +16,6 @@ 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} />;
+    return <WithContentId contentBlock={contentBlock} data={data} id={id} index={index} />;
   },
 );

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

@@ -77,9 +77,7 @@ export const ContentBlock = memo<ContentBlockProps>((props) => {
       {showReasoning && <Reasoning {...reasoning} id={id} />}
 
       {/* Content - markdown text */}
-      {content && (
-        <MessageContent content={content} hasTools={hasTools} markdownProps={markdownProps} />
-      )}
+      <MessageContent content={content} hasTools={hasTools} markdownProps={markdownProps} />
 
       {/* Image files */}
       {showImageItems && <ImageFileListViewer items={imageList} />}

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

@@ -1,6 +1,5 @@
 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';
 
@@ -23,11 +22,12 @@ interface GroupChildrenProps {
   blocks: AssistantContentBlock[];
   contentId?: string;
   disableEditing?: boolean;
+  id: string;
   messageIndex: number;
 }
 
 const GroupChildren = memo<GroupChildrenProps>(
-  ({ blocks, contentId, disableEditing, messageIndex }) => {
+  ({ blocks, contentId, disableEditing, messageIndex, id }) => {
     const { styles } = useStyles();
 
     const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
@@ -53,16 +53,16 @@ const GroupChildren = memo<GroupChildrenProps>(
               <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>
+            // <motion.div
+            //   animate={{ height: 'auto', opacity: 1 }}
+            //   exit={{ height: 0, opacity: 0 }}
+            //   initial={{ height: 0, opacity: 0 }}
+            //   key={`${id}_${index}`}
+            //   style={{ overflow: 'hidden' }}
+            //   transition={{ duration: 0.3, ease: 'easeInOut' }}
+            // >
+            <ContentBlock index={index} key={`${id}_${index}`} {...item} />
+            // </motion.div>
           );
         })}
       </Flexbox>

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

@@ -25,7 +25,13 @@ const MessageContent = memo<ContentBlockProps>(({ content, hasTools, markdownPro
 
   const { styles, cx } = useStyles();
 
-  if (content === LOADING_FLAT) return <BubblesLoading />;
+  if (!content && !hasTools) return <BubblesLoading />;
+
+  if (content === LOADING_FLAT) {
+    if (hasTools) return null;
+
+    return <BubblesLoading />;
+  }
 
   return (
     content && (

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

@@ -23,7 +23,7 @@ const PluginSettings = memo<PluginSettingsProps>(({ id, plugin }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('error');
   const theme = useTheme();
-  const [resend, deleteMessage] = useChatStore((s) => [s.regenerateMessage, s.deleteMessage]);
+  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);

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

@@ -90,7 +90,7 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
           avatar={avatar}
           onClick={onAvatarClick}
           placement={placement}
-          size={mobile ? MOBILE_AVATAR_SIZE : undefined}
+          size={MOBILE_AVATAR_SIZE}
           style={{ marginTop: 6 }}
         />
         <Title avatar={avatar} placement={placement} showTitle time={createdAt} />
@@ -111,6 +111,7 @@ const GroupMessage = memo<GroupMessageProps>((props) => {
               blocks={children}
               contentId={contentId}
               disableEditing={disableEditing}
+              id={id}
               messageIndex={index}
             />
           )}

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 (