@fe-free/ai 4.1.5 → 4.1.7

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -12,9 +12,11 @@
   "dependencies": {
     "ahooks": "^3.7.8",
     "classnames": "^2.5.1",
-    "@fe-free/core": "4.1.5"
+    "lodash-es": "^4.17.21",
+    "@fe-free/core": "4.1.7"
   },
   "peerDependencies": {
+    "@ant-design/x-sdk": "^2.1.3",
     "antd": "^5.27.1",
     "dayjs": "~1.11.10",
     "i18next": "^25.7.2",
@@ -22,8 +24,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "4.1.5",
-    "@fe-free/tool": "4.1.5"
+    "@fe-free/tool": "4.1.7",
+    "@fe-free/icons": "4.1.7"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

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,41 @@
+import { FileCard } from '@fe-free/core';
+import { Image } from 'antd';
+import './style.scss';
+
+function isUrl(url: string) {
+  return url.startsWith('http') || url.startsWith('https');
+}
+
+function FileView({ url, isImage: propsIsImage }: { url: string; isImage?: boolean }) {
+  const isImage = propsIsImage ?? FileCard.isImage(url);
+
+  // 判断是 url 才 decodeURIComponent
+  const decodedUrl = isUrl(url) ? decodeURIComponent(url) : url;
+  const name = decodedUrl.split('/').pop() || decodedUrl;
+
+  return (
+    <div className="fea-file-view">
+      {isImage ? (
+        <Image width={60} height={60} src={url} />
+      ) : (
+        <div className="flex h-[60px] w-[250px] items-center rounded bg-01 px-1">
+          <div className="min-w-0">
+            <FileCard name={name} />
+          </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/index.ts

@@ -1,6 +1,8 @@
+export { FileView, FileViewList } from './files';
 export { MSender } from './m_sender';
 export type { MSenderProps, MSenderRef } from './m_sender';
 export { Sender } from './sender';
 export type { SenderProps, SenderRef } from './sender';
+export { fetchStream } from './stream';
 export { Tip } from './tip';
 import './style.scss';

package/src/sender/files.tsx

@@ -5,6 +5,7 @@ import { App, Button, Dropdown, Input, Modal, Upload } from 'antd';
 import type { RefObject } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FileView } from '../files';
 import FilesIcon from '../svgs/files.svg?react';
 import type { SenderProps } from './types';
 
@@ -136,16 +137,9 @@ function UploadFileItem({ file, onDelete }: { file: UploadFile; onDelete: () =>
   return (
     <div className="group relative">
       {isImage ? (
-        <img
-          src={file.originFileObj && URL.createObjectURL(file.originFileObj)}
-          className="h-[53px] w-[53px] rounded-lg border border-01 bg-01 object-cover"
-        />
+        <FileView url={URL.createObjectURL(file.originFileObj!)} isImage={isImage} />
       ) : (
-        <div className="flex h-[53px] w-[200px] items-center rounded bg-01 px-1">
-          <div className="min-w-0">
-            <FileCard name={file.name} size={file.size} />
-          </div>
-        </div>
+        <FileView url={file.name} />
       )}
       {!isDone && (
         <div className="absolute inset-0 flex items-center justify-center bg-01/80">
@@ -163,7 +157,7 @@ function UploadFileItem({ file, onDelete }: { file: UploadFile; onDelete: () =>
 function UrlFileItem({ url, onDelete }: { url: string; onDelete: () => void }) {
   return (
     <div className="group relative">
-      <div className="flex h-[53px] w-[200px] items-center rounded bg-01 px-2">
+      <div className="flex h-[60px] w-[250px] items-center rounded bg-01 px-2">
         <div className="line-clamp-2">{url}</div>
       </div>
       <CloseOutlined
@@ -186,7 +180,7 @@ function Files(
 
   return (
     <>
-      {fileList && fileList.length > 0 && (
+      {((fileList && fileList.length > 0) || (fileUrls && fileUrls.length > 0)) && (
         <div className="scrollbar-hide mb-2 flex gap-2 overflow-x-auto">
           {fileList.map((file) => (
             <UploadFileItem

package/src/stream/index.ts

@@ -0,0 +1,41 @@
+import { XRequest } from '@ant-design/x-sdk';
+
+async function fetchStream(
+  url: string,
+  {
+    params,
+    headers,
+    callbacks,
+    ...rest
+  }: {
+    params?: Record<string, any>;
+    headers?: Record<string, string>;
+    callbacks?: {
+      onUpdate?: ({ event, data }: { event: string; data: string }, headers: Headers) => void;
+      onError?: (error: Error, errorInfo?: any) => void;
+    };
+  },
+) {
+  await XRequest<any, { event: string; data: string }>(url, {
+    ...rest,
+    params: params,
+    headers: headers,
+    callbacks: {
+      onUpdate: (message, headers) => {
+        // 会存在 message 为 undefined 的情况
+        if (message) {
+          callbacks?.onUpdate?.(message, headers);
+        }
+      },
+      onSuccess: () => {
+        // nothing
+      },
+      onError: (error, errorInfo) => {
+        console.log('XRequest onError', error);
+        callbacks?.onError?.(error, errorInfo);
+      },
+    },
+  });
+}
+
+export { fetchStream };