Merge pull request #426 from easyops-cn/steve/stage-flow

Steve/stage-flow

Author: weareoutman

bricks/advanced/src/next-table/styles.shadow.css

@@ -242,6 +242,8 @@
     }
 
     .ant-table.ant-table-bordered {
+      background: #fff;
+
       .ant-table-thead > tr > th {
         color: #262626;
         background: #f3f6fa;

bricks/ai-portal/package.json

@@ -52,6 +52,7 @@
     "@next-shared/datetime": "^0.4.3",
     "@next-shared/diagram": "^0.1.1",
     "@next-shared/form": "^0.9.3",
+    "@next-shared/hooks": "^0.0.19",
     "@next-shared/markdown": "^0.7.2",
     "@next-shared/shiki": "^0.1.0",
     "@next-shared/tsx-converter": "^0.5.1",

bricks/ai-portal/src/chat-box/FileListComponent.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+import { WrappedIcon } from "./bricks";
+import type { FileItem } from "./interfaces";
+import {
+  formatFileSize,
+  getFileTypeAndIcon,
+} from "../cruise-canvas/utils/file";
+
+export interface FileListComponentProps {
+  files: FileItem[];
+  onRemove: (uid: number, abortController: AbortController | undefined) => void;
+  onAdd: () => void;
+}
+
+export function FileListComponent({
+  files,
+  onRemove,
+  onAdd,
+}: FileListComponentProps) {
+  const showAsImage = files.every((file) =>
+    file.file.type.startsWith("image/")
+  );
+
+  return (
+    <ul className="files">
+      {files.map((file) => (
+        <FileComponent
+          {...file}
+          key={file.uid}
+          showAsImage={showAsImage}
+          onRemove={onRemove}
+        />
+      ))}
+      <li>
+        <button className="btn-add-file" onClick={onAdd}>
+          <WrappedIcon lib="antd" icon="plus" />
+        </button>
+      </li>
+    </ul>
+  );
+}
+
+interface FileComponentProps extends FileItem {
+  showAsImage?: boolean;
+  onRemove: (uid: number, abortController: AbortController | undefined) => void;
+}
+
+function FileComponent({
+  uid,
+  file,
+  status,
+  abortController,
+  showAsImage,
+  onRemove,
+}: FileComponentProps) {
+  const [type, icon] = getFileTypeAndIcon(file.type, file.name);
+  const size = formatFileSize(file.size);
+  const isImage = file.type.startsWith("image/");
+  const [image, setImage] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (isImage) {
+      const url = URL.createObjectURL(file);
+      setImage(url);
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } else {
+      setImage(undefined);
+    }
+  }, [file, isImage]);
+
+  const buttonRemove = (
+    <button
+      className="file-remove"
+      onClick={() => {
+        onRemove(uid, abortController);
+      }}
+    >
+      <WrappedIcon lib="antd" theme="filled" icon="close-circle" />
+    </button>
+  );
+
+  if (showAsImage) {
+    return (
+      <li
+        className={classNames("file as-image", { failed: status === "failed" })}
+      >
+        <img className="file-image" src={image} />
+        {status === "uploading" && (
+          <div className="file-overlay">
+            <WrappedIcon lib="antd" icon="loading-3-quarters" spinning />
+          </div>
+        )}
+        {status === "failed" && (
+          <div className="file-overlay">Upload failed</div>
+        )}
+        {buttonRemove}
+      </li>
+    );
+  }
+
+  return (
+    <li className={classNames("file", { failed: status === "failed" })}>
+      {isImage ? (
+        <img className="file-image" src={image} />
+      ) : (
+        <img className="file-icon" src={icon} width={26} height={32} />
+      )}
+      <div className="file-content">
+        <div className="file-name">{file.name}</div>
+        <div className="file-metadata">
+          <span className="file-status">
+            {`${status === "uploading" ? "Uploading..." : status === "failed" ? "Upload failed" : type}`}
+          </span>
+          {` · ${size}`}
+        </div>
+      </div>
+      {buttonRemove}
+    </li>
+  );
+}

bricks/ai-portal/src/chat-box/UploadButton.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
+import { WrappedIconButton } from "./bricks";
+import type { FileItem } from "./interfaces";
+
+const ICON_UPLOAD: GeneralIconProps = {
+  lib: "lucide",
+  icon: "paperclip",
+};
+
+let uid = 0;
+
+export interface UploadButtonProps {
+  onChange?: (files: FileItem[] | undefined) => void;
+}
+
+export interface UploadButtonRef {
+  requestUpload: () => void;
+}
+
+export const UploadButton = forwardRef(LegacyUploadButton);
+
+function LegacyUploadButton(
+  { onChange }: UploadButtonProps,
+  ref: React.Ref<UploadButtonRef>
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    onChange?.(
+      files
+        ? Array.from(files).map((file) => ({
+            uid: uid++,
+            file,
+            status: "ready",
+          }))
+        : undefined
+    );
+    e.target.value = "";
+  };
+
+  useImperativeHandle(ref, () => ({
+    requestUpload: () => {
+      inputRef.current?.click();
+    },
+  }));
+
+  return (
+    <>
+      <input
+        type="file"
+        multiple
+        hidden
+        ref={inputRef}
+        onChange={handleInputChange}
+      />
+      <WrappedIconButton
+        variant="light"
+        className="btn-upload"
+        icon={ICON_UPLOAD}
+        tooltip="Upload files"
+        onClick={() => inputRef.current?.click()}
+      />
+    </>
+  );
+}

bricks/ai-portal/src/chat-box/bricks.ts

@@ -0,0 +1,27 @@
+import { wrapBrick } from "@next-core/react-element";
+import type {
+  GeneralIcon,
+  GeneralIconProps,
+} from "@next-bricks/icons/general-icon";
+import type {
+  ActionsEvents,
+  ActionsEventsMapping,
+  ActionsProps,
+  EoActions,
+} from "@next-bricks/basic/actions";
+import type { IconButton, IconButtonProps } from "../icon-button";
+
+export const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
+export const WrappedActions = wrapBrick<
+  EoActions,
+  ActionsProps & { activeKeys?: (string | number)[] },
+  ActionsEvents,
+  ActionsEventsMapping
+>("eo-actions", {
+  onActionClick: "action.click",
+  onItemDragEnd: "item.drag.end",
+  onItemDragStart: "item.drag.start",
+});
+export const WrappedIconButton = wrapBrick<IconButton, IconButtonProps>(
+  "ai-portal.icon-button"
+);