@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

package/src/multi-part-editor/index.tsx

@@ -1,571 +0,0 @@
-/* eslint-disable max-lines */
-/* eslint-disable complexity */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable max-lines-per-function */
-/* eslint-disable @coze-arch/use-error-in-catch */
-/* eslint-disable @coze-arch/max-line-per-function */
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-
-import Sortable from 'sortablejs';
-import { nanoid } from 'nanoid';
-import classNames from 'classnames';
-import {
-  ContentType,
-  type Image as ImageProps,
-} from '@cozeloop/api-schema/evaluation';
-import { StorageProvider } from '@cozeloop/api-schema/data';
-import { IconCozPlus, IconCozHandle } from '@coze-arch/coze-design/icons';
-import {
-  Button,
-  IconButton,
-  Menu,
-  Toast,
-  Typography,
-  Upload,
-  type UploadProps,
-} from '@coze-arch/coze-design';
-
-import { TooltipWhenDisabled } from '../tooltip-when-disabled';
-
-import { getMultipartConfig } from './utils';
-import {
-  ImageStatus,
-  type MultipartItemContentType,
-  type MultipartEditorProps,
-  type MultipartItem,
-} from './type';
-import { UrlInputModal } from './components/url-input-modal';
-import { MultipartItemRenderer } from './components/multipart-item-renderer';
-
-import styles from './index.module.less';
-
-export const MultipartEditor: React.FC<MultipartEditorProps> = ({
-  spaceID,
-  uploadFile,
-  value,
-  onChange,
-  className,
-  multipartConfig,
-  uploadImageUrl,
-  readonly,
-  imageHidden,
-  videoHidden,
-  intranetUrlValidator,
-}) => {
-  const uploadRef = useRef<Upload>(null);
-  const {
-    maxFileCount,
-    maxPartCount,
-    maxFileSize,
-    imageEnabled,
-    videoEnabled,
-    imageSupportedFormats,
-    videoSupportedFormats,
-  } = getMultipartConfig(multipartConfig);
-  const sortableContainer = useRef<HTMLDivElement>(null);
-  const [items, setItems] = useState<MultipartItem[]>(
-    (value || []).map(item => ({
-      ...item,
-      uid: nanoid(),
-    })),
-  );
-  const [showUrlModal, setShowUrlModal] = useState(false);
-  const [currentUploadType, setCurrentUploadType] = useState<'image' | 'video'>(
-    'image',
-  );
-  const [supportedFormats, setSupportedFormats] = useState<string>('');
-
-  const imageCount = items.filter(
-    item =>
-      item.content_type === ContentType.Image || item.content_type === 'Video',
-  ).length;
-
-  const canUsePartLimit = maxPartCount - items.length;
-  const canUseFileLimit = maxFileCount - imageCount;
-  const exceedFileCount = !canUseFileLimit;
-
-  // 处理文件上传
-  const handleUploadFile: UploadProps['customRequest'] = async ({
-    file,
-    onProgress,
-    onSuccess,
-    onError,
-  }) => {
-    const uid = nanoid();
-
-    try {
-      const fileInstance = (file.fileInstance || file) as File;
-      const url = URL.createObjectURL(fileInstance);
-      const beforUploadItem =
-        currentUploadType === 'image'
-          ? {
-              sourceImage: {
-                status: ImageStatus.Loading,
-                file: fileInstance,
-              },
-              image: {
-                name: file.name,
-                url,
-                storage_provider: StorageProvider.ImageX,
-              },
-            }
-          : {
-              sourceVideo: {
-                status: ImageStatus.Loading,
-                file: fileInstance,
-              },
-              video: {
-                name: file.name,
-                url,
-                storage_provider: StorageProvider.ImageX,
-              },
-            };
-      // 添加loading状态的item
-      setItems(prev => [
-        ...prev,
-        {
-          uid,
-          content_type:
-            currentUploadType === 'image' ? ContentType.Image : 'Video',
-          ...beforUploadItem,
-        } as any,
-      ]);
-      const uri = await uploadFile?.({
-        file: fileInstance,
-        fileType: 'image',
-        onProgress,
-        onSuccess,
-        onError,
-        spaceID,
-      });
-
-      // 更新为成功状态
-      setItems(prev =>
-        prev.map(item => {
-          if (item.uid === uid) {
-            const afterUploadItem =
-              currentUploadType === 'image'
-                ? {
-                    sourceImage: {
-                      ...item.sourceImage,
-                      status: ImageStatus.Success,
-                      file: fileInstance,
-                    },
-                    image: {
-                      ...item.image,
-                      url,
-                      uri,
-                      storage_provider: StorageProvider.ImageX,
-                    },
-                  }
-                : {
-                    sourceVideo: {
-                      ...item.sourceVideo,
-                      status: ImageStatus.Success,
-                      file: fileInstance,
-                    },
-                    video: {
-                      ...item.video,
-                      url,
-                      uri,
-                      storage_provider: StorageProvider.ImageX,
-                    },
-                  };
-            return {
-              ...item,
-              ...afterUploadItem,
-            };
-          }
-          return item;
-        }),
-      );
-    } catch (error) {
-      // 更新为错误状态
-      setItems(prev =>
-        prev.map(item =>
-          item.uid === uid
-            ? {
-                ...item,
-                sourceImage: {
-                  ...item.sourceImage,
-                  status: ImageStatus.Error,
-                },
-              }
-            : item,
-        ),
-      );
-    }
-  };
-
-  // 添加文本节点
-  const handleAddText = () => {
-    setItems(prev => [
-      ...prev,
-      {
-        uid: nanoid(),
-        content_type: ContentType.Text,
-        text: '',
-      },
-    ]);
-  };
-
-  // 添加图片文件节点
-  const handleAddImageFile = () => {
-    setCurrentUploadType('image');
-    setSupportedFormats(imageSupportedFormats);
-    setTimeout(() => {
-      uploadRef.current?.openFileDialog();
-    }, 0);
-  };
-
-  // 添加视频文件节点
-  const handleAddVideoFile = () => {
-    setCurrentUploadType('video');
-    setSupportedFormats(videoSupportedFormats);
-    setTimeout(() => {
-      uploadRef.current?.openFileDialog();
-    }, 0);
-  };
-
-  // 添加图片链接节点
-  const handleAddImageUrl = () => {
-    setCurrentUploadType('image');
-    setShowUrlModal(true);
-  };
-
-  // 添加视频链接节点
-  const handleAddVideoUrl = () => {
-    setCurrentUploadType('video');
-    setShowUrlModal(true);
-  };
-
-  // 确认添加图片链接
-  const handleConfirmImageUrl = (results: ImageProps[]) => {
-    const newItems = results.map(result => ({
-      uid: nanoid(),
-      content_type: ContentType.Image,
-      image: {
-        ...result,
-        storage_provider: StorageProvider.ImageX,
-      },
-    }));
-
-    setItems(prev => [...prev, ...newItems]);
-    setShowUrlModal(false);
-  };
-
-  // 确认添加视频链接
-  const handleConfirmVideoUrl = (results: ImageProps[]) => {
-    const newItems = results.map(result => ({
-      uid: nanoid(),
-      content_type: 'Video' as MultipartItemContentType,
-      video: {
-        ...result,
-        storage_provider: StorageProvider.ImageX,
-      },
-    }));
-
-    setItems(prev => [...prev, ...newItems]);
-    setShowUrlModal(false);
-  };
-
-  // 更新item
-  const handleItemChange = (newItem: MultipartItem) => {
-    setItems(prev =>
-      prev.map(item => (item.uid === newItem.uid ? newItem : item)),
-    );
-  };
-
-  // 删除item
-  const handleItemRemove = (index: number) => {
-    setItems(prev => prev.filter((_, i) => i !== index));
-  };
-
-  const getDisabledTooltip = useCallback(
-    ({
-      type,
-      exceed,
-      disabled,
-    }: {
-      type: MultipartItemContentType;
-      exceed?: boolean;
-      disabled?: boolean;
-    }) => {
-      if (type === ContentType.Image) {
-        if (exceed) {
-          return `多模态图片已达上限，当前仅支持上传${canUseFileLimit}个文件`;
-        }
-        if (disabled) {
-          return '该模型不支持多模态图片';
-        }
-      } else if (type === 'Video') {
-        if (exceed) {
-          return `多模态视频已达上限，当前仅支持上传${canUseFileLimit}个文件`;
-        }
-        if (disabled) {
-          return '该模型不支持多模态视频';
-        }
-      } else {
-        return '该模型不支持多模态';
-      }
-    },
-    [],
-  );
-
-  const renderImageSubMenu = useCallback(
-    (children: React.ReactNode) => (
-      <TooltipWhenDisabled
-        disabled={exceedFileCount || !imageEnabled}
-        content={getDisabledTooltip({
-          type: ContentType.Image,
-          exceed: exceedFileCount,
-          disabled: !imageEnabled,
-        })}
-        theme="dark"
-        needWrap
-      >
-        {children}
-      </TooltipWhenDisabled>
-    ),
-    [exceedFileCount, imageEnabled],
-  );
-
-  const renderVideoSubMenu = useCallback(
-    (children: React.ReactNode) => (
-      <TooltipWhenDisabled
-        disabled={exceedFileCount || !videoEnabled}
-        content={getDisabledTooltip({
-          type: 'Video',
-          exceed: exceedFileCount,
-          disabled: !videoEnabled,
-        })}
-        theme="dark"
-        needWrap
-      >
-        {children}
-      </TooltipWhenDisabled>
-    ),
-    [exceedFileCount, videoEnabled],
-  );
-
-  const dropdownMenu = (
-    <Menu.SubMenu mode="menu">
-      <Menu.Item onClick={handleAddText} disabled={imageCount >= maxPartCount}>
-        文本
-      </Menu.Item>
-
-      {imageHidden ? null : (
-        <Menu.Item
-          onClick={handleAddImageFile}
-          disabled={exceedFileCount || !imageEnabled}
-        >
-          {renderImageSubMenu(<span className="w-full">图片-源文件</span>)}
-        </Menu.Item>
-      )}
-
-      {imageHidden ? null : (
-        <Menu.Item
-          onClick={handleAddImageUrl}
-          disabled={exceedFileCount || !imageEnabled}
-        >
-          {renderImageSubMenu(<span className="w-full">图片-外链</span>)}
-        </Menu.Item>
-      )}
-
-      {videoHidden ? null : (
-        <Menu.Item
-          onClick={handleAddVideoFile}
-          disabled={exceedFileCount || !videoEnabled}
-        >
-          {renderVideoSubMenu(<span className="w-full">视频-源文件</span>)}
-        </Menu.Item>
-      )}
-
-      {videoHidden ? null : (
-        <Menu.Item
-          onClick={handleAddVideoUrl}
-          disabled={exceedFileCount || !videoEnabled}
-        >
-          {renderVideoSubMenu(<span className="w-full">视频-外链</span>)}
-        </Menu.Item>
-      )}
-    </Menu.SubMenu>
-  );
-
-  // 同步数据到父组件
-  useEffect(() => {
-    onChange?.(items);
-  }, [items]);
-
-  // 初始化sortablejs拖拽排序
-  useEffect(() => {
-    if (sortableContainer.current) {
-      new Sortable(sortableContainer.current, {
-        animation: 150,
-        handle: '.drag-handle',
-        ghostClass: styles.ghost,
-        onEnd: evt => {
-          setItems(list => {
-            const draft = [...(list ?? [])];
-            if (draft.length) {
-              const { oldIndex = 0, newIndex = 0 } = evt;
-              const [item] = draft.splice(oldIndex, 1);
-              draft.splice(newIndex, 0, item);
-            }
-            return draft;
-          });
-        },
-        setData(dataTransfer, dragEl) {
-          // dragEl 是被拖拽的元素
-          // dataTransfer 是拖拽数据传输对象
-          // 创建自定义预览元素
-          // 浅复制（只复制元素本身，不包含子元素）
-
-          // 深复制（复制元素及其所有子元素）
-          const dragElClone: HTMLElement = dragEl.cloneNode(
-            true,
-          ) as HTMLElement;
-          const customPreview = document.createElement('div');
-          // // 临时添加到DOM（必须在可见区域外）
-          customPreview.style.position = 'absolute';
-          customPreview.style.top = '-1000px';
-          customPreview.style.width = '200px';
-          customPreview.appendChild(dragElClone);
-          const wrapper = dragElClone.getElementsByClassName(
-            'semi-collapsible-wrapper',
-          )?.[0];
-          if (wrapper) {
-            wrapper.setAttribute(
-              'style',
-              'height: 0px; width: 0px; overflow: hidden;',
-            );
-          }
-          document.body.appendChild(customPreview);
-          dataTransfer.setDragImage(wrapper ? customPreview : dragEl, 0, 0);
-          // 清理临时元素
-          setTimeout(() => {
-            if (customPreview.parentNode) {
-              document.body.removeChild(customPreview);
-            }
-          }, 0);
-        },
-      });
-    }
-  }, []);
-
-  return (
-    <div
-      className={classNames(
-        'flex flex-col gap-2 p-0 max-h-[713px] overflow-auto styled-scrollbar',
-        className,
-      )}
-    >
-      {/* 可拖拽容器 */}
-      <div
-        ref={sortableContainer}
-        className={classNames(
-          'flex flex-wrap gap-2 rounded-[6px] coz-bg-primary p-2',
-          {
-            hidden: !items.length,
-          },
-        )}
-      >
-        {items.map((item, index) => (
-          <div key={item.uid} className="flex items-center gap-2 w-full">
-            {readonly ? null : (
-              <IconButton
-                icon={<IconCozHandle className="drag-handle" />}
-                color="secondary"
-              />
-            )}
-            <div className="flex-1">
-              <MultipartItemRenderer
-                item={item}
-                onChange={newItem => handleItemChange(newItem)}
-                onRemove={() => handleItemRemove(index)}
-                readonly={readonly}
-              />
-            </div>
-          </div>
-        ))}
-      </div>
-      {/* 添加按钮 */}
-      {items.length >= maxPartCount || readonly ? (
-        <Button
-          icon={<IconCozPlus />}
-          size="small"
-          className="!w-fit"
-          color="primary"
-          disabled
-        >
-          添加数据
-          <Typography.Text
-            className="ml-1 !text-inherit"
-            type="secondary"
-          >{`${items.length}/${maxPartCount}`}</Typography.Text>
-        </Button>
-      ) : (
-        <Menu
-          trigger="click"
-          clickToHide
-          render={dropdownMenu}
-          position="bottomLeft"
-        >
-          <Button
-            icon={<IconCozPlus />}
-            size="small"
-            className="!w-fit"
-            color="primary"
-            disabled={items.length >= maxPartCount}
-          >
-            添加数据
-            <Typography.Text
-              className="ml-1"
-              type="secondary"
-            >{`${items.length}/${maxPartCount}`}</Typography.Text>
-          </Button>
-        </Menu>
-      )}
-      {/* 隐藏的文件上传组件 */}
-      <Upload
-        ref={uploadRef}
-        action=""
-        maxSize={maxFileSize}
-        onSizeError={() => {
-          Toast.error('图片大小不能超过20MB');
-        }}
-        accept={supportedFormats}
-        customRequest={handleUploadFile}
-        showUploadList={false}
-        style={{ display: 'none' }}
-        multiple
-        limit={
-          canUseFileLimit > canUsePartLimit ? canUsePartLimit : canUseFileLimit
-        }
-        onExceed={() => {
-          Toast.error('图片数量不能超过20张或节点数量不能超过50个');
-        }}
-      />
-      {/* 外链输入模态框 */}
-      {showUrlModal ? (
-        <UrlInputModal
-          visible={showUrlModal}
-          maxCount={
-            canUseFileLimit > canUsePartLimit
-              ? canUsePartLimit
-              : canUseFileLimit
-          }
-          onConfirm={
-            currentUploadType === 'image'
-              ? handleConfirmImageUrl
-              : handleConfirmVideoUrl
-          }
-          onCancel={() => setShowUrlModal(false)}
-          uploadImageUrl={uploadImageUrl}
-          uploadType={currentUploadType}
-          intranetUrlValidator={intranetUrlValidator}
-        />
-      ) : null}
-    </div>
-  );
-};

package/src/multi-part-editor/multi-part-render.tsx

@@ -1,87 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import classNames from 'classnames';
-import { ContentType } from '@cozeloop/api-schema/prompt';
-
-import { type ContentPartLoop, type FileItemStatus, ImageStatus } from './type';
-import { VideoItemRenderer } from './components/video-item-renderer';
-import { ImageItemRenderer } from './components/image-item-renderer';
-
-interface MultiPartRenderProps {
-  fileParts?: ContentPartLoop[];
-  readonly?: boolean;
-  className?: string;
-  onDeleteFilePart?: (part: ContentPartLoop) => void;
-  onFilePartsChange?: (part: ContentPartLoop) => void;
-}
-
-const convertStatus = (status: FileItemStatus) => {
-  if (status === 'uploading') {
-    return ImageStatus.Loading;
-  }
-  if (status === 'success') {
-    return ImageStatus.Success;
-  }
-
-  return ImageStatus.Error;
-};
-
-export function MultiPartRender({
-  fileParts,
-  onDeleteFilePart,
-  onFilePartsChange,
-  readonly,
-  className,
-}: MultiPartRenderProps) {
-  return (
-    <div
-      className={classNames(
-        'flex gap-2 flex-wrap pt-0 pb-3 px-2 w-full border border-solid border-t-0 border-l-0 border-r-0 border-b-[rgba(68,83,130,.25)]',
-        className,
-      )}
-    >
-      {fileParts?.map(part =>
-        part.type === ContentType.VideoURL ? (
-          <VideoItemRenderer
-            className="!w-[45px] !h-[45px]"
-            item={{
-              content_type: 'Video',
-              uid: part.uid,
-              video: part.video_url,
-              sourceVideo: {
-                status: convertStatus(part.status || 'success'),
-              },
-            }}
-            onRemove={() => onDeleteFilePart?.(part)}
-            onChange={file =>
-              onFilePartsChange?.({
-                ...file,
-                type: ContentType.VideoURL,
-              })
-            }
-            readonly={readonly}
-          />
-        ) : (
-          <ImageItemRenderer
-            className="!w-[45px] !h-[45px]"
-            item={{
-              content_type: 'Image' as any,
-              uid: part.uid,
-              image: part.image_url,
-              sourceImage: {
-                status: convertStatus(part.status || 'success'),
-              },
-            }}
-            onRemove={() => onDeleteFilePart?.(part)}
-            onChange={file =>
-              onFilePartsChange?.({
-                ...file,
-                type: ContentType.ImageURL,
-              })
-            }
-            readonly={readonly}
-          />
-        ),
-      )}
-    </div>
-  );
-}