[feat] [frontend] migrate basic components, toolkits, etc (#159)

* feat(biz-components): migration

* feat(components): migration

* feat(guard): migration

* feat(prompt): migration

* feat(toolkit): migration

* feat(i18n): update types

Author: mocayo

common/config/subspaces/default/pnpm-lock.yaml

@@ -106,8 +106,9 @@ export interface ContentPart {
   image_url?: ImageURL,
 }
 export enum ContentType {
-  Text = "text",
-  ImageURL = "image_url",
+  Text = 'text',
+  ImageURL = 'image_url',
+  MultiPartVariable = 'multi_part',
 }
 export interface ImageURL {
   uri?: string,
@@ -214,4 +215,4 @@ export enum Scenario {
 }
 export interface OverridePromptParams {
   model_config?: ModelConfig
-}
+}

frontend/packages/cozeloop/api-schema/src/api/idl/prompt/domain/prompt.ts

@@ -0,0 +1,84 @@
+// Copyright (c) 2025 coze-dev Authors
+// SPDX-License-Identifier: Apache-2.0
+import { I18n } from '@cozeloop/i18n-adapter';
+import { handleCopy } from '@cozeloop/components';
+import {
+  type Message,
+  type Role,
+  type Prompt,
+  ContentType,
+} from '@cozeloop/api-schema/prompt';
+import { IconCozCopy, IconCozTrashCan } from '@coze-arch/coze-design/icons';
+import { IconButton, Popconfirm, Space } from '@coze-arch/coze-design';
+
+export type PromptMessage<R = Role> = Omit<Message, 'role'> & {
+  role?: R;
+  id?: string;
+  key?: string;
+  optimize_key?: string;
+};
+
+interface EditorToolsProps<R> {
+  onDelete?: (id?: string | number) => void;
+  message?: PromptMessage<R>;
+  disabled?: boolean;
+  promptInfo?: Prompt;
+  optimizeBtnHidden?: boolean;
+  onMessageChange?: (message: PromptMessage<R>) => void;
+}
+
+export function EditorTools<R>({
+  onDelete,
+  message,
+  disabled,
+}: EditorToolsProps<R>) {
+  const handleInfo = () => {
+    if (message?.parts?.length) {
+      return message?.parts
+        ?.map(it => {
+          if (it.type === ContentType.MultiPartVariable && it?.text) {
+            return `<multimodal-variable>${it.text}</multimodal-variable>`;
+          }
+          return it.text;
+        })
+        .join('');
+    }
+    return message?.content;
+  };
+  return (
+    <Space>
+      <IconButton
+        icon={<IconCozCopy />}
+        color="secondary"
+        size="mini"
+        onClick={() => {
+          const info = handleInfo() ?? '';
+          handleCopy(info);
+        }}
+      />
+      {!onDelete ? null : disabled ? (
+        <IconButton
+          icon={<IconCozTrashCan />}
+          color="secondary"
+          size="mini"
+          disabled={disabled}
+        />
+      ) : (
+        <Popconfirm
+          title={I18n.t('delete_prompt_template')}
+          content={I18n.t('confirm_delete_current_prompt_template')}
+          cancelText={I18n.t('Cancel')}
+          okText={I18n.t('delete')}
+          okButtonProps={{ color: 'red' }}
+          onConfirm={() => onDelete?.(`${message?.key || message?.id || ''}`)}
+        >
+          <IconButton
+            icon={<IconCozTrashCan />}
+            color="secondary"
+            size="mini"
+          />
+        </Popconfirm>
+      )}
+    </Space>
+  );
+}

frontend/packages/cozeloop/biz-components/src/editor-tools/index.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 coze-dev Authors
+// SPDX-License-Identifier: Apache-2.0
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

frontend/packages/cozeloop/biz-components/src/global.d.ts

@@ -7,3 +7,7 @@ export {
   BenefitBannerScene,
 } from './benefit';
 export { UserSelect } from './user-select';
+
+export { EditorTools } from './editor-tools';
+
+export { MessageToolBtns } from './message-tool-btns';

frontend/packages/cozeloop/biz-components/src/index.ts

@@ -0,0 +1,29 @@
+// Copyright (c) 2025 coze-dev Authors
+// SPDX-License-Identifier: Apache-2.0
+.tool-btns {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-end;
+
+  margin-left: -4px;
+
+
+  .icon-button {
+    background: transparent;
+
+    &:hover {
+      color: var(--semi-color-primary);
+    }
+
+    &-active{
+      background-color:rgba(var(--coze-bg-6), var(--coze-bg-6-alpha))!important;
+    }
+  }
+
+  :global {
+    .semi-button-disabled {
+      color: var(--semi-color-disabled-text) !important;
+    }
+  }
+}