@fe-free/ai 6.0.12 → 6.0.14

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 6.0.14
+
+### Patch Changes
+
+- ai
+  - @fe-free/core@6.0.14
+  - @fe-free/icons@6.0.14
+  - @fe-free/tool@6.0.14
+
+## 6.0.13
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/core@6.0.13
+  - @fe-free/icons@6.0.13
+  - @fe-free/tool@6.0.13
+
 ## 6.0.12
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "6.0.12",
+  "version": "6.0.14",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -17,7 +17,7 @@
     "lodash-es": "^4.17.21",
     "uuid": "^13.0.0",
     "zustand": "^4.5.7",
-    "@fe-free/core": "6.0.12"
+    "@fe-free/core": "6.0.14"
   },
   "peerDependencies": {
     "antd": "^6.2.1",
@@ -27,8 +27,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "6.0.12",
-    "@fe-free/tool": "6.0.12"
+    "@fe-free/icons": "6.0.14",
+    "@fe-free/tool": "6.0.14"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/ai.stories.tsx

@@ -1,9 +1,9 @@
-import type { ChatMessage, MSenderProps } from '@fe-free/ai';
+import type { Message, MSenderProps } from '@fe-free/ai';
 import {
   Chat,
   createChatStore,
-  EnumChatMessageStatus,
-  EnumChatMessageType,
+  EnumMessageStatus,
+  EnumMessageType,
   generateUUID,
   getRecordAudioOfPCM,
   Markdown,
@@ -15,18 +15,16 @@ import { sleep } from '@fe-free/tool';
 import type { Meta } from '@storybook/react-vite';
 import { App, Button, Divider } from 'antd';
 import { set } from 'lodash-es';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useEffectEvent, useMemo } from 'react';
 
 const meta: Meta = {
   title: '@fe-free/ai/Example',
   tags: ['autodocs'],
 };
 
-interface AIData {
-  text?: string;
-}
+async function fakeFetchStream(value: UserData, { onUpdate }) {
+  console.log('fakeFetchStream', value);
 
-async function fakeFetchStream(v: MSenderProps['value'], { onUpdate }) {
   // 这里模拟 fetchStream
   await sleep(1000);
 
@@ -42,11 +40,30 @@ async function fakeFetchStream(v: MSenderProps['value'], { onUpdate }) {
   }, 300);
 }
 
-function Component() {
-  const { useChatStore, useChatStoreComputed } = useMemo(() => {
-    return createChatStore<MSenderProps['value'], AIData>();
-  }, []);
+/**
+
+如何接入(具体见下面的代码)
+- store.ts
+  - types.ts 定义类型
+  - 使用 createChatStore 创建 store
+- chat.ts
+  - 接入 Chat 组件
+  - 接入 Messages 组件，实现 renderMessageOfXXX
+  - 接入 Sender or MSender 组件
+  - 数据相关从 useChatStore 中获取
+ */
+
+type UserData = NonNullable<MSenderProps['value']>;
+interface AIData {
+  text?: string;
+}
+interface SystemData {
+  type?: string;
+}
 
+const { useChatStore, useChatStoreComputed } = createChatStore<UserData, AIData, SystemData>();
+
+function Component() {
   const senderValue = useChatStore((state) => state.senderValue);
   const setSenderValue = useChatStore((state) => state.setSenderValue);
   const messages = useChatStore((state) => state.messages);
@@ -54,51 +71,54 @@ function Component() {
   const addMessage = useChatStore((state) => state.addMessage);
   const updateMessage = useChatStore((state) => state.updateMessage);
   const { chatStatus } = useChatStoreComputed();
+  const loading =
+    chatStatus === EnumMessageStatus.PENDING || chatStatus === EnumMessageStatus.STREAMING;
 
-  const { message } = App.useApp();
+  const { message: appMessage } = App.useApp();
 
-  // init from cache
-  useEffect(() => {
+  const handleLoaded = useEffectEvent(() => {
     const cacheMessages = localStorage.getItem('chatMessages');
     if (cacheMessages) {
       setMessages(JSON.parse(cacheMessages));
     }
-  }, []);
+  });
 
-  const loading =
-    chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
+  // init from cache
+  useEffect(() => {
+    handleLoaded();
+  }, []);
 
   const handleSubmit = useCallback(
     (v) => {
       console.log('onSubmit', v);
 
-      const message: ChatMessage<MSenderProps['value'], AIData> = {
+      const chatMessage: Message<UserData, AIData, SystemData> = {
         uuid: generateUUID(),
-        status: EnumChatMessageStatus.PENDING,
+        status: EnumMessageStatus.PENDING,
         user: {
           ...v,
         },
       };
 
-      addMessage(message);
+      addMessage(chatMessage);
 
       // fake
-      fakeFetchStream(v, {
+      void fakeFetchStream(v, {
         onUpdate: ({ event, data }) => {
           if (event === 'message') {
-            message.status = EnumChatMessageStatus.STREAMING;
+            chatMessage.status = EnumMessageStatus.STREAMING;
 
-            const preText = message.ai?.data?.text || '';
-            set(message, 'ai.data.text', preText + data);
+            const preText = chatMessage.ai?.data?.text || '';
+            set(chatMessage, 'ai.data.text', preText + data);
 
             // 假设有 session_id
-            set(message, 'ai.session_id', '123');
+            set(chatMessage, 'ai.session_id', '123');
 
-            updateMessage(message);
+            updateMessage(chatMessage);
           }
           if (event === 'done') {
-            message.status = EnumChatMessageStatus.DONE;
-            updateMessage(message);
+            chatMessage.status = EnumMessageStatus.DONE;
+            updateMessage(chatMessage);
           }
         },
       });
@@ -117,7 +137,7 @@ function Component() {
           onClick={() => {
             addMessage({
               uuid: generateUUID(),
-              type: EnumChatMessageType.SYSTEM,
+              type: EnumMessageType.SYSTEM,
               system: {
                 data: {
                   type: 'new_session',
@@ -156,7 +176,7 @@ function Component() {
                           console.log('onAudio', data);
                         },
                         onError: (err) => {
-                          message.error(err.message);
+                          appMessage.error(err.message);
                         },
                       });
                     } catch (err) {
@@ -175,29 +195,29 @@ function Component() {
         >
           <Messages
             messages={messages}
-            renderMessageOfSystem={({ message }) => {
-              if (message.system?.data?.type === 'new_session') {
+            renderMessageOfSystem={({ message: msg }) => {
+              if (msg.system?.data?.type === 'new_session') {
                 return <Divider>让我们聊点新内容吧</Divider>;
               }
 
               return null;
             }}
-            renderMessageOfUser={({ message }) => {
+            renderMessageOfUser={({ message: msg }) => {
               return (
                 <div className="p-2">
-                  <div className="rounded-xl bg-primary p-2 text-white">{message.user?.text}</div>
+                  <div className="bg-primary rounded-xl p-2 text-white">{msg.user?.text}</div>
                 </div>
               );
             }}
-            renderMessageOfAI={({ message }) => {
+            renderMessageOfAI={({ message: msg }) => {
               return (
                 <div className="max-w-full p-2">
                   <div>
-                    status: {message.status} session_id: {message.ai?.session_id}
+                    status: {msg.status} session_id: {msg.ai?.session_id}
                   </div>
-                  <Markdown content={message.ai?.data?.text || ''} />
+                  <Markdown content={msg.ai?.data?.text || ''} />
                   <div className="flex gap-2">
-                    <MessageActions.Copy value={message.ai?.data?.text || ''} />
+                    <MessageActions.Copy value={msg.ai?.data?.text || ''} />
                     <MessageActions.Like
                       onClick={async () => {
                         // some thing

package/src/index.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import './style.scss';
 
 export { CustomMarkdown, Markdown } from '@fe-free/core';
@@ -8,13 +9,13 @@ export { generateUUID } from './helper';
 export { completeHtml, completeJson } from './helper/complete';
 export { MSender } from './m_sender';
 export type { MSenderProps, MSenderRef } from './m_sender';
-export { MessageActions, MessageThink, MessageThinkOfDeepSeek, Messages } from './messages';
-export type { MessageThinkProps, MessagesProps } from './messages';
+export { MessageActions, Messages, MessageThink, MessageThinkOfDeepSeek } from './messages';
+export type { MessagesProps, MessageThinkProps } from './messages';
 export { Sender } from './sender';
 export type { SenderProps, SenderRef } from './sender';
 export { createChatStore } from './store';
-export { EnumChatMessageStatus, EnumChatMessageType } from './store/types';
-export type { ChatMessage, ChatMessageOfAI, ChatMessageOfUser } from './store/types';
+export { EnumMessageStatus, EnumMessageType } from './store/types';
+export type { Message, MessageOfAI } from './store/types';
 export { fetchStream } from './stream';
 export { Tip } from './tip';
 export { getRecordAudioOfBlob, getRecordAudioOfPCM } from './voice';

package/src/messages/messages.tsx

@@ -3,27 +3,35 @@ import { ArrowDownOutlined } from '@fe-free/icons';
 import { useMemoizedFn } from 'ahooks';
 import { Button } from 'antd';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { EnumChatMessageType, type ChatMessage } from '../store/types';
 
-interface MessagesProps<UserData, AIData> {
+import { EnumMessageType, type Message } from '../store/types';
+
+interface MessagesProps<UserData, AIData, SystemData> {
   refList?: React.RefObject<HTMLDivElement | null>;
-  messages?: ChatMessage<UserData, AIData>[];
+  messages?: Message<UserData, AIData, SystemData>[];
   /** 含所有 */
-  renderMessage?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+  renderMessage?: (props: { message: Message<UserData, AIData, SystemData> }) => React.ReactNode;
   /** 系统消息 */
-  renderMessageOfSystem?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+  renderMessageOfSystem?: (props: {
+    message: Message<UserData, AIData, SystemData>;
+  }) => React.ReactNode;
   /** 用户消息 */
-  renderMessageOfUser?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+  renderMessageOfUser?: (props: {
+    message: Message<UserData, AIData, SystemData>;
+  }) => React.ReactNode;
   /** AI消息 */
-  renderMessageOfAI?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+  renderMessageOfAI?: (props: {
+    message: Message<UserData, AIData, SystemData>;
+  }) => React.ReactNode;
 }
 
 function useScrollToBottom({ ref }) {
   const [showScrollBottom, setShowScrollBottom] = useState(false);
 
   useEffect(() => {
+    const el = ref.current;
     const handleScroll = () => {
-      if (!ref.current) {
+      if (!el) {
         return;
       }
 
@@ -42,14 +50,18 @@ function useScrollToBottom({ ref }) {
     handleScroll();
 
     return () => {
-      ref.current?.removeEventListener('scroll', handleScroll);
+      if (el) {
+        el.removeEventListener('scroll', handleScroll);
+      }
     };
   }, [ref]);
 
   return showScrollBottom;
 }
 
-function Messages<UserData, AIData>(props: MessagesProps<UserData, AIData>) {
+function Messages<UserData, AIData, SystemData>(
+  props: MessagesProps<UserData, AIData, SystemData>,
+) {
   const {
     refList,
     messages,
@@ -129,15 +141,15 @@ function Messages<UserData, AIData>(props: MessagesProps<UserData, AIData>) {
                 renderMessage?.({ message })
               ) : (
                 <>
-                  {message.type === EnumChatMessageType.SYSTEM && message.system && (
+                  {message.type === EnumMessageType.SYSTEM && message.system && (
                     <div className="flex justify-center">
                       {renderMessageOfSystem?.({ message })}
                     </div>
                   )}
-                  {message.type !== EnumChatMessageType.SYSTEM && message.user && (
+                  {message.type !== EnumMessageType.SYSTEM && message.user && (
                     <div className="flex justify-end">{renderMessageOfUser?.({ message })}</div>
                   )}
-                  {message.type !== EnumChatMessageType.SYSTEM && message.ai && (
+                  {message.type !== EnumMessageType.SYSTEM && message.ai && (
                     <div className="flex justify-start">{renderMessageOfAI?.({ message })}</div>
                   )}
                 </>

package/src/store/index.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { create } from 'zustand';
-import type { ChatMessage } from './types';
+
+import type { Message } from './types';
 
 interface BaseSenderValue {
   text?: string;
@@ -9,17 +10,18 @@ interface BaseSenderValue {
 interface ChatStore<
   UserData extends BaseSenderValue,
   AIData,
+  SystemData,
   ContextData extends Record<string, any>,
 > {
   senderValue?: UserData;
   setSenderValue: (senderValue?: UserData) => void;
 
-  messages: ChatMessage<UserData, AIData>[];
-  setMessages: (messages: ChatMessage<UserData, AIData>[]) => void;
-  addMessage: (message: ChatMessage<UserData, AIData>) => void;
-  updateMessage: (message: ChatMessage<UserData, AIData>) => void;
-  setMessagesBefore: (messages: ChatMessage<UserData, AIData>[]) => void;
-  setMessagesAfter: (messages: ChatMessage<UserData, AIData>[]) => void;
+  messages: Message<UserData, AIData, SystemData>[];
+  setMessages: (messages: Message<UserData, AIData, SystemData>[]) => void;
+  addMessage: (message: Message<UserData, AIData, SystemData>) => void;
+  updateMessage: (message: Message<UserData, AIData, SystemData>) => void;
+  setMessagesBefore: (messages: Message<UserData, AIData, SystemData>[]) => void;
+  setMessagesAfter: (messages: Message<UserData, AIData, SystemData>[]) => void;
 
   /** 存放Chat的上下文数据 */
   contextData?: ContextData;
@@ -36,114 +38,117 @@ interface ChatStore<
 function createChatStore<
   UserData extends BaseSenderValue,
   AIData,
+  SystemData,
   ContextData extends Record<string, any> = any,
 >() {
-  const useChatStore = create<ChatStore<UserData, AIData, ContextData>>((set, get, store) => ({
-    senderValue: undefined,
-    setSenderValue: (senderValue) => {
-      set(() => ({ senderValue }));
-    },
-
-    messages: [],
-    setMessages: (messages) => {
-      set(() => ({
-        messages: messages.map((message) => ({
-          // 如果没有，则用当前的时间
-          createdAt: Date.now(),
-          updatedAt: Date.now(),
-          ...message,
-        })),
-      }));
-    },
-    addMessage: (message) => {
-      set((state) => ({
-        messages: [
-          ...state.messages,
-          {
-            ...message,
-            // 覆盖
+  const useChatStore = create<ChatStore<UserData, AIData, SystemData, ContextData>>(
+    (set, get, store) => ({
+      senderValue: undefined,
+      setSenderValue: (senderValue) => {
+        set(() => ({ senderValue }));
+      },
+
+      messages: [],
+      setMessages: (messages) => {
+        set(() => ({
+          messages: messages.map((message) => ({
+            // 如果没有，则用当前的时间
             createdAt: Date.now(),
             updatedAt: Date.now(),
-          },
-        ],
-      }));
-    },
-    updateMessage: (message) => {
-      set((state) => ({
-        messages: state.messages.map((m) => {
-          if (m.uuid === message.uuid) {
-            return {
+            ...message,
+          })),
+        }));
+      },
+      addMessage: (message) => {
+        set((state) => ({
+          messages: [
+            ...state.messages,
+            {
               ...message,
               // 覆盖
+              createdAt: Date.now(),
               updatedAt: Date.now(),
-            };
-          }
-          return m;
-        }),
-      }));
-    },
-    setMessagesBefore: (messagesBefore) => {
-      if (messagesBefore.length === 0) {
-        return;
-      }
-
-      const messages = get().messages;
-
-      const lastMessageBefore = messagesBefore[messagesBefore.length - 1];
-      const index = messages.findIndex((message) => message.uuid === lastMessageBefore.uuid);
-
-      // 如果 index 非 -1，则合并
-      // 如果 index -1，-1 + 1 为 0，即全取 message，也适用
-      const newMessages = [...messagesBefore, ...messages.slice(index + 1)];
-
-      set({
-        messages: newMessages,
-      });
-    },
-    setMessagesAfter: (messagesAfter) => {
-      if (messagesAfter.length === 0) {
-        return;
-      }
-
-      const messages = get().messages;
-
-      const firstMessageAfter = messagesAfter[0];
-      const index = messages.findIndex((message) => message.uuid === firstMessageAfter.uuid);
-
-      // 如果 index 非 -1，则合并
-      // 如果 index -1，-1 + 1 为 0，即全取 message，也适用
-      const newMessages = [...messages.slice(0, index), ...messagesAfter];
-
-      set({
-        messages: newMessages,
-      });
-    },
-    contextData: undefined,
-    setContextData: (contextData) => {
-      set({ contextData });
-    },
-    setContextDataWithField: (field, contextDataValue) => {
-      const preContextData = get().contextData;
-      set({
-        contextData: {
-          ...preContextData,
-          [field]: contextDataValue,
-        } as ContextData,
-      });
-    },
-    setContextDataPartial: (contextDataPartial) => {
-      const preContextData = get().contextData;
-      set({
-        contextData: {
-          ...preContextData,
-          ...contextDataPartial,
-        } as ContextData,
-      });
-    },
-    reset: () => {
-      set(store.getInitialState());
-    },
-  }));
+            },
+          ],
+        }));
+      },
+      updateMessage: (message) => {
+        set((state) => ({
+          messages: state.messages.map((m) => {
+            if (m.uuid === message.uuid) {
+              return {
+                ...message,
+                // 覆盖
+                updatedAt: Date.now(),
+              };
+            }
+            return m;
+          }),
+        }));
+      },
+      setMessagesBefore: (messagesBefore) => {
+        if (messagesBefore.length === 0) {
+          return;
+        }
+
+        const messages = get().messages;
+
+        const lastMessageBefore = messagesBefore[messagesBefore.length - 1];
+        const index = messages.findIndex((message) => message.uuid === lastMessageBefore.uuid);
+
+        // 如果 index 非 -1，则合并
+        // 如果 index -1，-1 + 1 为 0，即全取 message，也适用
+        const newMessages = [...messagesBefore, ...messages.slice(index + 1)];
+
+        set({
+          messages: newMessages,
+        });
+      },
+      setMessagesAfter: (messagesAfter) => {
+        if (messagesAfter.length === 0) {
+          return;
+        }
+
+        const messages = get().messages;
+
+        const firstMessageAfter = messagesAfter[0];
+        const index = messages.findIndex((message) => message.uuid === firstMessageAfter.uuid);
+
+        // 如果 index 非 -1，则合并
+        // 如果 index -1，-1 + 1 为 0，即全取 message，也适用
+        const newMessages = [...messages.slice(0, index), ...messagesAfter];
+
+        set({
+          messages: newMessages,
+        });
+      },
+      contextData: undefined,
+      setContextData: (contextData) => {
+        set({ contextData });
+      },
+      setContextDataWithField: (field, contextDataValue) => {
+        const preContextData = get().contextData;
+        set({
+          contextData: {
+            ...preContextData,
+            [field]: contextDataValue,
+          } as ContextData,
+        });
+      },
+      setContextDataPartial: (contextDataPartial) => {
+        const preContextData = get().contextData;
+        set({
+          contextData: {
+            ...preContextData,
+            ...contextDataPartial,
+          } as ContextData,
+        });
+      },
+      reset: () => {
+        set(store.getInitialState());
+      },
+    }),
+  );
 
   const useChatStoreComputed = () => {
     const messages = useChatStore((state) => state.messages);

package/src/store/types.ts

@@ -1,39 +1,34 @@
-enum EnumChatMessageType {
+enum EnumMessageType {
   SYSTEM = 'system',
 }
 
-enum EnumChatMessageStatus {
+enum EnumMessageStatus {
   PENDING = 'pending',
   STREAMING = 'streaming',
   DONE = 'done',
   ERROR = 'error',
 }
 
-interface ChatMessageOfSystem {
-  data?: any;
+interface MessageOfSystem<SystemData> {
+  data?: SystemData;
 }
 
-interface ChatMessageOfUser {
-  text?: string;
-  files?: string[];
-}
-
-interface ChatMessageOfAI<AIData> {
+interface MessageOfAI<AIData> {
   data?: AIData;
   error?: any;
   // 其他字段，根据业务需要使用
   session_id?: string;
 }
 
-interface ChatMessage<UserData, AIData> {
+interface Message<UserData, AIData, SystemData> {
   uuid: string;
 
-  status?: EnumChatMessageStatus;
+  status?: EnumMessageStatus;
 
-  type?: EnumChatMessageType;
-  system?: ChatMessageOfSystem;
+  type?: EnumMessageType;
+  system?: MessageOfSystem<SystemData>;
   user?: UserData;
-  ai?: ChatMessageOfAI<AIData>;
+  ai?: MessageOfAI<AIData>;
 
   /** 自动生成 */
   createdAt?: number;
@@ -41,6 +36,6 @@ interface ChatMessage<UserData, AIData> {
   updatedAt?: number;
 }
 
-export { EnumChatMessageStatus, EnumChatMessageType };
+export { EnumMessageStatus, EnumMessageType };
 
-export type { ChatMessage, ChatMessageOfAI, ChatMessageOfUser };
+export type { Message, MessageOfAI, MessageOfSystem };