@cozeloop/components 0.0.3 → 0.0.4-beta-1770694681364

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

@@ -1,103 +0,0 @@
-/* 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

@@ -1,256 +0,0 @@
-/* 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

@@ -1,64 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

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

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

@@ -1,64 +0,0 @@
-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

@@ -1,14 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-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>
-  );
-}