@lobehub/chat 0.119.3 → 0.119.5

package/CHANGELOG.md

@@ -2,6 +2,76 @@
 
 # Changelog
 
+### [Version 0.119.5](https://github.com/lobehub/lobe-chat/compare/v0.119.4...v0.119.5)
+
+<sup>Released on **2024-01-06**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix topic i18n.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix topic i18n, closes [#961](https://github.com/lobehub/lobe-chat/issues/961) ([4e9ebe2](https://github.com/lobehub/lobe-chat/commit/4e9ebe2))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [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/locales/de-DE/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Möchtest du dieses Thema wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
     "confirmRemoveUnstarred": "Möchtest du die nicht markierten Themen wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
     "defaultTitle": "Standardthema",
+    "guide": {
+      "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"
+    },
     "openNewTopic": "Neues Thema öffnen",
     "removeAll": "Alle Themen löschen",
     "removeUnstarred": "Nicht markierte Themen löschen",

package/locales/en-US/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "You are about to delete this topic. Once deleted, it cannot be recovered. Please proceed with caution.",
     "confirmRemoveUnstarred": "You are about to delete unstarred topics. Once deleted, they cannot be recovered. Please proceed with caution.",
     "defaultTitle": "Default Topic",
+    "guide": {
+      "desc": "Click the button on the left to save the current session as a historical topic and start a new session.",
+      "title": "Topic List"
+    },
     "openNewTopic": "Open New Topic",
     "removeAll": "Remove All Topics",
     "removeUnstarred": "Remove Unstarred Topics",

package/locales/es-ES/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Estás a punto de eliminar este tema. Una vez eliminado, no se podrá recuperar. Por favor, procede con precaución.",
     "confirmRemoveUnstarred": "Estás a punto de eliminar los temas no marcados como favoritos. Una vez eliminados, no se podrán recuperar. Por favor, procede con precaución.",
     "defaultTitle": "Tema predeterminado",
+    "guide": {
+      "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"
+    },
     "openNewTopic": "Abrir nuevo tema",
     "removeAll": "Eliminar todos los temas",
     "removeUnstarred": "Eliminar temas no marcados como favoritos",

package/locales/fr-FR/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Vous êtes sur le point de supprimer ce sujet. Cette action est irréversible. Veuillez confirmer.",
     "confirmRemoveUnstarred": "Vous êtes sur le point de supprimer les sujets non favoris. Cette action est irréversible. Veuillez confirmer.",
     "defaultTitle": "Sujet par défaut",
+    "guide": {
+      "desc": "Cliquez sur le bouton à gauche pour enregistrer la conversation actuelle comme un sujet historique et démarrer une nouvelle session.",
+      "title": "Liste des sujets"
+    },
     "openNewTopic": "Ouvrir un nouveau sujet",
     "removeAll": "Supprimer tous les sujets",
     "removeUnstarred": "Supprimer les sujets non favoris",

package/locales/it-IT/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Stai per rimuovere questo argomento, l'operazione non potrà essere annullata. Procedere con cautela.",
     "confirmRemoveUnstarred": "Stai per rimuovere gli argomenti non contrassegnati, questa operazione non potrà essere annullata. Procedere con cautela.",
     "defaultTitle": "Argomento predefinito",
+    "guide": {
+      "desc": "Fare clic sul pulsante a sinistra per salvare l'attuale sessione come argomento storico e avviare una nuova sessione",
+      "title": "Elenco argomenti"
+    },
     "openNewTopic": "Apri nuovo argomento",
     "removeAll": "Rimuovi tutti gli argomenti",
     "removeUnstarred": "Rimuovi argomenti non contrassegnati",

package/locales/ja-JP/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "このトピックを削除します。削除した後は元に戻すことはできません。注意して操作してください。",
     "confirmRemoveUnstarred": "スターをつけていないトピックを削除します。削除した後は元に戻すことはできません。注意して操作してください。",
     "defaultTitle": "デフォルトトピック",
+    "guide": {
+      "desc": "左側のボタンをクリックして、現在の会話を保存し、新しい会話を開始できます",
+      "title": "トピックリスト"
+    },
     "openNewTopic": "新しいトピックを開く",
     "removeAll": "すべてのトピックを削除",
     "removeUnstarred": "スターをつけていないトピックを削除",

package/locales/ko-KR/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "이 주제를 삭제하시면 되돌릴 수 없습니다. 신중하게 작업하시겠습니까?",
     "confirmRemoveUnstarred": "별표가 없는 주제를 삭제하시면 되돌릴 수 없습니다. 신중하게 작업하시겠습니까?",
     "defaultTitle": "기본 주제",
+    "guide": {
+      "desc": "현재 대화를 히스토리 토픽으로 저장하고 새 대화를 시작하려면 왼쪽 버튼을 클릭하세요.",
+      "title": "토픽 목록"
+    },
     "openNewTopic": "새 주제 열기",
     "removeAll": "모든 주제 삭제",
     "removeUnstarred": "별표가 없는 주제 삭제",

package/locales/nl-NL/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Dit onderwerp wordt verwijderd en kan niet worden hersteld. Wees voorzichtig.",
     "confirmRemoveUnstarred": "Niet-gefavoriseerde onderwerpen worden verwijderd en kunnen niet worden hersteld. Wees voorzichtig.",
     "defaultTitle": "Standaard onderwerp",
+    "guide": {
+      "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"
+    },
     "openNewTopic": "Nieuw onderwerp openen",
     "removeAll": "Alle onderwerpen verwijderen",
     "removeUnstarred": "Niet-gefavoriseerde onderwerpen verwijderen",

package/locales/pl-PL/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Czy na pewno chcesz usunąć ten temat? Tej operacji nie można cofnąć. Proszę potwierdź swoją decyzję.",
     "confirmRemoveUnstarred": "Czy na pewno chcesz usunąć nieoznaczone tematy? Tej operacji nie można cofnąć. Proszę potwierdź swoją decyzję.",
     "defaultTitle": "Domyślne tematy",
+    "guide": {
+      "desc": "Kliknij przycisk po lewej stronie, aby zapisać bieżącą rozmowę jako historię tematu i rozpocząć nową rundę rozmowy",
+      "title": "Lista tematów"
+    },
     "openNewTopic": "Otwórz nowy temat",
     "removeAll": "Usuń wszystkie tematy",
     "removeUnstarred": "Usuń nieoznaczone tematy",

package/locales/pt-BR/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Você está prestes a remover este tópico. Depois de remover, não será possível recuperá-lo. Por favor, confirme sua ação.",
     "confirmRemoveUnstarred": "Você está prestes a remover os tópicos não favoritados. Depois de remover, não será possível recuperá-los. Por favor, confirme sua ação.",
     "defaultTitle": "Tópico Padrão",
+    "guide": {
+      "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"
+    },
     "openNewTopic": "Abrir Novo Tópico",
     "removeAll": "Remover Todos os Tópicos",
     "removeUnstarred": "Remover Tópicos Não Favoritados",

package/locales/ru-RU/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Вы уверены, что хотите удалить эту тему? После этого ее нельзя будет восстановить.",
     "confirmRemoveUnstarred": "Вы уверены, что хотите удалить неотмеченные темы? После этого их нельзя будет восстановить.",
     "defaultTitle": "Стандартная тема",
+    "guide": {
+      "desc": "Нажмите на кнопку слева, чтобы сохранить текущий разговор в качестве исторической темы и начать новый разговор",
+      "title": "Список тем"
+    },
     "openNewTopic": "Создать новую тему",
     "removeAll": "Удалить все темы",
     "removeUnstarred": "Удалить неотмеченные темы",

package/locales/tr-TR/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Bu konuyu silmek üzeresiniz. Bir kere silindiğinde, geri alınamaz. Lütfen dikkatli bir şekilde devam edin.",
     "confirmRemoveUnstarred": "Yıldızlanmamış konuları silmek üzeresiniz. Bir kere silindiğinde, geri alınamazlar. Lütfen dikkatli bir şekilde devam edin.",
     "defaultTitle": "Konu",
+    "guide": {
+      "desc": "Mevcut oturumu geçmiş konu olarak kaydetmek ve yeni bir oturum başlatmak için sol taraftaki düğmeye tıklayın",
+      "title": "Konu Listesi"
+    },
     "openNewTopic": "Yeni Konu",
     "removeAll": "Tüm Konuları Sil",
     "removeUnstarred": "Tüm Yıldızlanmamış Konuları Sil",

package/locales/vi-VN/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "Bạn sắp xóa chủ đề này. Hành động này không thể hoàn tác, vui lòng xác nhận.",
     "confirmRemoveUnstarred": "Bạn sắp xóa các chủ đề chưa được đánh dấu. Hành động này không thể hoàn tác, vui lòng xác nhận.",
     "defaultTitle": "Chủ đề mặc định",
+    "guide": {
+      "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ủ đề"
+    },
     "openNewTopic": "Mở chủ đề mới",
     "removeAll": "Xóa tất cả chủ đề",
     "removeUnstarred": "Xóa chủ đề chưa được đánh dấu",

package/locales/zh-CN/chat.json

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

package/locales/zh-TW/chat.json

@@ -62,6 +62,10 @@
     "confirmRemoveTopic": "即將刪除該話題，刪除後將不可恢復，請謹慎操作。",
     "confirmRemoveUnstarred": "即將刪除未收藏話題，刪除後將不可恢復，請謹慎操作。",
     "defaultTitle": "默認話題",
+    "guide": {
+      "desc": "點擊發送左側按鈕可將當前對話保存為歷史話題，並開啟新一輪對話",
+      "title": "話題列表"
+    },
     "openNewTopic": "開啟新話題",
     "removeAll": "刪除全部話題",
     "removeUnstarred": "刪除未收藏話題",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.119.3",
+  "version": "0.119.5",
   "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;
+  `,
+}));