@fe-free/ai 4.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @fe-free/ai
+
+## 4.0.0
+
+### Minor Changes
+
+- feat: ai
+
+### Patch Changes
+
+- @fe-free/core@4.0.0
+- @fe-free/icons@4.0.0
+- @fe-free/tool@4.0.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@fe-free/ai",
+  "version": "4.0.0",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "ahooks": "^3.7.8",
+    "classnames": "^2.5.1",
+    "@fe-free/core": "4.0.0"
+  },
+  "peerDependencies": {
+    "antd": "^5.27.1",
+    "dayjs": "~1.11.10",
+    "react": "^19.2.0",
+    "@fe-free/icons": "4.0.0",
+    "@fe-free/tool": "4.0.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { Sender } from './sender';
+export type { SenderProps, SenderRef } from './sender';
+export { Tip } from './tip';

package/src/sender/actions.tsx

@@ -0,0 +1,74 @@
+import Icons from '@fe-free/icons';
+import { Button, Divider } from 'antd';
+import type { RefObject } from 'react';
+import SendIcon from '../svgs/send.svg?react';
+import { FileAction } from './files';
+import { RecordAction } from './record';
+import './style.scss';
+import type { SenderProps } from './types';
+
+function Actions(
+  props: SenderProps & {
+    refUpload: RefObject<HTMLDivElement>;
+    isUploading: boolean;
+    fileUrls: string[];
+    setFileUrls: (fileUrls: string[]) => void;
+  },
+) {
+  const {
+    loading,
+    onSubmit,
+    value,
+    refUpload,
+    isUploading,
+    fileUrls,
+    setFileUrls,
+    allowUpload,
+    allowSpeech,
+  } = props;
+
+  const isLoading = loading || isUploading;
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex flex-1 gap-1">
+        {allowUpload && (
+          <FileAction
+            {...props}
+            refUpload={refUpload}
+            fileUrls={fileUrls}
+            setFileUrls={setFileUrls}
+          />
+        )}
+      </div>
+      <Divider type="vertical" />
+      <div className="flex items-center gap-2">
+        {allowSpeech && <RecordAction {...props} />}
+        <Button
+          type="primary"
+          shape="circle"
+          icon={<Icons component={SendIcon} className="!text-lg" />}
+          loading={isLoading}
+          // disabled={loading}
+          onClick={() => {
+            if (isLoading) {
+              return;
+            }
+
+            const newValue = {
+              ...value,
+              text: value?.text?.trim(),
+            };
+
+            // 有内容才提交
+            if (newValue.text || (newValue.files && newValue.files.length > 0)) {
+              onSubmit?.(newValue);
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export { Actions };

package/src/sender/files.tsx

@@ -0,0 +1,202 @@
+import { FileCard } from '@fe-free/core';
+import Icons, { CloseOutlined, LinkOutlined, PlusOutlined } from '@fe-free/icons';
+import type { UploadFile } from 'antd';
+import { App, Button, Dropdown, Input, Modal, Upload } from 'antd';
+import type { RefObject } from 'react';
+import { useState } from 'react';
+import FilesIcon from '../svgs/files.svg?react';
+import type { SenderProps } from './types';
+
+function FileAction(
+  props: SenderProps & {
+    refUpload: RefObject<HTMLDivElement>;
+    fileUrls: string[];
+    setFileUrls: (fileUrls: string[]) => void;
+  },
+) {
+  const { value, refUpload, fileUrls, setFileUrls, allowUpload } = props;
+  const { filesMaxCount } = allowUpload || {};
+
+  const { message } = App.useApp();
+
+  const [url, setUrl] = useState<string>('');
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <Dropdown
+        trigger={['click']}
+        placement="topLeft"
+        menu={{
+          items: [
+            {
+              key: 'add-file',
+              label: '添加图片或文件',
+              icon: <Icons component={FilesIcon} />,
+              onClick: () => {
+                refUpload.current?.click();
+              },
+            },
+            {
+              key: 'add-file-url',
+              label: '添加文件URL',
+              icon: <Icons component={LinkOutlined} />,
+              onClick: () => {
+                setUrl('');
+
+                setOpen(true);
+              },
+            },
+          ],
+        }}
+      >
+        <Button shape="circle" icon={<Icons component={PlusOutlined} className="!text-lg" />} />
+      </Dropdown>
+      {open && (
+        <Modal
+          title="添加文件URL"
+          open
+          onCancel={() => setOpen(false)}
+          onOk={() => {
+            if (filesMaxCount && value?.files && value.files.length >= filesMaxCount) {
+              message.warning(`超过最大上传数量${filesMaxCount}`);
+              return;
+            }
+
+            if (url.trim()) {
+              setFileUrls([...fileUrls, url]);
+            }
+            setOpen(false);
+          }}
+        >
+          <Input.TextArea
+            placeholder="请输入文件URL"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+          />
+        </Modal>
+      )}
+    </>
+  );
+}
+
+function FileUpload(
+  props: SenderProps & {
+    refUpload: RefObject<HTMLDivElement>;
+    fileList: UploadFile[];
+    setFileList: (fileList: UploadFile[]) => void;
+    uploadMaxCount?: number;
+  },
+) {
+  const { allowUpload, refUpload, fileList, setFileList, uploadMaxCount } = props;
+  const { uploadAction, filesMaxCount } = allowUpload || {};
+
+  const { message } = App.useApp();
+
+  return (
+    <Upload.Dragger
+      action={uploadAction}
+      fileList={fileList}
+      multiple
+      pastable
+      maxCount={uploadMaxCount ? uploadMaxCount + 1 : undefined}
+      onChange={(info) => {
+        if (uploadMaxCount && info.fileList.length > uploadMaxCount) {
+          message.warning(`超过最大上传数量${filesMaxCount}`);
+
+          setFileList(info.fileList.slice(-uploadMaxCount));
+          return;
+        }
+
+        setFileList(info.fileList);
+      }}
+    >
+      <div ref={refUpload}>在此处拖放文件</div>
+    </Upload.Dragger>
+  );
+}
+
+function UploadFileItem({ file, onDelete }: { file: UploadFile; onDelete: () => void }) {
+  const isImage = FileCard.isImage(file.name);
+
+  // 先写死这样
+  const isDone = file.response?.data?.url;
+
+  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"
+        />
+      ) : (
+        <div className="flex h-[53px] w-[200px] items-center rounded bg-01 px-1">
+          <FileCard name={file.name} size={file.size} />
+        </div>
+      )}
+      {!isDone && (
+        <div className="absolute inset-0 flex items-center justify-center bg-01/80">
+          {(file.percent ?? 0).toFixed(0)}%
+        </div>
+      )}
+      <CloseOutlined
+        className="absolute right-1 top-1 hidden cursor-pointer rounded-full bg-04 text-white group-hover:block"
+        onClick={onDelete}
+      />
+    </div>
+  );
+}
+
+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="line-clamp-2">{url}</div>
+      </div>
+      <CloseOutlined
+        className="absolute right-1 top-1 hidden cursor-pointer rounded-full bg-04 text-white group-hover:block"
+        onClick={onDelete}
+      />
+    </div>
+  );
+}
+
+function Files(
+  props: SenderProps & {
+    fileList: UploadFile[];
+    setFileList: (fileList: UploadFile[]) => void;
+    fileUrls: string[];
+    setFileUrls: (fileUrls: string[]) => void;
+  },
+) {
+  const { fileList, setFileList, fileUrls, setFileUrls } = props;
+
+  return (
+    <>
+      {fileList && fileList.length > 0 && (
+        <div className="scrollbar-hide mb-2 flex gap-2 overflow-x-auto">
+          {fileList.map((file) => (
+            <UploadFileItem
+              key={file.uid}
+              file={file}
+              onDelete={() => {
+                setFileList(fileList.filter((f) => f.uid !== file.uid));
+              }}
+            />
+          ))}
+          {fileUrls.map((url) => (
+            <UrlFileItem
+              key={url}
+              url={url}
+              onDelete={() => {
+                setFileUrls(fileUrls.filter((u) => u !== url));
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+export { FileAction, Files, FileUpload };

package/src/sender/index.tsx

@@ -0,0 +1,135 @@
+import { useDrop } from 'ahooks';
+import { Input } from 'antd';
+import type { UploadFile } from 'antd/lib';
+import classNames from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Actions } from './actions';
+import { FileUpload, Files } from './files';
+import './style.scss';
+import type { SenderProps, SenderRef } from './types';
+
+function Text(props: SenderProps) {
+  const { value, onChange, placeholder } = props;
+
+  return (
+    <Input.TextArea
+      value={value?.text}
+      onChange={(e) => {
+        onChange?.({ ...value, text: e.target.value });
+      }}
+      placeholder={placeholder}
+      autoSize={{ minRows: 2, maxRows: 8 }}
+      className="mb-1 px-1 py-0"
+      variant="borderless"
+    />
+  );
+}
+
+const defaultProps = {
+  placeholder: '描述你的问题',
+};
+
+function Sender(originProps: SenderProps) {
+  const props = useMemo(() => {
+    return {
+      ...defaultProps,
+      ...originProps,
+    };
+  }, [originProps]);
+
+  const { value, onChange, filesMaxCount } = props;
+
+  const refContainer = useRef<HTMLDivElement>(null);
+  const refUpload = useRef<HTMLDivElement>(null);
+  const [dragHover, setDragHover] = useState(false);
+
+  useDrop(refContainer, {
+    onDragEnter: () => {
+      setDragHover(true);
+    },
+    onDragLeave: () => {
+      setDragHover(false);
+    },
+    onDrop: () => {
+      setDragHover(false);
+    },
+  });
+
+  // 手动输入的 url file
+  const [fileUrls, originSetFileUrls] = useState<string[]>([]);
+  // 上传的 upload file
+  const [fileList, originSetFileList] = useState<UploadFile[]>([]);
+
+  const handleFilesChange = useCallback(
+    ({ fileUrls, fileList }) => {
+      onChange?.({
+        ...value,
+        files: [...(fileList.map((file) => file.response?.data?.url) || []), ...fileUrls],
+      });
+    },
+    [value, onChange],
+  );
+
+  const setFileUrls = useCallback(
+    (fileUrls: string[]) => {
+      originSetFileUrls(fileUrls);
+      handleFilesChange({ fileUrls, fileList });
+    },
+    [fileList],
+  );
+
+  const setFileList = useCallback(
+    (fileList: UploadFile[]) => {
+      originSetFileList(fileList);
+      handleFilesChange({ fileUrls, fileList });
+    },
+    [fileUrls],
+  );
+
+  const isUploading = useMemo(() => {
+    // 存在没有 url 的
+    return fileList.some((file) => !file.response?.data?.url);
+  }, [fileList]);
+
+  return (
+    <div className="fea-sender-wrap">
+      <div
+        ref={refContainer}
+        className={classNames('fea-sender relative flex flex-col rounded-lg border border-01 p-2', {
+          'fea-sender-drag-hover': dragHover,
+        })}
+      >
+        <Files
+          {...props}
+          fileList={fileList}
+          setFileList={setFileList}
+          fileUrls={fileUrls}
+          setFileUrls={setFileUrls}
+        />
+        <div className="flex">
+          <Text {...props} />
+        </div>
+        <Actions
+          {...props}
+          refUpload={refUpload}
+          isUploading={isUploading}
+          fileUrls={fileUrls}
+          setFileUrls={setFileUrls}
+        />
+        <FileUpload
+          {...props}
+          refUpload={refUpload}
+          fileList={fileList}
+          setFileList={setFileList}
+          uploadMaxCount={filesMaxCount ? filesMaxCount - fileUrls.length : undefined}
+        />
+      </div>
+      <div className="mt-1 text-center text-xs text-03">
+        内容由 AI 生成，无法确保信息的真实准确，仅供参考
+      </div>
+    </div>
+  );
+}
+
+export { Sender };
+export type { SenderProps, SenderRef };

package/src/sender/record.tsx

@@ -0,0 +1,32 @@
+import { AudioOutlined } from '@fe-free/icons';
+import { Button } from 'antd';
+import type { SenderProps } from './types';
+
+function RecordAction(props: SenderProps) {
+  const { allowSpeech } = props;
+  const { recording, onRecordingChange } = allowSpeech || {};
+
+  if (recording) {
+    return (
+      <Button type="text" shape="circle" onClick={() => onRecordingChange?.(false)}>
+        <div className="fea-sender-spinner">
+          <div className="fea-sender-spinner-line fea-sender-spinner-line1" />
+          <div className="fea-sender-spinner-line fea-sender-spinner-line2" />
+          <div className="fea-sender-spinner-line fea-sender-spinner-line3" />
+          <div className="fea-sender-spinner-line fea-sender-spinner-line4" />
+        </div>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      type="text"
+      shape="circle"
+      icon={<AudioOutlined className="!text-lg" />}
+      onClick={() => onRecordingChange?.(true)}
+    />
+  );
+}
+
+export { RecordAction };

package/src/sender/sender.stories.tsx

@@ -0,0 +1,65 @@
+import { Sender } from '@fe-free/ai';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import type { SenderProps, SenderValue } from './types';
+
+const meta: Meta<typeof Sender> = {
+  title: '@fe-free/ai/Sender',
+  component: Sender,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Sender>;
+
+function Component(props: Omit<SenderProps, 'value' | 'onChange'>) {
+  const [v, setV] = useState<SenderValue | undefined>(undefined);
+
+  return (
+    <Sender
+      value={v}
+      onChange={(v) => {
+        console.log('newValue', v);
+        setV(v);
+      }}
+      {...props}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: (props) => <Component {...props} />,
+  args: {
+    onSubmit: (value) => {
+      console.log(value);
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    onSubmit: (value) => {
+      console.log(value);
+    },
+  },
+  render: (props) => <Component {...props} />,
+};
+
+export const AllowUpload: Story = {
+  args: {
+    allowUpload: {
+      uploadAction: '/api/ai-service/v1/file_upload/upload',
+      filesMaxCount: 3,
+    },
+  },
+  render: (props) => <Component {...props} />,
+};
+
+export const AllowSpeech: Story = {
+  render: (props) => {
+    const [recording, setRecording] = useState(false);
+    return <Component {...props} allowSpeech={{ recording, onRecordingChange: setRecording }} />;
+  },
+};
+
+export default meta;

package/src/sender/style.scss

@@ -0,0 +1,75 @@
+.fea-sender {
+  .ant-upload-select {
+    display: none !important;
+  }
+
+  .ant-upload-list {
+    display: none !important;
+  }
+
+  .ant-upload-wrapper {
+    display: none;
+  }
+
+  &.fea-sender-drag-hover {
+    .ant-upload-wrapper {
+      display: block;
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+
+      .ant-upload-drag {
+        border-color: theme('colors.primary');
+      }
+    }
+  }
+
+  .fea-sender-spinner {
+    display: block;
+    position: relative;
+    width: 2px;
+    height: 0;
+  }
+
+  .fea-sender-spinner .fea-sender-spinner-line {
+    position: absolute;
+    width: 2px;
+    height: 4px;
+    content: '';
+    background-color: theme('colors.primary');
+  }
+
+  .fea-sender-spinner .fea-sender-spinner-line1 {
+    left: -6px;
+    animation: rectangle infinite 1s ease-in-out 0s;
+  }
+
+  .fea-sender-spinner .fea-sender-spinner-line2 {
+    left: -2px;
+    animation: rectangle infinite 1s ease-in-out 0.25s;
+  }
+
+  .fea-sender-spinner .fea-sender-spinner-line3 {
+    right: -2px;
+    animation: rectangle infinite 1s ease-in-out 0.5s;
+  }
+
+  .fea-sender-spinner .fea-sender-spinner-line4 {
+    right: -6px;
+    animation: rectangle infinite 1s ease-in-out 0.75s;
+  }
+
+  @keyframes rectangle {
+    0%,
+    80%,
+    100% {
+      height: 4px;
+      box-shadow: 0 0 theme('colors.primary');
+    }
+
+    40% {
+      height: 6px;
+      box-shadow: 0 -6px theme('colors.primary');
+    }
+  }
+}

package/src/sender/types.ts

@@ -0,0 +1,35 @@
+interface SenderRef {
+  focus: () => void;
+}
+
+interface SenderValue {
+  text?: string;
+  files?: string[];
+}
+
+interface SenderProps {
+  value?: SenderValue;
+  onChange: (value?: SenderValue) => void;
+
+  loading?: boolean;
+  onSubmit: (value?: SenderValue) => void;
+
+  placeholder?: string;
+
+  allowUpload?: {
+    /** 上传文件的接口地址，约定返回的 {data: {url: string}} */
+    uploadAction?: string;
+    /** files 最大数量 */
+    filesMaxCount?: number;
+  };
+
+  /** 是否允许语音输入 */
+  allowSpeech?: {
+    /** 是否正在录音 */
+    recording?: boolean;
+    /** 录音状态变化时回调 */
+    onRecordingChange?: (recording: boolean) => void;
+  };
+}
+
+export type { SenderProps, SenderRef, SenderValue };

package/src/svgs/files.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.3977 3.9588C15.8361 2.39727 13.3037 2.39727 11.7422 3.9588L5.03365 10.6673C2.60612 13.0952 2.60612 17.0314 5.03365 19.4592C7.46144 21.887 11.3983 21.8875 13.8262 19.4599L20.5348 12.7514C20.8472 12.439 21.3534 12.439 21.6658 12.7514C21.9781 13.0638 21.9782 13.5701 21.6658 13.8825L14.9573 20.591C11.9046 23.6435 6.95518 23.6429 3.90255 20.5903C0.850191 17.5377 0.850191 12.5889 3.90255 9.53624L10.6111 2.82771C12.7975 0.641334 16.3424 0.641334 18.5288 2.82771C20.7149 5.01409 20.7151 8.55906 18.5288 10.7454L11.8699 17.4042C10.5369 18.7372 8.37542 18.7365 7.04241 17.4035C5.70963 16.0705 5.7095 13.9096 7.04241 12.5767L13.7012 5.91785C14.0136 5.60547 14.5199 5.60557 14.8323 5.91785C15.1447 6.23027 15.1447 6.73652 14.8323 7.04894L8.1735 13.7078C7.46543 14.4159 7.46556 15.5642 8.1735 16.2724C8.88167 16.9806 10.03 16.9806 10.7381 16.2724L17.397 9.61358C18.9584 8.05211 18.959 5.52035 17.3977 3.9588Z" fill="currentColor"></path></svg>

package/src/svgs/send.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="size-18 text-dbx-static-white"><path d="M10.6254 20.3752V6.69549L5.47304 11.8478C4.93607 12.3848 4.0647 12.3848 3.52773 11.8478C2.99076 11.3109 2.99076 10.4395 3.52773 9.90252L11.0277 2.40252L11.1322 2.30877C11.6723 1.86801 12.4695 1.89901 12.973 2.40252L20.473 9.90252L20.5668 10.007C21.0075 10.5471 20.9766 11.3443 20.473 11.8478C19.9695 12.3513 19.1723 12.3823 18.6322 11.9416L18.5277 11.8478L13.3754 6.69549V20.3752C13.3754 21.1346 12.7598 21.7502 12.0004 21.7502C11.241 21.7502 10.6254 21.1346 10.6254 20.3752Z" fill="currentColor"></path></svg>

package/src/tip.tsx

@@ -0,0 +1,5 @@
+function Tip() {
+  return <div className="test-xs text-01">内容由 AI 生成，无法确保信息的真实准确，仅供参考</div>;
+}
+
+export { Tip };

package/types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg?react' {
+  import type { IconComponentProps } from '@ant-design/icons';
+  const content: IconComponentProps['component'];
+  export default content;
+}