@lobehub/chat 1.26.21 → 1.27.0

package/locales/ru-RU/topic.json

@@ -0,0 +1,37 @@
+{
+  "actions": {
+    "autoRename": "Умное переименование",
+    "confirmRemoveAll": "Вы собираетесь удалить все темы. После удаления их нельзя будет восстановить, пожалуйста, будьте осторожны.",
+    "confirmRemoveTopic": "Вы собираетесь удалить эту тему. После удаления её нельзя будет восстановить, пожалуйста, будьте осторожны.",
+    "confirmRemoveUnstarred": "Вы собираетесь удалить неотмеченные темы. После удаления их нельзя будет восстановить, пожалуйста, будьте осторожны.",
+    "duplicate": "Создать копию",
+    "export": "Экспортировать тему",
+    "removeAll": "Удалить все темы",
+    "removeUnstarred": "Удалить неотмеченные темы"
+  },
+  "defaultTitle": "Тема по умолчанию",
+  "duplicateLoading": "Копирование темы...",
+  "duplicateSuccess": "Тема успешно скопирована",
+  "favorite": "Избранное",
+  "groupMode": {
+    "ascMessages": "По возрастанию общего числа сообщений",
+    "byTime": "Группировка по времени",
+    "descMessages": "По убыванию общего числа сообщений",
+    "flat": "Без группировки"
+  },
+  "groupTitle": {
+    "byTime": {
+      "month": "Этот месяц",
+      "today": "Сегодня",
+      "week": "Эта неделя",
+      "yesterday": "Вчера"
+    }
+  },
+  "guide": {
+    "desc": "Нажмите кнопку слева от отправки, чтобы сохранить текущий разговор как историческую тему и начать новый разговор.",
+    "title": "Список тем"
+  },
+  "searchPlaceholder": "Поиск тем...",
+  "temp": "Временный",
+  "title": "Тема"
+}

package/locales/tr-TR/chat.json

@@ -115,7 +115,6 @@
     "loading": "Tanımlanıyor...",
     "prettifying": "İyileştiriliyor..."
   },
-  "temp": "Geçici",
   "tokenDetails": {
     "chats": "Sohbetler",
     "rest": "Kalan",
@@ -131,29 +130,10 @@
     "used": "Kullanılan"
   },
   "topic": {
-    "actions": {
-      "autoRename": "Akıllı Yeniden Adlandırma",
-      "duplicate": "Kopya Oluştur",
-      "export": "Konuyu Dışa Aktar"
-    },
     "checkOpenNewTopic": "Yeni bir konu açılsın mı?",
     "checkSaveCurrentMessages": "Mevcut sohbeti konu olarak kaydetmek istiyor musunuz?",
-    "confirmRemoveAll": "Tüm konuları silmek üzeresiniz. Bir kere silindiğinde, geri alınamazlar. Lütfen dikkatli bir şekilde devam edin.",
-    "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",
-    "duplicateLoading": "Konu kopyalanıyor...",
-    "duplicateSuccess": "Konu başarıyla kopyalandı",
-    "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",
-    "saveCurrentMessages": "Mevcut oturumu konu olarak kaydet",
-    "searchPlaceholder": "Konuları ara...",
-    "title": "Konular"
+    "saveCurrentMessages": "Mevcut oturumu konu olarak kaydet"
   },
   "translate": {
     "action": "Çeviri",

package/locales/tr-TR/error.json

@@ -12,7 +12,10 @@
     "retry": "Yeniden Yükle",
     "title": "Sayfa bir sorunla karşılaştı.."
   },
-  "fetchError": "İstek başarısız oldu",
+  "fetchError": {
+    "detail": "Hata Detayı",
+    "title": "İstek Başarısız"
+  },
   "loginRequired": {
     "desc": "Otomatik olarak giriş sayfasına yönlendirileceksiniz",
     "title": "Lütfen bu özelliği kullanmadan önce giriş yapın"

package/locales/tr-TR/topic.json

@@ -0,0 +1,37 @@
+{
+  "actions": {
+    "autoRename": "Akıllı Yeniden Adlandırma",
+    "confirmRemoveAll": "Tüm konular silinecek, silindikten sonra geri alınamaz, lütfen dikkatli olun.",
+    "confirmRemoveTopic": "Bu konu silinecek, silindikten sonra geri alınamaz, lütfen dikkatli olun.",
+    "confirmRemoveUnstarred": "Favori olmayan konular silinecek, silindikten sonra geri alınamaz, lütfen dikkatli olun.",
+    "duplicate": "Kopya Oluştur",
+    "export": "Konuları Dışa Aktar",
+    "removeAll": "Tüm Konuları Sil",
+    "removeUnstarred": "Favori Olmayan Konuları Sil"
+  },
+  "defaultTitle": "Varsayılan Konu",
+  "duplicateLoading": "Konu Kopyalanıyor...",
+  "duplicateSuccess": "Konu Başarıyla Kopyalandı",
+  "favorite": "Favori",
+  "groupMode": {
+    "ascMessages": "Mesaj Sayısına Göre Artan Sıra",
+    "byTime": "Zamana Göre Grupla",
+    "descMessages": "Mesaj Sayısına Göre Azalan Sıra",
+    "flat": "Gruplandırma Yok"
+  },
+  "groupTitle": {
+    "byTime": {
+      "month": "Bu Ay",
+      "today": "Bugün",
+      "week": "Bu Hafta",
+      "yesterday": "Dün"
+    }
+  },
+  "guide": {
+    "desc": "Mevcut sohbeti tarihsel konu olarak kaydetmek ve yeni bir sohbet başlatmak için sol taraftaki gönder butonuna tıklayın.",
+    "title": "Konu Listesi"
+  },
+  "searchPlaceholder": "Konuları Ara...",
+  "temp": "Geçici",
+  "title": "Konu"
+}

package/locales/vi-VN/chat.json

@@ -115,7 +115,6 @@
     "loading": "Đang nhận dạng...",
     "prettifying": "Đang tinh chỉnh..."
   },
-  "temp": "Tạm thời",
   "tokenDetails": {
     "chats": "Tin nhắn trò chuyện",
     "rest": "Còn lại",
@@ -131,29 +130,10 @@
     "used": "Đã sử dụng"
   },
   "topic": {
-    "actions": {
-      "autoRename": "Đổi tên tự động",
-      "duplicate": "Tạo bản sao",
-      "export": "Xuất chủ đề"
-    },
     "checkOpenNewTopic": "Có muốn mở chủ đề mới không?",
     "checkSaveCurrentMessages": "Bạn có muốn lưu cuộc trò chuyện hiện tại thành chủ đề không?",
-    "confirmRemoveAll": "Bạn sắp xóa tất cả chủ đề. Hành động này không thể hoàn tác, vui lòng xác nhận.",
-    "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",
-    "duplicateLoading": "Đang sao chép chủ đề...",
-    "duplicateSuccess": "Chủ đề đã được sao chép thành công",
-    "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",
-    "saveCurrentMessages": "Lưu cuộc trò chuyện hiện tại thành chủ đề",
-    "searchPlaceholder": "Tìm kiếm chủ đề...",
-    "title": "Danh sách chủ đề"
+    "saveCurrentMessages": "Lưu cuộc trò chuyện hiện tại thành chủ đề"
   },
   "translate": {
     "action": "Dịch",

package/locales/vi-VN/error.json

@@ -12,7 +12,10 @@
     "retry": "Thử lại",
     "title": "Trang gặp một chút vấn đề.."
   },
-  "fetchError": "Yêu cầu thất bại",
+  "fetchError": {
+    "detail": "Chi tiết lỗi",
+    "title": "Yêu cầu thất bại"
+  },
   "loginRequired": {
     "desc": "Sẽ tự động chuyển hướng đến trang đăng nhập",
     "title": "Vui lòng đăng nhập để sử dụng tính năng này"

package/locales/vi-VN/topic.json

@@ -0,0 +1,37 @@
+{
+  "actions": {
+    "autoRename": "Đặt tên tự động",
+    "confirmRemoveAll": "Sắp xóa tất cả các chủ đề, sau khi xóa sẽ không thể khôi phục, xin hãy cẩn thận.",
+    "confirmRemoveTopic": "Sắp xóa chủ đề này, sau khi xóa sẽ không thể khôi phục, xin hãy cẩn thận.",
+    "confirmRemoveUnstarred": "Sắp xóa các chủ đề chưa được đánh dấu, sau khi xóa sẽ không thể khôi phục, xin hãy cẩn thận.",
+    "duplicate": "Tạo bản sao",
+    "export": "Xuất chủ đề",
+    "removeAll": "Xóa tất cả các chủ đề",
+    "removeUnstarred": "Xóa các chủ đề chưa được đánh dấu"
+  },
+  "defaultTitle": "Chủ đề mặc định",
+  "duplicateLoading": "Đang sao chép chủ đề...",
+  "duplicateSuccess": "Sao chép chủ đề thành công",
+  "favorite": "Yêu thích",
+  "groupMode": {
+    "ascMessages": "Theo thứ tự tổng số tin nhắn",
+    "byTime": "Theo thời gian",
+    "descMessages": "Theo thứ tự tổng số tin nhắn giảm dần",
+    "flat": "Không phân nhóm"
+  },
+  "groupTitle": {
+    "byTime": {
+      "month": "Tháng này",
+      "today": "Hôm nay",
+      "week": "Tuần này",
+      "yesterday": "Hôm qua"
+    }
+  },
+  "guide": {
+    "desc": "Nhấn nút bên trái để lưu cuộc trò chuyện hiện tại thành chủ đề lịch sử và bắt đầu một cuộc trò chuyện mới.",
+    "title": "Danh sách chủ đề"
+  },
+  "searchPlaceholder": "Tìm kiếm chủ đề...",
+  "temp": "Tạm thời",
+  "title": "Chủ đề"
+}

package/locales/zh-CN/chat.json

@@ -115,7 +115,6 @@
     "loading": "识别中...",
     "prettifying": "润色中..."
   },
-  "temp": "临时",
   "tokenDetails": {
     "chats": "会话消息",
     "rest": "剩余可用",
@@ -131,29 +130,10 @@
     "used": "使用"
   },
   "topic": {
-    "actions": {
-      "autoRename": "智能重命名",
-      "duplicate": "创建副本",
-      "export": "导出话题"
-    },
     "checkOpenNewTopic": "是否开启新话题?",
     "checkSaveCurrentMessages": "是否保存当前会话为话题?",
-    "confirmRemoveAll": "即将删除全部话题，删除后将不可恢复，请谨慎操作。",
-    "confirmRemoveTopic": "即将删除该话题，删除后将不可恢复，请谨慎操作。",
-    "confirmRemoveUnstarred": "即将删除未收藏话题，删除后将不可恢复，请谨慎操作。",
-    "defaultTitle": "默认话题",
-    "duplicateLoading": "话题复制中...",
-    "duplicateSuccess": "话题复制成功",
-    "guide": {
-      "desc": "点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话",
-      "title": "话题列表"
-    },
     "openNewTopic": "开启新话题",
-    "removeAll": "删除全部话题",
-    "removeUnstarred": "删除未收藏话题",
-    "saveCurrentMessages": "将当前会话保存为话题",
-    "searchPlaceholder": "搜索话题...",
-    "title": "话题"
+    "saveCurrentMessages": "将当前会话保存为话题"
   },
   "translate": {
     "action": "翻译",

package/locales/zh-CN/topic.json

@@ -0,0 +1,37 @@
+{
+  "actions": {
+    "autoRename": "智能重命名",
+    "confirmRemoveAll": "即将删除全部话题，删除后将不可恢复，请谨慎操作。",
+    "confirmRemoveTopic": "即将删除该话题，删除后将不可恢复，请谨慎操作。",
+    "confirmRemoveUnstarred": "即将删除未收藏话题，删除后将不可恢复，请谨慎操作。",
+    "duplicate": "创建副本",
+    "export": "导出话题",
+    "removeAll": "删除全部话题",
+    "removeUnstarred": "删除未收藏话题"
+  },
+  "defaultTitle": "默认话题",
+  "duplicateLoading": "话题复制中...",
+  "duplicateSuccess": "话题复制成功",
+  "favorite": "收藏",
+  "groupMode": {
+    "ascMessages": "按消息总数顺序",
+    "byTime": "按时间分组",
+    "descMessages": "按消息总数倒序",
+    "flat": "不分组"
+  },
+  "groupTitle": {
+    "byTime": {
+      "month": "本月",
+      "today": "今天",
+      "week": "本周",
+      "yesterday": "昨天"
+    }
+  },
+  "guide": {
+    "desc": "点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话",
+    "title": "话题列表"
+  },
+  "searchPlaceholder": "搜索话题...",
+  "temp": "临时",
+  "title": "话题"
+}

package/locales/zh-TW/chat.json

@@ -115,7 +115,6 @@
     "loading": "識別中...",
     "prettifying": "潤色中..."
   },
-  "temp": "臨時",
   "tokenDetails": {
     "chats": "聊天訊息",
     "rest": "剩餘可用",
@@ -131,29 +130,10 @@
     "used": "使用"
   },
   "topic": {
-    "actions": {
-      "autoRename": "智能重新命名",
-      "duplicate": "建立副本",
-      "export": "匯出主題"
-    },
     "checkOpenNewTopic": "是否開啟新主題?",
     "checkSaveCurrentMessages": "是否將當前對話保存為話題？",
-    "confirmRemoveAll": "即將刪除全部話題，刪除後將不可恢復，請謹慎操作。",
-    "confirmRemoveTopic": "即將刪除該話題，刪除後將不可恢復，請謹慎操作。",
-    "confirmRemoveUnstarred": "即將刪除未收藏話題，刪除後將不可恢復，請謹慎操作。",
-    "defaultTitle": "默認話題",
-    "duplicateLoading": "話題複製中...",
-    "duplicateSuccess": "話題複製成功",
-    "guide": {
-      "desc": "點擊發送左側按鈕可將當前對話保存為歷史話題，並開啟新一輪對話",
-      "title": "話題列表"
-    },
     "openNewTopic": "開啟新話題",
-    "removeAll": "刪除全部話題",
-    "removeUnstarred": "刪除未收藏話題",
-    "saveCurrentMessages": "將當前對話保存為話題",
-    "searchPlaceholder": "搜索話題...",
-    "title": "話題列表"
+    "saveCurrentMessages": "將當前對話保存為話題"
   },
   "translate": {
     "action": "翻譯",

package/locales/zh-TW/error.json

@@ -12,7 +12,10 @@
     "retry": "重新加載",
     "title": "頁面遇到一點問題.."
   },
-  "fetchError": "請求失敗",
+  "fetchError": {
+    "detail": "錯誤詳情",
+    "title": "請求失敗"
+  },
   "loginRequired": {
     "desc": "即將自動跳轉到登入頁面",
     "title": "請登入後使用該功能"

package/locales/zh-TW/topic.json

@@ -0,0 +1,37 @@
+{
+  "actions": {
+    "autoRename": "智能重命名",
+    "confirmRemoveAll": "即將刪除全部話題，刪除後將不可恢復，請謹慎操作。",
+    "confirmRemoveTopic": "即將刪除該話題，刪除後將不可恢復，請謹慎操作。",
+    "confirmRemoveUnstarred": "即將刪除未收藏話題，刪除後將不可恢復，請謹慎操作。",
+    "duplicate": "創建副本",
+    "export": "匯出話題",
+    "removeAll": "刪除全部話題",
+    "removeUnstarred": "刪除未收藏話題"
+  },
+  "defaultTitle": "預設話題",
+  "duplicateLoading": "話題複製中...",
+  "duplicateSuccess": "話題複製成功",
+  "favorite": "收藏",
+  "groupMode": {
+    "ascMessages": "按消息總數順序",
+    "byTime": "按時間分組",
+    "descMessages": "按消息總數倒序",
+    "flat": "不分組"
+  },
+  "groupTitle": {
+    "byTime": {
+      "month": "本月",
+      "today": "今天",
+      "week": "本週",
+      "yesterday": "昨天"
+    }
+  },
+  "guide": {
+    "desc": "點擊發送左側按鈕可將當前會話保存為歷史話題，並開啟新一輪會話",
+    "title": "話題列表"
+  },
+  "searchPlaceholder": "搜尋話題...",
+  "temp": "臨時",
+  "title": "話題"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.26.21",
+  "version": "1.27.0",
   "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",

package/src/app/(main)/@nav/_layout/Desktop/TopActions.tsx

@@ -10,10 +10,11 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 import { useSessionStore } from '@/store/session';
 
 export interface TopActionProps {
+  isPinned?: boolean | null;
   tab?: SidebarTabKey;
 }
 
-const TopActions = memo<TopActionProps>(({ tab }) => {
+const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
   const { t } = useTranslation('common');
   const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
   const { showMarket, enableKnowledgeBase } = useServerConfigStore(featureFlagsSelectors);
@@ -29,7 +30,7 @@ const TopActions = memo<TopActionProps>(({ tab }) => {
         }}
       >
         <ActionIcon
-          active={tab === SidebarTabKey.Chat}
+          active={tab === SidebarTabKey.Chat && !isPinned}
           icon={MessageSquare}
           placement={'right'}
           size="large"

package/src/app/(main)/@nav/_layout/Desktop/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { SideNav } from '@lobehub/ui';
+import { parseAsBoolean, useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
@@ -17,6 +18,8 @@ const Nav = memo(() => {
   const sidebarKey = useActiveTabKey();
   const inZenMode = useGlobalStore(systemStatusSelectors.inZenMode);
   const { showPinList } = useServerConfigStore(featureFlagsSelectors);
+  const [isPinned] = useQueryState('pinned', parseAsBoolean);
+
   return (
     !inZenMode && (
       <SideNav
@@ -25,7 +28,7 @@ const Nav = memo(() => {
         style={{ height: '100%', zIndex: 100 }}
         topActions={
           <>
-            <TopActions tab={sidebarKey} />
+            <TopActions isPinned={isPinned} tab={sidebarKey} />
             {showPinList && <PinList />}
           </>
         }

package/src/app/(main)/chat/(workspace)/@topic/features/Header.tsx

@@ -2,7 +2,8 @@
 
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Dropdown, MenuProps } from 'antd';
-import { MoreHorizontal, Search, Trash } from 'lucide-react';
+import type { ItemType } from 'antd/es/menu/interface';
+import { LucideCheck, MoreHorizontal, Search, Trash } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -10,32 +11,49 @@ import { Flexbox } from 'react-layout-kit';
 import SidebarHeader from '@/components/SidebarHeader';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors } from '@/store/user/selectors';
+import { TopicDisplayMode } from '@/types/topic';
 
 import TopicSearchBar from './TopicSearchBar';
 
 const Header = memo(() => {
-  const { t } = useTranslation('chat');
+  const { t } = useTranslation('topic');
   const [topicLength, removeUnstarredTopic, removeAllTopic] = useChatStore((s) => [
     topicSelectors.currentTopicLength(s),
     s.removeUnstarredTopic,
     s.removeSessionTopics,
   ]);
-
+  const [topicDisplayMode, updatePreference] = useUserStore((s) => [
+    preferenceSelectors.topicDisplayMode(s),
+    s.updatePreference,
+  ]);
   const [showSearch, setShowSearch] = useState(false);
   const { modal } = App.useApp();
 
   const items = useMemo<MenuProps['items']>(
     () => [
+      ...(Object.values(TopicDisplayMode).map((mode) => ({
+        icon: topicDisplayMode === mode ? <Icon icon={LucideCheck} /> : <div />,
+        key: mode,
+        label: t(`groupMode.${mode}`),
+        onClick: () => {
+          updatePreference({ topicDisplayMode: mode });
+        },
+      })) as ItemType[]),
+      {
+        type: 'divider',
+      },
       {
         icon: <Icon icon={Trash} />,
         key: 'deleteUnstarred',
-        label: t('topic.removeUnstarred'),
+        label: t('actions.removeUnstarred'),
         onClick: () => {
           modal.confirm({
             centered: true,
             okButtonProps: { danger: true },
             onOk: removeUnstarredTopic,
-            title: t('topic.confirmRemoveUnstarred', { ns: 'chat' }),
+            title: t('actions.confirmRemoveUnstarred'),
           });
         },
       },
@@ -43,18 +61,18 @@ const Header = memo(() => {
         danger: true,
         icon: <Icon icon={Trash} />,
         key: 'deleteAll',
-        label: t('topic.removeAll'),
+        label: t('actions.removeAll'),
         onClick: () => {
           modal.confirm({
             centered: true,
             okButtonProps: { danger: true },
             onOk: removeAllTopic,
-            title: t('topic.confirmRemoveAll', { ns: 'chat' }),
+            title: t('actions.confirmRemoveAll'),
           });
         },
       },
     ],
-    [],
+    [topicDisplayMode],
   );
 
   return showSearch ? (
@@ -80,7 +98,7 @@ const Header = memo(() => {
           </Dropdown>
         </>
       }
-      title={`${t('topic.title')} ${topicLength > 1 ? topicLength + 1 : ''}`}
+      title={`${t('title')} ${topicLength > 1 ? topicLength + 1 : ''}`}
     />
   );
 });

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ByTimeMode/GroupItem.tsx

@@ -0,0 +1,30 @@
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { GroupedTopic } from '@/types/topic';
+
+const preformat = (id: string) =>
+  id.startsWith('20') ? (id.includes('-') ? dayjs(id).format('MMMM') : id) : undefined;
+
+const useStyles = createStyles(({ css, token, stylish }) => ({
+  container: css`
+    color: ${token.colorTextQuaternary};
+    ${stylish.blur}
+  `,
+}));
+
+const TopicGroupItem = memo<Omit<GroupedTopic, 'children'>>(({ id, title }) => {
+  const { t } = useTranslation('topic');
+  const { styles } = useStyles();
+  const timeTitle = preformat(id) ?? t(`groupTitle.byTime.${id}` as any);
+
+  return (
+    <Flexbox className={styles.container} paddingBlock={8} paddingInline={12}>
+      {title ? title : timeTitle}
+    </Flexbox>
+  );
+});
+export default TopicGroupItem;

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/ByTimeMode/index.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import isEqual from 'fast-deep-equal';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GroupedVirtuoso, VirtuosoHandle } from 'react-virtuoso';
+
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
+import { ChatTopic } from '@/types/topic';
+
+import TopicItem from '../TopicItem';
+import TopicGroupItem from './GroupItem';
+
+const ByTimeMode = memo(() => {
+  const { t } = useTranslation('topic');
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const [activeTopicId] = useChatStore((s) => [s.activeTopicId]);
+  const groupTopics = useChatStore(topicSelectors.groupedTopicsSelector, isEqual);
+
+  const { groups, groupCounts, topics } = useMemo(() => {
+    return {
+      groupCounts: [1, ...groupTopics.map((group) => group.children.length)],
+      groups: [
+        { id: 'default' },
+        ...groupTopics.map((group) => ({ id: group.id, title: group.title })),
+      ],
+      topics: [
+        { favorite: false, id: 'default', title: t('defaultTitle') } as ChatTopic,
+        ...groupTopics.flatMap((group) => group.children),
+      ],
+    };
+  }, [groupTopics]);
+
+  const itemContent = useCallback(
+    (index: number) => {
+      const { id, favorite, title } = topics[index];
+
+      return index === 0 ? (
+        <TopicItem active={!activeTopicId} fav={favorite} title={title} />
+      ) : (
+        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
+      );
+    },
+    [activeTopicId, topics],
+  );
+
+  const groupContent = useCallback(
+    (index: number) => {
+      if (index === 0) return undefined;
+
+      const topicGroup = groups[index];
+      return <TopicGroupItem {...topicGroup} />;
+    },
+    [groups],
+  );
+
+  // const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
+
+  return (
+    <GroupedVirtuoso
+      groupContent={groupContent}
+      groupCounts={groupCounts}
+      itemContent={itemContent}
+      ref={virtuosoRef}
+    />
+  );
+});
+
+ByTimeMode.displayName = 'ByTimeMode';
+
+export default ByTimeMode;

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/DefaultContent.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 const { Paragraph } = Typography;
 
 const DefaultContent = memo(() => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('topic');
 
   const theme = useTheme();
 
@@ -19,7 +19,7 @@ const DefaultContent = memo(() => {
         <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
       </Flexbox>
       <Paragraph ellipsis={{ rows: 1 }} style={{ margin: 0 }}>
-        {t('topic.defaultTitle', { ns: 'chat' })}
+        {t('defaultTitle')}
       </Paragraph>
       <Tag>{t('temp')}</Tag>
     </Flexbox>