@lobehub/chat 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 # Changelog
 
+## [Version 0.9.0](https://github.com/lobehub/lobe-chat/compare/v0.8.2...v0.9.0)
+
+<sup>Released on **2023-07-22**</sup>
+
+#### ✨ Features
+
+- **misc**: 展示模型类型.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 展示模型类型 ([58ea93c](https://github.com/lobehub/lobe-chat/commit/58ea93c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.8.2](https://github.com/lobehub/lobe-chat/compare/v0.8.1...v0.8.2)
+
+<sup>Released on **2023-07-22**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix miss manifest.json link, 优化 model tag 展示逻辑.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix miss manifest.json link ([ac4b2f3](https://github.com/lobehub/lobe-chat/commit/ac4b2f3))
+- **misc**: 优化 model tag 展示逻辑 ([3463ede](https://github.com/lobehub/lobe-chat/commit/3463ede))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.8.1](https://github.com/lobehub/lobe-chat/compare/v0.8.0...v0.8.1)
 
 <sup>Released on **2023-07-22**</sup>

package/package.json

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

package/src/locales/default/common.ts

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

package/src/pages/_document.page.tsx

@@ -57,6 +57,7 @@ class MyDocument extends Document {
           <meta content="LobeHub" name="application-name" />
           <meta content="#000000" name="msapplication-TileColor" />
           <meta content="#000000" name="theme-color" />
+          <link href="/manifest.json" rel="manifest" />
         </Head>
         <body>
           <Main />

package/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}

package/src/pages/chat/[id]/Conversation/MessageExtra.tsx

@@ -18,20 +18,20 @@ const MessageExtra = ({ role, extra }: ChatMessage): ReactNode => {
 
   const [model] = useSessionStore((s) => [agentSelectors.currentAgentModel(s)], shallow);
 
-  // 只有 ai 的 message 才会需要展示
-  if (role !== 'assistant') return;
-  // 只有当 当前的 model 和 fromModel 不一致时，才需要展示
-  if (extra?.fromModel && model === extra?.fromModel) return;
-
-  return (
-    <Flexbox className={styles.container}>
-      <div>
-        <Tag bordered={false} style={{ borderRadius: 6 }}>
-          {extra?.fromModel}
-        </Tag>
-      </div>
-    </Flexbox>
-  );
+  // 1. 只有 ai 的 message
+  // 2. 且存在 fromModel
+  // 3. 且当前的 model 和 fromModel 不一致时
+  if (role === 'assistant' && extra?.fromModel && model !== extra?.fromModel)
+    // 才需要展示 model tag
+    return (
+      <Flexbox className={styles.container}>
+        <div>
+          <Tag bordered={false} style={{ borderRadius: 6 }}>
+            {extra?.fromModel}
+          </Tag>
+        </div>
+      </Flexbox>
+    );
 };
 
 export default MessageExtra;

package/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>
         </>

package/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;

package/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 中间态

package/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;