@fe-free/ai 4.1.10 → 4.1.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 4.1.12
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.12
+  - @fe-free/icons@4.1.12
+  - @fe-free/tool@4.1.12
+
+## 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.12",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -15,10 +15,11 @@
     "lodash-es": "^4.17.21",
     "uuid": "^13.0.0",
     "zustand": "^4.5.7",
-    "@fe-free/core": "4.1.10"
+    "@fe-free/core": "4.1.12"
   },
   "peerDependencies": {
     "@ant-design/x-sdk": "^2.1.3",
+    "@ant-design/x": "^2.1.3",
     "antd": "^5.27.1",
     "dayjs": "~1.11.10",
     "i18next": "^25.7.2",
@@ -26,8 +27,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.12",
+    "@fe-free/tool": "4.1.12"
   },
   "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,7 @@ import {
 } from '@fe-free/ai';
 import { sleep } from '@fe-free/tool';
 import type { Meta } from '@storybook/react-vite';
+import { Button, Divider } from 'antd';
 import { set } from 'lodash-es';
 import { useCallback, useEffect, useMemo } from 'react';
 
@@ -46,38 +48,22 @@ 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;
-
+  // 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));
+    }
   }, []);
 
+  const loading =
+    chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
+
   const handleSubmit = useCallback((v) => {
     console.log('onSubmit', v);
 
@@ -100,70 +86,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/chat/index.tsx

@@ -1,11 +1,15 @@
 import { PageLayout } from '@fe-free/core';
 
 function Chat({
+  start,
+  startClassName,
   end,
   endClassName,
   children,
   childrenClassName,
 }: {
+  start?: React.ReactNode;
+  startClassName?: string;
   end?: React.ReactNode;
   endClassName?: string;
   children?: React.ReactNode;
@@ -14,6 +18,8 @@ function Chat({
   return (
     <PageLayout
       direction="vertical"
+      start={start}
+      startClassName={startClassName}
       end={end}
       endClassName={endClassName}
       childrenClassName={childrenClassName}

package/src/helper.tsx

@@ -30,7 +30,7 @@ function RecordLoading({
           style={{
             height: '4px',
             width: '2px',
-            animation: `sender-rectangle-${color} infinite 1s ease-in-out ${getAnimationDelay(index)}s`,
+            animation: `fea-sender-rectangle-${color} infinite 1s ease-in-out ${getAnimationDelay(index)}s`,
           }}
         />
       ))}

package/src/index.ts

@@ -4,8 +4,8 @@ export { FileView, FileViewList } from './files';
 export { generateUUID } from './helper';
 export { MSender } from './m_sender';
 export type { MSenderProps, MSenderRef } from './m_sender';
-export { MessageActions, Messages } from './messages';
-export type { MessagesProps } from './messages';
+export { MessageActions, MessageThink, Messages } from './messages';
+export type { MessageThinkProps, MessagesProps } from './messages';
 export { Sender } from './sender';
 export type { SenderProps, SenderRef } from './sender';
 export { createChatStore } from './store';

package/src/messages/index.tsx

@@ -1,3 +1,5 @@
 export { MessageActions } from './message_actions';
+export { MessageThink } from './message_think';
+export type { MessageThinkProps } from './message_think';
 export { Messages } from './messages';
 export type { MessagesProps } from './messages';

package/src/messages/message_think.tsx

@@ -0,0 +1,31 @@
+import { Think } from '@ant-design/x';
+import Icons from '@fe-free/icons';
+import classNames from 'classnames';
+import ThinkIcon from '../svgs/think.svg?react';
+
+interface MessageThinkProps {
+  title: string;
+  icon?: React.ReactNode;
+  loading?: boolean;
+  children?: React.ReactNode;
+  type?: 'deepSeek';
+}
+
+function MessageThink({ title, icon, loading, children, type }: MessageThinkProps) {
+  return (
+    <Think
+      title={title}
+      icon={icon || <Icons component={ThinkIcon} className="!text-sm" />}
+      loading={loading}
+      blink={loading}
+      className={classNames('fea-message-think', {
+        'fea-message-think-deep-seek': type === 'deepSeek',
+      })}
+    >
+      {children}
+    </Think>
+  );
+}
+
+export { MessageThink };
+export type { MessageThinkProps };

package/src/messages/messages.stories.tsx

@@ -0,0 +1,45 @@
+import { MessageThink } from '@fe-free/ai';
+import { CheckCircleOutlined } from '@fe-free/icons';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof MessageThink> = {
+  title: '@fe-free/ai/MessageThink',
+  component: MessageThink,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MessageThink>;
+
+export const Default: Story = {
+  args: {
+    title: '思考',
+    children: '这是 Think 的内容',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    title: '思考中...',
+    loading: true,
+    children: '这是 Think 的内容',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    title: '思考',
+    children: '这是 Think 的内容',
+    icon: <CheckCircleOutlined className="text-green08" />,
+  },
+};
+
+export const DeepSeek: Story = {
+  args: {
+    title: '思考中...',
+    loading: true,
+    children: '这是 Think 的内容',
+    type: 'deepSeek',
+  },
+};
+
+export default meta;

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,51 @@ 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, ContextData = any> {
   senderValue?: Value;
   setSenderValue: (senderValue?: Value) => void;
 
   messages: ChatMessage<AIData>[];
+  setMessages: (messages: ChatMessage<AIData>[]) => void;
   addMessage: (message: ChatMessage<AIData>) => void;
   updateMessage: (message: ChatMessage<AIData>) => void;
 
+  /** 存放Chat的上下文数据 */
+  contextData?: ContextData;
+  setContextData: (contextData?: ContextData) => 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 +58,7 @@ function createChatStore<Value, AIData>() {
           if (m.uuid === message.uuid) {
             return {
               ...message,
+              // 覆盖
               updatedAt: Date.now(),
             };
           }
@@ -44,6 +66,10 @@ function createChatStore<Value, AIData>() {
         }),
       }));
     },
+    contextData: undefined,
+    setContextData: (contextData) => {
+      set(() => ({ contextData }));
+    },
     reset: () => {
       set(store.getInitialState());
     },

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 };

package/src/style.scss

@@ -1,4 +1,4 @@
-@keyframes sender-rectangle-white {
+@keyframes fea-sender-rectangle-white {
   0%,
   80%,
   100% {
@@ -12,7 +12,7 @@
   }
 }
 
-@keyframes sender-rectangle-primary {
+@keyframes fea-sender-rectangle-primary {
   0%,
   80%,
   100% {
@@ -25,3 +25,14 @@
     box-shadow: 0 -8px theme('colors.primary');
   }
 }
+
+.fea-message-think {
+  &:not(.fea-message-think-deep-seek) {
+    .ant-think-content {
+      border-inline-start: none;
+      background-color: theme('backgroundColor.01');
+      padding: 12px 16px;
+      border-radius: 8px;
+    }
+  }
+}

package/src/svgs/think.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.80022 0.000346623C10.3956 -0.0083669 10.97 0.146298 11.3912 0.566726C11.8123 0.987879 11.9677 1.56297 11.9583 2.1584C11.9496 2.75164 11.7782 3.41387 11.4935 4.09352C11.2145 4.7429 10.8741 5.36414 10.477 5.94878C10.9214 6.60592 11.2793 7.25436 11.5349 7.86575C11.8196 8.54541 11.9902 9.20764 11.9997 9.80088C12.0084 10.3963 11.853 10.9707 11.4326 11.3911C11.0114 11.8123 10.4363 11.9684 9.84088 11.9589C9.24763 11.9502 8.58613 11.7789 7.90575 11.4942C7.29726 11.2401 6.65318 10.8843 5.99894 10.4428C5.34543 10.8843 4.70135 11.2401 4.09286 11.4942C3.4132 11.7789 2.75097 11.9502 2.15773 11.9589C1.5623 11.9684 0.987938 11.8123 0.566784 11.3918C0.14563 10.9707 -0.00903481 10.3963 0.000404838 9.80088C0.00911836 9.20691 0.179032 8.54541 0.463674 7.86575C0.719271 7.25436 1.0758 6.60592 1.52019 5.94878C1.12348 5.36412 0.783555 4.74287 0.505063 4.09352C0.220421 3.41387 0.0505076 2.75164 0.041068 2.1584C0.0323545 1.56297 0.186293 0.988605 0.607447 0.567452C1.0286 0.146298 1.60369 -0.00836689 2.19912 0.00107276C2.79236 0.00978629 3.45387 0.1797 4.13425 0.464342C4.72967 0.713403 5.35922 1.05831 5.99894 1.486C6.63866 1.05759 7.26966 0.713403 7.86509 0.464342C8.54474 0.1797 9.20624 0.00978628 9.80022 0.000346623ZM2.20638 6.89057C1.9225 7.33469 1.67575 7.80148 1.46863 8.28618C1.21667 8.88887 1.09468 9.40805 1.08814 9.81686C1.08233 10.2235 1.18835 10.4733 1.33648 10.6214C1.48533 10.7695 1.73585 10.8756 2.14175 10.8697C2.55056 10.8639 3.06974 10.7419 3.67243 10.49C4.15456 10.2835 4.61891 10.0377 5.06078 9.75514C4.53958 9.34105 4.04257 8.89738 3.57222 8.42632C3.0712 7.9253 2.61374 7.40829 2.20638 6.89057ZM9.7915 6.89057C8.95508 7.9533 7.99736 8.91467 6.93782 9.75514C7.4207 10.0601 7.88905 10.307 8.32618 10.49C8.92886 10.7419 9.44877 10.8639 9.85758 10.8697C10.2642 10.8763 10.514 10.7703 10.6621 10.6214C10.8103 10.4733 10.9163 10.2235 10.9105 9.81686C10.9039 9.40805 10.7819 8.88814 10.53 8.28618C10.3226 7.80147 10.0756 7.33468 9.7915 6.89057ZM5.99894 2.82208C5.39911 3.27502 4.83182 3.76951 4.30126 4.30192C3.78316 4.81841 3.30086 5.36961 2.85772 5.95168C3.31201 6.55419 3.80822 7.12392 4.34264 7.65663C4.86105 8.1765 5.41444 8.66026 5.99894 9.10453C6.5508 8.687 7.10992 8.20268 7.65596 7.65663C8.18989 7.12387 8.68561 6.55414 9.13944 5.95168C8.69678 5.36964 8.21497 4.81845 7.69735 4.30192C7.13824 3.74281 6.56459 3.24686 5.99894 2.82208ZM2.18242 1.08881C1.77579 1.083 1.526 1.18902 1.37787 1.33715C1.22974 1.486 1.12372 1.73579 1.12953 2.14242C1.13607 2.55123 1.25806 3.07041 1.51002 3.6731C1.68647 4.09498 1.92174 4.54445 2.21074 5.00917C2.62264 4.4922 3.06362 3.99909 3.53156 3.53223C4.01281 3.05013 4.52198 2.59673 5.05643 2.17437C4.5888 1.88319 4.13715 1.64648 3.71309 1.4693C3.11041 1.21734 2.59123 1.09535 2.18242 1.08881ZM9.81619 1.08881C9.40738 1.09607 8.88748 1.21734 8.28552 1.4693C7.86146 1.64648 7.40908 1.88319 6.94218 2.17365C7.47661 2.59602 7.98578 3.04942 8.46705 3.5315C8.93477 3.99886 9.37552 4.49245 9.78715 5.0099C10.0761 4.54518 10.3136 4.0957 10.49 3.67382C10.742 3.07114 10.864 2.55196 10.8698 2.14315C10.8763 1.73652 10.7703 1.48673 10.6215 1.33787C10.4733 1.18974 10.2235 1.08373 9.81692 1.08954L9.81619 1.08881Z"/>
+</svg>