@fe-free/ai 5.0.0 → 6.0.2

package/src/ai.stories.tsx

@@ -0,0 +1,228 @@
+import type { ChatMessage, MSenderProps } from '@fe-free/ai';
+import {
+  Chat,
+  createChatStore,
+  EnumChatMessageStatus,
+  EnumChatMessageType,
+  generateUUID,
+  getRecordAudioOfPCM,
+  Markdown,
+  MessageActions,
+  Messages,
+  MSender,
+} from '@fe-free/ai';
+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';
+
+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 setMessages = useChatStore((state) => state.setMessages);
+  const addMessage = useChatStore((state) => state.addMessage);
+  const updateMessage = useChatStore((state) => state.updateMessage);
+  const { chatStatus } = useChatStoreComputed();
+
+  const { message } = App.useApp();
+
+  // init from cache
+  useEffect(() => {
+    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);
+
+      const message: ChatMessage<MSenderProps['value'], 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);
+
+            // 假设有 session_id
+            set(message, 'ai.session_id', '123');
+
+            updateMessage(message);
+          }
+          if (event === 'done') {
+            message.status = EnumChatMessageStatus.DONE;
+            updateMessage(message);
+          }
+        },
+      });
+    },
+    [addMessage, updateMessage],
+  );
+
+  const { start: startRecord, stop: stopRecord } = useMemo(() => {
+    return getRecordAudioOfPCM();
+  }, []);
+
+  return (
+    <div>
+      <div>
+        <Button
+          onClick={() => {
+            addMessage({
+              uuid: generateUUID(),
+              type: EnumChatMessageType.SYSTEM,
+              system: {
+                data: {
+                  type: 'new_session',
+                },
+              },
+            });
+          }}
+        >
+          Add New Session
+        </Button>
+      </div>
+      <div className="h-[500px] w-[500px] max-w-full border border-red-500">
+        <Chat
+          end={
+            <div
+              className="p-2"
+              onFocus={() => {
+                console.log('onFocus');
+              }}
+              onBlur={() => {
+                console.log('onBlur');
+              }}
+            >
+              <div>这里是 suggestion 区域这里是 suggestion 区域</div>
+              <MSender
+                value={senderValue}
+                onChange={(v) => setSenderValue(v)}
+                loading={loading}
+                onSubmit={handleSubmit}
+                allowSpeech={{
+                  onRecordStart: async () => {
+                    console.log('onRecordStart');
+                    try {
+                      await startRecord({
+                        onAudio: (data) => {
+                          console.log('onAudio', data);
+                        },
+                        onError: (err) => {
+                          message.error(err.message);
+                        },
+                      });
+                    } catch (err) {
+                      console.error(err);
+                    }
+                  },
+                  onRecordEnd: async (isSend) => {
+                    console.log('onRecordEnd', isSend);
+                    const voiceData = await stopRecord();
+                    console.log('voiceData', voiceData);
+                  },
+                }}
+              />
+            </div>
+          }
+        >
+          <Messages
+            messages={messages}
+            renderMessageOfSystem={({ message }) => {
+              if (message.system?.data?.type === 'new_session') {
+                return <Divider>让我们聊点新内容吧</Divider>;
+              }
+
+              return null;
+            }}
+            renderMessageOfUser={({ message }) => {
+              return (
+                <div className="p-2">
+                  <div className="rounded-xl bg-primary p-2 text-white">{message.user?.text}</div>
+                </div>
+              );
+            }}
+            renderMessageOfAI={({ message }) => {
+              return (
+                <div className="max-w-full p-2">
+                  <div>
+                    status: {message.status} session_id: {message.ai?.session_id}
+                  </div>
+                  <Markdown content={message.ai?.data?.text || ''} />
+                  <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>
+  );
+}
+
+export const Default = {
+  render: () => {
+    return <Component />;
+  },
+};
+
+export default meta;

package/src/chat/index.tsx

@@ -0,0 +1,32 @@
+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;
+  childrenClassName?: string;
+}) {
+  return (
+    <PageLayout
+      direction="vertical"
+      start={start}
+      startClassName={startClassName}
+      end={end}
+      endClassName={endClassName}
+      childrenClassName={childrenClassName}
+    >
+      {children}
+    </PageLayout>
+  );
+}
+
+export { Chat };

package/src/files/files.stories.tsx

@@ -0,0 +1,22 @@
+import { FileViewList } from '@fe-free/ai';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof FileViewList> = {
+  title: '@fe-free/ai/FileViewList',
+  component: FileViewList,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FileViewList>;
+
+export const Default: Story = {
+  args: {
+    urls: [
+      'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
+      'https://minio-api-dev.pre-ai.pivotecho.cn/ai-agent/YWIW_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20260108121456_230_1.png',
+      'https://minio-api-dev.pre-ai.pivotecho.cn/ai-agent/3Uck_%E5%8D%8E%E4%BD%8FAI%E9%A2%84%E8%AE%A2%E7%AC%AC%E4%BA%8C%E8%BD%AEPOC%E8%A6%81%E6%B1%82%282%29.pdf',
+    ],
+  },
+};
+
+export default meta;

package/src/files/index.tsx

@@ -0,0 +1,56 @@
+import { FileCard } from '@fe-free/core';
+import { Image, Typography } from 'antd';
+import classNames from 'classnames';
+import './style.scss';
+
+function isUrl(url: string) {
+  return url.startsWith('http') || url.startsWith('https');
+}
+
+function FileView({
+  url,
+  isImage: propsIsImage,
+  size,
+  className,
+}: {
+  url: string;
+  size?: number;
+  isImage?: boolean;
+  className?: string;
+}) {
+  const isImage = propsIsImage ?? FileCard.isImage(url);
+
+  // 判断是 url 才 decodeURIComponent
+  const decodedUrl = isUrl(url) ? decodeURIComponent(url) : url;
+  const name = decodedUrl.split('/').pop() || decodedUrl;
+
+  return (
+    <div className={classNames('fea-file-view bg-01', className)}>
+      {isImage ? (
+        <Image width={60} height={60} src={url} />
+      ) : (
+        <div className="flex h-[60px] w-[250px] items-center rounded px-1">
+          <div className="flex min-w-0 items-center gap-1">
+            <FileCard.FileIcon name={name} className="text-4xl" />
+            <div className="flex flex-1 flex-col overflow-hidden">
+              {name && <Typography.Text ellipsis={{ tooltip: name }}>{name}</Typography.Text>}
+              {size && <div className="text-sm text-03">{FileCard.getFileSize(size)}</div>}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FileViewList({ urls }: { urls: string[] }) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {urls.map((url) => (
+        <FileView key={url} url={url} />
+      ))}
+    </div>
+  );
+}
+
+export { FileView, FileViewList };

package/src/files/style.scss

@@ -0,0 +1,7 @@
+.fea-file-view {
+  .ant-image {
+    .ant-image-img {
+      object-fit: cover;
+    }
+  }
+}

package/src/helper/complete.ts

@@ -0,0 +1,90 @@
+function completeHtml(partialHtml?: string) {
+  if (!partialHtml) {
+    return '';
+  }
+
+  // 创建一个临时容器来解析 HTML
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = partialHtml;
+
+  // 浏览器会自动修正不匹配的标签（如自动闭合、忽略无效标签等）
+  // 但 innerHTML 不会包含 <html>, <head>, <body> 等顶层结构
+  // 所以我们手动构建一个完整文档
+
+  // 提取 head 内容（如果有 <head> 标签，通常不会出现在片段中，但以防万一）
+  let headContent = '';
+  const headMatch = partialHtml.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
+  if (headMatch) {
+    headContent = headMatch[1] || '';
+  }
+
+  // 使用 tempDiv.innerHTML 获取浏览器修正后的 body 内容
+  const bodyContent = tempDiv.innerHTML;
+
+  // 构建完整 HTML
+  const fullHtml = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  ${headContent}
+</head>
+<body>
+  ${bodyContent}
+</body>
+</html>`;
+
+  return fullHtml;
+}
+
+function completeJson(partialJson?: string): string {
+  if (!partialJson) {
+    return '';
+  }
+
+  let result = partialJson.trim();
+
+  const stack: string[] = [];
+  let inString = false;
+  let escape = false;
+
+  for (let i = 0; i < result.length; i++) {
+    const char = result[i];
+
+    if (inString) {
+      if (escape) {
+        escape = false;
+      } else if (char === '\\') {
+        escape = true;
+      } else if (char === '"') {
+        inString = false;
+      }
+      continue;
+    }
+
+    if (char === '"') {
+      inString = true;
+      continue;
+    }
+
+    if (char === '{') stack.push('}');
+    else if (char === '[') stack.push(']');
+    else if (char === '}' || char === ']') stack.pop();
+  }
+
+  // 1️⃣ 如果字符串没闭合，补一个 "
+  if (inString) {
+    result += '"';
+  }
+
+  // 2️⃣ 去掉末尾非法逗号
+  result = result.replace(/,\s*([}\]])/g, '$1');
+
+  // 3️⃣ 补齐所有缺失的 } 或 ]
+  while (stack.length) {
+    result += stack.pop();
+  }
+
+  return result;
+}
+
+export { completeHtml, completeJson };

package/src/helper/index.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { range } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
+
+function getAnimationDelay(index: number) {
+  const arr = [0.1, 0.2, 0.4, 0.6, 0.8, 0.9];
+  return arr[index % arr.length];
+}
+
+function RecordLoading({
+  count = 4,
+  gap = 2,
+  color = 'white',
+}: {
+  count?: number;
+  height?: number;
+  width?: number;
+  gap?: number;
+  color?: 'white' | 'primary';
+}) {
+  return (
+    <div className="flex h-0 gap-[2px]" style={{ gap: `${gap}px` }}>
+      {range(count).map((index) => (
+        <div
+          key={index}
+          className={classNames({
+            'bg-white': color === 'white',
+            'bg-primary': color === 'primary',
+          })}
+          style={{
+            height: '4px',
+            width: '2px',
+            animation: `fea-sender-rectangle-${color} infinite 1s ease-in-out ${getAnimationDelay(index)}s`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function generateUUID() {
+  return uuidv4();
+}
+
+export { generateUUID, RecordLoading };

package/src/index.ts

@@ -1,3 +1,20 @@
+import './style.scss';
+
+export { CustomMarkdown, Markdown } from '@fe-free/core';
+export type { CustomMarkdownProps, MarkdownProps } from '@fe-free/core';
+export { Chat } from './chat';
+export { FileView, FileViewList } from './files';
+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 { 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';
+export { getRecordAudioOfBlob, getRecordAudioOfPCM } from './voice';

package/src/m_sender/actions.tsx

@@ -0,0 +1,65 @@
+import Icons from '@fe-free/icons';
+import { Button } from 'antd';
+import { useCallback, type RefObject } from 'react';
+import IconRecord from '../svgs/record.svg?react';
+import SendIcon from '../svgs/send.svg?react';
+import type { MSenderProps } from './types';
+
+function Actions(
+  props: MSenderProps & {
+    refText: RefObject<HTMLTextAreaElement | null>;
+    type: 'input' | 'record';
+    setType: (type: 'input' | 'record') => void;
+  },
+) {
+  const { loading, onSubmit, value, onChange, setType, allowSpeech } = props;
+
+  const isLoading = loading;
+
+  const handleSubmit = useCallback(async () => {
+    if (isLoading || value?.text?.trim() === '') {
+      return;
+    }
+
+    const newValue = {
+      ...value,
+      text: value?.text?.trim(),
+    };
+
+    // 有内容才提交
+    if (newValue.text || (newValue.files && newValue.files.length > 0)) {
+      await Promise.resolve(onSubmit?.(newValue));
+
+      // reset
+      onChange?.({});
+
+      // 移动端 不 focus
+      // refText.current?.focus();
+    }
+  }, [isLoading, value, onSubmit, onChange]);
+
+  return (
+    <div className="mr-1 flex items-center gap-2">
+      {allowSpeech && !value?.text ? (
+        <Button
+          type="primary"
+          shape="circle"
+          icon={<Icons component={IconRecord} className="h-[28px]! text-lg!" />}
+          onClick={() => {
+            setType('record');
+          }}
+        />
+      ) : (
+        <Button
+          type="primary"
+          shape="circle"
+          icon={<Icons component={SendIcon} className="h-[28px]! text-lg!" />}
+          loading={isLoading}
+          onClick={handleSubmit}
+        />
+      )}
+    </div>
+  );
+}
+
+export { Actions };

package/src/m_sender/index.tsx

@@ -0,0 +1,74 @@
+import { Input } from 'antd';
+import classNames from 'classnames';
+import { useMemo, useRef, useState, type RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Actions } from './actions';
+import { RecordAction } from './record';
+import type { MSenderProps, MSenderRef } from './types';
+
+function Text(props: MSenderProps & { refText: RefObject<HTMLTextAreaElement | null> }) {
+  const { value, onChange, placeholder, refText, autoFocus } = props;
+
+  return (
+    <Input.TextArea
+      ref={refText}
+      value={value?.text}
+      autoFocus={autoFocus}
+      onChange={(e) => {
+        onChange?.({ ...value, text: e.target.value });
+      }}
+      placeholder={placeholder}
+      autoSize={{ minRows: 1, maxRows: 3 }}
+      className="px-1 text-[15px]"
+      variant="borderless"
+    />
+  );
+}
+
+function useProps(originProps: MSenderProps) {
+  const { t } = useTranslation();
+
+  return useMemo(() => {
+    return {
+      ...originProps,
+      placeholder:
+        originProps.placeholder ?? t('@fe-free/ai.sender.describeYourQuestion', '描述你的问题'),
+      defaultType: originProps.defaultType ?? 'input',
+    };
+  }, [originProps, t]);
+}
+
+function MSender(originProps: MSenderProps) {
+  const refText = useRef<HTMLTextAreaElement>(null);
+
+  const props = useProps(originProps);
+  const { statement, defaultType } = props;
+
+  const [type, setType] = useState<'input' | 'record'>(defaultType);
+
+  const refContainer = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="fea-m-sender-wrap">
+      <div
+        ref={refContainer}
+        className={classNames(
+          'fea-m-sender relative flex items-end rounded-xl border border-01 bg-white p-2.5',
+        )}
+        style={{
+          boxShadow: '0px 2px 12px 0px #00000014',
+        }}
+      >
+        <div className="flex flex-1">
+          <Text {...props} refText={refText} />
+        </div>
+        <Actions {...props} refText={refText} type={type} setType={setType} />
+        {type === 'record' && <RecordAction {...props} refText={refText} setType={setType} />}
+      </div>
+      {statement && <div className="mt-1 text-center text-xs text-04">*{statement}</div>}
+    </div>
+  );
+}
+
+export { MSender };
+export type { MSenderProps, MSenderRef };