@lobehub/chat 0.119.3 → 0.119.5

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

@@ -13,12 +13,14 @@ import { renderErrorMessages } from '../../Error';
 import { renderMessagesExtra } from '../../Extras';
 import { renderMessages, useAvatarsClick } from '../../Messages';
 import ActionsBar from './ActionsBar';
+import HistoryDivider from './HistoryDivider';
 
 export interface ChatListItemProps {
+  id: string;
   index: number;
 }
 
-const Item = memo<ChatListItemProps>(({ index }) => {
+const Item = memo<ChatListItemProps>(({ index, id }) => {
   const { t } = useTranslation('common');
 
   const [editing, setEditing] = useState(false);
@@ -28,13 +30,18 @@ const Item = memo<ChatListItemProps>(({ index }) => {
   });
 
   const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-  const item = useChatStore(
-    (s) => chatSelectors.currentChatsWithGuideMessage(meta)(s)[index],
-    isEqual,
-  );
+  const item = useChatStore((s) => {
+    const chats = chatSelectors.currentChatsWithGuideMessage(meta)(s);
+
+    if (index >= chats.length) return;
+
+    return chatSelectors.currentChatsWithGuideMessage(meta)(s)[index];
+  }, isEqual);
+
+  const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
 
   const [loading, onMessageChange] = useChatStore((s) => [
-    s.chatLoadingId === item.id,
+    s.chatLoadingId === id,
     s.updateMessageContent,
   ]);
 
@@ -49,7 +56,7 @@ const Item = memo<ChatListItemProps>(({ index }) => {
 
       return <RenderFunction {...data} editableContent={editableContent} />;
     },
-    [item.role],
+    [item?.role],
   );
 
   const MessageExtra = useCallback(
@@ -61,7 +68,7 @@ const Item = memo<ChatListItemProps>(({ index }) => {
       if (!RenderFunction) return;
       return <RenderFunction {...data} />;
     },
-    [item.role],
+    [item?.role],
   );
 
   const ErrorMessage = useCallback(
@@ -75,51 +82,65 @@ const Item = memo<ChatListItemProps>(({ index }) => {
       if (!RenderFunction) return;
       return <RenderFunction {...data} />;
     },
-    [item.error],
+    [item?.error],
   );
 
   const error = useMemo(() => {
-    if (!item.error) return;
+    if (!item?.error) return;
     const message = item.error?.message;
     let alertConfig = {};
     if (item.error.type && renderErrorMessages?.[item.error.type]) {
       alertConfig = renderErrorMessages[item.error.type]?.config as AlertProps;
     }
     return { message, ...alertConfig };
-  }, [item.error]);
+  }, [item?.error]);
+
+  const enableHistoryDivider = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return (
+      config.enableHistoryCount &&
+      historyLength > (config.historyCount ?? 0) &&
+      config.historyCount === historyLength - index + 1
+    );
+  });
 
   return (
-    <ChatItem
-      actions={<ActionsBar index={index} setEditing={setEditing} />}
-      avatar={item.meta}
-      editing={editing}
-      error={error}
-      errorMessage={<ErrorMessage data={item} />}
-      loading={loading}
-      message={item.content}
-      messageExtra={<MessageExtra data={item} />}
-      onAvatarClick={onAvatarsClick?.(item.role)}
-      onChange={(value) => onMessageChange(item.id, value)}
-      onDoubleClick={(e) => {
-        if (item.id === 'default' || item.error) return;
-        if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
-          setEditing(true);
-        }
-      }}
-      onEditingChange={setEditing}
-      placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
-      primary={item.role === 'user'}
-      renderMessage={(editableContent) => (
-        <RenderMessage data={item} editableContent={editableContent} />
-      )}
-      text={{
-        cancel: t('cancel'),
-        confirm: t('ok'),
-        edit: t('edit'),
-      }}
-      time={item.updatedAt || item.createdAt}
-      type={type === 'chat' ? 'block' : 'pure'}
-    />
+    item && (
+      <>
+        <HistoryDivider enable={enableHistoryDivider} />
+        <ChatItem
+          actions={<ActionsBar index={index} setEditing={setEditing} />}
+          avatar={item.meta}
+          editing={editing}
+          error={error}
+          errorMessage={<ErrorMessage data={item} />}
+          loading={loading}
+          message={item.content}
+          messageExtra={<MessageExtra data={item} />}
+          onAvatarClick={onAvatarsClick?.(item.role)}
+          onChange={(value) => onMessageChange(item.id, value)}
+          onDoubleClick={(e) => {
+            if (item.id === 'default' || item.error) return;
+            if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
+              setEditing(true);
+            }
+          }}
+          onEditingChange={setEditing}
+          placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
+          primary={item.role === 'user'}
+          renderMessage={(editableContent) => (
+            <RenderMessage data={item} editableContent={editableContent} />
+          )}
+          text={{
+            cancel: t('cancel'),
+            confirm: t('ok'),
+            edit: t('edit'),
+          }}
+          time={item.updatedAt || item.createdAt}
+          type={type === 'chat' ? 'block' : 'pure'}
+        />
+      </>
+    )
   );
 });
 

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

@@ -1,42 +1,19 @@
-import isEqual from 'fast-deep-equal';
-import { Fragment, memo } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
 
 import Item from '../ChatItem';
-import HistoryDivider from './HistoryDivider';
-import { useStyles } from './style';
 
 const ChatList = memo(() => {
-  const { styles } = useStyles();
-
-  const data = useChatStore(chatSelectors.currentChatIDsWithGuideMessage, isEqual);
-
-  const [enableHistoryCount, historyCount = 0] = useSessionStore((s) => {
-    const config = agentSelectors.currentAgentConfig(s);
-    return [config.enableHistoryCount, config.historyCount];
-  });
+  const ids = useChatStore(chatSelectors.currentChatIDsWithGuideMessage);
 
   return (
-    <Flexbox className={styles.container}>
-      {data.map((item, index) => {
-        const historyLength = data.length;
-        const enableHistoryDivider =
-          enableHistoryCount &&
-          historyLength > historyCount &&
-          historyCount === historyLength - index + 1;
-
-        return (
-          <Fragment key={item}>
-            <HistoryDivider enable={enableHistoryDivider} />
-            <Item index={index} />
-          </Fragment>
-        );
-      })}
+    <Flexbox height={'100%'} style={{ position: 'relative' }}>
+      {ids.map((id, index) => (
+        <Item id={id} index={index} key={id} />
+      ))}
     </Flexbox>
   );
 });

package/src/features/Conversation/components/SkeletonList.tsx

@@ -16,11 +16,14 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
     }
   `,
 }));
-const SkeletonList = memo(() => {
+interface SkeletonListProps {
+  mobile?: boolean;
+}
+const SkeletonList = memo<SkeletonListProps>(({ mobile }) => {
   const { styles } = useStyles();
 
   return (
-    <Flexbox gap={24} padding={12} style={{ marginTop: 24 }}>
+    <Flexbox gap={24} padding={12} style={{ marginTop: 24 + (mobile ? 0 : 64) }}>
       <Skeleton
         active
         avatar={{ size: 40 }}

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

@@ -0,0 +1,78 @@
+import isEqual from 'fast-deep-equal';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { isMobileScreen } from '@/utils/screen';
+
+import AutoScroll from '../AutoScroll';
+import Item from '../ChatItem';
+
+const itemContent = (index: number, id: string) => {
+  const isMobile = isMobileScreen();
+
+  return index === 0 ? (
+    <div style={{ height: isMobile ? 24 : 64 }} />
+  ) : (
+    <Item id={id} index={index - 1} />
+  );
+};
+
+interface VirtualizedListProps {
+  mobile?: boolean;
+}
+const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const [atBottom, setAtBottom] = useState(true);
+
+  const data = useChatStore(
+    (s) => ['empty', ...chatSelectors.currentChatIDsWithGuideMessage(s)],
+    isEqual,
+  );
+  const [id, chatLoading] = useChatStore((s) => [
+    chatSelectors.currentChatKey(s),
+    chatSelectors.currentChatLoadingState(s),
+  ]);
+
+  useEffect(() => {
+    if (virtuosoRef.current) {
+      virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+    }
+  }, [id]);
+
+  return chatLoading && data.length === 2 ? null : (
+    <Flexbox height={'100%'}>
+      <Virtuoso
+        atBottomStateChange={setAtBottom}
+        atBottomThreshold={60 * (mobile ? 2 : 1)}
+        computeItemKey={(_, item) => item}
+        data={data}
+        followOutput={'auto'}
+        initialTopMostItemIndex={data?.length - 1}
+        itemContent={itemContent}
+        overscan={70 * 10}
+        ref={virtuosoRef}
+      />
+      <AutoScroll
+        atBottom={atBottom}
+        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.tsx

@@ -1,22 +1,19 @@
-import { BackBottom } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ReactNode, memo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import SafeSpacing from '@/components/SafeSpacing';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 
-import ChatList from './components/ChatList';
-import ChatScrollAnchor from './components/ScrollAnchor';
 import SkeletonList from './components/SkeletonList';
+import ChatList from './components/VirtualizedList';
 import { useInitConversation } from './hooks/useInitConversation';
 
 const useStyles = createStyles(({ css, responsive, stylish, cx }, fontSize: number = 14) =>
   cx(
     css`
-      overflow: hidden scroll;
+      position: relative;
+      overflow-y: auto;
       height: 100%;
 
       ${responsive.mobile} {
@@ -46,9 +43,7 @@ interface ConversationProps {
   mobile?: boolean;
 }
 
-const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
-  const ref = useRef(null);
-  const { t } = useTranslation('chat');
+const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
   const fontSize = useGlobalStore((s) => settingsSelectors.currentSettings(s).fontSize);
   const { styles } = useStyles(fontSize);
 
@@ -56,14 +51,9 @@ const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const init = useInitConversation();
 
   return (
-    <Flexbox flex={1} style={{ position: 'relative' }}>
-      <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
-        <div className={styles} ref={ref}>
-          {!mobile && <SafeSpacing />}
-          {init ? <ChatList /> : <SkeletonList />}
-          <ChatScrollAnchor />
-        </div>
-        <BackBottom target={ref} text={t('backToBottom')} />
+    <Flexbox data-id={'conversation'} flex={1}>
+      <div className={styles}>
+        {init ? <ChatList mobile={mobile} /> : <SkeletonList mobile={mobile} />}
       </div>
       {chatInput}
     </Flexbox>

package/src/locales/create.ts

@@ -28,7 +28,7 @@ export const createI18nNext = (lang?: string) => {
     init: () =>
       instance.init({
         debug: debugMode,
-        defaultNS: ['error', 'common', 'empty', 'chat'],
+        defaultNS: ['error', 'common', 'chat'],
         detection: {
           caches: ['cookie'],
           cookieMinutes: 60 * 24 * COOKIE_CACHE_DAYS,

package/src/locales/default/chat.ts

@@ -65,12 +65,16 @@ export default {
     confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
     confirmRemoveUnstarred: '即将删除未收藏话题，删除后将不可恢复，请谨慎操作。',
     defaultTitle: '默认话题',
+    guide: {
+      desc: '点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话',
+      title: '话题列表',
+    },
     openNewTopic: '开启新话题',
     removeAll: '删除全部话题',
     removeUnstarred: '删除未收藏话题',
     saveCurrentMessages: '将当前会话保存为话题',
     searchPlaceholder: '搜索话题...',
-    title: '话题列表',
+    title: '话题',
   },
   translate: {
     action: '翻译',

package/src/locales/default/index.ts

@@ -1,7 +1,6 @@
 import tool from '../default/tool';
 import chat from './chat';
 import common from './common';
-import empty from './empty';
 import error from './error';
 import market from './market';
 import migration from './migration';
@@ -12,7 +11,6 @@ import welcome from './welcome';
 const resources = {
   chat,
   common,
-  empty,
   error,
   market,
   migration,

package/src/store/chat/slices/message/selectors.ts

@@ -39,6 +39,8 @@ const getMeta = (message: ChatMessage) => {
   }
 };
 
+const currentChatKey = (s: ChatStore) => `${s.activeId}_${s.activeTopicId}`;
+
 // 当前激活的消息列表
 const currentChats = (s: ChatStore): ChatMessage[] => {
   if (!s.activeId) return [];
@@ -117,9 +119,13 @@ const getMessageById = (id: string) => (s: ChatStore) => chatHelpers.getMessageB
 
 const latestMessage = (s: ChatStore) => currentChats(s).at(-1);
 
+const currentChatLoadingState = (s: ChatStore) => !s.messagesInit;
+
 export const chatSelectors = {
   chatsMessageString,
   currentChatIDsWithGuideMessage,
+  currentChatKey,
+  currentChatLoadingState,
   currentChats,
   currentChatsWithGuideMessage,
   currentChatsWithHistoryConfig,

package/vercel.json

@@ -1,3 +1,3 @@
 {
-  "installCommand": "/bun1/bun install"
+  "installCommand": "npx bun@1.0.15 install"
 }

package/locales/de-DE/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Klicken Sie auf die Schaltfläche links, um das aktuelle Gespräch als historisches Thema zu speichern und eine neue Gesprächsrunde zu starten",
-    "title": "Themenliste"
-  }
-}

package/locales/en-US/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Click the button on the left to save the current conversation as a historical topic and start a new conversation",
-    "title": "Topic List"
-  }
-}

package/locales/es-ES/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Haz clic en el botón izquierdo para guardar la conversación actual como un tema histórico y comenzar una nueva sesión",
-    "title": "Lista de temas"
-  }
-}

package/locales/fr-FR/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Cliquez sur le bouton à gauche pour enregistrer la conversation actuelle comme un sujet précédent et commencer une nouvelle session",
-    "title": "Liste des sujets"
-  }
-}

package/locales/it-IT/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Clicca sul pulsante a sinistra per salvare l'attuale sessione come argomento storico e avviare una nuova sessione",
-    "title": "Elenco argomenti"
-  }
-}

package/locales/ja-JP/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "左側のボタンをクリックして、現在の会話を履歴トピックとして保存し、新しい会話を開始します",
-    "title": "トピックリスト"
-  }
-}

package/locales/ko-KR/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "현재 대화를 히스토리 토픽으로 저장하고 새로운 대화를 시작하려면 왼쪽 버튼을 클릭하세요.",
-    "title": "토픽 목록"
-  }
-}

package/locales/nl-NL/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Klik op de knop aan de linkerkant om het huidige gesprek op te slaan als een historisch onderwerp en een nieuw gesprek te starten",
-    "title": "Onderwerplijst"
-  }
-}

package/locales/pl-PL/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Kliknij przycisk po lewej stronie, aby zapisać bieżącą rozmowę jako historię tematu i rozpocząć nową rundę rozmowy",
-    "title": "Lista tematów"
-  }
-}

package/locales/pt-BR/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Clique em enviar no botão esquerdo para salvar a conversa atual como um tópico histórico e iniciar uma nova rodada de conversa",
-    "title": "Lista de Tópicos"
-  }
-}

package/locales/ru-RU/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Нажмите кнопку слева, чтобы сохранить текущий разговор как историческую тему и начать новый разговор",
-    "title": "Список тем"
-  }
-}

package/locales/tr-TR/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Mevcut konuşmayı kaydetmek ve yeni bir konuşma başlatmak için soldaki düğmeye tıklayın.",
-    "title": "Konular"
-  }
-}

package/locales/vi-VN/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "Nhấn vào nút bên trái để lưu cuộc trò chuyện hiện tại như một chủ đề lịch sử và bắt đầu một cuộc trò chuyện mới",
-    "title": "Danh sách chủ đề"
-  }
-}

package/locales/zh-CN/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话",
-    "title": "话题列表"
-  }
-}

package/locales/zh-TW/empty.json

@@ -1,6 +0,0 @@
-{
-  "topic": {
-    "desc": "點選左側的按鈕，將目前的對話存成歷史主題，並開始新的對話",
-    "title": "主題清單"
-  }
-}

package/src/features/Conversation/components/ChatList/style.ts

@@ -1,10 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css }) => {
-  return {
-    container: css`
-      position: relative;
-      margin-top: 24px;
-    `,
-  };
-});

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

@@ -1,29 +0,0 @@
-import { memo, useEffect } from 'react';
-import { useInView } from 'react-intersection-observer';
-
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-
-import { useAtBottom } from './useAtBottom';
-
-const ChatScrollAnchor = memo(() => {
-  const trackVisibility = useChatStore((s) => !!s.chatLoadingId);
-  const str = useChatStore(chatSelectors.chatsMessageString);
-
-  const isAtBottom = useAtBottom();
-  const { ref, entry, inView } = useInView({
-    delay: 100,
-    rootMargin: '0px 0px -150px 0px',
-    trackVisibility,
-  });
-
-  useEffect(() => {
-    if (isAtBottom && trackVisibility && !inView) {
-      entry?.target.scrollIntoView({ block: 'start' });
-    }
-  }, [inView, entry, isAtBottom, trackVisibility, str]);
-
-  return <div ref={ref} style={{ height: 1, width: '100%' }} />;
-});
-
-export default ChatScrollAnchor;

package/src/features/Conversation/components/ScrollAnchor/useAtBottom.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useAtBottom = (offset = 0) => {
-  const [isAtBottom, setIsAtBottom] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsAtBottom(window.innerHeight + window.scrollY >= document.body.offsetHeight - offset);
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    handleScroll();
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [offset]);
-
-  return isAtBottom;
-};

package/src/locales/default/empty.ts

@@ -1,6 +0,0 @@
-export default {
-  topic: {
-    desc: '点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话',
-    title: '话题列表',
-  },
-};