♻️ refactor: 优化 Inbox 会话的实现逻辑

src/const/meta.ts

@@ -4,3 +4,6 @@ export const DEFAULT_AVATAR = '🤖';
 export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
 export const DEFAULT_AGENT_META: MetaData = {};
+
+export const DEFAULT_INBOX_AVATAR =
+  'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';

src/locales/default/common.ts

@@ -17,7 +17,7 @@ export default {
   copy: '复制',
   copySuccess: '复制成功',
   defaultAgent: '默认助手',
-  defaultSession: '默认对话',
+  defaultSession: '默认助手',
   delete: '删除',
   edit: '编辑',
   export: '导出配置',
@@ -31,7 +31,12 @@ export default {
   },
   feedback: '反馈与建议',
   import: '导入配置',
-  inbox: '随便聊聊',
+  inbox: {
+    defaultMessage:
+      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击「+」创建自定义助手',
+    desc: '开启大脑集群，激发思维火花。你的智能助理，就在这里与你交流一切',
+    title: '随便聊聊',
+  },
   message: {
     function_loading: '插件请求中...',
   },
@@ -48,6 +53,7 @@ export default {
   searchAgentPlaceholder: '搜索助手和对话...',
   send: '发送',
   sendPlaceholder: '输入聊天内容...',
+  sessionList: '助手列表',
   setting: '设置',
   share: '分享',
   tab: {

src/pages/chat/SessionList/Inbox.tsx

@@ -1,8 +1,9 @@
-import { Icon, List } from '@lobehub/ui';
-import { LucideInbox } from 'lucide-react';
+import { Avatar, List } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { useSessionStore } from '@/store/session';
 
 const Inbox = memo(() => {
@@ -11,10 +12,10 @@ const Inbox = memo(() => {
 
   return (
     <List.Item
-      active={activeId === 'inbox'}
-      avatar={<Icon icon={LucideInbox} size={'normal'} style={{ padding: 5 }} />}
+      active={activeId === INBOX_SESSION_ID}
+      avatar={<Avatar avatar={DEFAULT_INBOX_AVATAR} size={46} style={{ padding: 3 }} />}
       onClick={switchInbox}
-      title={t('inbox')}
+      title={t('inbox.title')}
     />
   );
 });

src/pages/chat/SessionList/index.tsx

@@ -1,5 +1,6 @@
 import { DraggablePanelBody } from '@lobehub/ui';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import FolderPanel from '@/features/FolderPanel';
@@ -9,14 +10,17 @@ import Inbox from './Inbox';
 import SessionList from './List';
 
 export const Sessions = memo(() => {
+  const { t } = useTranslation('common');
+
   return (
     <FolderPanel>
       <Header />
       <DraggablePanelBody style={{ padding: 0 }}>
         <Flexbox gap={8}>
           <Inbox />
-          <Flexbox paddingInline={16} style={{ fontSize: 12 }}>
-            角色列表
+
+          <Flexbox paddingInline={20} style={{ fontSize: 12, marginTop: 8 }}>
+            {t('sessionList')}
           </Flexbox>
           <SessionList />
         </Flexbox>

src/pages/chat/features/Header/index.tsx

@@ -9,30 +9,37 @@ import { Flexbox } from 'react-layout-kit';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import PluginTag from './PluginTag';
 
 const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
   const init = useSessionHydrated();
+
   const { t } = useTranslation('common');
 
-  const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore((s) => [
+  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
+    s.activeId,
+
     agentSelectors.currentAgentTitle(s),
     agentSelectors.currentAgentDescription(s),
     agentSelectors.currentAgentAvatar(s),
     agentSelectors.currentAgentBackgroundColor(s),
-    s.activeId,
     agentSelectors.currentAgentModel(s),
     agentSelectors.currentAgentPlugins(s),
   ]);
 
+  const isInbox = id === INBOX_SESSION_ID;
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
   ]);
 
+  const displayTitle = isInbox ? t('inbox.title') : title;
+  const displayDesc = isInbox ? t('inbox.desc') : description;
+
   return (
     <ChatHeader
       left={
@@ -50,7 +57,7 @@ const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
           <Flexbox align={'flex-start'} gap={12} horizontal>
             <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
             <HeaderTitle
-              desc={description}
+              desc={displayDesc}
               tag={
                 <>
                   <Tag>
@@ -60,7 +67,7 @@ const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
                   {plugins?.length > 0 && <PluginTag plugins={plugins} />}
                 </>
               }
-              title={title}
+              title={displayTitle}
             />
           </Flexbox>
         )

src/pages/chat/index.page.tsx

@@ -3,6 +3,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { INBOX_SESSION_ID } from '@/const/session';
 import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
@@ -14,10 +15,10 @@ import Layout from './layout';
 const Chat = memo(() => {
   const { t } = useTranslation('common');
 
-  const pageTitle = genSiteHeadTitle(t('inbox'));
+  const pageTitle = genSiteHeadTitle(t('inbox.title'));
 
   useOnFinishHydrationSession(() => {
-    useSessionStore.getState().activeSession('inbox');
+    useSessionStore.getState().activeSession(INBOX_SESSION_ID);
   });
 
   return (

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

@@ -3,6 +3,7 @@ import { merge } from 'lodash-es';
 import Router from 'next/router';
 import { StateCreator } from 'zustand/vanilla';
 
+import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { SessionStore } from '@/store/session';
 import { LobeAgentSession, LobeSessions } from '@/types/session';
@@ -99,7 +100,7 @@ export const createSessionSlice: StateCreator<
     const { type, ...res } = payload;
 
     // 如果是 inbox 类型的 session
-    if ('id' in res && res.id === 'inbox') {
+    if ('id' in res && res.id === INBOX_SESSION_ID) {
       const nextInbox = sessionsReducer({ inbox: get().inbox }, payload) as {
         inbox: LobeAgentSession;
       };
@@ -147,8 +148,8 @@ export const createSessionSlice: StateCreator<
   },
 
   switchInbox: () => {
-    if (get().activeId === 'inbox') return;
-    get().activeSession('inbox');
+    if (get().activeId === INBOX_SESSION_ID) return;
+    get().activeSession(INBOX_SESSION_ID);
 
     Router.push('/chat');
   },

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

@@ -1,7 +1,7 @@
 import { merge } from 'lodash-es';
 
-import { DEFAULT_AGENT_META } from '@/const/meta';
-import { LobeAgentSession, LobeSessionType } from '@/types/session';
+import { DEFAULT_AGENT_META, DEFAULT_INBOX_AVATAR } from '@/const/meta';
+import { LobeAgentConfig, LobeAgentSession, LobeSessionType } from '@/types/session';
 
 import { initialLobeAgentConfig } from '../agentConfig/initialState';
 
@@ -31,11 +31,10 @@ export const initLobeSession: LobeAgentSession = {
 export const initInbox = merge({}, initLobeSession, {
   config: {
     systemRole: '你是一名 AI 助理',
-  },
+  } as LobeAgentConfig,
   id: 'inbox',
   meta: {
-    avatar: '🗳',
-    title: 'Inbox',
+    avatar: DEFAULT_INBOX_AVATAR,
   },
 } as Partial<LobeAgentSession>);