@lobehub/chat 0.29.0 → 0.30.0

package/.eslintrc.js

@@ -4,5 +4,8 @@ config.extends.push('plugin:@next/next/recommended');
 
 config.rules['unicorn/no-negated-condition'] = 0;
 config.rules['unicorn/prefer-type-error'] = 0;
+config.rules['unicorn/prefer-logical-operator-over-ternary'] = 0;
+config.rules['unicorn/no-null'] = 0;
+config.rules['unicorn/no-typeof-undefined'] = 0;
 
 module.exports = config;

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 # Changelog
 
+## [Version 0.30.0](https://github.com/lobehub/lobe-chat/compare/v0.29.0...v0.30.0)
+
+<sup>Released on **2023-07-30**</sup>
+
+#### ✨ Features
+
+- **misc**: 优化保存为话题功能, 实现 Topic 重命名功能, 实现话题删除功能, 支持缓存角色面板的展开折叠状态.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 优化保存为话题功能 ([fdbe084](https://github.com/lobehub/lobe-chat/commit/fdbe084))
+- **misc**: 实现 Topic 重命名功能 ([5ef1685](https://github.com/lobehub/lobe-chat/commit/5ef1685))
+- **misc**: 实现话题删除功能 ([970889d](https://github.com/lobehub/lobe-chat/commit/970889d))
+- **misc**: 支持缓存角色面板的展开折叠状态 ([c241c4b](https://github.com/lobehub/lobe-chat/commit/c241c4b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.29.0](https://github.com/lobehub/lobe-chat/compare/v0.28.0...v0.29.0)
 
 <sup>Released on **2023-07-30**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/const/message.ts

@@ -1,3 +1,5 @@
+export const LOADING_FLAT = '...';
+
 // 只要 start with 这个，就可以判断为 function message
 export const FUNCTION_MESSAGE_FLAG = '{"function';
 

package/src/locales/default/common.ts

@@ -52,6 +52,8 @@ export default {
   temp: '临时',
   tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
   topic: {
+    confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
+    defaultTitle: '默认话题',
     saveCurrentMessages: '将当前会话保存为话题',
     searchPlaceholder: '搜索话题...',
   },

package/src/pages/chat/[id]/Config/SideBar.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { Topic } from '@/pages/chat/[id]/Config/Topic';
 import { agentSelectors, useSessionStore } from '@/store/session';
 
 import Header from './Header';
+import { Topic } from './Topic';
 
 const useStyles = createStyles(({ css, token }) => ({
   desc: css`

package/src/pages/chat/[id]/Config/Topic/DefaultContent.tsx

@@ -0,0 +1,29 @@
+import { Icon } from '@lobehub/ui';
+import { Tag, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { MessageSquareDashed } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const { Paragraph } = Typography;
+
+const DefaultContent = memo(() => {
+  const { t } = useTranslation('common');
+
+  const theme = useTheme();
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <Flexbox align={'center'} height={24} justify={'center'} width={24}>
+        <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
+      </Flexbox>
+      <Paragraph ellipsis={{ rows: 1 }} style={{ margin: 0 }}>
+        {t('topic.defaultTitle')}
+      </Paragraph>
+      <Tag>{t('temp')}</Tag>
+    </Flexbox>
+  );
+});
+
+export default DefaultContent;

package/src/pages/chat/[id]/Config/Topic/TopicContent.tsx

@@ -0,0 +1,151 @@
+import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
+import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { MoreVertical, PencilLine, Star, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+const useStyles = createStyles(({ css }) => ({
+  content: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+  `,
+  title: css`
+    flex: 1;
+    height: 28px;
+    line-height: 28px;
+    text-align: start;
+  `,
+}));
+const { Paragraph } = Typography;
+
+interface TopicContentProps {
+  fav?: boolean;
+  id: string;
+  title: string;
+}
+
+const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
+  const { t } = useTranslation('common');
+
+  const [editing, dispatchTopic, removeTopic] = useSessionStore(
+    (s) => [s.renameTopicId === id, s.dispatchTopic, s.removeTopic],
+    shallow,
+  );
+  const { styles, theme } = useStyles();
+
+  const toggleEditing = (visible?: boolean) => {
+    useSessionStore.setState({ renameTopicId: visible ? id : '' });
+  };
+
+  const { modal } = App.useApp();
+
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: <Icon icon={PencilLine} />,
+        key: 'rename',
+        label: t('rename'),
+        onClick: () => {
+          toggleEditing(true);
+        },
+      },
+      // {
+      //   icon: <Icon icon={Share2} />,
+      //   key: 'share',
+      //   label: t('share'),
+      // },
+      {
+        danger: true,
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete'),
+        onClick: () => {
+          if (!id) return;
+
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            onOk: () => {
+              removeTopic(id);
+            },
+            title: t('topic.confirmRemoveTopic'),
+          });
+        },
+      },
+    ],
+    [],
+  );
+
+  return (
+    <>
+      <ActionIcon
+        color={fav ? theme.colorWarning : undefined}
+        fill={fav ? theme.colorWarning : 'transparent'}
+        icon={Star}
+        onClick={() => {
+          if (!id) return;
+          dispatchTopic({ favorite: !fav, id, type: 'favorChatTopic' });
+        }}
+        size={'small'}
+      />
+
+      {!editing ? (
+        <Paragraph
+          className={styles.title}
+          ellipsis={{ rows: 1, tooltip: title }}
+          style={{ margin: 0 }}
+        >
+          {title}
+        </Paragraph>
+      ) : (
+        <EditableText
+          editing={editing}
+          onChangeEnd={(v) => {
+            if (title !== v) {
+              dispatchTopic({ id, key: 'title', type: 'updateChatTopic', value: v });
+            }
+            toggleEditing(false);
+          }}
+          onEditingChange={toggleEditing}
+          showEditIcon={false}
+          size={'small'}
+          style={{
+            background: theme.colorBgContainer,
+            borderRadius: 6,
+            height: 28,
+            padding: '0 2px',
+          }}
+          value={title}
+        />
+      )}
+      {!editing && (
+        <Dropdown
+          arrow={false}
+          menu={{
+            items: items,
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+            },
+          }}
+          trigger={['click']}
+        >
+          <ActionIcon
+            className="topic-more"
+            icon={MoreVertical}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            size={'small'}
+          />
+        </Dropdown>
+      )}
+    </>
+  );
+});
+
+export default TopicContent;

package/src/pages/chat/[id]/Config/Topic/TopicItem.tsx

@@ -0,0 +1,70 @@
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+import DefaultContent from './DefaultContent';
+import TopicContent from './TopicContent';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  active: css`
+    background: ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
+    transition: background 200ms ${token.motionEaseOut};
+
+    &:hover {
+      background: ${token.colorFill};
+    }
+  `,
+  container: css`
+    cursor: pointer;
+    padding: 12px 8px;
+    border-radius: ${token.borderRadius}px;
+
+    .topic-more {
+      opacity: 0;
+      transition: opacity 400ms ${token.motionEaseOut};
+    }
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+
+      .topic-more {
+        opacity: 1;
+      }
+    }
+  `,
+  split: css`
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+}));
+
+export interface ConfigCellProps {
+  active?: boolean;
+  fav?: boolean;
+  id?: string;
+  title: string;
+}
+
+const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
+  const { styles, cx } = useStyles();
+
+  const [toggleTopic] = useSessionStore((s) => [s.toggleTopic], shallow);
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={cx(styles.container, active && styles.active)}
+      distribution={'space-between'}
+      horizontal
+      onClick={() => {
+        toggleTopic(id);
+      }}
+    >
+      {!id ? <DefaultContent /> : <TopicContent fav={fav} id={id} title={title} />}
+    </Flexbox>
+  );
+});
+
+export default TopicItem;

package/src/pages/chat/[id]/Config/{Topic.tsx → Topic/index.tsx}

@@ -13,14 +13,7 @@ export const Topic = () => {
       <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
 
       {topics.map(({ id, favorite, title }) => (
-        <TopicItem
-          active={activeTopicId === id}
-          fav={favorite}
-          id={id}
-          key={id}
-          showFav
-          title={title}
-        />
+        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
       ))}
     </Flexbox>
   );

package/src/pages/chat/[id]/Config/index.tsx

@@ -5,7 +5,7 @@ import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
-import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
 
 import SideBar from './SideBar';
 
@@ -23,8 +23,8 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 
 const Config = () => {
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig] = useSessionStore(
-    (s) => [s.showAgentSettings, s.toggleConfig],
+  const [showAgentSettings, toggleConfig] = useSettings(
+    (s) => [s.showAgentConfig, s.toggleAgentPanel],
     shallow,
   );
 
@@ -32,11 +32,9 @@ const Config = () => {
     <DraggablePanel
       className={styles.drawer}
       expand={showAgentSettings}
-      maxWidth={CHAT_SIDEBAR_WIDTH}
       minWidth={CHAT_SIDEBAR_WIDTH}
       onExpandChange={toggleConfig}
       placement={'right'}
-      resize={false}
     >
       <HeaderSpacing />
       <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>

package/src/pages/chat/[id]/Conversation/Input/index.tsx

@@ -1,7 +1,7 @@
 import { ChatInputArea, DraggablePanel, Icon, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
 import { LucideGalleryVerticalEnd } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
@@ -18,18 +18,15 @@ const ChatInput = () => {
   const [text, setText] = useState('');
 
   const [inputHeight] = useSettings((s) => [s.inputHeight], shallow);
-  const [sendMessage, saveToTopic] = useSessionStore(
-    (s) => [s.createOrSendMsg, s.saveToTopic],
+  const [sendMessage, hasTopic, saveToTopic] = useSessionStore(
+    (s) => [s.createOrSendMsg, !!s.activeTopicId, s.saveToTopic],
     shallow,
   );
 
-  const footer = useMemo(
-    () => (
-      <Tooltip title={t('topic.saveCurrentMessages')}>
-        <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} onClick={saveToTopic} />
-      </Tooltip>
-    ),
-    [],
+  const footer = hasTopic ? null : (
+    <Tooltip title={t('topic.saveCurrentMessages')}>
+      <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} onClick={saveToTopic} />
+    </Tooltip>
   );
 
   return (

package/src/pages/chat/[id]/Header.tsx

@@ -8,6 +8,7 @@ import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import { agentSelectors, useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
 
 const Header = memo(() => {
   const { t } = useTranslation('common');
@@ -24,8 +25,8 @@ const Header = memo(() => {
     shallow,
   );
 
-  const [showAgentSettings, toggleConfig] = useSessionStore(
-    (s) => [s.showAgentSettings, s.toggleConfig],
+  const [showAgentSettings, toggleConfig] = useSettings(
+    (s) => [s.showAgentConfig, s.toggleAgentPanel],
     shallow,
   );
 

package/src/store/session/slices/agentConfig/action.ts

@@ -46,11 +46,6 @@ export interface AgentAction {
   internalUpdateAgentMeta: (id: string) => any;
   toggleAgentPlugin: (pluginId: string) => void;
 
-  /**
-   * 切换配置
-   * @param showPanel - 是否显示面板，默认为 true
-   */
-  toggleConfig: (showPanel?: boolean) => void;
   /**
    * 更新代理配置
    * @param config - 部分 LobeAgentConfig 的配置
@@ -214,12 +209,6 @@ export const createAgentSlice: StateCreator<
     get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
   },
 
-  toggleConfig: (newValue) => {
-    const showAgentSettings = typeof newValue === 'boolean' ? newValue : !get().showAgentSettings;
-
-    set({ showAgentSettings });
-  },
-
   updateAgentConfig: (config) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());

package/src/store/session/slices/agentConfig/initialState.ts

@@ -6,8 +6,6 @@ export type SessionLoadingState = Record<Partial<keyof MetaData>, boolean>;
 
 export interface AgentConfigState {
   autocompleteLoading: SessionLoadingState;
-
-  showAgentSettings: boolean;
 }
 
 export const initialLobeAgentConfig: LobeAgentConfig = {
@@ -32,6 +30,4 @@ export const initialAgentConfigState: AgentConfigState = {
     tag: false,
     title: false,
   },
-
-  showAgentSettings: true,
 };

package/src/store/session/slices/chat/actions/message.ts

@@ -1,5 +1,6 @@
 import { StateCreator } from 'zustand/vanilla';
 
+import { LOADING_FLAT } from '@/const/message';
 import { fetchChatModel } from '@/services/chatModel';
 import { fetchPlugin } from '@/services/plugin';
 import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
@@ -10,8 +11,6 @@ import { nanoid } from '@/utils/uuid';
 
 import { MessageDispatch, messagesReducer } from '../reducers/message';
 
-const LOADING_FLAT = '...';
-
 /**
  * 聊天操作
  */
@@ -216,6 +215,7 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(histories, latestMsg.id);
   },
+
   sendMessage: async (message) => {
     const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta, activeTopicId } =
       get();

package/src/store/session/slices/chat/actions/topic.ts

@@ -1,7 +1,8 @@
 import { StateCreator } from 'zustand/vanilla';
 
+import { LOADING_FLAT } from '@/const/message';
 import { promptSummaryTitle } from '@/prompts/chat';
-import { SessionStore, chatSelectors, sessionSelectors } from '@/store/session';
+import { SessionStore, chatSelectors, sessionSelectors, topicSelectors } from '@/store/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';
 import { nanoid } from '@/utils/uuid';
 
@@ -13,6 +14,11 @@ export interface ChatTopicAction {
    * @param payload - 要分发的主题
    */
   dispatchTopic: (payload: ChatTopicDispatch) => void;
+  /**
+   * 移除话题
+   * @param id
+   */
+  removeTopic: (id: string) => void;
   /**
    * 将当前消息保存为主题
    */
@@ -28,6 +34,7 @@ export interface ChatTopicAction {
    */
   updateTopicLoading: (id?: string) => void;
 }
+
 export const chatTopic: StateCreator<
   SessionStore,
   [['zustand/devtools', never]],
@@ -43,6 +50,24 @@ export const chatTopic: StateCreator<
 
     get().dispatchSession({ id: activeId, topics, type: 'updateSessionTopic' });
   },
+  removeTopic: (id) => {
+    const { dispatchTopic, dispatchMessage, toggleTopic } = get();
+
+    // 移除关联的 message
+    const messages = topicSelectors.getTopicMessages(id)(get());
+    for (const m of messages) {
+      dispatchMessage({
+        id: m.id,
+        type: 'deleteMessage',
+      });
+    }
+
+    // 最后移除 topic
+    dispatchTopic({ id, type: 'deleteChatTopic' });
+
+    // 切换到默认 topic
+    toggleTopic();
+  },
   saveToTopic: () => {
     const session = sessionSelectors.currentSession(get());
     if (!session) return;
@@ -71,6 +96,8 @@ export const chatTopic: StateCreator<
       dispatchMessage({ id: m.id, key: 'topicId', type: 'updateMessage', value: topicId });
     }
 
+    dispatchTopic({ id: topicId, key: 'title', type: 'updateChatTopic', value: LOADING_FLAT });
+
     let output = '';
 
     // 自动总结话题标题
@@ -91,7 +118,6 @@ export const chatTopic: StateCreator<
   toggleTopic: (id) => {
     set({ activeTopicId: id });
   },
-
   updateTopicLoading: (id) => {
     set({ topicLoadingId: id });
   },

package/src/store/session/slices/chat/initialState.ts

@@ -1,6 +1,7 @@
 export interface ChatState {
   activeTopicId?: string;
   chatLoadingId?: string;
+  renameTopicId?: string;
   topicLoadingId?: string;
 }
 

package/src/store/session/slices/chat/reducers/topic.ts

@@ -14,12 +14,22 @@ interface UpdateChatTopicAction {
   value: any;
 }
 
+interface FavorChatTopicAction {
+  favorite: boolean;
+  id: string;
+  type: 'favorChatTopic';
+}
+
 interface DeleteChatTopicAction {
   id: string;
   type: 'deleteChatTopic';
 }
 
-export type ChatTopicDispatch = AddChatTopicAction | UpdateChatTopicAction | DeleteChatTopicAction;
+export type ChatTopicDispatch =
+  | AddChatTopicAction
+  | UpdateChatTopicAction
+  | DeleteChatTopicAction
+  | FavorChatTopicAction;
 
 export const topicReducer = (state: ChatTopicMap, payload: ChatTopicDispatch): ChatTopicMap => {
   switch (payload.type) {
@@ -46,6 +56,18 @@ export const topicReducer = (state: ChatTopicMap, payload: ChatTopicDispatch): C
       });
     }
 
+    case 'favorChatTopic': {
+      return produce(state, (draftState) => {
+        const { favorite, id } = payload;
+
+        if (!draftState[id]) return;
+
+        const topic = draftState[id];
+
+        topic.favorite = favorite;
+      });
+    }
+
     case 'deleteChatTopic': {
       return produce(state, (draftState) => {
         delete draftState[payload.id];

package/src/store/session/slices/chat/selectors/index.ts

@@ -1,6 +1,6 @@
 import { currentChats } from './chat';
 import { chatsTokenCount, systemRoleTokenCount, totalTokenCount } from './token';
-import { currentTopics } from './topic';
+import { currentTopics, getTopicMessages } from './topic';
 
 export const chatSelectors = {
   chatsTokenCount,
@@ -11,4 +11,5 @@ export const chatSelectors = {
 
 export const topicSelectors = {
   currentTopics,
+  getTopicMessages,
 };

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

@@ -1,5 +1,6 @@
 // 展示在聊天框中的消息
 import { SessionStore, sessionSelectors } from '@/store/session';
+import { organizeChats } from '@/store/session/slices/chat/selectors/utils';
 import { ChatTopic } from '@/types/topic';
 
 export const currentTopics = (s: SessionStore): ChatTopic[] => {
@@ -14,3 +15,10 @@ export const currentTopics = (s: SessionStore): ChatTopic[] => {
 
   return [...favTopics, ...defaultTopics];
 };
+
+export const getTopicMessages = (topicId: string) => (s: SessionStore) => {
+  const session = sessionSelectors.currentSession(s);
+  if (!session) return [];
+
+  return organizeChats(session, { assistant: '', user: '' }, topicId);
+};

package/src/store/settings/action.ts

@@ -36,6 +36,7 @@ export interface SettingsAction {
    * @param key - 选中的侧边栏选项
    */
   switchSideBar: (key: SidebarTabKey) => void;
+  toggleAgentPanel: (visible?: boolean) => void;
 }
 
 export const createSettings: StateCreator<
@@ -52,7 +53,7 @@ export const createSettings: StateCreator<
     setSettings({
       ...settings,
       // 如果用户存在用户头像，那么不做导入
-      avatar: get().settings.avatar ?? settings.avatar,
+      avatar: !get().settings.avatar ? settings.avatar : get().settings.avatar,
     });
   },
   resetSettings: () => {
@@ -71,4 +72,9 @@ export const createSettings: StateCreator<
   switchSideBar: (key) => {
     set({ sidebarKey: key });
   },
+  toggleAgentPanel: (newValue) => {
+    const showAgentConfig = typeof newValue === 'boolean' ? newValue : !get().showAgentConfig;
+
+    set({ showAgentConfig });
+  },
 });

package/src/store/settings/initialState.ts

@@ -31,6 +31,7 @@ export interface SettingsState {
   sessionExpandable?: boolean;
   sessionsWidth: number;
   settings: GlobalSettings;
+  showAgentConfig?: boolean;
   sidebarKey: SidebarTabKey;
 }
 
@@ -39,5 +40,6 @@ export const initialState: SettingsState = {
   sessionExpandable: true,
   sessionsWidth: 320,
   settings: DEFAULT_SETTINGS,
+  showAgentConfig: true,
   sidebarKey: 'chat',
 };

package/src/pages/chat/[id]/Config/TopicItem.tsx

@@ -1,136 +0,0 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Dropdown, type MenuProps, Tag, Typography } from 'antd';
-import { createStyles } from 'antd-style';
-import { MessageSquareDashed, MoreVertical, PencilLine, Share2, Star, Trash } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
-
-import { useSessionStore } from '@/store/session';
-
-const { Paragraph } = Typography;
-
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  active: css`
-    background: ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
-    transition: background 200ms ${token.motionEaseOut};
-
-    &:hover {
-      background: ${token.colorFill};
-    }
-  `,
-  container: css`
-    cursor: pointer;
-    padding: 12px 8px;
-    border-radius: ${token.borderRadius}px;
-
-    .topic-more {
-      opacity: 0;
-      transition: opacity 400ms ${token.motionEaseOut};
-    }
-
-    &:hover {
-      background: ${token.colorFillSecondary};
-
-      .topic-more {
-        opacity: 1;
-      }
-    }
-  `,
-  split: css`
-    border-bottom: 1px solid ${token.colorSplit};
-  `,
-}));
-
-export interface ConfigCellProps {
-  active?: boolean;
-  fav?: boolean;
-  id?: string;
-  showFav?: boolean;
-  title: string;
-}
-
-const TopicItem = memo<ConfigCellProps>(({ title, active, id, showFav, fav }) => {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const { styles, theme, cx } = useStyles();
-  const { t } = useTranslation('common');
-
-  const [dispatchTopic, toggleTopic] = useSessionStore(
-    (s) => [s.dispatchTopic, s.toggleTopic],
-    shallow,
-  );
-
-  // TODO: 动作绑定
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={PencilLine} />,
-        key: 'rename',
-        label: t('rename'),
-      },
-      {
-        icon: <Icon icon={Share2} />,
-        key: 'share',
-        label: t('share'),
-      },
-      {
-        icon: <Icon icon={Trash} />,
-        key: 'delete',
-        label: t('delete'),
-      },
-    ],
-    [],
-  );
-
-  return (
-    <Flexbox
-      align={'center'}
-      className={cx(styles.container, active && styles.active)}
-      distribution={'space-between'}
-      horizontal
-      onClick={() => {
-        toggleTopic(id);
-      }}
-    >
-      <Flexbox align={'center'} gap={8} horizontal>
-        {!showFav ? (
-          <Flexbox align={'center'} height={24} justify={'center'} width={24}>
-            <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
-          </Flexbox>
-        ) : (
-          <ActionIcon
-            color={fav ? theme.colorWarning : undefined}
-            fill={fav ? theme.colorWarning : 'transparent'}
-            icon={Star}
-            onClick={() => {
-              if (!id) return;
-              dispatchTopic({ id, key: 'favorite', type: 'updateChatTopic', value: !fav });
-            }}
-            size={'small'}
-          />
-        )}
-        <Paragraph ellipsis={{ rows: 2 }} style={{ margin: 0 }}>
-          {title}
-        </Paragraph>
-        {id ? '' : <Tag>{t('temp')}</Tag>}
-      </Flexbox>
-      <Dropdown
-        arrow={false}
-        menu={{ items }}
-        onOpenChange={setDropdownOpen}
-        open={dropdownOpen}
-        trigger={['click']}
-      >
-        <ActionIcon
-          className="topic-more"
-          icon={MoreVertical}
-          size={'small'}
-          style={dropdownOpen ? { opacity: 1 } : {}}
-        />
-      </Dropdown>
-    </Flexbox>
-  );
-});
-
-export default TopicItem;