@fe-free/ai 4.1.10 → 4.1.11

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @fe-free/ai
 
+## 4.1.11
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.11
+  - @fe-free/icons@4.1.11
+  - @fe-free/tool@4.1.11
+
 ## 4.1.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.10",
+  "version": "4.1.11",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -15,7 +15,7 @@
     "lodash-es": "^4.17.21",
     "uuid": "^13.0.0",
     "zustand": "^4.5.7",
-    "@fe-free/core": "4.1.10"
+    "@fe-free/core": "4.1.11"
   },
   "peerDependencies": {
     "@ant-design/x-sdk": "^2.1.3",
@@ -26,8 +26,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "4.1.10",
-    "@fe-free/tool": "4.1.10"
+    "@fe-free/icons": "4.1.11",
+    "@fe-free/tool": "4.1.11"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/ai.stories.tsx

@@ -3,6 +3,7 @@ import {
   Chat,
   createChatStore,
   EnumChatMessageStatus,
+  EnumChatMessageType,
   generateUUID,
   MessageActions,
   Messages,
@@ -10,6 +11,8 @@ import {
 } from '@fe-free/ai';
 import { sleep } from '@fe-free/tool';
 import type { Meta } from '@storybook/react-vite';
+import { useDebounce, useUpdateEffect } from 'ahooks';
+import { Button, Divider } from 'antd';
 import { set } from 'lodash-es';
 import { useCallback, useEffect, useMemo } from 'react';
 
@@ -46,37 +49,27 @@ function Component() {
   const senderValue = useChatStore((state) => state.senderValue);
   const setSenderValue = useChatStore((state) => state.setSenderValue);
   const messages = useChatStore((state) => state.messages);
+  const setMessages = useChatStore((state) => state.setMessages);
   const addMessage = useChatStore((state) => state.addMessage);
   const updateMessage = useChatStore((state) => state.updateMessage);
   const { chatStatus } = useChatStoreComputed();
 
-  const loading =
-    chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
+  const debounceCacheMessages = useDebounce(messages, { wait: 500 });
 
+  // init from cache
   useEffect(() => {
-    addMessage({
-      uuid: generateUUID(),
-      user: {
-        text: 'hello',
-      },
-      ai: {
-        data: {
-          text: '你好，\n我是AI，很高兴认识你',
-        },
-      },
-    });
-    addMessage({
-      uuid: generateUUID(),
-      user: {
-        text: 'hello',
-      },
-      ai: {
-        data: {
-          text: '你\n好，\n我\n是\nAI，\n很\n高\n兴\n认\n识\n你\n你\n好，\n我\n是\nAI，\n很\n高\n兴\n认\n识\n你\n很\n高\n兴\n认\n识\n你\n',
-        },
-      },
-    });
+    const cacheMessages = localStorage.getItem('chatMessages');
+    if (cacheMessages) {
+      setMessages(JSON.parse(cacheMessages));
+    }
   }, []);
+  // cache
+  useUpdateEffect(() => {
+    localStorage.setItem('chatMessages', JSON.stringify(debounceCacheMessages));
+  }, [debounceCacheMessages]);
+
+  const loading =
+    chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
 
   const handleSubmit = useCallback((v) => {
     console.log('onSubmit', v);
@@ -100,70 +93,101 @@ function Component() {
           const preText = message.ai?.data?.text || '';
           set(message, 'ai.data.text', preText + data);
 
-          updateMessage({
-            ...message,
-          });
+          // 假设有 session_id
+          set(message, 'ai.session_id', '123');
+
+          updateMessage(message);
         }
         if (event === 'done') {
           message.status = EnumChatMessageStatus.DONE;
-          updateMessage({
-            ...message,
-          });
+          updateMessage(message);
         }
       },
     });
   }, []);
 
   return (
-    <div className="h-[800px] w-[500px] border border-red-500">
-      <Chat
-        end={
-          <div
-            className="p-2"
-            onFocus={() => {
-              console.log('onFocus');
+    <div>
+      <div>
+        <Button
+          onClick={() => {
+            addMessage({
+              uuid: generateUUID(),
+              type: EnumChatMessageType.SYSTEM,
+              system: {
+                data: {
+                  type: 'new_session',
+                },
+              },
+            });
+          }}
+        >
+          Add New Session
+        </Button>
+      </div>
+      <div className="h-[800px] w-[500px] border border-red-500">
+        <Chat
+          end={
+            <div
+              className="p-2"
+              onFocus={() => {
+                console.log('onFocus');
+              }}
+              onBlur={() => {
+                console.log('onBlur');
+              }}
+            >
+              <MSender
+                value={senderValue}
+                onChange={(v) => setSenderValue(v)}
+                loading={loading}
+                onSubmit={handleSubmit}
+              />
+            </div>
+          }
+        >
+          <Messages
+            messages={messages}
+            renderMessageOfSystem={({ message }) => {
+              if (message.system?.data?.type === 'new_session') {
+                return <Divider>让我们聊点新内容吧</Divider>;
+              }
+
+              return null;
             }}
-            onBlur={() => {
-              console.log('onBlur');
+            renderMessageOfUser={({ message }) => {
+              return (
+                <div className="p-2">
+                  <div className="rounded-xl bg-primary p-2 text-white">{message.user?.text}</div>
+                </div>
+              );
             }}
-          >
-            <MSender
-              value={senderValue}
-              onChange={(v) => setSenderValue(v)}
-              loading={loading}
-              onSubmit={handleSubmit}
-            />
-          </div>
-        }
-      >
-        <Messages
-          messages={messages}
-          renderMessageOfUser={({ message }) => (
-            <div className="p-2">
-              <div className="rounded-xl bg-primary p-2 text-white">{message.user?.text}</div>
-            </div>
-          )}
-          renderMessageOfAI={({ message }) => (
-            <div className="p-2">
-              <div>{message.status}</div>
-              <pre className="whitespace-pre-wrap">{message.ai?.data?.text}</pre>
-              <div className="flex gap-2">
-                <MessageActions.Copy value={message.ai?.data?.text || ''} />
-                <MessageActions.Like
-                  onClick={async () => {
-                    // some thing
-                  }}
-                />
-                <MessageActions.Dislike
-                  onClick={async () => {
-                    // some thing
-                  }}
-                />
-              </div>
-            </div>
-          )}
-        />
-      </Chat>
+            renderMessageOfAI={({ message }) => {
+              return (
+                <div className="p-2">
+                  <div>
+                    status: {message.status} session_id: {message.ai?.session_id}
+                  </div>
+                  <pre className="whitespace-pre-wrap">{message.ai?.data?.text}</pre>
+                  <div className="flex gap-2">
+                    <MessageActions.Copy value={message.ai?.data?.text || ''} />
+                    <MessageActions.Like
+                      onClick={async () => {
+                        // some thing
+                      }}
+                    />
+                    <MessageActions.Dislike
+                      onClick={async () => {
+                        // some thing
+                      }}
+                    />
+                  </div>
+                </div>
+              );
+            }}
+          />
+        </Chat>
+      </div>
     </div>
   );
 }

package/src/messages/messages.tsx

@@ -1,15 +1,22 @@
 import { PageLayout } from '@fe-free/core';
 import { useEffect, useMemo, useRef } from 'react';
-import type { ChatMessage } from '../store/types';
+import { EnumChatMessageType, type ChatMessage } from '../store/types';
 
 interface MessagesProps<AIData> {
   messages?: ChatMessage<AIData>[];
+  /** 含所有 */
+  renderMessage?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  /** 系统消息 */
+  renderMessageOfSystem?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  /** 用户消息 */
   renderMessageOfUser?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  /** AI消息 */
   renderMessageOfAI?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
 }
 
 function Messages<AIData>(props: MessagesProps<AIData>) {
-  const { messages, renderMessageOfUser, renderMessageOfAI } = props;
+  const { messages, renderMessage, renderMessageOfSystem, renderMessageOfUser, renderMessageOfAI } =
+    props;
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -53,12 +60,29 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
   return (
     <PageLayout>
       <div ref={ref} className="flex h-full flex-col overflow-y-auto">
-        {messages?.map((message) => (
-          <div key={message.uuid} data-uuid={message.uuid} className="flex flex-col">
-            <div className="flex justify-end">{renderMessageOfUser?.({ message })}</div>
-            <div className="flex justify-start">{renderMessageOfAI?.({ message })}</div>
-          </div>
-        ))}
+        {messages?.map((message) => {
+          return (
+            <div key={message.uuid} data-uuid={message.uuid} className="flex flex-col">
+              {renderMessage ? (
+                renderMessage?.({ message })
+              ) : (
+                <>
+                  {message.type === EnumChatMessageType.SYSTEM && message.system && (
+                    <div className="flex justify-center">
+                      {renderMessageOfSystem?.({ message })}
+                    </div>
+                  )}
+                  {message.type !== EnumChatMessageType.SYSTEM && message.user && (
+                    <div className="flex justify-end">{renderMessageOfUser?.({ message })}</div>
+                  )}
+                  {message.type !== EnumChatMessageType.SYSTEM && message.ai && (
+                    <div className="flex justify-start">{renderMessageOfAI?.({ message })}</div>
+                  )}
+                </>
+              )}
+            </div>
+          );
+        })}
       </div>
     </PageLayout>
   );

package/src/store/index.ts

@@ -2,30 +2,47 @@ import { useMemo } from 'react';
 import { create } from 'zustand';
 import type { ChatMessage } from './types';
 
-interface ChatStore<Value, AIData> {
+interface BaseSenderValue {
+  text?: string;
+  files?: string[];
+}
+interface ChatStore<Value extends BaseSenderValue | undefined, AIData> {
   senderValue?: Value;
   setSenderValue: (senderValue?: Value) => void;
 
   messages: ChatMessage<AIData>[];
+  setMessages: (messages: ChatMessage<AIData>[]) => void;
   addMessage: (message: ChatMessage<AIData>) => void;
   updateMessage: (message: ChatMessage<AIData>) => void;
 
   reset: () => void;
 }
 
-function createChatStore<Value, AIData>() {
+function createChatStore<Value extends BaseSenderValue | undefined, AIData>() {
   const useChatStore = create<ChatStore<Value, AIData>>((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,
+            // 覆盖
+            createdAt: Date.now(),
             updatedAt: Date.now(),
           },
         ],
@@ -37,6 +54,7 @@ function createChatStore<Value, AIData>() {
           if (m.uuid === message.uuid) {
             return {
               ...message,
+              // 覆盖
               updatedAt: Date.now(),
             };
           }

package/src/store/types.ts

@@ -9,6 +9,10 @@ enum EnumChatMessageStatus {
   ERROR = 'error',
 }
 
+interface ChatMessageOfSystem {
+  data?: any;
+}
+
 interface ChatMessageOfUser {
   text?: string;
   files?: string[];
@@ -16,15 +20,24 @@ interface ChatMessageOfUser {
 
 interface ChatMessageOfAI<AIData> {
   data?: AIData;
+  /** 按需存取 */
+  session_id?: string;
 }
 
 interface ChatMessage<AIData> {
   uuid: string;
-  updatedAt?: number;
-  type?: EnumChatMessageType;
+
   status?: EnumChatMessageStatus;
+
+  type?: EnumChatMessageType;
+  system?: ChatMessageOfSystem;
   user?: ChatMessageOfUser;
   ai?: ChatMessageOfAI<AIData>;
+
+  /** 自动生成 */
+  createdAt?: number;
+  /** 自动更新 */
+  updatedAt?: number;
 }
 
 export { EnumChatMessageStatus, EnumChatMessageType };