@lobehub/chat 1.26.21 → 1.27.1

package/src/store/chat/slices/topic/selectors.test.ts

@@ -1,10 +1,16 @@
+import { t } from 'i18next';
 import { describe, expect, it } from 'vitest';
 
 import { ChatStore } from '@/store/chat';
 import { initialState } from '@/store/chat/initialState';
 import { merge } from '@/utils/merge';
 
-import { topicSelectors } from '../../selectors';
+import { topicSelectors } from './selectors';
+
+// Mock i18next
+vi.mock('i18next', () => ({
+  t: vi.fn().mockImplementation((key) => key),
+}));
 
 const initialStore = initialState as ChatStore;
 
@@ -92,4 +98,75 @@ describe('topicSelectors', () => {
       expect(topic).toEqual(topicMaps.test[0]);
     });
   });
+
+  describe('groupedTopicsSelector', () => {
+    it('should return empty array if there are no topics', () => {
+      const state = merge(initialStore, { activeId: 'test' });
+      const grouped = topicSelectors.groupedTopicsSelector(state);
+      expect(grouped).toEqual([]);
+    });
+
+    it('should return grouped topics by time when no favorites exist', () => {
+      const topics = [
+        { id: 'topic1', name: 'Topic 1', favorite: false, createAt: '2023-01-01' },
+        { id: 'topic2', name: 'Topic 2', favorite: false, createAt: '2023-01-01' },
+      ];
+
+      const state = merge(initialStore, {
+        topicMaps: { test: topics },
+        activeId: 'test',
+      });
+
+      const grouped = topicSelectors.groupedTopicsSelector(state);
+      expect(grouped).toHaveLength(1); // One time-based group
+      expect(grouped[0].children).toEqual(topics);
+    });
+
+    it('should separate favorite and unfavorite topics into different groups', () => {
+      const topics = [
+        { id: 'topic1', name: 'Topic 1', favorite: true, createAt: '2023-01-01' },
+        { id: 'topic2', name: 'Topic 2', favorite: false, createAt: '2023-01-01' },
+        { id: 'topic3', name: 'Topic 3', favorite: true, createAt: '2023-01-01' },
+      ];
+
+      const state = merge(initialStore, {
+        topicMaps: { test: topics },
+        activeId: 'test',
+      });
+
+      const grouped = topicSelectors.groupedTopicsSelector(state);
+
+      expect(grouped).toHaveLength(2); // Favorite group + one time-based group
+
+      // Check favorite group
+      expect(grouped[0]).toEqual({
+        id: 'favorite',
+        title: 'favorite', // This matches the mocked t function return
+        children: topics.filter((t) => t.favorite),
+      });
+
+      // Check unfavorite group
+      expect(grouped[1].children).toEqual(topics.filter((t) => !t.favorite));
+    });
+
+    it('should only create time-based groups when there are no favorites', () => {
+      const topics = [
+        { id: 'topic1', name: 'Topic 1', favorite: false, createAt: '2023-01-01' },
+        { id: 'topic2', name: 'Topic 2', favorite: false, createAt: '2023-02-01' },
+      ];
+
+      const state = merge(initialStore, {
+        topicMaps: { test: topics },
+        activeId: 'test',
+      });
+
+      const grouped = topicSelectors.groupedTopicsSelector(state);
+
+      // Should not have a favorites group
+      expect(grouped.find((g) => g.id === 'favorite')).toBeUndefined();
+
+      // Should have time-based groups
+      expect(grouped.every((g) => g.id !== 'favorite')).toBeTruthy();
+    });
+  });
 });

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

@@ -1,4 +1,7 @@
-import { ChatTopic } from '@/types/topic';
+import { t } from 'i18next';
+
+import { ChatTopic, GroupedTopic } from '@/types/topic';
+import { groupTopicsByTime } from '@/utils/client/topic';
 
 import { ChatStore } from '../../store';
 
@@ -12,6 +15,9 @@ const searchTopics = (s: ChatStore): ChatTopic[] => s.searchTopics;
 const displayTopics = (s: ChatStore): ChatTopic[] | undefined =>
   s.isSearchingTopic ? searchTopics(s) : currentTopics(s);
 
+const currentFavTopics = (s: ChatStore): ChatTopic[] =>
+  currentTopics(s)?.filter((s) => s.favorite) || [];
+
 const currentUnFavTopics = (s: ChatStore): ChatTopic[] =>
   currentTopics(s)?.filter((s) => !s.favorite) || [];
 
@@ -21,8 +27,28 @@ const getTopicById =
   (id: string) =>
   (s: ChatStore): ChatTopic | undefined =>
     currentTopics(s)?.find((topic) => topic.id === id);
+
 const isCreatingTopic = (s: ChatStore) => s.creatingTopic;
 
+const groupedTopicsSelector = (s: ChatStore): GroupedTopic[] => {
+  const topics = currentTopics(s);
+
+  if (!topics) return [];
+  const favTopics = currentFavTopics(s);
+  const unfavTopics = currentUnFavTopics(s);
+
+  return favTopics.length > 0
+    ? [
+        {
+          children: favTopics,
+          id: 'favorite',
+          title: t('favorite', { ns: 'topic' }),
+        },
+        ...groupTopicsByTime(unfavTopics),
+      ]
+    : groupTopicsByTime(topics);
+};
+
 export const topicSelectors = {
   currentActiveTopic,
   currentTopicLength,
@@ -30,6 +56,7 @@ export const topicSelectors = {
   currentUnFavTopics,
   displayTopics,
   getTopicById,
+  groupedTopicsSelector,
   isCreatingTopic,
   searchTopics,
 };

package/src/store/user/slices/preference/selectors.ts

@@ -1,6 +1,9 @@
+import { DEFAULT_PREFERENCE } from '@/const/user';
 import { UserStore } from '@/store/user';
 
 const useCmdEnterToSend = (s: UserStore): boolean => s.preference.useCmdEnterToSend || false;
+const topicDisplayMode = (s: UserStore) =>
+  s.preference.topicDisplayMode || DEFAULT_PREFERENCE.topicDisplayMode;
 
 const userAllowTrace = (s: UserStore) => s.preference.telemetry;
 
@@ -22,6 +25,7 @@ export const preferenceSelectors = {
   isPreferenceInit,
   shouldTriggerFileInKnowledgeBaseTip,
   showUploadFileInKnowledgeBaseTip,
+  topicDisplayMode,
   useCmdEnterToSend,
   userAllowTrace,
 };

package/src/types/topic.ts

@@ -1,5 +1,29 @@
 import { BaseDataModel } from '@/types/meta';
 
+// 类型定义
+export type TimeGroupId =
+  | 'today'
+  | 'yesterday'
+  | 'week'
+  | 'month'
+  | `${number}-${string}`
+  | `${number}`;
+
+/* eslint-disable typescript-sort-keys/string-enum */
+export enum TopicDisplayMode {
+  ByTime = 'byTime',
+  Flat = 'flat',
+  // AscMessages = 'ascMessages',
+  // DescMessages = 'descMessages',
+}
+/* eslint-enable */
+
+export interface GroupedTopic {
+  children: ChatTopic[];
+  id: string;
+  title?: string;
+}
+
 export interface ChatTopic extends Omit<BaseDataModel, 'meta'> {
   favorite?: boolean;
   sessionId?: string;

package/src/types/user/index.ts

@@ -1,6 +1,7 @@
 import { DeepPartial } from 'utility-types';
 import { z } from 'zod';
 
+import { TopicDisplayMode } from '@/types/topic';
 import { UserSettings } from '@/types/user/settings';
 
 export interface LobeUser {
@@ -36,6 +37,7 @@ export interface UserPreference {
   guide?: UserGuide;
   hideSyncAlert?: boolean;
   telemetry: boolean | null;
+  topicDisplayMode?: TopicDisplayMode;
   /**
    * whether to use cmd + enter to send message
    */

package/src/utils/client/topic.test.ts

@@ -0,0 +1,142 @@
+import dayjs from 'dayjs';
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import { ChatTopic } from '@/types/topic';
+
+import { groupTopicsByTime } from './topic';
+
+// Mock current date to ensure consistent test results
+const NOW = '2024-01-15T12:00:00Z';
+
+beforeAll(() => {
+  // Mock the current date
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(NOW));
+});
+
+describe('groupTopicsByTime', () => {
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  // Helper function to create test topics
+  const createTopic = (createdAt: number, title: string = 'Test Topic'): ChatTopic => ({
+    id: createdAt.toString(),
+    title,
+    createdAt,
+    updatedAt: createdAt,
+  });
+
+  it('should return empty array for empty input', () => {
+    expect(groupTopicsByTime([])).toEqual([]);
+  });
+
+  it('should group topics created today', () => {
+    const today = dayjs().valueOf();
+    const topics = [createTopic(today)];
+
+    const result = groupTopicsByTime(topics);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      id: 'today',
+      children: topics,
+    });
+  });
+
+  it('should group topics created yesterday', () => {
+    const yesterday = dayjs().subtract(1, 'day').valueOf();
+    const topics = [createTopic(yesterday)];
+
+    const result = groupTopicsByTime(topics);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      id: 'yesterday',
+      children: topics,
+    });
+  });
+
+  it('should group topics created within the week', () => {
+    const threeDaysAgo = dayjs().subtract(3, 'day').valueOf();
+    const topics = [createTopic(threeDaysAgo)];
+
+    const result = groupTopicsByTime(topics);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      id: 'week',
+      children: topics,
+    });
+  });
+
+  it('should group topics created this month', () => {
+    const thisMonth = dayjs().startOf('month').add(1, 'day').valueOf();
+    const topics = [createTopic(thisMonth)];
+
+    const result = groupTopicsByTime(topics);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      id: 'month',
+      children: topics,
+    });
+  });
+
+  it('should group topics from previous years', () => {
+    const lastYear = dayjs().subtract(1, 'year').valueOf();
+    const topics = [createTopic(lastYear)];
+
+    const result = groupTopicsByTime(topics);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      id: dayjs(lastYear).year().toString(),
+      children: topics,
+    });
+  });
+
+  it('should sort groups in correct order', () => {
+    const today = dayjs().valueOf();
+    const yesterday = dayjs().subtract(1, 'day').valueOf();
+    const lastWeek = dayjs().subtract(5, 'day').valueOf();
+    const lastMonth = dayjs().subtract(1, 'month').valueOf();
+    const lastYear = dayjs().subtract(1, 'year').valueOf();
+
+    const topics = [
+      createTopic(lastYear, 'Last Year'),
+      createTopic(lastMonth, 'Last Month'),
+      createTopic(lastWeek, 'Last Week'),
+      createTopic(yesterday, 'Yesterday'),
+      createTopic(today, 'Today'),
+    ];
+
+    const result = groupTopicsByTime(topics);
+
+    // Verify order of groups
+    expect(result.map((g) => g.id)).toEqual([
+      'today',
+      'yesterday',
+      'week',
+      dayjs(lastYear).year().toString(),
+    ]);
+  });
+
+  it('should sort topics within groups by createdAt in descending order', () => {
+    const today1 = dayjs().hour(9).valueOf();
+    const today2 = dayjs().hour(10).valueOf();
+    const today3 = dayjs().hour(11).valueOf();
+
+    const topics = [
+      createTopic(today1, 'Morning'),
+      createTopic(today2, 'Midday'),
+      createTopic(today3, 'Afternoon'),
+    ];
+
+    const result = groupTopicsByTime(topics);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('today');
+    expect(result[0].children.map((t) => t.title)).toEqual(['Afternoon', 'Midday', 'Morning']);
+  });
+});

package/src/utils/client/topic.ts

@@ -0,0 +1,86 @@
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+
+import { ChatTopic, GroupedTopic, TimeGroupId } from '@/types/topic';
+
+// 初始化 dayjs 插件
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+
+const getTopicGroupId = (timestamp: number): TimeGroupId => {
+  const date = dayjs(timestamp);
+  const now = dayjs();
+
+  if (date.isToday()) {
+    return 'today';
+  }
+
+  if (date.isYesterday()) {
+    return 'yesterday';
+  }
+
+  // 7天内（不包括今天和昨天）
+  const weekAgo = now.subtract(7, 'day');
+  if (date.isAfter(weekAgo) && !date.isToday() && !date.isYesterday()) {
+    return 'week';
+  }
+
+  // 当前月份（不包括前面已经分组的日期）
+  // 使用原生的月份和年份比较
+  if (date.month() === now.month() && date.year() === now.year()) {
+    return 'month';
+  }
+
+  // 当年的其他月份
+  if (date.year() === now.year()) {
+    return `${date.year()}-${(date.month() + 1).toString().padStart(2, '0')}`;
+  }
+
+  // 更早的年份
+  return `${date.year()}`;
+};
+
+// 确保分组的排序
+const sortGroups = (groups: GroupedTopic[]): GroupedTopic[] => {
+  const orderMap = new Map<string, number>();
+
+  // 设置固定分组的顺序
+  orderMap.set('today', 0);
+  orderMap.set('yesterday', 1);
+  orderMap.set('week', 2);
+  orderMap.set('month', 3);
+
+  return groups.sort((a, b) => {
+    const orderA = orderMap.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+    const orderB = orderMap.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+
+    if (orderA !== Number.MAX_SAFE_INTEGER || orderB !== Number.MAX_SAFE_INTEGER) {
+      return orderA - orderB;
+    }
+
+    // 对于年月格式和年份格式的分组，按时间倒序排序
+    return b.id.localeCompare(a.id);
+  });
+};
+
+// 时间分组的具体实现
+export const groupTopicsByTime = (topics: ChatTopic[]): GroupedTopic[] => {
+  if (!topics.length) return [];
+
+  const sortedTopics = [...topics].sort((a, b) => b.createdAt - a.createdAt);
+  const groupsMap = new Map<TimeGroupId, ChatTopic[]>();
+
+  sortedTopics.forEach((topic) => {
+    const groupId = getTopicGroupId(topic.createdAt);
+    const existingGroup = groupsMap.get(groupId) || [];
+    groupsMap.set(groupId, [...existingGroup, topic]);
+  });
+
+  const result = Array.from(groupsMap.entries()).map(([id, children]) => ({
+    children,
+    id,
+  }));
+
+  return sortGroups(result);
+};