💄 style: Update topic list header

locales/en_US/chat.json

@@ -22,7 +22,7 @@
   "searchAgentPlaceholder": "Search agents and conversations...",
   "send": "Send",
   "sendPlaceholder": "Enter chat content...",
-  "sessionList": "Assistant List",
+  "sessionList": "Agent List",
   "shareModal": {
     "download": "Download Screenshot",
     "imageType": "Image Format",
@@ -47,7 +47,13 @@
     "defaultTitle": "Default Topic",
     "saveCurrentMessages": "Save Current Session as Topic",
     "searchPlaceholder": "Search topics...",
-    "title": "Topic"
+    "deleteAll": "Delete All Topics",
+    "deleteUnstarred": "Delete Unstarred Topics",
+    "title": "Topic List",
+    "confirmRemoveAll": "All topics will be deleted and cannot be recovered. Please proceed with caution.",
+    "confirmRemoveUnstarred": "All unstarred topics will be deleted and cannot be recovered. Please proceed with caution.",
+    "removeAll": "Remove All Topics",
+    "removeUnstarred": "Remove Unstarred Topics"
   },
   "translate": {
     "clear": "Clear Translation"

locales/ja_JP/chat.json

@@ -47,7 +47,13 @@
     "defaultTitle": "デフォルトトピック",
     "saveCurrentMessages": "現在の会話をトピックとして保存",
     "searchPlaceholder": "トピックを検索...",
-    "title": "トピック"
+    "deleteAll": "すべてのトピックを削除する",
+    "deleteUnstarred": "スターを付けていないトピックを削除する",
+    "title": "トピックリスト",
+    "confirmRemoveAll": "すべてのトピックを削除します。削除後は元に戻すことはできませんので、注意して操作してください。",
+    "confirmRemoveUnstarred": "スターをつけていないトピックを削除します。削除後は元に戻すことはできませんので、注意して操作してください。",
+    "removeAll": "すべてのトピックを削除",
+    "removeUnstarred": "スターをつけていないトピックを削除"
   },
   "translate": {
     "clear": "翻訳をクリア"

locales/ko_KR/chat.json

@@ -47,7 +47,13 @@
     "defaultTitle": "기본 주제",
     "saveCurrentMessages": "현재 대화를 주제로 저장",
     "searchPlaceholder": "주제 검색...",
-    "title": "주제"
+    "deleteAll": "모든 주제 삭제",
+    "deleteUnstarred": "스타가 없는 주제 삭제",
+    "title": "주제 목록",
+    "confirmRemoveAll": "모든 주제를 삭제하려고 합니다. 삭제 후에는 복구할 수 없으므로 신중하게 작업하십시오.",
+    "confirmRemoveUnstarred": "스타를 지정하지 않은 주제를 삭제하려고 합니다. 삭제 후에는 복구할 수 없으므로 신중하게 작업하십시오.",
+    "removeAll": "모든 주제 삭제",
+    "removeUnstarred": "스타를 지정하지 않은 주제 삭제"
   },
   "translate": {
     "clear": "번역 지우기"

locales/ru_RU/chat.json

@@ -47,7 +47,13 @@
     "defaultTitle": "Стандартная тема",
     "saveCurrentMessages": "Сохранить текущий разговор как тему",
     "searchPlaceholder": "Поиск темы...",
-    "title": "Тема"
+    "deleteAll": "Удалить все темы",
+    "deleteUnstarred": "Удалить неотмеченные темы",
+    "title": "Список тем",
+    "confirmRemoveAll": "Вы собираетесь удалить все темы. После удаления их будет невозможно восстановить. Пожалуйста, будьте осторожны.",
+    "confirmRemoveUnstarred": "Вы собираетесь удалить неотмеченные темы. После удаления их будет невозможно восстановить. Пожалуйста, будьте осторожны.",
+    "removeAll": "Удалить все темы",
+    "removeUnstarred": "Удалить неотмеченные темы"
   },
   "translate": {
     "clear": "Очистить перевод"

locales/zh_CN/chat.json

@@ -43,11 +43,15 @@
     "used": "使用"
   },
   "topic": {
+    "confirmRemoveAll": "即将删除全部话题，删除后将不可恢复，请谨慎操作。",
     "confirmRemoveTopic": "即将删除该话题，删除后将不可恢复，请谨慎操作。",
+    "confirmRemoveUnstarred": "即将删除未收藏话题，删除后将不可恢复，请谨慎操作。",
     "defaultTitle": "默认话题",
+    "removeAll": "删除全部话题",
+    "removeUnstarred": "删除未收藏话题",
     "saveCurrentMessages": "将当前会话保存为话题",
     "searchPlaceholder": "搜索话题...",
-    "title": "话题"
+    "title": "话题列表"
   },
   "translate": {
     "clear": "删除翻译"

locales/zh_TW/chat.json

@@ -47,7 +47,13 @@
     "defaultTitle": "默認話題",
     "saveCurrentMessages": "將當前會話保存為話題",
     "searchPlaceholder": "搜索話題...",
-    "title": "話題"
+    "deleteAll": "刪除所有話題",
+    "deleteUnstarred": "刪除未收藏話題",
+    "title": "話題列表",
+    "confirmRemoveAll": "即將刪除全部話題，刪除後將無法恢復，請謹慎操作。",
+    "confirmRemoveUnstarred": "即將刪除未收藏話題，刪除後將無法恢復，請謹慎操作。",
+    "removeAll": "刪除全部話題",
+    "removeUnstarred": "刪除未收藏話題"
   },
   "translate": {
     "clear": "刪除翻譯"

package.json

@@ -27,7 +27,7 @@
     "build:analyze": "ANALYZE=true next build",
     "build:docker": "DOCKER=true next build",
     "dev": "next dev -p 3010",
-    "i18n": "npm run i18n:workflow && lobe-i18n",
+    "i18n": "npm run workflow:i18n && lobe-i18n",
     "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
     "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true",
     "lint:md": "remark . --quiet --frail --output",
@@ -67,8 +67,6 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5",
-    "@emoji-mart/data": "^1",
-    "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
@@ -82,7 +80,6 @@
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
-    "emoji-mart": "^5",
     "fast-deep-equal": "^3",
     "gpt-tokenizer": "^2",
     "i18next": "^23",

src/app/chat/(desktop)/features/ChatHeader.tsx

@@ -55,7 +55,17 @@ const Header = memo(() => {
           </Flexbox>
         ) : (
           <Flexbox align={'flex-start'} gap={12} horizontal>
-            <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
+            <Avatar
+              avatar={avatar}
+              background={backgroundColor}
+              onClick={() =>
+                isInbox
+                  ? router.push('/settings/agent')
+                  : router.push(pathString('/chat/settings', { hash: location.hash }))
+              }
+              size={40}
+              title={title}
+            />
             <ChatHeaderTitle
               desc={displayDesc}
               tag={

src/app/chat/(desktop)/features/SessionList.tsx

@@ -14,7 +14,7 @@ const useStyles = createStyles(({ stylish, css, cx }) =>
       display: flex;
       flex-direction: column;
       gap: 2px;
-      padding: 0 6px;
+      padding: 8px 8px 0;
     `,
   ),
 );

src/app/chat/(desktop)/features/SideBar.tsx

@@ -11,7 +11,7 @@ import { sessionSelectors } from '@/store/session/selectors';
 
 import TopicListContent from '../../features/TopicListContent';
 
-const SystemRole = dynamic(() => import('../../features/TopicListContent/SystemRole'));
+const SystemRole = dynamic(() => import('../../features/SystemRole'));
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`

src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { LayoutList, Settings } from 'lucide-react';
+import { Clock3, Settings } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,11 +32,7 @@ const MobileHeader = memo(() => {
       right={
         <>
           <ShareButton />
-          <ActionIcon
-            icon={LayoutList}
-            onClick={() => toggleConfig()}
-            size={MOBILE_HEADER_ICON_SIZE}
-          />
+          <ActionIcon icon={Clock3} onClick={() => toggleConfig()} size={MOBILE_HEADER_ICON_SIZE} />
           {!isInbox && (
             <ActionIcon
               icon={Settings}

src/app/chat/(mobile)/features/TopicList.tsx

@@ -16,7 +16,7 @@ const Topics = memo(() => {
 
   return (
     <Modal onCancel={() => toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}>
-      <TopicListContent />
+      <TopicListContent mobile />
     </Modal>
   );
 });

src/app/chat/features/Conversation/ChatList/Actions/index.ts

@@ -1,5 +1,7 @@
 import { ChatListProps } from '@lobehub/ui';
 
+import { useSessionStore } from '@/store/session';
+
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { FunctionActionsBar } from './Function';
@@ -11,3 +13,49 @@ export const renderActions: ChatListProps['renderActions'] = {
   system: DefaultActionsBar,
   user: UserActionsBar,
 };
+
+interface ActionsClick {
+  onClick: () => void;
+  trigger: boolean;
+}
+
+export const useActionsClick = (): ChatListProps['onActionsClick'] => {
+  const [deleteMessage, resendMessage, translateMessage] = useSessionStore((s) => [
+    s.deleteMessage,
+    s.resendMessage,
+    s.translateMessage,
+  ]);
+
+  return (action, { id, error }) => {
+    const actionsClick: ActionsClick[] = [
+      {
+        onClick: () => {
+          deleteMessage(id);
+        },
+        trigger: action.key === 'del',
+      },
+      {
+        onClick: () => {
+          resendMessage(id);
+          // if this message is an error message, we need to delete it
+          if (error) deleteMessage(id);
+        },
+        trigger: action.key === 'regenerate',
+      },
+      {
+        onClick: () => {
+          /**
+           * @description Click the menu item with translate item, the result is:
+           * @key 'en-US'
+           * @keyPath ['en-US','translate']
+           */
+          const lang = action.keyPath[0];
+          translateMessage(id, lang);
+        },
+        trigger: action.keyPath.at(-1) === 'translate',
+      },
+    ];
+
+    actionsClick.find((item) => item.trigger)?.onClick();
+  };
+};

src/app/chat/features/Conversation/ChatList/Messages/index.ts

@@ -1,4 +1,11 @@
 import { ChatListProps } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { useRouter } from 'next/navigation';
+
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/slices/session/selectors';
+import { pathString } from '@/utils/url';
 
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
@@ -9,3 +16,23 @@ export const renderMessages: ChatListProps['renderMessages'] = {
   default: DefaultMessage,
   function: FunctionMessage,
 };
+
+export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
+  const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
+  const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
+  const { mobile } = useResponsive();
+  const router = useRouter();
+
+  return (role) => {
+    switch (role) {
+      case 'assistant': {
+        return () =>
+          isInbox
+            ? router.push('/settings/agent')
+            : mobile
+            ? router.push(pathString('/chat/settings', { hash: location.hash }))
+            : toggleSystemRole(true);
+      }
+    }
+  };
+};

src/app/chat/features/Conversation/ChatList/index.tsx

@@ -8,39 +8,38 @@ import { PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 
-import { renderActions } from './Actions';
+import { renderActions, useActionsClick } from './Actions';
 import { renderErrorMessages } from './Error';
 import { renderMessagesExtra } from './Extras';
-import { renderMessages } from './Messages';
+import { renderMessages, useAvatarsClick } from './Messages';
 import SkeletonList from './SkeletonList';
 
 const List = memo(() => {
   const init = useSessionChatInit();
   const { t } = useTranslation('common');
+
   const data = useSessionStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
   const [
     displayMode,
     enableHistoryCount,
     historyCount,
     chatLoadingId,
-    deleteMessage,
     resendMessage,
     dispatchMessage,
-    translateMessage,
   ] = useSessionStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
     return [
       config.displayMode,
       config.enableHistoryCount,
       config.historyCount,
       s.chatLoadingId,
-      s.deleteMessage,
       s.resendMessage,
       s.dispatchMessage,
-      s.translateMessage,
     ];
   });
+  const onActionsClick = useActionsClick();
+  const onAvatarsClick = useAvatarsClick();
 
   const hotkeys = [PREFIX_KEY, REGENERATE_KEY].join('+');
 
@@ -64,29 +63,8 @@ const List = memo(() => {
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
       loadingId={chatLoadingId}
-      onActionsClick={(action, { id, error }) => {
-        switch (action.key) {
-          case 'del': {
-            deleteMessage(id);
-            break;
-          }
-          case 'regenerate': {
-            resendMessage(id);
-
-            // if this message is an error message, we need to delete it
-            if (error) deleteMessage(id);
-            break;
-          }
-        }
-
-        // click the menu item with translate item, the result is:
-        // key: 'en-US'
-        // keyPath: ['en-US','translate']
-        if (action.keyPath.at(-1) === 'translate') {
-          const lang = action.keyPath[0];
-          translateMessage(id, lang);
-        }
-      }}
+      onActionsClick={onActionsClick}
+      onAvatarsClick={onAvatarsClick}
       onMessageChange={(id, content) =>
         dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })
       }