feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/project-ide/main/src/components/global-modals/resource-modal/index.tsx

@@ -0,0 +1,162 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import {
+  ModalService,
+  ModalType,
+  useIDEService,
+} from '@coze-project-ide/framework';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozWarningCircleFillPalette } from '@coze-arch/coze-design/icons';
+import { Modal } from '@coze-arch/coze-design';
+import { ResourceCopyScene } from '@coze-arch/bot-api/plugin_develop';
+
+import { LoopContent } from './loop-content';
+
+import styles from './styles.module.less';
+
+export const ResourceModal = () => {
+  const [visible, setVisible] = useState(false);
+  const [scene, setScene] = useState<ResourceCopyScene | undefined>(undefined);
+  const [error, setError] = useState<boolean | string>(false);
+  const [resourceName, setResourceName] = useState('');
+
+  const modalService = useIDEService<ModalService>(ModalService);
+
+  const handleCancel = useCallback(() => {
+    modalService.onCloseResourceModal();
+  }, []);
+
+  const handleOk = useCallback(() => {
+    if (error) {
+      modalService.retry();
+    }
+  }, [error]);
+
+  const title = useMemo(() => {
+    switch (scene) {
+      case ResourceCopyScene.CopyResourceFromLibrary:
+        return I18n.t(
+          'resource_process_modal_title_import_resource_from_library',
+        );
+      case ResourceCopyScene.MoveResourceToLibrary:
+        return I18n.t('resource_process_modal_title_move_resource_to_library');
+      case ResourceCopyScene.CopyResourceToLibrary:
+        return I18n.t('resource_process_modal_title_copy_resource_to_library');
+      case ResourceCopyScene.CopyProjectResource:
+        return I18n.t('workflow_add_list_copy');
+      default:
+        return '';
+    }
+  }, [scene]);
+
+  const errorContent = useMemo(() => {
+    if (typeof error === 'string' && error !== 'no_task_id') {
+      return error;
+    }
+    switch (scene) {
+      case ResourceCopyScene.CopyResourceFromLibrary:
+        return I18n.t('resource_toast_copy_to_project_fail');
+      case ResourceCopyScene.MoveResourceToLibrary:
+        return I18n.t('resource_toast_move_to_library_fail');
+      case ResourceCopyScene.CopyResourceToLibrary:
+        return I18n.t('resource_toast_copy_to_library_fail');
+      case ResourceCopyScene.CopyProjectResource:
+        return I18n.t('project_toast_copy_failed');
+      default:
+        return '';
+    }
+  }, [scene, error]);
+
+  const content = useMemo(() => {
+    if (error) {
+      return (
+        <div className={styles['error-container']}>
+          <IconCozWarningCircleFillPalette
+            className="coz-fg-hglt-red"
+            fontSize={22}
+          />
+          {errorContent}
+        </div>
+      );
+    }
+    return <LoopContent scene={scene} resourceName={resourceName} />;
+  }, [error, errorContent, resourceName, scene]);
+
+  const okText = useMemo(() => {
+    // Retry is not supported in the open-source environment.
+    if (IS_OPEN_SOURCE) {
+      return '';
+    }
+    if (typeof error === 'string') {
+      return '';
+    } else if (error) {
+      return I18n.t('resource_process_modal_retry_button');
+    }
+    return '';
+  }, [error]);
+
+  useEffect(() => {
+    const resourceDisposable = modalService.onModalVisibleChange(
+      ({
+        type,
+        visible: vis = true,
+        scene: _scene,
+        resourceName: _resourceName,
+      }) => {
+        if (type === ModalType.RESOURCE) {
+          setVisible(Boolean(vis));
+          setScene(_scene);
+          setResourceName(_resourceName || '');
+          setError(false);
+        }
+      },
+    );
+    const resourceErrorDisposable = modalService.onError(isError => {
+      setError(isError);
+    });
+    return () => {
+      resourceDisposable.dispose();
+      resourceErrorDisposable.dispose();
+    };
+  }, []);
+
+  const cancelText = useMemo(() => {
+    // Cancel logic changes in the open-source environment.
+    if (IS_OPEN_SOURCE) {
+      return error ? I18n.t('resource_process_modal_cancel_button') : undefined;
+    }
+    return I18n.t('resource_process_modal_cancel_button');
+  }, [error]);
+
+  return (
+    <Modal
+      visible={visible}
+      width={384}
+      type="dialog"
+      title={title}
+      okText={okText}
+      onOk={handleOk}
+      cancelText={cancelText}
+      onCancel={handleCancel}
+      maskClosable={false}
+    >
+      <div className={styles.content}>{content}</div>
+    </Modal>
+  );
+};