@lobehub/chat 0.119.3 → 0.119.4

package/CHANGELOG.md

@@ -2,6 +2,51 @@
 
 # Changelog
 
+### [Version 0.119.4](https://github.com/lobehub/lobe-chat/compare/v0.119.3...v0.119.4)
+
+<sup>Released on **2024-01-06**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor to virtual list with react-virtuoso.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix auto scroll error and BackBottom error.
+
+#### 💄 Styles
+
+- **misc**: Fix BackBottom zIndex, improve chat list on mobile, improve chat list scrolling to bottom at initial render, improve custom model input, improve topic scroll.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor to virtual list with react-virtuoso ([d6d63b2](https://github.com/lobehub/lobe-chat/commit/d6d63b2))
+
+#### What's fixed
+
+- **misc**: Fix auto scroll error and BackBottom error ([6100970](https://github.com/lobehub/lobe-chat/commit/6100970))
+
+#### Styles
+
+- **misc**: Fix BackBottom zIndex ([254cc54](https://github.com/lobehub/lobe-chat/commit/254cc54))
+- **misc**: Improve chat list on mobile ([a894fc5](https://github.com/lobehub/lobe-chat/commit/a894fc5))
+- **misc**: Improve chat list scrolling to bottom at initial render ([476304b](https://github.com/lobehub/lobe-chat/commit/476304b))
+- **misc**: Improve custom model input ([1c4722f](https://github.com/lobehub/lobe-chat/commit/1c4722f))
+- **misc**: Improve topic scroll ([8daf3ac](https://github.com/lobehub/lobe-chat/commit/8daf3ac))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.119.3](https://github.com/lobehub/lobe-chat/compare/v0.119.2...v0.119.3)
 
 <sup>Released on **2024-01-06**</sup>

package/README.md

@@ -210,12 +210,12 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 | Recent Submits                                                                                                                                                                                             | Description                                                                                                                                                                                                                                   |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Performance Evaluation Superhero](https://chat-preview.lobehub.com/market?agent=kpi-hero)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2024-01-05**</sup>                     | Specializes in writing performance evaluation reports and year-end summaries<br/>`performance-evaluation` `report-writing` `data-analysis` `professional-insights` `okr` `kpi`                                                                |
 | [SVG Flowchart Explanation Assistant](https://chat-preview.lobehub.com/market?agent=svg-flowchart-explanation-assistant)<br/><sup>By **[Justin3go](https://github.com/Justin3go)** on **2024-01-05**</sup> | Explain SVG flowcharts by inputting SVG source code and interpreting the flowchart.<br/>`flowchart-explanation` `technical-documentation-writing` `business-knowledge`                                                                        |
+| [Weekly Report Assistant](https://chat-preview.lobehub.com/market?agent=write-report-assistant-development)<br/><sup>By **[CaoYunzhou](https://github.com/CaoYunzhou)** on **2024-01-05**</sup>            | Weekly report generation assistant<br/>`weekly-report` `daily-report` `writing` `summary`                                                                                                                                                     |
 | [3D Animation Engineer](https://chat-preview.lobehub.com/market?agent=react-three-3-d-expert)<br/><sup>By **[arvinxx](https://github.com/arvinxx)** on **2024-01-03**</sup>                                | Proficient in React, Three.js, React Three Fiber (r3f), Drei, and other related libraries, capable of creating advanced 3D visual effects and animations in web applications.<br/>`3-d-animation` `react` `three-js` `web-design` `animation` |
-| [Amazon Title Assistant](https://chat-preview.lobehub.com/market?agent=amazon)<br/><sup>By **[cm2457618290](https://github.com/cm2457618290)** on **2024-01-02**</sup>                                     | Provide product keywords or product links to automatically write titles and product introductions<br/>`assistant`                                                                                                                             |
-| [Exam Assistant](https://chat-preview.lobehub.com/market?agent=generador-examenes)<br/><sup>By **[aitorroma](https://github.com/aitorroma)** on **2024-01-02**</sup>                                       | I am a skills summary assistant and cannot conduct interactive exams. However, I can help you summarize your skills and knowledge in a clear and concise format.<br/>`exam` `learning` `statistics`                                           |
 
-> 📊 Total agents: [<kbd>**89**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**91**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -186,12 +186,12 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 | 最近新增                                                                                                                                                                                  | 助手说明                                                                                                                                                       |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [绩效评估超人](https://chat-preview.lobehub.com/market?agent=kpi-hero)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2024-01-05**</sup>                        | 擅长写绩效评估报告与年终总结<br/>`绩效评估` `报告撰写` `数据分析` `专业见解` `okr` `kpi`                                                                       |
 | [SVG 流程图解释助手](https://chat-preview.lobehub.com/market?agent=svg-flowchart-explanation-assistant)<br/><sup>By **[Justin3go](https://github.com/Justin3go)** on **2024-01-05**</sup> | SVG 流程图解释，输入 SVG 源代码，解释该流程图<br/>`流程图解释` `技术文档编写` `业务知识`                                                                       |
+| [周报助手](https://chat-preview.lobehub.com/market?agent=write-report-assistant-development)<br/><sup>By **[CaoYunzhou](https://github.com/CaoYunzhou)** on **2024-01-05**</sup>          | 周报生成助手<br/>`周报` `日报` `写作` `总结`                                                                                                                   |
 | [三维动画工程师](https://chat-preview.lobehub.com/market?agent=react-three-3-d-expert)<br/><sup>By **[arvinxx](https://github.com/arvinxx)** on **2024-01-03**</sup>                      | 擅长 React、Three.js、React Three Fiber（r3f）、Drei 等库，能够在网页应用中创造高级别的三维视觉效果和动画。<br/>`3-d动画` `react` `three-js` `网页设计` `动画` |
-| [Amazon Title Assistant](https://chat-preview.lobehub.com/market?agent=amazon)<br/><sup>By **[cm2457618290](https://github.com/cm2457618290)** on **2024-01-02**</sup>                    | Provide product keywords or product links to automatically write titles and product introductions<br/>`assistant`                                              |
-| [考试助手](https://chat-preview.lobehub.com/market?agent=generador-examenes)<br/><sup>By **[aitorroma](https://github.com/aitorroma)** on **2024-01-02**</sup>                            | 我是一个技能总结助手，无法进行互动式考试。但我可以帮助你以清晰简洁的格式总结你的技能和知识。<br/>`考试` `学习` `统计`                                          |
 
-> 📊 Total agents: [<kbd>**89**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**91**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.119.3",
+  "version": "0.119.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -112,6 +112,7 @@
     "react-intersection-observer": "^9",
     "react-layout-kit": "^1",
     "react-lazy-load": "^4",
+    "react-virtuoso": "^4.6.2",
     "react-wrap-balancer": "^1",
     "remark": "^14",
     "remark-gfm": "^3",

package/src/app/chat/features/TopicListContent/Topic/SkeletonList.tsx

@@ -1,21 +1,55 @@
 import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const SkeletonList = memo(() => {
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  container: css`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    height: 44px;
+    padding: 8px;
+
+    .${prefixCls}-skeleton-content {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+
+  paragraph: css`
+    > li {
+      height: 24px !important;
+    }
+  `,
+}));
+
+export const Placeholder = memo(() => {
+  const { styles } = useStyles();
+
   return (
-    <Flexbox gap={8} paddingInline={10} style={{ marginTop: 8 }}>
-      {Array.from({ length: 8 }).map((_, i) => (
-        <Skeleton
-          active
-          avatar={false}
-          key={i}
-          paragraph={{ rows: 1, width: '100%' }}
-          title={false}
-        />
-      ))}
-    </Flexbox>
+    <Skeleton
+      active
+      avatar={false}
+      className={styles.container}
+      paragraph={{
+        className: styles.paragraph,
+        rows: 1,
+        style: { marginBottom: 0 },
+        width: '100%',
+      }}
+      title={false}
+    />
   );
 });
 
+export const SkeletonList = memo(() => (
+  <Flexbox>
+    {Array.from({ length: 8 }).map((_, i) => (
+      <Placeholder key={i} />
+    ))}
+  </Flexbox>
+));
+
 export default SkeletonList;

package/src/app/chat/features/TopicListContent/Topic/index.tsx

@@ -1,58 +1,92 @@
 import { EmptyCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import React, { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
+import { ChatTopic } from '@/types/topic';
 
-import SkeletonList from './SkeletonList';
+import { Placeholder, SkeletonList } from './SkeletonList';
 import TopicItem from './TopicItem';
 
-export const Topic = () => {
+export const Topic = memo(() => {
+  const { t } = useTranslation('chat');
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
   const { isDarkMode } = useThemeMode();
-
-  const topics = useChatStore(topicSelectors.displayTopics, isEqual);
-
-  const [topicsInit, activeTopicId] = useChatStore((s) => [s.topicsInit, s.activeTopicId]);
-
-  const { t } = useTranslation('empty');
+  const [topicsInit, activeTopicId, topicLength] = useChatStore((s) => [
+    s.topicsInit,
+    s.activeTopicId,
+    topicSelectors.currentTopicLength(s),
+  ]);
   const [visible, updateGuideState] = useGlobalStore((s) => [
     s.preference.guide?.topic,
     s.updateGuideState,
   ]);
 
+  const topics = useChatStore(
+    (s) => [
+      {
+        favorite: false,
+        id: 'default',
+        title: t('topic.defaultTitle'),
+      } as ChatTopic,
+      ...topicSelectors.displayTopics(s),
+    ],
+    isEqual,
+  );
+
+  const itemContent = useCallback(
+    (index: number, { id, favorite, title }: ChatTopic) =>
+      index === 0 ? (
+        <TopicItem active={!activeTopicId} fav={favorite} title={title} />
+      ) : (
+        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
+      ),
+    [activeTopicId],
+  );
+
+  const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
+
   return !topicsInit ? (
     <SkeletonList />
   ) : (
-    <Flexbox gap={2} style={{ marginBottom: 12 }}>
-      {topics?.length === 0 && (
-        <EmptyCard
-          alt={t('topic.desc')}
-          cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
-          desc={t('topic.desc')}
-          height={120}
-          onVisibleChange={(visible) => {
-            updateGuideState({ topic: visible });
-          }}
-          style={{ marginBottom: 6 }}
-          title={t('topic.title')}
-          visible={visible}
-          width={200}
-        />
+    <Flexbox gap={2} height={'100%'} style={{ marginBottom: 12 }}>
+      {topicLength === 0 && (
+        <Flexbox flex={1}>
+          <EmptyCard
+            alt={t('topic.guide.desc')}
+            cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
+            desc={t('topic.guide.desc')}
+            height={120}
+            onVisibleChange={(visible) => {
+              updateGuideState({ topic: visible });
+            }}
+            style={{ marginBottom: 6 }}
+            title={t('topic.guide.title')}
+            visible={visible}
+            width={200}
+          />
+        </Flexbox>
       )}
-
-      <TopicItem
-        active={!activeTopicId}
-        fav={false}
-        title={t('topic.defaultTitle', { ns: 'chat' })}
+      <Virtuoso
+        components={{ ScrollSeekPlaceholder: Placeholder }}
+        computeItemKey={(_, item) => item.id}
+        data={topics}
+        fixedItemHeight={44}
+        initialTopMostItemIndex={Math.max(activeIndex, 0)}
+        itemContent={itemContent}
+        overscan={44 * 10}
+        ref={virtuosoRef}
+        scrollSeekConfiguration={{
+          enter: (velocity) => Math.abs(velocity) > 350,
+          exit: (velocity) => Math.abs(velocity) < 10,
+        }}
       />
-
-      {topics.map(({ id, favorite, title }) => (
-        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
-      ))}
     </Flexbox>
   );
-};
+});

package/src/app/chat/features/TopicListContent/index.tsx

@@ -11,8 +11,9 @@ const TopicListContent = memo<{ mobile?: boolean }>(({ mobile }) => {
       {mobile ? <TopicSearchBar /> : <Header />}
       <Flexbox
         gap={16}
+        height={'100%'}
         paddingInline={mobile ? 0 : 8}
-        style={{ overflowY: 'auto', paddingTop: 6, position: 'relative' }}
+        style={{ paddingTop: 6, position: 'relative' }}
       >
         <Topic />
       </Flexbox>

package/src/app/settings/llm/LLM/index.tsx

@@ -75,7 +75,13 @@ const LLM = memo(() => {
         name: [configKey, 'openAI', 'endpoint'],
       },
       {
-        children: <Input allowClear placeholder={t('llm.OpenAI.customModelName.placeholder')} />,
+        children: (
+          <Input.TextArea
+            allowClear
+            placeholder={t('llm.OpenAI.customModelName.placeholder')}
+            style={{ height: 100 }}
+          />
+        ),
         desc: t('llm.OpenAI.customModelName.desc'),
         label: t('llm.OpenAI.customModelName.title'),
         name: [configKey, 'openAI', 'customModelName'],

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

@@ -0,0 +1,25 @@
+import { memo, useEffect } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import BackBottom from './BackBottom';
+
+interface AutoScrollProps {
+  atBottom: boolean;
+  onScrollToBottom: (type: 'auto' | 'click') => void;
+}
+const AutoScroll = memo<AutoScrollProps>(({ atBottom, onScrollToBottom }) => {
+  const trackVisibility = useChatStore((s) => !!s.chatLoadingId);
+  const str = useChatStore(chatSelectors.chatsMessageString);
+
+  useEffect(() => {
+    if (atBottom && trackVisibility) {
+      onScrollToBottom?.('auto');
+    }
+  }, [atBottom, trackVisibility, str]);
+
+  return <BackBottom onScrollToBottom={() => onScrollToBottom('click')} visible={!atBottom} />;
+});
+
+export default AutoScroll;

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

@@ -0,0 +1,31 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { ListEnd } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useStyles } from './style';
+
+export interface BackBottomProps {
+  onScrollToBottom: () => void;
+  visible: boolean;
+}
+
+const BackBottom = memo<BackBottomProps>(({ visible, onScrollToBottom }) => {
+  const { styles, cx } = useStyles();
+
+  const { t } = useTranslation('chat');
+
+  return (
+    <Button
+      className={cx(styles.container, visible && styles.visible)}
+      icon={<Icon icon={ListEnd} />}
+      onClick={onScrollToBottom}
+      size={'small'}
+    >
+      {t('backToBottom', { defaultValue: 'Back to bottom' })}
+    </Button>
+  );
+});
+
+export default BackBottom;

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

@@ -0,0 +1,36 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+
+export const useStyles = createStyles(({ token, css, stylish, cx, responsive }) => ({
+  container: cx(
+    stylish.blur,
+    css`
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 1000;
+      right: 16px;
+      bottom: 16px;
+      transform: translateY(16px);
+
+      padding-inline: 12px !important;
+
+      opacity: 0;
+      background: ${rgba(token.colorBgContainer, 0.5)};
+      border-color: ${token.colorFillTertiary} !important;
+      border-radius: 16px !important;
+
+      ${responsive.mobile} {
+        right: 0;
+        border-right: none;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+    `,
+  ),
+  visible: css`
+    pointer-events: all;
+    transform: translateY(0);
+    opacity: 1;
+  `,
+}));

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/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: '话题列表',
-  },
-};