@cozeloop/components 0.0.2 → 0.0.3

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

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type ContentPart } from '@cozeloop/api-schema/prompt';
+import {
+  type Content,
+  type Image,
+  type ContentType,
+} from '@cozeloop/api-schema/evaluation';
+import { ItemErrorType, type MultiModalSpec } from '@cozeloop/api-schema/data';
+
+export enum ImageStatus {
+  Loading = 'loading',
+  Success = 'success',
+  Error = 'error',
+}
+
+export type FileItemStatus =
+  | 'success'
+  | 'uploadFail'
+  | 'validateFail'
+  | 'validating'
+  | 'uploading'
+  | 'wait';
+
+export interface ContentPartLoop extends ContentPart {
+  uid?: string;
+  status?: FileItemStatus;
+}
+
+export const ErrorTypeMap = {
+  [ItemErrorType.MismatchSchema]: 'schema 不匹配',
+  [ItemErrorType.EmptyData]: '空数据',
+  [ItemErrorType.ExceedMaxItemSize]: '单条数据大小超限',
+  [ItemErrorType.ExceedDatasetCapacity]: '数据集容量超限',
+  [ItemErrorType.MalformedFile]: '文件格式错误',
+  [ItemErrorType.InternalError]: '系统错误',
+  [ItemErrorType.IllegalContent]: '包含非法内容',
+  [ItemErrorType.MissingRequiredField]: '缺少必填字段',
+  [ItemErrorType.ExceedMaxNestedDepth]: '数据嵌套层数超限',
+  [ItemErrorType.TransformItemFailed]: '数据转换失败',
+  [ItemErrorType.ExceedMaxImageCount]: '图片数量超限',
+  [ItemErrorType.ExceedMaxImageSize]: '图片大小超限',
+  [ItemErrorType.GetImageFailed]: '图片获取失败',
+  [ItemErrorType.IllegalExtension]: '文件扩展名不合法',
+  [ItemErrorType.UploadImageFailed]: '上传图片失败',
+};
+
+export type MultipartItemContentType = ContentType | 'Video';
+export interface MultipartItem extends Omit<Content, 'content_type'> {
+  uid?: string;
+  sourceImage?: {
+    status: ImageStatus;
+    file?: File;
+  };
+  sourceVideo?: {
+    status: ImageStatus;
+    file?: File;
+  };
+  video?: Image;
+  content_type: MultipartItemContentType;
+  config?: {
+    image_resolution?: string;
+    video_fps?: number;
+  };
+}
+
+export interface ImageField {
+  name?: string;
+  url?: string;
+  uri?: string;
+  thumb_url?: string;
+}
+
+export interface UploadAttachmentDetail {
+  contentType?: ContentType;
+  originImage?: ImageField;
+  image?: ImageField;
+  errorType?: ItemErrorType;
+  errMsg?: string;
+}
+
+export type MultipartEditorConfig = MultiModalSpec & {
+  imageEnabled?: boolean;
+  imageSupportedFormats?: string[];
+  videoEnabled?: boolean;
+  videoSupportedFormats?: string[];
+  maxVideoSize?: number;
+};
+
+export interface MultipartEditorProps {
+  spaceID?: Int64;
+  className?: string;
+  value?: MultipartItem[];
+  multipartConfig?: MultipartEditorConfig;
+  readonly?: boolean;
+  onChange?: (contents: MultipartItem[]) => void;
+  uploadFile?: (params: any) => Promise<string>;
+  uploadImageUrl?: (
+    urls: string[],
+  ) => Promise<UploadAttachmentDetail[] | undefined>;
+  imageHidden?: boolean;
+  videoHidden?: boolean;
+  intranetUrlValidator?: (url: string) => boolean;
+}

package/src/multi-part-editor/upload-button.tsx

@@ -0,0 +1,256 @@
+/* eslint-disable @coze-arch/max-line-per-function */
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+
+import { ContentType } from '@cozeloop/api-schema/prompt';
+import {
+  IconCozImage,
+  IconCozImageArrowUp,
+  IconCozVideo,
+} from '@coze-arch/coze-design/icons';
+import {
+  IconButton,
+  Menu,
+  Toast,
+  Upload,
+  type UploadProps,
+} from '@coze-arch/coze-design';
+
+import { type ContentPartLoop } from './type';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface UploadBtnProps extends React.HTMLAttributes<HTMLButtonElement> {
+  spaceID: string;
+  disabled?: boolean;
+  maxImageSize?: number;
+  maxVideoSize?: number;
+  maxFileCount?: number;
+  imageEnabled?: boolean;
+  videoEnabled?: boolean;
+  imageSupportedFormats?: string[];
+  videoSupportedFormats?: string[];
+  fileLimit?: number;
+  fileParts?: ContentPartLoop[];
+  uploadFile?: (params: any) => Promise<string>;
+  onFilePartsChange?: (part: ContentPartLoop) => void;
+}
+export interface UploadButtonRef {
+  getUploadImage: () => Upload | null;
+  getUploadVideo: () => Upload | null;
+}
+
+export const UploadButton = forwardRef<UploadButtonRef, UploadBtnProps>(
+  (
+    {
+      spaceID,
+      disabled,
+      maxImageSize,
+      maxVideoSize,
+      maxFileCount,
+      uploadFile,
+      imageEnabled,
+      videoEnabled,
+      imageSupportedFormats,
+      videoSupportedFormats,
+      fileLimit,
+      fileParts = [],
+      onFilePartsChange,
+    }: UploadBtnProps,
+    ref,
+  ) => {
+    const uploadImgRef = useRef<Upload>(null);
+    const uploadVideoRef = useRef<Upload>(null);
+
+    const createUploadHandler =
+      (fileType: 'image' | 'video'): UploadProps['customRequest'] =>
+      ({ fileInstance, file, onProgress, onSuccess, onError }) => {
+        const currentFileType = fileType;
+        const { uid } = file;
+
+        const reader = new FileReader();
+        reader.readAsDataURL(fileInstance as Blob);
+        reader.onload = async () => {
+          const base64Url = reader.result as string;
+          const partInfo =
+            currentFileType === 'image'
+              ? { image_url: { url: file.url, thumb_url: base64Url } }
+              : { video_url: { url: file.url, thumb_url: base64Url } };
+          const part: ContentPartLoop = {
+            type:
+              currentFileType === 'image'
+                ? ContentType.ImageURL
+                : ContentType.VideoURL,
+            ...partInfo,
+            status: 'uploading',
+            uid,
+          };
+
+          try {
+            onFilePartsChange?.(part);
+            const res = await uploadFile?.({
+              spaceID,
+              file: fileInstance,
+              fileType: 'image', // 不管是视频还是图片，都走imageX上传，所以fileType必须都是image
+              onProgress,
+              onSuccess,
+              onError,
+            });
+
+            const fileInfo =
+              currentFileType === 'image'
+                ? {
+                    image_url: {
+                      url: file.url,
+                      uri: res,
+                      thumb_url: base64Url,
+                    },
+                  }
+                : {
+                    video_url: {
+                      url: file.url,
+                      uri: res,
+                      thumb_url: base64Url,
+                    },
+                  };
+
+            const newPart: ContentPartLoop = {
+              ...part,
+              ...fileInfo,
+              status: 'success',
+            };
+            onFilePartsChange?.(newPart);
+          } catch (error) {
+            console.info('error', error);
+            Toast.error('图片上传失败，请稍后重试');
+            onFilePartsChange?.({
+              ...part,
+              status: 'uploadFail',
+            });
+          }
+        };
+      };
+
+    const renderImageUpload = useCallback(
+      (children: React.ReactNode) => (
+        <Upload
+          ref={uploadImgRef}
+          action=""
+          customRequest={createUploadHandler('image')}
+          accept={imageSupportedFormats?.join(',') || 'image/*'}
+          showUploadList={false}
+          maxSize={maxImageSize ? maxImageSize * 1024 * 1024 : 0}
+          limit={fileLimit}
+          onSizeError={() => Toast.error(`图片大小不能超过${maxImageSize}MB`)}
+          onExceed={() => Toast.warning(`最多上传${maxFileCount}张图片`)}
+          multiple
+          fileList={fileParts.map(it => ({
+            uid: it.uid || '',
+            url: it.image_url?.url,
+            status: it.status || 'success',
+            name: it.uid || '',
+            size: '0',
+          }))}
+        >
+          {children}
+        </Upload>
+      ),
+      [fileParts, maxImageSize, fileLimit, imageSupportedFormats],
+    );
+
+    const renderVideoUpload = useCallback(
+      (children: React.ReactNode) => (
+        <Upload
+          ref={uploadVideoRef}
+          action=""
+          customRequest={createUploadHandler('video')}
+          accept={videoSupportedFormats?.join(',') || 'video/*'}
+          showUploadList={false}
+          maxSize={maxVideoSize ? maxVideoSize * 1024 : 0}
+          limit={fileLimit}
+          onSizeError={() => Toast.error(`视频大小不能超过${maxVideoSize}MB`)}
+          onExceed={() => Toast.warning(`最多上传${maxFileCount}个视频`)}
+          multiple
+          fileList={fileParts.map(it => ({
+            uid: it.uid || '',
+            url: it.video_url?.url,
+            status: it.status || 'success',
+            name: it.uid || '',
+            size: '0',
+          }))}
+        >
+          {children}
+        </Upload>
+      ),
+      [fileParts, maxVideoSize, fileLimit, videoSupportedFormats],
+    );
+
+    useImperativeHandle(ref, () => ({
+      getUploadImage: () => uploadImgRef.current,
+      getUploadVideo: () => uploadVideoRef.current,
+    }));
+
+    if (!imageEnabled && !videoEnabled) {
+      return null;
+    }
+
+    if (imageEnabled && !videoEnabled) {
+      return renderImageUpload(
+        <IconButton
+          icon={<IconCozImage />}
+          color="primary"
+          disabled={disabled}
+          data-btm="d41383"
+          data-btm-title="图片上传"
+        />,
+      );
+    }
+
+    if (!imageEnabled && videoEnabled) {
+      return renderVideoUpload(
+        <IconButton
+          icon={<IconCozVideo />}
+          color="primary"
+          disabled={disabled}
+          data-btm="d27622"
+          data-btm-title="视频上传"
+        />,
+      );
+    }
+
+    return (
+      <>
+        <Menu
+          render={
+            <Menu.SubMenu mode="menu">
+              <Menu.Item
+                onClick={() => {
+                  uploadImgRef.current?.openFileDialog();
+                }}
+                data-btm="d41383"
+                data-btm-title="图片上传"
+              >
+                图片上传
+              </Menu.Item>
+              <Menu.Item
+                onClick={() => {
+                  uploadVideoRef.current?.openFileDialog();
+                }}
+                data-btm="d27622"
+                data-btm-title="视频上传"
+              >
+                视频上传
+              </Menu.Item>
+            </Menu.SubMenu>
+          }
+        >
+          <IconButton
+            icon={<IconCozImageArrowUp />}
+            color="primary"
+            disabled={disabled}
+          />
+        </Menu>
+        {renderImageUpload(null)}
+        {renderVideoUpload(null)}
+      </>
+    );
+  },
+);

package/src/multi-part-editor/utils.ts

@@ -0,0 +1,64 @@
+import { type MultipartEditorConfig } from './type';
+
+export const DEFAULT_FILE_SIZE = 20 * 1024 * 1024;
+export const DEFAULT_FILE_COUNT = 20;
+export const DEFAULT_PART_COUNT = 50;
+export const DEFAULT_SUPPORTED_FORMATS = [
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.gif',
+  '.bmp',
+  '.webp',
+];
+
+export const DEFAULT_VIDEO_SUPPORTED_FORMATS = [
+  '.mp4',
+  '.avi',
+  '.mov',
+  '.wmv',
+  '.flv',
+  '.mkv',
+];
+
+export const getMultipartConfig = (multipartConfig?: MultipartEditorConfig) => {
+  const {
+    max_file_count,
+    max_part_count,
+    max_file_size,
+    imageEnabled,
+    videoEnabled,
+    imageSupportedFormats,
+    videoSupportedFormats,
+    maxVideoSize,
+  } = multipartConfig || {};
+  const maxFileCount = max_file_count
+    ? Number(max_file_count)
+    : DEFAULT_FILE_COUNT;
+  const maxPartCount = max_part_count
+    ? Number(max_part_count)
+    : DEFAULT_PART_COUNT;
+  const trueMaxFileCount =
+    maxFileCount > maxPartCount ? maxPartCount : maxFileCount;
+  const maxFileSize = max_file_size ? Number(max_file_size) : DEFAULT_FILE_SIZE;
+  const currentImageSupportedFormats = (
+    imageSupportedFormats?.map(format =>
+      format.startsWith('.') ? format : `.${format}`,
+    ) || DEFAULT_SUPPORTED_FORMATS
+  ).join(',');
+  const currentVideoSupportedFormats = (
+    videoSupportedFormats?.map(format =>
+      format.startsWith('.') ? format : `.${format}`,
+    ) || DEFAULT_VIDEO_SUPPORTED_FORMATS
+  ).join(',');
+  return {
+    maxFileCount: trueMaxFileCount,
+    maxPartCount,
+    maxFileSize,
+    imageEnabled,
+    videoEnabled,
+    imageSupportedFormats: currentImageSupportedFormats,
+    videoSupportedFormats: currentVideoSupportedFormats,
+    maxVideoSize,
+  };
+};

package/src/open-detail-button/index.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import { IconCozLongArrowTopRight } from '@coze-arch/coze-design/icons';
+import { Tooltip, Button } from '@coze-arch/coze-design';
+
+interface Props {
+  url: string;
+  className?: string;
+}
+
+export function OpenDetailButton({ url, className }: Props) {
+  return (
+    <Tooltip theme="dark" content="查看详情">
+      <Button
+        onClick={e => {
+          e.stopPropagation();
+          window.open(url);
+        }}
+        className={classNames(
+          'flex-shrink-0 !h-6 !w-6 !min-w-[24px] !p-[5px]',
+          className,
+        )}
+        size="small"
+        color="secondary"
+        icon={
+          <IconCozLongArrowTopRight className="h-[14px] w-[14px] coz-fg-secondary" />
+        }
+      ></Button>
+    </Tooltip>
+  );
+}

package/src/page-content/index.tsx

@@ -0,0 +1,99 @@
+import { type CSSProperties, type ReactNode } from 'react';
+
+import classNames from 'classnames';
+import {
+  IconCozIllus404Dark,
+  IconCozIllus404,
+  IconCozIllusErrorDark,
+  IconCozIllusError,
+  IconCozIllusLock,
+  IconCozIllusLockDark,
+  IconCozIllusEmpty,
+  IconCozIllusEmptyDark,
+} from '@coze-arch/coze-design/illustrations';
+import { Empty, Spin, type EmptyStateProps } from '@coze-arch/coze-design';
+
+interface PageLoadingProps {
+  tip?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+interface FullPageProps {
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+
+type PageContentProps = Omit<EmptyStateProps, 'image' | 'darkModeImage'>;
+
+export function FullPage({ children, className, style }: FullPageProps) {
+  return (
+    <div
+      className={classNames(
+        'w-full h-full flex items-center justify-center bg-semi-bg-1 z-10',
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+export function PageLoading(props: PageLoadingProps) {
+  return (
+    <FullPage className={props.className} style={props.style}>
+      <Spin wrapperClassName="w-full h-full" spinning tip={props.tip} />
+    </FullPage>
+  );
+}
+
+export function PageNotFound({ className, ...props }: PageContentProps) {
+  return (
+    <FullPage className={className}>
+      <Empty
+        image={<IconCozIllus404 className="text-[160px]" />}
+        darkModeImage={<IconCozIllus404Dark className="text-[160px]" />}
+        description="页面丢失了"
+        {...props}
+      />
+    </FullPage>
+  );
+}
+
+export function PageError({ className, ...props }: PageContentProps) {
+  return (
+    <FullPage className={className}>
+      <Empty
+        image={<IconCozIllusError className="text-[160px]" />}
+        darkModeImage={<IconCozIllusErrorDark className="text-[160px]" />}
+        description="页面加载失败"
+        {...props}
+      />
+    </FullPage>
+  );
+}
+
+export function PageNoAuth({ className, ...props }: PageContentProps) {
+  return (
+    <FullPage className={className}>
+      <Empty
+        image={<IconCozIllusLock className="text-[160px]" />}
+        darkModeImage={<IconCozIllusLockDark className="text-[160px]" />}
+        description="暂无权限"
+        {...props}
+      ></Empty>
+    </FullPage>
+  );
+}
+
+export function PageNoContent({ className, ...props }: PageContentProps) {
+  return (
+    <FullPage className={className}>
+      <Empty
+        image={<IconCozIllusEmpty className="text-[160px]" />}
+        darkModeImage={<IconCozIllusEmptyDark className="text-[160px]" />}
+        {...props}
+      />
+    </FullPage>
+  );
+}

package/src/primary-page/index.tsx

@@ -0,0 +1 @@
+export { PrimaryPage } from './primary-header';

package/src/primary-page/primary-header.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+interface PrimaryPageHeaderProps {
+  pageTitle?: ReactNode;
+  filterSlot?: ReactNode;
+  children?: ReactNode;
+  headerClassName?: string;
+  titleClassName?: string;
+  contentClassName?: string;
+  className?: string;
+  titleSlot?: ReactNode;
+}
+
+export const PrimaryPage = ({
+  pageTitle,
+  filterSlot,
+  children,
+  contentClassName,
+  className,
+  headerClassName,
+  titleClassName,
+  titleSlot,
+}: PrimaryPageHeaderProps) => (
+  <div
+    className={classNames(
+      'pt-2 pb-3 h-full max-h-full flex flex-col',
+      className,
+    )}
+  >
+    {pageTitle || titleSlot ? (
+      <div
+        className={classNames(
+          'flex items-center justify-between py-4 px-6',
+          headerClassName,
+        )}
+      >
+        <div
+          className={classNames(
+            'text-[20px] font-medium leading-6 coz-fg-plus',
+            titleClassName,
+          )}
+        >
+          {pageTitle}
+        </div>
+        <div>{titleSlot}</div>
+      </div>
+    ) : null}
+    {filterSlot ? (
+      <div className="box-border coz-fg-secondary pt-1 pb-3 px-6">
+        {filterSlot}
+      </div>
+    ) : null}
+    <div
+      className={classNames(
+        'flex-1 h-full max-h-full overflow-hidden px-6',
+        contentClassName,
+      )}
+    >
+      {children}
+    </div>
+  </div>
+);

package/src/primary-title/index.module.less

@@ -0,0 +1,14 @@
+.primary-title {
+  position: relative;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &::before {
+    content: "";
+    width: 2px;
+    height: 14px;
+    background-color: var(--semi-color-primary);
+  }
+}

package/src/primary-title/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Typography } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+interface PrimaryTitleProps {
+  title: string;
+  className?: string;
+}
+
+export function PrimaryTitle({ title, className }: PrimaryTitleProps) {
+  return (
+    <Typography.Text className={classNames(styles['primary-title'], className)}>
+      {title}
+    </Typography.Text>
+  );
+}