@cozeloop/components 0.0.1 → 0.0.3

package/src/multi-part-editor/components/multipart-item-renderer.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { ContentType } from '@cozeloop/api-schema/evaluation';
+import { IconCozTrashCan } from '@coze-arch/coze-design/icons';
+import { Button, TextArea } from '@coze-arch/coze-design';
+
+import { type MultipartItem } from '../type';
+import { VideoItemRenderer } from './video-item-renderer';
+import { ImageItemRenderer } from './image-item-renderer';
+
+interface MultipartItemRendererProps {
+  item: MultipartItem;
+  readonly?: boolean;
+  onChange: (item: MultipartItem) => void;
+  onRemove: () => void;
+}
+
+export const MultipartItemRenderer: React.FC<MultipartItemRendererProps> = ({
+  item,
+  readonly,
+  onChange,
+  onRemove,
+}) => {
+  const handleTextChange = (text: string) => {
+    onChange({
+      ...item,
+      text,
+    });
+  };
+
+  switch (item.content_type) {
+    case ContentType.Text:
+      return (
+        <div className="flex items-center gap-1">
+          <TextArea
+            value={item.text}
+            onChange={handleTextChange}
+            autosize={{ minRows: 1, maxRows: 3 }}
+            disabled={readonly}
+            placeholder="请输入文本信息"
+          />
+          {readonly ? null : (
+            <Button
+              icon={<IconCozTrashCan />}
+              color="secondary"
+              size="small"
+              onClick={onRemove}
+            />
+          )}
+        </div>
+      );
+
+    case ContentType.Image:
+      return (
+        <ImageItemRenderer
+          item={item}
+          onRemove={onRemove}
+          onChange={onChange}
+          readonly={readonly}
+        />
+      );
+    case 'Video':
+      return (
+        <VideoItemRenderer
+          item={item}
+          onRemove={onRemove}
+          onChange={onChange}
+          readonly={readonly}
+        />
+      );
+    default:
+      return null;
+  }
+};

package/src/multi-part-editor/components/url-input-modal.tsx

@@ -0,0 +1,317 @@
+/* eslint-disable @coze-arch/max-line-per-function */
+import React, { useState, useRef } from 'react';
+
+import { type Image as ImageProps } from '@cozeloop/api-schema/evaluation';
+import {
+  IconCozTrashCan,
+  IconCozPlus,
+  IconCozCheckMarkCircleFill,
+  IconCozCrossCircleFill,
+} from '@coze-arch/coze-design/icons';
+import {
+  Modal,
+  Button,
+  Image,
+  Spin,
+  Form,
+  type FormApi,
+  Typography,
+  Tag,
+  type ColumnProps,
+} from '@coze-arch/coze-design';
+
+import { LoopTable } from '../../table';
+
+import { ErrorTypeMap, type UploadAttachmentDetail } from '../type';
+
+interface UrlInputModalProps {
+  visible: boolean;
+  onConfirm: (results: ImageProps[]) => void;
+  onCancel: () => void;
+  maxCount?: number;
+  uploadImageUrl?: (
+    urls: string[],
+  ) => Promise<UploadAttachmentDetail[] | undefined>;
+  uploadType?: 'image' | 'video';
+  intranetUrlValidator?: (url: string) => boolean;
+}
+
+export const UrlInputModal: React.FC<UrlInputModalProps> = ({
+  visible,
+  onConfirm,
+  onCancel,
+  maxCount = 6,
+  uploadImageUrl,
+  uploadType = 'image',
+  intranetUrlValidator,
+}) => {
+  const [error, setError] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+  const [isUploaded, setIsUploaded] = useState(false);
+  const [uploadResults, setUploadResults] = useState<UploadAttachmentDetail[]>(
+    [],
+  );
+  const formRef = useRef<FormApi>();
+  // Validate helpers
+  const validateUrl = (url: string) => {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  // Upload logic
+  const handleUpload = async formValues => {
+    if (formValues?.urls?.length === 0) {
+      setError('请至少添加一个图片链接');
+      return;
+    }
+    setIsUploading(true);
+    setError('');
+    try {
+      const results = await uploadImageUrl?.(formValues?.urls);
+      setUploadResults(results || []);
+      setIsUploaded(true);
+    } catch (err) {
+      setError('上传失败，请重试');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleConfirm = async () => {
+    if (!uploadImageUrl) {
+      const data = await formRef.current
+        ?.validate()
+        ?.catch(e => console.error(e));
+      if (Array.isArray(data?.urls)) {
+        onConfirm(
+          data?.urls?.map(item => ({
+            name: item,
+            url: item,
+            thumb_url: item,
+          })),
+        );
+      }
+      return;
+    }
+    if (isUploaded) {
+      const successResults = uploadResults.filter(
+        item => item.errorType === undefined,
+      );
+      onConfirm(
+        successResults.map(item => ({
+          name: item.image?.name,
+          url: item.originImage?.url,
+          uri: item.image?.uri,
+          thumb_url: item.image?.thumb_url,
+        })),
+      );
+    } else {
+      await formRef.current?.submitForm();
+    }
+  };
+
+  const handleCancel = () => {
+    setError('');
+    setIsUploading(false);
+    setIsUploaded(false);
+    setUploadResults([]);
+    onCancel();
+  };
+
+  // Dynamic form for URLs
+  const renderInputStage = () => (
+    <Form
+      initValues={{ urls: [''] }}
+      getFormApi={api => (formRef.current = api)}
+      onSubmit={uploadImageUrl ? handleUpload : undefined}
+    >
+      {({ formState, formApi }) => {
+        const urls: string[] = formState.values?.urls || [''];
+        const canAdd = urls.length < maxCount;
+        return (
+          <div>
+            {urls.map((_url, idx) => (
+              <div key={idx} className="flex  gap-2">
+                <Form.Input
+                  field={`urls[${idx}]`}
+                  label={{
+                    text: `${uploadType === 'image' ? '图片' : '视频'}${idx + 1}`,
+                    required: true,
+                  }}
+                  fieldClassName="flex-1"
+                  placeholder={`请输入${uploadType === 'image' ? '图片' : '视频'}链接，请使用公网域名`}
+                  rules={[
+                    {
+                      validator: (_, value, cb) => {
+                        if (!value) {
+                          cb(
+                            `请输入${uploadType === 'image' ? '图片' : '视频'}链接`,
+                          );
+                          return false;
+                        }
+                        if (
+                          intranetUrlValidator &&
+                          intranetUrlValidator(value)
+                        ) {
+                          cb('请使用公网域名');
+                          return false;
+                        }
+                        if (!validateUrl(value)) {
+                          cb('请输入有效的URL');
+                          return false;
+                        }
+                        return true;
+                      },
+                    },
+                  ]}
+                  className="w-full"
+                />
+                <Button
+                  size="small"
+                  color="secondary"
+                  icon={<IconCozTrashCan className="w-[14px] h-[14px]" />}
+                  onClick={() => {
+                    formApi.setValue(
+                      'urls',
+                      urls.filter((_, i) => i !== idx),
+                    );
+                  }}
+                  className="mt-[42px]"
+                  disabled={urls.length === 1}
+                />
+              </div>
+            ))}
+            <Button
+              color="primary"
+              disabled={!canAdd}
+              icon={<IconCozPlus />}
+              onClick={() => formApi.setValue('urls', [...urls, ''])}
+              className="mt-2"
+            >
+              添加
+              <Typography.Text
+                className="ml-1"
+                type="secondary"
+              >{`${urls.length}/${maxCount}`}</Typography.Text>
+            </Button>
+            {error ? (
+              <div className="text-red-500 text-sm mt-1">{error}</div>
+            ) : null}
+          </div>
+        );
+      }}
+    </Form>
+  );
+
+  const columns: ColumnProps<UploadAttachmentDetail>[] = [
+    {
+      title: '图片地址',
+      dataIndex: 'originImage.url',
+      width: 220,
+      ellipsis: { showTitle: true },
+    },
+    {
+      title: '图片预览',
+      dataIndex: 'originImage.url',
+      width: 120,
+      render: (url: string) => (
+        <Image
+          src={url}
+          width={60}
+          height={60}
+          imgStyle={{ objectFit: 'contain' }}
+        />
+      ),
+    },
+    {
+      title: '状态',
+      key: 'status',
+      align: 'left',
+      width: 200,
+      render: (record: UploadAttachmentDetail) => (
+        <div className="flex items-center">
+          <Tag
+            prefixIcon={
+              record?.errorType ? (
+                <IconCozCrossCircleFill />
+              ) : (
+                <IconCozCheckMarkCircleFill />
+              )
+            }
+            color={record?.errorType ? 'red' : 'green'}
+          >
+            {record?.errorType ? '失败' : '成功'}
+          </Tag>
+          <Typography.Text type="secondary" className="ml-1">
+            {record.errorType ? ErrorTypeMap[record.errorType] : ''}
+          </Typography.Text>
+        </div>
+      ),
+    },
+  ];
+
+  const renderResultStage = () => (
+    <div className="space-y-4">
+      <LoopTable
+        tableProps={{
+          columns,
+          dataSource: uploadResults,
+          rowKey: 'id',
+          pagination: false,
+          size: 'small',
+        }}
+      />
+    </div>
+  );
+
+  const getConfirmButtonText = () => {
+    if (!uploadImageUrl) {
+      return '确认';
+    }
+    if (isUploading) {
+      return '上传中...';
+    }
+    if (isUploaded) {
+      return `导入${uploadType === 'image' ? '图片' : '视频'}`;
+    }
+    return '上传';
+  };
+
+  return (
+    <Modal
+      title={`添加${uploadType === 'image' ? '图片' : '视频'}链接`}
+      visible={visible}
+      onCancel={handleCancel}
+      width={640}
+      footer={
+        <div className="flex justify-end">
+          <Button onClick={handleCancel} color="primary">
+            取消
+          </Button>
+          <Button
+            type="primary"
+            onClick={handleConfirm}
+            loading={isUploading}
+            // disabled={!isUploaded && urls.length === 0}
+          >
+            {getConfirmButtonText()}
+          </Button>
+        </div>
+      }
+    >
+      {isUploading ? (
+        <div className="flex items-center justify-center py-8">
+          <Spin size="large" />
+          <span className="ml-2">正在上传图片...</span>
+        </div>
+      ) : null}
+
+      {!isUploading && !isUploaded && renderInputStage()}
+      {!isUploading && isUploaded ? renderResultStage() : null}
+    </Modal>
+  );
+};

package/src/multi-part-editor/components/video-item-renderer.tsx

@@ -0,0 +1,145 @@
+/* eslint-disable @coze-arch/use-error-in-catch */
+/* eslint-disable complexity */
+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+import { StorageProvider } from '@cozeloop/api-schema/data';
+import {
+  IconCozCross,
+  IconCozPlayCircle,
+  IconCozRefresh,
+} from '@coze-arch/coze-design/icons';
+import { Loading, Modal } from '@coze-arch/coze-design';
+
+import { ImageStatus, type MultipartItem } from '../type';
+
+import styles from './index.module.less';
+
+interface VideoItemRendererProps {
+  className?: string;
+  style?: React.CSSProperties;
+  spaceID?: Int64;
+  item: MultipartItem;
+  readonly?: boolean;
+  onRemove: () => void;
+  onChange: (item: MultipartItem) => void;
+  uploadFile?: (params: unknown) => Promise<string>;
+}
+
+export const VideoItemRenderer: React.FC<VideoItemRendererProps> = ({
+  className,
+  style,
+  spaceID,
+  item,
+  onRemove,
+  onChange,
+  uploadFile,
+  readonly,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const status = item?.sourceVideo?.status;
+  const uri = item?.video?.uri;
+  const url = item?.video?.url;
+  const isError = status === ImageStatus.Error;
+  const file = item?.sourceVideo?.file as File;
+  const retryUpload = async () => {
+    try {
+      onChange({
+        ...item,
+        sourceVideo: {
+          ...item.sourceVideo,
+          status: ImageStatus.Loading,
+        },
+      });
+      const newUri = await uploadFile?.({
+        file,
+        fileType: 'image',
+        spaceID,
+      });
+      onChange({
+        ...item,
+        sourceVideo: {
+          ...item.sourceVideo,
+          status: ImageStatus.Success,
+        },
+        video: {
+          ...item.video,
+          uri: newUri,
+          storage_provider: StorageProvider.ImageX,
+        },
+      });
+    } catch (error) {
+      onChange({
+        ...item,
+        sourceVideo: {
+          ...item.sourceVideo,
+          status: ImageStatus.Error,
+        },
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div
+        className={classNames('w-[64px] h-[64px] relative group', className)}
+        style={style}
+      >
+        <video
+          src={url}
+          className="w-full h-full rounded-[6px] border border-solid coz-stroke-plus"
+        />
+
+        {status === ImageStatus.Loading ? null : (
+          <IconCozPlayCircle
+            className="text-white w-[16px] h-[16px] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
+            onClick={() => setVisible(true)}
+          />
+        )}
+        {status !== ImageStatus.Loading && (
+          <div
+            className={`absolute inset-0 flex gap-3 items-center rounded-[6px] justify-center bg-[rgba(0,0,0,0.4)] ${isError ? 'visible' : 'invisible'}  group-hover:visible`}
+          >
+            {isError && !readonly && file ? (
+              <IconCozRefresh
+                className="text-white w-[16px] h-[16px] cursor-pointer"
+                onClick={retryUpload}
+              />
+            ) : null}
+            {uri || url ? (
+              <IconCozPlayCircle
+                className="text-white w-[16px] h-[16px] cursor-pointer"
+                onClick={() => setVisible(true)}
+              />
+            ) : null}
+            {readonly ? null : (
+              <div className="p-[2px] text-white cursor-pointer absolute right-[-4px] top-[-4px] z-10 bg-[var(--coz-fg-secondary)] rounded-[16px] flex items-end justify-center">
+                <IconCozCross onClick={onRemove} className="text-[12px]" />
+              </div>
+            )}
+          </div>
+        )}
+        {status === ImageStatus.Loading && (
+          <div className="absolute inset-0 flex items-center rounded-[6px] justify-center bg-[rgba(0,0,0,0.4)] z-10">
+            <Loading loading color="blue" />
+          </div>
+        )}
+      </div>
+      {status === ImageStatus.Error ? (
+        <div className="text-sm text-red-500">上传失败</div>
+      ) : null}
+      <Modal
+        title="视频预览"
+        footer={null}
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        footerFill={false}
+        hasScroll={false}
+        width={654}
+        className={styles['video-preview-modal']}
+      >
+        <video src={url} className="w-full h-[368px]" controls autoPlay />
+      </Modal>
+    </div>
+  );
+};

package/src/multi-part-editor/index.module.less

@@ -0,0 +1,8 @@
+.ghost {
+  opacity: 0.5;
+}
+
+.drag {
+  overflow: hidden;
+  max-height: 100px;
+}