@lobehub/lobehub 2.0.0-next.35 → 2.0.0-next.37

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 (

package/src/features/Conversation/Messages/User/{Actions.tsx → Actions/ActionsBar.tsx}

@@ -4,17 +4,15 @@ import { ActionIconGroupItemType } from '@lobehub/ui/es/ActionIconGroup';
 import { ActionIconGroupEvent } from '@lobehub/ui/es/ActionIconGroup/type';
 import { App } from 'antd';
 import { useSearchParams } from 'next/navigation';
-import { memo, use, useCallback, useMemo } from 'react';
+import { memo, use, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+import { messageStateSelectors, threadSelectors } from '@/store/chat/selectors';
 
-import { VirtuosoContext } from '../../components/VirtualizedList/VirtuosoContext';
-import { InPortalThreadContext } from '../../context/InPortalThreadContext';
-import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+import { VirtuosoContext } from '../../../components/VirtualizedList/VirtuosoContext';
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
 
 interface UserActionsProps {
   data: UIChatMessage;
@@ -28,11 +26,12 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
   const topic = searchParams.get('topic');
 
   const [
-    isThreadMode,
+    // isThreadMode,
     hasThread,
+    isRegenerating,
     toggleMessageEditing,
     deleteMessage,
-    regenerateMessage,
+    regenerateUserMessage,
     translateMessage,
     ttsMessage,
     delAndRegenerateMessage,
@@ -41,12 +40,13 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
     resendThreadMessage,
     delAndResendThreadMessage,
   ] = useChatStore((s) => [
-    !!s.activeThreadId,
+    // !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
+    messageStateSelectors.isMessageRegenerating(id)(s),
 
     s.toggleMessageEditing,
     s.deleteMessage,
-    s.regenerateMessage,
+    s.regenerateUserMessage,
     s.translateMessage,
     s.ttsMessage,
     s.delAndRegenerateMessage,
@@ -56,22 +56,21 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
     s.delAndResendThreadMessage,
   ]);
 
-  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+  // const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
 
-  const { regenerate, edit, copy, divider, del, branching, tts, translate } = useChatListActionsBar(
-    { hasThread },
-  );
+  const { regenerate, edit, copy, divider, del, tts, translate } = useChatListActionsBar({
+    hasThread,
+    isRegenerating,
+  });
 
   const inPortalThread = use(InPortalThreadContext);
-  const inThread = isThreadMode || inPortalThread;
-
-  const items = useMemo(
-    () =>
-      [regenerate, edit, inThread || isGroupSession ? null : branching].filter(
-        Boolean,
-      ) as ActionIconGroupItemType[],
-    [inThread, isGroupSession],
-  );
+  // const inThread = isThreadMode || inPortalThread;
+
+  const items = [
+    regenerate,
+    edit,
+    // inThread || isGroupSession ? null : branching
+  ].filter(Boolean) as ActionIconGroupItemType[];
 
   const { message } = App.useApp();
 
@@ -113,7 +112,7 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
         case 'regenerate': {
           if (inPortalThread) {
             resendThreadMessage(id);
-          } else regenerateMessage(id);
+          } else regenerateUserMessage(id);
 
           // if this message is an error message, we need to delete it
           if (data.error) deleteMessage(id);
@@ -153,6 +152,8 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
         items: [edit, copy, divider, tts, translate, divider, regenerate, del],
       }}
       onActionClick={onActionClick}
+      size={'small'}
+      variant={'borderless'}
     />
   );
 });

package/src/features/Conversation/Messages/User/Actions/MessageBranch.tsx

@@ -0,0 +1,107 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  button: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+
+    color: ${token.colorTextSecondary};
+
+    transition: all 0.2s ease;
+
+    &:hover:not(.${prefixCls}-disabled) {
+      color: ${token.colorText};
+      background: ${token.colorFillSecondary};
+    }
+
+    &.${prefixCls}-disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  `,
+  container: css`
+    user-select: none;
+
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+
+    height: 20px;
+    padding-inline: 4px;
+    border-radius: ${token.borderRadiusSM}px;
+  `,
+  text: css`
+    min-width: 24px;
+    height: 20px;
+
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+  `,
+}));
+
+interface MessageBranchProps {
+  activeBranchIndex: number;
+  count: number;
+  messageId: string;
+}
+
+const MessageBranch = memo<MessageBranchProps>(({ activeBranchIndex, count, messageId }) => {
+  const { styles, cx, prefixCls } = useStyles();
+  const switchMessageBranch = useChatStore((s) => s.switchMessageBranch);
+
+  const handlePrevious = () => {
+    if (activeBranchIndex > 0) {
+      switchMessageBranch(messageId, activeBranchIndex - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (activeBranchIndex < count - 1) {
+      switchMessageBranch(messageId, activeBranchIndex + 1);
+    }
+  };
+
+  const canGoPrevious = activeBranchIndex > 0;
+  const canGoNext = activeBranchIndex < count - 1;
+
+  return (
+    <Flexbox className={styles.container} horizontal>
+      <div
+        className={cx(styles.button, !canGoPrevious && `${prefixCls}-disabled`)}
+        onClick={handlePrevious}
+        role="button"
+        tabIndex={canGoPrevious ? 0 : -1}
+      >
+        <Icon icon={ChevronLeft} size={16} />
+      </div>
+      <Center className={styles.text}>
+        {activeBranchIndex + 1}/{count}
+      </Center>
+      <div
+        className={cx(styles.button, !canGoNext && `${prefixCls}-disabled`)}
+        onClick={handleNext}
+        role="button"
+        tabIndex={canGoNext ? 0 : -1}
+      >
+        <Icon icon={ChevronRight} size={16} />
+      </div>
+    </Flexbox>
+  );
+});
+
+export default MessageBranch;