✨ feat: 展示模型类型

src/locales/default/common.ts

@@ -1,4 +1,5 @@
 export default {
+  'DefaultSession': '默认对话',
   'advanceSettings': '高级设置',
   'agentAvatar': '头像',
   'agentDescription': '描述',

src/pages/chat/SessionList/List/SessionItem.tsx

@@ -1,8 +1,8 @@
 import { ActionIcon, Avatar, List } from '@lobehub/ui';
-import { Popconfirm } from 'antd';
+import { Popconfirm, Tag } from 'antd';
 import { X } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 import { FC, memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
@@ -22,7 +22,7 @@ interface SessionItemProps {
 const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
   const { t } = useTranslation('common');
   const { styles, theme, cx } = useStyles();
-  const [title, description, systemRole, avatar, avatarBackground, updateAt, removeSession] =
+  const [title, description, systemRole, avatar, avatarBackground, updateAt, model, removeSession] =
     useSessionStore((s) => {
       const session = sessionSelectors.getSessionById(id)(s);
       const meta = session.meta;
@@ -34,6 +34,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         sessionSelectors.getAgentAvatar(meta),
         meta.backgroundColor,
         session?.updateAt,
+        session.config.model,
         s.removeSession,
       ];
     }, shallow);
@@ -53,13 +54,17 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         }
         classNames={{ time: cx('session-time', styles.time) }}
         date={updateAt}
-        description={description || systemRole}
+        description={
+          <Flexbox gap={4}>
+            <Flexbox>{description || systemRole}</Flexbox>
+            <Flexbox horizontal>
+              <Tag bordered={false}>{model}</Tag>
+            </Flexbox>
+          </Flexbox>
+        }
         loading={loading}
-        style={{
-          alignItems: 'center',
-          color: theme.colorText,
-        }}
-        title={title || DEFAULT_TITLE}
+        style={{ color: theme.colorText }}
+        title={title || t(DEFAULT_TITLE)}
       />
       <Popconfirm
         arrow={false}

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

@@ -1,4 +1,5 @@
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
+import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import { ArchiveIcon, MoreVerticalIcon, Share2 } from 'lucide-react';
 import { memo } from 'react';
@@ -6,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, token }) => ({
   desc: css`
@@ -18,8 +19,13 @@ const useStyles = createStyles(({ css, token }) => ({
     color: ${token.colorText};
   `,
 }));
+
 const Header = memo(() => {
   const { t } = useTranslation('common');
+  const [avatar, model] = useSessionStore(
+    (s) => [agentSelectors.currentAgentAvatar(s), agentSelectors.currentAgentModel(s)],
+    shallow,
+  );
   const [meta, id] = useSessionStore((s) => {
     const chat = sessionSelectors.currentSession(s);
     return [chat?.meta, s.activeId];
@@ -42,9 +48,12 @@ const Header = memo(() => {
     <ChatHeader
       left={
         <>
-          <Avatar avatar={meta && sessionSelectors.getAgentAvatar(meta)} size={40} title={'123'} />
+          <Avatar avatar={avatar} size={40} title={meta?.title} />
           <Flexbox>
-            <Flexbox className={styles.title}>{meta?.title || t('defaultAgent')}</Flexbox>
+            <Flexbox align={'center'} className={styles.title} gap={8} horizontal>
+              {meta?.title || t('defaultAgent')}
+              <Tag bordered={false}>{model}</Tag>
+            </Flexbox>
             <Flexbox className={styles.desc}>{meta?.description || t('noDescription')}</Flexbox>
           </Flexbox>
         </>

src/pages/chat/[id]/index.page.tsx

@@ -19,18 +19,20 @@ const Chat = memo(() => {
   const pageTitle = title ? `${title} - LobeChat` : 'LobeChat';
 
   return (
-    <Layout>
+    <>
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Flexbox id={'lobe-conversion-container'} style={{ height: '100vh' }}>
-        <Header />
-        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-          <Conversation />
-          <Config />
+      <Layout>
+        <Flexbox id={'lobe-conversion-container'} style={{ height: '100vh' }}>
+          <Header />
+          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+            <Conversation />
+            <Config />
+          </Flexbox>
         </Flexbox>
-      </Flexbox>
-    </Layout>
+      </Layout>
+    </>
   );
 });
 export default Chat;

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

@@ -18,7 +18,7 @@ export const initialLobeAgentConfig: LobeAgentConfig = {
 
 export const DEFAULT_AVATAR = 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';
 
-export const DEFAULT_TITLE = '默认对话';
+export const DEFAULT_TITLE = 'DefaultSession';
 
 export const initialAgentConfigState: AgentConfigState = {
   // // loading 中间态

src/types/chatMessage.ts

@@ -25,12 +25,12 @@ export interface ChatMessage extends BaseDataModel {
 
   // 扩展字段
   extra?: {
+    fromModel?: string;
     // 翻译
-    translate: {
+    translate?: {
       target: string;
       to: string;
     };
-    // 语音
   } & Record<string, any>;
 
   parentId?: string;