@lobehub/lobehub 2.0.0-next.3 → 2.0.0-next.31

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 import { shinyTextStylish } from '@/styles/loading';
@@ -43,7 +43,9 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, messageId, index, apiName,
   const { t } = useTranslation('plugin');
   const { styles } = useStyles();
 
-  const isLoading = useChatStore(chatSelectors.isToolApiNameShining(messageId, index, toolCallId));
+  const isLoading = useChatStore(
+    messageStateSelectors.isToolApiNameShining(messageId, index, toolCallId),
+  );
 
   const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 

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

@@ -10,7 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import PluginResult from '@/features/Conversation/Messages/Assistant/Tool/Inspector/PluginResult';
 import PluginRender from '@/features/PluginsUI/Render';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 import Arguments from './Arguments';
 import KeyValueEditor from './KeyValueEditor';
@@ -43,7 +43,7 @@ const CustomRender = memo<CustomRenderProps>(
     tool_call_id,
   }) => {
     const { t } = useTranslation(['tool', 'common']);
-    const [loading] = useChatStore((s) => [chatSelectors.isPluginApiInvoking(id)(s)]);
+    const [loading] = useChatStore((s) => [messageStateSelectors.isPluginApiInvoking(id)(s)]);
     const [isEditing, setIsEditing] = useState(false);
     const { message } = App.useApp();
     const [updatePluginArguments, reInvokeToolMessage] = useChatStore((s) => [

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

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

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

@@ -3,7 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import AnimatedCollapsed from '@/components/AnimatedCollapsed';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 import Inspectors from './Inspector';
 import Render from './Render';
@@ -24,7 +24,7 @@ const Tool = memo<InspectorProps>(
   ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, payload, type }) => {
     const [showDetail, setShowDetail] = useState(type !== 'mcp');
     const [showPluginRender, setShowPluginRender] = useState(false);
-    const isLoading = useChatStore(chatSelectors.isInToolsCalling(messageId, index));
+    const isLoading = useChatStore(messageStateSelectors.isInToolsCalling(messageId, index));
 
     useEffect(() => {
       if (type !== 'mcp') return;

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

@@ -19,7 +19,7 @@ import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/slices/message/selectors';
 import { chatGroupSelectors, useChatGroupStore } from '@/store/chatGroup';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -81,9 +81,9 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
   );
 
   const [generating, isInRAGFlow, editing] = useChatStore((s) => [
-    chatSelectors.isMessageGenerating(id)(s),
-    chatSelectors.isMessageInRAGFlow(id)(s),
-    chatSelectors.isMessageEditing(id)(s),
+    messageStateSelectors.isMessageGenerating(id)(s),
+    messageStateSelectors.isMessageInRAGFlow(id)(s),
+    messageStateSelectors.isMessageEditing(id)(s),
   ]);
 
   const { styles } = useStyles({

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

@@ -4,7 +4,7 @@ import { ReactNode, memo } from 'react';
 import BubblesLoading from '@/components/BubblesLoading';
 import { LOADING_FLAT } from '@/const/message';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 
 export const DefaultMessage = memo<
   UIChatMessage & {
@@ -13,7 +13,7 @@ export const DefaultMessage = memo<
     isToolCallGenerating?: boolean;
   }
 >(({ id, editableContent, content, isToolCallGenerating, addIdOnDOM = true }) => {
-  const editing = useChatStore(chatSelectors.isMessageEditing(id));
+  const editing = useChatStore(messageStateSelectors.isMessageEditing(id));
 
   if (isToolCallGenerating) return;
 

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;