@lobehub/chat 1.32.3 → 1.32.5

package/src/features/Conversation/components/ChatItem/ActionsBar.tsx

@@ -4,8 +4,7 @@ import { memo, useCallback } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionMetaSelectors } from '@/store/session/selectors';
+import { MessageRoleType } from '@/types/message';
 
 import { renderActions, useActionsClick } from '../../Actions';
 import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
@@ -25,34 +24,31 @@ const ActionsBar = memo<ActionsBarProps>((props) => {
 });
 
 interface ActionsProps {
-  index: number;
-  setEditing: (edit: boolean) => void;
+  id: string;
 }
-const Actions = memo<ActionsProps>(({ index, setEditing }) => {
-  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
 
-  const item = useChatStore(
-    (s) => chatSelectors.currentChatsWithGuideMessage(meta)(s)[index],
-    isEqual,
-  );
+const Actions = memo<ActionsProps>(({ id }) => {
+  const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+  const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
   const onActionsClick = useActionsClick();
 
   const handleActionClick = useCallback(
     async (action: ActionEvent) => {
       switch (action.key) {
         case 'edit': {
-          setEditing(true);
+          toggleMessageEditing(id, true);
         }
       }
+      if (!item) return;
 
       onActionsClick(action, item);
     },
     [item],
   );
 
-  const RenderFunction = renderActions[item?.role] ?? ActionsBar;
+  const RenderFunction = renderActions[(item?.role || '') as MessageRoleType] ?? ActionsBar;
 
-  return <RenderFunction {...item} onActionClick={handleActionClick} />;
+  return <RenderFunction {...item!} onActionClick={handleActionClick} />;
 });
 
 export default Actions;

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -5,13 +5,12 @@ import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { MouseEventHandler, ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionMetaSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { ChatMessage } from '@/types/message';
@@ -26,7 +25,6 @@ import {
 } from '../../Messages';
 import History from '../History';
 import { markdownElements } from '../MarkdownElements';
-import ActionsBar from './ActionsBar';
 import { processWithArtifact } from './utils';
 
 const rehypePlugins = markdownElements.map((element) => element.rehypePlugin);
@@ -36,6 +34,7 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
     opacity: 0.6;
   `,
   message: css`
+    position: relative;
     // prevent the textarea too long
     .${prefixCls}-input {
       max-height: 900px;
@@ -44,218 +43,193 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 }));
 
 export interface ChatListItemProps {
-  hideActionBar?: boolean;
+  actionBar?: ReactNode;
+  className?: string;
+  enableHistoryDivider?: boolean;
+  endRender?: ReactNode;
   id: string;
   index: number;
-  showThreadDivider?: boolean;
 }
 
-const Item = memo<ChatListItemProps>(({ index, id, hideActionBar }) => {
-  const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
-  const { t } = useTranslation('common');
-  const { styles, cx } = useStyles();
-  const [type = 'chat'] = useAgentStore((s) => {
-    const config = agentSelectors.currentAgentChatConfig(s);
-    return [config.displayMode];
-  });
-
-  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
-  const item = useChatStore((s) => {
-    const chats = chatSelectors.currentChatsWithGuideMessage(meta)(s);
-
-    if (index >= chats.length) return;
-
-    return chats.find((s) => s.id === id);
-  }, isEqual);
-
-  const [
-    isMessageLoading,
-    generating,
-    isInRAGFlow,
-    editing,
-    toggleMessageEditing,
-    updateMessageContent,
-  ] = useChatStore((s) => [
-    chatSelectors.isMessageLoading(id)(s),
-    chatSelectors.isMessageGenerating(id)(s),
-    chatSelectors.isMessageInRAGFlow(id)(s),
-    chatSelectors.isMessageEditing(id)(s),
-    s.toggleMessageEditing,
-    s.modifyMessageContent,
-  ]);
-
-  // when the message is in RAG flow or the AI generating, it should be in loading state
-  const isProcessing = isInRAGFlow || generating;
-
-  const onAvatarsClick = useAvatarsClick(item?.role);
-
-  const renderMessage = useCallback(
-    (editableContent: ReactNode) => {
-      if (!item?.role) return;
-      const RenderFunction = renderMessages[item.role] ?? renderMessages['default'];
-
-      if (!RenderFunction) return;
-
-      return <RenderFunction {...item} editableContent={editableContent} />;
-    },
-    [item],
-  );
-
-  const BelowMessage = useCallback(
-    ({ data }: { data: ChatMessage }) => {
-      if (!item?.role) return;
-      const RenderFunction = renderBelowMessages[item.role] ?? renderBelowMessages['default'];
-
-      if (!RenderFunction) return;
-
-      return <RenderFunction {...data} />;
-    },
-    [item?.role],
-  );
-
-  const MessageExtra = useCallback(
-    ({ data }: { data: ChatMessage }) => {
-      if (!item?.role) return;
-      let RenderFunction;
-      if (renderMessagesExtra?.[item.role]) RenderFunction = renderMessagesExtra[item.role];
-
-      if (!RenderFunction) return;
-      return <RenderFunction {...data} />;
-    },
-    [item?.role],
-  );
-
-  const markdownCustomRender = useCallback(
-    (dom: ReactNode, { text }: { text: string }) => {
-      if (!item?.role) return dom;
-      let RenderFunction;
-
-      if (renderMessagesExtra?.[item.role]) RenderFunction = markdownCustomRenders[item.role];
-      if (!RenderFunction) return dom;
-
-      return <RenderFunction displayMode={type} dom={dom} id={id} text={text} />;
-    },
-    [item?.role, type],
-  );
-
-  const error = useErrorContent(item?.error);
-
-  const [historyLength] = useChatStore((s) => [chatSelectors.currentChats(s).length]);
-
-  const enableHistoryDivider = useAgentStore((s) => {
-    const config = agentSelectors.currentAgentChatConfig(s);
+const Item = memo<ChatListItemProps>(
+  ({ className, enableHistoryDivider, id, actionBar, endRender }) => {
+    const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
+    const { t } = useTranslation('common');
+    const { styles, cx } = useStyles();
+    const [type = 'chat'] = useAgentStore((s) => {
+      const config = agentSelectors.currentAgentChatConfig(s);
+      return [config.displayMode];
+    });
+
+    const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+
+    const [
+      isMessageLoading,
+      generating,
+      isInRAGFlow,
+      editing,
+      toggleMessageEditing,
+      updateMessageContent,
+    ] = useChatStore((s) => [
+      chatSelectors.isMessageLoading(id)(s),
+      chatSelectors.isMessageGenerating(id)(s),
+      chatSelectors.isMessageInRAGFlow(id)(s),
+      chatSelectors.isMessageEditing(id)(s),
+      s.toggleMessageEditing,
+      s.modifyMessageContent,
+    ]);
+
+    // when the message is in RAG flow or the AI generating, it should be in loading state
+    const isProcessing = isInRAGFlow || generating;
+
+    const onAvatarsClick = useAvatarsClick(item?.role);
+
+    const renderMessage = useCallback(
+      (editableContent: ReactNode) => {
+        if (!item?.role) return;
+        const RenderFunction = renderMessages[item.role] ?? renderMessages['default'];
+
+        if (!RenderFunction) return;
+
+        return <RenderFunction {...item} editableContent={editableContent} />;
+      },
+      [item],
+    );
+
+    const BelowMessage = useCallback(
+      ({ data }: { data: ChatMessage }) => {
+        if (!item?.role) return;
+        const RenderFunction = renderBelowMessages[item.role] ?? renderBelowMessages['default'];
+
+        if (!RenderFunction) return;
+
+        return <RenderFunction {...data} />;
+      },
+      [item?.role],
+    );
+
+    const MessageExtra = useCallback(
+      ({ data }: { data: ChatMessage }) => {
+        if (!item?.role) return;
+        let RenderFunction;
+        if (renderMessagesExtra?.[item.role]) RenderFunction = renderMessagesExtra[item.role];
+
+        if (!RenderFunction) return;
+        return <RenderFunction {...data} />;
+      },
+      [item?.role],
+    );
+
+    const markdownCustomRender = useCallback(
+      (dom: ReactNode, { text }: { text: string }) => {
+        if (!item?.role) return dom;
+        let RenderFunction;
+
+        if (renderMessagesExtra?.[item.role]) RenderFunction = markdownCustomRenders[item.role];
+        if (!RenderFunction) return dom;
+
+        return <RenderFunction displayMode={type} dom={dom} id={id} text={text} />;
+      },
+      [item?.role, type],
+    );
+
+    const error = useErrorContent(item?.error);
+
+    // remove line breaks in artifact tag to make the ast transform easier
+    const message =
+      !editing && item?.role === 'assistant' ? processWithArtifact(item?.content) : item?.content;
+
+    // ======================= Performance Optimization ======================= //
+    // these useMemo/useCallback are all for the performance optimization
+    // maybe we can remove it in React 19
+    // ======================================================================== //
+
+    const components = useMemo(
+      () =>
+        Object.fromEntries(
+          markdownElements.map((element) => {
+            const Component = element.Component;
+
+            return [element.tag, (props: any) => <Component {...props} id={id} />];
+          }),
+        ),
+      [id],
+    );
+
+    const markdownProps = useMemo(
+      () => ({
+        components,
+        customRender: markdownCustomRender,
+        rehypePlugins,
+      }),
+      [components, markdownCustomRender],
+    );
+
+    const onChange = useCallback((value: string) => updateMessageContent(id, value), [id]);
+
+    const onDoubleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
+      (e) => {
+        if (!item) return;
+        if (item.id === 'default' || item.error) return;
+        if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
+          toggleMessageEditing(id, true);
+        }
+      },
+      [item],
+    );
+
+    const text = useMemo(
+      () => ({
+        cancel: t('cancel'),
+        confirm: t('ok'),
+        edit: t('edit'),
+      }),
+      [t],
+    );
+
+    const onEditingChange = useCallback((edit: boolean) => {
+      toggleMessageEditing(id, edit);
+    }, []);
+
+    const belowMessage = useMemo(() => item && <BelowMessage data={item} />, [item]);
+    const errorMessage = useMemo(() => item && <ErrorMessageExtra data={item} />, [item]);
+    const messageExtra = useMemo(() => item && <MessageExtra data={item} />, [item]);
+
     return (
-      config.enableHistoryCount &&
-      historyLength > (config.historyCount ?? 0) &&
-      config.historyCount === historyLength - index
+      item && (
+        <>
+          {enableHistoryDivider && <History />}
+          <Flexbox className={cx(styles.message, className, isMessageLoading && styles.loading)}>
+            <ChatItem
+              actions={actionBar}
+              avatar={item.meta}
+              belowMessage={belowMessage}
+              editing={editing}
+              error={error}
+              errorMessage={errorMessage}
+              fontSize={fontSize}
+              loading={isProcessing}
+              markdownProps={markdownProps}
+              message={message}
+              messageExtra={messageExtra}
+              onAvatarClick={onAvatarsClick}
+              onChange={onChange}
+              onDoubleClick={onDoubleClick}
+              onEditingChange={onEditingChange}
+              placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
+              primary={item.role === 'user'}
+              renderMessage={renderMessage}
+              text={text}
+              time={item.updatedAt || item.createdAt}
+              type={type === 'chat' ? 'block' : 'pure'}
+            />
+            {endRender}
+          </Flexbox>
+        </>
+      )
     );
-  });
-
-  // remove line breaks in artifact tag to make the ast transform easier
-  const message =
-    !editing && item?.role === 'assistant' ? processWithArtifact(item?.content) : item?.content;
-
-  // ======================= Performance Optimization ======================= //
-  // these useMemo/useCallback are all for the performance optimization
-  // maybe we can remove it in React 19
-  // ======================================================================== //
-
-  const components = useMemo(
-    () =>
-      Object.fromEntries(
-        markdownElements.map((element) => {
-          const Component = element.Component;
-
-          return [element.tag, (props: any) => <Component {...props} id={id} />];
-        }),
-      ),
-    [id],
-  );
-
-  const markdownProps = useMemo(
-    () => ({
-      components,
-      customRender: markdownCustomRender,
-      rehypePlugins,
-    }),
-    [components, markdownCustomRender],
-  );
-
-  const onChange = useCallback((value: string) => updateMessageContent(id, value), [id]);
-
-  const onDoubleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
-    (e) => {
-      if (!item) return;
-      if (item.id === 'default' || item.error) return;
-      if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
-        toggleMessageEditing(id, true);
-      }
-    },
-    [item],
-  );
-
-  const text = useMemo(
-    () => ({
-      cancel: t('cancel'),
-      confirm: t('ok'),
-      edit: t('edit'),
-    }),
-    [t],
-  );
-
-  const onEditingChange = useCallback((edit: boolean) => {
-    toggleMessageEditing(id, edit);
-  }, []);
-
-  const actions = useMemo(
-    () =>
-      !hideActionBar && (
-        <ActionsBar
-          index={index}
-          setEditing={(edit) => {
-            toggleMessageEditing(id, edit);
-          }}
-        />
-      ),
-    [hideActionBar, index, id],
-  );
-
-  const belowMessage = useMemo(() => item && <BelowMessage data={item} />, [item]);
-  const errorMessage = useMemo(() => item && <ErrorMessageExtra data={item} />, [item]);
-  const messageExtra = useMemo(() => item && <MessageExtra data={item} />, [item]);
-
-  return (
-    item && (
-      <>
-        {enableHistoryDivider && <History />}
-        <ChatItem
-          actions={actions}
-          avatar={item.meta}
-          belowMessage={belowMessage}
-          className={cx(styles.message, isMessageLoading && styles.loading)}
-          editing={editing}
-          error={error}
-          errorMessage={errorMessage}
-          fontSize={fontSize}
-          loading={isProcessing}
-          markdownProps={markdownProps}
-          message={message}
-          messageExtra={messageExtra}
-          onAvatarClick={onAvatarsClick}
-          onChange={onChange}
-          onDoubleClick={onDoubleClick}
-          onEditingChange={onEditingChange}
-          placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
-          primary={item.role === 'user'}
-          renderMessage={renderMessage}
-          text={text}
-          time={item.updatedAt || item.createdAt}
-          type={type === 'chat' ? 'block' : 'pure'}
-        />
-      </>
-    )
-  );
-});
+  },
+);
 
 Item.displayName = 'ChatItem';
 

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -12,105 +12,96 @@ import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 
 import AutoScroll from '../AutoScroll';
-import Item from '../ChatItem';
 import SkeletonList from '../SkeletonList';
 
 interface VirtualizedListProps {
   dataSource: string[];
-  hideActionBar?: boolean;
-  itemContent?: (index: number, data: any, context: any) => ReactNode;
+  itemContent: (index: number, data: any, context: any) => ReactNode;
   mobile?: boolean;
 }
 
-const VirtualizedList = memo<VirtualizedListProps>(
-  ({ mobile, dataSource, hideActionBar, itemContent }) => {
-    const virtuosoRef = useRef<VirtuosoHandle>(null);
-    const [atBottom, setAtBottom] = useState(true);
-    const [isScrolling, setIsScrolling] = useState(false);
+const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemContent }) => {
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const [atBottom, setAtBottom] = useState(true);
+  const [isScrolling, setIsScrolling] = useState(false);
 
-    const [id, isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
-      chatSelectors.currentChatKey(s),
-      chatSelectors.currentChatLoadingState(s),
-      chatSelectors.isCurrentChatLoaded(s),
-    ]);
+  const [id, isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
+    chatSelectors.currentChatKey(s),
+    chatSelectors.currentChatLoadingState(s),
+    chatSelectors.isCurrentChatLoaded(s),
+  ]);
 
-    useEffect(() => {
-      if (virtuosoRef.current) {
-        virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
-      }
-    }, [id]);
+  useEffect(() => {
+    if (virtuosoRef.current) {
+      virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+    }
+  }, [id]);
 
-    const prevDataLengthRef = useRef(dataSource.length);
+  const prevDataLengthRef = useRef(dataSource.length);
 
-    const getFollowOutput = useCallback(() => {
-      const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
-      prevDataLengthRef.current = dataSource.length;
-      return newFollowOutput;
-    }, [dataSource.length]);
+  const getFollowOutput = useCallback(() => {
+    const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
+    prevDataLengthRef.current = dataSource.length;
+    return newFollowOutput;
+  }, [dataSource.length]);
 
-    const theme = useTheme();
-    // overscan should be 3 times the height of the window
-    const overscan = typeof window !== 'undefined' ? window.innerHeight * 3 : 0;
+  const theme = useTheme();
+  // overscan should be 3 times the height of the window
+  const overscan = typeof window !== 'undefined' ? window.innerHeight * 3 : 0;
 
-    const defaultItemContent = useCallback(
-      (index: number, id: string) => <Item hideActionBar={hideActionBar} id={id} index={index} />,
-      [mobile, hideActionBar],
-    );
-
-    // first time loading or not loaded
-    if (isFirstLoading) return <SkeletonList mobile={mobile} />;
+  // first time loading or not loaded
+  if (isFirstLoading) return <SkeletonList mobile={mobile} />;
 
-    if (!isCurrentChatLoaded)
-      // use skeleton list when not loaded in server mode due to the loading duration is much longer than client mode
-      return isServerMode ? (
-        <SkeletonList mobile={mobile} />
-      ) : (
-        // in client mode and switch page, using the center loading for smooth transition
-        <Center height={'100%'} width={'100%'}>
-          <Icon
-            icon={Loader2Icon}
-            size={{ fontSize: 32 }}
-            spin
-            style={{ color: theme.colorTextTertiary }}
-          />
-        </Center>
-      );
-
-    return (
-      <Flexbox height={'100%'}>
-        <Virtuoso
-          atBottomStateChange={setAtBottom}
-          atBottomThreshold={50 * (mobile ? 2 : 1)}
-          computeItemKey={(_, item) => item}
-          data={dataSource}
-          followOutput={getFollowOutput}
-          increaseViewportBy={overscan}
-          initialTopMostItemIndex={dataSource?.length - 1}
-          isScrolling={setIsScrolling}
-          itemContent={itemContent ?? defaultItemContent}
-          overscan={overscan}
-          ref={virtuosoRef}
-        />
-        <AutoScroll
-          atBottom={atBottom}
-          isScrolling={isScrolling}
-          onScrollToBottom={(type) => {
-            const virtuoso = virtuosoRef.current;
-            switch (type) {
-              case 'auto': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
-                break;
-              }
-              case 'click': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
-                break;
-              }
-            }
-          }}
+  if (!isCurrentChatLoaded)
+    // use skeleton list when not loaded in server mode due to the loading duration is much longer than client mode
+    return isServerMode ? (
+      <SkeletonList mobile={mobile} />
+    ) : (
+      // in client mode and switch page, using the center loading for smooth transition
+      <Center height={'100%'} width={'100%'}>
+        <Icon
+          icon={Loader2Icon}
+          size={{ fontSize: 32 }}
+          spin
+          style={{ color: theme.colorTextTertiary }}
         />
-      </Flexbox>
+      </Center>
     );
-  },
-);
+
+  return (
+    <Flexbox height={'100%'}>
+      <Virtuoso
+        atBottomStateChange={setAtBottom}
+        atBottomThreshold={50 * (mobile ? 2 : 1)}
+        computeItemKey={(_, item) => item}
+        data={dataSource}
+        followOutput={getFollowOutput}
+        increaseViewportBy={overscan}
+        initialTopMostItemIndex={dataSource?.length - 1}
+        isScrolling={setIsScrolling}
+        itemContent={itemContent}
+        overscan={overscan}
+        ref={virtuosoRef}
+      />
+      <AutoScroll
+        atBottom={atBottom}
+        isScrolling={isScrolling}
+        onScrollToBottom={(type) => {
+          const virtuoso = virtuosoRef.current;
+          switch (type) {
+            case 'auto': {
+              virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+              break;
+            }
+            case 'click': {
+              virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
+              break;
+            }
+          }
+        }}
+      />
+    </Flexbox>
+  );
+});
 
 export default VirtualizedList;

package/src/features/Conversation/index.ts

@@ -1,4 +1,3 @@
 export { default as ChatItem } from './components/ChatItem';
-export { default as InboxWelcome } from './components/InboxWelcome';
 export { default as SkeletonList } from './components/SkeletonList';
 export { default as VirtualizedList } from './components/VirtualizedList';