@lobehub/chat 0.6.1 → 0.7.0

package/.eslintrc.js

@@ -3,4 +3,5 @@ const config = require('@lobehub/lint').eslint;
 config.extends.push('plugin:@next/next/recommended');
 //config.extends.push('plugin:@next/next/core-web-vitals');
 
+config.rules['unicorn/no-negated-condition'] = 0;
 module.exports = config;

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.7.0](https://github.com/lobehub/lobe-chat/compare/v0.6.1...v0.7.0)
+
+<sup>Released on **2023-07-22**</sup>
+
+#### ✨ Features
+
+- **misc**: 支持展示来自模型的标记信息.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 支持展示来自模型的标记信息 ([e27fae9](https://github.com/lobehub/lobe-chat/commit/e27fae9))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.6.1](https://github.com/lobehub/lobe-chat/compare/v0.6.0...v0.6.1)
 
 <sup>Released on **2023-07-22**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -90,6 +90,7 @@
     "react-layout-kit": "^1",
     "swr": "^2",
     "ts-md5": "^1",
+    "uuid": "^9",
     "zustand": "^4",
     "zustand-utils": "^1"
   },

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

@@ -5,6 +5,8 @@ import { shallow } from 'zustand/shallow';
 
 import { chatSelectors, useSessionStore } from '@/store/session';
 
+import MessageExtra from './MessageExtra';
+
 const List = () => {
   const data = useSessionStore(chatSelectors.currentChats, isEqual);
   const [deleteMessage, resendMessage] = useSessionStore(
@@ -28,6 +30,7 @@ const List = () => {
           }
         }
       }}
+      renderMessageExtra={MessageExtra}
       style={{ marginTop: 24 }}
     />
   );

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

@@ -0,0 +1,37 @@
+import { Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { ReactNode } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { agentSelectors, useSessionStore } from '@/store/session';
+import { ChatMessage } from '@/types/chatMessage';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    margin-top: 8px;
+  `,
+}));
+
+const MessageExtra = ({ role, extra }: ChatMessage): ReactNode => {
+  const { styles } = useStyles();
+
+  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>
+  );
+};
+
+export default MessageExtra;

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

@@ -119,7 +119,7 @@ export const createChatSlice: StateCreator<
     const { dispatchMessage, generateMessage } = get();
 
     // 添加 systemRole
-    const { systemRole } = agentSelectors.currentAgentConfigSafe(get());
+    const { systemRole, model } = agentSelectors.currentAgentConfigSafe(get());
     if (systemRole) {
       messages.unshift({ content: systemRole, role: 'system' } as ChatMessage);
     }
@@ -137,6 +137,14 @@ export const createChatSlice: StateCreator<
       type: 'addMessage',
     });
 
+    // 为模型添加 fromModel 的额外信息
+    dispatchMessage({
+      id: assistantId,
+      key: 'fromModel',
+      type: 'updateMessageExtra',
+      value: model,
+    });
+
     let output = '';
     // 生成 ai message
     await generateMessage(messages, {

package/src/store/session/slices/chat/messageReducer.test.ts

@@ -1,70 +1,227 @@
-test('placeholder', () => {});
-// describe('messagesReducer', () => {
-//   let initialState: ChatMessage[];
-//
-//   beforeEach(() => {
-//     initialState = [
-//       { role: 'user', content: 'Hello!' },
-//       { role: 'assistant', content: 'Hi there!' },
-//     ];
-//   });
-//
-//   it('should add a message', () => {
-//     const newMessage: ChatMessage = { role: 'user', content: 'How are you?' };
-//     const action: MessageDispatch = { type: 'addMessage', message: newMessage };
-//     const newState = messagesReducer(initialState, action);
-//     expect(newState).toEqual([...initialState, newMessage]);
-//   });
-//
-//   it('should delete a message', () => {
-//     const action: MessageDispatch = { type: 'deleteMessage', index: 1 };
-//     const newState = messagesReducer(initialState, action);
-//     expect(newState).toEqual([{ role: 'user', content: 'Hello!' }]);
-//   });
-//
-//   it('should update a message', () => {
-//     const action: MessageDispatch = { type: 'updateMessage', index: 1, message: 'I am fine!' };
-//     const newState = messagesReducer(initialState, action);
-//     expect(newState).toEqual([
-//       { role: 'user', content: 'Hello!' },
-//       { role: 'assistant', content: 'I am fine!' },
-//     ]);
-//   });
-//
-//   it('should add a user message', () => {
-//     const action: MessageDispatch = { type: 'addUserMessage', message: 'Goodbye!' };
-//     const newState = messagesReducer(initialState, action);
-//     expect(newState).toEqual([
-//       { role: 'user', content: 'Hello!' },
-//       { role: 'assistant', content: 'Hi there!' },
-//       { role: 'user', content: 'Goodbye!' },
-//     ]);
-//   });
-//
-//   it('should set error message correctly', () => {
-//     const action: MessageDispatch = {
-//       type: 'setErrorMessage',
-//       error: { message: 'Not Found', status: 404, type: 'chatbot' },
-//       index: 0,
-//     };
-//     const newState = messagesReducer(initialState, action);
-//     expect(newState).toEqual([
-//       {
-//         role: 'user',
-//         content: 'Hello!',
-//         error: { message: 'Not Found', status: 404, type: 'chatbot' },
-//       },
-//       { role: 'assistant', content: 'Hi there!' },
-//     ]);
-//   });
-//
-//   it('should update the latest bot message', () => {
-//     const responseStream = ['I', ' am', ' a', ' bot.'];
-//     const action: MessageDispatch = { type: 'updateLatestBotMessage', responseStream };
-//     const newState = messagesReducer(initialState, action);
-//     expect(newState).toEqual([
-//       { role: 'user', content: 'Hello!' },
-//       { role: 'assistant', content: 'I am a bot.' },
-//     ]);
-//   });
-// });
+import { ChatMessageMap } from '@/types/chatMessage';
+
+import { MessageDispatch, messagesReducer } from './messageReducer';
+
+describe('messagesReducer', () => {
+  let initialState: ChatMessageMap;
+
+  beforeEach(() => {
+    initialState = {
+      message1: {
+        id: 'message1',
+        content: 'Hello World',
+        createAt: 1629264000000,
+        updateAt: 1629264000000,
+        role: 'user',
+      },
+      message2: {
+        id: 'message2',
+        content: 'How are you?',
+        createAt: 1629264000000,
+        updateAt: 1629264000000,
+        role: 'system',
+      },
+    } as unknown as ChatMessageMap;
+  });
+
+  describe('addMessage', () => {
+    it('should add a new message to the state', () => {
+      const payload: MessageDispatch = {
+        type: 'addMessage',
+        message: 'New Message',
+        role: 'user',
+        id: 'message3',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(Object.keys(newState)).toHaveLength(3);
+      expect(newState).toHaveProperty('message1');
+      expect(newState).toHaveProperty('message2');
+      expect(newState).toHaveProperty('message3');
+      expect(newState.message3).toEqual({
+        id: 'message3',
+        content: 'New Message',
+        meta: {},
+        createAt: expect.any(Number),
+        updateAt: expect.any(Number),
+        role: 'user',
+      });
+    });
+
+    it('should use the provided id when adding a new message', () => {
+      const payload: MessageDispatch = {
+        type: 'addMessage',
+        id: 'customId',
+        message: 'New Message',
+        role: 'user',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(Object.keys(newState)).toHaveLength(3);
+      expect(newState).toHaveProperty('message1');
+      expect(newState).toHaveProperty('message2');
+      expect(newState).toHaveProperty('customId');
+      expect(newState.customId).toEqual({
+        id: 'customId',
+        content: 'New Message',
+        meta: {},
+        createAt: expect.any(Number),
+        updateAt: expect.any(Number),
+        role: 'user',
+      });
+    });
+
+    it('should use the provided parentId when adding a new message', () => {
+      const payload: MessageDispatch = {
+        type: 'addMessage',
+        message: 'New Message',
+        id: 'message3',
+        role: 'user',
+        parentId: 'message1',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState.message3).toEqual({
+        id: 'message3',
+        content: 'New Message',
+        meta: {},
+        createAt: expect.any(Number),
+        updateAt: expect.any(Number),
+        role: 'user',
+        parentId: 'message1',
+      });
+    });
+
+    it('should use the provided quotaId when adding a new message', () => {
+      const payload: MessageDispatch = {
+        type: 'addMessage',
+        message: 'New Message',
+        id: 'message3',
+        role: 'user',
+        quotaId: 'message2',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState.message3).toEqual({
+        id: 'message3',
+        meta: {},
+        content: 'New Message',
+        createAt: expect.any(Number),
+        updateAt: expect.any(Number),
+        role: 'user',
+        quotaId: 'message2',
+      });
+    });
+  });
+
+  describe('deleteMessage', () => {
+    it('should remove the specified message from the state', () => {
+      const payload: MessageDispatch = {
+        type: 'deleteMessage',
+        id: 'message1',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(Object.keys(newState)).toHaveLength(1);
+      expect(newState).not.toHaveProperty('message1');
+      expect(newState).toHaveProperty('message2');
+    });
+
+    it('should not modify the state if the specified message does not exist', () => {
+      const payload: MessageDispatch = {
+        type: 'deleteMessage',
+        id: 'nonexistentMessage',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState).toEqual(initialState);
+    });
+  });
+
+  describe('updateMessage', () => {
+    it('should update the specified message with the provided value', () => {
+      const payload: MessageDispatch = {
+        type: 'updateMessage',
+        id: 'message1',
+        key: 'content',
+        value: 'Updated Message',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState.message1.content).toBe('Updated Message');
+      expect(newState.message1.updateAt).toBeGreaterThan(initialState.message1.updateAt);
+    });
+
+    it('should not modify the state if the specified message does not exist', () => {
+      const payload: MessageDispatch = {
+        type: 'updateMessage',
+        id: 'nonexistentMessage',
+        key: 'content',
+        value: 'Updated Message',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState).toEqual(initialState);
+    });
+  });
+
+  describe('updateMessageExtra', () => {
+    it('should update the specified message extra property with the provided value', () => {
+      const payload: MessageDispatch = {
+        type: 'updateMessageExtra',
+        id: 'message1',
+        key: 'translate',
+        value: { target: 'en', to: 'zh' },
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState.message1.extra!.translate).toEqual({ target: 'en', to: 'zh' });
+      expect(newState.message1.updateAt).toBeGreaterThan(initialState.message1.updateAt);
+    });
+
+    it('should not modify the state if the specified message does not exist', () => {
+      const payload: MessageDispatch = {
+        type: 'updateMessageExtra',
+        id: 'nonexistentMessage',
+        key: 'translate',
+        value: { target: 'en', to: 'zh' },
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState).toEqual(initialState);
+    });
+  });
+
+  describe('resetMessages', () => {
+    it('should reset the state to an empty object', () => {
+      const payload: MessageDispatch = {
+        type: 'resetMessages',
+      };
+
+      const newState = messagesReducer(initialState, payload);
+
+      expect(newState).toEqual({});
+    });
+  });
+
+  describe('unimplemented type', () => {
+    it('should throw an error when an unimplemented type is provided', () => {
+      // @ts-ignore
+      const payload: MessageDispatch = { type: 'unimplementedType' };
+
+      expect(() => messagesReducer(initialState, payload)).toThrowError(
+        '暂未实现的 type，请检查 reducer',
+      );
+    });
+  });
+});

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

@@ -30,8 +30,19 @@ interface UpdateMessage {
   type: 'updateMessage';
   value: ChatMessage[keyof ChatMessage];
 }
+interface UpdateMessageExtra {
+  id: string;
+  key: string;
+  type: 'updateMessageExtra';
+  value: any;
+}
 
-export type MessageDispatch = AddMessage | DeleteMessage | ResetMessages | UpdateMessage;
+export type MessageDispatch =
+  | AddMessage
+  | DeleteMessage
+  | ResetMessages
+  | UpdateMessage
+  | UpdateMessageExtra;
 
 export const messagesReducer = (
   state: ChatMessageMap,
@@ -73,6 +84,22 @@ export const messagesReducer = (
       });
     }
 
+    case 'updateMessageExtra': {
+      return produce(state, (draftState) => {
+        const { id, key, value } = payload;
+        const message = draftState[id];
+        if (!message) return;
+
+        if (!message.extra) {
+          message.extra = { [key]: value } as any;
+        } else {
+          message.extra[key] = value;
+        }
+
+        message.updateAt = Date.now();
+      });
+    }
+
     case 'resetMessages': {
       return {};
     }

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

@@ -37,6 +37,7 @@ export const currentChats = (s: SessionStore): ChatMessage[] => {
     }
   };
 
+  // 基于添加逻辑进行重排序
   for (const item of basic) {
     // 先判存在与否，不存在就加入
     addItem(item);

package/vitest.config.ts

@@ -1,11 +1,12 @@
+import { resolve } from 'node:path';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   test: {
-    environment: 'jsdom',
-    globals: true,
     alias: {
-      '@': './src',
+      '@': resolve(__dirname, './src'),
     },
+    environment: 'jsdom',
+    globals: true,
   },
 });