@fe-free/ai 4.1.7 → 4.1.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 4.1.9
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.9
+  - @fe-free/icons@4.1.9
+  - @fe-free/tool@4.1.9
+
+## 4.1.8
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.8
+  - @fe-free/icons@4.1.8
+  - @fe-free/tool@4.1.8
+
 ## 4.1.7
 
 ### Patch Changes

package/package.json

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

package/src/ai.stories.tsx

@@ -0,0 +1,155 @@
+import type { ChatMessage, MSenderProps } from '@fe-free/ai';
+import {
+  Chat,
+  createChatStore,
+  EnumChatMessageStatus,
+  generateUUID,
+  Messages,
+  MSender,
+} from '@fe-free/ai';
+import { sleep } from '@fe-free/tool';
+import type { Meta } from '@storybook/react-vite';
+import { set } from 'lodash-es';
+import { useCallback, useEffect, useMemo } from 'react';
+
+const meta: Meta = {
+  title: '@fe-free/ai/Example',
+  tags: ['autodocs'],
+};
+
+interface AIData {
+  text?: string;
+}
+
+async function fakeFetchStream(v: MSenderProps['value'], { onUpdate }) {
+  // 这里模拟 fetchStream
+  await sleep(1000);
+
+  let count = 0;
+  const timer = setInterval(() => {
+    if (count > 50) {
+      clearInterval(timer);
+      onUpdate({ event: 'done', data: '' });
+    } else {
+      onUpdate({ event: 'message', data: '回复' + count });
+      count++;
+    }
+  }, 300);
+}
+
+function Component() {
+  const { useChatStore, useChatStoreComputed } = useMemo(() => {
+    return createChatStore<MSenderProps['value'], AIData>();
+  }, []);
+
+  const senderValue = useChatStore((state) => state.senderValue);
+  const setSenderValue = useChatStore((state) => state.setSenderValue);
+  const messages = useChatStore((state) => state.messages);
+  const addMessage = useChatStore((state) => state.addMessage);
+  const updateMessage = useChatStore((state) => state.updateMessage);
+  const { chatStatus } = useChatStoreComputed();
+
+  const loading =
+    chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
+
+  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 handleSubmit = useCallback((v) => {
+    console.log('onSubmit', v);
+
+    const message: ChatMessage<AIData> = {
+      uuid: generateUUID(),
+      status: EnumChatMessageStatus.PENDING,
+      user: {
+        ...v,
+      },
+    };
+
+    addMessage(message);
+
+    // fake
+    fakeFetchStream(v, {
+      onUpdate: ({ event, data }) => {
+        if (event === 'message') {
+          message.status = EnumChatMessageStatus.STREAMING;
+
+          const preText = message.ai?.data?.text || '';
+          set(message, 'ai.data.text', preText + data);
+
+          updateMessage({
+            ...message,
+          });
+        }
+        if (event === 'done') {
+          message.status = EnumChatMessageStatus.DONE;
+          updateMessage({
+            ...message,
+          });
+        }
+      },
+    });
+  }, []);
+
+  return (
+    <div className="h-[800px] w-[500px] border border-red-500">
+      <Chat
+        end={
+          <div className="p-2">
+            <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>
+          )}
+        />
+      </Chat>
+    </div>
+  );
+}
+
+export const Default = {
+  render: () => {
+    return <Component />;
+  },
+};
+
+export default meta;

package/src/chat/index.tsx

@@ -0,0 +1,26 @@
+import { PageLayout } from '@fe-free/core';
+
+function Chat({
+  end,
+  endClassName,
+  children,
+  childrenClassName,
+}: {
+  end?: React.ReactNode;
+  endClassName?: string;
+  children?: React.ReactNode;
+  childrenClassName?: string;
+}) {
+  return (
+    <PageLayout
+      direction="vertical"
+      end={end}
+      endClassName={endClassName}
+      childrenClassName={childrenClassName}
+    >
+      {children}
+    </PageLayout>
+  );
+}
+
+export { Chat };

package/src/helper.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { range } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
 
 function RecordLoading({
   count = 4,
@@ -28,4 +29,8 @@ function RecordLoading({
   );
 }
 
-export { RecordLoading };
+function generateUUID() {
+  return uuidv4();
+}
+
+export { generateUUID, RecordLoading };

package/src/index.ts

@@ -1,8 +1,16 @@
+import './style.scss';
+export { Chat } from './chat';
 export { FileView, FileViewList } from './files';
+export { generateUUID } from './helper';
 export { MSender } from './m_sender';
 export type { MSenderProps, MSenderRef } from './m_sender';
+export { Messages } from './messages';
+export type { MessagesProps } 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 { fetchStream } from './stream';
 export { Tip } from './tip';
-import './style.scss';
+export { recordAudioOfPCM } from './voice';

package/src/m_sender/index.tsx

@@ -58,7 +58,7 @@ function MSender(originProps: MSenderProps) {
       <div
         ref={refContainer}
         className={classNames(
-          'fea-m-sender relative flex items-end rounded-full border border-01 bg-white p-2',
+          'fea-m-sender relative flex items-end rounded-xl border border-01 bg-white p-2',
         )}
       >
         {allowSpeech && !value?.text && (

package/src/m_sender/record.tsx

@@ -159,7 +159,7 @@ function RecordAction(props: MSenderProps & { setType }) {
 
   return (
     <div
-      className={classNames('absolute inset-0 flex items-center justify-center rounded-full', {
+      className={classNames('absolute inset-0 flex items-center justify-center rounded-xl', {
         'bg-white': !isRecording,
         'bg-red-500': isRecording && isCancel,
         'bg-primary': isRecording && !isCancel,

package/src/m_sender/types.ts

@@ -9,10 +9,10 @@ interface MSenderValue {
 
 interface MSenderProps {
   value?: MSenderValue;
-  onChange: (value?: MSenderValue) => void;
+  onChange?: (value?: MSenderValue) => void;
 
   loading?: boolean;
-  onSubmit: (value?: MSenderValue) => void | Promise<void>;
+  onSubmit?: (value?: MSenderValue) => void | Promise<void>;
 
   placeholder?: string;
 
@@ -24,7 +24,7 @@ interface MSenderProps {
     onRecordEnd?: (isSend: boolean) => Promise<void>;
   };
 
-  defaultType: 'input' | 'record';
+  defaultType?: 'input' | 'record';
   statement?: string | false;
 }
 

package/src/messages/index.tsx

@@ -0,0 +1,68 @@
+import { PageLayout } from '@fe-free/core';
+import { useEffect, useMemo, useRef } from 'react';
+import type { ChatMessage } from '../store/types';
+
+interface MessagesProps<AIData> {
+  messages?: ChatMessage<AIData>[];
+  renderMessageOfUser?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  renderMessageOfAI?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+}
+
+function Messages<AIData>(props: MessagesProps<AIData>) {
+  const { messages, renderMessageOfUser, renderMessageOfAI } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const lastMessage = useMemo(() => {
+    return messages?.[messages.length - 1];
+  }, [messages]);
+
+  // 首次和更新时滚动到最新消息
+  useEffect(() => {
+    if (!lastMessage) {
+      return;
+    }
+
+    const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [lastMessage?.uuid]);
+
+  // 数据更新是，如果 dom 处于可视区域，则滚动
+  useEffect(() => {
+    if (!lastMessage || !ref.current) {
+      return;
+    }
+
+    const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
+    if (!element) {
+      return;
+    }
+
+    const { top: listTop, bottom: listBottom } = ref.current!.getBoundingClientRect();
+    const { top, bottom } = element.getBoundingClientRect();
+
+    // 如果最后一个元素可见，则滚动到底部
+    const isVisible = top < listBottom && bottom > listTop;
+    if (isVisible) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [lastMessage?.updatedAt]);
+
+  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>
+        ))}
+      </div>
+    </PageLayout>
+  );
+}
+
+export { Messages };
+export type { MessagesProps };

package/src/sender/index.tsx

@@ -100,7 +100,7 @@ function Sender(originProps: SenderProps) {
       <div
         ref={refContainer}
         className={classNames(
-          'fea-sender relative flex flex-col rounded-lg border border-01 bg-white p-2',
+          'fea-sender relative flex flex-col rounded-xl border border-01 bg-white p-2',
           {
             'fea-sender-drag-hover': dragHover,
           },

package/src/sender/types.ts

@@ -9,10 +9,10 @@ interface SenderValue {
 
 interface SenderProps {
   value?: SenderValue;
-  onChange: (value?: SenderValue) => void;
+  onChange?: (value?: SenderValue) => void;
 
   loading?: boolean;
-  onSubmit: (value?: SenderValue) => void | Promise<void>;
+  onSubmit?: (value?: SenderValue) => void | Promise<void>;
 
   placeholder?: string;
 

package/src/store/index.ts

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { create } from 'zustand';
+import type { ChatMessage } from './types';
+
+interface ChatStore<Value, AIData> {
+  senderValue?: Value;
+  setSenderValue: (senderValue?: Value) => void;
+
+  messages: ChatMessage<AIData>[];
+  addMessage: (message: ChatMessage<AIData>) => void;
+  updateMessage: (message: ChatMessage<AIData>) => void;
+
+  reset: () => void;
+}
+
+function createChatStore<Value, AIData>() {
+  const useChatStore = create<ChatStore<Value, AIData>>((set, get, store) => ({
+    senderValue: undefined,
+    setSenderValue: (senderValue) => {
+      set(() => ({ senderValue }));
+    },
+    messages: [],
+    addMessage: (message) => {
+      set((state) => ({
+        messages: [
+          ...state.messages,
+          {
+            ...message,
+            updatedAt: Date.now(),
+          },
+        ],
+      }));
+    },
+    updateMessage: (message) => {
+      set((state) => ({
+        messages: state.messages.map((m) => {
+          if (m.uuid === message.uuid) {
+            return {
+              ...message,
+              updatedAt: Date.now(),
+            };
+          }
+          return m;
+        }),
+      }));
+    },
+    reset: () => {
+      set(store.getInitialState());
+    },
+  }));
+
+  const useChatStoreComputed = () => {
+    const messages = useChatStore((state) => state.messages);
+
+    const chatStatus = useMemo(() => {
+      return messages[messages.length - 1]?.status;
+    }, [messages]);
+
+    return {
+      chatStatus,
+    };
+  };
+
+  return {
+    useChatStore,
+    useChatStoreComputed,
+  };
+}
+
+export { createChatStore };

package/src/store/types.ts

@@ -0,0 +1,32 @@
+enum EnumChatMessageType {
+  SYSTEM = 'system',
+}
+
+enum EnumChatMessageStatus {
+  PENDING = 'pending',
+  STREAMING = 'streaming',
+  DONE = 'done',
+  ERROR = 'error',
+}
+
+interface ChatMessageOfUser {
+  text?: string;
+  files?: string[];
+}
+
+interface ChatMessageOfAI<AIData> {
+  data?: AIData;
+}
+
+interface ChatMessage<AIData> {
+  uuid: string;
+  updatedAt?: number;
+  type?: EnumChatMessageType;
+  status?: EnumChatMessageStatus;
+  user?: ChatMessageOfUser;
+  ai?: ChatMessageOfAI<AIData>;
+}
+
+export { EnumChatMessageStatus, EnumChatMessageType };
+
+export type { ChatMessage, ChatMessageOfAI, ChatMessageOfUser };

package/src/voice/index.ts

@@ -0,0 +1,33 @@
+async function recordAudioOfPCM({ onAudio }: { onAudio: (data: ArrayBufferLike) => void }) {
+  // --- 初始化音频 ---
+  const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  const audioContext = new AudioContext({ sampleRate: 16000 });
+  const sourceNode = audioContext.createMediaStreamSource(micStream);
+  // ScriptProcessorNode（4096 是稳定 buffer）
+  const processorNode = audioContext.createScriptProcessor(4096, 1, 1);
+
+  processorNode.onaudioprocess = function (event) {
+    const float32Data = event.inputBuffer.getChannelData(0); // float32
+
+    // === 转成 Int16 PCM ===
+    const pcm16 = new Int16Array(float32Data.length);
+    for (let i = 0; i < float32Data.length; i++) {
+      const s = Math.max(-1, Math.min(1, float32Data[i]));
+      pcm16[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
+    }
+
+    onAudio(pcm16.buffer);
+  };
+
+  sourceNode.connect(processorNode);
+  processorNode.connect(audioContext.destination);
+
+  return () => {
+    if (processorNode) processorNode.disconnect();
+    if (sourceNode) sourceNode.disconnect();
+    if (audioContext) audioContext.close();
+    if (micStream) micStream.getTracks().forEach((track) => track.stop());
+  };
+}
+
+export { recordAudioOfPCM };