From 253dc7722f79ce7ec19cfb43fdb5cb7d9de53f79 Mon Sep 17 00:00:00 2001
From: qihai <qihai@bytedance.com>
Date: Fri, 5 Sep 2025 14:05:29 +0800
Subject: [PATCH 1/6] feat(biz-components): migration

---
 .../src/api/idl/prompt/domain/prompt.ts       |   7 +-
 .../biz-components/src/editor-tools/index.tsx |  84 ++++++
 .../cozeloop/biz-components/src/global.d.ts   |   6 +
 .../cozeloop/biz-components/src/index.ts      |   4 +
 .../src/message-tool-btns/index.module.less   |  29 ++
 .../src/message-tool-btns/index.tsx           | 253 ++++++++++++++++++
 6 files changed, 380 insertions(+), 3 deletions(-)
 create mode 100644 frontend/packages/cozeloop/biz-components/src/editor-tools/index.tsx
 create mode 100644 frontend/packages/cozeloop/biz-components/src/global.d.ts
 create mode 100644 frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.module.less
 create mode 100644 frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.tsx

diff --git a/frontend/packages/cozeloop/api-schema/src/api/idl/prompt/domain/prompt.ts b/frontend/packages/cozeloop/api-schema/src/api/idl/prompt/domain/prompt.ts
index e0812fa4c..2f869dc10 100644
--- a/frontend/packages/cozeloop/api-schema/src/api/idl/prompt/domain/prompt.ts
+++ b/frontend/packages/cozeloop/api-schema/src/api/idl/prompt/domain/prompt.ts
@@ -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
-}
\ No newline at end of file
+}
diff --git a/frontend/packages/cozeloop/biz-components/src/editor-tools/index.tsx b/frontend/packages/cozeloop/biz-components/src/editor-tools/index.tsx
new file mode 100644
index 000000000..e7881d48d
--- /dev/null
+++ b/frontend/packages/cozeloop/biz-components/src/editor-tools/index.tsx
@@ -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>
+  );
+}
diff --git a/frontend/packages/cozeloop/biz-components/src/global.d.ts b/frontend/packages/cozeloop/biz-components/src/global.d.ts
new file mode 100644
index 000000000..f052f32af
--- /dev/null
+++ b/frontend/packages/cozeloop/biz-components/src/global.d.ts
@@ -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;
+}
diff --git a/frontend/packages/cozeloop/biz-components/src/index.ts b/frontend/packages/cozeloop/biz-components/src/index.ts
index 3d1cb4aab..f49dfd533 100644
--- a/frontend/packages/cozeloop/biz-components/src/index.ts
+++ b/frontend/packages/cozeloop/biz-components/src/index.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';
diff --git a/frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.module.less b/frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.module.less
new file mode 100644
index 000000000..f02cf4fc7
--- /dev/null
+++ b/frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.module.less
@@ -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;
+    }
+  }
+}
diff --git a/frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.tsx b/frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.tsx
new file mode 100644
index 000000000..9528f3c2e
--- /dev/null
+++ b/frontend/packages/cozeloop/biz-components/src/message-tool-btns/index.tsx
@@ -0,0 +1,253 @@
+// Copyright (c) 2025 coze-dev Authors
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable @coze-arch/max-line-per-function */
+/* eslint-disable complexity */
+
+import { useState, type Dispatch, type SetStateAction } from 'react';
+
+import classNames from 'classnames';
+import { I18n } from '@cozeloop/i18n-adapter';
+import { handleCopy } from '@cozeloop/components';
+import {
+  ContentType,
+  type Prompt,
+  type VariableVal,
+  type DebugMessage as BasicDebugMessage,
+  type Message,
+} from '@cozeloop/api-schema/prompt';
+import {
+  IconCozAutoHeight,
+  IconCozCopy,
+  IconCozNode,
+  IconCozPencil,
+  IconCozRefresh,
+  IconCozTrashCan,
+} from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Divider,
+  IconButton,
+  Popconfirm,
+  Space,
+  Tooltip,
+} from '@coze-arch/coze-design';
+
+import { type PromptMessage } from '../editor-tools';
+
+import styles from './index.module.less';
+
+interface DebugMessage extends BasicDebugMessage {
+  id?: string;
+  isEdit?: boolean;
+}
+
+interface MessageToolBtnsProps<R> {
+  item: DebugMessage;
+  streaming?: boolean;
+  canReRun?: boolean;
+  canFile?: boolean;
+  canOptimize?: boolean;
+  saveDisabled?: boolean;
+  isMarkdown?: boolean;
+  btnConfig?: {
+    hideMessageTypeSelect?: boolean;
+    hideDelete?: boolean;
+    hideEdit?: boolean;
+    hideRerun?: boolean;
+    hideCopy?: boolean;
+    hideTypeChange?: boolean;
+    hideCancel?: boolean;
+    hideOk?: boolean;
+    hideTrace?: boolean;
+    hideOptimize?: boolean;
+  };
+  updateMessage?: () => void;
+  updateEditable?: (v: boolean) => void;
+  deleteChat?: () => void;
+  rerunLLM?: () => void;
+  updateMessageItem?: (v: DebugMessage) => void;
+  setIsMarkdown?: Dispatch<SetStateAction<boolean>>;
+  setDebugId?: (v: string | number) => void;
+
+  promptInfo?: Prompt;
+  variables?: VariableVal[];
+  optimizeSystemPrompt?: PromptMessage<R>;
+  setMessageList?: SetStateAction<
+    Array<Message & { key?: string }> | undefined
+  >;
+  lastItem?: DebugMessage;
+}
+
+export function MessageToolBtns<R>({
+  item,
+  streaming,
+  updateEditable,
+  deleteChat,
+  rerunLLM,
+  canReRun,
+  updateMessageItem,
+  saveDisabled,
+  isMarkdown,
+  setIsMarkdown,
+  btnConfig,
+  setDebugId,
+}: MessageToolBtnsProps<R>) {
+  const [showPopconfirm, setShowPopconfirm] = useState(false);
+
+  const { isEdit, parts } = item;
+
+  if (streaming) {
+    return null;
+  }
+
+  const content =
+    parts?.find(it => it?.type === ContentType.Text)?.text || item.content;
+
+  const copyBtn = !btnConfig?.hideCopy && (
+    <Tooltip content={I18n.t('copy')} theme="dark">
+      <IconButton
+        className={styles['icon-button']}
+        icon={<IconCozCopy fontSize={14} />}
+        disabled={!content}
+        onClick={() => content && handleCopy(content)}
+        size="mini"
+        color="secondary"
+      />
+    </Tooltip>
+  );
+
+  const txtMdBtn = !btnConfig?.hideTypeChange && (
+    <Tooltip content={isMarkdown ? 'TXT' : 'MARKDOWN'} theme="dark">
+      <IconButton
+        className={classNames(styles['icon-button'], '!hover:coz-mg-primary', {
+          [styles['icon-button-active']]: !isMarkdown,
+        })}
+        icon={<IconCozAutoHeight fontSize={14} />}
+        onClick={() => setIsMarkdown?.(v => !v)}
+        size="mini"
+        color="secondary"
+      />
+    </Tooltip>
+  );
+
+  const editBtn = !btnConfig?.hideEdit && (
+    <Tooltip content={I18n.t('edit')} theme="dark">
+      <IconButton
+        className={styles['icon-button']}
+        icon={<IconCozPencil fontSize={14} />}
+        onClick={() => updateEditable?.(true)}
+        size="mini"
+        color="secondary"
+      />
+    </Tooltip>
+  );
+
+  const deleteBtn = !btnConfig?.hideDelete && (
+    <Popconfirm
+      trigger="custom"
+      visible={showPopconfirm}
+      title={I18n.t('delete_message')}
+      content={I18n.t('confirm_delete_message')}
+      cancelText={I18n.t('Cancel')}
+      okText={I18n.t('delete')}
+      okButtonProps={{ color: 'red' }}
+      stopPropagation={true}
+      onConfirm={() => {
+        deleteChat?.();
+        setShowPopconfirm(false);
+      }}
+      onCancel={() => setShowPopconfirm(false)}
+    >
+      {showPopconfirm ? (
+        <IconButton
+          className={styles['icon-button']}
+          icon={<IconCozTrashCan fontSize={14} />}
+          size="mini"
+          onClick={() => setShowPopconfirm(false)}
+        />
+      ) : (
+        <span>
+          <Tooltip content={I18n.t('delete')} theme="dark">
+            <IconButton
+              className={styles['icon-button']}
+              icon={<IconCozTrashCan fontSize={14} />}
+              size="mini"
+              onClick={() => setShowPopconfirm(true)}
+              color="secondary"
+            />
+          </Tooltip>
+        </span>
+      )}
+    </Popconfirm>
+  );
+
+  const cancelEditBtn = !btnConfig?.hideCancel && (
+    <Button
+      size="mini"
+      color="primary"
+      disabled={saveDisabled}
+      className={styles['icon-button']}
+      onClick={() => updateEditable?.(false)}
+    >
+      {I18n.t('Cancel')}
+    </Button>
+  );
+
+  const okEditBtn = !btnConfig?.hideOk && (
+    <Button
+      size="mini"
+      disabled={saveDisabled}
+      icon
+      onClick={() => updateMessageItem?.({ ...item, isEdit: false })}
+    >
+      {I18n.t('Confirm')}
+    </Button>
+  );
+
+  const refreshBtn = !btnConfig?.hideRerun && (
+    <Tooltip content={I18n.t('rerun')} theme="dark">
+      <IconButton
+        className={styles['icon-button']}
+        icon={<IconCozRefresh fontSize={14} />}
+        onClick={rerunLLM}
+        size="mini"
+        color="secondary"
+      />
+    </Tooltip>
+  );
+
+  const traceBtn = !btnConfig?.hideTrace && (
+    <Tooltip content="Trace" theme="dark">
+      <IconButton
+        className={styles['icon-button']}
+        icon={<IconCozNode fontSize={14} />}
+        onClick={() => {
+          setDebugId?.(item?.debug_id || '');
+        }}
+        size="mini"
+        color="secondary"
+      />
+    </Tooltip>
+  );
+
+  if (isEdit) {
+    return (
+      <Space className="w-full justify-end" align="center">
+        {cancelEditBtn}
+        {okEditBtn}
+      </Space>
+    );
+  }
+
+  return (
+    <div className={styles['tool-btns']}>
+      {txtMdBtn}
+      <Divider layout="vertical" />
+      {item?.debug_id ? traceBtn : null}
+      {editBtn}
+      {copyBtn}
+      {canReRun ? refreshBtn : null}
+      {deleteBtn}
+    </div>
+  );
+}

From 15b24f7843667c03d0b68251da13a8c84e5359d7 Mon Sep 17 00:00:00 2001
From: qihai <qihai@bytedance.com>
Date: Fri, 5 Sep 2025 15:08:56 +0800
Subject: [PATCH 2/6] feat(components): migration

---
 .../packages/cozeloop/components/package.json |   4 +-
 .../packages/cozeloop/components/src/index.ts |   1 +
 .../components/image-item-renderer.tsx        | 129 ++++++
 .../components/multipart-item-renderer.tsx    |  63 +++
 .../components/url-input-modal.tsx            | 304 ++++++++++++++
 .../src/multi-part-editor/index.module.less   |   8 +
 .../src/multi-part-editor/index.tsx           | 383 ++++++++++++++++++
 .../components/src/multi-part-editor/type.tsx |  75 ++++
 .../components/src/multi-part-editor/utils.ts |  38 ++
 .../src/tooltip-with-disabled/index.tsx       |   4 +-
 10 files changed, 1005 insertions(+), 4 deletions(-)
 create mode 100755 frontend/packages/cozeloop/components/src/multi-part-editor/components/image-item-renderer.tsx
 create mode 100755 frontend/packages/cozeloop/components/src/multi-part-editor/components/multipart-item-renderer.tsx
 create mode 100755 frontend/packages/cozeloop/components/src/multi-part-editor/components/url-input-modal.tsx
 create mode 100644 frontend/packages/cozeloop/components/src/multi-part-editor/index.module.less
 create mode 100644 frontend/packages/cozeloop/components/src/multi-part-editor/index.tsx
 create mode 100644 frontend/packages/cozeloop/components/src/multi-part-editor/type.tsx
 create mode 100644 frontend/packages/cozeloop/components/src/multi-part-editor/utils.ts

diff --git a/frontend/packages/cozeloop/components/package.json b/frontend/packages/cozeloop/components/package.json
index a1e726b31..a4aaf5323 100644
--- a/frontend/packages/cozeloop/components/package.json
+++ b/frontend/packages/cozeloop/components/package.json
@@ -25,7 +25,8 @@
     "monaco-editor": "^0.45.0",
     "nanoid": "^4.0.2",
     "react": "~18.2.0",
-    "react-sortable-hoc": "2.0.0"
+    "react-sortable-hoc": "2.0.0",
+    "sortablejs": "~1.15.2"
   },
   "devDependencies": {
     "@coze-arch/bot-typings": "workspace:*",
@@ -46,4 +47,3 @@
   },
   "peerDependencies": {}
 }
-
diff --git a/frontend/packages/cozeloop/components/src/index.ts b/frontend/packages/cozeloop/components/src/index.ts
index e4b4ffb95..1b56b54a9 100644
--- a/frontend/packages/cozeloop/components/src/index.ts
+++ b/frontend/packages/cozeloop/components/src/index.ts
@@ -96,3 +96,4 @@ export { default as JumpIconButton } from './jump-button/jump-icon-button';
 export { default as RouteBackAction } from './route/route-back-action';
 
 export { BasicCard } from './basic-card';
+export { MultipartEditor } from './multi-part-editor';
diff --git a/frontend/packages/cozeloop/components/src/multi-part-editor/components/image-item-renderer.tsx b/frontend/packages/cozeloop/components/src/multi-part-editor/components/image-item-renderer.tsx
new file mode 100755
index 000000000..f5d089f72
--- /dev/null
+++ b/frontend/packages/cozeloop/components/src/multi-part-editor/components/image-item-renderer.tsx
@@ -0,0 +1,129 @@
+/* eslint-disable @coze-arch/use-error-in-catch */
+/* eslint-disable complexity */
+import React, { useState } from 'react';
+
+import { StorageProvider } from '@cozeloop/api-schema/data';
+import {
+  IconCozEye,
+  IconCozImageBroken,
+  IconCozRefresh,
+  IconCozTrashCan,
+} from '@coze-arch/coze-design/icons';
+import { Image, ImagePreview, Loading } from '@coze-arch/coze-design';
+
+import { ImageStatus, type MultipartItem } from '../type';
+
+interface ImageItemRendererProps {
+  spaceID?: Int64;
+  item: MultipartItem;
+  readonly?: boolean;
+  onRemove: () => void;
+  onChange: (item: MultipartItem) => void;
+  uploadFile?: (params: unknown) => Promise<string>;
+}
+
+export const ImageItemRenderer: React.FC<ImageItemRendererProps> = ({
+  spaceID,
+  item,
+  onRemove,
+  onChange,
+  uploadFile,
+  readonly,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [fileLoadError, setFileLoadError] = useState(false);
+  const status = item?.sourceImage?.status;
+  const uri = item?.image?.uri;
+  const url = item?.image?.url;
+  const isError = status === ImageStatus.Error;
+  const file = item?.sourceImage?.file as File;
+  const retryUpload = async () => {
+    try {
+      onChange({
+        ...item,
+        sourceImage: {
+          ...item.sourceImage,
+          status: ImageStatus.Loading,
+        },
+      });
+      const newUri = await uploadFile?.({
+        file,
+        fileType: 'image',
+        spaceID,
+      });
+      onChange({
+        ...item,
+        sourceImage: {
+          ...item.sourceImage,
+          status: ImageStatus.Success,
+        },
+        image: {
+          ...item.image,
+          uri: newUri,
+          storage_provider: StorageProvider.ImageX,
+        },
+      });
+    } catch (error) {
+      onChange({
+        ...item,
+        sourceImage: {
+          ...item.sourceImage,
+          status: ImageStatus.Error,
+        },
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col ">
+      <div className="w-[64px] h-[64px] relative group">
+        <ImagePreview
+          src={item?.image?.url}
+          visible={visible}
+          onVisibleChange={setVisible}
+        />
+        <Image
+          src={item?.image?.url}
+          className="rounded-[6px]"
+          width={64}
+          height={64}
+          imgStyle={{ objectFit: 'contain' }}
+          fallback={<IconCozImageBroken className="text-[24px]" />}
+          onError={() => setFileLoadError(true)}
+        />
+        {status !== ImageStatus.Loading && (
+          <div
+            className={`absolute inset-0 flex gap-3 items-center rounded-[6px] justify-center bg-[rgba(0,0,0,0.4)] ${isError ? 'visible' : 'invisible'}  group-hover:visible`}
+          >
+            {isError && !readonly ? (
+              <IconCozRefresh
+                className="text-white w-[16px] h-[16px] cursor-pointer"
+                onClick={retryUpload}
+              />
+            ) : null}
+            {(uri || url) && !fileLoadError ? (
+              <IconCozEye
+                className="text-white w-[16px] h-[16px] cursor-pointer"
+                onClick={() => setVisible(true)}
+              />
+            ) : null}
+            {readonly ? null : (
+              <IconCozTrashCan
+                className="text-white w-[16px] h-[16px] cursor-pointer"
+                onClick={onRemove}
+              />
+            )}
+          </div>
+        )}
+        {status === ImageStatus.Loading && (
+          <div className="absolute inset-0 flex items-center rounded-[6px] justify-center bg-[rgba(0,0,0,0.4)] z-10">
+            <Loading loading color="blue" />
+          </div>
+        )}
+      </div>
+      {status === ImageStatus.Error && (
+        <div className="text-center text-sm text-red-500">上传失败</div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/packages/cozeloop/components/src/multi-part-editor/components/multipart-item-renderer.tsx b/frontend/packages/cozeloop/components/src/multi-part-editor/components/multipart-item-renderer.tsx
new file mode 100755
index 000000000..7b8a850ce
--- /dev/null
+++ b/frontend/packages/cozeloop/components/src/multi-part-editor/components/multipart-item-renderer.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { type Content, ContentType } from '@cozeloop/api-schema/evaluation';
+import { IconCozTrashCan } from '@coze-arch/coze-design/icons';
+import { Button, TextArea } from '@coze-arch/coze-design';
+
+import { ImageItemRenderer } from './image-item-renderer';
+
+interface MultipartItemRendererProps {
+  item: Content;
+  readonly?: boolean;
+  onChange: (item: Content) => void;
+  onRemove: () => void;
+}
+
+export const MultipartItemRenderer: React.FC<MultipartItemRendererProps> = ({
+  item,
+  readonly,
+  onChange,
+  onRemove,
+}) => {
+  const handleTextChange = (text: string) => {
+    onChange({
+      ...item,
+      text,
+    });
+  };
+
+  switch (item.content_type) {
+    case ContentType.Text:
+      return (
+        <div className="flex items-center gap-1">
+          <TextArea
+            value={item.text}
+            onChange={handleTextChange}
+            autosize={{ minRows: 1, maxRows: 3 }}
+            disabled={readonly}
+            placeholder="请输入文本信息"
+          />
+          {readonly ? null : (
+            <Button
+              icon={<IconCozTrashCan />}
+              color="secondary"
+              size="small"
+              onClick={onRemove}
+            />
+          )}
+        </div>
+      );
+
+    case ContentType.Image:
+      return (
+        <ImageItemRenderer
+          item={item}
+          onRemove={onRemove}
+          onChange={onChange}
+          readonly={readonly}
+        />
+      );
+    default:
+      return null;
+  }
+};
diff --git a/frontend/packages/cozeloop/components/src/multi-part-editor/components/url-input-modal.tsx b/frontend/packages/cozeloop/components/src/multi-part-editor/components/url-input-modal.tsx
new file mode 100755
index 000000000..b240f11bf
--- /dev/null
+++ b/frontend/packages/cozeloop/components/src/multi-part-editor/components/url-input-modal.tsx
@@ -0,0 +1,304 @@
+/* eslint-disable @coze-arch/max-line-per-function */
+import React, { useState, useRef } from 'react';
+
+import { type Image as ImageProps } from '@cozeloop/api-schema/evaluation';
+import {
+  IconCozTrashCan,
+  IconCozPlus,
+  IconCozCheckMarkCircleFill,
+  IconCozCrossCircleFill,
+} from '@coze-arch/coze-design/icons';
+import {
+  Modal,
+  Button,
+  Image,
+  Spin,
+  Form,
+  type FormApi,
+  Typography,
+  Tag,
+  type ColumnProps,
+} from '@coze-arch/coze-design';
+
+import { LoopTable } from '@/table';
+
+import { ErrorTypeMap, type UploadAttachmentDetail } from '../type';
+
+interface UrlInputModalProps {
+  visible: boolean;
+  onConfirm: (results: ImageProps[]) => void;
+  onCancel: () => void;
+  maxCount?: number;
+  uploadImageUrl?: (
+    urls: string[],
+  ) => Promise<UploadAttachmentDetail[] | undefined>;
+}
+
+export const UrlInputModal: React.FC<UrlInputModalProps> = ({
+  visible,
+  onConfirm,
+  onCancel,
+  maxCount = 6,
+  uploadImageUrl,
+}) => {
+  const [error, setError] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+  const [isUploaded, setIsUploaded] = useState(false);
+  const [uploadResults, setUploadResults] = useState<UploadAttachmentDetail[]>(
+    [],
+  );
+  const formRef = useRef<FormApi>();
+  // Validate helpers
+  const validateUrl = (url: string) => {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  // Upload logic
+  const handleUpload = async formValues => {
+    if (formValues?.urls?.length === 0) {
+      setError('请至少添加一个图片链接');
+      return;
+    }
+    setIsUploading(true);
+    setError('');
+    try {
+      const results = await uploadImageUrl?.(formValues?.urls);
+      setUploadResults(results || []);
+      setIsUploaded(true);
+    } catch (err) {
+      setError('上传失败，请重试');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleConfirm = async () => {
+    if (!uploadImageUrl) {
+      const data = await formRef.current
+        ?.validate()
+        ?.catch(e => console.error(e));
+      if (Array.isArray(data?.urls)) {
+        onConfirm(
+          data?.urls?.map(item => ({
+            name: item,
+            url: item,
+            thumb_url: item,
+          })),
+        );
+      }
+      return;
+    }
+    if (isUploaded) {
+      const successResults = uploadResults.filter(
+        item => item.errorType === undefined,
+      );
+      onConfirm(
+        successResults.map(item => ({
+          name: item.image?.name,
+          url: item.originImage?.url,
+          uri: item.image?.uri,
+          thumb_url: item.image?.thumb_url,
+        })),
+      );
+    } else {
+      await formRef.current?.submitForm();
+    }
+  };
+
+  const handleCancel = () => {
+    setError('');
+    setIsUploading(false);
+    setIsUploaded(false);
+    setUploadResults([]);
+    onCancel();
+  };
+
+  // Dynamic form for URLs
+  const renderInputStage = () => (
+    <Form
+      initValues={{ urls: [''] }}
+      getFormApi={api => (formRef.current = api)}
+      onSubmit={handleUpload}
+    >
+      {({ formState, formApi }) => {
+        const urls: string[] = formState.values?.urls || [''];
+        const canAdd = urls.length < maxCount;
+        return (
+          <div>
+            {urls.map((url, idx) => (
+              <div key={idx} className="flex  gap-2">
+                <Form.Input
+                  field={`urls[${idx}]`}
+                  label={{
+                    text: `图片${idx + 1}`,
+                    required: true,
+                  }}
+                  fieldClassName="flex-1"
+                  placeholder="请输入图片链接"
+                  rules={[
+                    {
+                      validator: (_, value, cb) => {
+                        if (!value) {
+                          cb('请输入图片链接');
+                          return false;
+                        }
+                        if (!validateUrl(value)) {
+                          cb('请输入有效的URL');
+                          return false;
+                        }
+                        return true;
+                      },
+                    },
+                  ]}
+                  className="w-full"
+                />
+                <Button
+                  size="small"
+                  color="secondary"
+                  icon={<IconCozTrashCan className="w-[14px] h-[14px]" />}
+                  onClick={() => {
+                    formApi.setValue(
+                      'urls',
+                      urls.filter((_, i) => i !== idx),
+                    );
+                  }}
+                  className="mt-[42px]"
+                  disabled={urls.length === 1}
+                />
+              </div>
+            ))}
+            <Button
+              color="primary"
+              disabled={!canAdd}
+              icon={<IconCozPlus />}
+              onClick={() => formApi.setValue('urls', [...urls, ''])}
+              className="mt-2"
+            >
+              添加
+              <Typography.Text
+                className="ml-1"
+                type="secondary"
+              >{`${urls.length}/${maxCount}`}</Typography.Text>
+            </Button>
+            {error ? (
+              <div className="text-red-500 text-sm mt-1">{error}</div>
+            ) : null}
+          </div>
+        );
+      }}
+    </Form>
+  );
+
+  const columns: ColumnProps<UploadAttachmentDetail>[] = [
+    {
+      title: '图片地址',
+      dataIndex: 'originImage.url',
+      width: 220,
+      ellipsis: { showTitle: true },
+    },
+    {
+      title: '图片预览',
+      dataIndex: 'originImage.url',
+      width: 120,
+      render: (url: string) => (
+        <Image
+          src={url}
+          width={60}
+          height={60}
+          imgStyle={{ objectFit: 'contain' }}
+        />
+      ),
+    },
+    {
+      title: '状态',
+      key: 'status',
+      align: 'left',
+      width: 200,
+      render: (record: UploadAttachmentDetail) => (
+        <div className="flex items-center">
+          <Tag
+            prefixIcon={
+              record?.errorType ? (
+                <IconCozCrossCircleFill />
+              ) : (
+                <IconCozCheckMarkCircleFill />
+              )
+            }
+            color={record?.errorType ? 'red' : 'green'}
+          >
+            {record?.errorType ? '失败' : '成功'}
+          </Tag>
+          <Typography.Text type="secondary" className="ml-1">
+            {record.errorType ? ErrorTypeMap[record.errorType] : ''}
+          </Typography.Text>
+        </div>
+      ),
+    },
+  ];
+
+  const renderResultStage = () => (
+    <div className="space-y-4">
+      <LoopTable
+        tableProps={{
+          columns,
+          dataSource: uploadResults,
+          rowKey: 'id',
+          pagination: false,
+          size: 'small',
+        }}
+      />
+    </div>
+  );
+
+  const getConfirmButtonText = () => {
+    if (!uploadImageUrl) {
+      return '确认';
+    }
+    if (isUploading) {
+      return '上传中...';
+    }
+    if (isUploaded) {
+      return '导入图片';
+    }
+    return '上传';
+  };
+
+  return (
+    <Modal
+      title="添加图片链接"
+      visible={visible}
+      onCancel={handleCancel}
+      width={640}
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button onClick={handleCancel} color="primary">
+            取消
+          </Button>
+          <Button
+            type="primary"
+            onClick={handleConfirm}
+            loading={isUploading}
+            // disabled={!isUploaded && urls.length === 0}
+          >
+            {getConfirmButtonText()}
+          </Button>
+        </div>
+      }
+    >
+      {isUploading ? (
+        <div className="flex items-center justify-center py-8">
+          <Spin size="large" />
+          <span className="ml-2">正在上传图片...</span>
+        </div>
+      ) : null}
+
+      {!isUploading && !isUploaded && renderInputStage()}
+      {!isUploading && isUploaded ? renderResultStage() : null}
+    </Modal>
+  );
+};
diff --git a/frontend/packages/cozeloop/components/src/multi-part-editor/index.module.less b/frontend/packages/cozeloop/components/src/multi-part-editor/index.module.less
new file mode 100644
index 000000000..68155865f
--- /dev/null
+++ b/frontend/packages/cozeloop/components/src/multi-part-editor/index.module.less
@@ -0,0 +1,8 @@
+.ghost {
+  opacity: 0.5;
+}
+
+.drag {
+  overflow: hidden;
+  max-height: 100px;
+}
diff --git a/frontend/packages/cozeloop/components/src/multi-part-editor/index.tsx b/frontend/packages/cozeloop/components/src/multi-part-editor/index.tsx
new file mode 100644
index 000000000..f1242e4f3
--- /dev/null
+++ b/frontend/packages/cozeloop/components/src/multi-part-editor/index.tsx
@@ -0,0 +1,383 @@
+/* eslint-disable max-lines-per-function */
+/* eslint-disable @coze-arch/use-error-in-catch */
+/* eslint-disable @coze-arch/max-line-per-function */
+import React, { useRef, useState, useEffect } from 'react';
+
+import Sortable from 'sortablejs';
+import { nanoid } from 'nanoid';
+import classNames from 'classnames';
+import {
+  ContentType,
+  type Image as ImageProps,
+} from '@cozeloop/api-schema/evaluation';
+import { StorageProvider } from '@cozeloop/api-schema/data';
+import { IconCozPlus, IconCozHandle } from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Dropdown,
+  IconButton,
+  Toast,
+  Typography,
+  Upload,
+  type UploadProps,
+} from '@coze-arch/coze-design';
+
+import { getMultipartConfig } from './utils';
+import {
+  ImageStatus,
+  type MultipartEditorProps,
+  type MultipartItem,
+} from './type';
+import { UrlInputModal } from './components/url-input-modal';
+import { MultipartItemRenderer } from './components/multipart-item-renderer';
+
+import styles from './index.module.less';
+
+export const MultipartEditor: React.FC<MultipartEditorProps> = ({
+  spaceID,
+  uploadFile,
+  value,
+  onChange,
+  className,
+  multipartConfig = {},
+  uploadImageUrl,
+  readonly,
+}) => {
+  const uploadRef = useRef<Upload>(null);
+  const { maxFileCount, maxPartCount, maxFileSize, supportedFormats } =
+    getMultipartConfig(multipartConfig);
+  const sortableContainer = useRef<HTMLDivElement>(null);
+  const [items, setItems] = useState<MultipartItem[]>(
+    (value || []).map(item => ({
+      ...item,
+      uid: nanoid(),
+    })),
+  );
+  const [showUrlModal, setShowUrlModal] = useState(false);
+
+  // 同步数据到父组件
+  useEffect(() => {
+    onChange?.(items);
+  }, [items]);
+  const imageCount = items.filter(
+    item => item.content_type === ContentType.Image,
+  ).length;
+  // 初始化sortablejs拖拽排序
+  useEffect(() => {
+    if (sortableContainer.current) {
+      new Sortable(sortableContainer.current, {
+        animation: 150,
+        handle: '.drag-handle',
+        ghostClass: styles.ghost,
+        onEnd: evt => {
+          console.log(evt);
+          setItems(list => {
+            const draft = [...(list ?? [])];
+            if (draft.length) {
+              const { oldIndex = 0, newIndex = 0 } = evt;
+              const [item] = draft.splice(oldIndex, 1);
+              draft.splice(newIndex, 0, item);
+            }
+            console.log(draft);
+            return draft;
+          });
+        },
+        setData(dataTransfer, dragEl) {
+          // dragEl 是被拖拽的元素
+          // dataTransfer 是拖拽数据传输对象
+          // 创建自定义预览元素
+          // 浅复制（只复制元素本身，不包含子元素）
+
+          // 深复制（复制元素及其所有子元素）
+          const dragElClone: HTMLElement = dragEl.cloneNode(
+            true,
+          ) as HTMLElement;
+          const customPreview = document.createElement('div');
+          // // 临时添加到DOM（必须在可见区域外）
+          customPreview.style.position = 'absolute';
+          customPreview.style.top = '-1000px';
+          customPreview.style.width = '200px';
+          customPreview.appendChild(dragElClone);
+          const wrapper = dragElClone.getElementsByClassName(
+            'semi-collapsible-wrapper',
+          )?.[0];
+          if (wrapper) {
+            wrapper.setAttribute(
+              'style',
+              'height: 0px; width: 0px; overflow: hidden;',
+            );
+          }
+          document.body.appendChild(customPreview);
+          dataTransfer.setDragImage(wrapper ? customPreview : dragEl, 0, 0);
+          // 清理临时元素
+          setTimeout(() => {
+            if (customPreview.parentNode) {
+              document.body.removeChild(customPreview);
+            }
+          }, 0);
+        },
+      });
+    }
+  }, []);
+  // 处理文件上传
+  const handleUploadFile: UploadProps['customRequest'] = async ({
+    file,
+    onProgress,
+    onSuccess,
+    onError,
+  }) => {
+    const uid = nanoid();
+
+    try {
+      const fileInstance = (file.fileInstance || file) as File;
+      const url = URL.createObjectURL(fileInstance);
+      // 添加loading状态的item
+      setItems(prev => [
+        ...prev,
+        {
+          uid,
+          content_type: ContentType.Image,
+          sourceImage: {
+            status: ImageStatus.Loading,
+            file: fileInstance,
+          },
+          image: {
+            name: file.name,
+            url,
+            storage_provider: StorageProvider.ImageX,
+          },
+        },
+      ]);
+      const uri = await uploadFile?.({
+        file: fileInstance,
+        fileType: 'image',
+        onProgress,
+        onSuccess,
+        onError,
+        spaceID,
+      });
+
+      // 更新为成功状态
+      setItems(prev =>
+        prev.map(item =>
+          item.uid === uid
+            ? {
+                ...item,
+                sourceImage: {
+                  status: ImageStatus.Success,
+                  file: fileInstance,
+                },
+                image: {
+                  ...item.image,
+                  url,
+                  uri,
+                  storage_provider: StorageProvider.ImageX,
+                },
+              }
+            : item,
+        ),
+      );
+    } catch (error) {
+      // 更新为错误状态
+      setItems(prev =>
+        prev.map(item =>
+          item.uid === uid
+            ? {
+                ...item,
+                sourceImage: {
+                  ...item.sourceImage,
+                  status: ImageStatus.Error,
+                },
+              }
+            : item,
+        ),
+      );
+    }
+  };
+
+  // 添加文本节点
+  const handleAddText = () => {
+    setItems(prev => [
+      ...prev,
+      {
+        uid: nanoid(),
+        content_type: ContentType.Text,
+        text: '',
+      },
+    ]);
+  };
+
+  // 添加图片文件节点
+  const handleAddImageFile = () => {
+    setTimeout(() => {
+      uploadRef.current?.openFileDialog();
+    }, 0);
+  };
+
+  // 添加图片链接节点
+  const handleAddImageUrl = () => {
+    setShowUrlModal(true);
+  };
+
+  // 确认添加图片链接
+  const handleConfirmImageUrl = (results: ImageProps[]) => {
+    const newItems = results.map(result => ({
+      uid: nanoid(),
+      content_type: ContentType.Image,
+      image: {
+        ...result,
+        storage_provider: StorageProvider.ImageX,
+      },
+    }));
+
+    setItems(prev => [...prev, ...newItems]);
+    setShowUrlModal(false);
+  };
+
+  // 更新item
+  const handleItemChange = (newItem: MultipartItem) => {
+    console.log(newItem);
+    setItems(prev =>
+      prev.map(item => (item.uid === newItem.uid ? newItem : item)),
+    );
+  };
+
+  // 删除item
+  const handleItemRemove = (index: number) => {
+    setItems(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const dropdownMenu = (
+    <Dropdown.Menu>
+      <Dropdown.Item
+        onClick={handleAddText}
+        disabled={imageCount >= maxPartCount}
+        className="w-[140px]"
+      >
+        文本
+      </Dropdown.Item>
+      <Dropdown.Item
+        onClick={handleAddImageFile}
+        disabled={imageCount >= maxFileCount}
+        className="w-[140px]"
+      >
+        图片-源文件
+      </Dropdown.Item>
+      <Dropdown.Item
+        onClick={handleAddImageUrl}
+        disabled={imageCount >= maxFileCount}
+        className="w-[140px]"
+      >
+        图片-外链
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  );
+
+  const canUsePartLimit = maxPartCount - items.length;
+  const canUseFileLimit = maxFileCount - imageCount;
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col gap-2 p-0 max-h-[713px] overflow-auto styled-scrollbar',
+        className,
+      )}
+    >
+      {/* 可拖拽容器 */}
+      <div
+        ref={sortableContainer}
+        className={classNames(
+          'flex flex-wrap gap-2 rounded-[6px] coz-bg-primary p-2',
+          {
+            hidden: !items.length,
+          },
+        )}
+      >
+        {items.map((item, index) => (
+          <div key={item.uid} className="flex items-center gap-2 w-full">
+            {readonly ? null : (
+              <IconButton
+                icon={<IconCozHandle className="drag-handle" />}
+                color="secondary"
+              />
+            )}
+            <div className="flex-1">
+              <MultipartItemRenderer
+                item={item}
+                onChange={newItem => handleItemChange(newItem)}
+                onRemove={() => handleItemRemove(index)}
+                readonly={readonly}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* 添加按钮 */}
+      {items.length >= maxPartCount || readonly ? (
+        <Button
+          icon={<IconCozPlus />}
+          size="small"
+          className="!w-fit"
+          color="primary"
+          disabled
+        >
+          添加数据
+          <Typography.Text
+            className="ml-1"
+            type="secondary"
+          >{`${items.length}/${maxPartCount}`}</Typography.Text>
+        </Button>
+      ) : (
+        <Dropdown render={dropdownMenu}>
+          <Button
+            icon={<IconCozPlus />}
+            size="small"
+            className="!w-fit"
+            color="primary"
+            disabled={items.length >= maxPartCount || readonly}
+          >
+            添加数据
+            <Typography.Text
+              className="ml-1"
+              type="secondary"
+            >{`${items.length}/${maxPartCount}`}</Typography.Text>
+          </Button>
+        </Dropdown>
+      )}
+      {/* 隐藏的文件上传组件 */}
+      <Upload
+        ref={uploadRef}
+        action=""
+        maxSize={maxFileSize}
+        onSizeError={() => {
+          Toast.error('图片大小不能超过20MB');
+        }}
+        accept={supportedFormats}
+        customRequest={handleUploadFile}
+        showUploadList={false}
+        style={{ display: 'none' }}
+        multiple
+        limit={
+          canUseFileLimit > canUsePartLimit ? canUsePartLimit : canUseFileLimit
+        }
+        onExceed={() => {
+          Toast.error('图片数量不能超过20张或节点数量不能超过50个');
+        }}
+      />
+      {/* 外链输入模态框 */}
+      {showUrlModal ? (
+        <UrlInputModal
+          visible={showUrlModal}
+          maxCount={
+            canUseFileLimit > canUsePartLimit
+              ? canUsePartLimit
+              : canUseFileLimit
+          }
+          onConfirm={handleConfirmImageUrl}
+          onCancel={() => setShowUrlModal(false)}
+          uploadImageUrl={uploadImageUrl}
+        />
+      ) : null}
+    </div>
+  );
+};
diff --git a/frontend/packages/cozeloop/components/src/multi-part-editor/type.tsx b/frontend/packages/cozeloop/components/src/multi-part-editor/type.tsx
new file mode 100644
index 000000000..7bdb36c3e
--- /dev/null
+++ b/frontend/packages/cozeloop/components/src/multi-part-editor/type.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type Content } from '@cozeloop/api-schema/evaluation';
+import {
+  type ContentType,
+  ItemErrorType,
+  type MultiModalSpec,
+} from '@cozeloop/api-schema/data';
+
+export enum ImageStatus {
+  Loading = 'loading',
+  Success = 'success',
+  Error = 'error',
+}
+
+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 interface MultipartItem extends Content {
+  uid?: string;
+  sourceImage?: {
+    status: ImageStatus;
+    file?: File;
+  };
+}
+
+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;
+}
+
+interface MultiPartContent extends Content {
+  uid?: string;
+  sourceImage?: {
+    status: ImageStatus;
+    file?: File;
+  };
+}
+
+export interface MultipartEditorProps {
+  spaceID?: Int64;
+  className?: string;
+  value?: MultiPartContent[];
+  multipartConfig?: MultiModalSpec;
+  readonly?: boolean;
+  onChange?: (contents: MultiPartContent[]) => void;
+  uploadFile?: (params: any) => Promise<string>;
+  uploadImageUrl?: (
+    urls: string[],
+  ) => Promise<UploadAttachmentDetail[] | undefined>;
+}
diff --git a/frontend/packages/cozeloop/components/src/multi-part-editor/utils.ts b/frontend/packages/cozeloop/components/src/multi-part-editor/utils.ts
new file mode 100644
index 000000000..d0e8da415
--- /dev/null
+++ b/frontend/packages/cozeloop/components/src/multi-part-editor/utils.ts
@@ -0,0 +1,38 @@
+import { type MultiModalSpec } from '@cozeloop/api-schema/data';
+
+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 getMultipartConfig = (
+  multipartConfig?: MultiModalSpec & { max_part_count?: number },
+) => {
+  const { max_file_count, max_part_count, max_file_size, supported_formats } =
+    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 supportedFormats = (
+    supported_formats?.map(format => `.${format}`) || DEFAULT_SUPPORTED_FORMATS
+  ).join(',');
+  return {
+    maxFileCount: trueMaxFileCount,
+    maxPartCount,
+    maxFileSize,
+    supportedFormats,
+  };
+};
diff --git a/frontend/packages/cozeloop/components/src/tooltip-with-disabled/index.tsx b/frontend/packages/cozeloop/components/src/tooltip-with-disabled/index.tsx
index 1b00caae4..dfbd07d8d 100644
--- a/frontend/packages/cozeloop/components/src/tooltip-with-disabled/index.tsx
+++ b/frontend/packages/cozeloop/components/src/tooltip-with-disabled/index.tsx
@@ -1,7 +1,7 @@
 import { type TooltipProps } from '@coze-arch/coze-design';
 import { Tooltip } from '@coze-arch/coze-design';
 
-export interface TooltipWhenDisabledProps extends TooltipProps {
+export interface TooltipWithDisabledProps extends TooltipProps {
   disabled?: boolean;
 }
 
@@ -9,7 +9,7 @@ export function TooltipWithDisabled({
   children,
   disabled,
   ...rest
-}: TooltipWhenDisabledProps) {
+}: TooltipWithDisabledProps) {
   if (disabled) {
     return <>{children}</>;
   }

From 2a0a3f3b0d8d51baaf1b1128279089523c28451c Mon Sep 17 00:00:00 2001
From: qihai <qihai@bytedance.com>
Date: Fri, 5 Sep 2025 15:14:38 +0800
Subject: [PATCH 3/6] feat(guard): migration

---
 frontend/packages/cozeloop/guard/src/types.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/packages/cozeloop/guard/src/types.ts b/frontend/packages/cozeloop/guard/src/types.ts
index 68285bd68..8e001f500 100644
--- a/frontend/packages/cozeloop/guard/src/types.ts
+++ b/frontend/packages/cozeloop/guard/src/types.ts
@@ -28,6 +28,7 @@ export enum GuardPoint {
   'base.navbar.auth' = 'base.navbar.auth',
   'base.navbar.account_setting' = 'base.navbar.account_setting',
   'base.navbar.space_manage' = 'base.navbar.space_manage',
+  'base.navbar.auto_task' = 'base.navbar.auto_task',
   'pe.prompts.create' = 'pe.prompts.create',
   'pe.prompts.delete' = 'pe.prompts.delete',
   'pe.prompts.history' = 'pe.prompts.history',
@@ -79,6 +80,7 @@ export enum GuardPoint {
   'eval.experiment.compare' = 'eval.experiment.compare',
   'eval.experiment.edit_result' = 'eval.experiment.edit_result',
   'ob.trace.custom_view' = 'ob.trace.custom_view',
+  'ob.trace.annotation' = 'ob.trace.annotation',
   'ob.auto_task.create' = 'ob.auto_task.create',
   'ob.auto_task.evaluator_debug' = 'ob.auto_task.evaluator_debug',
   'ob.auto_task.submit_task_form' = 'ob.auto_task.submit_task_form',
@@ -89,6 +91,8 @@ export enum GuardPoint {
   'eval.datasets.search_by_creator' = 'eval.datasets.search_by_creator',
   'eval.evaluators.search_by_creator' = 'eval.evaluators.search_by_creator',
   'eval.experiments.search_by_creator' = 'eval.experiments.search_by_creator',
+  'data.label.create' = 'data.label.create',
+  'data.label.edit' = 'data.label.edit',
 }
 
 /**

From 5aafd5236f1360747645097dac0ab2cafd738dba Mon Sep 17 00:00:00 2001
From: qihai <qihai@bytedance.com>
Date: Fri, 5 Sep 2025 15:25:45 +0800
Subject: [PATCH 4/6] feat(prompt): migration

---
 .../packages/cozeloop/intl/src/intl-format.ts |    2 +-
 .../cozeloop/prompt-components/package.json   |   12 +-
 .../src/assets/modal-variable.svg             |    3 +
 .../src/basic-editor/custom-facet.tsx         |   11 +
 .../src/basic-editor/diff.tsx                 |  187 ++-
 .../src/basic-editor/extensions/go-syntax.ts  |    2 -
 .../basic-editor/extensions/go-template.ts    |   15 +-
 .../src/basic-editor/extensions/go-theme.ts   | 1162 +++++++++++++++++
 .../src/basic-editor/extensions/jinja.tsx     |   81 +-
 .../src/basic-editor/extensions/keymap.ts     |  606 +++++++++
 .../extensions/language-support.tsx           |    2 -
 .../src/basic-editor/extensions/markdown.tsx  |    2 -
 .../extensions/search/dom/icon.ts             |  274 ++++
 .../extensions/search/dom/match-count.ts      |   50 +
 .../basic-editor/extensions/search/index.ts   |   24 +
 .../basic-editor/extensions/search/panel.ts   |  485 +++++++
 .../basic-editor/extensions/search/theme.ts   |  186 +++
 .../extensions/validation.module.css          |    4 -
 .../src/basic-editor/extensions/validation.ts |   94 +-
 .../src/basic-editor/extensions/variable.tsx  |   33 +-
 .../src/basic-editor/index.tsx                |   75 +-
 .../src/code-editor/code-editor.tsx           |    2 -
 .../src/code-editor/index.ts                  |    2 -
 .../src/code-editor/json-editor.tsx           |   22 +-
 .../src/code-editor/raw-text-editor.tsx       |    2 -
 .../src/code-editor/text-editor.tsx           |    2 -
 .../src/code-editor/themes/coze-dark.ts       |    2 -
 .../src/code-editor/themes/coze-light.ts      |    2 -
 .../prompt-components/src/consts/index.ts     |    2 -
 .../src/dev-layout/index.tsx                  |    4 +-
 .../cozeloop/prompt-components/src/index.ts   |   81 +-
 .../mermaid-diagram/font-awesome.all.min.css  |    5 +
 .../src/mermaid-diagram/index.module.less     |    6 +
 .../src/mermaid-diagram/index.tsx             |  133 ++
 .../src/mermaid-diagram/use-svg-pan-zoom.ts   |   57 +
 .../src/mermaid-diagram/utils.ts              |   73 ++
 .../basic-model-config-editor.tsx             |   33 +-
 .../model-config-form-community.tsx           |   42 +-
 .../model-select.tsx                          |   51 -
 .../popover-model-config-editor-query.tsx     |   17 +-
 .../popover-model-config-editor.tsx           |   16 +-
 .../model-config-editor-community/utils.ts    |    4 +-
 .../model-config-editor/model-config-form.tsx |  126 ++
 .../src/model-select/index.module.less        |   25 +
 .../src/model-select/index.tsx                |  165 +++
 .../model-select/model-option-group/index.tsx |   68 +
 .../model-option/index.module.less            |   33 +
 .../src/model-select/model-option/index.tsx   |  215 +++
 .../prompt-components/src/model-types.ts      |  602 +++++++++
 .../src/prompt-create/index.tsx               |   53 +-
 .../src/prompt-editor/index.module.less       |   25 +-
 .../src/prompt-editor/index.tsx               |  397 ++++--
 .../src/prompt-editor/message-type-select.tsx |    2 -
 .../widgets/modal-variable/index.module.less  |   47 +
 .../widgets/modal-variable/index.tsx          |   79 ++
 .../widgets/modal-variable/widget.tsx         |   99 ++
 .../src/prompt-editor/widgets/render-dom.tsx  |   25 +
 .../src/schema-editor/index.tsx               |   49 +
 .../cozeloop/prompt-components/src/types.d.ts |    2 -
 .../prompt-components/src/utils/base.ts       |    2 -
 .../src/utils/model-config.tsx                |   36 +
 .../prompt-components/src/utils/prompt.ts     |   76 +-
 .../cozeloop/prompt-pages/package.json        |    3 +-
 .../cozeloop/prompt-pages/src/app.tsx         |    2 -
 .../src/assets/library-block/chatflow.svg     |    9 +
 .../src/assets/library-block/image.svg        |    9 +
 .../src/assets/library-block/imageflow.svg    |   12 +
 .../src/assets/library-block/index.ts         |    8 +
 .../src/assets/library-block/plugin.svg       |    5 +
 .../src/assets/library-block/table.svg        |    5 +
 .../src/assets/library-block/text.svg         |   10 +
 .../src/assets/library-block/volcano.svg      |    6 +
 .../src/assets/library-block/workflow.svg     |    5 +
 .../components/compare-item/index.module.less |    2 -
 .../src/components/compare-item/index.tsx     |   58 +-
 .../src/components/execute-area/index.tsx     |  250 +++-
 .../execute-history-panel/index.tsx           |    9 +-
 .../execute-history-panel/query-item.tsx      |   17 +-
 .../components/loop-prompt-editor/index.tsx   |   70 +-
 .../loop-prompt-editor/widgets/render-dom.tsx |   25 +
 .../widgets/skill/index.module.less           |   20 +
 .../widgets/skill/index.tsx                   |   68 +
 .../widgets/skill/template-parser.ts          |  369 ++++++
 .../widgets/skill/widget.tsx                  |  135 ++
 .../components/message-area/index.module.less |   21 +-
 .../src/components/message-area/index.tsx     |  435 +++---
 .../src/components/message-area/sub-area.tsx  |  314 +++++
 .../components/message-item/function-list.tsx |   16 +-
 .../components/message-item/index.module.less |    2 -
 .../src/components/message-item/index.tsx     |   56 +-
 .../src/components/message-item/tool-btns.tsx |   23 +-
 .../components/model-config-card/index.tsx    |   88 +-
 .../src/components/prompt-delete/index.tsx    |   17 +-
 .../components/prompt-dev/compare-area.tsx    |   21 +-
 .../src/components/prompt-dev/index.tsx       |    7 +-
 .../src/components/prompt-dev/normal-area.tsx |   48 +-
 .../prompt-editor-card/index.module.less      |    2 -
 .../components/prompt-editor-card/index.tsx   |  210 ++-
 .../prompt-editor-card/template-select.tsx    |  160 +++
 .../src/components/prompt-header/index.tsx    |  164 ++-
 .../components/prompt-header/playground.tsx   |    2 -
 .../components/prompt-submit/diff-content.tsx |  179 ++-
 .../prompt-submit/index.module.less           |    4 +-
 .../src/components/prompt-submit/index.tsx    |  139 +-
 .../components/send-msg-area/group-select.tsx |  156 +++
 .../send-msg-area/index.module.less           |    2 -
 .../src/components/send-msg-area/index.tsx    |  301 +++--
 .../components/tools-card/index.module.less   |    2 -
 .../src/components/tools-card/index.tsx       |   25 +-
 .../components/tools-item/index.module.less   |    2 -
 .../src/components/tools-item/index.tsx       |   13 +-
 .../src/components/tools-item/tool-modal.tsx  |   63 +-
 .../components/trace-tabs/index.module.less   |    2 -
 .../src/components/trace-tabs/index.tsx       |   10 +-
 .../variable-input/index.module.less          |   32 +-
 .../src/components/variable-input/index.tsx   |  282 ++--
 .../variables-card/index.module.less          |    7 +
 .../src/components/variables-card/index.tsx   |  189 ++-
 .../variables-card/placeholder-modal.tsx      |   25 +-
 .../variables-card/variable-modal.tsx         |  451 +++++++
 .../src/components/version-label/index.tsx    |    8 +
 .../version-label/version-label-modal.tsx     |   91 ++
 .../version-label/version-label-select.tsx    |  320 +++++
 .../version-label/version-label-title.tsx     |   30 +
 .../components/version-list/index.module.less |    2 -
 .../src/components/version-list/index.tsx     |   96 +-
 .../components/version-list/version-item.tsx  |   87 +-
 .../cozeloop/prompt-pages/src/consts/index.ts |   59 +-
 .../prompt-pages/src/develop/index.tsx        |   32 +-
 .../prompt-pages/src/hooks/playground-mock.ts |   67 +
 .../prompt-pages/src/hooks/use-compare.ts     |    6 +-
 .../src/hooks/use-llm-stream-run.ts           |   81 +-
 .../prompt-pages/src/hooks/use-playground.ts  |   79 +-
 .../prompt-pages/src/hooks/use-prompt.ts      |  151 ++-
 .../src/hooks/use-version-label-list.ts       |   62 +
 .../src/hooks/use-version-list.ts             |  104 +-
 .../cozeloop/prompt-pages/src/index.ts        |    2 -
 .../cozeloop/prompt-pages/src/list/column.tsx |   24 +-
 .../prompt-pages/src/list/index.module.less   |    2 -
 .../cozeloop/prompt-pages/src/list/index.tsx  |  125 +-
 .../prompt-pages/src/playground/index.tsx     |   22 +-
 .../prompt-pages/src/store/use-basic-store.ts |   36 +-
 .../src/store/use-mockdata-store.ts           |    6 +-
 .../src/store/use-prompt-store.ts             |   40 +-
 .../cozeloop/prompt-pages/src/types.d.ts      |    2 -
 .../cozeloop/prompt-pages/src/utils/llm.ts    |   42 +-
 .../cozeloop/prompt-pages/src/utils/prompt.ts |  129 +-
 147 files changed, 10499 insertions(+), 1767 deletions(-)
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/assets/modal-variable.svg
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/custom-facet.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-theme.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/keymap.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/icon.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/match-count.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/index.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/panel.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/theme.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/font-awesome.all.min.css
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.module.less
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/use-svg-pan-zoom.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/utils.ts
 delete mode 100644 frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-select.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/model-config-editor/model-config-form.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/model-select/index.module.less
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/model-select/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/model-select/model-option-group/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.module.less
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/model-types.ts
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.module.less
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/widget.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/render-dom.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/schema-editor/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-components/src/utils/model-config.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/chatflow.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/image.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/imageflow.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/index.ts
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/plugin.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/table.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/text.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/volcano.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/assets/library-block/workflow.svg
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/render-dom.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.module.less
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/template-parser.ts
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/widget.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/message-area/sub-area.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/template-select.tsx
 delete mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/playground.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/group-select.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.module.less
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/variables-card/variable-modal.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/version-label/index.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-modal.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-select.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-title.tsx
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/hooks/playground-mock.ts
 create mode 100644 frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-label-list.ts

diff --git a/frontend/packages/cozeloop/intl/src/intl-format.ts b/frontend/packages/cozeloop/intl/src/intl-format.ts
index 1294e010f..0ba5571f7 100644
--- a/frontend/packages/cozeloop/intl/src/intl-format.ts
+++ b/frontend/packages/cozeloop/intl/src/intl-format.ts
@@ -47,7 +47,7 @@ export class IntlFormat {
         ? messageFormat.format(fillMissingOptions(messageFormat, options))
         : res;
     } catch (e) {
-      console.error(e);
+      console.warn(`Failed to parse ${key}, ${e}`);
       return res;
     }
   }
diff --git a/frontend/packages/cozeloop/prompt-components/package.json b/frontend/packages/cozeloop/prompt-components/package.json
index ba4ab8822..139831d4d 100644
--- a/frontend/packages/cozeloop/prompt-components/package.json
+++ b/frontend/packages/cozeloop/prompt-components/package.json
@@ -13,31 +13,39 @@
   "dependencies": {
     "@codemirror/commands": "^6.3.3",
     "@codemirror/language": "^6.10.1",
+    "@codemirror/merge": "^6.10.0",
+    "@codemirror/search": "^6.5.5",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
     "@coze-arch/bot-md-box-adapter": "workspace:*",
     "@coze-arch/coze-design": "0.0.6-alpha.346d77",
     "@coze-arch/fetch-stream": "workspace:*",
-    "@coze-editor/editor": "0.1.0-alpha.d92d50",
+    "@coze-editor/editor": "0.1.0-alpha.dac011",
+    "@coze-editor/extension-regexp-decorator": "0.1.0-alpha.0fd19e",
     "@cozeloop/api-schema": "workspace:*",
     "@cozeloop/biz-hooks-adapter": "workspace:*",
     "@cozeloop/components": "workspace:*",
     "@cozeloop/i18n-adapter": "workspace:*",
     "@cozeloop/tea-adapter": "workspace:*",
     "@lezer/common": "^1.2.2",
+    "@shikijs/langs": "^3.9.2",
     "@shikijs/themes": "^3.2.2",
     "ahooks": "^3.7.8",
     "classnames": "^2.3.2",
-    "codemirror-shiki": "^0.2.2",
+    "codemirror-shiki": "^0.3.0",
+    "crelt": "^1.0.5",
     "eventsource-parser": "^1.0.0",
     "immer": "^10.0.3",
+    "js-base64": "^3.7.7",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.438.0",
+    "mermaid": "^11.4.1",
     "mitt": "^3.0.1",
     "nanoid": "^4.0.2",
     "react": "~18.2.0",
     "shiki": "^3.2.2",
     "sortablejs": "~1.15.2",
+    "svg-pan-zoom": "^3.6.2",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
diff --git a/frontend/packages/cozeloop/prompt-components/src/assets/modal-variable.svg b/frontend/packages/cozeloop/prompt-components/src/assets/modal-variable.svg
new file mode 100644
index 000000000..f03454f87
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/assets/modal-variable.svg
@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.89258 7.79004C10.3431 7.79004 10.7448 8.07283 10.8965 8.49707L11.1123 9.10059L11.8213 8.19727C12.0234 7.93999 12.333 7.79006 12.6602 7.79004H13.4678C13.7619 7.79022 14.0007 8.02813 14.001 8.32227C14.001 8.61661 13.7621 8.85528 13.4678 8.85547H12.6602L11.5361 10.2871L11.9775 11.5215H12.668C12.9622 11.5216 13.201 11.7604 13.2012 12.0547C13.2012 12.3491 12.9623 12.5877 12.668 12.5879H11.9775C11.527 12.5879 11.1243 12.3051 10.9727 11.8809L10.7578 11.2773L10.0479 12.1807C9.84578 12.4378 9.53695 12.5878 9.20996 12.5879H8.40234C8.10788 12.5879 7.86914 12.3491 7.86914 12.0547C7.86926 11.7603 8.10796 11.5215 8.40234 11.5215H9.20996L10.334 10.0908L9.89258 8.85547H9.20215C8.90769 8.85547 8.66895 8.61673 8.66895 8.32227C8.66919 8.02801 8.90784 7.79004 9.20215 7.79004H9.89258ZM11.668 1.75C12.3123 1.75 12.835 2.27266 12.835 2.91699V6.94922C12.6011 6.95603 12.3617 6.97249 12.1562 7.01465C11.9692 7.05303 11.81 7.12558 11.668 7.21387V2.91699H2.33496V8.16699L4.46191 6.04004C4.57582 5.92617 4.76012 5.92617 4.87402 6.04004L7.64453 8.80957C7.87195 9.05867 8.4365 9.63916 8.76953 9.63965H9.23145L9.32617 9.88477L8.68848 10.6768H8.3457C7.61682 10.6769 7.01757 11.2306 6.94531 11.9404L6.9375 12.085L6.94531 12.2285C6.94604 12.2357 6.9474 12.2428 6.94824 12.25H2.33496C1.69063 12.25 1.16797 11.7273 1.16797 11.083V2.91699C1.16797 2.27266 1.69063 1.75 2.33496 1.75H11.668ZM10.21 4.375C10.371 4.37504 10.502 4.50594 10.502 4.66699V5.54199C10.5018 5.7029 10.3709 5.83296 10.21 5.83301H9.33496C9.17401 5.83301 9.04314 5.70292 9.04297 5.54199V4.66699C9.04297 4.50591 9.1739 4.375 9.33496 4.375H10.21Z" fill="currentColor" fill-opacity="0.82"/>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/custom-facet.tsx b/frontend/packages/cozeloop/prompt-components/src/basic-editor/custom-facet.tsx
new file mode 100644
index 000000000..9d2f1d040
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/custom-facet.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Facet } from '@codemirror/state';
+
+export const cunstomFacet = Facet.define<
+  Record<string, any>,
+  Record<string, any>
+>({
+  combine(values) {
+    return values[values.length - 1];
+  },
+});
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/diff.tsx b/frontend/packages/cozeloop/prompt-components/src/basic-editor/diff.tsx
index 634a657fb..39583e549 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/diff.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/diff.tsx
@@ -1,6 +1,12 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-import { EditorProvider, MergeViewRenderer } from '@coze-editor/editor/react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { forwardRef, useImperativeHandle, useRef, type ReactNode } from 'react';
+
+import {
+  EditorProvider,
+  goToNextChunk,
+  goToPreviousChunk,
+  MergeViewRenderer,
+} from '@coze-editor/editor/react';
 import preset from '@coze-editor/editor/preset-prompt';
 import { EditorView } from '@codemirror/view';
 import { type Extension } from '@codemirror/state';
@@ -8,78 +14,145 @@ import { type Extension } from '@codemirror/state';
 import MarkdownHighlight from './extensions/markdown';
 import LanguageSupport from './extensions/language-support';
 import JinjaHighlight from './extensions/jinja';
+import { cunstomFacet } from './custom-facet';
 
 const extensions: Extension[] = [
   // diff theme
   EditorView.theme({
     '&.cm-merge-b .cm-changedLine': {
       background: 'transparent !important',
+    },
+    '&.cm-merge-b .cm-line': {
       paddingLeft: '12px !important',
     },
     '&.cm-merge-b .cm-changedText': {
-      background:
-        'linear-gradient(#22bb2266, #22bb2266) bottom/100% 100% no-repeat',
+      background: 'rgba(34,184,24,0.3)',
     },
     '&.cm-merge-a .cm-changedText, .cm-deletedChunk .cm-deletedText': {
-      background:
-        'linear-gradient(#ee443366, #ee443366) bottom/100% 100% no-repeat',
+      background: 'rgba(238,68,51,0.3)',
     },
   }),
 ];
 
+export interface PromptDiffEditorRef {
+  goToPreviousChunk: () => void;
+  goToNextChunk?: () => void;
+}
 interface PromptDiffEditorProps {
   oldValue?: string;
   newValue?: string;
   autoScrollToBottom?: boolean;
+  children?: ReactNode;
+  editorAble?: boolean;
+  onChange?: (value: string) => void;
 }
 
-export function PromptDiffEditor({
-  oldValue,
-  newValue,
-  autoScrollToBottom,
-}: PromptDiffEditorProps) {
-  return (
-    <EditorProvider>
-      <MergeViewRenderer
-        plugins={preset}
-        domProps={{
-          style: {
-            flex: 1,
-            fontSize: 12,
-          },
-        }}
-        mergeConfig={{
-          gutter: false,
-        }}
-        a={{
-          defaultValue: oldValue,
-          extensions,
-          options: {
-            editable: false,
-            readOnly: true,
-          },
-        }}
-        b={{
-          defaultValue: newValue,
-          extensions,
-          options: {
-            editable: false,
-            readOnly: true,
-          },
-        }}
-        didMount={editor => {
-          if (autoScrollToBottom) {
-            editor.b.$view.dispatch({
-              effects: EditorView.scrollIntoView(
-                editor.b.$view.state.doc.length,
-              ),
-            });
-          }
-        }}
-      />
-      <LanguageSupport />
-      <JinjaHighlight />
-      <MarkdownHighlight />
-    </EditorProvider>
-  );
-}
+export const PromptDiffEditor = forwardRef<
+  PromptDiffEditorRef,
+  PromptDiffEditorProps
+>(
+  (
+    {
+      oldValue,
+      newValue,
+      autoScrollToBottom,
+      children,
+      editorAble,
+      onChange,
+    }: PromptDiffEditorProps,
+    ref,
+  ) => {
+    const editorRef = useRef<any>(null);
+
+    useImperativeHandle(ref, () => ({
+      goToPreviousChunk: () => {
+        const view = editorRef.current?.$view;
+        if (!view) {
+          return;
+        }
+        goToPreviousChunk(view);
+      },
+      goToNextChunk: () => {
+        const view = editorRef.current?.$view;
+        if (!view) {
+          return;
+        }
+        goToNextChunk(view);
+      },
+    }));
+
+    return (
+      <EditorProvider>
+        <MergeViewRenderer
+          plugins={preset}
+          domProps={{
+            style: {
+              flex: 1,
+              fontSize: 12,
+              width: '100%',
+            },
+          }}
+          mergeConfig={{
+            gutter: true,
+            collapseUnchanged: {
+              margin: 3,
+              minSize: 4,
+            },
+            diffConfig: {
+              scanLimit: 3000,
+            },
+          }}
+          a={{
+            defaultValue: oldValue,
+            extensions: [
+              ...extensions,
+              cunstomFacet.of({
+                id: 'a',
+                oldValue,
+                newValue,
+              }),
+            ],
+            options: {
+              editable: false,
+              readOnly: true,
+            },
+          }}
+          b={{
+            defaultValue: newValue,
+            extensions: [
+              ...extensions,
+              cunstomFacet.of({
+                id: 'b',
+                oldValue,
+                newValue,
+              }),
+            ],
+            options: {
+              editable: editorAble,
+              readOnly: !editorAble,
+            },
+          }}
+          didMount={editor => {
+            if (autoScrollToBottom) {
+              editor.b.$view.dispatch({
+                effects: EditorView.scrollIntoView(
+                  editor.b.$view.state.doc.length,
+                ),
+              });
+            }
+            if (onChange) {
+              editor.b.$on('change', e => {
+                onChange(e.value);
+              });
+            }
+            editorRef.current = editor.a;
+          }}
+        />
+        <LanguageSupport />
+        <JinjaHighlight />
+        <MarkdownHighlight />
+        {children}
+      </EditorProvider>
+    );
+  },
+);
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-syntax.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-syntax.ts
index dc1290ad9..ef558599d 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-syntax.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-syntax.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 const tmLanguage = {
   foldingStartMarker: '\\{\\{\\s*(?:if|with|range)\\b',
   foldingStopMarker: '\\{\\{\\s*(?:else|end)\\b',
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-template.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-template.ts
index c6aeef5c6..380e62b46 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-template.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-template.ts
@@ -1,12 +1,13 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
 import { createHighlighterCore } from 'shiki/core';
 import shiki from 'codemirror-shiki';
 
 const highlighter = createHighlighterCore({
-  langs: [import('./go-syntax').then(mod => mod.tmLanguage)],
-  themes: [import('@shikijs/themes/one-light')],
+  langs: [
+    import('./go-syntax').then(mod => mod.tmLanguage),
+    import('@shikijs/langs/jinja'),
+  ],
+  themes: [import('./go-theme')],
   engine: createOnigurumaEngine(import('shiki/wasm')),
 });
 
@@ -15,3 +16,9 @@ export const goExtension = shiki({
   language: 'go-template',
   theme: 'one-light',
 });
+
+export const jinja2Extension = shiki({
+  highlighter,
+  language: 'jinja',
+  theme: 'one-light',
+});
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-theme.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-theme.ts
new file mode 100644
index 000000000..843faee69
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/go-theme.ts
@@ -0,0 +1,1162 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable max-lines */
+const json = {
+  colors: {
+    'activityBar.background': '#FAFAFA',
+    'activityBar.foreground': '#121417',
+    'activityBarBadge.background': '#526FFF',
+    'activityBarBadge.foreground': '#FFFFFF',
+    'badge.background': '#526FFF',
+    'badge.foreground': '#FFFFFF',
+    'button.background': '#5871EF',
+    'button.foreground': '#FFFFFF',
+    'button.hoverBackground': '#6B83ED',
+    'diffEditor.insertedTextBackground': '#00809B33',
+    'dropdown.background': '#FFFFFF',
+    'dropdown.border': '#DBDBDC',
+    'editor.background': '#FAFAFA',
+    'editor.findMatchHighlightBackground': '#526FFF33',
+    'editor.foreground': '#383A42',
+    'editor.lineHighlightBackground': '#383A420C',
+    'editor.selectionBackground': '#E5E5E6',
+    'editorCursor.foreground': '#526FFF',
+    'editorGroup.background': '#EAEAEB',
+    'editorGroup.border': '#DBDBDC',
+    'editorGroupHeader.tabsBackground': '#EAEAEB',
+    'editorHoverWidget.background': '#EAEAEB',
+    'editorHoverWidget.border': '#DBDBDC',
+    'editorIndentGuide.activeBackground': '#626772',
+    'editorIndentGuide.background': '#383A4233',
+    'editorInlayHint.background': '#F5F5F5',
+    'editorInlayHint.foreground': '#AFB2BB',
+    'editorLineNumber.activeForeground': '#383A42',
+    'editorLineNumber.foreground': '#9D9D9F',
+    'editorRuler.foreground': '#383A4233',
+    'editorSuggestWidget.background': '#EAEAEB',
+    'editorSuggestWidget.border': '#DBDBDC',
+    'editorSuggestWidget.selectedBackground': '#FFFFFF',
+    'editorWhitespace.foreground': '#383A4233',
+    'editorWidget.background': '#EAEAEB',
+    'editorWidget.border': '#E5E5E6',
+    'extensionButton.prominentBackground': '#3BBA54',
+    'extensionButton.prominentHoverBackground': '#4CC263',
+    focusBorder: '#526FFF',
+    'input.background': '#FFFFFF',
+    'input.border': '#DBDBDC',
+    'list.activeSelectionBackground': '#DBDBDC',
+    'list.activeSelectionForeground': '#232324',
+    'list.focusBackground': '#DBDBDC',
+    'list.highlightForeground': '#121417',
+    'list.hoverBackground': '#DBDBDC66',
+    'list.inactiveSelectionBackground': '#DBDBDC',
+    'list.inactiveSelectionForeground': '#232324',
+    'notebook.cellEditorBackground': '#F5F5F5',
+    'notification.background': '#333333',
+    'peekView.border': '#526FFF',
+    'peekViewEditor.background': '#FFFFFF',
+    'peekViewResult.background': '#EAEAEB',
+    'peekViewResult.selectionBackground': '#DBDBDC',
+    'peekViewTitle.background': '#FFFFFF',
+    'pickerGroup.border': '#526FFF',
+    'scrollbarSlider.activeBackground': '#747D9180',
+    'scrollbarSlider.background': '#4E566680',
+    'scrollbarSlider.hoverBackground': '#5A637580',
+    'sideBar.background': '#EAEAEB',
+    'sideBarSectionHeader.background': '#FAFAFA',
+    'statusBar.background': '#EAEAEB',
+    'statusBar.debuggingForeground': '#FFFFFF',
+    'statusBar.foreground': '#424243',
+    'statusBar.noFolderBackground': '#EAEAEB',
+    'statusBarItem.hoverBackground': '#DBDBDC',
+    'tab.activeBackground': '#FAFAFA',
+    'tab.activeForeground': '#121417',
+    'tab.border': '#DBDBDC',
+    'tab.inactiveBackground': '#EAEAEB',
+    'titleBar.activeBackground': '#EAEAEB',
+    'titleBar.activeForeground': '#424243',
+    'titleBar.inactiveBackground': '#EAEAEB',
+    'titleBar.inactiveForeground': '#424243',
+  },
+  displayName: 'One Light',
+  name: 'one-light',
+  tokenColors: [
+    {
+      scope: ['comment'],
+      settings: { fontStyle: 'italic', foreground: '#A0A1A7' },
+    },
+    {
+      scope: ['comment markup.link'],
+      settings: { foreground: '#A0A1A7' },
+    },
+    { scope: ['entity.name.type'], settings: { foreground: '#C18401' } },
+    {
+      scope: ['entity.other.inherited-class'],
+      settings: { foreground: '#C18401' },
+    },
+    { scope: ['keyword'], settings: { foreground: '#A626A4' } },
+    { scope: ['keyword.control'], settings: { foreground: '#A626A4' } },
+    { scope: ['keyword.operator'], settings: { foreground: '#383A42' } },
+    {
+      scope: ['keyword.other.special-method'],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['keyword.other.unit'],
+      settings: { foreground: '#986801' },
+    },
+    { scope: ['storage'], settings: { foreground: '#A626A4' } },
+    {
+      scope: ['storage.type.annotation', 'storage.type.primitive'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['storage.modifier.package', 'storage.modifier.import'],
+      settings: { foreground: '#383A42' },
+    },
+    { scope: ['constant'], settings: { foreground: '#986801' } },
+    { scope: ['constant.variable'], settings: { foreground: '#986801' } },
+    {
+      scope: ['constant.character.escape'],
+      settings: { foreground: '#0184BC' },
+    },
+    { scope: ['constant.numeric'], settings: { foreground: '#986801' } },
+    {
+      scope: ['constant.other.color'],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: ['constant.other.symbol'],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: ['variable'],
+      settings: { foreground: 'var(--Green-COZColorGreen7, #00A136)' },
+    },
+    {
+      scope: ['variable.interpolation'],
+      settings: { foreground: '#CA1243' },
+    },
+    {
+      scope: ['variable.parameter'],
+      settings: { foreground: '#383A42' },
+    },
+    { scope: ['string'], settings: { foreground: '#50A14F' } },
+    {
+      scope: ['string > source', 'string embedded'],
+      settings: { foreground: '#383A42' },
+    },
+    { scope: ['string.regexp'], settings: { foreground: '#0184BC' } },
+    {
+      scope: ['string.regexp source.ruby.embedded'],
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: ['string.other.link'],
+      settings: { foreground: 'var(--Green-COZColorGreen7, #00A136)' },
+    },
+    {
+      scope: ['punctuation.definition.comment'],
+      settings: { foreground: '#A0A1A7' },
+    },
+    {
+      scope: [
+        'punctuation.definition.method-parameters',
+        'punctuation.definition.function-parameters',
+        'punctuation.definition.parameters',
+        'punctuation.definition.separator',
+        'punctuation.definition.seperator',
+        'punctuation.definition.array',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'punctuation.definition.heading',
+        'punctuation.definition.identity',
+      ],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['punctuation.definition.bold'],
+      settings: { fontStyle: 'bold', foreground: '#C18401' },
+    },
+    {
+      scope: ['punctuation.definition.italic'],
+      settings: { fontStyle: 'italic', foreground: '#A626A4' },
+    },
+    {
+      scope: ['punctuation.section.embedded'],
+      settings: { foreground: 'var(--Green-COZColorGreen7, #00A136)' },
+    },
+    {
+      scope: [
+        'punctuation.section.method',
+        'punctuation.section.class',
+        'punctuation.section.inner-class',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    { scope: ['support.class'], settings: { foreground: '#C18401' } },
+    { scope: ['support.type'], settings: { foreground: '#0184BC' } },
+    { scope: ['support.function'], settings: { foreground: '#0184BC' } },
+    {
+      scope: ['support.function.any-method'],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['entity.name.function'],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['entity.name.class', 'entity.name.type.class'],
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: ['entity.name.section'],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['entity.name.tag'],
+      settings: { foreground: 'var(--Green-COZColorGreen7, #00A136)' },
+    },
+    {
+      scope: ['entity.other.attribute-name'],
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: ['entity.other.attribute-name.id'],
+      settings: { foreground: '#4078F2' },
+    },
+    { scope: ['meta.class'], settings: { foreground: '#C18401' } },
+    { scope: ['meta.class.body'], settings: { foreground: '#383A42' } },
+    {
+      scope: ['meta.method-call', 'meta.method'],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['meta.definition.variable'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    { scope: ['meta.link'], settings: { foreground: '#986801' } },
+    { scope: ['meta.require'], settings: { foreground: '#4078F2' } },
+    { scope: ['meta.selector'], settings: { foreground: '#A626A4' } },
+    { scope: ['meta.separator'], settings: { foreground: '#383A42' } },
+    { scope: ['meta.tag'], settings: { foreground: '#383A42' } },
+    { scope: ['underline'], settings: { 'text-decoration': 'underline' } },
+    { scope: ['none'], settings: { foreground: '#383A42' } },
+    {
+      scope: ['invalid.deprecated'],
+      settings: { background: '#F2A60D', foreground: '#000000' },
+    },
+    {
+      scope: ['invalid.illegal'],
+      settings: { background: '#FF1414', foreground: 'white' },
+    },
+    {
+      scope: ['markup.bold'],
+      settings: { fontStyle: 'bold', foreground: '#986801' },
+    },
+    { scope: ['markup.changed'], settings: { foreground: '#A626A4' } },
+    {
+      scope: ['markup.deleted'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: ['markup.italic'],
+      settings: { fontStyle: 'italic', foreground: '#A626A4' },
+    },
+    {
+      scope: ['markup.heading'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: ['markup.heading punctuation.definition.heading'],
+      settings: { foreground: '#4078F2' },
+    },
+    { scope: ['markup.link'], settings: { foreground: '#0184BC' } },
+    { scope: ['markup.inserted'], settings: { foreground: '#50A14F' } },
+    { scope: ['markup.quote'], settings: { foreground: '#986801' } },
+    { scope: ['markup.raw'], settings: { foreground: '#50A14F' } },
+    {
+      scope: ['source.c keyword.operator'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.cpp keyword.operator'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.cs keyword.operator'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.css property-name', 'source.css property-value'],
+      settings: { foreground: '#696C77' },
+    },
+    {
+      scope: [
+        'source.css property-name.support',
+        'source.css property-value.support',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['source.elixir source.embedded.source'],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'source.elixir constant.language',
+        'source.elixir constant.numeric',
+        'source.elixir constant.definition',
+      ],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: [
+        'source.elixir variable.definition',
+        'source.elixir variable.anonymous',
+      ],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.elixir parameter.variable.function'],
+      settings: { fontStyle: 'italic', foreground: '#986801' },
+    },
+    {
+      scope: ['source.elixir quoted'],
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: [
+        'source.elixir keyword.special-method',
+        'source.elixir embedded.section',
+        'source.elixir embedded.source.empty',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: ['source.elixir readwrite.module punctuation'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: ['source.elixir regexp.section', 'source.elixir regexp.string'],
+      settings: { foreground: '#CA1243' },
+    },
+    {
+      scope: ['source.elixir separator', 'source.elixir keyword.operator'],
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: ['source.elixir variable.constant'],
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: [
+        'source.elixir array',
+        'source.elixir scope',
+        'source.elixir section',
+      ],
+      settings: { foreground: '#696C77' },
+    },
+    {
+      scope: ['source.gfm markup'],
+      settings: { '-webkit-font-smoothing': 'auto' },
+    },
+    {
+      scope: ['source.gfm link entity'],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['source.go storage.type.string'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.ini keyword.other.definition.ini'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: ['source.java storage.modifier.import'],
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: ['source.java storage.type'],
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: ['source.java keyword.operator.instanceof'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.java-properties meta.key-pair'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: ['source.java-properties meta.key-pair > punctuation'],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['source.js keyword.operator'],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'source.js keyword.operator.delete',
+        'source.js keyword.operator.in',
+        'source.js keyword.operator.of',
+        'source.js keyword.operator.instanceof',
+        'source.js keyword.operator.new',
+        'source.js keyword.operator.typeof',
+        'source.js keyword.operator.void',
+      ],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.ts keyword.operator'],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: ['source.flow keyword.operator'],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'source.json meta.structure.dictionary.json > string.quoted.json',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'source.json meta.structure.dictionary.json > value.json > string.quoted.json',
+        'source.json meta.structure.array.json > value.json > string.quoted.json',
+        'source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation',
+        'source.json meta.structure.array.json > value.json > string.quoted.json > punctuation',
+      ],
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: [
+        'source.json meta.structure.dictionary.json > constant.language.json',
+        'source.json meta.structure.array.json > constant.language.json',
+      ],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: ['ng.interpolation'],
+      settings: { foreground: 'var(--Green-COZColorGreen7, #00A136)' },
+    },
+    {
+      scope: ['ng.interpolation.begin', 'ng.interpolation.end'],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['ng.interpolation function'],
+      settings: { foreground: 'var(--Green-COZColorGreen7, #00A136)' },
+    },
+    {
+      scope: [
+        'ng.interpolation function.begin',
+        'ng.interpolation function.end',
+      ],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: ['ng.interpolation bool'],
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: ['ng.interpolation bracket'],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['ng.pipe', 'ng.operator'],
+      settings: { foreground: '#383A42' },
+    },
+    { scope: ['ng.tag'], settings: { foreground: '#0184BC' } },
+    {
+      scope: ['ng.attribute-with-value attribute-name'],
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: ['ng.attribute-with-value string'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: [
+        'ng.attribute-with-value string.begin',
+        'ng.attribute-with-value string.end',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['source.ruby constant.other.symbol > punctuation'],
+      settings: { foreground: 'inherit' },
+    },
+    {
+      scope: ['source.php class.bracket'],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['source.python keyword.operator.logical.python'],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.python variable.parameter'],
+      settings: { foreground: '#986801' },
+    },
+    { scope: 'customrule', settings: { foreground: '#383A42' } },
+    {
+      scope: 'support.type.property-name',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'string.quoted.double punctuation',
+      settings: { foreground: '#50A14F' },
+    },
+    { scope: 'support.constant', settings: { foreground: '#986801' } },
+    {
+      scope: 'support.type.property-name.json',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'support.type.property-name.json punctuation',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'punctuation.separator.key-value.ts',
+        'punctuation.separator.key-value.js',
+        'punctuation.separator.key-value.tsx',
+      ],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'source.js.embedded.html keyword.operator',
+        'source.ts.embedded.html keyword.operator',
+      ],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'variable.other.readwrite.js',
+        'variable.other.readwrite.ts',
+        'variable.other.readwrite.tsx',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['support.variable.dom.js', 'support.variable.dom.ts'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'support.variable.property.dom.js',
+        'support.variable.property.dom.ts',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'meta.template.expression.js punctuation.definition',
+        'meta.template.expression.ts punctuation.definition',
+      ],
+      settings: { foreground: '#CA1243' },
+    },
+    {
+      scope: [
+        'source.ts punctuation.definition.typeparameters',
+        'source.js punctuation.definition.typeparameters',
+        'source.tsx punctuation.definition.typeparameters',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'source.ts punctuation.definition.block',
+        'source.js punctuation.definition.block',
+        'source.tsx punctuation.definition.block',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'source.ts punctuation.separator.comma',
+        'source.js punctuation.separator.comma',
+        'source.tsx punctuation.separator.comma',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'support.variable.property.js',
+        'support.variable.property.ts',
+        'support.variable.property.tsx',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'keyword.control.default.js',
+        'keyword.control.default.ts',
+        'keyword.control.default.tsx',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'keyword.operator.expression.instanceof.js',
+        'keyword.operator.expression.instanceof.ts',
+        'keyword.operator.expression.instanceof.tsx',
+      ],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: [
+        'keyword.operator.expression.of.js',
+        'keyword.operator.expression.of.ts',
+        'keyword.operator.expression.of.tsx',
+      ],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: [
+        'meta.brace.round.js',
+        'meta.array-binding-pattern-variable.js',
+        'meta.brace.square.js',
+        'meta.brace.round.ts',
+        'meta.array-binding-pattern-variable.ts',
+        'meta.brace.square.ts',
+        'meta.brace.round.tsx',
+        'meta.array-binding-pattern-variable.tsx',
+        'meta.brace.square.tsx',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'source.js punctuation.accessor',
+        'source.ts punctuation.accessor',
+        'source.tsx punctuation.accessor',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'punctuation.terminator.statement.js',
+        'punctuation.terminator.statement.ts',
+        'punctuation.terminator.statement.tsx',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'meta.array-binding-pattern-variable.js variable.other.readwrite.js',
+        'meta.array-binding-pattern-variable.ts variable.other.readwrite.ts',
+        'meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx',
+      ],
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: [
+        'source.js support.variable',
+        'source.ts support.variable',
+        'source.tsx support.variable',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'variable.other.constant.property.js',
+        'variable.other.constant.property.ts',
+        'variable.other.constant.property.tsx',
+      ],
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: [
+        'keyword.operator.new.ts',
+        'keyword.operator.new.j',
+        'keyword.operator.new.tsx',
+      ],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['source.ts keyword.operator', 'source.tsx keyword.operator'],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'punctuation.separator.parameter.js',
+        'punctuation.separator.parameter.ts',
+        'punctuation.separator.parameter.tsx ',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'constant.language.import-export-all.js',
+        'constant.language.import-export-all.ts',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'constant.language.import-export-all.jsx',
+        'constant.language.import-export-all.tsx',
+      ],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'keyword.control.as.js',
+        'keyword.control.as.ts',
+        'keyword.control.as.jsx',
+        'keyword.control.as.tsx',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'variable.other.readwrite.alias.js',
+        'variable.other.readwrite.alias.ts',
+        'variable.other.readwrite.alias.jsx',
+        'variable.other.readwrite.alias.tsx',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'variable.other.constant.js',
+        'variable.other.constant.ts',
+        'variable.other.constant.jsx',
+        'variable.other.constant.tsx',
+      ],
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: [
+        'meta.export.default.js variable.other.readwrite.js',
+        'meta.export.default.ts variable.other.readwrite.ts',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: [
+        'source.js meta.template.expression.js punctuation.accessor',
+        'source.ts meta.template.expression.ts punctuation.accessor',
+        'source.tsx meta.template.expression.tsx punctuation.accessor',
+      ],
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: [
+        'source.js meta.import-equals.external.js keyword.operator',
+        'source.jsx meta.import-equals.external.jsx keyword.operator',
+        'source.ts meta.import-equals.external.ts keyword.operator',
+        'source.tsx meta.import-equals.external.tsx keyword.operator',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope:
+        'entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx',
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: 'meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'meta.definition.property.js variable',
+        'meta.definition.property.ts variable',
+        'meta.definition.property.jsx variable',
+        'meta.definition.property.tsx variable',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'meta.type.parameters.js support.type',
+        'meta.type.parameters.jsx support.type',
+        'meta.type.parameters.ts support.type',
+        'meta.type.parameters.tsx support.type',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'source.js meta.tag.js keyword.operator',
+        'source.jsx meta.tag.jsx keyword.operator',
+        'source.ts meta.tag.ts keyword.operator',
+        'source.tsx meta.tag.tsx keyword.operator',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'meta.tag.js punctuation.section.embedded',
+        'meta.tag.jsx punctuation.section.embedded',
+        'meta.tag.ts punctuation.section.embedded',
+        'meta.tag.tsx punctuation.section.embedded',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: [
+        'meta.array.literal.js variable',
+        'meta.array.literal.jsx variable',
+        'meta.array.literal.ts variable',
+        'meta.array.literal.tsx variable',
+      ],
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: [
+        'support.type.object.module.js',
+        'support.type.object.module.jsx',
+        'support.type.object.module.ts',
+        'support.type.object.module.tsx',
+      ],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: ['constant.language.json'],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'variable.other.constant.object.js',
+        'variable.other.constant.object.jsx',
+        'variable.other.constant.object.ts',
+        'variable.other.constant.object.tsx',
+      ],
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: [
+        'storage.type.property.js',
+        'storage.type.property.jsx',
+        'storage.type.property.ts',
+        'storage.type.property.tsx',
+      ],
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: [
+        'meta.template.expression.js string.quoted punctuation.definition',
+        'meta.template.expression.jsx string.quoted punctuation.definition',
+        'meta.template.expression.ts string.quoted punctuation.definition',
+        'meta.template.expression.tsx string.quoted punctuation.definition',
+      ],
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: [
+        'meta.template.expression.js string.template punctuation.definition.string.template',
+        'meta.template.expression.jsx string.template punctuation.definition.string.template',
+        'meta.template.expression.ts string.template punctuation.definition.string.template',
+        'meta.template.expression.tsx string.template punctuation.definition.string.template',
+      ],
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: [
+        'keyword.operator.expression.in.js',
+        'keyword.operator.expression.in.jsx',
+        'keyword.operator.expression.in.ts',
+        'keyword.operator.expression.in.tsx',
+      ],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: ['variable.other.object.js', 'variable.other.object.ts'],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: ['meta.object-literal.key.js', 'meta.object-literal.key.ts'],
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'source.python constant.other',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'source.python constant',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'constant.character.format.placeholder.other.python storage',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'support.variable.magic.python',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'meta.function.parameters.python',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'punctuation.separator.annotation.python',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'punctuation.separator.parameters.python',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'entity.name.variable.field.cs',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'source.cs keyword.operator',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'variable.other.readwrite.cs',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'variable.other.object.cs',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'variable.other.object.property.cs',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'entity.name.variable.property.cs',
+      settings: { foreground: '#4078F2' },
+    },
+    { scope: 'storage.type.cs', settings: { foreground: '#C18401' } },
+    {
+      scope: 'keyword.other.unsafe.rust',
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: 'entity.name.type.rust',
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: 'storage.modifier.lifetime.rust',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'entity.name.lifetime.rust',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'storage.type.core.rust',
+      settings: { foreground: '#0184BC' },
+    },
+    { scope: 'meta.attribute.rust', settings: { foreground: '#986801' } },
+    {
+      scope: 'storage.class.std.rust',
+      settings: { foreground: '#0184BC' },
+    },
+    {
+      scope: 'markup.raw.block.markdown',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'punctuation.definition.variable.shell',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'support.constant.property-value.css',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'punctuation.definition.constant.css',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'punctuation.separator.key-value.scss',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'punctuation.definition.constant.scss',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'meta.property-list.scss punctuation.separator.key-value.scss',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'storage.type.primitive.array.java',
+      settings: { foreground: '#C18401' },
+    },
+    {
+      scope: 'entity.name.section.markdown',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'punctuation.definition.heading.markdown',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'markup.heading.setext',
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'punctuation.definition.bold.markdown',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'markup.inline.raw.markdown',
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: 'beginning.punctuation.definition.list.markdown',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'markup.quote.markdown',
+      settings: { fontStyle: 'italic', foreground: '#A0A1A7' },
+    },
+    {
+      scope: [
+        'punctuation.definition.string.begin.markdown',
+        'punctuation.definition.string.end.markdown',
+        'punctuation.definition.metadata.markdown',
+      ],
+      settings: { foreground: '#383A42' },
+    },
+    {
+      scope: 'punctuation.definition.metadata.markdown',
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: [
+        'markup.underline.link.markdown',
+        'markup.underline.link.image.markdown',
+      ],
+      settings: { foreground: '#A626A4' },
+    },
+    {
+      scope: [
+        'string.other.link.title.markdown',
+        'string.other.link.description.markdown',
+      ],
+      settings: { foreground: '#4078F2' },
+    },
+    {
+      scope: 'punctuation.separator.variable.ruby',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    {
+      scope: 'variable.other.constant.ruby',
+      settings: { foreground: '#986801' },
+    },
+    {
+      scope: 'keyword.operator.other.ruby',
+      settings: { foreground: '#50A14F' },
+    },
+    {
+      scope: 'punctuation.definition.variable.php',
+      settings: {
+        foreground: 'var(--Green-COZColorGreen7, #00A136)',
+        'font-family': 'JetBrainsMonoRegular !important',
+      },
+    },
+    { scope: 'meta.class.php', settings: { foreground: '#383A42' } },
+  ],
+  type: 'light',
+};
+
+export default Object.freeze(json) as any;
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/jinja.tsx b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/jinja.tsx
index aad6d1095..f29e9a148 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/jinja.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/jinja.tsx
@@ -1,12 +1,17 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable complexity */
 import { useLayoutEffect } from 'react';
 
 import { useInjector } from '@coze-editor/editor/react';
 import { astDecorator } from '@coze-editor/editor';
 import { EditorView } from '@codemirror/view';
 
-function JinjaHighlight() {
+const prec = 'lowest';
+
+function NormalJinjaHighlight({
+  isJinja2Template,
+}: {
+  isJinja2Template?: boolean;
+}) {
   const injector = useInjector();
 
   useLayoutEffect(
@@ -14,39 +19,85 @@ function JinjaHighlight() {
       injector.inject([
         astDecorator.whole.of(cursor => {
           if (
-            cursor.name === 'JinjaStatementStart' ||
-            cursor.name === 'JinjaStatementEnd'
+            cursor.name === 'JinjaStatement' ||
+            cursor.name === 'JinjaRawOpenStatement' ||
+            cursor.name === 'JinjaRawCloseStatement'
           ) {
-            return {
-              type: 'className',
-              className: 'jinja-statement-bracket',
-            };
+            if (isJinja2Template) {
+              return {
+                type: 'className',
+                className: 'jinja-statement',
+                prec,
+              };
+            }
+          }
+
+          if (cursor.name === 'JinjaStringLiteral') {
+            if (isJinja2Template) {
+              return {
+                type: 'className',
+                className: 'jinja-string',
+                prec,
+              };
+            }
           }
 
           if (cursor.name === 'JinjaComment') {
-            return {
-              type: 'className',
-              className: 'jinja-comment',
-            };
+            if (isJinja2Template) {
+              return {
+                type: 'className',
+                className: 'jinja-comment',
+                prec,
+              };
+            }
           }
 
           if (cursor.name === 'JinjaExpression') {
             return {
               type: 'className',
               className: 'jinja-expression',
+              prec,
             };
           }
+
+          if (
+            cursor.name === 'JinjaFilterName' ||
+            cursor.name === 'JinjaStatementStart' ||
+            cursor.name === 'JinjaStatementEnd' ||
+            cursor.name === 'JinjaKeyword' ||
+            cursor.name === 'JinjaFilterName'
+          ) {
+            if (isJinja2Template) {
+              return {
+                type: 'className',
+                className: 'jinja-statement-keyword',
+                prec,
+              };
+            }
+          }
         }),
         EditorView.theme({
+          '.jinja-statement': {
+            color: '#060709CC',
+          },
+          '.jinja-statement-keyword': {
+            color: '#D1009D',
+          },
+          '.jinja-string': {
+            color: '#060709CC',
+          },
+          '.jinja-comment': {
+            color: '#0607094D',
+          },
           '.jinja-expression': {
             color: 'var(--Green-COZColorGreen7, #00A136)',
           },
         }),
       ]),
-    [injector],
+    [injector, isJinja2Template],
   );
 
   return null;
 }
 
-export default JinjaHighlight;
+export default NormalJinjaHighlight;
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/keymap.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/keymap.ts
new file mode 100644
index 000000000..21ce58f90
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/keymap.ts
@@ -0,0 +1,606 @@
+/* eslint-disable max-lines */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable max-params */
+/* eslint-disable complexity */
+import { type SyntaxNode, type Tree } from '@lezer/common';
+import { markdownLanguage } from '@coze-editor/editor/preset-prompt';
+import {
+  type StateCommand,
+  type Text,
+  type EditorState,
+  EditorSelection,
+  type ChangeSpec,
+  countColumn,
+  type Line,
+  type TransactionSpec,
+  type SelectionRange,
+} from '@codemirror/state';
+import { syntaxTree, indentUnit } from '@codemirror/language';
+
+// --- 重构: 使用一个 props 对象来代替多个构造函数参数，以解决 `max-params` 问题 ---
+interface ContextProps {
+  node: SyntaxNode;
+  from: number;
+  to: number;
+  spaceBefore: string;
+  spaceAfter: string;
+  type: string;
+  item: SyntaxNode | null;
+}
+
+class Context {
+  readonly node: SyntaxNode;
+  readonly from: number;
+  readonly to: number;
+  readonly spaceBefore: string;
+  readonly spaceAfter: string;
+  readonly type: string;
+  readonly item: SyntaxNode | null;
+
+  constructor(props: ContextProps) {
+    this.node = props.node;
+    this.from = props.from;
+    this.to = props.to;
+    this.spaceBefore = props.spaceBefore;
+    this.spaceAfter = props.spaceAfter;
+    this.type = props.type;
+    this.item = props.item;
+  }
+
+  blank(maxWidth: number | null, trailing = true): string {
+    let result =
+      this.spaceBefore + (this.node.name === 'Blockquote' ? '>' : '');
+    if (maxWidth !== null) {
+      while (result.length < maxWidth) {
+        result += ' ';
+      }
+      return result;
+    }
+
+    for (
+      let i = this.to - this.from - result.length - this.spaceAfter.length;
+      i > 0;
+      i--
+    ) {
+      result += ' ';
+    }
+    return result + (trailing ? this.spaceAfter : '');
+  }
+
+  marker(doc: Text, add: number): string {
+    if (this.node.name === 'OrderedList' && this.item) {
+      const numberMatch = itemNumber(this.item, doc);
+      if (numberMatch) {
+        const number = Number(numberMatch[2]) + add;
+        return `${this.spaceBefore}${number}.${this.spaceAfter}`;
+      }
+    }
+    return `${this.spaceBefore}${this.type}${this.spaceAfter}`;
+  }
+}
+
+function getContext(node: SyntaxNode, doc: Text): Context[] {
+  const context: Context[] = [];
+  let current: SyntaxNode | null = node;
+
+  while (current) {
+    if (current.name === 'FencedCode') {
+      break;
+    }
+
+    if (current.name === 'ListItem' || current.name === 'Blockquote') {
+      const line = doc.lineAt(current.from);
+      const startPos = current.from - line.from;
+      const lineText = line.text.slice(startPos);
+      let contextPart: Context | null = null;
+
+      if (current.name === 'Blockquote') {
+        const match = /^ *>( ?)/.exec(lineText);
+        if (match) {
+          contextPart = new Context({
+            node: current,
+            from: startPos,
+            to: startPos + match[0].length,
+            spaceBefore: '',
+            spaceAfter: match[1],
+            type: '>',
+            item: null,
+          });
+        }
+      } else if (current.name === 'ListItem' && current.parent) {
+        if (current.parent.name === 'OrderedList') {
+          const match = /^( *)(\d+)([.)])( *)/.exec(lineText);
+          if (match) {
+            let after = match[4];
+            let len = match[0].length;
+            if (after.length >= 4) {
+              after = after.slice(0, after.length - 4);
+              len -= 4;
+            }
+            contextPart = new Context({
+              node: current.parent,
+              from: startPos,
+              to: startPos + len,
+              spaceBefore: match[1],
+              spaceAfter: after,
+              type: match[2],
+              item: current,
+            });
+          }
+        } else if (current.parent.name === 'BulletList') {
+          const match = /^( *)([-+*])( {1,4}\[[ xX]\])?( +)/.exec(lineText);
+          if (match) {
+            let after = match[4];
+            let len = match[0].length;
+            if (after.length > 4) {
+              after = after.slice(0, after.length - 4);
+              len -= 4;
+            }
+            let type = match[2];
+            if (match[3]) {
+              type += match[3].replace(/[xX]/, ' ');
+            }
+            contextPart = new Context({
+              node: current.parent,
+              from: startPos,
+              to: startPos + len,
+              spaceBefore: match[1],
+              spaceAfter: after,
+              type,
+              item: current,
+            });
+          }
+        }
+      }
+
+      if (contextPart) {
+        context.unshift(contextPart); // Add to the beginning to maintain order
+      }
+    }
+    current = current.parent;
+  }
+  return context;
+}
+
+// --- 修复: 移除 `!` 断言，使其返回可空类型 ---
+function itemNumber(item: SyntaxNode, doc: Text): RegExpExecArray | null {
+  return /^(\s*)(\d+)(?=[.)])/.exec(doc.sliceString(item.from, item.from + 10));
+}
+
+function renumberList(
+  after: SyntaxNode,
+  doc: Text,
+  changes: ChangeSpec[],
+  offset = 0,
+) {
+  let prev = -1;
+  let node: SyntaxNode | null = after;
+  while (node) {
+    if (node.name === 'ListItem') {
+      const m = itemNumber(node, doc);
+      // --- 修复: 安全地处理 itemNumber 的可能 null 返回值 ---
+      if (!m) {
+        break;
+      }
+
+      const number = Number(m[2]);
+      if (prev >= 0) {
+        if (number !== prev + 1) {
+          break;
+        } // Not a continuous list
+        changes.push({
+          from: node.from + m[1].length,
+          to: node.from + m[0].length,
+          insert: String(prev + 2 + offset),
+        });
+      }
+      prev = number;
+    }
+    node = node.nextSibling;
+  }
+}
+
+function normalizeIndent(content: string, state: EditorState): string {
+  // --- 修复: 安全地处理 `exec` 可能的 null 返回值 ---
+  const match = /^[ \t]*/.exec(content);
+  const blank = match ? match[0].length : 0;
+
+  if (!blank || state.facet(indentUnit) !== '\t') {
+    return content;
+  }
+  const col = countColumn(content, 4, blank);
+  let space = '';
+  for (let i = col; i > 0; ) {
+    if (i >= 4) {
+      space += '\t';
+      i -= 4;
+    } else {
+      space += ' ';
+      i--;
+    }
+  }
+  return space + content.slice(blank);
+}
+
+// --- 辅助函数：处理列表中的空行 ---
+function handleEmptyLineInList(
+  state: EditorState,
+  context: Context[],
+  inner: Context,
+  pos: number,
+  line: Line,
+): TransactionSpec | { range: SelectionRange } | null {
+  if (!inner.item) {
+    return null;
+  }
+
+  const { doc } = state;
+  const firstItem = inner.node.firstChild;
+  const secondItem = inner.node.getChild('ListItem', 'ListItem');
+
+  if (!firstItem) {
+    return null;
+  }
+
+  // 条件：不是列表的第二项，或者前面是空行 -> 删除一层标记
+  if (
+    firstItem.to >= pos ||
+    (secondItem && secondItem.to < pos) ||
+    (line.from > 0 && !/[^\s>]/.test(doc.lineAt(line.from - 1).text))
+  ) {
+    const changes: ChangeSpec[] = [];
+    const nextContext = context.length > 1 ? context[context.length - 2] : null;
+    let delTo: number;
+    let insert = '';
+
+    if (nextContext) {
+      delTo =
+        line.from + (nextContext.item ? nextContext.from : nextContext.to);
+      if (nextContext.item) {
+        insert = nextContext.marker(doc, 1);
+      }
+    } else {
+      delTo = line.from;
+    }
+
+    changes.push({ from: delTo, to: pos, insert });
+
+    if (inner.node.name === 'OrderedList' && inner.item) {
+      renumberList(inner.item, doc, changes, -2);
+    }
+    if (nextContext?.node.name === 'OrderedList' && nextContext.item) {
+      renumberList(nextContext.item, doc, changes);
+    }
+
+    return {
+      range: EditorSelection.cursor(delTo + insert.length),
+      changes,
+    };
+  }
+  // 否则，在紧凑列表的两个项之间插入一个空行
+  else {
+    const insert = blankLine(context, state, line);
+    return {
+      range: EditorSelection.cursor(pos + insert.length + 1),
+      changes: { from: line.from, insert: insert + state.lineBreak },
+    };
+  }
+}
+
+// --- 辅助函数：处理连续的空引用块 ---
+function handleEmptyBlockquote(
+  state: EditorState,
+  inner: Context,
+  line: Line,
+): TransactionSpec | { range: SelectionRange } | null {
+  if (inner.node.name !== 'Blockquote' || !line.from) {
+    return null;
+  }
+
+  const prevLine = state.doc.lineAt(line.from - 1);
+  const quoted = />\s*$/.exec(prevLine.text);
+
+  if (quoted && quoted.index === inner.from) {
+    const changes = state.changes([
+      { from: prevLine.from + quoted.index, to: prevLine.to },
+      { from: line.from + inner.from, to: line.to },
+    ]);
+    return {
+      range: EditorSelection.cursor(changes.mapPos(line.from)),
+      changes,
+    };
+  }
+  return null;
+}
+
+// --- 辅助函数：创建新行并延续标记 ---
+function continueMarkup(
+  state: EditorState,
+  context: Context[],
+  inner: Context,
+  pos: number,
+  line: Line,
+) {
+  const { doc } = state;
+  const changes: ChangeSpec[] = [];
+  if (inner.node.name === 'OrderedList' && inner.item) {
+    renumberList(inner.item, doc, changes);
+  }
+
+  const continued = !!inner.item && inner.item.from < line.from;
+  let insert = '';
+  const lineIndentMatch = /^[\s\d.)\-+*>]*/.exec(line.text);
+  const lineIndentLen = lineIndentMatch ? lineIndentMatch[0].length : 0;
+
+  if (!continued || lineIndentLen >= inner.to) {
+    for (let i = 0; i < context.length; i++) {
+      const c = context[i];
+      if (i === context.length - 1 && !continued) {
+        console.log('m', doc);
+        insert += c.marker(doc, 1);
+      } else {
+        const maxWidth =
+          i < context.length - 1
+            ? countColumn(line.text, 4, context[i + 1].from) - insert.length
+            : null;
+        insert += c.blank(maxWidth);
+      }
+    }
+  }
+
+  let from = pos;
+  while (
+    from > line.from &&
+    /\s/.test(line.text.charAt(from - line.from - 1))
+  ) {
+    from--;
+  }
+
+  insert = normalizeIndent(insert, state);
+  if (nonTightList(inner.node, state.doc)) {
+    insert = blankLine(context, state, line) + state.lineBreak + insert;
+  }
+
+  changes.push({ from, to: pos, insert: state.lineBreak + insert });
+
+  return {
+    range: EditorSelection.cursor(from + insert.length + 1),
+    changes,
+  };
+}
+
+export const insertNewlineContinueMarkup: StateCommand = ({
+  state,
+  dispatch,
+}) => {
+  const tree = syntaxTree(state);
+  const { doc } = state;
+  let fallthrough = false;
+
+  const changes = state.changeByRange(range => {
+    if (!range.empty || !markdownLanguage.isActiveAt(state, range.from)) {
+      fallthrough = true;
+      return { range };
+    }
+
+    const pos = range.from;
+    const line = doc.lineAt(pos);
+    const context = getContext(tree.resolveInner(pos, -1), doc);
+
+    while (
+      context.length &&
+      context[context.length - 1].from > pos - line.from
+    ) {
+      context.pop();
+    }
+
+    if (!context.length) {
+      fallthrough = true;
+      return { range };
+    }
+
+    const inner = context[context.length - 1];
+
+    if (inner.to - inner.spaceAfter.length > pos - line.from) {
+      fallthrough = true;
+      return { range };
+    }
+
+    const isAtEndOfMarkup = pos >= inner.to - inner.spaceAfter.length;
+    const isLineEmptyAfterMarkup = !/\S/.test(
+      line.text.slice(inner.to - (line.from + inner.from)),
+    );
+
+    if (isAtEndOfMarkup && isLineEmptyAfterMarkup) {
+      const emptyLineInListResult = handleEmptyLineInList(
+        state,
+        context,
+        inner,
+        pos,
+        line,
+      );
+      if (emptyLineInListResult) {
+        return emptyLineInListResult;
+      }
+
+      const emptyBlockquoteResult = handleEmptyBlockquote(state, inner, line);
+      if (emptyBlockquoteResult) {
+        return emptyBlockquoteResult;
+      }
+    }
+
+    return continueMarkup(state, context, inner, pos, line) as any;
+  });
+
+  if (fallthrough || changes.changes.empty) {
+    return false;
+  }
+
+  dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));
+  return true;
+};
+
+// ... (其他辅助函数保持不变，但为了完整性包含在此)
+
+function nonTightList(node: SyntaxNode, doc: Text): boolean {
+  if (node.name !== 'OrderedList' && node.name !== 'BulletList') {
+    return false;
+  }
+
+  const first = node.firstChild;
+  const second = node.getChild('ListItem', 'ListItem');
+  if (!first || !second) {
+    return false;
+  }
+
+  const line1 = doc.lineAt(first.to);
+  const line2 = doc.lineAt(second.from);
+  const empty = /^[\s>]*$/.test(line1.text);
+  return line1.number + (empty ? 0 : 1) < line2.number;
+}
+
+function blankLine(context: Context[], state: EditorState, line: Line): string {
+  let insert = '';
+  for (let i = 0; i < context.length - 1; i++) {
+    const c = context[i];
+    const next = context[i + 1];
+    const maxWidth = countColumn(line.text, 4, next.from) - insert.length;
+    insert += c.blank(maxWidth, true);
+  }
+  return normalizeIndent(insert, state);
+}
+
+function contextNodeForDelete(tree: Tree, pos: number): SyntaxNode {
+  let node = tree.resolveInner(pos, -1);
+  let scan = pos;
+
+  const isMark = (n: SyntaxNode) =>
+    n.name === 'QuoteMark' || n.name === 'ListMark';
+
+  if (isMark(node) && node.parent) {
+    scan = node.from;
+    node = node.parent;
+  }
+
+  while (true) {
+    const prev = node.childBefore(scan);
+    if (!prev) {
+      break;
+    }
+
+    if (isMark(prev)) {
+      scan = prev.from;
+    } else if (
+      (prev.name === 'OrderedList' || prev.name === 'BulletList') &&
+      prev.lastChild
+    ) {
+      node = prev.lastChild;
+      scan = node.to;
+    } else {
+      break;
+    }
+  }
+  return node;
+}
+
+export const deleteMarkupBackward: StateCommand = ({ state, dispatch }) => {
+  const tree = syntaxTree(state);
+  let fallthrough = false;
+
+  const changes = state.changeByRange(range => {
+    const { from: pos, to } = range;
+    if (to !== pos || !markdownLanguage.isActiveAt(state, pos)) {
+      fallthrough = true;
+      return { range };
+    }
+
+    const line = state.doc.lineAt(pos);
+    const context = getContext(contextNodeForDelete(tree, pos), state.doc);
+
+    if (!context.length) {
+      fallthrough = true;
+      return { range };
+    }
+
+    const inner = context[context.length - 1];
+    const spaceEnd =
+      inner.to - inner.spaceAfter.length + (inner.spaceAfter ? 1 : 0);
+
+    // Case 1: Delete extra trailing space after markup
+    if (
+      pos - line.from > spaceEnd &&
+      !/\S/.test(line.text.slice(spaceEnd, pos - line.from))
+    ) {
+      const targetPos = line.from + spaceEnd;
+      return {
+        range: EditorSelection.cursor(targetPos),
+        changes: { from: targetPos, to: pos },
+      };
+    }
+
+    const isOnSyntaxLine =
+      !inner.item ||
+      line.from <= inner.item.from ||
+      !/\S/.test(line.text.slice(0, inner.to));
+    if (pos - line.from === spaceEnd && isOnSyntaxLine) {
+      const start = line.from + inner.from;
+      // Case 2: Replace a list item marker with blank space
+      if (
+        inner.item &&
+        inner.node.from < inner.item.from &&
+        /\S/.test(line.text.slice(inner.from, inner.to))
+      ) {
+        let insert = inner.blank(
+          countColumn(line.text, 4, inner.to) -
+            countColumn(line.text, 4, inner.from),
+        );
+        if (start === line.from) {
+          insert = normalizeIndent(insert, state);
+        }
+        return {
+          range: EditorSelection.cursor(start + insert.length),
+          changes: { from: start, to: line.from + inner.to, insert },
+        };
+      }
+      // Case 3: Delete one level of indentation/markup
+      if (start < pos) {
+        return {
+          range: EditorSelection.cursor(start),
+          changes: { from: start, to: pos },
+        };
+      }
+    }
+
+    fallthrough = true;
+    return { range };
+  });
+  if (fallthrough || changes.changes.empty) {
+    return false;
+  }
+  dispatch(
+    state.update(changes, { scrollIntoView: true, userEvent: 'delete' }),
+  );
+  return true;
+};
+
+export const insertFourSpaces: StateCommand = ({ state, dispatch }) => {
+  // 如果有选中区域，我们希望执行默认的缩进行为，而不是替换
+  // 所以返回 false，让 keymap 继续查找下一个匹配项 (即 indentWithTab)
+  if (!state.selection.main.empty) {
+    return false;
+  }
+
+  dispatch(
+    state.update(
+      {
+        changes: { from: state.selection.main.head, insert: '  ' },
+        // 插入后，将光标移动到空格后面
+        selection: EditorSelection.cursor(state.selection.main.head + 2),
+      },
+      { userEvent: 'input' },
+    ),
+  );
+
+  // 返回 true 表示我们已经处理了这次按键，无需再执行其他命令
+  return true;
+};
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/language-support.tsx b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/language-support.tsx
index eeae0033c..65ac57d75 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/language-support.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/language-support.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { useLayoutEffect } from 'react';
 
 import { useInjector } from '@coze-editor/editor/react';
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/markdown.tsx b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/markdown.tsx
index 020375f6f..d178bd889 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/markdown.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/markdown.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { useLayoutEffect } from 'react';
 
 import { useInjector } from '@coze-editor/editor/react';
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/icon.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/icon.ts
new file mode 100644
index 000000000..6342ce94b
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/icon.ts
@@ -0,0 +1,274 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable max-len */
+import createEle from 'crelt';
+
+interface IconProps extends Record<string, unknown> {
+  checked?: boolean;
+  checkable?: boolean;
+  onchange?: () => void;
+  disabled?: boolean;
+}
+
+abstract class Icon {
+  readonly dom: HTMLElement;
+  public _checked?: boolean;
+  private _disabled?: boolean;
+  private checkable?: boolean;
+
+  constructor(attr: IconProps = {}) {
+    const { onchange, checked, checkable = true, disabled, ...rest } = attr;
+
+    this.checkable = checkable;
+    this._checked = checked || false;
+    this._disabled = disabled || false;
+
+    this.dom = createEle(
+      'button',
+      {
+        class: this._checked
+          ? 'cm-custom-search-panel-icon cm-custom-search-panel-icon-active'
+          : 'cm-custom-search-panel-icon',
+        type: 'button',
+        onclick: () => {
+          this.checked = !this.checked;
+          onchange?.();
+        },
+        ...rest,
+      },
+      [this.getSVG()],
+    );
+  }
+
+  abstract getSVG(): HTMLSpanElement;
+
+  get checked() {
+    return this._checked;
+  }
+
+  set checked(checked) {
+    if (this.checkable) {
+      if (checked) {
+        if (
+          !this.dom.classList.contains('cm-custom-search-panel-icon-active')
+        ) {
+          this.dom.classList.add('cm-custom-search-panel-icon-active');
+        }
+      } else {
+        this.dom.classList.remove('cm-custom-search-panel-icon-active');
+      }
+    }
+
+    this._checked = checked;
+  }
+
+  get disabled() {
+    return this._disabled;
+  }
+
+  set disabled(disabled) {
+    if (disabled) {
+      if (
+        !this.dom.classList.contains('cm-custom-search-panel-icon-disabled')
+      ) {
+        this.dom.classList.add('cm-custom-search-panel-icon-disabled');
+      }
+    } else {
+      this.dom.classList.remove('cm-custom-search-panel-icon-disabled');
+    }
+
+    this._disabled = disabled;
+  }
+}
+
+export class IconCaseSensitive extends Icon {
+  constructor(attr: IconProps = {}) {
+    super(attr);
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML =
+      '<svg t="1749105226766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4424" width="14" height="14"><path d="M270.628571 197.485714L21.942857 811.885714h73.142857l73.142857-190.171428h277.942858l80.457142 190.171428h73.142858L343.771429 197.485714h-73.142858z m-73.142857 373.028572l102.4-263.314286c7.314286-7.314286 7.314286-21.942857 14.628572-43.885714 7.314286 21.942857 7.314286 36.571429 14.628571 43.885714l102.4 263.314286H197.485714zM980.114286 709.485714V526.628571c7.314286-117.028571-51.2-175.542857-175.542857-168.228571-109.714286-7.314286-175.542857 36.571429-204.8 131.657143l65.828571 21.942857c14.628571-73.142857 58.514286-102.4 131.657143-95.085714 80.457143-7.314286 117.028571 36.571429 109.714286 117.028571-21.942857 14.628571-73.142857 29.257143-153.6 36.571429-109.714286 7.314286-160.914286 58.514286-160.914286 146.285714 7.314286 73.142857 58.514286 109.714286 153.6 117.028571 80.457143 0 138.971429-21.942857 175.542857-73.142857 0 21.942857 7.314286 43.885714 21.942857 58.514286h65.828572c-29.257143-29.257143-36.571429-58.514286-29.257143-109.714286z m-73.142857-65.828571c-7.314286 80.457143-58.514286 124.342857-153.6 131.657143-58.514286-7.314286-95.085714-29.257143-95.085715-73.142857s36.571429-73.142857 117.028572-87.771429c80.457143-7.314286 124.342857-14.628571 131.657143-36.571429v65.828572z" fill="currentColor" p-id="4425"></path></svg>';
+
+    return span;
+  }
+}
+
+export class IconRegExp extends Icon {
+  constructor(attr: IconProps = {}) {
+    super(attr);
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML =
+      '<svg t="1749105951963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10628" width="12" height="12"><path d="M192 794.752c-18.816 0-33.92 6.272-45.184 18.816a61.632 61.632 0 0 0-18.816 45.184c0 17.6 6.272 33.92 18.816 46.4a61.44 61.44 0 0 0 45.184 17.6c17.6 0 32.64-6.272 45.184-17.6 12.544-12.544 18.816-28.8 18.816-46.4a61.632 61.632 0 0 0-18.816-45.184 61.632 61.632 0 0 0-45.184-18.816zM612.864 88.448h62.208l-5.76 235.008 214.272-79.488 19.584 58.752-218.88 69.12 146.304 178.56-48.384 38.016-138.24-185.472-138.24 185.472-47.232-38.016 145.152-178.56-218.88-69.12 19.584-58.752 214.272 79.488-5.76-235.008z" fill="currentColor" p-id="10629"></path></svg>';
+
+    return span;
+  }
+}
+
+export class IconWholeWord extends Icon {
+  constructor(attr: IconProps = {}) {
+    super(attr);
+  }
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML =
+      '<svg t="1749105508508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7841" width="16" height="16"><path d="M160 192h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64z m0 576h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64z m276.8-94.688l-19.68-51.744H249.504l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.352 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52s-12.096-16.416-12.096-26.16c0-5.632 0.928-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.456-267.76 10.832-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0 1 18.848-17.28c7.776-4.416 17.392-6.624 28.816-6.624 11.632 0 21.328 2.208 29.12 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.768 6.928 8.8 14.384 12.08 22.352 3.28 7.968 7.456 18.608 12.528 31.92l107.712 266.08c8.432 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 0 1-28.832 11.952c-6.56 0-12.192-1.168-16.864-3.52a34.56 34.56 0 0 1-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 0 1-9.44-22.08z m-165.36-114.464h123.2l-62.176-170.16-61.024 170.16zM776 683.712c-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.368 10.832-19.68 0-36.976-3.888-51.888-11.664-14.896-7.776-26.4-18.336-34.448-31.648a82.096 82.096 0 0 1-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.864-1.12 16.96-3.664 36.272-7.6a1589.856 1589.856 0 0 0 49.648-10.832 949.488 949.488 0 0 0 44.864-11.952c-0.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.504 0-34.176 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.04 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.424-12.608-9.424-21.232 0-13.504 4.8-26.624 14.352-39.376 9.552-12.752 24.48-23.248 44.72-31.504s45.472-12.368 75.648-12.368c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.912 37.824 7.984 17.248 11.968 40.128 11.968 68.624a6293.76 6293.76 0 0 1-0.576 87.744c0 14.448 2.4 29.488 7.184 45.152 4.768 15.648 7.168 25.728 7.168 30.24 0 7.856-3.712 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208z m-5.056-111.088c-11.264 4.128-27.616 8.48-49.088 13.072-21.472 4.608-36.32 7.968-44.576 10.128s-16.128 6.384-23.616 12.656c-7.52 6.288-11.264 15.04-11.264 26.304 0 11.616 4.416 21.52 13.232 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.184 0 29.2-3.328 42.048-9.984 12.832-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976z" p-id="7842" fill="currentColor"></path></svg>';
+
+    return span;
+  }
+}
+
+export class IconArrowUp extends Icon {
+  constructor(attr: IconProps = {}) {
+    super({ ...attr, checkable: false });
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML = `<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            focusable=false
+            aria-hidden=true
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 23C11.1716 23 10.5 22.3284 10.5 21.5L10.5 6.12132L4.06066 12.5607C3.47487 13.1464 2.52513 13.1464 1.93934 12.5607C1.35355 11.9749 1.35355 11.0251 1.93934 10.4393L10.9393 1.43934C11.5251 0.853554 12.4749 0.853554 13.0607 1.43934L22.0607 10.4393C22.6464 11.0251 22.6464 11.9749 22.0607 12.5607C21.4749 13.1464 20.5251 13.1464 19.9393 12.5607L13.5 6.12132L13.5 21.5C13.5 22.3284 12.8284 23 12 23Z"
+                fill="currentColor"
+            />
+        </svg>`;
+
+    return span;
+  }
+}
+
+export class IconArrowDown extends Icon {
+  constructor(attr: IconProps = {}) {
+    super({ ...attr, checkable: false });
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML = `<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            focusable=false
+            aria-hidden=true
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 1C12.8284 1 13.5 1.67157 13.5 2.5V17.8787L19.9393 11.4393C20.5251 10.8536 21.4749 10.8536 22.0607 11.4393C22.6464 12.0251 22.6464 12.9749 22.0607 13.5607L13.0607 22.5607C12.4749 23.1464 11.5251 23.1464 10.9393 22.5607L1.93934 13.5607C1.35355 12.9749 1.35355 12.0251 1.93934 11.4393C2.52513 10.8536 3.47487 10.8536 4.06066 11.4393L10.5 17.8787V2.5C10.5 1.67157 11.1716 1 12 1Z"
+                fill="currentColor"
+            />
+        </svg>`;
+
+    return span;
+  }
+}
+
+export class IconReplace extends Icon {
+  constructor(attr: IconProps = {}) {
+    super({ ...attr, checkable: false });
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML =
+      '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M206.144 239.296l144.704 145.216L492.8 242.176l-44.8-44.8-64.768 64.448-0.512-102.4a33.472 33.472 0 0 1 32-33.664H512V64H414.72A94.848 94.848 0 0 0 320 159.296V262.4L251.328 194.112l-45.184 45.184z m426.88 114.816h0.64c11.712 19.904 28.864 29.888 51.584 29.888 25.152 0 45.184-10.752 60.16-32.192 15.104-21.44 22.592-49.92 22.592-85.312 0-32.704-6.4-58.432-19.264-77.248-12.864-18.88-31.232-28.288-55.04-28.288-25.92 0-45.952 12.416-60.032 37.184h-0.64V64H576v314.816h56.96v-24.704z m-0.96-67.904v-21.76c0-15.872 3.712-28.672 11.2-38.464a34.56 34.56 0 0 1 28.48-14.72 31.36 31.36 0 0 1 27.904 14.912c6.656 9.856 9.92 23.552 9.92 41.152 0 21.12-3.584 37.568-10.816 49.152a33.536 33.536 0 0 1-30.08 17.28 31.68 31.68 0 0 1-26.304-13.504 54.592 54.592 0 0 1-10.24-34.048zM576 817.216c-16.384 9.856-40 14.784-70.912 14.784-36.032 0-65.28-11.392-87.616-34.112-22.336-22.72-33.472-52.032-33.472-87.936 0-41.472 11.904-74.112 35.84-97.92 23.936-24.064 56-36.032 96-36.032 27.712 0 47.744 3.84 60.16 11.456v63.872a80.64 80.64 0 0 0-50.688-17.664c-20.8 0-37.312 6.4-49.536 19.072-12.16 12.544-18.112 29.952-18.112 52.224 0 21.632 5.76 38.592 17.408 51.008 11.648 12.224 27.584 18.368 47.936 18.368 18.048 0 35.712-5.888 52.992-17.664v60.544zM256 448L192 512v384l64 64h448l64-64V512l-64-64H256z m0 64h448v384H256V512z" fill="currentColor"></path></svg>';
+
+    return span;
+  }
+}
+
+export class IconReplaceAll extends Icon {
+  constructor(attr: IconProps = {}) {
+    super({ ...attr, checkable: false });
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML =
+      '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M742.4 171.328c9.408-19.84 22.784-29.76 40.064-29.76 15.872 0 28.16 7.552 36.672 22.592 8.576 15.104 12.864 35.648 12.864 61.824 0 28.352-4.992 51.072-15.04 68.288-9.984 17.152-23.36 25.728-40.128 25.728-15.168 0-26.624-8-34.368-23.936h-0.512v19.84H704V64h37.952v107.328h0.512z m-1.024 70.4a49.92 49.92 0 0 0 6.848 27.264c4.544 7.232 10.432 10.816 17.536 10.816 8.704 0 15.36-4.608 20.096-13.824 4.8-9.28 7.232-22.4 7.232-39.36 0-14.08-2.24-24.96-6.656-32.896-4.288-7.936-10.496-11.968-18.56-11.968-7.68 0-14.016 3.968-19.008 11.84a56.704 56.704 0 0 0-7.488 30.72v17.408zM263.68 492.48L128 356.352l42.368-42.368 64.384 64v-96.64A88.96 88.96 0 0 1 323.52 192H473.6v57.92H323.52a31.36 31.36 0 0 0-29.952 31.552l0.448 96 60.736-60.416 41.984 41.984-133.12 133.44zM598.784 315.52H640V206.08C640 154.112 619.84 128 579.584 128c-8.64 0-18.24 1.536-28.8 4.672a92.416 92.416 0 0 0-24.832 10.688v42.56c15.168-12.992 31.168-19.456 48-19.456 16.704 0 25.088 9.984 25.088 30.016l-38.4 6.592c-32.384 5.504-48.64 25.984-48.64 61.504 0 16.832 3.904 30.272 11.712 40.384A39.04 39.04 0 0 0 556.16 320c18.56 0 32.576-10.24 42.048-30.72h0.576v26.24z m0.256-86.72v12.352c0 11.2-2.56 20.48-7.68 27.904a23.552 23.552 0 0 1-20.032 10.88 17.664 17.664 0 0 1-14.08-6.08 24.32 24.32 0 0 1-5.12-15.872c0-14.208 7.04-22.464 21.248-24.896l25.6-4.288zM448 827.52h-41.216v-26.24h-0.576c-9.472 20.48-23.488 30.72-42.048 30.72a39.04 39.04 0 0 1-32.448-15.04c-7.808-10.112-11.712-23.552-11.712-40.32 0-35.584 16.256-56.064 48.64-61.568l38.4-6.592c0-20.032-8.32-30.08-25.088-30.08-16.832 0-32.832 6.528-48 19.52v-42.56c6.08-4.032 14.336-7.616 24.832-10.688 10.56-3.136 20.16-4.672 28.8-4.672 40.32 0 60.416 26.048 60.416 78.08v109.44z m-40.96-74.368v-12.352l-25.6 4.352c-14.208 2.368-21.312 10.624-21.312 24.832 0 6.4 1.728 11.712 5.12 15.872a17.664 17.664 0 0 0 14.08 6.08 23.552 23.552 0 0 0 19.968-10.88c5.12-7.424 7.68-16.64 7.68-27.904zM592.768 832c20.544 0 36.352-3.712 47.232-11.072v-45.44a57.6 57.6 0 0 1-35.328 13.248 39.616 39.616 0 0 1-32-13.76c-7.68-9.28-11.584-22.08-11.584-38.272 0-16.64 4.032-29.696 12.096-39.168a41.216 41.216 0 0 1 33.024-14.272c12.416 0 23.68 4.416 33.792 13.248v-47.936c-8.256-5.76-21.632-8.576-40.064-8.576-26.688 0-48.064 8.96-64.064 27.008-15.936 17.92-23.872 42.368-23.872 73.472 0 26.88 7.424 48.896 22.336 65.92 14.848 17.088 34.368 25.6 58.432 25.6zM128 576l64-64h576l64 64v320l-64 64H192l-64-64V576z m64 0v320h576V576H192z m192-128l64-64h448l64 64v320l-64 64V448H384z" fill="currentColor"></path></svg>';
+
+    return span;
+  }
+}
+
+export class IconClose extends Icon {
+  constructor(attr: IconProps = {}) {
+    super({ ...attr, checkable: false });
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML = `<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            focusable=false
+            aria-hidden=true
+        >
+            <path
+                d="M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z"
+                fill="currentColor"
+            />
+        </svg>`;
+
+    return span;
+  }
+}
+
+export class IconEnter extends Icon {
+  constructor(attr: IconProps = {}) {
+    super({ ...attr, checkable: false });
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML =
+      '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M896 277.333333a21.333333 21.333333 0 0 0-21.333333-21.333333h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333333V469.333333H270.08l146.773333-146.773333a20.906667 20.906667 0 0 0 0-29.866667l-30.293333-30.293333a21.333333 21.333333 0 0 0-30.293333 0l-218.88 218.88a32.853333 32.853333 0 0 0-9.386667 22.613333v16.213334a32 32 0 0 0 9.386667 22.613333l219.306666 218.88a21.333333 21.333333 0 0 0 30.293334 0l30.293333-29.866667a21.333333 21.333333 0 0 0 0-30.293333L270.08 554.666667H810.666667a85.333333 85.333333 0 0 0 85.333333-85.333334zM227.413333 512z" fill="currentColor" ></path></svg>';
+
+    return span;
+  }
+}
+
+export class IconChevronRight extends Icon {
+  constructor(attr: IconProps = {}) {
+    super({ ...attr });
+  }
+
+  getSVG() {
+    const span = document.createElement('span');
+    span.innerHTML = `<svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            focusable=false
+            aria-hidden=true
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z"
+                fill="currentColor"
+            />
+        </svg>`;
+
+    return span;
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/match-count.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/match-count.ts
new file mode 100644
index 000000000..56bcdd43b
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/dom/match-count.ts
@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import createEle from 'crelt';
+
+interface CountData {
+  matchIndex: number;
+  matchCount: number;
+  searching?: boolean;
+}
+
+export class MatchCount {
+  _data: CountData;
+  dom: HTMLDivElement;
+  constructor(
+    data: CountData = { matchCount: 0, matchIndex: -1, searching: false },
+  ) {
+    this._data = data;
+    this.dom = createEle('div', {
+      class: 'cm-custom-search-match-count',
+    }) as HTMLDivElement;
+
+    this.update();
+  }
+
+  update() {
+    if (this._data.matchCount > 0) {
+      this.dom.innerText = ` ${this._data.matchIndex + 1} of ${
+        this._data.matchCount > 1000 ? '1000+' : this._data.matchCount
+      }`;
+
+      this.dom.style.color = 'unset';
+    } else {
+      this.dom.innerText = '无结果';
+
+      if (this._data.searching) {
+        this.dom.style.color = 'red';
+      } else {
+        this.dom.style.color = 'unset';
+      }
+    }
+  }
+
+  get data() {
+    return this._data;
+  }
+
+  set data(data: CountData) {
+    this._data = data;
+    this.update();
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/index.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/index.ts
new file mode 100644
index 000000000..a60e47cad
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/index.ts
@@ -0,0 +1,24 @@
+import { type EditorView, keymap } from '@codemirror/view';
+import {
+  gotoLine,
+  searchKeymap,
+  search as nativeSearch,
+} from '@codemirror/search';
+
+import { theme } from './theme';
+import { SearchPanel } from './panel';
+
+/*
+ * TODO
+ * 1. 考虑如何让用户自定义Panel
+ * 2. 展示搜索组建时顶部可以额外滚动
+ * 3. 组件 Search 拆分
+ * */
+
+export const search = () => [
+  theme,
+  nativeSearch({
+    createPanel: (view: EditorView) => new SearchPanel(view),
+  }),
+  keymap.of([...searchKeymap, { key: 'Ctrl-g', run: gotoLine }]),
+];
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/panel.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/panel.ts
new file mode 100644
index 000000000..d8969da12
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/panel.ts
@@ -0,0 +1,485 @@
+/* eslint-disable max-lines-per-function */
+import createEle from 'crelt';
+import {
+  type EditorView,
+  type Panel,
+  runScopeHandlers,
+  type ViewUpdate,
+} from '@codemirror/view';
+import { type EditorState } from '@codemirror/state';
+import {
+  closeSearchPanel,
+  findNext,
+  findPrevious,
+  getSearchQuery,
+  replaceAll,
+  replaceNext,
+  SearchQuery,
+  setSearchQuery,
+} from '@codemirror/search';
+
+import { MatchCount } from './dom/match-count';
+import {
+  IconCaseSensitive,
+  IconRegExp,
+  IconWholeWord,
+  IconArrowUp,
+  IconArrowDown,
+  IconReplace,
+  IconReplaceAll,
+  IconClose,
+  IconChevronRight,
+} from './dom/icon';
+
+export class SearchPanel implements Panel {
+  searchField!: HTMLInputElement;
+  replaceField!: HTMLInputElement;
+  matchCount: MatchCount;
+
+  caseField!: IconCaseSensitive;
+  reField!: IconRegExp;
+  wordField!: IconWholeWord;
+  expand!: IconChevronRight;
+  arrowUp!: IconArrowUp;
+  arrowDown!: IconArrowDown;
+  replace!: IconReplace;
+  replaceAll!: IconReplaceAll;
+  dom: HTMLElement;
+  query: SearchQuery;
+
+  constructor(readonly view: EditorView) {
+    this.commit = this.commit.bind(this);
+    this.query = getSearchQuery(view.state);
+    this.matchCount = new MatchCount();
+
+    const searchLine = this.initSearchLine(view);
+
+    const replaceLine = this.initReplaceLine(view);
+
+    const replaceLineStatus = () => {
+      if (view.state.readOnly) {
+        replaceLine.style.display = 'none';
+        return;
+      }
+
+      if (!this.expand?.checked) {
+        replaceLine.style.display = 'none';
+        return;
+      }
+
+      replaceLine.style.display = 'flex';
+    };
+
+    replaceLineStatus();
+
+    const expand = this.initExpandButton(view, () => replaceLineStatus());
+
+    const onMouseDown = useDragSearchPanel(this);
+
+    this.dom = createEle(
+      'div',
+      {
+        onkeydown: (e: KeyboardEvent) => this.keydown(e),
+        class: 'cm-custom-search',
+      },
+      [
+        createEle('div', {
+          class: 'cm-custom-search-drag',
+          onmousedown: onMouseDown,
+        }),
+        ...expand,
+        createEle(
+          'div',
+          {
+            class: 'cm-custom-search-panel-content',
+          },
+          [searchLine, replaceLine],
+        ),
+      ],
+    );
+
+    this.updateMatchCount(view.state, this.query);
+  }
+
+  private initExpandButton(view: EditorView, onExpandChange?: () => void) {
+    this.expand = new IconChevronRight({
+      name: 'expand',
+      title: phrase(view, '展开'),
+      onchange: onExpandChange,
+    });
+
+    return view.state.readOnly
+      ? []
+      : [
+          createEle(
+            'div',
+            {
+              class: 'cm-custom-search-panel-expand',
+            },
+            [this.expand.dom],
+          ),
+        ];
+  }
+
+  private initSearchLine(view: EditorView) {
+    const inputWrapperRef: { current: null | HTMLDivElement } = {
+      current: null,
+    };
+
+    const handleInputFocus = () => {
+      inputWrapperRef.current?.focus();
+      if (
+        inputWrapperRef.current &&
+        !inputWrapperRef.current.classList.contains(
+          'cm-custom-search-panel-content-input-wrapper-focus',
+        )
+      ) {
+        inputWrapperRef.current.classList.add(
+          'cm-custom-search-panel-content-input-wrapper-focus',
+        );
+      }
+    };
+
+    const handleInputBlur = () => {
+      inputWrapperRef.current?.blur();
+      if (inputWrapperRef.current) {
+        inputWrapperRef.current.classList.remove(
+          'cm-custom-search-panel-content-input-wrapper-focus',
+        );
+      }
+    };
+
+    this.searchField = createEle('input', {
+      value: this.query.search,
+      placeholder: phrase(view, '查找'),
+      title: phrase(view, '查找'),
+      class: 'cm-custom-text-field',
+      name: 'search',
+      form: '',
+      'main-field': 'true',
+      onchange: this.commit,
+      onkeyup: this.commit,
+      onfocus: handleInputFocus,
+      onblur: handleInputBlur,
+    }) as HTMLInputElement;
+
+    this.caseField = new IconCaseSensitive({
+      checked: this.query.caseSensitive,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      name: 'case',
+      title: phrase(view, '区分大小写'),
+    });
+
+    this.reField = new IconRegExp({
+      name: 're',
+      checked: this.query.regexp,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      title: phrase(view, '正则表达式'),
+    });
+
+    this.wordField = new IconWholeWord({
+      name: 'word',
+      checked: this.query.wholeWord,
+      onchange: () => {
+        this.searchField.focus();
+        this.commit();
+      },
+      title: phrase(view, '全词匹配'),
+    });
+
+    // const enter = new IconEnter({
+    //   name: 'enter',
+    //   title: phrase(view, 'Next Line'),
+    //   onchange: () => findNext(this.view),
+    // });
+
+    this.arrowUp = new IconArrowUp({
+      name: 'previous',
+      onclick: () => {
+        findPrevious(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, '上一个匹配'),
+    });
+
+    this.arrowDown = new IconArrowDown({
+      name: 'next',
+      onclick: () => {
+        findNext(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, '下一个匹配'),
+    });
+
+    inputWrapperRef.current = createEle(
+      'div',
+      {
+        class: 'cm-custom-search-panel-content-input-wrapper',
+      },
+      [
+        this.searchField,
+        // enter.dom,
+        this.caseField.dom,
+        this.reField.dom,
+        this.wordField.dom,
+      ],
+    ) as HTMLDivElement;
+
+    return createEle(
+      'div',
+      {
+        class: 'cm-custom-search-panel-content-top',
+      },
+      [
+        inputWrapperRef.current,
+        this.matchCount.dom,
+        createEle(
+          'div',
+          {
+            class: 'cm-custom-search-action-wrapper',
+          },
+          [
+            this.arrowUp.dom,
+            this.arrowDown.dom,
+            new IconClose({
+              name: 'close-icon',
+              onclick: () => closeSearchPanel(view),
+              title: phrase(view, '关闭'),
+            }).dom,
+          ],
+        ),
+      ],
+    );
+  }
+
+  private initReplaceLine(view: EditorView) {
+    const inputWrapperRef: { current: null | HTMLDivElement } = {
+      current: null,
+    };
+
+    const handleInputFocus = () => {
+      inputWrapperRef.current?.focus();
+      if (
+        inputWrapperRef.current &&
+        !inputWrapperRef.current.classList.contains(
+          'cm-custom-search-panel-content-input-wrapper-focus',
+        )
+      ) {
+        inputWrapperRef.current.classList.add(
+          'cm-custom-search-panel-content-input-wrapper-focus',
+        );
+      }
+    };
+
+    const handleInputBlur = () => {
+      inputWrapperRef.current?.blur();
+      if (inputWrapperRef.current) {
+        inputWrapperRef.current.classList.remove(
+          'cm-custom-search-panel-content-input-wrapper-focus',
+        );
+      }
+    };
+
+    this.replaceField = createEle('input', {
+      value: this.query.replace,
+      placeholder: phrase(view, '替换'),
+      title: phrase(view, '替换'),
+      class: 'cm-custom-text-field',
+      name: 'replace',
+      form: '',
+      onchange: this.commit,
+      onkeyup: this.commit,
+      onfocus: handleInputFocus,
+      onblur: handleInputBlur,
+    }) as HTMLInputElement;
+
+    this.replace = new IconReplace({
+      name: 'replace',
+      onclick: () => {
+        replaceNext(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, '替换'),
+    });
+
+    this.replaceAll = new IconReplaceAll({
+      name: 'replaceAll',
+      onclick: () => {
+        replaceAll(view);
+        this.updateMatchCount(view.state, this.query);
+      },
+      title: phrase(view, '替换所有'),
+    });
+
+    inputWrapperRef.current = createEle(
+      'div',
+      {
+        class: 'cm-custom-search-panel-content-input-wrapper',
+      },
+      [this.replaceField],
+    ) as HTMLDivElement;
+
+    return createEle(
+      'div',
+      {
+        class: 'cm-custom-search-panel-content-bottom',
+      },
+      [inputWrapperRef.current, this.replace.dom, this.replaceAll.dom],
+    );
+  }
+
+  commit() {
+    const query = new SearchQuery({
+      search: this.searchField.value,
+      caseSensitive: this.caseField.checked,
+      regexp: this.reField.checked,
+      wholeWord: this.wordField.checked,
+      replace: this.replaceField.value,
+    });
+
+    if (!query.eq(this.query)) {
+      this.query = query;
+      this.view.dispatch({ effects: setSearchQuery.of(query) });
+    }
+
+    this.updateMatchCount(this.view.state, this.query);
+  }
+
+  keydown(e: KeyboardEvent) {
+    if (runScopeHandlers(this.view, e, 'search-panel')) {
+      e.preventDefault();
+    } else if (
+      (e.keyCode === 13 || e.key === 'Enter') &&
+      e.target === this.searchField
+    ) {
+      e.preventDefault();
+      (e.shiftKey ? findPrevious : findNext)(this.view);
+    } else if (
+      (e.keyCode === 13 || e.key === 'Enter') &&
+      e.target === this.replaceField
+    ) {
+      e.preventDefault();
+      replaceNext(this.view);
+    }
+  }
+
+  updateMatchCount(state: EditorState, query: SearchQuery) {
+    this.matchCount.data = {
+      ...findMatchIndex(state, query),
+      searching: !!query.search,
+    };
+
+    if (this.matchCount.data.matchCount > 0) {
+      this.replace.disabled = false;
+      this.replaceAll.disabled = false;
+      this.arrowUp.disabled = false;
+      this.arrowDown.disabled = false;
+    } else {
+      this.replace.disabled = true;
+      this.replaceAll.disabled = true;
+      this.arrowUp.disabled = true;
+      this.arrowDown.disabled = true;
+    }
+  }
+
+  update(update: ViewUpdate) {
+    for (const tr of update.transactions) {
+      for (const effect of tr.effects) {
+        if (effect.is(setSearchQuery) && !effect.value.eq(this.query)) {
+          this.setQuery(effect.value);
+          this.updateMatchCount(update.state, effect.value);
+        }
+      }
+    }
+  }
+
+  setQuery(query: SearchQuery) {
+    this.query = query;
+    this.searchField.value = query.search;
+    this.replaceField.value = query.replace;
+    this.caseField.checked = query.caseSensitive;
+    this.reField.checked = query.regexp;
+    this.wordField.checked = query.wholeWord;
+  }
+
+  mount() {
+    this.searchField.select();
+  }
+
+  get top() {
+    return true;
+  }
+}
+
+function phrase(view: EditorView, p: string) {
+  return view.state.phrase(p);
+}
+function findMatchIndex(state: EditorState, query: SearchQuery) {
+  try {
+    const { from, to } = state.selection.main;
+    let index = 0;
+    let matchIndex = -1;
+    const cursor = query.getCursor(state);
+    let data = cursor.next();
+    while (!data.done) {
+      if (data.value.from === from && data.value.to === to) {
+        matchIndex = index;
+      }
+      data = cursor.next();
+      index++;
+    }
+
+    return { matchIndex, matchCount: index };
+  } catch (e) {
+    return { matchIndex: -1, matchCount: 0 };
+  }
+}
+function useDragSearchPanel(panel?: SearchPanel) {
+  let isResizing = false;
+  let startX = 0;
+  let startWidth = 0;
+
+  const onMouseMove = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!isResizing || !panel?.dom) {
+      return;
+    }
+
+    const newWidth = startX - e.clientX + startWidth;
+    panel.dom.style.width = `${newWidth}px`;
+  };
+
+  const onMouseUp = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    isResizing = false;
+    startX = 0;
+    startWidth = 0;
+
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  const onMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    isResizing = true;
+    startX = e.clientX;
+    startWidth = panel?.dom.clientWidth ?? 0;
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
+  return onMouseDown;
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/theme.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/theme.ts
new file mode 100644
index 000000000..98a4f57d0
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/search/theme.ts
@@ -0,0 +1,186 @@
+import { EditorView } from '@codemirror/view';
+import { Prec } from '@codemirror/state';
+export const theme = Prec.high(
+  EditorView.theme({
+    '& .cm-panels.cm-panels-top': {
+      borderBottom: 'none',
+      backgroundColor: 'transparent',
+    },
+    '& .cm-panels.cm-panels-bottom': {
+      borderTop: 'none',
+      backgroundColor: 'transparent',
+      border: '1px solid rgba(28, 31, 35, .08)',
+    },
+    '& .cm-searchMatch': {
+      outline: 'none',
+    },
+
+    '& .cm-custom-search': {
+      position: 'absolute',
+      top: 0,
+      right: '10px',
+      backgroundColor: '#f3f3f3',
+      display: 'flex',
+      padding: '4px',
+      boxSizing: 'border-box',
+      minWidth: '360px',
+      maxWidth: 'calc(100% - 30px)',
+      borderRadius: '4px',
+      boxShadow: '0 2px 8px 2px rgba(0, 0, 0, 0.16)',
+      overflow: 'hidden',
+    },
+    '& .cm-custom-search button': {
+      borderWidth: 0,
+    },
+    '& .cm-custom-search input': {
+      outline: 'none',
+    },
+    '& .cm-custom-search .cm-custom-search-drag': {
+      width: '3px',
+      height: '100%',
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      backgroundColor: '#c8c8c8',
+    },
+    '& .cm-custom-search .cm-custom-search-drag:hover': {
+      backgroundColor: '#0090f1',
+      cursor: 'col-resize',
+    },
+    '& .cm-custom-text-field': {
+      backgroundColor: 'inherit',
+      padding: 0,
+      border: 'none',
+      color: '#444d56',
+      fontSize: '12px',
+      lineHeight: '16px',
+      verticalAlign: 'middle',
+      width: 'calc(100% - 58px)',
+    },
+    '& .cm-custom-search-panel-icon': {
+      display: 'inline-flex',
+      'align-items': 'center',
+      'justify-content': 'center',
+      padding: '4px',
+      'border-radius': '2px',
+      'background-color': 'transparent',
+      'box-sizing': 'border-box',
+      width: '20px',
+      height: '20px',
+      cursor: 'pointer',
+    },
+    '& .cm-custom-search-panel-icon:hover': {
+      color: 'rgba(0, 100, 250, 1)',
+      backgroundColor: 'rgba(46, 60, 56, .09)',
+    },
+    '& .cm-custom-search-panel-icon:active': {
+      backgroundColor: 'rgba(46, 50, 56, .13)',
+    },
+    '& .cm-custom-search-panel-icon span': {
+      display: 'inline-flex',
+      lineHeight: '12px',
+      fontSize: '12px',
+    },
+    '& .cm-custom-search-panel-icon-active': {
+      color: 'rgba(0, 100, 250, 1)',
+      backgroundColor: 'rgba(46, 50, 56, .05)',
+    },
+    '& .cm-custom-search-panel-icon-disabled': {
+      color: 'rgba(28, 31, 35, .35)',
+      backgroundColor: 'transparent',
+    },
+    '& .cm-custom-search-panel-icon-disabled:hover': {
+      color: 'rgba(28, 31, 35, .35)',
+      backgroundColor: 'transparent',
+    },
+    '& .cm-custom-search-panel-icon-disabled:active': {
+      color: 'rgba(28, 31, 35, .35)',
+      backgroundColor: 'transparent',
+    },
+    '& .cm-custom-search-panel-expand': {
+      display: 'flex',
+      padding: '4px',
+    },
+    '& .cm-custom-search-panel-content': {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+    },
+    '& .cm-custom-search-panel-content-top': {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '& .cm-custom-search-action-wrapper': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'end',
+    },
+    '& .cm-custom-search-panel-content-input-wrapper': {
+      display: 'flex',
+      alignItems: 'center',
+      flex: 1,
+      position: 'relative',
+      border: '1px solid #555',
+      padding: '4px',
+      minWidth: '170px',
+      marginLeft: '4px',
+      marginRight: '6px',
+      borderRadius: '2px',
+    },
+    '& .cm-custom-search-panel-content-input-wrapper-focus': {
+      borderColor: 'rgba(0, 100, 250, 1)',
+    },
+    '& .cm-custom-search-panel-content-input-wrapper .cm-custom-search-panel-icon':
+      {
+        position: 'absolute',
+        top: '4px',
+        right: '4px',
+        padding: '2px',
+        width: '16px',
+        height: '16px !important',
+      },
+    '& .cm-panel.cm-custom-search [name=word]': {
+      right: '22px',
+    },
+    '& .cm-panel.cm-custom-search [name=case]': {
+      right: '40px',
+    },
+    '& .cm-panel.cm-custom-search [name=enter]': {
+      right: '58px',
+    },
+    '& .cm-panel.cm-custom-search [name=previous]': {
+      marginRight: '2px',
+    },
+    '& .cm-panel.cm-custom-search [name=next]': {
+      marginRight: '2px',
+    },
+    '& .cm-panel.cm-custom-search [name=close-icon]': {
+      marginRight: '2px',
+    },
+    '& .cm-panel.cm-custom-search [name=replace]': {
+      marginRight: '2px',
+    },
+    '& .cm-panel.cm-custom-search  [name=expand]': {
+      transform: 'rotate(0deg)',
+    },
+    '& .cm-panel.cm-custom-search  [name=expand].cm-custom-search-panel-icon-active':
+      {
+        transform: 'rotate(90deg)',
+      },
+
+    '& .cm-custom-search-match-count': {
+      fontSize: '12px',
+      width: '80px',
+      overflow: 'hidden',
+    },
+    '& .cm-custom-search-panel-content-bottom': {
+      marginRight: '104px',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '& .cm-custom-search-panel-content-bottom .cm-custom-search-panel-content-input-wrapper':
+      {
+        marginTop: '6px',
+      },
+  }),
+);
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.module.css b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.module.css
index ca0621ea7..3c0c1e3a9 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.module.css
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.module.css
@@ -1,7 +1,3 @@
-/**
- * Copyright (c) 2025 coze-dev Authors
- * SPDX-License-Identifier: Apache-2.0
- */
 .valid {
   color: var(--Green-COZColorGreen7, #00A136);
 }
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.ts b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.ts
index 1dda59eb5..489edc7f3 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/validation.ts
@@ -1,5 +1,4 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable complexity */
 /* eslint-disable security/detect-non-literal-regexp */
 /* eslint-disable @typescript-eslint/naming-convention */
 import { type ReactNode, useLayoutEffect } from 'react';
@@ -9,6 +8,8 @@ import { astDecorator } from '@coze-editor/editor';
 
 import { VARIABLE_MAX_LEN } from '@/consts';
 
+import { type VariableType } from './variable';
+
 import styles from './validation.module.css';
 
 function validate(text: string) {
@@ -20,7 +21,37 @@ function validate(text: string) {
   return false;
 }
 
-export function Validation(): ReactNode {
+/**
+ * 解析Jinja变量语法，提取变量名
+ * 支持以下格式：
+ * - text.a (对象属性访问) -> 返回 text
+ * - text[0] (数组索引访问) -> 返回 text
+ * - text (简单变量) -> 返回 text
+ */
+function parseJinjaVariable(text: string): string {
+  const trimmedText = text.trim();
+
+  // 处理对象属性访问: text.a 或 text.a.b
+  if (trimmedText.includes('.')) {
+    return trimmedText.split('.')[0];
+  }
+
+  // 处理数组索引访问: text[0] 或 text[0][1]
+  if (trimmedText.includes('[')) {
+    return trimmedText.split('[')[0];
+  }
+
+  // 简单变量，直接返回
+  return trimmedText;
+}
+
+export function Validation({
+  variables,
+  isNormalTemplate,
+}: {
+  variables?: VariableType[];
+  isNormalTemplate?: boolean;
+}): ReactNode {
   const injector = useInjector();
 
   // 用于校验 {{ }} 中的变量，如果变量无效，使用灰色标识
@@ -36,7 +67,7 @@ export function Validation(): ReactNode {
             const from = cursor.node.firstChild.to;
             const to = cursor.node.lastChild.from;
             const text = state.sliceDoc(from, to);
-            if (validate(text)) {
+            if (validate(text) && isNormalTemplate) {
               return {
                 type: 'className',
                 className: styles.valid,
@@ -45,6 +76,21 @@ export function Validation(): ReactNode {
               };
             }
 
+            if (!isNormalTemplate) {
+              const variableName = parseJinjaVariable(text);
+              const item = variables?.find(
+                variable => variable.key === variableName,
+              );
+              if (item) {
+                return {
+                  type: 'className',
+                  className: styles.valid,
+                  from,
+                  to,
+                };
+              }
+            }
+
             return {
               type: 'className',
               className: styles.invalid,
@@ -52,9 +98,47 @@ export function Validation(): ReactNode {
               to,
             };
           }
+
+          if (
+            cursor.name === 'JinjaStatement' &&
+            cursor.node.firstChild?.name === 'JinjaStatementStart' &&
+            cursor.node.lastChild?.name === 'JinjaStatementEnd' &&
+            !isNormalTemplate
+          ) {
+            const from = cursor.node.firstChild.to;
+            const to = cursor.node.lastChild.from;
+            const text = state.sliceDoc(from, to);
+            // 过滤掉 undefined 值
+            return (variables || [])
+              .map(variable => {
+                if (variable.key) {
+                  const index = text.indexOf(variable.key);
+                  if (index !== -1) {
+                    return {
+                      type: 'className',
+                      className: styles.valid,
+                      from: from + index,
+                      to: from + index + variable.key.length + 1,
+                    };
+                  }
+                }
+                return undefined;
+              })
+              .filter(
+                (
+                  item,
+                ): item is {
+                  type: 'className';
+                  className: string;
+                  from: number;
+                  to: number;
+                } => item !== undefined,
+              );
+          }
+          return undefined;
         }),
       ]),
-    [injector],
+    [injector, variables],
   );
 
   return null;
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/variable.tsx b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/variable.tsx
index 12d5c3dee..8687e7fb1 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/variable.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/extensions/variable.tsx
@@ -1,11 +1,7 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable max-params */
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import { useEffect, useState } from 'react';
 
-import { I18n } from '@cozeloop/i18n-adapter';
-import { type VariableDef } from '@cozeloop/api-schema/prompt';
 import {
   Mention,
   type MentionOpenChangeEvent,
@@ -17,7 +13,20 @@ import {
 import { type EditorAPI } from '@coze-editor/editor/preset-prompt';
 import { Popover, Typography } from '@coze-arch/coze-design';
 
-function Variable({ variables }: { variables: VariableDef[] }) {
+export interface VariableType {
+  /** 变量名字 */
+  key?: string;
+  /** 变量值/mock值 */
+  value?: string;
+}
+
+function Variable({
+  variables,
+  isGoTemplate,
+}: {
+  variables: VariableType[];
+  isGoTemplate?: boolean;
+}) {
   const [posKey, setPosKey] = useState('');
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState(-1);
@@ -32,7 +41,7 @@ function Variable({ variables }: { variables: VariableDef[] }) {
 
     editor.replaceText({
       ...range,
-      text: `{{${variableName}}}`,
+      text: isGoTemplate ? `{{.${variableName}}}` : `{{${variableName}}}`,
       cursorOffset: variableName ? 0 : -2,
     });
 
@@ -51,9 +60,13 @@ function Variable({ variables }: { variables: VariableDef[] }) {
 
     // 当变量浮层出现时，禁用 上、下、回车键 在编辑器中的默认行为
     if (visible) {
-      editor.disableKeybindings(['ArrowUp', 'ArrowDown', 'Enter']);
+      setTimeout(() => {
+        editor.disableKeybindings(['ArrowUp', 'ArrowDown', 'Enter']);
+      }, 100);
     } else {
-      editor.disableKeybindings([]);
+      setTimeout(() => {
+        editor.disableKeybindings([]);
+      }, 100);
     }
   }, [editor, visible]);
 
@@ -115,7 +128,7 @@ function Variable({ variables }: { variables: VariableDef[] }) {
         content={
           <div className="p-1 min-w-[100px] flex flex-col gap-1">
             <Typography.Text type="secondary" strong>
-              {I18n.t('insert_variable')}
+              插入变量
             </Typography.Text>
             <div className="max-h-[200px] overflow-y-auto">
               {variables.map((variable, index) => (
@@ -157,7 +170,7 @@ function Variable({ variables }: { variables: VariableDef[] }) {
 // 回车：插入变量
 function usePopoverNavigation(options: {
   enable: boolean;
-  variables: VariableDef[];
+  variables: VariableType[];
   onApply: (name: string) => void;
 }) {
   const { enable, variables, onApply } = options;
diff --git a/frontend/packages/cozeloop/prompt-components/src/basic-editor/index.tsx b/frontend/packages/cozeloop/prompt-components/src/basic-editor/index.tsx
index 43cfd4c10..9c92390b1 100644
--- a/frontend/packages/cozeloop/prompt-components/src/basic-editor/index.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/basic-editor/index.tsx
@@ -1,23 +1,27 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
 
-import { I18n } from '@cozeloop/i18n-adapter';
-import { type VariableDef } from '@cozeloop/api-schema/prompt';
 import {
   EditorProvider,
   Renderer,
   Placeholder,
 } from '@coze-editor/editor/react';
-import preset from '@coze-editor/editor/preset-prompt';
-import { EditorView } from '@codemirror/view';
-import { type Extension } from '@codemirror/state';
+import preset, { type EditorAPI } from '@coze-editor/editor/preset-prompt';
+import { EditorView, keymap } from '@codemirror/view';
+import { Prec, type Extension } from '@codemirror/state';
+import { indentWithTab } from '@codemirror/commands';
 
-import Variable from './extensions/variable';
+import Variable, { type VariableType } from './extensions/variable';
 import Validation from './extensions/validation';
+import { search } from './extensions/search';
 import MarkdownHighlight from './extensions/markdown';
 import LanguageSupport from './extensions/language-support';
+import { insertFourSpaces } from './extensions/keymap';
 import JinjaHighlight from './extensions/jinja';
 import { goExtension } from './extensions/go-template';
 
@@ -27,7 +31,11 @@ export interface PromptBasicEditorProps {
   minHeight?: number;
   maxHeight?: number;
   fontSize?: number;
-  variables?: VariableDef[];
+  /**
+   * 变量
+   * 只需要传入文本型变量，非文本型变量不能出现在快捷操作中
+   */
+  variables?: VariableType[];
   forbidVariables?: boolean;
   linePlaceholder?: string;
   forbidJinjaHighlight?: boolean;
@@ -35,15 +43,18 @@ export interface PromptBasicEditorProps {
   customExtensions?: Extension[];
   autoScrollToBottom?: boolean;
   isGoTemplate?: boolean;
+  isJinja2Template?: boolean;
   onChange?: (value: string) => void;
   onBlur?: () => void;
   onFocus?: () => void;
   children?: React.ReactNode;
+  canSearch?: boolean;
 }
 
 export interface PromptBasicEditorRef {
   setEditorValue: (value?: string) => void;
   insertText?: (text: string) => void;
+  getEditor?: () => EditorAPI | null;
 }
 
 const extensions = [
@@ -57,6 +68,7 @@ const extensions = [
       paddingRight: '6px !important',
     },
   }),
+  Prec.high(keymap.of([{ key: 'Tab', run: insertFourSpaces }, indentWithTab])),
 ];
 
 export const PromptBasicEditor = forwardRef<
@@ -75,17 +87,19 @@ export const PromptBasicEditor = forwardRef<
       forbidJinjaHighlight,
       forbidVariables,
       readOnly,
-      linePlaceholder = I18n.t('please_input_with_vars'),
-      customExtensions,
+      linePlaceholder = '请输入内容，支持按此格式书写变量：{{USER_NAME}}',
+      customExtensions = [],
       autoScrollToBottom,
       onBlur,
       isGoTemplate,
       onFocus,
+      canSearch,
       children,
+      isJinja2Template,
     }: PromptBasicEditorProps,
     ref,
   ) => {
-    const editorRef = useRef<any>(null);
+    const editorRef = useRef<EditorAPI | null>(null);
 
     useImperativeHandle(ref, () => ({
       setEditorValue: (value?: string) => {
@@ -93,7 +107,7 @@ export const PromptBasicEditor = forwardRef<
         if (!editor) {
           return;
         }
-        editor?.setValue?.(value);
+        editor?.setValue?.(value || '');
       },
       insertText: (text: string) => {
         const editor = editorRef.current;
@@ -110,15 +124,25 @@ export const PromptBasicEditor = forwardRef<
           cursorOffset: 0,
         });
       },
+      getEditor: () => editorRef.current,
     }));
 
     const newExtensions = useMemo(() => {
-      const xExtensions = customExtensions || extensions;
+      const xExtensions = [...extensions, ...customExtensions];
+      const searchExt = canSearch ? [...search()] : [];
       if (isGoTemplate) {
-        return [...xExtensions, goExtension];
+        return [...xExtensions, goExtension, ...searchExt];
+      }
+      return [...xExtensions, ...searchExt];
+    }, [customExtensions, extensions, isGoTemplate, canSearch]);
+
+    useEffect(() => {
+      if (isJinja2Template || isGoTemplate) {
+        setTimeout(() => {
+          editorRef.current?.updateWholeDecorations();
+        }, 150);
       }
-      return xExtensions;
-    }, [customExtensions, extensions, isGoTemplate]);
+    }, [variables, isJinja2Template, isGoTemplate]);
 
     return (
       <EditorProvider>
@@ -150,14 +174,19 @@ export const PromptBasicEditor = forwardRef<
         />
 
         {/* 输入 { 唤起变量选择 */}
-        {!forbidVariables && <Variable variables={variables || []} />}
+        {!forbidVariables && (
+          <Variable variables={variables || []} isGoTemplate={isGoTemplate} />
+        )}
 
         <LanguageSupport />
         {/* Jinja 语法高亮 */}
-        {!forbidJinjaHighlight && (
+        {!forbidJinjaHighlight && !isGoTemplate && (
           <>
-            <Validation />
-            <JinjaHighlight />
+            <Validation
+              variables={variables}
+              isNormalTemplate={!isJinja2Template && !isGoTemplate}
+            />
+            <JinjaHighlight isJinja2Template={isJinja2Template} />
           </>
         )}
 
diff --git a/frontend/packages/cozeloop/prompt-components/src/code-editor/code-editor.tsx b/frontend/packages/cozeloop/prompt-components/src/code-editor/code-editor.tsx
index d5ddf616d..0665d61ee 100644
--- a/frontend/packages/cozeloop/prompt-components/src/code-editor/code-editor.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/code-editor/code-editor.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { createRenderer, option } from '@coze-editor/editor/react';
 import preset, { languages, themes } from '@coze-editor/editor/preset-code';
 import { shell } from '@coze-editor/editor/language-shell';
diff --git a/frontend/packages/cozeloop/prompt-components/src/code-editor/index.ts b/frontend/packages/cozeloop/prompt-components/src/code-editor/index.ts
index 43093c86e..f2521acf0 100644
--- a/frontend/packages/cozeloop/prompt-components/src/code-editor/index.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/code-editor/index.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 export { EditorProvider } from '@coze-editor/editor/react';
 export { CodeEditor } from './code-editor';
 export { TextEditor } from './text-editor';
diff --git a/frontend/packages/cozeloop/prompt-components/src/code-editor/json-editor.tsx b/frontend/packages/cozeloop/prompt-components/src/code-editor/json-editor.tsx
index 5c26ae254..ad3cd0773 100644
--- a/frontend/packages/cozeloop/prompt-components/src/code-editor/json-editor.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/code-editor/json-editor.tsx
@@ -1,5 +1,4 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable security/detect-non-literal-regexp */
 import React, {
   useCallback,
   useEffect,
@@ -13,6 +12,7 @@ import {
   transformerCreator,
 } from '@coze-editor/editor/preset-code';
 import { json } from '@coze-editor/editor/language-json';
+import { EditorView } from '@codemirror/view';
 
 import { CodeEditor } from './code-editor';
 
@@ -29,6 +29,8 @@ interface BaseJsonEditorProps {
   editerHeight?: string | number;
   padding?: string | number;
   borderRadius?: string | number;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 interface Match {
@@ -36,6 +38,17 @@ interface Match {
   range: [number, number];
 }
 
+const extensions = [
+  EditorView.theme({
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent !important',
+    },
+    '.cm-activeLine': {
+      backgroundColor: 'transparent !important',
+    },
+  }),
+];
+
 function findAllMatches(inputString: string, regex: RegExp): Match[] {
   const globalRegex = new RegExp(
     regex,
@@ -89,6 +102,8 @@ export const BaseJsonEditor = React.forwardRef(
       editerHeight,
       padding,
       borderRadius,
+      onFocus,
+      onBlur,
     } = props;
 
     const apiRef = useRef<EditorAPI | null>(null);
@@ -157,6 +172,9 @@ export const BaseJsonEditor = React.forwardRef(
               lineHeight: 20,
             }}
             didMount={api => (apiRef.current = api)}
+            extensions={extensions}
+            onFocus={onFocus}
+            onBlur={onBlur}
           />
         </div>
       </EditorProvider>
diff --git a/frontend/packages/cozeloop/prompt-components/src/code-editor/raw-text-editor.tsx b/frontend/packages/cozeloop/prompt-components/src/code-editor/raw-text-editor.tsx
index 15be5dc9f..fc632a105 100644
--- a/frontend/packages/cozeloop/prompt-components/src/code-editor/raw-text-editor.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/code-editor/raw-text-editor.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { forwardRef, useCallback, useEffect, useRef } from 'react';
 
 import { EditorProvider } from '@coze-editor/editor/react';
diff --git a/frontend/packages/cozeloop/prompt-components/src/code-editor/text-editor.tsx b/frontend/packages/cozeloop/prompt-components/src/code-editor/text-editor.tsx
index 34722c7d7..a931223c4 100644
--- a/frontend/packages/cozeloop/prompt-components/src/code-editor/text-editor.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/code-editor/text-editor.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { createRenderer, option } from '@coze-editor/editor/react';
 import universal from '@coze-editor/editor/preset-universal';
 import { mixLanguages } from '@coze-editor/editor';
diff --git a/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-dark.ts b/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-dark.ts
index a18bb4683..b8da1b939 100644
--- a/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-dark.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-dark.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
 import { EditorView } from '@codemirror/view';
 
diff --git a/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-light.ts b/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-light.ts
index 57bdb72e2..28d969350 100644
--- a/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-light.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/code-editor/themes/coze-light.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
 import { EditorView } from '@codemirror/view';
 
diff --git a/frontend/packages/cozeloop/prompt-components/src/consts/index.ts b/frontend/packages/cozeloop/prompt-components/src/consts/index.ts
index 71ea49bd6..6aa3dfd1f 100644
--- a/frontend/packages/cozeloop/prompt-components/src/consts/index.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/consts/index.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 export const VARIABLE_MAX_LEN = 50;
 
 export const modelConfigLabelMap: Record<string, string> = {
diff --git a/frontend/packages/cozeloop/prompt-components/src/dev-layout/index.tsx b/frontend/packages/cozeloop/prompt-components/src/dev-layout/index.tsx
index d96272e55..f22d4a321 100644
--- a/frontend/packages/cozeloop/prompt-components/src/dev-layout/index.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/dev-layout/index.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import classNames from 'classnames';
 import { Typography } from '@coze-arch/coze-design';
 
@@ -10,7 +8,7 @@ export function DevLayout({
   className,
   style,
 }: {
-  title: string;
+  title: React.ReactNode;
   actionBtns?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
diff --git a/frontend/packages/cozeloop/prompt-components/src/index.ts b/frontend/packages/cozeloop/prompt-components/src/index.ts
index 1240a2dc4..acc6ee1a8 100644
--- a/frontend/packages/cozeloop/prompt-components/src/index.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/index.ts
@@ -1,37 +1,80 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 export {
   PromptBasicEditor,
-  PromptBasicEditorProps,
-  PromptBasicEditorRef,
+  type PromptBasicEditorProps,
+  type PromptBasicEditorRef,
 } from './basic-editor';
 
-export { PromptDiffEditor } from './basic-editor/diff';
+export {
+  PromptDiffEditor,
+  type PromptDiffEditorRef,
+} from './basic-editor/diff';
 
 export {
-  PromptEditor,
-  PromptEditorProps,
-  PromptMessage,
-} from './prompt-editor';
+  BaseJsonEditor,
+  BaseRawTextEditor,
+  EditorProvider,
+} from './code-editor';
+
+export { SchemaEditor } from './schema-editor';
 
 // 开源版模型选择器
 export { PopoverModelConfigEditor } from './model-config-editor-community/popover-model-config-editor';
 export { PopoverModelConfigEditorQuery } from './model-config-editor-community/popover-model-config-editor-query';
 export { BasicModelConfigEditor } from './model-config-editor-community/basic-model-config-editor';
-export { ModelSelectWithObject } from './model-config-editor-community/model-select';
+export { ModelSelectWithObject } from './model-select';
 
 export { DevLayout } from './dev-layout';
 
-export { PromptCreate } from './prompt-create';
-
 export { getPlaceholderErrorContent } from './utils/prompt';
 
-export {
-  BaseJsonEditor,
-  BaseRawTextEditor,
-  EditorProvider,
-} from './code-editor';
+export { type EditorAPI } from '@coze-editor/editor/preset-code';
+
+export { useEditor, useInjector, useLatest } from '@coze-editor/editor/react';
+
+export { astDecorator, type SelectionEnlargerSpec } from '@coze-editor/editor';
+
+export { type EditorAPI as EditorAPIPrompt } from '@coze-editor/editor/preset-prompt';
+
+export { type SyntaxNode } from '@lezer/common';
+
+import regexpDecorator, {
+  updateRegexpDecorations,
+} from '@coze-editor/extension-regexp-decorator';
+
+export { regexpDecorator, updateRegexpDecorations };
 
 export { Decoration, EditorView, WidgetType, keymap } from '@codemirror/view';
-export { EditorSelection } from '@codemirror/state';
-export { type Extension, Prec } from '@codemirror/state';
+
+export { syntaxTree } from '@codemirror/language';
+
+export {
+  EditorSelection,
+  type Extension,
+  Prec,
+  StateEffect,
+  StateField,
+  type EditorState,
+} from '@codemirror/state';
+
+export { cunstomFacet } from './basic-editor/custom-facet';
+
+export {
+  insertFourSpaces,
+  deleteMarkupBackward,
+  insertNewlineContinueMarkup,
+} from './basic-editor/extensions/keymap';
+
+export { MermaidDiagram, type MermaidDiagramRef } from './mermaid-diagram';
+
+export {
+  PromptEditor,
+  type PromptEditorProps,
+  type PromptMessage,
+} from './prompt-editor';
+export { PromptCreate } from './prompt-create';
+
+export {
+  multimodalPartsToContent,
+  splitMultimodalContent,
+  getMultimodalVariableText,
+} from './utils/prompt';
diff --git a/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/font-awesome.all.min.css b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/font-awesome.all.min.css
new file mode 100644
index 000000000..ac76ff191
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/font-awesome.all.min.css
@@ -0,0 +1,5 @@
+/*!
+ * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+.fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bacteria:before{content:"\e059"}.fa-bacterium:before{content:"\e05a"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\e05b"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudflare:before{content:"\e07d"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\e052"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-deezer:before{content:"\e077"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edge-legacy:before{content:"\e078"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-faucet:before{content:"\e005"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\e007"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-pay:before{content:"\e079"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guilded:before{content:"\e07e"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\e05d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-wash:before{content:"\e05e"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt-slash:before{content:"\e05f"}.fa-handshake-slash:before{content:"\e060"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-head-side-cough:before{content:"\e061"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-head-side-mask:before{content:"\e063"}.fa-head-side-virus:before{content:"\e064"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hive:before{content:"\e07f"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-user:before{content:"\e065"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\e013"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-innosoft:before{content:"\e080"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\e055"}.fa-instalod:before{content:"\e081"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-house:before{content:"\e066"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\e067"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\e01a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\e056"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-octopus-deploy:before{content:"\e082"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-arrows:before{content:"\e068"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-perbyte:before{content:"\e083"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\e01e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\e069"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pump-medical:before{content:"\e06a"}.fa-pump-soap:before{content:"\e06b"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-rust:before{content:"\e07a"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-virus:before{content:"\e06c"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\e057"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sink:before{content:"\e06d"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\e06e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\e06f"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-store-alt-slash:before{content:"\e070"}.fa-store-slash:before{content:"\e071"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-tiktok:before{content:"\e07b"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\e041"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-uncharted:before{content:"\e084"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\e049"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-unsplash:before{content:"\e07c"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-users-slash:before{content:"\e073"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vest:before{content:"\e085"}.fa-vest-patches:before{content:"\e086"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\e074"}.fa-virus-slash:before{content:"\e075"}.fa-viruses:before{content:"\e076"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-watchman-monitoring:before{content:"\e087"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wodu:before{content:"\e088"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
\ No newline at end of file
diff --git a/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.module.less b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.module.less
new file mode 100644
index 000000000..1023c2351
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.module.less
@@ -0,0 +1,6 @@
+.container {
+  & > svg {
+    max-width: 100% !important;
+    height: 100%;
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.tsx b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.tsx
new file mode 100644
index 000000000..91de29324
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/index.tsx
@@ -0,0 +1,133 @@
+/* eslint-disable @coze-arch/use-error-in-catch */
+import {
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+
+import mermaid from 'mermaid';
+import { isEmpty, uniqueId } from 'lodash-es';
+import cls from 'classnames';
+
+import { exportImage } from './utils';
+import { useSvgPanZoom } from './use-svg-pan-zoom';
+
+import styles from './index.module.less';
+
+export interface MermaidDiagramProps {
+  /** mermaid text */
+  chart: string;
+  className?: string;
+}
+export interface MermaidDiagramRef {
+  zoomIn: () => void;
+  zoomOut: () => void;
+  fit: () => void;
+  exportImg: () => Promise<void>;
+}
+
+const DEFAULT_THEME = {
+  theme: 'base',
+  themeVariables: {
+    background: '#f9fafb',
+    fontSize: '12px',
+    primaryColor: '#E5F6FF',
+    primaryTextColor: 'rgba(0,0,0,0.8)',
+    secondaryColor: '#F5EBFF',
+    primaryBorderColor: '#73A6FF',
+    secondaryBorderColor: '#BE8FED',
+    secondaryTextColor: 'rgba(0,0,0,0.56)',
+    tertiaryColor: '#FFF6CC',
+    tertiaryBorderColor: '#FFBC52',
+    tertiaryTextColor: 'rgba(0,0,0,0.3)',
+    noteBkgColor: '#F3F4F6',
+    noteTextColor: 'rgba(0,0,0,0.55)',
+    noteBorderColor: '#A8A8A8',
+    lineColor: 'rgba(0,0,0,0.3)',
+    textColor: 'rgba(0,0,0,0.8)',
+    errorBkgColor: '#FFEBEA',
+    errorTextColor: '#FF3B30',
+  },
+} as const;
+
+export const MermaidDiagram = /*#__PURE__*/ forwardRef<
+  MermaidDiagramRef,
+  MermaidDiagramProps
+>(function MermaidDiagram({ chart, className }, outerRef) {
+  const ref = useRef<HTMLDivElement>(null);
+  const id = useRef(`mermaid-diagram-${uniqueId()}`);
+  const svgId = `svg-${id.current}`;
+  const [preChart, setPreChart] = useState('');
+
+  const updateChart = async (chartStr: string) => {
+    if (isEmpty(chartStr)) {
+      return;
+    }
+    try {
+      const isValidChart = await mermaid.parse(chartStr, {
+        suppressErrors: true,
+      });
+      if (!isValidChart) {
+        return;
+      }
+      const renderResult = await mermaid.render(
+        svgId,
+        chartStr,
+        ref.current || undefined,
+      );
+      if (ref.current && renderResult.svg) {
+        ref.current.innerHTML = renderResult.svg;
+        renderResult.bindFunctions?.(ref.current);
+
+        setPreChart(chartStr);
+      }
+    } catch (e) {
+      if (chartStr !== preChart) {
+        /**
+         * 出错情况下，尝试渲染上次成功的图表
+         * ps: gantt图存在parse未检测出的错误导致错误抛出的情况
+         */
+        updateChart(preChart);
+      }
+    }
+  };
+  useEffect(() => {
+    mermaid.initialize({
+      ...DEFAULT_THEME,
+      startOnLoad: false,
+      logLevel: 'error',
+      suppressErrorRendering: true,
+    });
+  }, []);
+
+  useEffect(() => {
+    updateChart(chart);
+  }, [chart]);
+
+  const { zoomIn, zoomOut, fit } = useSvgPanZoom({
+    svgSelector: `#${svgId}`,
+    viewportSelector: id.current,
+    renderedChart: preChart,
+  });
+
+  useImperativeHandle(outerRef, () => ({
+    zoomIn,
+    zoomOut,
+    fit,
+    exportImg: async () => exportImage(`#${svgId}`),
+  }));
+
+  return (
+    <div
+      id={id.current}
+      className={cls(
+        'w-full min-w-[330px] h-[300px]',
+        styles.container,
+        className,
+      )}
+      ref={ref}
+    ></div>
+  );
+});
diff --git a/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/use-svg-pan-zoom.ts b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/use-svg-pan-zoom.ts
new file mode 100644
index 000000000..954787174
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/use-svg-pan-zoom.ts
@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef } from 'react';
+
+interface UseSvgPanZoomParams {
+  svgSelector: string;
+  viewportSelector: string;
+  renderedChart: string;
+  zoomStepLength?: number;
+}
+
+export const useSvgPanZoom = ({
+  svgSelector,
+  viewportSelector,
+  renderedChart,
+  zoomStepLength = 0.25,
+}: UseSvgPanZoomParams) => {
+  const panZoomTigerRef = useRef<any>(null);
+  useEffect(() => {
+    if (!renderedChart) {
+      return;
+    }
+
+    import('svg-pan-zoom').then(svgPanZoom => {
+      if (panZoomTigerRef.current) {
+        return;
+      }
+      const panZoomTiger = svgPanZoom.default(svgSelector, {
+        viewportSelector,
+        mouseWheelZoomEnabled: false,
+      });
+      panZoomTigerRef.current = panZoomTiger;
+    });
+  }, [renderedChart]);
+
+  const zoomIn = () => {
+    panZoomTigerRef.current?.zoom(
+      panZoomTigerRef.current?.getZoom() + zoomStepLength,
+    );
+  };
+
+  const zoomOut = () => {
+    panZoomTigerRef.current?.zoom(
+      panZoomTigerRef.current?.getZoom() - zoomStepLength,
+    );
+  };
+
+  const fit = () => {
+    panZoomTigerRef.current?.fit();
+    panZoomTigerRef.current?.center();
+  };
+
+  return {
+    zoomIn,
+    zoomOut,
+    fit,
+  };
+};
diff --git a/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/utils.ts b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/utils.ts
new file mode 100644
index 000000000..af36958df
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/mermaid-diagram/utils.ts
@@ -0,0 +1,73 @@
+import { toBase64 } from 'js-base64';
+
+const getFileName = (extension: string) =>
+  `mermaid-diagram-${new Date().getTime()}.${extension}`;
+
+const simulateDownload = (download: string, href: string): void => {
+  const a = document.createElement('a');
+  a.download = download;
+  a.href = href;
+  a.click();
+  a.remove();
+};
+
+const downloadImage = (context, image) => () => {
+  const { canvas } = context;
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  simulateDownload(
+    getFileName('png'),
+    canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'),
+  );
+};
+
+const getBase64SVG = (
+  svg: HTMLElement,
+  width?: number,
+  height?: number,
+): string => {
+  if (svg) {
+    // Prevents the SVG size of the interface from being changed
+    svg = svg.cloneNode(true) as HTMLElement;
+  }
+  height && svg?.setAttribute('height', `${height}px`);
+  width && svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage
+
+  const svgString = svg.outerHTML
+    .replaceAll('<br>', '<br/>')
+    .replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
+
+  return toBase64(`<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="./font-awesome.all.min.css" type="text/css"?>
+${svgString}`);
+};
+
+export const exportImage = async (svgSelector: string) => {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  const canvas = document.createElement('canvas');
+  const svg = document.querySelector<HTMLElement>(svgSelector);
+  if (!svg) {
+    return;
+  }
+
+  const box = svg.getBoundingClientRect();
+
+  const multiplier = 2;
+  canvas.width = box.width * multiplier;
+  canvas.height = box.height * multiplier;
+
+  const context = canvas.getContext('2d');
+  if (!context) {
+    throw new Error('context not found');
+  }
+
+  context.fillStyle = 'white';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  const image = new Image();
+  image.addEventListener('load', () => {
+    downloadImage(context, image)();
+  });
+  image.src = `data:image/svg+xml;base64,${getBase64SVG(svg, canvas.width, canvas.height)}`;
+  // Fallback to set panZoom to true after 2 seconds
+  // This is a workaround for the case when the image is not loaded
+};
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/basic-model-config-editor.tsx b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/basic-model-config-editor.tsx
index da043d419..2eaf2a754 100644
--- a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/basic-model-config-editor.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/basic-model-config-editor.tsx
@@ -1,10 +1,7 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import { useLatest } from 'ahooks';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { type Model } from '@cozeloop/api-schema/llm-manage';
 import {
   Form,
@@ -13,18 +10,20 @@ import {
   Typography,
 } from '@coze-arch/coze-design';
 
+import { ModelSelectWithObject } from '@/model-select';
+
 import { convertModelToModelConfig, type ModelConfigWithName } from './utils';
-import { ModelSelectWithObject } from './model-select';
 import { ModelConfigFormCommunity } from './model-config-form-community';
 
 export interface BasicModelConfigPopoverProps {
   models?: Model[] | undefined;
   value?: ModelConfigWithName;
   disabled?: boolean;
-  modelSelectProps?: SelectProps;
+  modelSelectProps?: SelectProps & { optionClassName?: string };
   defaultActiveFirstModel?: boolean;
   onChange?: (value?: ModelConfigWithName) => void;
   onModelChange?: (value?: Model) => void;
+  extra?: React.ReactNode;
 }
 
 export function BasicModelConfigEditor({
@@ -35,6 +34,7 @@ export function BasicModelConfigEditor({
   defaultActiveFirstModel = false,
   models = [],
   onModelChange,
+  extra,
 }: BasicModelConfigPopoverProps) {
   const formApi = useRef<FormApi<ModelConfigWithName>>();
   const [initValues, setInitValues] = useState<ModelConfigWithName>();
@@ -47,13 +47,14 @@ export function BasicModelConfigEditor({
     // 通过条件：设置了默认选中第一个模型，并且没有传入value，models不为空，没有加载过
     if (
       !defaultActiveFirstModel ||
-      value ||
+      Object.keys(value || {}).length > 0 ||
       loadedRef.current ||
       !models?.length
     ) {
       return;
     }
     const model = models[0];
+
     // 默认选中第一个模型
     if (model) {
       setSelectModel?.(model);
@@ -65,7 +66,7 @@ export function BasicModelConfigEditor({
       onModelChange?.(model);
     }
     loadedRef.current = true;
-  }, [value, models]);
+  }, [value, models, defaultActiveFirstModel]);
 
   // 处理初始加载时已传入值预览模型的逻辑
   useEffect(() => {
@@ -108,9 +109,9 @@ export function BasicModelConfigEditor({
     >
       <ModelSelectWithObject
         {...modelSelectProps}
-        className={classNames('grow', modelSelectProps?.className)}
+        className={classNames('grow mt-2', modelSelectProps?.className)}
         value={selectModel}
-        disabled={disabled}
+        disabled={disabled || modelSelectProps?.disabled}
         onChange={newModel => {
           setSelectModel(newModel);
           const modelConfig = newModel
@@ -125,10 +126,18 @@ export function BasicModelConfigEditor({
         modelList={models}
       />
 
-      <Typography.Title heading={6} style={{ marginTop: 12, marginBottom: 12 }}>
-        {I18n.t('parameter_config')}
-      </Typography.Title>
+      <Typography.Text
+        style={{
+          marginTop: 16,
+          marginBottom: 8,
+          fontWeight: 500,
+          display: 'block',
+        }}
+      >
+        参数配置
+      </Typography.Text>
       <ModelConfigFormCommunity model={selectModel} />
+      {extra}
     </Form>
   );
 }
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-config-form-community.tsx b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-config-form-community.tsx
index 5de54f0a3..98e6b0cea 100644
--- a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-config-form-community.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-config-form-community.tsx
@@ -1,9 +1,6 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable complexity */
 import { useMemo } from 'react';
 
-import { I18n } from '@cozeloop/i18n-adapter';
 import { InputSlider } from '@cozeloop/components';
 import { type ParamSchema, type Model } from '@cozeloop/api-schema/llm-manage';
 import { IconCozQuestionMarkCircle } from '@coze-arch/coze-design/icons';
@@ -14,8 +11,9 @@ import {
   Typography,
   withField,
 } from '@coze-arch/coze-design';
+import { MdBoxLazy } from '@coze-arch/bot-md-box-adapter/lazy';
 
-import { DEFAULT_MAX_TOKENS } from '@/consts';
+import { DEFAULT_MAX_TOKENS, modelConfigLabelMap } from '@/consts';
 
 import { getDefaultModelConfig } from './utils';
 
@@ -42,14 +40,21 @@ export const getInputSliderConfig = (
     label: {
       text: (
         <Typography.Text>
-          {param?.label || I18n.unsafeT(param?.name || '')}
+          {param?.label
+            ? param?.label
+            : modelConfigLabelMap[param?.name || ''] || ''}
         </Typography.Text>
       ),
-      extra: (
-        <Tooltip content={param?.desc} theme="dark">
-          <IconCozQuestionMarkCircle />
+      extra: param?.desc ? (
+        <Tooltip
+          content={
+            <MdBoxLazy markDown={param?.desc || ''} style={{ color: '#fff' }} />
+          }
+          theme="dark"
+        >
+          <IconCozQuestionMarkCircle className="text-[var(--coz-fg-secondary)] hover:text-[var(--coz-fg-primary)] cursor-pointer" />
         </Tooltip>
-      ),
+      ) : null,
     },
   };
 };
@@ -74,56 +79,62 @@ export function ModelConfigFormCommunity({
     <>
       {paramsFields.includes('max_tokens') ? (
         <FormInputSlider
-          label={I18n.t('max_tokens')}
+          label="最大回复长度"
           {...getInputSliderConfig('max_tokens', paramSchemas)}
           field="max_tokens"
           labelPosition="left"
+          fieldClassName="!py-[4px]"
         />
       ) : null}
       {paramsFields.includes('temperature') ? (
         <FormInputSlider
-          label={I18n.t('temperature')}
+          label="生成随机性"
           {...getInputSliderConfig('temperature', paramSchemas)}
           field="temperature"
           labelPosition="left"
           step={0.01}
           defaultValue={defaultValues.temperature}
+          fieldClassName="!py-[4px]"
         />
       ) : null}
       {paramsFields.includes('top_p') ? (
         <FormInputSlider
-          label={I18n.t('top_p')}
+          label="Top P"
           {...getInputSliderConfig('top_p', paramSchemas)}
           field="top_p"
           labelPosition="left"
           step={0.01}
+          fieldClassName="!py-[4px]"
         />
       ) : null}
       {paramsFields.includes('top_k') ? (
         <FormInputSlider
-          label={I18n.t('top_k')}
+          label="Top K"
           {...getInputSliderConfig('top_k', paramSchemas)}
           field="top_k"
           labelPosition="left"
           step={1}
+          fieldClassName="!py-[4px]"
         />
       ) : null}
       {paramsFields.includes('frequency_penalty') ? (
         <FormInputSlider
-          label={I18n.t('frequency_penalty')}
+          label="Frequency Penalty"
           {...getInputSliderConfig('frequency_penalty', paramSchemas)}
           field="frequency_penalty"
           labelPosition="left"
           step={0.01}
+          fieldClassName="!py-[4px]"
         />
       ) : null}
       {paramsFields.includes('presence_penalty') ? (
         <FormInputSlider
-          label={I18n.t('presence_penalty')}
+          label="Presence Penalty"
           {...getInputSliderConfig('presence_penalty', paramSchemas)}
           field="presence_penalty"
           labelPosition="left"
           step={0.01}
+          fieldClassName="!py-[4px]"
         />
       ) : null}
       {paramsFields.includes('json_mode') ? (
@@ -132,6 +143,7 @@ export function ModelConfigFormCommunity({
           {...getInputSliderConfig('json_mode', paramSchemas)}
           labelPosition="left"
           field="json_mode"
+          fieldClassName="!py-[4px]"
         />
       ) : null}
     </>
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-select.tsx b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-select.tsx
deleted file mode 100644
index 0c4376260..000000000
--- a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/model-select.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-import { useMemo } from 'react';
-
-import { I18n } from '@cozeloop/i18n-adapter';
-import { type Model } from '@cozeloop/api-schema/llm-manage';
-import { Select, type SelectProps } from '@coze-arch/coze-design';
-
-export interface ModelSelectOption {
-  label: React.ReactNode;
-  value: string | number;
-  model: Model;
-}
-
-function getOption(model: Model) {
-  const option: ModelSelectOption = {
-    label: model.name ?? '',
-    value: model.model_id ?? '',
-    model,
-  };
-  return option;
-}
-
-export function ModelSelectWithObject(
-  props: Omit<SelectProps, 'value' | 'onChange'> & {
-    value?: Model;
-    onChange?: (model: Model | undefined) => void;
-    modelList?: Model[];
-  },
-) {
-  const { value, onChange, modelList = [] } = props;
-
-  const optionList = useMemo(() => modelList?.map(getOption), [modelList]);
-
-  const val = useMemo(() => (value ? getOption(value) : undefined), [value]);
-
-  return (
-    <Select
-      placeholder={I18n.t('please_select', { field: I18n.t('model') })}
-      {...props}
-      optionList={optionList}
-      // 使value为option对象，不能去掉
-      onChangeWithObject={true}
-      value={val}
-      onChange={newVal => {
-        const option = newVal as ModelSelectOption;
-        onChange?.(option.model);
-      }}
-    />
-  );
-}
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor-query.tsx b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor-query.tsx
index e8b139be9..8d6787c1b 100644
--- a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor-query.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor-query.tsx
@@ -1,9 +1,4 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-import { useRequest } from 'ahooks';
-import { useSpace } from '@cozeloop/biz-hooks-adapter';
-import { Scenario } from '@cozeloop/api-schema/llm-manage';
-import { LlmManageApi } from '@cozeloop/api-schema';
+import { useModelList, useSpace } from '@cozeloop/biz-hooks-adapter';
 
 import {
   type ModelConfigPopoverProps,
@@ -15,15 +10,7 @@ export function PopoverModelConfigEditorQuery(
 ) {
   const { spaceID } = useSpace();
 
-  const service = useRequest(async () => {
-    const res = await LlmManageApi.ListModels({
-      workspace_id: spaceID,
-      page_size: 100,
-      page_token: '0',
-      scenario: Scenario.scenario_evaluator,
-    });
-    return { models: res?.models };
-  });
+  const service = useModelList(spaceID, props.scenario);
 
   return <PopoverModelConfigEditor {...props} models={service.data?.models} />;
 }
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor.tsx b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor.tsx
index e0ba5fa91..6c1357e57 100644
--- a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/popover-model-config-editor.tsx
@@ -1,11 +1,8 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { type CSSProperties, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import { useLatest } from 'ahooks';
-import { I18n } from '@cozeloop/i18n-adapter';
-import { type Model } from '@cozeloop/api-schema/llm-manage';
+import { type Scenario, type Model } from '@cozeloop/api-schema/llm-manage';
 import {
   Form,
   type FormApi,
@@ -16,8 +13,9 @@ import {
   Typography,
 } from '@coze-arch/coze-design';
 
+import { ModelSelectWithObject } from '@/model-select';
+
 import { convertModelToModelConfig, type ModelConfigWithName } from './utils';
-import { ModelSelectWithObject } from './model-select';
 import { ModelConfigFormCommunity } from './model-config-form-community';
 
 export interface ModelConfigPopoverProps {
@@ -30,6 +28,8 @@ export interface ModelConfigPopoverProps {
     wrapStyle?: CSSProperties;
   };
   defaultActiveFirstModel?: boolean;
+  /** 使用场景 */
+  scenario?: Scenario;
   onChange?: (value?: ModelConfigWithName) => void;
   renderDisplayContent?: (
     model?: Model,
@@ -117,7 +117,7 @@ export function PopoverModelConfigEditor({
       content={
         <div className="pt-1 px-4 pb-4" style={{ width: 496 }}>
           <Form<ModelConfigWithName>
-            labelWidth={120}
+            labelWidth={140}
             // 有值时value生效，否则 initValues 生效
             initValues={value || initValues}
             onValueChange={values => {
@@ -128,7 +128,7 @@ export function PopoverModelConfigEditor({
           >
             <Space className="py-0 flex">
               <Typography.Title heading={6} style={{ minWidth: 120 }}>
-                {I18n.t('model_selection')}
+                模型选择
               </Typography.Title>
               <ModelSelectWithObject
                 {...modelSelectProps}
@@ -153,7 +153,7 @@ export function PopoverModelConfigEditor({
               heading={6}
               style={{ marginTop: 12, marginBottom: 12 }}
             >
-              {I18n.t('parameter_config')}
+              参数配置
             </Typography.Title>
             <ModelConfigFormCommunity model={selectModel} />
           </Form>
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/utils.ts b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/utils.ts
index 00a28e182..e2621f323 100644
--- a/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/utils.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/model-config-editor-community/utils.ts
@@ -1,7 +1,5 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-import { type Model } from '@cozeloop/api-schema/llm-manage';
 import { type ModelConfig } from '@cozeloop/api-schema/prompt';
+import { type Model } from '@cozeloop/api-schema/llm-manage';
 
 import { DEFAULT_MAX_TOKENS } from '@/consts';
 
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-config-editor/model-config-form.tsx b/frontend/packages/cozeloop/prompt-components/src/model-config-editor/model-config-form.tsx
new file mode 100644
index 000000000..44586ea57
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/model-config-editor/model-config-form.tsx
@@ -0,0 +1,126 @@
+import { isUndefined } from 'lodash-es';
+import { InputSlider } from '@cozeloop/components';
+import { IconCozQuestionMarkCircle } from '@coze-arch/coze-design/icons';
+import {
+  Form,
+  type LabelProps,
+  Tooltip,
+  Typography,
+  withField,
+} from '@coze-arch/coze-design';
+import { MdBoxLazy } from '@coze-arch/bot-md-box-adapter/lazy';
+
+import { DEFAULT_MAX_TOKENS, modelConfigLabelMap } from '@/consts';
+
+import { type Model, type ModelParam } from '../model-types';
+
+export const convertInt64ToNumber = (v?: Int64) => {
+  if (v !== undefined) {
+    return Number(v);
+  } else {
+    return undefined;
+  }
+};
+
+export const getInputSliderConfig = (
+  key: string,
+  modelParams: ModelParam[],
+): {
+  min?: number;
+  max?: number;
+  defaultValue?: number;
+  label?: React.ReactNode | LabelProps;
+} => {
+  const param = modelParams.find(item => item.name === key);
+  const max = key === 'max_tokens' ? DEFAULT_MAX_TOKENS : 0;
+
+  return {
+    min: Number(param?.min || 0),
+    max: Math.max(Number(param?.max || 1), max),
+    defaultValue: Number(param?.defaultVal || max),
+    label: {
+      text: (
+        <Typography.Text>
+          {param?.name ? modelConfigLabelMap[param.name] || '' : ''}
+        </Typography.Text>
+      ),
+      extra: (
+        <Tooltip
+          content={
+            <MdBoxLazy className="!text-white" markDown={param?.desc || ''} />
+          }
+          theme="dark"
+        >
+          <IconCozQuestionMarkCircle />
+        </Tooltip>
+      ),
+    },
+  };
+};
+
+const FormInputSlider = withField(InputSlider);
+export function ModelConfigForm({ model }: { model?: Model }) {
+  if (!model) {
+    return null;
+  }
+  const modelAbility = model?.ability;
+  const modelParams = modelAbility?.modelParams || [];
+  const defaultRuntimeParam = model?.defaultRuntimeParam;
+  return (
+    <>
+      <FormInputSlider
+        field="max_tokens"
+        labelPosition="left"
+        {...getInputSliderConfig('max_tokens', modelParams)}
+        label={{
+          text: <Typography.Text>最大回复长度</Typography.Text>,
+          extra: (
+            <Tooltip
+              content={
+                <MdBoxLazy
+                  className="!text-white"
+                  markDown={
+                    '- **max_tokens**: 控制模型输出的 Tokens 长度上限。通常 100 Tokens 约等于 150 个中文汉字。'
+                  }
+                />
+              }
+              theme="dark"
+            >
+              <IconCozQuestionMarkCircle />
+            </Tooltip>
+          ),
+        }}
+      />
+
+      {isUndefined(defaultRuntimeParam?.temperature) ? null : (
+        <FormInputSlider
+          field="temperature"
+          labelPosition="left"
+          {...getInputSliderConfig('temperature', modelParams)}
+          step={0.01}
+        />
+      )}
+
+      {isUndefined(defaultRuntimeParam?.topP) ? null : (
+        <FormInputSlider
+          field="top_p"
+          labelPosition="left"
+          label={{
+            text: <Typography.Text>Top P</Typography.Text>,
+          }}
+          {...getInputSliderConfig('top_p', modelParams)}
+          step={0.01}
+        />
+      )}
+      {modelAbility?.jsonModeEnabled ? (
+        <Form.Switch
+          labelPosition="left"
+          label={{
+            text: <Typography.Text>JSON Mode</Typography.Text>,
+          }}
+          field="json_mode"
+        />
+      ) : null}
+    </>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-select/index.module.less b/frontend/packages/cozeloop/prompt-components/src/model-select/index.module.less
new file mode 100644
index 000000000..f12570901
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/model-select/index.module.less
@@ -0,0 +1,25 @@
+/* stylelint-disable declaration-no-important */
+.model-select-dropdown{
+  :global{
+    .semi-select-option-list{
+      max-height: 390px !important;
+    }
+
+    .semi-select-group{
+      padding-left: 16px !important;
+    }
+
+    .coz-select-option-item{
+      background: transparent !important;
+    }
+  }
+}
+
+.model-select{
+  :global{
+    .semi-select-suffix{
+      flex-shrink: 0;
+      padding-left: 4px;
+    }
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-select/index.tsx b/frontend/packages/cozeloop/prompt-components/src/model-select/index.tsx
new file mode 100644
index 000000000..da786e86f
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/model-select/index.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useMemo } from 'react';
+
+import { groupBy } from 'lodash-es';
+import { type Model } from '@cozeloop/api-schema/llm-manage';
+import {
+  Avatar,
+  Select,
+  Typography,
+  type SelectProps,
+} from '@coze-arch/coze-design';
+
+import { type ModelItemProps, ModelOption } from './model-option';
+
+export interface ModelSelectOption {
+  label: React.ReactNode;
+  value: string | number;
+  model: Model;
+}
+
+function getOption(model: Model) {
+  const option: ModelSelectOption = {
+    label: model.name ?? '',
+    value: model.model_id ?? '',
+    model,
+  };
+  return option;
+}
+
+function ModelSelectItem({ item }: { item: ModelItemProps }) {
+  return (
+    <div className="flex items-center w-full gap-1">
+      {item?.series?.icon ? (
+        <div className={'overflow-hidden flex-shrink-0 mr-[8px]'}>
+          <Avatar
+            src={item?.series?.icon}
+            shape="square"
+            size="extra-extra-small"
+          />
+        </div>
+      ) : null}
+      <Typography.Text
+        style={{
+          maxWidth: '400px',
+          fontSize: '13px',
+        }}
+        ellipsis={{ showTooltip: { opts: { theme: 'dark' } } }}
+      >
+        {item?.name}
+      </Typography.Text>
+    </div>
+  );
+}
+
+export function ModelSelectWithObject(
+  props: Omit<SelectProps, 'value' | 'onChange'> & {
+    optionClassName?: string;
+    value?: ModelItemProps;
+    onChange?: (model: ModelItemProps | undefined) => void;
+    modelList?: ModelItemProps[];
+    defaultSelectFirstModel?: boolean;
+  },
+) {
+  const {
+    value,
+    onChange,
+    modelList = [],
+    optionClassName,
+    defaultSelectFirstModel = false,
+  } = props;
+
+  const { modelGroups, modelOptions, hasSeries } = useMemo(() => {
+    const hasSeriesFlag = modelList.some(model => model?.series?.name);
+
+    if (!hasSeriesFlag) {
+      return {
+        modelOptions: modelList,
+        hasSeries: hasSeriesFlag,
+        modelGroups: [],
+      };
+    }
+
+    const modelSeriesGroups = groupBy(modelList, model => model?.series?.name);
+
+    const groupedModels = Object.values(modelSeriesGroups).filter(
+      (group): group is ModelItemProps[] => !!group?.length,
+    );
+
+    return {
+      modelGroups: groupedModels,
+      hasSeries: hasSeriesFlag,
+      modelOptions: modelList,
+    };
+  }, [modelList]);
+
+  const val = useMemo(() => (value ? getOption(value) : undefined), [value]);
+
+  useEffect(() => {
+    if (!value && defaultSelectFirstModel && modelList?.length) {
+      onChange?.(modelList?.[0]);
+    }
+  }, [modelList, defaultSelectFirstModel, value]);
+
+  return (
+    <Select
+      key={hasSeries ? 'series' : 'normal'}
+      placeholder="请选择模型"
+      {...props}
+      // 使value为option对象，不能去掉
+      onChangeWithObject={true}
+      value={val}
+      onChange={newVal => {
+        const option = newVal as ModelSelectOption;
+        onChange?.(option.model);
+      }}
+      renderSelectedItem={item => (
+        <ModelSelectItem item={(item as ModelSelectOption).model || value} />
+      )}
+      showTick={!hasSeries}
+      filter={(input, option) => {
+        if (input && option?.model) {
+          const item = option.model;
+          return item?.name?.includes(input);
+        }
+        return true;
+      }}
+    >
+      {hasSeries
+        ? modelGroups.map(group => (
+            <Select.OptGroup
+              key={group[0]?.series?.name}
+              label={`${group[0]?.series?.name} | ${
+                group[0]?.series?.vendor
+                  ? `由${group[0]?.series?.vendor}提供`
+                  : ''
+              }`}
+            >
+              {group.map(item => (
+                <Select.Option
+                  key={item?.model_id}
+                  value={item?.model_id}
+                  model={item}
+                  disabled={item.disabled}
+                >
+                  <ModelOption
+                    model={item}
+                    selected={value?.model_id === item.model_id}
+                    disabled={item.disabled}
+                    className={optionClassName}
+                  />
+                </Select.Option>
+              ))}
+            </Select.OptGroup>
+          ))
+        : modelOptions.map(model => (
+            <Select.Option
+              key={model.model_id}
+              value={model.model_id}
+              model={model}
+            >
+              {model.name}
+            </Select.Option>
+          ))}
+    </Select>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-select/model-option-group/index.tsx b/frontend/packages/cozeloop/prompt-components/src/model-select/model-option-group/index.tsx
new file mode 100644
index 000000000..682c32eab
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/model-select/model-option-group/index.tsx
@@ -0,0 +1,68 @@
+import { type PropsWithChildren } from 'react';
+
+import cls from 'classnames';
+import {
+  IconCozQuestionMarkCircle,
+  IconCozStarFill,
+} from '@coze-arch/coze-design/icons';
+import { Avatar, Divider, Tooltip } from '@coze-arch/coze-design';
+
+export type ModelOptionGroupProps =
+  | {
+      /** 新模型专区 */
+      type: 'new';
+      seriesName?: string;
+      tooltip?: string;
+    }
+  | {
+      /** 普通系列模型 */
+      type?: 'normal';
+      icon: string;
+      desc: string;
+      seriesName?: string;
+      tooltip?: string;
+    };
+
+export function ModelOptionGroup(
+  props: PropsWithChildren<ModelOptionGroupProps>,
+) {
+  const questionMark = props?.tooltip ? (
+    <Tooltip content={props?.tooltip} theme="dark">
+      <IconCozQuestionMarkCircle className="cursor-pointer coz-fg-secondary" />
+    </Tooltip>
+  ) : null;
+  return (
+    <div className="pb-[2px]">
+      {props.type === 'new' ? (
+        <div className="flex items-center gap-[4px] coz-fg-hglt">
+          <IconCozStarFill />
+          <span className="text-[12px] leading-[16px]">{props.seriesName}</span>
+          {questionMark}
+        </div>
+      ) : (
+        <div className="flex items-center gap-[6px]">
+          <Avatar
+            shape="square"
+            className="w-[14px] h-[14px] rounded-[3px] !cursor-default border border-solid coz-stroke-primary"
+            src={props.icon}
+          />
+          <div
+            className={cls(
+              'flex items-center gap-[4px]',
+              'text-[12px] leading-[16px]',
+            )}
+          >
+            <span className="coz-fg-secondary">{props.seriesName}</span>
+            {questionMark}
+            {props.desc ? (
+              <>
+                <Divider layout="vertical" />
+                <span className="coz-fg-dim">{props.desc}</span>
+              </>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.module.less b/frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.module.less
new file mode 100644
index 000000000..890a27115
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.module.less
@@ -0,0 +1,33 @@
+/* stylelint-disable declaration-no-important */
+
+.model-option {
+    &:hover{
+        background-color: rgba(var(--coze-bg-5), var(--coze-bg-5-alpha));
+    }
+
+    &:last-of-type,
+    &.model-option_selected,
+    &:hover,
+    &:has(+ &.model-option_selected),
+    &:has(+ &:hover) {
+        .model-info-border {
+            border-color: transparent;
+        }
+    }
+
+    // UI 要改 coze design 默认样式，无奈
+        :global(.coz-tag.coz-tag-mini) {
+        padding-right: 3px;
+        padding-left: 3px;
+        font-weight: 500;
+    }
+}
+
+.model-option_selected{
+    background-color: rgba(var(--coze-brand-1), var(--coze-brand-1-alpha));
+    border: 0;
+
+    &:hover{
+        background-color: rgba(var(--coze-brand-2), var(--coze-brand-2-alpha)) !important;
+    }
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.tsx b/frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.tsx
new file mode 100644
index 000000000..00816a149
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/model-select/model-option/index.tsx
@@ -0,0 +1,215 @@
+import { useRef } from 'react';
+
+import cls from 'classnames';
+import { useHover } from 'ahooks';
+import { type Model } from '@cozeloop/api-schema/llm-manage';
+import { IconCozDiamondFill } from '@coze-arch/coze-design/icons';
+import {
+  Avatar,
+  Space,
+  Tag,
+  Tooltip,
+  Typography,
+} from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+export interface ModelItemProps extends Model {
+  series?: {
+    /** series name */
+    name?: string;
+    /** series icon url */
+    icon?: string;
+    /** vendor name */
+    vendor?: string;
+  };
+  /** model icon url */
+  icon?: string;
+  /** model tags */
+  tags?: Array<string>;
+  disabled?: boolean;
+}
+
+export type ModelOptionProps = {
+  model: ModelItemProps;
+  selected?: boolean;
+  disabled?: boolean;
+  className?: string;
+  /** 返回是否切换成功 */
+  onClick?: () => boolean;
+} & (
+  | {
+      enableConfig?: false;
+    }
+  | {
+      enableConfig: true;
+      onConfigClick: () => void;
+    }
+) &
+  (
+    | {
+        enableJumpDetail?: false;
+      }
+    | {
+        enableJumpDetail: true;
+        /**
+         * 点击跳转模型管理页面
+         *
+         * 因为该组件定位是纯 UI 组件，且不同模块 space id 获取的方式不尽相同，因此跳转行为和 url 的拼接就不内置了
+         */
+        onDetailClick: (modelId: string) => void;
+      }
+  );
+
+export function ModelOption({
+  model,
+  selected,
+  disabled,
+  onClick,
+  className,
+  ...props
+}: ModelOptionProps) {
+  /** 这个 ref 纯粹为了判断是否 hover */
+  const ref = useRef<HTMLElement>(null);
+  const isHovering = useHover(ref);
+
+  const modelTags = model?.tags || [];
+
+  const renderOverflow = (items: string[]) =>
+    items?.length ? (
+      <Tooltip
+        content={
+          <Space wrap spacing={3}>
+            {items?.map(item => <Tag>{item}</Tag>)}
+          </Space>
+        }
+      >
+        <Tag
+          style={{ flex: '0 0 auto' }}
+          size="mini"
+          color="primary"
+          className="!bg-transparent !border border-solid"
+        >
+          +{items.length}
+        </Tag>
+      </Tooltip>
+    ) : null;
+
+  return (
+    <article
+      ref={ref}
+      className={cls(
+        'pl-[16px] pr-[12px] w-full relative',
+        'flex gap-[16px] items-center rounded-[12px]',
+        'min-w-[480px] max-w-[570px]',
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        styles['model-option'],
+        { [styles['model-option_selected']]: selected },
+        className,
+      )}
+      onClick={() => {
+        onClick?.();
+      }}
+    >
+      <Avatar
+        className="shrink-0 rounded-[6px] border border-solid coz-stroke-primary"
+        shape="square"
+        src={model.series?.icon}
+        size="default"
+      />
+      <div
+        className={cls(
+          'h-[70px] py-[14px] w-full',
+          'flex flex-col overflow-hidden',
+          'border-0 border-b border-solid coz-stroke-primary',
+          styles['model-info-border'],
+        )}
+        style={
+          isHovering
+            ? {
+                mask: calcMaskStyle([
+                  props.enableConfig,
+                  props.enableJumpDetail,
+                ]),
+              }
+            : undefined
+        }
+      >
+        <div className="w-full flex items-center gap-[6px] overflow-hidden">
+          <Typography.Title fontSize="14px" ellipsis={{ showTooltip: true }}>
+            {model.name}
+          </Typography.Title>
+          <div className="shrink-0 flex gap-[6px]">
+            {disabled ? (
+              <div className="h-[16px] leading-[16px]">
+                <IconCozDiamondFill className="coz-fg-hglt text-[12px]" />
+              </div>
+            ) : null}
+            {/* {model.commercialModelStatusDetail?.isNewModel ? (
+              <Tooltip content="Pro 版用户专享" theme="dark">
+                <Tag size="mini" color="brand">
+                  新模型
+                </Tag>
+              </Tooltip>
+            ) : null}
+            {model.commercialModelStatusDetail?.isAdvancedModel ? (
+              <Tooltip content="专业版用户专享" theme="dark">
+                <Tag size="mini" color="blue">
+                  高级
+                </Tag>
+              </Tooltip>
+            ) : null} */}
+
+            {modelTags?.length ? (
+              <Space spacing={4}>
+                {modelTags.slice(0, 3).map(item => (
+                  <Tag
+                    key={item}
+                    size="mini"
+                    color="primary"
+                    className="!bg-transparent !border border-solid coz-stroke-plus !rounded-[4px]"
+                  >
+                    {item}
+                  </Tag>
+                ))}
+                {renderOverflow(modelTags.slice(3))}
+              </Space>
+            ) : null}
+          </div>
+        </div>
+        <Typography.Text
+          className="mt-[4px] text-[12px] leading-[16px] coz-fg-secondary"
+          ellipsis={{ showTooltip: { opts: { theme: 'dark' } } }}
+        >
+          {model.desc}
+        </Typography.Text>
+      </div>
+    </article>
+  );
+}
+
+/**
+ * hover 展示若干图标（比如跳转模型详情页、详细配置）时，要对图标下的内容有个渐变遮罩效果
+ * 该方法用于计算遮罩样式
+ */
+function calcMaskStyle(buttonVisible: Array<boolean | undefined>) {
+  const btnNum = buttonVisible.reduce(
+    (prevNum, showBtn) => prevNum + (showBtn ? 1 : 0),
+    0,
+  );
+  if (btnNum === 0) {
+    return 'none';
+  }
+
+  const BTN_WIDTH = 32;
+  const BTN_GAP = 3;
+  /** 不随按钮数量变化的遮罩固定宽度 */
+  const PRESET_PADDING = 16;
+  /** 遮罩的渐变宽度 */
+  const MASK_WIDTH = 24;
+
+  const gradientStart =
+    btnNum * BTN_WIDTH + (btnNum - 1) * BTN_GAP + PRESET_PADDING;
+  const gradientEnd = gradientStart + MASK_WIDTH;
+  return `linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0) ${gradientStart}px, #fff ${gradientEnd}px)`;
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/model-types.ts b/frontend/packages/cozeloop/prompt-components/src/model-types.ts
new file mode 100644
index 000000000..50373feec
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/model-types.ts
@@ -0,0 +1,602 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+export type Int64 = string | number;
+
+export enum ByteTreeNodeResourceProvider {
+  TCE = 1,
+  TCC = 2,
+  Bernard = 3,
+}
+
+export enum CommercialModelStatus {
+  Online = 1,
+  Offline = 2,
+  Deleted = 3,
+  FineTuneInQueue = 4,
+  FineTuneRunning = 5,
+  FineTuneFailed = 6,
+  FineTuneTerminated = 7,
+}
+
+export enum DataImportMode {
+  Undefined = 0,
+  /** 追加 */
+  Append = 1,
+  /** 覆盖 */
+  Overwrite = 2,
+}
+
+export enum DataSourceType {
+  Undefined = 0,
+  TOS = 1,
+}
+
+export enum Family {
+  Undefined = 0,
+  GPT = 1,
+  Seed = 2,
+  Gemini = 3,
+  Claude = 4,
+  Ernie = 5,
+  Baichuan = 6,
+  Qwen = 7,
+  GLM = 8,
+  SkyLark = 9,
+  Moonshot = 10,
+  Minimax = 11,
+  Doubao = 12,
+  Baichuan2 = 13,
+  DeepSeekV2 = 14,
+  DeepSeekCoderV2 = 15,
+  DeepseekCoder = 16,
+  InternLM2_5 = 17,
+  Qwen2 = 18,
+  Qwen2_5 = 19,
+  Qwen2_5_Coder = 20,
+  MiniCPM = 21,
+  MiniCPM3 = 22,
+  ChatGLM3 = 23,
+  Mistral = 24,
+  Gemma = 25,
+  Gemma2 = 26,
+  InternVL2 = 27,
+  InternVL2_5 = 28,
+  DeepSeekV3 = 29,
+}
+
+export enum IDC {
+  HL = 1,
+  LF = 2,
+  LQ = 3,
+  YG = 4,
+  GL = 5,
+  MALIVA = 101,
+  SG1 = 201,
+  MY = 202,
+  MY2 = 203,
+  MYCISB = 204,
+}
+
+export enum MerlinFramework {
+  LLMServerPublic = 1,
+  Laplace = 2,
+}
+
+export enum MerlinLLMInterface {
+  MatxInference = 1,
+}
+
+export enum MerlinQuotaPoolType {
+  /** 稳定资源 */
+  Default = 0,
+  /** 潮汐资源 */
+  Hybrid = 1,
+  /** 常混资源 */
+  HybridShare = 2,
+  /** 第三方资源ali */
+  ALI = 3,
+  /** 第三方资源hw */
+  HW = 4,
+}
+
+export enum ModelFilterKey {
+  ModelType = 1,
+  ModelUserRight = 2,
+  ModelFeature = 3,
+  ModelFunction = 4,
+  ModelScenario = 5,
+  Custom = 20,
+}
+
+export enum ModelFilterScene {
+  Default = 0,
+  EvalFunctionCall = 1,
+}
+
+export enum ModelParamType {
+  Unknown = 0,
+  Float = 1,
+  Int = 2,
+  Boolean = 3,
+  String = 4,
+}
+
+export enum ModelStatus {
+  Undefined = 0,
+  /** 健康可用 */
+  Available = 1,
+  /** 部署中 */
+  Deploying = 2,
+  /** 不可用（已下线） */
+  Unavailable = 3,
+  /** 下线中 */
+  Offlining = 4,
+}
+
+export enum Provider {
+  /** GPT OpenAPI平台 */
+  GPTOpenAPI = 1,
+  /** 火山方舟 */
+  Maas = 2,
+  /** 暂时特指seed从bot_engine接入 */
+  BotEngine = 3,
+  /** merlin平台 */
+  Merlin = 4,
+  /** merlin-seed平台 */
+  MerlinSeed = 5,
+}
+
+export enum ProviderAccountType {
+  AKSK = 1,
+  APIKey = 2,
+}
+
+export enum Region {
+  CN = 1,
+  SG = 2,
+  US = 3,
+}
+
+export enum RuntimeCustomParamType {
+  Unknown = 0,
+  StringList = 1,
+  IntList = 2,
+  FloatList = 3,
+  String = 4,
+  Int = 5,
+  Float = 6,
+  Bool = 7,
+}
+
+export enum RuntimeHookType {
+  Unknown = 0,
+  MsgPreHook = 1,
+}
+
+export enum SftTaskBaseModelType {
+  Foundation = 0,
+  Custom = 1,
+}
+
+export enum SftTaskErrCode {
+  Default = 0,
+  /** 前2位代表错误分类，后4位代表具体错误
+10 通用错误 */
+  InternalErr = 100000,
+  /** 训练集上传到平台方时出错 */
+  TrainingSetUploadedErr = 100001,
+  /** 在平台方创建精调任务出错 */
+  CreateProviderSftTaskErr = 100002,
+  /** 20 Merlin任务实例整体报错 */
+  MerlinTaskInternalError = 200000,
+  /** gpu cpu mem 套餐配比错误 */
+  MerlinGpuCpuMemRatioBad = 200001,
+  /** 21 Merlin训练脚本主动上报的错误 */
+  MerlinReportedInternalErr = 210000,
+  MerlinOOM = 210001,
+  /** 没找到模型训练产物 */
+  MerlinNoModelGenerated = 210002,
+  /** 30 火山方舟任务失败
+方舟通用错误 */
+  MaaSInternalErr = 300000,
+  /** 验证集比例分割异常 */
+  MaaSValidationSetSplitErr = 300001,
+  /** 训练数据格式不符合预期 */
+  MaaSTrainingSetNoValid = 300002,
+  /** 业务方的火山账号没有开通模型服务 */
+  MaaSAccountModelServiceIsNotActivated = 300003,
+  /** 缺少必要的请求参数。请确认请求参数后重试。 */
+  MaaSRequiredParamMissing = 300004,
+  /** 请求参数值不合法。请检查参数值的正确性后重试。 */
+  MaaSRequestParamInvalid = 300005,
+  /** 对象的标签存在重复Key */
+  MaaSDuplicateTags = 300006,
+  /** 无法同时上传验证集和设置训练集取样为验证集百分比，不支持该操作 */
+  MaaSNotSupportedToConfigureValidationSetAndPercentage = 300007,
+  /** 您没有权限访问基础模型的配置，不支持该操作 */
+  MaaSNotPermittedToAccessModel = 300008,
+  /** 模型不支持该训练方法，不支持该操作 */
+  MaaSModelNotSupportTheTrainingMethod = 300009,
+  /** 基础模型的版本不支持该训练方法，不支持该操作 */
+  MaaSFoundationModelNotSupportTheTrainingMethod = 300010,
+  /** 您的账单已逾期，不支持该操作。请前往火山费用中心充值 */
+  MaaSAccountBalanceOverdue = 300011,
+  /** 未知错误，请稍后重试。如果多次尝试仍失败，请提交工单 */
+  MaaSUnknownErr = 300012,
+}
+
+export enum SftTaskHyperParamType {
+  Int = 1,
+  Float = 2,
+  String = 3,
+  Bool = 4,
+  Percentage = 5,
+}
+
+export enum SftTaskOutputExportType {
+  /** 导出到新模型 */
+  NewModel = 1,
+  /** 导出到已有模型 */
+  ExistModel = 2,
+}
+
+export enum SftTaskOutputStatus {
+  /** 未导出 */
+  Available = 1,
+  /** 已导出 */
+  Exported = 2,
+  /** 已过期 */
+  Expired = 3,
+  /** 导出中 */
+  Exporting = 4,
+  /** 导出失败 */
+  ExportFailed = 5,
+}
+
+export enum SftTaskRunEventType {
+  Undefined = 0,
+  ErrorOccured = 1,
+  UploadCkpt = 2,
+  ReportMetricsURL = 3,
+  ReportProgress = 5,
+  ReportTrainingStart = 6,
+  ReportTrainingFinished = 7,
+}
+
+export enum SftTaskStatusPhase {
+  Preprocessing = 0,
+  Queued = 1,
+  Deploying = 2,
+  Running = 3,
+  Completing = 4,
+  Completed = 5,
+  Terminating = 6,
+  Terminated = 7,
+  Failed = 8,
+}
+
+export enum SftTaskTrainingMethod {
+  LoRA = 1,
+  Full = 2,
+}
+
+export enum SftTaskTrainingType {
+  SftFineTuning = 1,
+}
+
+export enum SftTaskValidationSetType {
+  SplitFromTrainingSet = 1,
+}
+
+export enum TaskStatus {
+  Undefined = 0,
+  /** 正在初始化 */
+  Initializing = 1,
+  /** 正在运行 */
+  Running = 2,
+  /** 成功完成 */
+  Done = 3,
+  /** 失败 */
+  Failed = 4,
+  /** 手动终止 */
+  Terminated = 5,
+  /** 成功完成，但有错误 */
+  DoneWithError = 6,
+}
+
+export enum TrainingDataFileType {
+  Undefined = 0,
+  JSONL = 1,
+}
+
+export enum TrainingDatasetType {
+  Undefined = 0,
+  SFTChat = 1,
+  SFTFunctionCall = 2,
+  SFTMultiModalUnderstanding = 3,
+}
+
+export enum TrainingFileOpType {
+  Undefined = 0,
+  Get = 1,
+  Put = 2,
+}
+
+export enum UsageScenario {
+  /** 默认场景 */
+  Default = 1,
+  /** 评测场景 */
+  Evaluation = 2,
+  /** Prompt as a Service调用 */
+  PromptAsAService = 3,
+  /** AI打标 */
+  AIAnnotate = 4,
+  /** 质量分 */
+  AIScore = 5,
+  /** 数据标签 */
+  AITag = 6,
+}
+
+export enum ValidateStatus {
+  Pass = 1,
+  Failed = 2,
+  Skip = 3,
+}
+
+export enum VisibleMode {
+  /** 默认（仅模型所属空间可见） */
+  Default = 1,
+  /** 指定空间可见 */
+  Specified = 2,
+  /** 所有空间可见 */
+  All = 3,
+}
+
+export interface Ability {
+  /** 最大上下文长度 */
+  maxContextTokens?: Int64;
+  /** 最大输入长度 */
+  maxInputTokens?: Int64;
+  /** 最大输出长度 */
+  maxOutputTokens?: Int64;
+  /** 是否支持函数调用 */
+  functionCallEnabled?: boolean;
+  /** 是否支持JSON模式 */
+  jsonModeEnabled?: boolean;
+  /** 是否支持多模态 */
+  multiModalEnabled?: boolean;
+  /** 多模态能力配置 */
+  multiModalAbility?: MultiModalAbility;
+  /** 消息预处理hook */
+  messagePreHandleHook?: RuntimeHook;
+  /** 模型可用的参数配置，优先级高于原有的maxContextTokens/maxInputTokens/maxOutputTokens */
+  modelParams?: Array<ModelParam>;
+}
+
+export interface CommercialModelSeries {
+  iconUrl?: string;
+  modelVendor?: string;
+  seriesName?: string;
+}
+
+export interface CommercialModelStatusDetail {
+  isNewModel?: boolean;
+  isAdvancedModel?: boolean;
+}
+
+export interface GPTOpenAPIInfo {
+  apiBaseURL?: string;
+  apiVersion?: string;
+}
+
+export interface IDCDeployDetail {
+  deployID?: string;
+  /** 资源对应服务树节点 id */
+  byteNodeID?: string;
+  region?: string;
+  deviceType?: string;
+  deviceDisplayName?: string;
+  instance?: string;
+}
+
+export interface InstanceResourceOption {
+  cpus?: string;
+  /** 单位 GB */
+  mem?: string;
+  gpus?: string;
+}
+
+export interface MaasInfo {
+  host?: string;
+  region?: string;
+  /** v3 sdk */
+  baseURL?: string;
+  /** 精调模型任务的 ID */
+  customizationJobsID?: string;
+}
+
+export interface MerlinInfo {
+  psm?: string;
+  cluster?: string;
+  idcs?: Array<IDC>;
+  framework?: MerlinFramework;
+  instanceResourceOption?: InstanceResourceOption;
+  /** 资源配置 */
+  deployDetailM?: Record<IDC, IDCDeployDetail>;
+  /** 服务节点id */
+  byteTreeNodeID?: Int64;
+  /** 服务树路径 */
+  byteTreeNodePath?: string;
+  /** 服务详情链接 */
+  serviceDetailURL?: string;
+  /** LLM 接口信息 */
+  llmInterface?: MerlinLLMInterface;
+  /** 是否开启 vllm */
+  useVLLMServe?: boolean;
+  /** 调用 vllm 的 API 路径，仅开启 vllm 时使用 */
+  vllmAPIPath?: string;
+}
+
+export interface Model {
+  /** 模型id, 在商业化场景下可为空，如果为空则用identification+provider直接调用模型 */
+  id?: Int64;
+  /** 模型标识（name，endpoint，与各提供方对齐） */
+  identification?: string;
+  /** 展示名称 */
+  displayName?: string;
+  /** 模型描述 */
+  description?: string;
+  /** 模型家族 */
+  family?: Family;
+  /** 提供方 */
+  provider?: Provider;
+  /** 提供方信息 */
+  providerInfo?: ProviderInfo;
+  /** 是否为公共模型 */
+  isPublic?: boolean;
+  /** 可见性 */
+  visibility?: Visibility;
+  /** 所属空间id */
+  spaceID?: Int64;
+  /** 模型能力 */
+  ability?: Ability;
+  /** 默认运行时参数 */
+  defaultRuntimeParam?: RuntimeParam;
+  /** 创建人 */
+  createdBy?: string;
+  /** 更新人 */
+  updatedBy?: string;
+  /** 创建时间 */
+  createdAt?: Int64;
+  /** 更新时间 */
+  updatedAt?: Int64;
+  /** 编辑版本（用于解决多人同时更新问题） */
+  editVersion?: Int64;
+  modelStatus?: ModelStatus;
+  /** 模型提供方侧的 model id */
+  externalModelID?: string;
+  /** 从精调模型任务的产出中新建推理点产生的模型 */
+  sftTaskID?: Int64;
+  /** 模型版本 */
+  modelVersion?: string;
+  /** 模型头像 */
+  modelIcon?: string;
+  /** 模型公司 */
+  modelVendor?: string;
+  /** 模型真实名称（展示在vendor右侧，可能是豆包endpoint或其他厂商的模型名称） */
+  actualName?: string;
+  /** 模型标签 */
+  modelTags?: Array<string>;
+  /** 商业化模型状态 */
+  commercialModelStatus?: CommercialModelStatus;
+  /** 商业化模型状态详情 */
+  commercialModelStatusDetail?: CommercialModelStatusDetail;
+  /** 商业化模型系列 */
+  commercialModelSeries?: CommercialModelSeries;
+}
+
+export interface ModelParam {
+  name?: string;
+  label?: string;
+  desc?: string;
+  /** 类型： bool/int/float等 */
+  modelParamType?: ModelParamType;
+  min?: string;
+  max?: string;
+  defaultVal?: string;
+  /** 枚举 */
+  modelParamOptions?: Array<ModelParamOption>;
+}
+
+export interface ModelParamOption {
+  /** 展示值 */
+  label?: string;
+  /** 实际值 */
+  value?: string;
+}
+
+export interface MultiModalAbility {
+  /** [1, 99] 图片配置
+是否支持图片 */
+  imageEnabled?: boolean;
+  /** 是否支持二进制图片 */
+  binaryImageEnabled?: boolean;
+  /** 单张图片大小限制, 范围 [0, 20]MB */
+  maxImageSizeInMB?: number;
+  /** 最大图片数量, 范围 [-1, 100], -1 表示无限制 */
+  maxImageCount?: number;
+}
+
+export interface ProviderInfo {
+  gptOpenAPI?: GPTOpenAPIInfo;
+  maas?: MaasInfo;
+  merlin?: MerlinInfo;
+}
+
+export interface RuntimeCustomParam {
+  name?: string;
+  type?: RuntimeCustomParamType;
+  value?: string;
+}
+
+export interface RuntimeHook {
+  type?: RuntimeHookType;
+  url?: string;
+}
+
+export interface RuntimeParam {
+  /** 最大输出长度 */
+  maxTokens?: Int64;
+  temperature?: number;
+  topP?: number;
+  topK?: Int64;
+  jsonMode?: boolean;
+  /** 停止词, 值必须是json序列化后的字符串数组 */
+  stopWords?: string;
+  /** 运行时自定义参数 */
+  runtimeCustomParams?: Array<RuntimeCustomParam>;
+}
+
+export interface Visibility {
+  mode?: VisibleMode;
+  /** Mode为Specified有效，配置为除模型所属空间外的其他空间 */
+  spaceIDs?: Array<Int64>;
+}
+
+/** 模型配置数据 */
+export interface ModelConfig {
+  /** 模型ID */
+  id?: Int64;
+  /** 模型名称 */
+  name?: string;
+  /** 模型系列 */
+  model_class?: ModelClass;
+  temperature?: number;
+  max_tokens?: number;
+  top_k?: number;
+  top_p?: number;
+  json_mode?: boolean;
+  /** deprecated */
+  function_call_mode?: boolean;
+  presence_penalty?: number;
+  frequency_penalty?: number;
+  /** 模型提供方 */
+  provider?: Provider;
+  /** 模型提供方的模型唯一标识（应对saas无法传modelID的场景） */
+  provider_model_id?: string;
+  /** thinking参数 */
+  thinking?: ThinkingConfig;
+  /** 模型额外参数，会反序列化到具体调用模型的request中，优先级低于上述显式声明的参数 */
+  extra?: string;
+}
+
+export interface ThinkingConfig {
+  /** 是否开启 */
+  enabled?: boolean;
+  /** thinking内容的最大输出token */
+  budget_tokens?: Int64;
+}
+
+/* eslint-enable */
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-create/index.tsx b/frontend/packages/cozeloop/prompt-components/src/prompt-create/index.tsx
index 325c8e11d..aadf44844 100644
--- a/frontend/packages/cozeloop/prompt-components/src/prompt-create/index.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-create/index.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 import { useMemo, useRef } from 'react';
@@ -16,7 +14,6 @@ import {
   Modal,
   type FormApi,
 } from '@coze-arch/coze-design';
-import { I18n } from '@cozeloop/i18n-adapter';
 
 interface PromptCreateProps {
   visible: boolean;
@@ -120,12 +117,12 @@ export function PromptCreate({
 
   const modalTitle = useMemo(() => {
     if (isEdit) {
-      return I18n.t('edit_prompt');
+      return '编辑 Prompt';
     }
     if (isCopy) {
-      return I18n.t('create_copy');
+      return '创建副本';
     }
-    return I18n.t('create_prompt');
+    return '创建 Prompt';
   }, [isCopy, isEdit]);
 
   return (
@@ -134,13 +131,13 @@ export function PromptCreate({
       visible={visible}
       onCancel={onCancel}
       onOk={handleOk}
-      cancelText={I18n.t('Cancel')}
-      okText={I18n.t('confirm')}
+      cancelText="取消"
+      okText="确定"
       okButtonProps={{
         loading:
           createService.loading || updateService.loading || copyService.loading,
       }}
-      width={600}
+      width={900}
     >
       <Form<FormValueProps>
         getFormApi={api => (formApi.current = api)}
@@ -165,18 +162,15 @@ export function PromptCreate({
         <FormInput
           label="Prompt Key"
           field="prompt_key"
-          placeholder={I18n.t('please_input', { field: I18n.t('prompt_key') })}
+          placeholder="请输入 Prompt key"
           rules={[
-            {
-              required: true,
-              message: I18n.t('field_is_required', {
-                field: I18n.t('prompt_key'),
-              }),
-            },
+            { required: true, message: '请输入 Prompt Key' },
             {
               validator: (_rule, value) => {
                 if (value && !/^[a-zA-Z][a-zA-Z0-9_.]*$/.test(value)) {
-                  return new Error(I18n.t('prompt_key_format'));
+                  return new Error(
+                    '仅支持英文字母、数字、“_”、“.”，且仅支持英文字母开头',
+                  );
                 }
                 return true;
               },
@@ -187,23 +181,22 @@ export function PromptCreate({
           disabled={isEdit}
         />
         <FormInput
-          label={I18n.t('prompt_name')}
+          label="Prompt 名称"
           field="prompt_name"
-          placeholder={I18n.t('please_input', { field: I18n.t('prompt_name') })}
+          placeholder="请输入 Prompt 名称"
           rules={[
-            {
-              required: true,
-              message: I18n.t('field_is_required', {
-                field: I18n.t('prompt_name'),
-              }),
-            },
+            { required: true, message: '请输入 Prompt 名称' },
             {
               validator: (_rule, value) => {
                 if (value && !/^[\u4e00-\u9fa5a-zA-Z0-9_.-]+$/.test(value)) {
-                  return new Error(I18n.t('prompt_name_format'));
+                  return new Error(
+                    '仅支持英文字母、数字、中文，“-”，“_”，“.”，且仅支持英文字母、数字、中文开头',
+                  );
                 }
                 if (value && /^[_.-]/.test(value)) {
-                  return new Error(I18n.t('prompt_name_format'));
+                  return new Error(
+                    '仅支持英文字母、数字、中文，“-”，“_”，“.”，且仅支持英文字母、数字、中文开头',
+                  );
                 }
                 return true;
               },
@@ -213,11 +206,9 @@ export function PromptCreate({
           max={100}
         />
         <FormTextArea
-          label={I18n.t('prompt_description')}
+          label="Prompt 描述"
           field="prompt_description"
-          placeholder={I18n.t('please_input', {
-            field: I18n.t('prompt_description'),
-          })}
+          placeholder="请输入 Prompt 描述"
           maxCount={500}
           maxLength={500}
         />
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.module.less b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.module.less
index 8891e79ce..a282642ac 100644
--- a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.module.less
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable font-family-no-missing-generic-family-keyword */
 /* stylelint-disable declaration-no-important */
 .prompt-editor-container {
@@ -26,7 +24,7 @@
 
     border-bottom: 1px solid var(--Stroke-COZ-stroke-primary, rgba(82, 100, 154, 13%));
 
-    .drag {
+    .drag-btn {
       color: var(--coz-fg-dim);
 
       &:hover {
@@ -47,9 +45,14 @@
   input::placeholder {
     font-family: JetBrainsMonoBold !important;
     font-size: 13px !important;
+    line-height: 20px !important;
   }
 
   :global {
+    .cm-line{
+      font-size: 13px !important;
+      line-height: 20px !important;
+    }
     .cm-scroller {
       scrollbar-gutter: stable;
 
@@ -57,6 +60,10 @@
         visibility: hidden;
       }
     }
+
+    .coz-input.semi-input-wrapper:hover{
+      background: transparent;
+    }
   }
 
   &-active {
@@ -93,3 +100,15 @@
 .role-display {
   color: var(--Fg-COZ-fg-dim, rgba(55, 67, 106, 38%)) !important;
 }
+
+.full-screen {
+  position: fixed !important;
+  z-index: 1000;
+  inset: 0 !important;
+
+  width: 100% !important;
+  height: 100% !important;
+
+  background-color: var(--semi-color-bg-0);
+
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.tsx b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.tsx
index 2ba9e2656..fa3863122 100644
--- a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/index.tsx
@@ -1,26 +1,50 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable security/detect-non-literal-regexp */
+/* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
-import { forwardRef, type ReactNode, useState } from 'react';
+import { forwardRef, type ReactNode, useEffect, useRef, useState } from 'react';
 
 import cn from 'classnames';
-import { I18n } from '@cozeloop/i18n-adapter';
-import { type Message, Role, VariableType } from '@cozeloop/api-schema/prompt';
+import { TooltipWhenDisabled } from '@cozeloop/components';
+import {
+  type ContentPart,
+  ContentType,
+  type Message,
+  Role,
+} from '@cozeloop/api-schema/prompt';
+import { updateRegexpDecorations } from '@coze-editor/extension-regexp-decorator';
 import { IconCozHandle } from '@coze-arch/coze-design/icons';
-import { IconButton, Input, Space } from '@coze-arch/coze-design';
+import {
+  Icon,
+  IconButton,
+  Input,
+  Popconfirm,
+  Space,
+  Form,
+  FormTextArea,
+  type FormApi,
+  Typography,
+} from '@coze-arch/coze-design';
 
+import {
+  getMultimodalVariableText,
+  getPlaceholderErrorContent,
+  splitMultimodalContent,
+} from '@/utils/prompt';
 import { VARIABLE_MAX_LEN } from '@/consts';
+import { ReactComponent as ModalVariableIcon } from '@/assets/modal-variable.svg';
 
 import {
   PromptBasicEditor,
   type PromptBasicEditorRef,
   type PromptBasicEditorProps,
 } from '../basic-editor';
+import ModalVariableCompletion from './widgets/modal-variable';
 import { MessageTypeSelect } from './message-type-select';
 
 import styles from './index.module.less';
 
-export type PromptMessage<R = Role> = Omit<Message, 'role'> & {
+export type PromptMessage<R extends string | number> = Omit<Message, 'role'> & {
   role?: R;
   id?: string;
   key?: string;
@@ -37,9 +61,12 @@ type BasicEditorProps = Pick<
   | 'forbidVariables'
   | 'linePlaceholder'
   | 'isGoTemplate'
+  | 'customExtensions'
+  | 'canSearch'
+  | 'isJinja2Template'
 >;
 
-export interface PromptEditorProps<R extends string | number = Role>
+export interface PromptEditorProps<R extends string | number>
   extends BasicEditorProps {
   className?: string;
   message?: PromptMessage<R>;
@@ -51,10 +78,14 @@ export interface PromptEditorProps<R extends string | number = Role>
   messageTypeList?: Array<{ label: string; value: R }>;
   leftActionBtns?: ReactNode;
   rightActionBtns?: ReactNode;
+  hideActionWrap?: boolean;
+  isFullscreen?: boolean;
   placeholderRoleValue?: R;
   onMessageChange?: (v: PromptMessage<R>) => void;
   onMessageTypeChange?: (v: R) => void;
   children?: ReactNode;
+  modalVariableEnable?: boolean;
+  modalVariableBtnHidden?: boolean;
 }
 
 type PromptEditorType = <R extends string | number = Role>(
@@ -64,10 +95,12 @@ type PromptEditorType = <R extends string | number = Role>(
 ) => JSX.Element;
 
 export const PromptEditor = forwardRef(
-  <R extends string | number = Role>(
+  <R extends string | number>(
     props: PromptEditorProps<R>,
-    ref: React.ForwardedRef<PromptBasicEditorRef>,
+    ref?: React.ForwardedRef<PromptBasicEditorRef>,
   ) => {
+    const editorRef = ref ?? useRef<PromptBasicEditorRef>(null);
+
     const {
       className,
       message,
@@ -82,117 +115,271 @@ export const PromptEditor = forwardRef(
       messageTypeList,
       leftActionBtns,
       rightActionBtns,
+      hideActionWrap,
+      isFullscreen,
       placeholderRoleValue = Role.Placeholder as R,
+      modalVariableEnable,
       children,
+      modalVariableBtnHidden,
       ...rest
     } = props;
     const [editorActive, setEditorActive] = useState(false);
     const handleMessageContentChange = (v: string) => {
-      onMessageChange?.({ ...message, content: v });
+      const parts = splitMultimodalContent(v) as ContentPart[];
+      onMessageChange?.({ ...message, content: parts.length ? '' : v, parts });
     };
 
     const readonly = disabled || isDrag;
+    const [modalVariableVisible, setModalVariableVisible] = useState(false);
+    const [modalVariableCanAdd, setModalVariableCanAdd] = useState(false);
+    const formApiRef = useRef<FormApi>();
+
+    const defaultValue = message?.parts?.length
+      ? message?.parts
+          ?.map(it => {
+            if (it.type === ContentType.MultiPartVariable && it?.text) {
+              return getMultimodalVariableText(it.text);
+            }
+            return it.text;
+          })
+          .join('')
+      : message?.content;
+
+    const placeholderError = getPlaceholderErrorContent(
+      message as Message,
+      variables,
+    );
+
+    const handleModalVariableConfirm = () => {
+      const value = formApiRef.current?.getValues();
+      if (value?.content) {
+        setModalVariableVisible(false);
+        setModalVariableCanAdd(false);
+        const content = `<multimodal-variable>${value?.content}</multimodal-variable>`;
+        (editorRef as any)?.current?.insertText(content);
+      }
+    };
+
+    useEffect(() => {
+      const editor = (editorRef as any)?.current?.getEditor();
+      if (editor?.$view) {
+        updateRegexpDecorations(editor.$view);
+      }
+    }, [modalVariableEnable]);
 
     return (
-      <div
-        className={cn(
-          styles['prompt-editor-container'],
-          {
-            [styles['prompt-editor-container-active']]: editorActive,
-            [styles['prompt-editor-container-disabled']]: disabled,
-          },
-          className,
-        )}
-      >
-        <div className={styles.header}>
-          <Space spacing={4}>
-            {dragBtnHidden ? null : (
-              <IconButton
-                color="secondary"
-                size="mini"
-                icon={<IconCozHandle fontSize={14} />}
-                className={cn('drag !w-[14px]', styles.drag)}
-              />
-            )}
-            {message?.role ? (
-              <MessageTypeSelect<R>
-                value={message.role}
-                onChange={onMessageTypeChange}
-                disabled={messageTypeDisabled || readonly}
-                messageTypeList={messageTypeList}
-              />
-            ) : null}
-            {leftActionBtns}
-          </Space>
-          {rightActionBtns}
-        </div>
+      <>
         <div
-          className={cn('w-full', {
-            'py-1': message?.role !== placeholderRoleValue,
-          })}
+          className={cn(
+            styles['prompt-editor-container'],
+            {
+              [styles['prompt-editor-container-error']]: placeholderError,
+              [styles['prompt-editor-container-active']]: editorActive,
+              [styles['prompt-editor-container-disabled']]: disabled,
+              [styles['full-screen']]: isFullscreen,
+              'mb-5':
+                message?.role === placeholderRoleValue && placeholderError,
+            },
+            className,
+          )}
         >
-          {message?.role === placeholderRoleValue ? (
-            <Input
-              key={message.key || message.id}
-              value={message.content}
-              onChange={handleMessageContentChange}
-              borderless
-              disabled={readonly}
-              style={{ border: 0, borderRadius: 0 }}
-              onInput={event => {
-                // 获取当前输入的值
-                const target = event.target as HTMLInputElement;
-                if (target) {
-                  let { value } = target;
-                  // 如果输入为空，不做处理
-                  if (value === '') {
-                    return;
-                  }
-                  // 确保首字母是字母
-                  if (!/^[A-Za-z]/.test(value)) {
-                    // 如果首字母不是字母，去掉首字母
-                    value = value.slice(1);
-                  }
+          {hideActionWrap ? null : (
+            <div className={styles.header}>
+              <Space spacing={2}>
+                {dragBtnHidden || readonly ? null : (
+                  <IconButton
+                    color="secondary"
+                    size="mini"
+                    icon={<IconCozHandle fontSize={14} />}
+                    className={cn('drag !w-[14px]', styles['drag-btn'])}
+                  />
+                )}
+                {message?.role ? (
+                  <MessageTypeSelect
+                    value={message.role}
+                    onChange={onMessageTypeChange}
+                    disabled={messageTypeDisabled || readonly}
+                    messageTypeList={messageTypeList}
+                  />
+                ) : null}
+                {leftActionBtns}
+              </Space>
+              <Space spacing={8}>
+                {!readonly &&
+                !modalVariableBtnHidden &&
+                message?.role !== placeholderRoleValue ? (
+                  <TooltipWhenDisabled
+                    disabled={!modalVariableEnable}
+                    content="所选模型不支持多模态，请调整变量类型或更换模型"
+                    theme="dark"
+                  >
+                    <span>
+                      <Popconfirm
+                        className="w-[300px]"
+                        title="添加多模态变量"
+                        content={
+                          <Form
+                            getFormApi={formApi =>
+                              (formApiRef.current = formApi)
+                            }
+                            showValidateIcon={false}
+                            onValueChange={values => {
+                              setTimeout(() => {
+                                const error =
+                                  formApiRef.current?.getError('content');
+                                if (values?.content && !error) {
+                                  setModalVariableCanAdd(true);
+                                } else {
+                                  setModalVariableCanAdd(false);
+                                }
+                              }, 100);
+                            }}
+                          >
+                            <FormTextArea
+                              noLabel
+                              field="content"
+                              placeholder="输入多模态变量名称"
+                              maxCount={50}
+                              maxLength={50}
+                              rules={[
+                                {
+                                  validator: (_rules, value, callback) => {
+                                    const regex = new RegExp(
+                                      `^[a-zA-Z][\\w]{0,${VARIABLE_MAX_LEN - 1}}$`,
+                                      'gm',
+                                    );
 
-                  // 确保其余部分只包含字母、数字和下划线
-                  value = value.replace(/[^A-Za-z0-9_]/g, '');
-
-                  // 更新输入框的值
-                  target.value = value;
-                }
-              }}
-              maxLength={VARIABLE_MAX_LEN}
-              max={50}
-              className="!pl-3 font-sm"
-              inputStyle={{
-                fontSize: 13,
-                color: 'var(--Green-COZColorGreen7, #00A136)',
-                fontFamily: 'JetBrainsMonoRegular',
-              }}
-              onFocus={() => setEditorActive(true)}
-              onBlur={() => setEditorActive(false)}
-              placeholder={I18n.t('prompt_var_format')}
-            />
-          ) : (
-            <PromptBasicEditor
-              key={message?.key || message?.id}
-              {...rest}
-              defaultValue={message?.content}
-              onChange={handleMessageContentChange}
-              variables={variables?.filter(
-                it => it.type !== VariableType.Placeholder,
-              )}
-              readOnly={readonly}
-              linePlaceholder={placeholder}
-              onFocus={() => setEditorActive(true)}
-              onBlur={() => setEditorActive(false)}
-              ref={ref}
-            >
-              {children}
-            </PromptBasicEditor>
+                                    if (value) {
+                                      if (regex.test(value)) {
+                                        if (
+                                          variables?.some(v => v.key === value)
+                                        ) {
+                                          callback('变量名重复');
+                                          return false;
+                                        }
+                                        return true;
+                                      } else {
+                                        callback(
+                                          '只能包含字母、数字或下划线，并且以字母开头',
+                                        );
+                                        return false;
+                                      }
+                                    }
+                                    return true;
+                                  },
+                                },
+                              ]}
+                              rows={2}
+                              showCounter
+                              fieldClassName="!p-0"
+                            />
+                          </Form>
+                        }
+                        okText="确定"
+                        okButtonProps={{
+                          disabled: !modalVariableCanAdd,
+                        }}
+                        trigger="custom"
+                        visible={modalVariableVisible}
+                        onConfirm={handleModalVariableConfirm}
+                        onClickOutSide={() => {
+                          setModalVariableVisible(false);
+                          setModalVariableCanAdd(false);
+                        }}
+                      >
+                        <IconButton
+                          color={
+                            modalVariableVisible ? 'highlight' : 'secondary'
+                          }
+                          size="mini"
+                          icon={
+                            <Icon svg={<ModalVariableIcon fontSize={12} />} />
+                          }
+                          onClick={() => setModalVariableVisible(v => !v)}
+                          disabled={!modalVariableEnable}
+                        />
+                      </Popconfirm>
+                    </span>
+                  </TooltipWhenDisabled>
+                ) : null}
+                {rightActionBtns}
+              </Space>
+            </div>
           )}
+          <div
+            className={cn('w-full overflow-y-auto styled-scrollbar', {
+              'py-1': message?.role !== placeholderRoleValue,
+            })}
+          >
+            {message?.role === placeholderRoleValue ? (
+              <Input
+                key={message.key || message.id}
+                value={message.content}
+                onChange={handleMessageContentChange}
+                borderless
+                disabled={readonly}
+                style={{ border: 0, borderRadius: 0 }}
+                onInput={event => {
+                  // 获取当前输入的值
+                  const target = event.target as HTMLInputElement;
+                  if (target) {
+                    let { value } = target;
+                    // 如果输入为空，不做处理
+                    if (value === '') {
+                      return;
+                    }
+                    // 确保首字母是字母
+                    if (!/^[A-Za-z]/.test(value)) {
+                      // 如果首字母不是字母，去掉首字母
+                      value = value.slice(1);
+                    }
+
+                    // 确保其余部分只包含字母、数字和下划线
+                    value = value.replace(/[^A-Za-z0-9_]/g, '');
+
+                    // 更新输入框的值
+                    target.value = value;
+                  }
+                }}
+                maxLength={VARIABLE_MAX_LEN}
+                max={50}
+                className="!pl-3 font-sm"
+                inputStyle={{
+                  fontSize: 13,
+                  color: 'var(--Green-COZColorGreen7, #00A136)',
+                  fontFamily: 'JetBrainsMonoRegular',
+                }}
+                onFocus={() => setEditorActive(true)}
+                onBlur={() => setEditorActive(false)}
+                placeholder="支持输入英文字母和下划线，且首字母必须是字母"
+              />
+            ) : (
+              <PromptBasicEditor
+                key={message?.key || message?.id}
+                {...rest}
+                defaultValue={defaultValue}
+                onChange={handleMessageContentChange}
+                variables={variables}
+                readOnly={readonly}
+                linePlaceholder={placeholder}
+                onFocus={() => setEditorActive(true)}
+                onBlur={() => setEditorActive(false)}
+                ref={editorRef}
+              >
+                <ModalVariableCompletion isMultimodal={modalVariableEnable} />
+                {children}
+              </PromptBasicEditor>
+            )}
+          </div>
+          <Typography.Text
+            size="small"
+            type="danger"
+            className="absolute bottom-[-20px] left-0"
+          >
+            {placeholderError}
+          </Typography.Text>
         </div>
-      </div>
+      </>
     );
   },
 ) as PromptEditorType;
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/message-type-select.tsx b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/message-type-select.tsx
index bc04a7a74..4c48e5b80 100644
--- a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/message-type-select.tsx
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/message-type-select.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { useState } from 'react';
 
 import cn from 'classnames';
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.module.less b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.module.less
new file mode 100644
index 000000000..459f9a961
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.module.less
@@ -0,0 +1,47 @@
+.modal-variable-widget {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0px 4px;
+  border-radius: 4px;
+  background: rgba(0, 161, 54, 0.10);
+  color: #00A136;
+
+  font-family: "JetBrains Mono";
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0 2px;
+  vertical-align: bottom;
+  cursor: pointer;
+  border: 0.5px solid transparent;
+  position: relative;
+  line-height: 19px;
+
+  &-delete {
+    cursor: pointer;
+    position: absolute;
+    right: -6px;
+    top: -4px;
+    color: var(--coz-fg-secondary);
+    display: none;
+  }
+
+  &:hover {
+    border: 0.5px solid rgba(0, 161, 54, 0.10);
+
+    .modal-variable-widget-delete {
+      display: block;
+    }
+  }
+
+  &-disabled {
+    cursor: default;
+    color: var(--Fg-COZ-fg-dim, rgba(55, 67, 106, 0.38));
+    background: var(--Mg-COZ-mg-primary, rgba(87, 104, 161, 0.08));
+
+    &:hover {
+      border: 0.5px solid var(--Stroke-COZ-stroke-primary, rgba(82, 100, 154, 0.13));
+    }
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.tsx b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.tsx
new file mode 100644
index 000000000..a47571970
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/index.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable max-params */
+import { useLayoutEffect } from 'react';
+
+import { nanoid } from 'nanoid';
+import regexpDecorator from '@coze-editor/extension-regexp-decorator';
+import { useEditor, useInjector, useLatest } from '@coze-editor/editor/react';
+import { type EditorAPI } from '@coze-editor/editor/preset-code';
+import { Decoration } from '@codemirror/view';
+
+import { ModalVariableWidget } from './widget';
+
+export default function ModalVariableCompletion({
+  isMultimodal,
+}: {
+  isMultimodal?: boolean;
+}) {
+  const editor = useEditor<EditorAPI>();
+  const injector = useInjector();
+  const editorRef = useLatest(editor);
+  const regex = new RegExp(
+    '<multimodal-variable>(.*?)</multimodal-variable>',
+    'gm',
+  );
+
+  useLayoutEffect(
+    () =>
+      injector.inject([
+        regexpDecorator({
+          regexp: regex,
+          decorate: (add, from, to, matches, view) => {
+            // const facet = view.state.facet(cunstomFacet);
+
+            // const matchText = matches[0];
+            // const prompt = segmentMap?.[matchText];
+            // let stateType = '';
+
+            // if (facet?.id === 'a') {
+            //   const newValue = facet?.newValue;
+            //   if (!newValue?.includes(matchText)) {
+            //     stateType = 'delete';
+            //   }
+            // }
+            // if (facet?.id === 'b') {
+            //   const oldValue = facet?.oldValue;
+            //   if (!oldValue?.includes(matchText)) {
+            //     stateType = 'add';
+            //   }
+            // }
+            console.log('isMultimodal', isMultimodal);
+            const matchText = matches[1];
+
+            add(
+              from,
+              to,
+              Decoration.replace({
+                widget: new ModalVariableWidget({
+                  dataInfo: {
+                    variableKey: matchText,
+                    uuid: nanoid(),
+                  },
+                  onDelete: () => {
+                    editorRef.current?.replaceText({ from, to, text: '' });
+                  },
+                  readonly: view.state.readOnly,
+                  isMultimodal,
+                  from,
+                  to,
+                }),
+                atomicRange: true,
+              }),
+            );
+          },
+        }),
+      ]),
+    [isMultimodal],
+  );
+
+  return null;
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/widget.tsx b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/widget.tsx
new file mode 100644
index 000000000..360ea7cc0
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/modal-variable/widget.tsx
@@ -0,0 +1,99 @@
+import { type Root } from 'react-dom/client';
+import classNames from 'classnames';
+import { TooltipWhenDisabled } from '@cozeloop/components';
+import { IconCozCrossCircleFill } from '@coze-arch/coze-design/icons';
+import { Icon } from '@coze-arch/coze-design';
+import { WidgetType, type EditorView } from '@codemirror/view';
+
+import { ReactComponent as ModalVariableIcon } from '@/assets/modal-variable.svg';
+
+import { renderDom } from '../render-dom';
+
+import styles from './index.module.less';
+
+export interface ModalVariableDataInfo {
+  variableKey?: string;
+  uuid?: string;
+}
+
+interface ModalVariableDisplayProps {
+  dataInfo?: ModalVariableDataInfo;
+  readonly?: boolean;
+  isMultimodal?: boolean;
+  onDelete?: () => void;
+}
+
+const ModalVariableDisplay: React.FC<ModalVariableDisplayProps> = ({
+  dataInfo,
+  readonly,
+  isMultimodal,
+  onDelete,
+}) => (
+  <TooltipWhenDisabled
+    content="所选模型不支持多模态，请调整变量类型或更换模型"
+    theme="dark"
+    disabled={!isMultimodal}
+  >
+    <div
+      className={classNames(styles['modal-variable-widget'], {
+        [styles['modal-variable-widget-disabled']]: !isMultimodal,
+      })}
+    >
+      <Icon svg={<ModalVariableIcon fontSize={13} />} size="extra-small" />
+      {readonly ? null : (
+        <IconCozCrossCircleFill
+          fontSize={12}
+          className={styles['modal-variable-widget-delete']}
+          onClick={onDelete}
+        />
+      )}
+      <span className="text-[13px]">{dataInfo?.variableKey}</span>
+    </div>
+  </TooltipWhenDisabled>
+);
+
+interface ModalVariableWidgetOptions extends ModalVariableDisplayProps {
+  from: number;
+  to: number;
+}
+
+export class ModalVariableWidget extends WidgetType {
+  root?: Root;
+
+  constructor(public options: ModalVariableWidgetOptions) {
+    super();
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const { root, dom } = renderDom<ModalVariableDisplayProps>(
+      ModalVariableDisplay,
+      {
+        dataInfo: this.options.dataInfo,
+        readonly: this.options.readonly,
+        onDelete: this.options.onDelete,
+        isMultimodal: this.options.isMultimodal,
+      },
+    );
+
+    this.root = root;
+    return dom;
+  }
+
+  getEqKey() {
+    return [
+      this.options.dataInfo?.variableKey,
+      this.options.dataInfo?.uuid,
+      this.options.isMultimodal,
+      this.options.from,
+      this.options.to,
+    ].join('');
+  }
+
+  eq(prev) {
+    return prev.getEqKey() === this.getEqKey();
+  }
+
+  destroy(): void {
+    this.root?.unmount();
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/render-dom.tsx b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/render-dom.tsx
new file mode 100644
index 000000000..84406dcdc
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/prompt-editor/widgets/render-dom.tsx
@@ -0,0 +1,25 @@
+import { createRoot, type Root } from 'react-dom/client';
+
+interface RenderDomResult {
+  dom: HTMLSpanElement;
+  root: Root;
+  destroy: () => void;
+}
+
+export const renderDom = <T extends {}>(
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Comp: React.ComponentType<T>,
+  props: T,
+): RenderDomResult => {
+  const dom = document.createElement('span');
+  const root = createRoot(dom);
+  root.render(<Comp {...props} />);
+
+  return {
+    dom,
+    root,
+    destroy() {
+      root.unmount();
+    },
+  };
+};
diff --git a/frontend/packages/cozeloop/prompt-components/src/schema-editor/index.tsx b/frontend/packages/cozeloop/prompt-components/src/schema-editor/index.tsx
new file mode 100644
index 000000000..829c3d81e
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/schema-editor/index.tsx
@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+
+import { BaseJsonEditor, BaseRawTextEditor } from '@/code-editor';
+
+interface SchemaEditorProps {
+  value?: string;
+  readOnly?: boolean;
+  onChange?: (value?: string) => void;
+  language?: string;
+  placeholder?: string;
+  showLineNumbs?: boolean;
+  className?: string;
+}
+
+export const SchemaEditor = ({
+  value,
+  onChange,
+  placeholder,
+  readOnly,
+  language,
+  className,
+}: SchemaEditorProps) => (
+  <div
+    className={classNames(
+      'w-full h-[500px] border border-solid coz-stroke-primary rounded-[4px] overflow-hidden relative bg-white',
+      { 'opacity-70': readOnly },
+      className,
+    )}
+  >
+    {language === 'json' ? (
+      <BaseJsonEditor
+        className="w-full h-full overflow-y-auto"
+        onChange={onChange}
+        value={value || ''}
+        placeholder={placeholder}
+        readonly={readOnly}
+        borderRadius={4}
+      />
+    ) : (
+      <BaseRawTextEditor
+        className="w-full h-full overflow-y-auto"
+        onChange={onChange}
+        value={value || ''}
+        placeholder={placeholder}
+        readonly={readOnly}
+      />
+    )}
+  </div>
+);
diff --git a/frontend/packages/cozeloop/prompt-components/src/types.d.ts b/frontend/packages/cozeloop/prompt-components/src/types.d.ts
index fb46ea466..205ffe309 100644
--- a/frontend/packages/cozeloop/prompt-components/src/types.d.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/types.d.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /// <reference types='@coze-arch/bot-typings' />
 
 interface Window {
diff --git a/frontend/packages/cozeloop/prompt-components/src/utils/base.ts b/frontend/packages/cozeloop/prompt-components/src/utils/base.ts
index 3f4fa6386..82cbae207 100644
--- a/frontend/packages/cozeloop/prompt-components/src/utils/base.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/utils/base.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/use-error-in-catch */
 import { type UIEventHandler } from 'react';
 
diff --git a/frontend/packages/cozeloop/prompt-components/src/utils/model-config.tsx b/frontend/packages/cozeloop/prompt-components/src/utils/model-config.tsx
new file mode 100644
index 000000000..49daea83a
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-components/src/utils/model-config.tsx
@@ -0,0 +1,36 @@
+import { Tag } from '@coze-arch/coze-design';
+
+import { convertInt64ToNumber } from '@/model-config-editor/model-config-form';
+import { DEFAULT_MAX_TOKENS } from '@/consts';
+
+import { ModelStatus, type Model, type ModelConfig } from '../model-types';
+
+export const convertModelToModelConfig = (model?: Model): ModelConfig => ({
+  id: model?.id,
+  name: model?.displayName,
+  provider: model?.provider,
+  provider_model_id: model?.identification,
+  temperature: convertInt64ToNumber(model?.defaultRuntimeParam?.temperature),
+  max_tokens: convertInt64ToNumber(
+    model?.defaultRuntimeParam?.maxTokens || DEFAULT_MAX_TOKENS,
+  ),
+  top_p: convertInt64ToNumber(model?.defaultRuntimeParam?.topP),
+  function_call_mode: model?.ability?.functionCallEnabled,
+});
+
+export const renderModelOfflineTag = (model?: Model) => {
+  if (model?.modelStatus === ModelStatus.Offlining) {
+    return (
+      <Tag color="yellow" className="flex-shrink-0" size="mini">
+        下线中
+      </Tag>
+    );
+  } else if (model?.modelStatus === ModelStatus.Unavailable) {
+    return (
+      <Tag color="red" className="flex-shrink-0" size="mini">
+        已下线
+      </Tag>
+    );
+  }
+  return null;
+};
diff --git a/frontend/packages/cozeloop/prompt-components/src/utils/prompt.ts b/frontend/packages/cozeloop/prompt-components/src/utils/prompt.ts
index e81858d3b..2792dee81 100644
--- a/frontend/packages/cozeloop/prompt-components/src/utils/prompt.ts
+++ b/frontend/packages/cozeloop/prompt-components/src/utils/prompt.ts
@@ -1,7 +1,6 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-import { I18n } from '@cozeloop/i18n-adapter';
 import {
+  type ContentPart,
+  ContentType,
   type Message,
   Role,
   type VariableDef,
@@ -14,20 +13,81 @@ export const getPlaceholderErrorContent = (
 ) => {
   if (message?.role === Role.Placeholder) {
     if (!message?.content) {
-      return I18n.t('field_not_empty', {
-        field: I18n.t('placeholder_var_name'),
-      });
+      return 'Placeholder 变量名不能为空';
     }
     if (!/^[A-Za-z][A-Za-z0-9_]*$/.test(message?.content)) {
-      return I18n.t('placeholder_format');
+      return '只允许输入英文、数字及下划线且首字母需为英文';
     }
     const normalVariables = variables?.filter(
       it => it.type !== VariableType.Placeholder,
     );
     const hasSameKey = normalVariables?.find(it => it.key === message?.content);
     if (hasSameKey) {
-      return I18n.t('placeholder_name_exists');
+      return 'Placeholder 变量名不能与其他类型变量名重复，请修改 Placeholder 变量名';
     }
   }
   return '';
 };
+
+/**
+ * 拆分多模态变量内容
+ * @param content 包含多模态变量标签的内容
+ * @returns 拆分后的数组，每个元素包含 type 和 text 属性
+ */
+export const splitMultimodalContent = (content: string) => {
+  const result: Array<{ type: ContentType; text: string }> = [];
+
+  // 使用正则表达式匹配 <multimodal-variable>xxx</multimodal-variable> 标签
+  const regex = /<multimodal-variable>(.*?)<\/multimodal-variable>/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while (true) {
+    match = regex.exec(content);
+    if (!match) {
+      break;
+    }
+    // 添加标签前的文本（如果有的话）
+    if (match.index > lastIndex) {
+      const textBefore = content.slice(lastIndex, match.index);
+      if (textBefore) {
+        result.push({ type: ContentType.Text, text: textBefore });
+      }
+    }
+
+    // 添加多模态变量内容
+    result.push({ type: ContentType.MultiPartVariable, text: match[1] });
+
+    // 更新索引位置
+    lastIndex = match.index + match[0].length;
+  }
+
+  // 添加标签后的剩余文本（如果有的话）
+  if (lastIndex < content.length && result.length) {
+    const textAfter = content.slice(lastIndex);
+    if (textAfter) {
+      result.push({ type: ContentType.Text, text: textAfter });
+    }
+  }
+
+  // 如果没有匹配到任何标签，返回原始文本
+  if (result.length === 0) {
+    return [];
+  }
+
+  return result;
+};
+
+export const multimodalPartsToContent = (parts: ContentPart[]) => {
+  const newPartsText = parts.map(part => {
+    if (part.type === ContentType.MultiPartVariable) {
+      return `<multimodal-variable>${part.text}</multimodal-variable>`;
+    }
+    return part.text;
+  });
+  return newPartsText.join('');
+};
+
+export function getMultimodalVariableText(variableName: string) {
+  return `<multimodal-variable>${variableName}</multimodal-variable>`;
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/package.json b/frontend/packages/cozeloop/prompt-pages/package.json
index f424a2e5d..c031b0ecc 100644
--- a/frontend/packages/cozeloop/prompt-pages/package.json
+++ b/frontend/packages/cozeloop/prompt-pages/package.json
@@ -18,12 +18,13 @@
     "@cozeloop/biz-components-adapter": "workspace:*",
     "@cozeloop/biz-hooks-adapter": "workspace:*",
     "@cozeloop/components": "workspace:*",
-    "@cozeloop/i18n-adapter": "workspace:*",
+    "@cozeloop/guard": "workspace:*",
     "@cozeloop/observation-component-adapter": "workspace:*",
     "@cozeloop/prompt-components": "workspace:*",
     "@cozeloop/tea-adapter": "workspace:*",
     "@cozeloop/toolkit": "workspace:*",
     "ahooks": "^3.7.8",
+    "ajv": "~8.12.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
     "eventsource-parser": "^1.0.0",
diff --git a/frontend/packages/cozeloop/prompt-pages/src/app.tsx b/frontend/packages/cozeloop/prompt-pages/src/app.tsx
index 63f32fc0b..53a90c03a 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/app.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/app.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { Routes, Route, Navigate } from 'react-router-dom';
 
 import { Playground } from './playground';
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/chatflow.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/chatflow.svg
new file mode 100644
index 000000000..de0be9fb6
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/chatflow.svg
@@ -0,0 +1,9 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="coz_chat">
+<g id="Union">
+<path d="M5.24283 5.83325C5.24283 5.51109 5.504 5.24992 5.82617 5.24992H9.9095C10.2317 5.24992 10.4928 5.51109 10.4928 5.83325C10.4928 6.15542 10.2317 6.41659 9.9095 6.41659H5.82617C5.504 6.41659 5.24283 6.15542 5.24283 5.83325Z" fill="#B0B9FF"/>
+<path d="M5.82617 7.58325C5.504 7.58325 5.24283 7.84442 5.24283 8.16659C5.24283 8.48875 5.504 8.74992 5.82617 8.74992H8.1595C8.48167 8.74992 8.74283 8.48875 8.74283 8.16659C8.74283 7.84442 8.48167 7.58325 8.1595 7.58325H5.82617Z" fill="#B0B9FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9928 6.99992C13.9928 10.5437 11.12 13.4166 7.57617 13.4166H3.27002C2.83638 13.4166 2.55434 12.9602 2.74827 12.5724L3.19186 11.6852C1.94111 10.5143 1.1595 8.84839 1.1595 6.99992C1.1595 3.45609 4.03234 0.583252 7.57617 0.583252C11.12 0.583252 13.9928 3.45609 13.9928 6.99992ZM4.62464 11.4284L4.21387 12.2499H7.57617C10.4757 12.2499 12.8262 9.89941 12.8262 6.99992C12.8262 4.10042 10.4757 1.74992 7.57617 1.74992C4.67667 1.74992 2.32617 4.10042 2.32617 6.99992C2.32617 8.51237 2.96421 9.87396 3.98918 10.8335L4.62464 11.4284Z" fill="#B0B9FF"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/image.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/image.svg
new file mode 100644
index 000000000..6f530e9f8
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/image.svg
@@ -0,0 +1,9 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 2">
+<g id="Union">
+<path d="M11.7377 5.08875V10.3246C11.7377 10.4212 11.6594 10.4996 11.5627 10.4996H8.39925L8.39859 10.4996H3.41023C3.25433 10.4996 3.17625 10.3111 3.28649 10.2008L5.78067 7.70667C5.84901 7.63833 5.95982 7.63833 6.02816 7.70667L7.36272 9.04124L11.439 4.965C11.5492 4.85476 11.7377 4.93284 11.7377 5.08875Z" fill="#B0B9FF"/>
+<path d="M4.73779 5.83293C5.38213 5.83293 5.90446 5.31059 5.90446 4.66626C5.90446 4.02193 5.38213 3.49959 4.73779 3.49959C4.09346 3.49959 3.57113 4.02193 3.57113 4.66626C3.57113 5.31059 4.09346 5.83293 4.73779 5.83293Z" fill="#B0B9FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.23779 2.33293C1.23779 1.69126 1.76279 1.16626 2.40446 1.16626H12.9045C13.5461 1.16626 14.0711 1.69126 14.0711 2.33293V11.6663C14.0711 12.3079 13.5461 12.8329 12.9045 12.8329H2.40446C1.76279 12.8329 1.23779 12.3079 1.23779 11.6663V2.33293ZM12.9045 2.33293H2.40446V11.6663H12.9045V2.33293Z" fill="#B0B9FF"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/imageflow.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/imageflow.svg
new file mode 100644
index 000000000..3ea4b1f1b
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/imageflow.svg
@@ -0,0 +1,12 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 2">
+<g id="Union">
+<path d="M1.47082 1.39238C1.72422 1.27387 1.92817 1.06992 2.04668 0.816521C2.05886 0.790463 2.07015 0.763881 2.08049 0.736816C2.08663 0.720755 2.09243 0.704523 2.0979 0.688128L2.25921 0.204192C2.34996 -0.0680642 2.73506 -0.0680639 2.82581 0.204192L2.98712 0.688129C2.99259 0.704523 2.99839 0.720755 3.00453 0.736816C3.01487 0.763881 3.02615 0.790463 3.03834 0.816521C3.15685 1.06992 3.3608 1.27387 3.6142 1.39238C3.64026 1.40457 3.66684 1.41585 3.6939 1.42619C3.70997 1.43233 3.7262 1.43813 3.74259 1.4436L4.22653 1.60491C4.49878 1.69566 4.49878 2.08076 4.22653 2.17151L3.74259 2.33283C3.7262 2.33829 3.70997 2.3441 3.6939 2.35023C3.66684 2.36057 3.64026 2.37186 3.6142 2.38404C3.40047 2.484 3.22192 2.64474 3.10015 2.84466C3.07754 2.88177 3.05689 2.92023 3.03834 2.9599C3.02615 2.98596 3.01487 3.01254 3.00453 3.03961C2.99839 3.05567 2.99259 3.0719 2.98712 3.08829L2.82581 3.57223C2.78611 3.69134 2.69006 3.75834 2.58698 3.77323C2.45444 3.79238 2.31026 3.72538 2.25921 3.57223L2.0979 3.08829C2.09243 3.0719 2.08662 3.05567 2.08049 3.03961C2.07015 3.01254 2.05886 2.98596 2.04668 2.9599C1.92816 2.7065 1.72422 2.50256 1.47082 2.38404C1.44476 2.37186 1.41818 2.36057 1.39111 2.35023C1.37505 2.3441 1.35882 2.33829 1.34243 2.33282L0.858488 2.17151C0.586233 2.08076 0.586233 1.69566 0.858489 1.60491L1.34243 1.4436C1.35882 1.43813 1.37505 1.43233 1.39111 1.42619C1.41818 1.41585 1.44476 1.40457 1.47082 1.39238Z" fill="#B0B9FF"/>
+<path d="M11.6944 11.616C11.9478 11.4974 12.1517 11.2935 12.2702 11.0401C12.2824 11.014 12.2937 10.9875 12.3041 10.9604C12.3102 10.9443 12.316 10.9281 12.3215 10.9117L12.4828 10.4278C12.5735 10.1555 12.9586 10.1555 13.0494 10.4278L13.2107 10.9117C13.2162 10.9281 13.222 10.9443 13.2281 10.9604C13.2384 10.9875 13.2497 11.014 13.2619 11.0401C13.3804 11.2935 13.5844 11.4974 13.8378 11.616C13.8638 11.6281 13.8904 11.6394 13.9175 11.6498C13.9335 11.6559 13.9498 11.6617 13.9662 11.6672L14.4501 11.8285C14.7224 11.9192 14.7224 12.3043 14.4501 12.3951L13.9662 12.5564C13.9498 12.5619 13.9335 12.5677 13.9175 12.5738C13.8904 12.5841 13.8638 12.5954 13.8378 12.6076C13.624 12.7076 13.4455 12.8683 13.3237 13.0682C13.3011 13.1053 13.2805 13.1438 13.2619 13.1835C13.2497 13.2095 13.2384 13.2361 13.2281 13.2632C13.222 13.2792 13.2162 13.2955 13.2107 13.3119L13.0494 13.7958C13.0097 13.9149 12.9136 13.9819 12.8105 13.9968C12.678 14.0159 12.5338 13.9489 12.4828 13.7958L12.3215 13.3119C12.316 13.2955 12.3102 13.2792 12.3041 13.2632C12.2937 13.2361 12.2824 13.2095 12.2702 13.1835C12.1517 12.9301 11.9478 12.7261 11.6944 12.6076C11.6683 12.5954 11.6417 12.5841 11.6147 12.5738C11.5986 12.5677 11.5824 12.5619 11.566 12.5564L11.0821 12.3951C10.8098 12.3043 10.8098 11.9192 11.0821 11.8285L11.566 11.6672C11.5824 11.6617 11.5986 11.6559 11.6147 11.6498C11.6417 11.6394 11.6683 11.6281 11.6944 11.616Z" fill="#B0B9FF"/>
+<path d="M2.54396 4.39184C2.36112 4.39184 2.18523 4.33824 2.03515 4.23662C1.95199 4.18032 1.88005 4.1116 1.82096 4.03265V11.6667C1.82096 12.3083 2.34596 12.8333 2.98763 12.8333H10.6203C10.5422 12.7745 10.4743 12.7031 10.4186 12.6208C10.3171 12.4708 10.2633 12.2949 10.2633 12.1119C10.2633 11.9542 10.3032 11.8018 10.3792 11.6667H2.98763V4.27615C2.98011 4.28037 2.97254 4.28448 2.96492 4.28847C2.83574 4.3562 2.69174 4.39168 2.54306 4.39168L2.54396 4.39184Z" fill="#B0B9FF"/>
+<path d="M13.4876 2.33333V9.96567C13.347 9.77914 13.1375 9.65251 12.8977 9.61784C12.8545 9.61165 12.8104 9.60848 12.7667 9.60848C12.6088 9.60848 12.4562 9.64838 12.321 9.7245V2.33333H4.93076C5.00684 2.19813 5.04667 2.04568 5.04667 1.88807C5.04667 1.70508 4.99307 1.52919 4.89161 1.37926C4.83597 1.29697 4.7681 1.22563 4.69018 1.16688L12.321 1.16667C12.9626 1.16667 13.4876 1.69167 13.4876 2.33333Z" fill="#B0B9FF"/>
+<path d="M6.56987 10.4932L4.07594 10.4872C3.97929 10.487 3.90113 10.4084 3.90136 10.3118C3.90147 10.2655 3.9199 10.2212 3.95262 10.1884L6.36342 7.77765C6.45454 7.68652 6.60228 7.68652 6.6934 7.77765L7.80586 8.89011L10.756 5.94C10.8471 5.84888 10.9948 5.84888 11.086 5.94C11.1297 5.98376 11.1543 6.04311 11.1543 6.10499V10.325C11.1543 10.4217 11.0759 10.5 10.9793 10.5H6.61845C6.6016 10.5 6.5853 10.4976 6.56987 10.4932Z" fill="#B0B9FF"/>
+<path d="M4.1543 3.5H5.9043V5.25H4.1543V3.5Z" fill="#B0B9FF"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/index.ts b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/index.ts
new file mode 100644
index 000000000..78599e012
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/index.ts
@@ -0,0 +1,8 @@
+export { default as pluginIcon } from './plugin.svg';
+export { default as workflowIcon } from './workflow.svg';
+export { default as imageflowIcon } from './imageflow.svg';
+export { default as tableIcon } from './table.svg';
+export { default as textIcon } from './text.svg';
+export { default as imageIcon } from './image.svg';
+export { default as chatflowIcon } from './chatflow.svg';
+export { default as volcanoIcon } from './volcano.svg';
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/plugin.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/plugin.svg
new file mode 100644
index 000000000..cb1420db3
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/plugin.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 2">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M6.90598 0.696144C7.36911 0.428759 7.9397 0.428759 8.40282 0.696144L12.7393 3.19983C13.2025 3.46722 13.4878 3.96136 13.4878 4.49613V9.50351C13.4878 10.0383 13.2025 10.5324 12.7393 10.7998L8.40282 13.3035C7.9397 13.5709 7.3691 13.5709 6.90598 13.3035L2.56946 10.7998C2.10634 10.5324 1.82104 10.0383 1.82104 9.50351V4.49613C1.82104 3.96136 2.10634 3.46722 2.56946 3.19983L6.90598 0.696144ZM11.9063 4.06604L7.81949 1.70651C7.71733 1.64753 7.59147 1.64753 7.48931 1.70651L3.40043 4.06722L7.65235 6.52207L11.9063 4.06604ZM2.98771 5.17609V9.50351C2.98771 9.62147 3.05064 9.73047 3.1528 9.78945L7.06901 12.0505V7.53243L2.98771 5.17609ZM8.23568 12.0528L12.156 9.78945C12.2582 9.73047 12.3211 9.62147 12.3211 9.50351V5.17372L8.23568 7.53243V12.0528Z" fill="#B0B9FF"/>
+</g>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/table.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/table.svg
new file mode 100644
index 000000000..ede84168d
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/table.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 2">
+<path id="Union" d="M1.82104 2.33342C1.82104 1.68908 2.34338 1.16675 2.98771 1.16675H12.321C12.9654 1.16675 13.4877 1.68908 13.4877 2.33341V11.6667C13.4877 12.3111 12.9654 12.8334 12.321 12.8334H2.98771C2.34338 12.8334 1.82104 12.3111 1.82104 11.6667V2.33342ZM6.19605 2.33341V4.66675L12.321 4.66675V2.33341H6.19605ZM6.19605 5.83341V8.16675L12.321 8.16675V5.83342L6.19605 5.83341ZM5.02938 8.16675V5.83341H2.98771V8.16675H5.02938ZM2.98771 9.33342V11.6667H5.02938V9.33342H2.98771ZM6.19605 9.33342V11.6667H12.321V9.33342H6.19605ZM5.02938 2.33341H2.98771V4.66675L5.02938 4.66675V2.33341Z" fill="#B0B9FF"/>
+</g>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/text.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/text.svg
new file mode 100644
index 000000000..63e123d37
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/text.svg
@@ -0,0 +1,10 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 2">
+<g id="Union">
+<path d="M4.73763 4.9585C4.73763 4.63633 4.9988 4.37516 5.32096 4.37516H7.6543C7.97646 4.37516 8.23763 4.63633 8.23763 4.9585C8.23763 5.28066 7.97646 5.54183 7.6543 5.54183H5.32096C4.9988 5.54183 4.73763 5.28066 4.73763 4.9585Z" fill="#B0B9FF"/>
+<path d="M4.73763 7.29183C4.73763 6.96966 4.9988 6.7085 5.32096 6.7085H9.98763C10.3098 6.7085 10.571 6.96966 10.571 7.29183C10.571 7.614 10.3098 7.87516 9.98763 7.87516H5.32096C4.9988 7.87516 4.73763 7.614 4.73763 7.29183Z" fill="#B0B9FF"/>
+<path d="M4.73763 9.62516C4.73763 9.303 4.9988 9.04183 5.32096 9.04183H9.98763C10.3098 9.04183 10.571 9.303 10.571 9.62516C10.571 9.94733 10.3098 10.2085 9.98763 10.2085H5.32096C4.9988 10.2085 4.73763 9.94733 4.73763 9.62516Z" fill="#B0B9FF"/>
+<path d="M2.4043 1.75016C2.4043 1.10583 2.92663 0.583496 3.57096 0.583496H11.7376C12.382 0.583496 12.9043 1.10583 12.9043 1.75016V12.2502C12.9043 12.8945 12.382 13.4168 11.7376 13.4168H3.57096C2.92663 13.4168 2.4043 12.8945 2.4043 12.2502V1.75016ZM3.57096 1.75016V12.2502H11.7376V1.75016H3.57096Z" fill="#B0B9FF"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/volcano.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/volcano.svg
new file mode 100644
index 000000000..cfa5b4736
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/volcano.svg
@@ -0,0 +1,6 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.38607 5.62243L8.06618 10.783C8.06276 10.797 8.06276 10.8117 8.06618 10.8258C8.07132 10.8471 8.0836 10.8661 8.101 10.8795C8.1184 10.893 8.13986 10.9001 8.16184 10.8996H10.8001C10.8146 10.9 10.8291 10.897 10.8423 10.8909C10.8556 10.8849 10.8673 10.8759 10.8765 10.8647C10.8858 10.8535 10.8924 10.8403 10.8959 10.8261C10.8994 10.812 10.8996 10.7972 10.8965 10.783L9.57041 5.62243C9.56393 5.60312 9.55155 5.58633 9.53501 5.57444C9.51847 5.56255 9.49862 5.55615 9.47825 5.55615C9.45788 5.55615 9.43802 5.56255 9.42148 5.57444C9.40495 5.58633 9.39256 5.60312 9.38608 5.62243M2.12397 6.79065L1.10195 10.783C1.09874 10.7973 1.09883 10.8121 1.10223 10.8263C1.10562 10.8405 1.11223 10.8537 1.12154 10.865C1.13086 10.8763 1.14263 10.8852 1.15595 10.8913C1.16927 10.8973 1.18379 10.9001 1.1984 10.8997H3.23462C3.24926 10.9 3.26379 10.897 3.27713 10.891C3.29046 10.8849 3.30225 10.8759 3.31162 10.8647C3.3208 10.8533 3.32719 10.84 3.33029 10.8258C3.33372 10.8117 3.33372 10.797 3.33029 10.783L2.30751 6.79143C2.30143 6.77197 2.28914 6.75504 2.27252 6.74322C2.25586 6.73126 2.23586 6.72482 2.21535 6.72482C2.19484 6.72482 2.17485 6.73126 2.15818 6.74322C2.14185 6.75516 2.12984 6.77208 2.12396 6.79143" fill="#00E5E5"/>
+<path d="M3.92693 3.48781L2.06493 10.7834C2.06174 10.7971 2.06169 10.8113 2.06479 10.8251C2.06789 10.8388 2.07406 10.8517 2.08283 10.8627C2.0915 10.8741 2.10268 10.8833 2.11549 10.8896C2.12831 10.896 2.14241 10.8993 2.15671 10.8993H5.88227C5.89675 10.8995 5.91111 10.8966 5.92428 10.8906C5.93746 10.8846 5.94912 10.8757 5.95838 10.8645C5.96765 10.8534 5.97429 10.8403 5.9778 10.8263C5.98132 10.8122 5.98164 10.7976 5.97871 10.7834L4.11128 3.48781C4.10535 3.46806 4.09304 3.45083 4.07628 3.43881C4.05962 3.42685 4.03963 3.42041 4.01912 3.42041C3.99861 3.42041 3.97861 3.42685 3.96195 3.43881C3.94519 3.45083 3.93288 3.46806 3.92694 3.48781" fill="#006EFF"/>
+<path d="M7.13958 1.16672C7.13329 1.14715 7.12071 1.13019 7.1038 1.1185C7.08714 1.10653 7.06715 1.1001 7.04664 1.1001C7.02613 1.1001 7.00613 1.10653 6.98947 1.1185C6.97285 1.13032 6.96055 1.14725 6.95447 1.16672L4.41037 10.7832C4.40731 10.7973 4.40749 10.812 4.41091 10.826C4.41433 10.8401 4.42089 10.8532 4.4301 10.8643C4.43931 10.8755 4.45092 10.8844 4.46408 10.8904C4.47723 10.8964 4.49158 10.8994 4.50604 10.8991H9.59269C9.61476 10.8996 9.63638 10.8927 9.65402 10.8794C9.67167 10.8662 9.68432 10.8473 9.68992 10.826C9.69314 10.8119 9.69314 10.7973 9.68992 10.7832L7.1388 1.16672H7.13958Z" fill="#006EFF"/>
+<path d="M5.27112 4.54784L3.65644 10.7833C3.65339 10.7975 3.6536 10.8123 3.65705 10.8264C3.66051 10.8406 3.66713 10.8538 3.67641 10.865C3.68569 10.8762 3.69739 10.8852 3.71064 10.8913C3.72388 10.8973 3.73833 10.9003 3.75289 10.9L6.97445 10.9007C6.98928 10.9011 7.00398 10.898 7.01745 10.8918C7.03092 10.8856 7.04281 10.8764 7.05222 10.865C7.06136 10.8537 7.06785 10.8405 7.07122 10.8263C7.07458 10.8122 7.07474 10.7975 7.07167 10.7833L5.45545 4.54784C5.44895 4.52842 5.43652 4.51152 5.41992 4.49953C5.40332 4.48753 5.38338 4.48104 5.36289 4.48096C5.34255 4.4812 5.32278 4.48776 5.30633 4.49975C5.28988 4.51174 5.27758 4.52854 5.27112 4.54784Z" fill="#00E5E5"/>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/workflow.svg b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/workflow.svg
new file mode 100644
index 000000000..bb24e01f9
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/assets/library-block/workflow.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 2">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M9.06505 5.38087C9.27846 5.65615 9.61235 5.83333 9.98763 5.83333H12.6126C13.257 5.83333 13.7793 5.311 13.7793 4.66667V2.04167C13.7793 1.39733 13.257 0.875 12.6126 0.875H9.98763C9.3433 0.875 8.82096 1.39733 8.82096 2.04167V4.19269L8.80691 4.16985L6.48763 5.5971V5.25C6.48763 4.60567 5.9653 4.08333 5.32096 4.08333L2.69596 4.08333C2.05163 4.08333 1.5293 4.60567 1.5293 5.25V8.75C1.5293 9.39433 2.05163 9.91667 2.69596 9.91667H5.32096C5.9653 9.91667 6.48763 9.39433 6.48763 8.75V8.36035L8.82096 9.72859V11.9583C8.82096 12.6027 9.3433 13.125 9.98763 13.125H12.6126C13.257 13.125 13.7793 12.6027 13.7793 11.9583V9.33333C13.7793 8.689 13.257 8.16667 12.6126 8.16667H9.98763C9.64375 8.16667 9.33463 8.31544 9.12111 8.55214L6.48763 7.00789V6.96697L9.06505 5.38087ZM9.98763 2.04167V4.66667H12.6126V2.04167H9.98763ZM9.98763 9.33333V11.9583H12.6126V9.33333H9.98763ZM2.69596 8.75L2.69596 5.25L5.32096 5.25L5.32096 8.75H2.69596Z" fill="#B0B9FF"/>
+</g>
+</svg>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.module.less
index 54d9bc432..2e9f4779d 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 .compare-item {
   display: flex;
   flex: 1;
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.tsx
index 76e17e1c8..3bf5bb915 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/compare-item/index.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable complexity */
@@ -14,21 +12,19 @@ import React, {
 
 import { useShallow } from 'zustand/react/shallow';
 import { Resizable } from 're-resizable';
-import { useRequest, useSize } from 'ahooks';
+import { isUndefined } from 'lodash-es';
+import { useSize } from 'ahooks';
 import {
   getPlaceholderErrorContent,
   PopoverModelConfigEditor,
 } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
-import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import { useModelList, useSpace } from '@cozeloop/biz-hooks-adapter';
 import {
   type DebugMessage,
   type DebugToolCall,
   type Message,
   Role,
 } from '@cozeloop/api-schema/prompt';
-import { Scenario } from '@cozeloop/api-schema/llm-manage';
-import { LlmManageApi } from '@cozeloop/api-schema';
 import {
   IconCozDubbleHorizontal,
   IconCozSetting,
@@ -84,8 +80,8 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
     },
     ref,
   ) => {
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    const { spaceID } = useSpace();
+    const warpperRef = useRef<HTMLDivElement>(null);
+    const { spaceIDWhenDemoSpaceItsPersonal } = useSpace();
     const { readonly } = useBasicStore(
       useShallow(state => ({ readonly: state.readonly })),
     );
@@ -101,7 +97,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
       setCurrentModel,
     } = useCompare(uid);
 
-    const size = useSize(wrapperRef.current);
+    const size = useSize(warpperRef.current);
     const maxHeight = size?.height ? size.height - 40 : '100%';
 
     const [toolCalls, setToolCalls] = useState<DebugToolCall[]>([]);
@@ -115,14 +111,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
       reasoningContentResult,
     } = useLLMStreamRun(uid);
 
-    const service = useRequest(async () =>
-      LlmManageApi.ListModels({
-        workspace_id: spaceID,
-        page_size: 100,
-        page_token: '0',
-        scenario: Scenario.scenario_prompt_debug,
-      }),
-    );
+    const service = useModelList(spaceIDWhenDemoSpaceItsPersonal);
 
     const runLLM = (
       queryMsg?: Message,
@@ -136,7 +125,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
         return false;
       });
       if (placeholderHasError) {
-        return Toast.error(I18n.t('placeholder_var_error'));
+        return Toast.error('Placeholder 变量不存在或命名错误');
       }
 
       setStreaming?.(true);
@@ -172,7 +161,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
       );
 
       if (historyHasEmpty) {
-        return Toast.error(I18n.t('historical_data_has_empty_content'));
+        return Toast.error('历史数据有空内容');
       }
 
       setHistoricMessage?.(history);
@@ -215,7 +204,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
         !messageList?.length &&
         !(message?.content || message?.parts?.length)
       ) {
-        Toast.error(I18n.t('add_prompt_tpl_or_input_question'));
+        Toast.error('请添加 Prompt 模板或输入提问内容');
         return;
       }
       const chatArray = historicMessage.filter(v => Boolean(v)) as Message[];
@@ -231,7 +220,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
 
       if (message?.content || message?.parts?.length) {
         if (historyHasEmpty) {
-          return Toast.error(I18n.t('historical_data_has_empty_content'));
+          return Toast.error('历史数据有空内容');
         }
 
         if (message) {
@@ -260,7 +249,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
           rerunSendMessage();
         } else {
           if (historyHasEmpty && chatArray.length > 2) {
-            return Toast.error(I18n.t('historical_data_has_empty_content'));
+            return Toast.error('历史数据有空内容');
           }
           const history = chatArray.slice(0, chatArray.length - 1).map(it => ({
             role: it.role,
@@ -286,7 +275,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
     }, [respondingStatus, stepDebuggingTrace]);
 
     return (
-      <div className={styles['compare-item']} ref={wrapperRef} style={style}>
+      <div className={styles['compare-item']} ref={warpperRef} style={style}>
         <div className="flex flex-1 flex-col w-full min-h-[40px]">
           <div
             className="px-6 py-2 box-border border-0 border-t border-b border-solid coz-fg-plus w-full h-[40px] flex items-center justify-between"
@@ -294,14 +283,11 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
           >
             <div className="flex items-center gap-2 flex-shrink-0">
               <Typography.Text className="flex-shrink-0" strong>
-                {title || I18n.t('benchmark_group')}
+                {title || '基准组'}
               </Typography.Text>
-              {uid ? (
+              {!isUndefined(uid) ? (
                 <div className={styles['btn-group']}>
-                  <Tooltip
-                    content={I18n.t('set_to_reference_group')}
-                    theme="dark"
-                  >
+                  <Tooltip content="设置为基准组" theme="dark">
                     <IconButton
                       color="secondary"
                       size="small"
@@ -310,10 +296,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
                       disabled={allStreaming}
                     />
                   </Tooltip>
-                  <Tooltip
-                    content={I18n.t('delete_control_group')}
-                    theme="dark"
-                  >
+                  <Tooltip content="删除对照组" theme="dark">
                     <IconButton
                       color="secondary"
                       size="small"
@@ -326,6 +309,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
               ) : null}
             </div>
             <PopoverModelConfigEditor
+              key={uid}
               value={modelConfig}
               onChange={config => {
                 setModelConfig({ ...config });
@@ -377,9 +361,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
             className="px-6 py-2 box-border border-0 border-t border-b border-solid coz-fg-plus w-full h-[40px]"
             style={{ background: '#F6F6FB' }}
           >
-            <Typography.Text strong>
-              {I18n.t('preview_and_debug')}
-            </Typography.Text>
+            <Typography.Text strong>预览与调试</Typography.Text>
           </div>
           <CompareMessageArea
             uid={uid}
@@ -402,7 +384,7 @@ export const CompareItem = forwardRef<CompareItemRef, CompareItemProps>(
               size="small"
               onClick={stopStreaming}
             >
-              {I18n.t('stop_respond')}
+              停止响应
             </Button>
           ) : null}
         </div>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/execute-area/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/execute-area/index.tsx
index 0e9c1e05f..f32043d9d 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/execute-area/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/execute-area/index.tsx
@@ -1,13 +1,17 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable max-lines-per-function */
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 /* eslint-disable max-params */
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
+import { nanoid } from 'nanoid';
+import classNames from 'classnames';
 import { getPlaceholderErrorContent } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
+import {
+  BenefitBanner,
+  BenefitBannerScene,
+} from '@cozeloop/biz-components-adapter';
 import { type Message, Role } from '@cozeloop/api-schema/prompt';
 import { Toast } from '@coze-arch/coze-design';
 
@@ -20,15 +24,22 @@ import {
 } from '@/store/use-mockdata-store';
 import { useBasicStore } from '@/store/use-basic-store';
 import { isResponding, useLLMStreamRun } from '@/hooks/use-llm-stream-run';
+import { MessageListGroupType } from '@/consts';
 
+import { GroupSelectContext } from '../send-msg-area/group-select';
 import { SendMsgArea } from '../send-msg-area';
-import { CompareMessageArea } from '../message-area';
+import { ChatSubArea, type ChatSubAreaRef } from '../message-area/sub-area';
+import {
+  CompareMessageArea,
+  type CompareMessageAreaRef,
+} from '../message-area';
 
 export function ExecuteArea() {
-  const { setStreaming, streaming } = useBasicStore(
+  const { setStreaming, streaming, groupType } = useBasicStore(
     useShallow(state => ({
       setStreaming: state.setStreaming,
       streaming: state.streaming,
+      groupType: state.groupType,
     })),
   );
   const { messageList, variables } = usePromptStore(
@@ -56,6 +67,14 @@ export function ExecuteArea() {
 
   const stepDebugger = userDebugConfig?.single_step_debug;
 
+  const [showMultiGroupResult, setShowMultiGroupResult] = useState(false);
+  const isMultiGroup = groupType === MessageListGroupType.Multi;
+  const messageAreaRef = useRef<CompareMessageAreaRef>(null);
+  const [groupNum, setGroupNum] = useState(2);
+  const [array, setArray] = useState<Array<{ key: string }>>([]);
+  const textRunAreaRefs = useRef<ChatSubAreaRef[] | null[]>([]);
+  const [acceptKey, setAcceptKey] = useState<string>(nanoid());
+
   const {
     startStream,
     smoothExecuteResult,
@@ -107,7 +126,7 @@ export function ExecuteArea() {
     );
 
     if (historyHasEmpty) {
-      return Toast.error(I18n.t('historical_data_has_empty_content'));
+      return Toast.error('历史数据有空内容');
     }
 
     const placeholderHasError = messageList?.some(message => {
@@ -117,30 +136,40 @@ export function ExecuteArea() {
       return false;
     });
     if (placeholderHasError) {
-      return Toast.error(I18n.t('placeholder_var_error'));
+      return Toast.error('Placeholder 变量不存在或命名错误');
     }
 
     setHistoricMessage?.(history);
-    const newHistory = historicMessage
-      .slice(0, lastIndex - 1)
-      .map(it => ({
-        id: it.id,
-        role: it?.role,
-        content: it?.content,
-        parts: it?.parts,
-      }))
-      .filter(v => Boolean(v));
-
-    runLLM(
-      last
-        ? {
-            content: last.content,
-            role: last.role,
-            parts: last.parts,
-          }
-        : undefined,
-      newHistory,
-    );
+
+    if (isMultiGroup) {
+      setShowMultiGroupResult(true);
+      setTimeout(() => {
+        textRunAreaRefs.current.forEach((tref: ChatSubAreaRef | null) => {
+          tref?.sendMessage();
+        });
+      }, 300);
+    } else {
+      const newHistory = historicMessage
+        .slice(0, lastIndex - 1)
+        .map(it => ({
+          id: it.id,
+          role: it?.role,
+          content: it?.content,
+          parts: it?.parts,
+        }))
+        .filter(v => Boolean(v));
+
+      runLLM(
+        last
+          ? {
+              content: last.content,
+              role: last.role,
+              parts: last.parts,
+            }
+          : undefined,
+        newHistory,
+      );
+    }
   };
 
   const stopStreaming = () => {
@@ -164,7 +193,7 @@ export function ExecuteArea() {
 
   const sendMessage = (message?: Message) => {
     if (!messageList?.length && !(message?.content || message?.parts?.length)) {
-      Toast.error(I18n.t('add_prompt_tpl_or_input_question'));
+      Toast.error('请添加 Prompt 模板或输入提问内容');
       return;
     }
 
@@ -175,7 +204,7 @@ export function ExecuteArea() {
       return false;
     });
     if (placeholderHasError) {
-      return Toast.error(I18n.t('placeholder_var_execute_error'));
+      return Toast.error('Placeholder 变量不存在或命名错误');
     }
     const chatArray = historicMessage.filter(v => Boolean(v));
     const historyHasEmpty = Boolean(
@@ -188,9 +217,18 @@ export function ExecuteArea() {
         }),
     );
 
+    if (isMultiGroup && (message?.content || message?.parts?.length)) {
+      const hasResult = textRunAreaRefs.current.some(it => it?.hasResult);
+
+      if (hasResult) {
+        Toast.warning('请先采纳运行建议');
+        return;
+      }
+    }
+
     if (message?.content || message?.parts?.length) {
       if (historyHasEmpty) {
-        return Toast.error(I18n.t('historical_data_has_empty_content'));
+        return Toast.error('历史数据有空内容');
       }
 
       if (message) {
@@ -207,32 +245,63 @@ export function ExecuteArea() {
         ]);
       }
 
-      const history = chatArray.map(it => ({
-        role: it.role,
-        content: it.content,
-        parts: it.parts,
-      }));
-      runLLM(message, history);
-    } else if (chatArray.length) {
-      const last = chatArray?.[chatArray.length - 1];
-      if (last.role === Role.Assistant) {
-        rerunSendMessage();
+      if (isMultiGroup) {
+        setShowMultiGroupResult(true);
+        setTimeout(() => {
+          textRunAreaRefs.current.forEach((tref: ChatSubAreaRef | null) => {
+            tref?.sendMessage();
+          });
+        }, 300);
       } else {
-        if (historyHasEmpty && chatArray.length > 2) {
-          return Toast.error(I18n.t('historical_data_has_empty_content'));
-        }
-        const history = chatArray.slice(0, chatArray.length - 1).map(it => ({
+        const history = chatArray.map(it => ({
           role: it.role,
           content: it.content,
           parts: it.parts,
         }));
-        runLLM(
-          { content: last.content, role: last.role, parts: last.parts },
-          history,
-        );
+        runLLM(message, history);
+      }
+    } else if (chatArray.length) {
+      const last = chatArray?.[chatArray.length - 1];
+      if (isMultiGroup) {
+        setShowMultiGroupResult(true);
+        if (last?.role === Role.Assistant) {
+          const newHistory = chatArray.slice(0, chatArray.length - 1);
+          setHistoricMessage?.(newHistory);
+        }
+        setTimeout(() => {
+          textRunAreaRefs.current.forEach((tref: ChatSubAreaRef | null) => {
+            tref?.sendMessage();
+          });
+        }, 300);
+      } else {
+        if (last.role === Role.Assistant) {
+          rerunSendMessage();
+        } else {
+          if (historyHasEmpty && chatArray.length > 2) {
+            return Toast.error('历史数据有空内容');
+          }
+          const history = chatArray.slice(0, chatArray.length - 1).map(it => ({
+            role: it.role,
+            content: it.content,
+            parts: it.parts,
+          }));
+          runLLM(
+            { content: last.content, role: last.role, parts: last.parts },
+            history,
+          );
+        }
       }
     } else {
-      runLLM(undefined, []);
+      if (isMultiGroup) {
+        setShowMultiGroupResult(true);
+        setTimeout(() => {
+          textRunAreaRefs.current.forEach((tref: ChatSubAreaRef | null) => {
+            tref?.sendMessage();
+          });
+        }, 300);
+      } else {
+        runLLM(undefined, []);
+      }
     }
   };
 
@@ -278,12 +347,43 @@ export function ExecuteArea() {
     }
   }, [respondingStatus, stepDebuggingTrace]);
 
+  useEffect(() => {
+    setArray(arr => {
+      if (arr.length >= groupNum) {
+        return arr.slice(0, groupNum);
+      } else {
+        const newArr = new Array(groupNum - arr.length).fill(0);
+        const newArray = newArr.map(() => ({ key: messageId() }));
+        return arr.concat(newArray);
+      }
+    });
+  }, [groupNum]);
+
+  const streamingSendEnd = () => {
+    const hasStreaming = array.some(
+      (_it, index) => textRunAreaRefs.current?.[index]?.streaming,
+    );
+    setStreaming?.(hasStreaming);
+  };
+
+  const onClearHistory = () => {
+    textRunAreaRefs.current.forEach((tref: ChatSubAreaRef | null) => {
+      tref?.clearHistory();
+    });
+    setShowMultiGroupResult(false);
+  };
+
+  useEffect(() => {
+    setShowMultiGroupResult(false);
+  }, [groupType]);
+
   return (
     <div
-      className="flex-1 box-border flex flex-col overflow-hidden"
+      className="flex-1 box-border flex flex-col overflow-hidden gap-1"
       style={{ padding: '18px 0 24px 18px' }}
     >
       <CompareMessageArea
+        ref={messageAreaRef}
         streaming={streaming}
         streamingMessage={smoothExecuteResult}
         historicMessage={historicMessage}
@@ -294,12 +394,52 @@ export function ExecuteArea() {
         stepDebuggingTrace={stepDebuggingTrace}
         setToolCalls={setToolCalls}
         stepSendMessage={stepSendMessage}
+        isMultiGroup={isMultiGroup}
       />
-      <SendMsgArea
-        streaming={streaming}
-        onMessageSend={sendMessage}
-        stopStreaming={stopStreaming}
+
+      {isMultiGroup ? (
+        <div
+          className={classNames('flex gap-1 overflow-x-auto h-1/2 px-1 pt-1', {
+            '!h-0': !showMultiGroupResult,
+            'opacity-0': !showMultiGroupResult,
+          })}
+          key={acceptKey}
+        >
+          {array.map((item, index) => (
+            <ChatSubArea
+              className="!w-1/2 !min-w-[400px] flex-shrink-0"
+              key={item.key}
+              index={index}
+              times={groupNum}
+              ref={el => (textRunAreaRefs.current[index] = el)}
+              streamingSendEnd={streamingSendEnd}
+              acceptResult={message => {
+                if (message) {
+                  setHistoricMessage?.(prev => [...prev, message]);
+                  setArray(arr => arr.map(it => ({ ...it, key: messageId() })));
+                  messageAreaRef?.current?.scrollToBottom();
+                  setShowMultiGroupResult(false);
+                  setAcceptKey(nanoid());
+                }
+              }}
+            />
+          ))}
+        </div>
+      ) : null}
+      <BenefitBanner
+        closable={false}
+        className="mb-2 mr-6"
+        scene={BenefitBannerScene.PromptDetail}
       />
+      <GroupSelectContext.Provider value={{ groupNum, setGroupNum }}>
+        <SendMsgArea
+          streaming={streaming}
+          onMessageSend={sendMessage}
+          stopStreaming={stopStreaming}
+          onClearHistory={onClearHistory}
+          isSingleRound={showMultiGroupResult}
+        />
+      </GroupSelectContext.Provider>
     </div>
   );
 }
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/index.tsx
index fd430dd99..f64d777ac 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/index.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 
 import { useEffect, useRef, useState } from 'react';
@@ -11,7 +9,6 @@ import {
   getEndTime,
   getStartTime,
 } from '@cozeloop/observation-component-adapter';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { ResizeSidesheet } from '@cozeloop/components';
 import { useSpace } from '@cozeloop/biz-hooks-adapter';
 import { type DebugLog } from '@cozeloop/api-schema/prompt';
@@ -144,7 +141,7 @@ export const ExecuteHistoryPanel = ({
                 size="small"
                 color="secondary"
               >
-                {loadingMore ? I18n.t('loading') : I18n.t('load_more')}
+                {loadingMore ? '加载中' : '加载更多'}
               </Button>
             )}
           </div>
@@ -159,7 +156,7 @@ export const ExecuteHistoryPanel = ({
         <Empty
           image={<IconCozIllusEmpty width="160" height="160" />}
           darkModeImage={<IconCozIllusEmptyDark width="160" height="160" />}
-          description={I18n.t('no_debug_record')}
+          description="暂无调试记录"
         />
       </div>
     ) : (
@@ -198,7 +195,7 @@ export const ExecuteHistoryPanel = ({
         borderTop: '1px solid var(--semi-color-border)',
         overflowY: 'hidden',
       }}
-      title={I18n.t('debug_history')}
+      title="调试历史"
       zIndex={9}
     >
       <div className="flex w-full h-full" ref={dom}>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/query-item.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/query-item.tsx
index 52ded3187..e84795a84 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/query-item.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/execute-history-panel/query-item.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { type CSSProperties } from 'react';
 
 import classNames from 'classnames';
@@ -9,7 +7,6 @@ import {
   IconCozCrossCircleFill,
 } from '@coze-arch/coze-design/icons';
 import { Tag, Typography } from '@coze-arch/coze-design';
-import { I18n } from '@cozeloop/i18n-adapter';
 
 export enum Status {
   Success = 'success',
@@ -54,11 +51,9 @@ export const QueryItem = ({
     </Typography.Text>
     <div className="flex flex-col gap-1">
       <div className="flex items-center gap-2">
-        <Typography.Text type="tertiary">
-          {I18n.t('time_consumed')}:
-        </Typography.Text>
+        <Typography.Text type="tertiary">耗时:</Typography.Text>
         <Typography.Text>{formateMsToSeconds(costMs)}</Typography.Text>
-        <Typography.Text type="tertiary">{I18n.t('tokens')}:</Typography.Text>
+        <Typography.Text type="tertiary">Tokens:</Typography.Text>
         <Typography.Text>{duration}</Typography.Text>
         {status === Status.Success ? (
           <Tag
@@ -66,18 +61,16 @@ export const QueryItem = ({
             color="green"
             prefixIcon={<IconCozCheckMarkCircleFill />}
           >
-            {I18n.t('success')}
+            成功
           </Tag>
         ) : (
           <Tag size="mini" color="red" prefixIcon={<IconCozCrossCircleFill />}>
-            {I18n.t('failure')}
+            失败
           </Tag>
         )}
       </div>
       <div className="flex gap-2">
-        <Typography.Text type="tertiary">
-          {I18n.t('request_initiation_time')}:
-        </Typography.Text>
+        <Typography.Text type="tertiary">请求发起时间:</Typography.Text>
         <Typography.Text
           ellipsis={{
             showTooltip: {
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/index.tsx
index c76e94c05..bd0f15a36 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/index.tsx
@@ -1,20 +1,20 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
+import { useShallow } from 'zustand/react/shallow';
 import {
   type PromptBasicEditorRef,
   PromptEditor,
   type PromptEditorProps,
 } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
-import { handleCopy } from '@cozeloop/components';
+import { EditorTools } from '@cozeloop/biz-components-adapter';
 import { Role } from '@cozeloop/api-schema/prompt';
-import { IconCozCopy, IconCozTrashCan } from '@coze-arch/coze-design/icons';
-import { IconButton, Popconfirm, Space } from '@coze-arch/coze-design';
 
-interface LoopPromptEditorProps extends PromptEditorProps {
+import { usePromptStore } from '@/store/use-prompt-store';
+
+interface LoopPromptEditorProps extends PromptEditorProps<string> {
   onDelete?: (id?: Int64) => void;
+  optimizeBtnHidden?: boolean;
   showDragBtn?: boolean;
   children?: React.ReactNode;
 }
@@ -23,6 +23,11 @@ export const LoopPromptEditor = forwardRef<
   PromptBasicEditorRef,
   LoopPromptEditorProps
 >(({ showDragBtn, messageTypeList, ...restProps }, ref) => {
+  const { promptInfo } = usePromptStore(
+    useShallow(state => ({
+      promptInfo: state.promptInfo,
+    })),
+  );
   const editorRef = useRef<PromptBasicEditorRef>(null);
 
   useImperativeHandle(ref, () => ({
@@ -32,42 +37,33 @@ export const LoopPromptEditor = forwardRef<
     insertText: (text: string) => {
       editorRef.current?.insertText?.(text);
     },
+    getEditor: () => editorRef.current?.getEditor?.() || null,
   }));
 
+  useEffect(() => {
+    if (!restProps.optimizeBtnHidden) {
+      if (!window.optimizeEditorMap) {
+        window.optimizeEditorMap = {};
+      }
+      window.optimizeEditorMap[
+        restProps?.message?.key || restProps?.message?.id || ''
+      ] = editorRef.current;
+    }
+  }, [restProps.optimizeBtnHidden]);
+
   return (
     <>
       <PromptEditor
         ref={editorRef}
         rightActionBtns={
-          <Space>
-            <IconButton
-              icon={<IconCozCopy />}
-              color="secondary"
-              size="mini"
-              onClick={() => handleCopy(restProps.message?.content || '')}
-            />
-            {!restProps.onDelete ? null : (
-              <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={() =>
-                  restProps.onDelete?.(
-                    `${restProps.message?.key || restProps.message?.id || ''}`,
-                  )
-                }
-              >
-                <IconButton
-                  icon={<IconCozTrashCan />}
-                  color="secondary"
-                  size="mini"
-                  disabled={restProps.disabled}
-                />
-              </Popconfirm>
-            )}
-          </Space>
+          <EditorTools<Role>
+            onDelete={restProps.onDelete}
+            disabled={restProps.disabled}
+            message={restProps.message as any}
+            promptInfo={promptInfo}
+            onMessageChange={restProps.onMessageChange}
+            optimizeBtnHidden={restProps.optimizeBtnHidden}
+          />
         }
         dragBtnHidden={!showDragBtn}
         messageTypeList={
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/render-dom.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/render-dom.tsx
new file mode 100644
index 000000000..84406dcdc
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/render-dom.tsx
@@ -0,0 +1,25 @@
+import { createRoot, type Root } from 'react-dom/client';
+
+interface RenderDomResult {
+  dom: HTMLSpanElement;
+  root: Root;
+  destroy: () => void;
+}
+
+export const renderDom = <T extends {}>(
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Comp: React.ComponentType<T>,
+  props: T,
+): RenderDomResult => {
+  const dom = document.createElement('span');
+  const root = createRoot(dom);
+  root.render(<Comp {...props} />);
+
+  return {
+    dom,
+    root,
+    destroy() {
+      root.unmount();
+    },
+  };
+};
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.module.less
new file mode 100644
index 000000000..ba4a7ac08
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.module.less
@@ -0,0 +1,20 @@
+.skill-widget {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0px 4px;
+  border-radius: 3px;
+  background: var(--Brand-Purple-Brand-3, #EFF1FF);
+  color: var(--Brand-Purple-Brand-7, #B0B9FF);
+
+  font-family: "PingFang SC";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  margin: 0 2px;
+  vertical-align: bottom;
+  cursor: pointer;
+  border: 0.5px solid transparent;
+  position: relative;
+
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.tsx
new file mode 100644
index 000000000..299eba019
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/index.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useLayoutEffect } from 'react';
+
+import {
+  astDecorator,
+  type EditorAPIPrompt,
+  useEditor,
+  useInjector,
+  useLatest,
+} from '@cozeloop/prompt-components';
+
+import { type SkillDataInfo, SkillWidget } from './widget';
+import { TemplateParser } from './template-parser';
+
+const templateParser = new TemplateParser({ mark: 'LibraryBlock' });
+
+export default function LibraryBlockWidget({ librarys }: { librarys?: any[] }) {
+  const editor = useEditor<EditorAPIPrompt>();
+  const injector = useInjector();
+  const librarysRef = useLatest(librarys);
+
+  useLayoutEffect(
+    () =>
+      injector.inject([
+        astDecorator.whole.of((cursor, state) => {
+          if (templateParser.isOpenNode(cursor.node, state)) {
+            const open = cursor.node;
+            const close = templateParser.findCloseNode(open, state);
+
+            if (close) {
+              const openTemplate = state.sliceDoc(open.from, open.to);
+
+              const dataInfo = templateParser.getData(
+                openTemplate,
+              ) as SkillDataInfo;
+
+              return [
+                {
+                  type: 'replace',
+                  widget: new SkillWidget({
+                    librarys: librarysRef.current,
+                    dataInfo,
+                    readonly: false,
+                    from: open.from,
+                    to: close.to,
+                  }),
+                  atomicRange: true,
+                  from: open.from,
+                  to: close.to,
+                },
+              ];
+            }
+          }
+        }),
+        templateParser.markInfoField,
+      ]),
+    [injector],
+  );
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor?.updateWholeDecorations();
+  }, [editor]);
+
+  return null;
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/template-parser.ts b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/template-parser.ts
new file mode 100644
index 000000000..1205a38fd
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/template-parser.ts
@@ -0,0 +1,369 @@
+// import { type EditorAPIPrompt } from '@coze-editor/editor/preset-prompt';
+
+import {
+  type EditorAPIPrompt,
+  type EditorState,
+  type SelectionEnlargerSpec,
+  StateField,
+  type SyntaxNode,
+  syntaxTree,
+} from '@cozeloop/prompt-components';
+
+export interface MarkRange {
+  from: number;
+  to: number;
+}
+export interface MarkRangeInfo {
+  from: number;
+  to: number;
+  open: MarkRange;
+  close: MarkRange;
+}
+
+// 解析模板字符串: {#slot name="slot_name" #}xxx{#/slot#}
+export class TemplateParser {
+  public mark!: 'LibraryBlock' | 'InputSlot';
+  private openReg!: RegExp;
+  private closeReg!: RegExp;
+  public markInfoField!: StateField<{
+    specs: SelectionEnlargerSpec[];
+    contents: MarkRange[];
+    marks: MarkRangeInfo[];
+  }>;
+  static instances = new Map<string, TemplateParser>();
+  constructor(props: { mark: 'LibraryBlock' | 'InputSlot' }) {
+    if (TemplateParser.instances.has(props.mark)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return TemplateParser.instances.get(props.mark)!;
+    }
+    const { mark } = props;
+    this.mark = mark;
+    this.openReg = new RegExp(`^\\{#\\s*${mark}`);
+    this.closeReg = new RegExp(`^\\{#\\s*\/${mark}`);
+    this.markInfoField = this.getMarkInfoField();
+    TemplateParser.instances.set(mark, this);
+  }
+
+  getMarkInfoField() {
+    return StateField.define({
+      create: state => this.getMarkSpecs(state),
+      update: (value, tr) => {
+        if (tr.docChanged) {
+          return this.getMarkSpecs(tr.state);
+        }
+        return value;
+      },
+    });
+  }
+
+  isOpenNode(node: SyntaxNode, state: EditorState) {
+    if (!node || node.name !== 'JinjaComment') {
+      return false;
+    }
+
+    const text = state.sliceDoc(node.from, node.to);
+    return this.openReg.test(text);
+  }
+
+  isCloseNode(node: SyntaxNode, state: EditorState) {
+    if (!node || node.name !== 'JinjaComment') {
+      return false;
+    }
+
+    const text = state.sliceDoc(node.from, node.to);
+    return this.closeReg.test(text);
+  }
+
+  getCursorInMarkNodeRange(state: EditorState): MarkRangeInfo | null {
+    const cursor = state.selection.main.head;
+    return this.getPostionInMarkNodeRange(cursor, state);
+  }
+
+  getSelectionInMarkNodeRange(
+    range: { from: number; to: number },
+    state: EditorState,
+  ): MarkRangeInfo | null {
+    return (
+      this.getPostionInMarkNodeRange(range.from, state) &&
+      this.getPostionInMarkNodeRange(range.to, state)
+    );
+  }
+
+  getPostionInMarkNodeRange(postion: number, state: EditorState) {
+    const markRangeInfo = state
+      .field(this.markInfoField)
+      .marks.find(
+        rangeInfo => rangeInfo.from < postion && postion < rangeInfo.to,
+      );
+    if (markRangeInfo) {
+      return markRangeInfo;
+    }
+    return null;
+  }
+
+  findCloseNode(node: SyntaxNode, state: EditorState) {
+    let next = node.nextSibling;
+    let close: SyntaxNode | null = null;
+    while (next) {
+      if (this.isCloseNode(next, state)) {
+        close = next;
+        break;
+      }
+      next = next.nextSibling;
+    }
+
+    return close;
+  }
+
+  // 解析模板字符串: {#slot id="slot_id" value="slot_value"#}，获取所有属性
+  getData(templateString: string): { [key: string]: string } | null {
+    // 根据传入的类型构造正则表达式，例如 slot 或 block
+    const regex = new RegExp(`\\{#${this.mark}\\s+([^#]+)#\\}`, 'g');
+    const match = regex.exec(templateString);
+    if (match !== null) {
+      const attributes = match[1].trim(); // 匹配到的属性部分
+      const obj: { [key: string]: string } = {}; // 初始对象
+
+      // 使用更简单的方法：先按空格分割，然后解析每个属性
+      const attrParts = attributes.split(/\s+/);
+
+      for (const part of attrParts) {
+        if (part.includes('=')) {
+          const equalIndex = part.indexOf('=');
+          const key = part.substring(0, equalIndex);
+          let value = part.substring(equalIndex + 1);
+
+          // 处理引号包围的值
+          if (value.startsWith('"') && value.endsWith('"')) {
+            value = value.slice(1, -1); // 移除首尾引号
+          } else if (value.startsWith('\\"') && value.endsWith('\\"')) {
+            value = value.slice(2, -2); // 移除首尾引号
+          }
+
+          obj[key] = value;
+        }
+      }
+
+      return obj; // 返回解析结果
+    }
+
+    return null; // 没有匹配时返回 null
+  }
+
+  getCursorTemplateData(state: EditorState) {
+    const markRangeInfo = this.getCursorInMarkNodeRange(state);
+    if (!markRangeInfo) {
+      return;
+    }
+    const { from, to } = markRangeInfo.open;
+    const text = state.sliceDoc(from, to);
+    return this.getData(text);
+  }
+
+  getAllMarksByState(state: EditorState): MarkRangeInfo[] {
+    const marks: MarkRangeInfo[] = [];
+    const tree = syntaxTree(state);
+    const cursor = tree.cursor();
+    do {
+      if (this.isOpenNode(cursor.node, state)) {
+        const open = cursor.node;
+        const close = this.findCloseNode(cursor.node, state);
+        if (close) {
+          marks.push({
+            from: open.from,
+            to: close.to,
+            open: { from: open.from, to: open.to },
+            close: { from: close.from, to: close.to },
+          });
+        }
+      }
+    } while (cursor.next());
+    return marks;
+  }
+
+  getMarkSpecs(state: EditorState): {
+    specs: SelectionEnlargerSpec[];
+    contents: MarkRange[];
+    marks: MarkRangeInfo[];
+  } {
+    const marks = this.getAllMarksByState(state);
+    const specs: SelectionEnlargerSpec[] = [];
+    const contents: MarkRange[] = [];
+    marks.forEach((markRangeInfo: MarkRangeInfo) => {
+      specs.push({
+        source: {
+          from: markRangeInfo.open.from,
+          to: markRangeInfo.open.to,
+        },
+        target: {
+          from: markRangeInfo.from,
+          to: markRangeInfo.to,
+        },
+      });
+      specs.push({
+        source: {
+          from: markRangeInfo.close.from,
+          to: markRangeInfo.close.to,
+        },
+        target: {
+          from: markRangeInfo.from,
+          to: markRangeInfo.to,
+        },
+      });
+      contents.push({
+        from: markRangeInfo.open.to,
+        to: markRangeInfo.close.from,
+      });
+    });
+    return { specs, contents, marks };
+  }
+
+  /**
+   * 修改当前光标所在位置的模板数据: {#slot placeholder="default_placeholder"#} 修改为 {#slot placeholder="new_placeholder"#}
+   * 新增: {#slot placeholder="default_placeholder"#} 新增 {#slot value="new_value" placeholder="new_placeholder"#}
+   */
+  updateCursorTemplateData(
+    editor: EditorAPIPrompt,
+    data: { [key: string]: string },
+  ) {
+    const { state } = editor.$view;
+    const markRangeInfo = this.getCursorInMarkNodeRange(state);
+    if (!markRangeInfo) {
+      return;
+    }
+    const { from, to } = markRangeInfo.open;
+    const text = state.sliceDoc(from, to);
+    const preData = this.getData(text);
+    const newData = { ...preData, ...data };
+    if (!preData) {
+      this.addCursorTemplateData(editor, newData);
+      return;
+    }
+    const newText = this.generateOpenTemplateByData(newData);
+    editor.$view.dispatch({
+      changes: {
+        from,
+        to,
+        insert: newText,
+      },
+    });
+  }
+  addCursorTemplateData(
+    editor: EditorAPIPrompt,
+    data: { [key: string]: string },
+  ) {
+    const { state } = editor.$view;
+    const markRangeInfo = this.getCursorInMarkNodeRange(state);
+    if (!markRangeInfo) {
+      return;
+    }
+    const { from, to } = markRangeInfo.open;
+    const text = state.sliceDoc(from, to);
+    const preData = this.getData(text);
+    const newData = { ...preData, ...data };
+    const newText = this.generateOpenTemplateByData(newData);
+    editor.replaceTextByRange({
+      from,
+      to,
+      text: newText,
+    });
+  }
+  generateOpenTemplateByData(data: { [key: string]: string }) {
+    const keys = Object.keys(data);
+    const values = Object.values(data);
+    const text = keys
+      .map((key, index) => `${key}="${values[index]}"`)
+      .join(' ');
+    return `{#${this.mark} ${text}#}`;
+  }
+  generateTemplate({
+    content,
+    data,
+  }: {
+    content: string;
+    data: { [key: string]: string };
+  }) {
+    const openTemplate = this.generateOpenTemplateByData(data);
+    const closeTemplate = `{#/${this.mark}#}`;
+    return `${openTemplate}${content}${closeTemplate}`;
+  }
+  generateTemplateJson({
+    content,
+    data,
+  }: {
+    content: string;
+    data: { [key: string]: string };
+  }) {
+    const openTemplate = this.generateOpenTemplateByData(data);
+    const closeTemplate = `{#/${this.mark}#}`;
+    const textContent = this.extractTemplateContent(content);
+    return {
+      open: openTemplate,
+      close: closeTemplate,
+      textContent,
+      template: `${openTemplate}${content}${closeTemplate}`,
+    };
+  }
+  updateCursorTemplateContent(editor: EditorAPIPrompt, content: string) {
+    const { state } = editor.$view;
+    const markRangeInfo = this.getCursorInMarkNodeRange(state);
+    if (!markRangeInfo) {
+      return;
+    }
+    editor.replaceTextByRange({
+      from: markRangeInfo.open.to,
+      to: markRangeInfo.close.from,
+      text: content,
+    });
+  }
+  getCursorTemplateContent(editor: EditorAPIPrompt) {
+    const { state } = editor.$view;
+    const markRangeInfo = this.getCursorInMarkNodeRange(state);
+    if (!markRangeInfo) {
+      return;
+    }
+    return state.sliceDoc(markRangeInfo.open.to, markRangeInfo.close.from);
+  }
+
+  insertTemplateByCursor(editor: EditorAPIPrompt, template: string) {
+    const { state } = editor.$view;
+    const cursorPosition = state.selection.main.head;
+    if (!cursorPosition) {
+      return;
+    }
+    editor.$view.dispatch({
+      changes: {
+        from: cursorPosition,
+        to: cursorPosition,
+        insert: template,
+      },
+    });
+  }
+
+  insertTemplateByRange(
+    editor: EditorAPIPrompt,
+    template: string,
+    range: { from: number; to: number },
+  ) {
+    const { from, to } = range;
+    editor.$view.dispatch({
+      changes: {
+        from,
+        to,
+        insert: template,
+      },
+    });
+  }
+  // 提取模板中内容{#InputSlot placeholder="placeholder"#}123{#/InputSlot#}xxx，嵌套模板下内部所有的content
+  extractTemplateContent(template: string) {
+    // 使用正则表达式匹配 {#InputSlot ... #} 的部分
+    const regex = new RegExp(
+      `\\{#${this.mark}\\s+[^#]+#\\}|\\{#\\/${this.mark}#\\}`,
+      'g',
+    );
+    // 使用 replace 方法替换掉匹配的部分
+    const result = template.replace(regex, '');
+    console.log('extractTemplateContent', result);
+    return result;
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/widget.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/widget.tsx
new file mode 100644
index 000000000..d3c15c207
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/loop-prompt-editor/widgets/skill/widget.tsx
@@ -0,0 +1,135 @@
+/* eslint-disable @coze-arch/no-deep-relative-import */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { type Root } from 'react-dom/client';
+import classNames from 'classnames';
+import { type EditorView, WidgetType } from '@cozeloop/prompt-components';
+import { Tooltip } from '@coze-arch/coze-design';
+
+import { renderDom } from '../render-dom';
+
+import styles from './index.module.less';
+
+export interface SkillDataInfo {
+  apiId?: string;
+  id?: string;
+  type?: string;
+  uuid?: string;
+}
+
+interface SkillDisplayProps {
+  librarys?: any[];
+  dataInfo?: SkillDataInfo;
+  readonly?: boolean;
+}
+
+import {
+  pluginIcon,
+  workflowIcon,
+  imageflowIcon,
+  tableIcon,
+  textIcon,
+  imageIcon,
+  volcanoIcon,
+} from '../../../../assets/library-block';
+
+const defaultLibraryBlockInfo: Record<
+  string,
+  {
+    icon: string;
+  }
+> = {
+  plugin: {
+    icon: pluginIcon,
+  },
+  workflow: {
+    icon: workflowIcon,
+  },
+  imageflow: {
+    icon: imageflowIcon,
+  },
+  table: {
+    icon: tableIcon,
+  },
+  text: {
+    icon: textIcon,
+  },
+  image: {
+    icon: imageIcon,
+  },
+  volcanoStructured: {
+    icon: volcanoIcon,
+  },
+  volcanoUnstructured: {
+    icon: volcanoIcon,
+  },
+};
+
+const SkillDisPlay: React.FC<SkillDisplayProps> = ({
+  librarys,
+  dataInfo,
+  readonly,
+}) => {
+  const library = librarys?.find(it => it.id === dataInfo?.id);
+
+  return (
+    <Tooltip content="扣子罗盘暂不支持技能引用与调试" theme="dark">
+      <span className={classNames(styles['skill-widget'])}>
+        <img
+          src={defaultLibraryBlockInfo[dataInfo?.type ?? '']?.icon}
+          className="w-3 h-3"
+        />
+        <span>{library?.name || dataInfo?.uuid}</span>
+      </span>
+    </Tooltip>
+  );
+};
+
+interface SkillWidgetOptions {
+  librarys?: any[];
+  dataInfo?: {
+    apiId?: string;
+    id?: string;
+    type?: string;
+    uuid?: string;
+  };
+  readonly?: boolean;
+  from: number;
+  to: number;
+}
+
+export class SkillWidget extends WidgetType {
+  root?: Root;
+
+  constructor(public options: SkillWidgetOptions) {
+    super();
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const { root, dom } = renderDom<SkillDisplayProps>(SkillDisPlay, {
+      librarys: this.options.librarys,
+      dataInfo: this.options.dataInfo,
+      readonly: this.options.readonly,
+    });
+    this.root = root;
+    return dom;
+  }
+
+  getEqKey() {
+    return [
+      this.options.dataInfo?.id,
+      this.options.dataInfo?.type,
+      this.options.dataInfo?.uuid,
+      this.options.from,
+      this.options.to,
+    ].join('');
+  }
+
+  eq(prev) {
+    return prev.getEqKey() === this.getEqKey();
+  }
+
+  destroy(): void {
+    this.root?.unmount();
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.module.less
index 9f4528276..a601c3467 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable declaration-no-important */
 .compare-execute {
   overflow: hidden;
@@ -84,7 +82,7 @@
   position: relative;
 
   overflow: hidden auto;
-  // flex flex-col flex-1 overflow-y-auto overflow-x-hidden
+
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -135,3 +133,20 @@
     }
   }
 }
+
+.execute-sub-area-content{
+  position: relative;
+  overflow-y: auto;
+  flex:1;
+  padding: 4px 8px;
+
+  &-img {
+    position: absolute;
+    top: calc(50% - 24px);
+    left: calc(50% - 24px);
+
+    width: 48px;
+
+    opacity: 0.6;
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.tsx
index 2d7e50100..3c78e3fc3 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/message-area/index.tsx
@@ -1,9 +1,10 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @coze-arch/max-line-per-function */
 import {
+  forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
   type Dispatch,
@@ -43,230 +44,256 @@ interface CompareMessageAreaProps {
   stepDebuggingTrace?: string;
   setToolCalls?: Dispatch<SetStateAction<DebugToolCall[]>>;
   stepSendMessage?: () => void;
+  isMultiGroup?: boolean;
 }
 
-export function CompareMessageArea({
-  uid,
-  className,
-  rerunLLM,
-  streaming,
-  streamingMessage,
-  toolCalls,
-  reasoningContentResult,
-  stepDebuggingTrace,
-  setToolCalls,
-  stepSendMessage,
-}: CompareMessageAreaProps) {
-  const {
-    messageList,
-    modelConfig,
-    currentModel,
-    mockTools,
-    historicMessage,
-    setHistoricMessage,
-  } = useCompare(uid);
-
-  const isMultiModal = currentModel?.ability?.multi_modal;
-  const domRef = useRef<HTMLDivElement>(null);
-  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
-  const [showScrollButton, setShowScrollButton] = useState(false);
-  const [buttonStyle, setButtonStyle] = useState({});
-  const [isInScroll, setIsInScroll] = useState(false);
-  const buttonRef = useRef<HTMLDivElement>(null);
+export interface CompareMessageAreaRef {
+  scrollToBottom: () => void;
+}
 
-  const historyChatListStr = JSON.stringify(historicMessage);
+export const CompareMessageArea = forwardRef<
+  CompareMessageAreaRef,
+  CompareMessageAreaProps
+>(
+  (
+    {
+      uid,
+      className,
+      rerunLLM,
+      streaming,
+      streamingMessage,
+      toolCalls,
+      reasoningContentResult,
+      stepDebuggingTrace,
+      setToolCalls,
+      stepSendMessage,
+      isMultiGroup,
+    }: CompareMessageAreaProps,
+    ref,
+  ) => {
+    const {
+      messageList,
+      modelConfig,
+      currentModel,
+      mockTools,
+      historicMessage,
+      setHistoricMessage,
+      setMessageList,
+      mockVariables,
+    } = useCompare(uid);
 
-  const updateEditableByIdx = useCallback(
-    (editable: boolean, idx: number) => {
-      const historyChatList =
-        historicMessage?.map((it, index) => {
-          if (index === idx) {
-            return { ...it, isEdit: editable };
-          }
-          return { ...it, isEdit: false };
-        }) || [];
-      setHistoricMessage?.([...historyChatList]);
-    },
-    [historyChatListStr],
-  );
+    const isMultiModal = currentModel?.ability?.multi_modal;
+    const domRef = useRef<HTMLDivElement>(null);
+    const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+    const [showScrollButton, setShowScrollButton] = useState(false);
+    const [buttonStyle, setButtonStyle] = useState({});
+    const [isInScroll, setIsInScroll] = useState(false);
+    const buttonRef = useRef<HTMLDivElement>(null);
 
-  const updateTypeByIdx = useCallback(
-    (currentType: Role, idx: number) => {
-      const historyChatList =
-        historicMessage?.map(
-          (it: DebugMessage, index: number): DebugMessage => {
-            if (index === idx) {
-              const { parts = [], content } = it || {};
-              const newContent =
-                parts?.find(item => item?.type === ContentType.Text)?.text ||
-                content;
-              return {
-                ...it,
-                role: currentType,
-                parts: undefined,
-                content: newContent,
-                isEdit: false,
-              };
-            }
-            return { ...it, isEdit: false };
-          },
-        ) || [];
-      setHistoricMessage?.([...historyChatList]);
-    },
-    [historyChatListStr],
-  );
+    const historyChatListStr = JSON.stringify(historicMessage);
 
-  const updateMessageItemByIdx = useCallback(
-    (item: DebugMessage, idx: number) => {
-      const historyChatList =
-        historicMessage?.map(
-          (it: DebugMessage, index: number): DebugMessage => {
+    const updateEditableByIdx = useCallback(
+      (editable: boolean, idx: number) => {
+        const historyChatList =
+          historicMessage?.map((it, index) => {
             if (index === idx) {
-              return { ...it, ...item, isEdit: false };
+              return { ...it, isEdit: editable };
             }
             return { ...it, isEdit: false };
-          },
-        ) || [];
-      setHistoricMessage?.([...historyChatList]);
-    },
-    [historyChatListStr],
-  );
+          }) || [];
+        setHistoricMessage?.([...historyChatList]);
+      },
+      [historyChatListStr],
+    );
 
-  const deleteChatByIdx = useCallback(
-    (idx: number) => {
-      const historyChatList = historicMessage?.slice() || [];
-      historyChatList?.splice(idx, 1);
-      setHistoricMessage?.([...historyChatList]);
-    },
-    [historyChatListStr],
-  );
+    const updateTypeByIdx = useCallback(
+      (currentType: Role, idx: number) => {
+        const historyChatList =
+          historicMessage?.map(
+            (it: DebugMessage, index: number): DebugMessage => {
+              if (index === idx) {
+                const { parts = [], content } = it || {};
+                const newContent =
+                  parts?.find(item => item?.type === ContentType.Text)?.text ||
+                  content;
+                return {
+                  ...it,
+                  role: currentType,
+                  parts: undefined,
+                  content: newContent,
+                  isEdit: false,
+                };
+              }
+              return { ...it, isEdit: false };
+            },
+          ) || [];
+        setHistoricMessage?.([...historyChatList]);
+      },
+      [historyChatListStr],
+    );
 
-  useEffect(() => {
-    if ((streamingMessage || reasoningContentResult) && shouldAutoScroll) {
-      scrollToBottom(domRef); // 当streamingMessage变化时，自动滚动到底部
-    }
-  }, [streamingMessage, reasoningContentResult, shouldAutoScroll]); // 依赖于streamingMessage和shouldAutoScroll
+    const updateMessageItemByIdx = useCallback(
+      (item: DebugMessage, idx: number) => {
+        const historyChatList =
+          historicMessage?.map(
+            (it: DebugMessage, index: number): DebugMessage => {
+              if (index === idx) {
+                return { ...it, ...item, isEdit: false };
+              }
+              return { ...it, isEdit: false };
+            },
+          ) || [];
+        setHistoricMessage?.([...historyChatList]);
+      },
+      [historyChatListStr],
+    );
 
-  const { run: handleScrollStop } = useDebounceFn(
-    () => {
-      setIsInScroll(false);
-    },
-    { wait: 300 },
-  );
+    const deleteChatByIdx = useCallback(
+      (idx: number) => {
+        const historyChatList = historicMessage?.slice() || [];
+        historyChatList?.splice(idx, 1);
+        setHistoricMessage?.([...historyChatList]);
+      },
+      [historyChatListStr],
+    );
 
-  useEffect(() => {
-    const handleUserScroll = () => {
-      if (!domRef.current) {
-        setShouldAutoScroll(false);
-        return;
+    useEffect(() => {
+      if ((streamingMessage || reasoningContentResult) && shouldAutoScroll) {
+        scrollToBottom(domRef); // 当streamingMessage变化时，自动滚动到底部
       }
+    }, [streamingMessage, reasoningContentResult, shouldAutoScroll]); // 依赖于streamingMessage和shouldAutoScroll
 
-      const { scrollTop, scrollHeight, clientHeight } = domRef.current;
-      const isAtBottom = scrollHeight - clientHeight <= scrollTop + 1;
+    const { run: handleScrollStop } = useDebounceFn(
+      () => {
+        setIsInScroll(false);
+      },
+      { wait: 300 },
+    );
 
-      setShowScrollButton(!isAtBottom);
-      setIsInScroll(true);
-      handleScrollStop();
-      // 计算按钮位置
-      if (domRef.current && buttonRef.current) {
-        const bottom = 20 - scrollTop;
-        setButtonStyle({ bottom: `${bottom}px` });
-      }
+    useEffect(() => {
+      const handleUserScroll = () => {
+        if (!domRef.current) {
+          setShouldAutoScroll(false);
+          return;
+        }
 
-      if (!isAtBottom && shouldAutoScroll) {
-        setShouldAutoScroll(false);
-      } else if (isAtBottom && !shouldAutoScroll) {
-        setShouldAutoScroll(true);
-      }
-    };
+        const { scrollTop, scrollHeight, clientHeight } = domRef.current;
+        const isAtBottom = scrollHeight - clientHeight <= scrollTop + 1;
 
-    const scrollContainer = domRef.current;
-    scrollContainer?.addEventListener('scroll', handleUserScroll);
-    // 初始化时计算一次位置
-    handleUserScroll();
+        setShowScrollButton(!isAtBottom);
+        setIsInScroll(true);
+        handleScrollStop();
+        // 计算按钮位置
+        if (domRef.current && buttonRef.current) {
+          const bottom = 20 - scrollTop;
+          setButtonStyle({ bottom: `${bottom}px` });
+        }
 
-    return () => {
-      scrollContainer?.removeEventListener('scroll', handleUserScroll);
-      setIsInScroll(false);
-    };
-  }, [shouldAutoScroll]);
+        if (!isAtBottom && shouldAutoScroll) {
+          setShouldAutoScroll(false);
+        } else if (isAtBottom && !shouldAutoScroll) {
+          setShouldAutoScroll(true);
+        }
+      };
 
-  const handleScrollToBottom = useCallback(() => {
-    if (domRef.current) {
-      scrollToBottom(domRef);
-      setShouldAutoScroll(true);
-    }
-  }, []);
+      const scrollContainer = domRef.current;
+      scrollContainer?.addEventListener('scroll', handleUserScroll);
+      // 初始化时计算一次位置
+      handleUserScroll();
 
-  useEffect(() => {
-    if (!streaming) {
-      setShouldAutoScroll(true);
-    }
-  }, [streaming]);
+      return () => {
+        scrollContainer?.removeEventListener('scroll', handleUserScroll);
+        setIsInScroll(false);
+      };
+    }, [shouldAutoScroll]);
 
-  return (
-    <div
-      className={classNames(
-        styles['execute-area-content'],
-        'styled-scrollbar',
-        className,
-      )}
-      ref={domRef}
-    >
-      {historicMessage?.map((item: DebugMessage, index: number) => (
-        <MessageItem
-          modelConfig={modelConfig}
-          key={item.id}
-          item={item || {}}
-          lastItem={
-            historicMessage[index - 1] || {
-              message: messageList?.[messageList?.length - 1],
-            }
-          }
-          updateEditable={v => updateEditableByIdx(v, index)}
-          updateType={v => updateTypeByIdx(v, index)}
-          updateMessageItem={v => updateMessageItemByIdx(v, index)}
-          deleteChat={() => deleteChatByIdx(index)}
-          smooth={false}
-          rerunLLM={rerunLLM}
-          canReRun={
-            item.role === Role.Assistant && index === historicMessage.length - 1
-          }
-          canFile={isMultiModal && item.role === Role.User}
-          tools={mockTools}
-        />
-      ))}
-      {streaming ? (
-        <MessageItem
-          streaming
-          key="streaming"
-          item={{
-            role: Role.Assistant,
-            content: streamingMessage || '',
-            tool_calls: toolCalls,
-            reasoning_content: reasoningContentResult,
-          }}
-          smooth
-          stepDebuggingTrace={stepDebuggingTrace}
-          setToolCalls={setToolCalls}
-          tools={mockTools}
-          rerunLLM={rerunLLM}
-          stepSendMessage={stepSendMessage}
-        />
-      ) : null}
-      {historicMessage?.length || streaming ? null : (
-        <img src={peIcon} className={styles['execute-area-content-img']} />
-      )}
+    const handleScrollToBottom = useCallback(() => {
+      if (domRef.current) {
+        scrollToBottom(domRef);
+        setShouldAutoScroll(true);
+      }
+    }, []);
+
+    useEffect(() => {
+      if (!streaming) {
+        setShouldAutoScroll(true);
+      }
+    }, [streaming]);
+
+    useImperativeHandle(ref, () => ({
+      scrollToBottom: () => {
+        handleScrollToBottom();
+      },
+    }));
+
+    return (
       <div
-        ref={buttonRef}
-        className={classNames(styles['execute-area-content-to-bottom'], {
-          [styles.visible]: showScrollButton && !isInScroll,
-        })}
-        onClick={handleScrollToBottom}
-        style={buttonStyle}
+        className={classNames(
+          styles['execute-area-content'],
+          'styled-scrollbar',
+          className,
+        )}
+        ref={domRef}
       >
-        <IconCozArrowDown />
+        {historicMessage?.map((item: DebugMessage, index: number) => (
+          <MessageItem
+            modelConfig={modelConfig}
+            key={item.id}
+            item={item || {}}
+            lastItem={
+              historicMessage[index - 1] || {
+                message: messageList?.[messageList?.length - 1],
+              }
+            }
+            updateEditable={v => updateEditableByIdx(v, index)}
+            updateType={v => updateTypeByIdx(v, index)}
+            updateMessageItem={v => updateMessageItemByIdx(v, index)}
+            deleteChat={() => deleteChatByIdx(index)}
+            smooth={false}
+            rerunLLM={rerunLLM}
+            canReRun={
+              item.role === Role.Assistant &&
+              index === historicMessage.length - 1
+            }
+            canFile={isMultiModal && item.role === Role.User}
+            tools={mockTools}
+            messageList={messageList}
+            setMessageList={setMessageList as any}
+            variables={mockVariables}
+          />
+        ))}
+        {streaming && !isMultiGroup ? (
+          <MessageItem
+            streaming
+            key="streaming"
+            item={{
+              role: Role.Assistant,
+              content: streamingMessage || '',
+              tool_calls: toolCalls,
+              reasoning_content: reasoningContentResult,
+            }}
+            smooth
+            stepDebuggingTrace={stepDebuggingTrace}
+            setToolCalls={setToolCalls}
+            tools={mockTools}
+            rerunLLM={rerunLLM}
+            stepSendMessage={stepSendMessage}
+          />
+        ) : null}
+        {historicMessage?.length || streaming ? null : (
+          <img src={peIcon} className={styles['execute-area-content-img']} />
+        )}
+        <div
+          ref={buttonRef}
+          className={classNames(styles['execute-area-content-to-bottom'], {
+            [styles.visible]: showScrollButton && !isInScroll,
+          })}
+          onClick={handleScrollToBottom}
+          style={buttonStyle}
+        >
+          <IconCozArrowDown />
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+);
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/message-area/sub-area.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/message-area/sub-area.tsx
new file mode 100644
index 000000000..6aa441282
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/message-area/sub-area.tsx
@@ -0,0 +1,314 @@
+/* eslint-disable complexity */
+/* eslint-disable @coze-arch/max-line-per-function */
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import classNames from 'classnames';
+import {
+  type Message,
+  Role,
+  type DebugToolCall,
+} from '@cozeloop/api-schema/prompt';
+import {
+  IconCozArrowForward,
+  IconCozRefresh,
+  IconCozStopCircle,
+} from '@coze-arch/coze-design/icons';
+import { Button, Space, Tag } from '@coze-arch/coze-design';
+
+import { messageId } from '@/utils/prompt';
+import { createLLMRun } from '@/utils/llm';
+import {
+  usePromptMockDataStore,
+  type DebugMessage,
+} from '@/store/use-mockdata-store';
+import { useBasicStore } from '@/store/use-basic-store';
+import { isResponding, useLLMStreamRun } from '@/hooks/use-llm-stream-run';
+import { MessageListRoundType } from '@/consts';
+import peIcon from '@/assets/loop.svg';
+
+import { MessageItem } from '../message-item';
+
+import styles from './index.module.less';
+
+interface ChatSubAreaProps {
+  index: number;
+  times?: number;
+  className?: string;
+  streamingSendEnd?: () => void;
+  acceptResult?: (message?: DebugMessage) => void;
+}
+
+export interface ChatSubAreaRef {
+  streaming?: boolean;
+  hasResult?: boolean;
+  sendMessage: (userQuery?: string) => void;
+  clearHistory: () => void;
+}
+
+export const ChatSubArea = forwardRef<ChatSubAreaRef, ChatSubAreaProps>(
+  (
+    { index = 0, times = 0, streamingSendEnd, className, acceptResult },
+    ref,
+  ) => {
+    const {
+      setStreaming: setAllStreaming,
+      roundType,
+      streaming: allStreaming,
+    } = useBasicStore(
+      useShallow(state => ({
+        streaming: state.streaming,
+        setStreaming: state.setStreaming,
+        roundType: state.roundType,
+      })),
+    );
+
+    const { historicChat, mockTools } = usePromptMockDataStore(
+      useShallow(state => ({
+        userDebugConfig: state.userDebugConfig,
+        historicChat: state.historicMessage,
+        mockTools: state.mockTools,
+      })),
+    );
+
+    const isSingleRound = roundType === MessageListRoundType.Single;
+
+    const [streaming, setStreaming] = useState(false);
+    const [hasResult, setHasResult] = useState(false);
+    const [toolCalls, setToolCalls] = useState<DebugToolCall[]>([]);
+    const [currentHistory, setCurrentHistory] = useState<DebugMessage[]>([]);
+
+    const {
+      startStream,
+      smoothExecuteResult,
+      abort,
+      stepDebuggingTrace,
+      stepDebuggingContent,
+      respondingStatus,
+      debugId,
+      reasoningContentResult,
+    } = useLLMStreamRun();
+
+    const runLLM = (
+      queryMsg?: Message,
+      history?: DebugMessage[],
+      traceKey?: string,
+    ) => {
+      setAllStreaming(true);
+      setStreaming(true);
+      createLLMRun({
+        startStream,
+        message: queryMsg,
+        history,
+        traceKey,
+        notReport: index > 0,
+        singleRound: true,
+        setToolCalls,
+        setHistoricChat: setCurrentHistory,
+        toolCalls,
+      }).then(() => setHasResult(true));
+    };
+
+    const stopStreaming = () => {
+      abort();
+      if (streaming) {
+        setCurrentHistory(list => [
+          ...(list || []),
+          {
+            isEdit: false,
+            id: messageId(),
+            message: {
+              role: Role.Assistant,
+              content: smoothExecuteResult,
+              tool_calls: toolCalls,
+            },
+            debug_id: `${debugId || ''}`,
+          },
+        ]);
+
+        if (smoothExecuteResult || toolCalls.length) {
+          setHasResult(true);
+        }
+      }
+      setStreaming?.(false);
+      setTimeout(() => streamingSendEnd?.(), 500);
+    };
+
+    const stepSendMessage = () => {
+      const toolsHistory: DebugMessage[] = (toolCalls || [])
+        .map(it => [
+          {
+            content: stepDebuggingContent,
+            role: Role.Assistant,
+            tool_calls: [it],
+            id: messageId(),
+          },
+          {
+            id: messageId(),
+            content: it.mock_response || '',
+            role: Role.Tool,
+            tool_call_id: it.tool_call?.id,
+          },
+        ])
+        .flat();
+
+      setStreaming?.(true);
+      const oldHistory = (historicChat || [])
+        .filter(v => Boolean(v))
+        .map(it => ({
+          id: it?.id,
+          role: it?.role,
+          content: it?.content,
+          parts: it?.parts,
+        }));
+      runLLM(undefined, [...oldHistory, ...toolsHistory], stepDebuggingTrace);
+    };
+
+    const sendMessage = () => {
+      setCurrentHistory([]);
+      setHasResult(false);
+      setStreaming(true);
+      setToolCalls([]);
+      const oldHistory = (historicChat || [])
+        .filter(v => Boolean(v))
+        .map(it => ({
+          id: it?.id,
+          role: it?.role,
+          content: it?.content,
+          parts: it?.parts,
+        }));
+      runLLM(undefined, oldHistory);
+    };
+
+    useImperativeHandle(ref, () => ({
+      streaming,
+      hasResult,
+      sendMessage,
+      clearHistory: () => {
+        setCurrentHistory([]);
+        setHasResult(false);
+        setStreaming(false);
+      },
+    }));
+
+    useEffect(() => {
+      if (!isResponding(respondingStatus) && streaming) {
+        if (!stepDebuggingTrace) {
+          setStreaming(false);
+          setTimeout(() => streamingSendEnd?.(), 500);
+        }
+      }
+    }, [respondingStatus, stepDebuggingTrace, streaming]);
+
+    return (
+      <div
+        className={classNames(
+          'border border-solid coz-stroke-primary rounded-lg flex flex-col',
+          className,
+        )}
+      >
+        {times > 1 ? (
+          <Space className="px-2 py-1 items-center justify-between w-full box-border">
+            <Tag size="small" color="primary">
+              组 {index + 1}
+            </Tag>
+            <Space>
+              <Button
+                color="secondary"
+                size="small"
+                disabled={streaming}
+                onClick={() => {
+                  sendMessage();
+                }}
+                icon={<IconCozRefresh />}
+              >
+                重试
+              </Button>
+
+              {isSingleRound ? null : (
+                <Button
+                  color="highlight"
+                  size="small"
+                  disabled={
+                    !hasResult ||
+                    streaming ||
+                    allStreaming ||
+                    Boolean(stepDebuggingTrace)
+                  }
+                  onClick={() =>
+                    acceptResult?.(currentHistory?.[currentHistory.length - 1])
+                  }
+                  icon={<IconCozArrowForward className="rotate-180" />}
+                >
+                  采纳
+                </Button>
+              )}
+            </Space>
+          </Space>
+        ) : null}
+
+        <div className={styles['execute-sub-area-content']}>
+          {currentHistory?.length ? (
+            currentHistory?.map((item: DebugMessage) => (
+              <MessageItem
+                key={item.id}
+                item={item || {}}
+                smooth={false}
+                btnConfig={{
+                  hideEdit: true,
+                  hideDelete: true,
+                  hideMessageTypeSelect: true,
+                  hideOptimize: true,
+                }}
+                tools={mockTools}
+              />
+            ))
+          ) : streaming || smoothExecuteResult ? (
+            <MessageItem
+              streaming
+              key="streaming"
+              item={{
+                role: Role.Assistant,
+                content: smoothExecuteResult || '',
+                tool_calls: toolCalls,
+                reasoning_content: reasoningContentResult,
+              }}
+              smooth
+              stepDebuggingTrace={stepDebuggingTrace}
+              setToolCalls={setToolCalls}
+              stepSendMessage={stepSendMessage}
+              btnConfig={{
+                hideEdit: true,
+                hideDelete: true,
+                hideMessageTypeSelect: true,
+                hideOptimize: true,
+              }}
+              tools={mockTools}
+            />
+          ) : null}
+
+          {currentHistory?.length || streaming ? null : (
+            <img
+              src={peIcon}
+              className={styles['execute-sub-area-content-img']}
+            />
+          )}
+        </div>
+        <Space className="justify-center h-[28px] shrink-0 w-full">
+          {streaming ? (
+            <Space align="center">
+              <Button
+                color="primary"
+                icon={<IconCozStopCircle />}
+                size="mini"
+                onClick={stopStreaming}
+              >
+                停止响应
+              </Button>
+            </Space>
+          ) : null}
+        </Space>
+      </div>
+    );
+  },
+);
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/function-list.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/function-list.tsx
index a3fb03d30..d23e8f739 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/function-list.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/function-list.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable security/detect-object-injection */
 /* eslint-disable complexity */
 import { type CSSProperties, useMemo, useState } from 'react';
@@ -15,7 +13,6 @@ import { usePromptStore } from '@/store/use-prompt-store';
 import { usePromptMockDataStore } from '@/store/use-mockdata-store';
 
 import styles from './index.module.less';
-import { I18n } from '@cozeloop/i18n-adapter';
 
 interface FunctionItemProps {
   style?: CSSProperties;
@@ -49,7 +46,7 @@ export function FunctionItem({
       </Typography.Text>
       <div className="flex gap-1 overflow-hidden w-full items-center">
         <Typography.Text size="small" type="tertiary" className="shrink-0">
-          {I18n.t('input')}
+          输入
         </Typography.Text>
         <Typography.Text
           ellipsis={{
@@ -73,7 +70,7 @@ export function FunctionItem({
       </div>
       <div className="flex gap-1 overflow-hidden w-full items-center">
         <Typography.Text size="small" type="tertiary" className="shrink-0">
-          {I18n.t('output')}
+          输出
         </Typography.Text>
         {!(active && stepDebugger) ? (
           <Typography.Text
@@ -99,9 +96,7 @@ export function FunctionItem({
           <Input
             onChange={onOutputChange}
             defaultValue={item.mock_response}
-            placeholder={I18n.t('please_input', {
-              field: I18n.t('mock_value'),
-            })}
+            placeholder="请输入模拟值"
             autoFocus
             className="w-full"
             borderless
@@ -162,7 +157,8 @@ export function FunctionList({
   const groupToolByTraceKey = useMemo(
     () =>
       toolCalls.reduce<Record<string, DebugToolCall[]>>((acc, tool) => {
-        const key = tool.debug_trace_key || '';
+        //TODO: 临时处理，后续移除 tool?.tool_call?.id
+        const key = tool.debug_trace_key || tool?.tool_call?.id || '';
         acc[key] = acc[key] || [];
         acc[key].push(tool);
         return acc;
@@ -188,7 +184,7 @@ export function FunctionList({
           />
         }
       >
-        {I18n.t('function_call')}
+        函数调用
       </Tag>
       {isExpand ? (
         <div className="flex flex-col gap-2">
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.module.less
index bdea3dab2..b107cd78b 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable declaration-no-important */
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable selector-class-pattern */
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.tsx
index 29b8d46e0..5ff0e2f68 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/index.tsx
@@ -1,20 +1,20 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable max-lines-per-function */
 /* eslint-disable @coze-arch/max-line-per-function */
 
 /* eslint-disable complexity */
 
-import { useMemo, useState } from 'react';
+import { type SetStateAction, useMemo, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 import classNames from 'classnames';
 import { formateMsToSeconds } from '@cozeloop/toolkit';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { useUserInfo } from '@cozeloop/biz-hooks-adapter';
+import { MessageToolBtns } from '@cozeloop/biz-components-adapter';
 import {
   type ContentPart,
   ContentType,
   type DebugToolCall,
+  type Message,
   type MockTool,
   type ModelConfig,
   Role,
@@ -34,13 +34,14 @@ import {
 } from '@coze-arch/coze-design';
 import { MdBoxLazy } from '@coze-arch/bot-md-box-adapter/lazy';
 
+import { usePromptStore } from '@/store/use-prompt-store';
 import {
   usePromptMockDataStore,
   type DebugMessage,
 } from '@/store/use-mockdata-store';
+import { useBasicStore } from '@/store/use-basic-store';
 import IconLogo from '@/assets/mini-logo.svg';
 
-import { ToolBtns } from './tool-btns';
 import { FunctionList } from './function-list';
 
 import styles from './index.module.less';
@@ -62,6 +63,7 @@ interface MessageItemProps {
     hideCancel?: boolean;
     hideOk?: boolean;
     hideTrace?: boolean;
+    hideOptimize?: boolean;
   };
   modelConfig?: ModelConfig;
   updateType?: (type: Role) => void;
@@ -75,6 +77,10 @@ interface MessageItemProps {
   tools?: MockTool[];
   variables?: VariableVal[];
   stepSendMessage?: () => void;
+  messageList?: Array<Message & { key?: string }>;
+  setMessageList?: SetStateAction<
+    Array<Message & { key?: string }> | undefined
+  >;
 }
 
 export function MessageItem({
@@ -91,10 +97,24 @@ export function MessageItem({
   rerunLLM,
   canReRun,
   stepSendMessage,
+  messageList,
+  setMessageList,
+  variables,
+  btnConfig,
 }: MessageItemProps) {
   const [reasoningExpand, setReasoningExpand] = useState(true);
   const userInfo = useUserInfo();
 
+  const { setDebugId } = useBasicStore(
+    useShallow(state => ({ setDebugId: state.setDebugId })),
+  );
+
+  const { promptInfo } = usePromptStore(
+    useShallow(state => ({
+      promptInfo: state.promptInfo,
+    })),
+  );
+
   const { compareConfig, userDebugConfig } = usePromptMockDataStore(
     useShallow(state => ({
       compareConfig: state.compareConfig,
@@ -166,6 +186,8 @@ export function MessageItem({
     }
   }, [role, userInfo?.avatar_url]);
 
+  const optimizeSystemPrompt = messageList?.find(it => it.role === Role.System);
+
   return (
     <div className={styles['message-item']}>
       {avatarDom}
@@ -203,7 +225,7 @@ export function MessageItem({
                   />
                 }
               >
-                {content ? I18n.t('deeply_thought') : I18n.t('deep_thinking')}
+                {content ? '已深度思考' : '深度思考中'}
               </Tag>
               {reasoningExpand ? (
                 <MdBoxLazy
@@ -268,17 +290,16 @@ export function MessageItem({
                 type="tertiary"
                 className="flex-1 flex-shrink-0"
               >
-                {I18n.t('time_consumed')}: {formateMsToSeconds(cost_ms)} |
-                Tokens:
+                耗时: {formateMsToSeconds(cost_ms)} | Tokens:
                 <Tooltip
                   theme="dark"
                   content={
                     <Space vertical align="start">
                       <Typography.Text style={{ color: '#fff' }}>
-                        {I18n.t('input')} Tokens: {input_tokens}
+                        输入 Tokens: {input_tokens}
                       </Typography.Text>
                       <Typography.Text style={{ color: '#fff' }}>
-                        {I18n.t('output')} Tokens: {output_tokens}
+                        输出 Tokens: {output_tokens}
                       </Typography.Text>
                     </Space>
                   }
@@ -291,15 +312,16 @@ export function MessageItem({
                     } Tokens`}
                   </span>
                 </Tooltip>
-                {`| ${I18n.t('num_words', { num: content.length })}`}
+                {`| 字数: ${content.length}`}
               </Typography.Text>
             ) : null}
 
             {!streaming ? (
-              <ToolBtns
+              <MessageToolBtns
                 item={item}
+                lastItem={lastItem}
                 isMarkdown={isMarkdown}
-                btnConfig={{ hideOptimize: !isAI }}
+                btnConfig={{ hideOptimize: !isAI, ...btnConfig }}
                 setIsMarkdown={v => setIsMarkdown(v)}
                 deleteChat={deleteChat}
                 updateEditable={updateEditable}
@@ -343,12 +365,18 @@ export function MessageItem({
                 }}
                 rerunLLM={rerunLLM}
                 canReRun={canReRun}
+                canOptimize={isAI}
+                promptInfo={promptInfo}
+                variables={variables}
+                optimizeSystemPrompt={optimizeSystemPrompt}
+                setMessageList={setMessageList}
+                setDebugId={setDebugId}
               />
             ) : null}
             {stepDebuggingTrace && stepDebugger && !isCompare ? (
               <div className="w-full text-right">
                 <Button color="brand" size="mini" onClick={stepSendMessage}>
-                  {I18n.t('confirm')}
+                  确认
                 </Button>
               </div>
             ) : null}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/tool-btns.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/tool-btns.tsx
index ca184c7e9..2eb14dba0 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/message-item/tool-btns.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/message-item/tool-btns.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 
@@ -30,7 +28,6 @@ import { type DebugMessage } from '@/store/use-mockdata-store';
 import { useBasicStore } from '@/store/use-basic-store';
 
 import styles from './index.module.less';
-import { I18n } from '@cozeloop/i18n-adapter';
 
 interface ToolBtnsProps {
   item: DebugMessage;
@@ -92,7 +89,7 @@ export function ToolBtns({
     parts?.find(it => it?.type === ContentType.Text)?.text || item.content;
 
   const copyBtn = !btnConfig?.hideCopy && (
-    <Tooltip content={I18n.t('Copy')} theme="dark">
+    <Tooltip content="复制" theme="dark">
       <IconButton
         className={styles['icon-button']}
         icon={<IconCozCopy fontSize={14} />}
@@ -117,7 +114,7 @@ export function ToolBtns({
   );
 
   const editBtn = !btnConfig?.hideEdit && (
-    <Tooltip content={I18n.t('edit')} theme="dark">
+    <Tooltip content="编辑" theme="dark">
       <IconButton
         className={styles['icon-button']}
         icon={<IconCozPencil fontSize={14} />}
@@ -131,10 +128,10 @@ export function ToolBtns({
     <Popconfirm
       trigger="custom"
       visible={showPopconfirm}
-      title={I18n.t('delete_message')}
-      content={I18n.t('confirm_delete_message')}
-      cancelText={I18n.t('Cancel')}
-      okText={I18n.t('delete')}
+      title="删除消息"
+      content="确认删除该消息吗？"
+      cancelText="取消"
+      okText="删除"
       okButtonProps={{ color: 'red' }}
       stopPropagation={true}
       onConfirm={() => {
@@ -152,7 +149,7 @@ export function ToolBtns({
         />
       ) : (
         <span>
-          <Tooltip content={I18n.t('delete')} theme="dark">
+          <Tooltip content="删除" theme="dark">
             <IconButton
               className={styles['icon-button']}
               icon={<IconCozTrashCan fontSize={14} />}
@@ -173,7 +170,7 @@ export function ToolBtns({
       className={styles['icon-button']}
       onClick={() => updateEditable?.(false)}
     >
-      {I18n.t('Cancel')}
+      取消
     </Button>
   );
 
@@ -184,12 +181,12 @@ export function ToolBtns({
       icon
       onClick={() => updateMessageItem?.({ ...item, isEdit: false })}
     >
-      {I18n.t('confirm')}
+      确认
     </Button>
   );
 
   const refreshBtn = !btnConfig?.hideRerun && (
-    <Tooltip content={I18n.t('rerun')} theme="dark">
+    <Tooltip content="重新运行" theme="dark">
       <IconButton
         className={styles['icon-button']}
         icon={<IconCozRefresh fontSize={14} />}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/model-config-card/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/model-config-card/index.tsx
index b30593a6e..57598fe9e 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/model-config-card/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/model-config-card/index.tsx
@@ -1,52 +1,74 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable complexity */
+/* eslint-disable max-len */
 import React from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
-import { useRequest } from 'ahooks';
 import { BasicModelConfigEditor } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { CollapseCard } from '@cozeloop/components';
-import { useSpace } from '@cozeloop/biz-hooks-adapter';
-import { Scenario } from '@cozeloop/api-schema/llm-manage';
-import { LlmManageApi } from '@cozeloop/api-schema';
-import { Typography } from '@coze-arch/coze-design';
+import { useModelList, useSpace } from '@cozeloop/biz-hooks-adapter';
+import { ContentType } from '@cozeloop/api-schema/prompt';
+import { IconCozInfoCircle } from '@coze-arch/coze-design/icons';
+import { Tag, Tooltip, Typography } from '@coze-arch/coze-design';
 
 import { usePromptStore } from '@/store/use-prompt-store';
 import { useBasicStore } from '@/store/use-basic-store';
 import { useCompare } from '@/hooks/use-compare';
 
 export function ModelConfigCard() {
-  const { spaceID } = useSpace();
-  const { modelConfig, setModelConfig, setCurrentModel, promptInfo } =
-    usePromptStore(
-      useShallow(state => ({
-        modelConfig: state.modelConfig,
-        setModelConfig: state.setModelConfig,
-        setCurrentModel: state.setCurrentModel,
-        promptInfo: state.promptInfo,
-        currentModel: state.currentModel,
-      })),
-    );
+  const { spaceIDWhenDemoSpaceItsPersonal } = useSpace();
+  const {
+    modelConfig,
+    setModelConfig,
+    setCurrentModel,
+    promptInfo,
+    currentModel,
+    messageList,
+  } = usePromptStore(
+    useShallow(state => ({
+      modelConfig: state.modelConfig,
+      setModelConfig: state.setModelConfig,
+      setCurrentModel: state.setCurrentModel,
+      promptInfo: state.promptInfo,
+      currentModel: state.currentModel,
+      messageList: state.messageList,
+    })),
+  );
+  const isMultiModalModel = currentModel?.ability?.multi_modal;
+  const multiModalError = messageList?.some(message => {
+    if (
+      message.parts?.some(
+        part => part.type === ContentType.MultiPartVariable,
+      ) &&
+      !isMultiModalModel
+    ) {
+      return true;
+    }
+    return false;
+  });
   const { readonly } = useBasicStore(
     useShallow(state => ({ readonly: state.readonly })),
   );
   const { streaming } = useCompare();
 
-  const service = useRequest(async () =>
-    LlmManageApi.ListModels({
-      workspace_id: spaceID,
-      page_size: 100,
-      page_token: '0',
-      scenario: Scenario.scenario_prompt_debug,
-    }),
-  );
+  const service = useModelList(spaceIDWhenDemoSpaceItsPersonal);
 
   return (
     <CollapseCard
-      title={<Typography.Text strong>{I18n.t('model_config')}</Typography.Text>}
+      title={<Typography.Text strong>模型配置</Typography.Text>}
+      subInfo={
+        multiModalError ? (
+          <Tooltip
+            content="所选模型不支持多模态，请调整变量类型或更换模型"
+            theme="dark"
+          >
+            <Tag color="red" prefixIcon={<IconCozInfoCircle />}>
+              模型不支持
+            </Tag>
+          </Tooltip>
+        ) : null
+      }
       defaultVisible
-      key={`${modelConfig?.model_id}-${promptInfo?.prompt_commit?.commit_info?.version}`}
+      key={`${modelConfig?.model_id}-${promptInfo?.prompt_commit?.commit_info?.version}-${promptInfo?.prompt_draft?.draft_info?.base_version}`}
     >
       <BasicModelConfigEditor
         value={modelConfig}
@@ -56,7 +78,13 @@ export function ModelConfigCard() {
         disabled={streaming || readonly}
         models={service.data?.models}
         onModelChange={setCurrentModel}
-        modelSelectProps={{ className: 'w-full', loading: service.loading }}
+        modelSelectProps={{
+          className: 'w-full',
+          loading: service.loading,
+        }}
+        defaultActiveFirstModel={Boolean(
+          !promptInfo?.prompt_key && !modelConfig?.model_id,
+        )}
       />
     </CollapseCard>
   );
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-delete/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-delete/index.tsx
index a42ae6b63..77fc67690 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-delete/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-delete/index.tsx
@@ -1,9 +1,6 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { useEffect, useState } from 'react';
 
 import { useRequest } from 'ahooks';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { TextWithCopy } from '@cozeloop/components';
 import { type Prompt } from '@cozeloop/api-schema/prompt';
 import { StonePromptApi } from '@cozeloop/api-schema';
@@ -28,7 +25,7 @@ export function PromptDelete({
       manual: true,
       onSuccess: () => {
         Toast.success({
-          content: I18n.t('delete_success'),
+          content: '删除成功',
           showClose: false,
         });
         onOk?.();
@@ -49,7 +46,7 @@ export function PromptDelete({
   }, [visible]);
   return (
     <Modal
-      title={I18n.t('delete_prompt')}
+      title="删除Prompt"
       visible={visible}
       onCancel={onCacnel}
       onOk={handleOk}
@@ -57,22 +54,22 @@ export function PromptDelete({
         disabled: Boolean(!deleteKey || deleteKey !== data?.prompt_key),
         loading: deleteLoading,
       }}
-      okText={I18n.t('confirm')}
-      cancelText={I18n.t('Cancel')}
+      okText="确定"
+      cancelText="取消"
     >
       <Space vertical style={{ width: '100%' }} align="start">
         <Typography.Text>
-          {I18n.t('input_prompt_key_to_delete')}
+          输入想要删除的Prompt Key：
           <TextWithCopy
             content={data?.prompt_key}
             maxWidth={400}
             className="gap-2"
-            copyTooltipText={I18n.t('copy_prompt_key')}
+            copyTooltipText="复制 Prompt Key"
           />
         </Typography.Text>
         <Input
           style={{ width: '100%' }}
-          placeholder={I18n.t('prompt_key_again_confirm')}
+          placeholder="请输入 Prompt Key 再次确认"
           value={deleteKey}
           onChange={setDeleteKey}
         />
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/compare-area.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/compare-area.tsx
index 472adf560..030451d3c 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/compare-area.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/compare-area.tsx
@@ -1,15 +1,16 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 /* eslint-disable security/detect-object-injection */
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 import { nanoid } from 'nanoid';
 import { cloneDeep, debounce } from 'lodash-es';
 import { sendEvent, EVENT_NAMES } from '@cozeloop/tea-adapter';
-import { I18n } from '@cozeloop/i18n-adapter';
+import {
+  BenefitBanner,
+  BenefitBannerScene,
+} from '@cozeloop/biz-components-adapter';
 import { type Message } from '@cozeloop/api-schema/prompt';
 
 import { usePromptStore } from '@/store/use-prompt-store';
@@ -90,6 +91,7 @@ export function CompareArea() {
     });
   };
 
+  const [exchanegKey, setExchangeKey] = useState(nanoid());
   const exchangePromptToDraft = debounce((index: number) => {
     const {
       compareConfig: newComparePrompts,
@@ -136,6 +138,7 @@ export function CompareArea() {
             key: nanoid(),
           })),
         );
+        setExchangeKey(nanoid());
       }, 0);
       sendEvent(EVENT_NAMES.prompt_compare_use, {
         prompt_id: `${promptInfo?.id || 'playground'}`,
@@ -151,15 +154,16 @@ export function CompareArea() {
         style={{ scrollbarGutter: 'auto' }}
       >
         <CompareItem
+          key={exchanegKey}
           ref={el => (singleAreaRefs.current[0] = el)}
           allStreaming={allStreaming}
           style={{ position: 'sticky', left: 0, zIndex: 7 }}
         />
         {compareConfig?.groups?.map((_, idx) => (
           <CompareItem
-            key={idx}
+            key={`${idx}-${exchanegKey}`}
             uid={idx}
-            title={I18n.t('control_group_index', { index: idx + 1 })}
+            title={`对照组${idx + 1}`}
             ref={el => (singleAreaRefs.current[idx + 1] = el)}
             deleteCompare={() => !allStreaming && deleteComparePrompt(idx)}
             exchangePromptToDraft={() =>
@@ -171,6 +175,11 @@ export function CompareArea() {
         ))}
       </div>
       <div className="w-full flex-shrink-0 pl-6 pb-6 pt-3 border-0 border-t border-solid">
+        <BenefitBanner
+          closable={false}
+          className="mb-2 mr-6"
+          scene={BenefitBannerScene.PromptDetail}
+        />
         <SendMsgArea onMessageSend={sendMessage} streaming={allStreaming} />
       </div>
     </div>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/index.tsx
index 01aad0fcd..96eb1fded 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/index.tsx
@@ -1,7 +1,4 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { useShallow } from 'zustand/react/shallow';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { IconCozCross } from '@coze-arch/coze-design/icons';
 import {
   IconButton,
@@ -77,9 +74,7 @@ export function PromptDev({ getPromptLoading }: PromptDevProps) {
                 className="h-[40px] px-6 py-2 box-border coz-fg-plus w-full flex justify-between items-center border-0 border-r border-t border-b border-solid"
                 style={{ background: '#F6F6FB' }}
               >
-                <Typography.Text strong>
-                  {I18n.t('version_record')}
-                </Typography.Text>
+                <Typography.Text strong>版本记录</Typography.Text>
                 <IconButton
                   icon={<IconCozCross />}
                   color="secondary"
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/normal-area.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/normal-area.tsx
index 4b3c5c4be..a6385ff10 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/normal-area.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-dev/normal-area.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable max-params */
 /* eslint-disable complexity */
@@ -12,10 +10,10 @@ import classNames from 'classnames';
 import { useSize } from 'ahooks';
 import { sendEvent, EVENT_NAMES } from '@cozeloop/tea-adapter';
 import { DevLayout } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
 import {
   IconCozColumnCollapse,
   IconCozColumnExpand,
+  IconCozInfoCircle,
   IconCozSideCollapse,
   IconCozSideExpand,
 } from '@coze-arch/coze-design/icons';
@@ -34,7 +32,7 @@ export function NormalArea() {
   const { versionChangeVisible } = useBasicStore(
     useShallow(state => ({ versionChangeVisible: state.versionChangeVisible })),
   );
-  const { variables, tools, promptInfo } = usePromptStore(
+  const { variables, promptInfo } = usePromptStore(
     useShallow(state => ({
       variables: state.variables,
       tools: state.tools,
@@ -97,11 +95,17 @@ export function NormalArea() {
           right:
             isSmallWindowOpenVersion || !configExecuteVisible ? false : true,
         }}
+        handleStyles={{
+          right: {
+            width: '4px',
+            right: '-2px',
+          },
+        }}
         handleComponent={{
           right: isSmallWindowOpenVersion ? (
             <div />
           ) : (
-            <div className="w-[5px] h-full ml-[5px] border-0 border-solid border-brand-9 hover:border-l-2"></div>
+            <div className="w-[2px] h-full border-0 border-solid border-brand-9 hover:border-l-2"></div>
           ),
         }}
         className={classNames('flex flex-col', {
@@ -113,15 +117,15 @@ export function NormalArea() {
         }}
       >
         <DevLayout
-          title={I18n.t('orchestration')}
+          title="编排"
           actionBtns={
             <Space spacing="tight">
               <Tooltip
                 theme="dark"
                 content={
                   configAreaVisible
-                    ? I18n.t('collapse_model_and_var_area')
-                    : I18n.t('expand_model_and_var_area')
+                    ? '收起模型配置与变量区'
+                    : '展开模型配置与变量区'
                 }
               >
                 <IconButton
@@ -144,10 +148,7 @@ export function NormalArea() {
                 />
               </Tooltip>
               {configExecuteVisible ? null : (
-                <Tooltip
-                  theme="dark"
-                  content={I18n.t('expand_preview_and_debug')}
-                >
+                <Tooltip theme="dark" content="展开预览与调试">
                   <IconButton
                     size="mini"
                     color="primary"
@@ -204,12 +205,9 @@ export function NormalArea() {
             >
               <ModelConfigCard />
               <Divider />
-              <VariablesCard
-                defaultVisible={Boolean(variables?.length)}
-                key={variables?.length}
-              />
+              <VariablesCard defaultVisible key={variables?.length} />
               <Divider />
-              <ToolsCard defaultVisible={Boolean(tools?.length)} />
+              <ToolsCard defaultVisible />
             </div>
           </div>
         </DevLayout>
@@ -223,9 +221,21 @@ export function NormalArea() {
           },
         )}
         style={{ minWidth: '35%' }}
-        title={I18n.t('preview_and_debug')}
+        title={
+          <div className="flex items-center gap-2">
+            <span>预览与调试</span>
+            {promptInfo?.id ? null : (
+              <Tooltip
+                theme="dark"
+                content="历史图片消息1天后过期，可查看 Trace 或前往 Prompt 开发页面调试获取图片信息"
+              >
+                <IconCozInfoCircle className="cursor-pointer" />
+              </Tooltip>
+            )}
+          </div>
+        }
         actionBtns={
-          <Tooltip theme="dark" content={I18n.t('collapse_preview_and_debug')}>
+          <Tooltip theme="dark" content="收起预览与调试">
             <IconButton
               size="mini"
               color="primary"
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.module.less
index 7d5ad32c3..d277803a8 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 .prompt-editor-container{
   display: flex;
   flex-direction: column;
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.tsx
index d1238717c..b34b2378d 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/index.tsx
@@ -1,21 +1,32 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable complexity */
+/* eslint-disable @coze-arch/max-line-per-function */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 import Sortable from 'sortablejs';
 import { nanoid } from 'nanoid';
 import classNames from 'classnames';
+import { useLatest } from 'ahooks';
+import { safeJsonParse } from '@cozeloop/toolkit';
 import { CollapseCard } from '@cozeloop/components';
-import { Role } from '@cozeloop/api-schema/prompt';
+import { Role, TemplateType, VariableType } from '@cozeloop/api-schema/prompt';
 import { IconCozPlus } from '@coze-arch/coze-design/icons';
 import { Button, Typography } from '@coze-arch/coze-design';
 
+import {
+  getMockVariables,
+  getMultiModalVariableKeys,
+  getPlaceholderVariableKeys,
+} from '@/utils/prompt';
+import { usePromptStore } from '@/store/use-prompt-store';
+import { usePromptMockDataStore } from '@/store/use-mockdata-store';
 import { useBasicStore } from '@/store/use-basic-store';
 import { useCompare } from '@/hooks/use-compare';
 
+import LibraryBlockWidget from '../loop-prompt-editor/widgets/skill';
 import { LoopPromptEditor } from '../loop-prompt-editor';
-import { I18n } from '@cozeloop/i18n-adapter';
+import { TemplateSelect } from './template-select';
 
 interface PromptEditorCardProps {
   uid?: number;
@@ -29,13 +40,45 @@ export function PromptEditorCard({
   uid,
 }: PromptEditorCardProps) {
   const sortableContainer = useRef<HTMLDivElement>(null);
-  const { streaming, messageList, setMessageList, variables } = useCompare(uid);
+  const {
+    streaming,
+    messageList = [],
+    setMessageList,
+    variables = [],
+    mockVariables,
+    setVariables,
+    setMockVariables,
+    currentModel,
+  } = useCompare(uid);
+
+  const variablesRef = useLatest(variables);
 
   const { readonly: basicReadonly } = useBasicStore(
     useShallow(state => ({
       readonly: state.readonly,
     })),
   );
+
+  const { promptInfo, templateType } = usePromptStore(
+    useShallow(state => ({
+      promptInfo: state.promptInfo,
+      templateType: state.templateType,
+    })),
+  );
+
+  const isNotNormalTemplate = templateType !== TemplateType.Normal;
+
+  const { compareConfig } = usePromptMockDataStore(
+    useShallow(state => ({
+      compareConfig: state.compareConfig,
+    })),
+  );
+
+  const librarys = safeJsonParse(
+    (promptInfo?.prompt_commit || promptInfo?.prompt_draft)?.detail?.ext_infos
+      ?.workflow ?? '[]',
+  );
+
   const [isDrag, setIsDrag] = useState(false);
   const readonly = basicReadonly || streaming;
 
@@ -56,6 +99,45 @@ export function PromptEditorCard({
     });
   };
 
+  useEffect(() => {
+    if (isNotNormalTemplate && messageList?.length) {
+      const normalVariables = variablesRef.current?.filter(
+        it =>
+          it.type !== VariableType.Placeholder &&
+          it.type !== VariableType.MultiPart,
+      );
+      const normalVariableKeys = normalVariables?.map(it => it.key || '');
+
+      const multiModalVariableArray = getMultiModalVariableKeys(
+        messageList,
+        normalVariableKeys,
+      );
+
+      if (multiModalVariableArray?.length) {
+        normalVariableKeys.push(
+          ...multiModalVariableArray.map(it => it.key || ''),
+        );
+        normalVariables.push(...multiModalVariableArray);
+      }
+      const placeholderVariableArray = getPlaceholderVariableKeys(
+        messageList,
+        normalVariableKeys,
+      );
+      if (placeholderVariableArray?.length) {
+        normalVariableKeys.push(
+          ...placeholderVariableArray.map(it => it.key || ''),
+        );
+        normalVariables.push(...placeholderVariableArray);
+      }
+      setVariables(normalVariables);
+      const newMockVariables = getMockVariables(
+        normalVariables,
+        mockVariables || [],
+      );
+      setMockVariables(newMockVariables);
+    }
+  }, [isNotNormalTemplate, JSON.stringify(messageList)]);
+
   useEffect(() => {
     if (sortableContainer.current) {
       new Sortable(sortableContainer.current, {
@@ -78,10 +160,17 @@ export function PromptEditorCard({
     }
   }, []);
 
+  const firstSpIndex = messageList?.findIndex(it => it.role === Role.System);
+
   return (
     <CollapseCard
       title={
-        <Typography.Text strong>{I18n.t('prompt_template')}</Typography.Text>
+        <div className="flex items-center justify-between">
+          <Typography.Text strong>Prompt 模板</Typography.Text>
+          {compareConfig?.groups?.length ? null : (
+            <TemplateSelect streaming={streaming || readonly} />
+          )}
+        </div>
       }
       defaultVisible={defaultVisible}
       disableCollapse={!canCollapse}
@@ -94,53 +183,76 @@ export function PromptEditorCard({
         <div className={'flex flex-col gap-2'} ref={sortableContainer}>
           {messageList
             ?.filter(it => Boolean(it))
-            ?.map(message => (
-              <LoopPromptEditor
-                key={message.key}
-                message={message}
-                variables={variables}
-                disabled={readonly}
-                isDrag={isDrag}
-                onMessageTypeChange={v =>
-                  setMessageList(prev => {
-                    const newInfo = prev?.map(it => {
-                      if (it.key === message.key) {
-                        if (
-                          it.role === Role.Placeholder ||
-                          v === Role.Placeholder
-                        ) {
+            ?.map((message, idx) => {
+              const isFirstSp =
+                message.role === Role.System && idx === firstSpIndex;
+              return (
+                <LoopPromptEditor
+                  key={`${message.key}-${templateType}`}
+                  message={message}
+                  variables={variables?.filter(
+                    it =>
+                      it.type !== VariableType.Placeholder &&
+                      it.type !== VariableType.MultiPart,
+                  )}
+                  disabled={readonly}
+                  isDrag={isDrag}
+                  onMessageTypeChange={v => {
+                    setMessageList(prev => {
+                      const newInfo = prev?.map(it => {
+                        if (it.key === message.key) {
+                          if (
+                            it.role === Role.Placeholder ||
+                            v === Role.Placeholder
+                          ) {
+                            return {
+                              ...it,
+                              role: v,
+                              content: '',
+                              key: nanoid(),
+                            };
+                          }
+                          return { ...it, role: v };
+                        }
+                        return it;
+                      });
+                      return newInfo as any;
+                    });
+                  }}
+                  onMessageChange={v => {
+                    setMessageList(prev => {
+                      const newInfo = prev?.map(it => {
+                        if (it.key === v.key) {
+                          const { parts } = v;
                           return {
                             ...it,
-                            role: v,
-                            content: '',
-                            key: nanoid(),
+                            ...v,
+                            content: parts?.length ? '' : v.content,
                           };
                         }
-                        return { ...it, role: v };
-                      }
-                      return it;
+                        return it;
+                      });
+
+                      return newInfo as any;
+                    });
+                  }}
+                  minHeight={26}
+                  showDragBtn
+                  onDelete={delKey => {
+                    setMessageList(prev => {
+                      const newInfo = prev?.filter(it => it.key !== delKey);
+                      return newInfo;
                     });
-                    return newInfo;
-                  })
-                }
-                onMessageChange={v =>
-                  setMessageList(prev => {
-                    const newInfo = prev?.map(it =>
-                      it.key === v.key ? { ...it, ...v } : it,
-                    );
-                    return newInfo;
-                  })
-                }
-                minHeight={26}
-                showDragBtn
-                onDelete={delKey =>
-                  setMessageList(prev => {
-                    const newInfo = prev?.filter(it => it.key !== delKey);
-                    return newInfo;
-                  })
-                }
-              />
-            ))}
+                  }}
+                  optimizeBtnHidden={!isFirstSp}
+                  isJinja2Template={templateType === TemplateType.Jinja2}
+                  modalVariableEnable={currentModel?.ability?.multi_modal}
+                  modalVariableBtnHidden={message.role === Role.System}
+                >
+                  <LibraryBlockWidget librarys={librarys} />
+                </LoopPromptEditor>
+              );
+            })}
         </div>
 
         <Button
@@ -149,7 +261,7 @@ export function PromptEditorCard({
           onClick={handleAddMessage}
           disabled={readonly}
         >
-          {I18n.t('add_message')}
+          添加消息
         </Button>
       </div>
     </CollapseCard>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/template-select.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/template-select.tsx
new file mode 100644
index 000000000..55d41e76c
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-editor-card/template-select.tsx
@@ -0,0 +1,160 @@
+import { useState } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import classNames from 'classnames';
+import { TemplateType } from '@cozeloop/api-schema/prompt';
+import {
+  IconCozArrowDown,
+  IconCozQuestionMarkCircle,
+} from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Modal,
+  Popover,
+  Tooltip,
+  Typography,
+} from '@coze-arch/coze-design';
+
+import { usePromptStore } from '@/store/use-prompt-store';
+
+interface TemplateSelectProps {
+  streaming?: boolean;
+}
+
+export function TemplateSelect({ streaming }: TemplateSelectProps) {
+  const [dropVisible, setDropVisible] = useState(false);
+
+  const { templateType, setTemplateType, messageList, setMessageList } =
+    usePromptStore(
+      useShallow(state => ({
+        templateType: state.templateType,
+        setTemplateType: state.setTemplateType,
+        messageList: state.messageList,
+        setMessageList: state.setMessageList,
+      })),
+    );
+
+  const templateTypeChange = (type: TemplateType) => {
+    if (templateType === type) {
+      return;
+    }
+
+    setDropVisible(false);
+    Modal.confirm({
+      title: '更换模板引擎',
+      content: '可能会导致已有变量渲染失败，请谨慎操作。',
+      onOk: () => {
+        setTemplateType(type);
+        setMessageList([...(messageList || [])]);
+      },
+      okText: '确认',
+      okButtonColor: 'yellow',
+      cancelText: '取消',
+    });
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <Popover
+        trigger="custom"
+        visible={dropVisible}
+        content={
+          <div className="px-4 pt-3 pb-4 w-[350px]">
+            <Typography.Text strong className="mb-3 block">
+              选择模板
+            </Typography.Text>
+
+            <div className="flex flex-col gap-2">
+              <div
+                className={classNames(
+                  '!h-fit !px-3 !pt-1.5 !pb-3 border border-solid coz-stroke-primary rounded-lg cursor-pointer hover:bg-[#969fff26]',
+                  {
+                    'coz-stroke-hglt': templateType === TemplateType.Normal,
+                    'bg-[#969fff26]': templateType === TemplateType.Normal,
+                  },
+                )}
+                onClick={() => {
+                  templateTypeChange(TemplateType.Normal);
+                }}
+              >
+                <div className="flex flex-col items-start">
+                  <Typography.Text strong style={{ lineHeight: '32px' }}>
+                    Normal 模板引擎
+                  </Typography.Text>
+                  <Typography.Text
+                    size="small"
+                    className="!text-[13px] !leading-[20px] !coz-fg-secondary"
+                  >
+                    双大括号 {'{{}}'} 识别变量
+                  </Typography.Text>
+                </div>
+              </div>
+
+              <div
+                className={classNames(
+                  'items-start !h-fit !px-3 !pt-1.5 !pb-3 border border-solid coz-stroke-primary rounded-lg cursor-pointer hover:bg-[#969fff26]',
+                  {
+                    'coz-stroke-hglt': templateType === TemplateType.Jinja2,
+                    'bg-[#969fff26]': templateType === TemplateType.Jinja2,
+                  },
+                )}
+                onClick={() => {
+                  templateTypeChange(TemplateType.Jinja2);
+                }}
+              >
+                <div className="flex flex-col items-start">
+                  <Typography.Text strong style={{ lineHeight: '32px' }}>
+                    Jinja2 模板引擎
+                  </Typography.Text>
+                  <Typography.Text
+                    size="small"
+                    className="!text-[13px] !leading-[20px] !coz-fg-secondary flex items-center gap-1"
+                  >
+                    手动添加和删除变量，支持复杂逻辑
+                    <Tooltip
+                      content={
+                        <>
+                          查看
+                          <a
+                            href="https://loop.coze.cn/open/docs/cozeloop/create-prompt#51f641db"
+                            target="_blank"
+                            style={{
+                              color: '#AAA6FF',
+                              textDecoration: 'none',
+                            }}
+                          >
+                            用户手册
+                          </a>
+                        </>
+                      }
+                      stopPropagation
+                      theme="dark"
+                    >
+                      <IconCozQuestionMarkCircle />
+                    </Tooltip>
+                  </Typography.Text>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        position="topLeft"
+        onClickOutSide={() => setDropVisible(false)}
+      >
+        <Button
+          icon={<IconCozArrowDown />}
+          iconPosition="right"
+          color="secondary"
+          className="!border border-solid coz-stroke-primary"
+          onClick={() => !streaming && setDropVisible(true)}
+          disabled={streaming}
+          size="small"
+        >
+          <Typography.Text>
+            {templateType === TemplateType.Jinja2 ? 'Jinja2' : 'Normal'}
+          </Typography.Text>
+        </Button>
+      </Popover>
+    </div>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/index.tsx
index b9788ad84..3fd324698 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/index.tsx
@@ -1,29 +1,25 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable max-lines */
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable complexity */
-
-import { useNavigate } from 'react-router-dom';
 import React, { useMemo } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
+import { nanoid } from 'nanoid';
 import { EVENT_NAMES, sendEvent } from '@cozeloop/tea-adapter';
 import {
   getPlaceholderErrorContent,
   PromptCreate,
 } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
+import { GuardPoint, useGuard } from '@cozeloop/guard';
 import {
   EditIconButton,
-  getBaseUrl,
   TextWithCopy,
   TooltipWhenDisabled,
 } from '@cozeloop/components';
-import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import { useNavigateModule } from '@cozeloop/biz-hooks-adapter';
 import { useModalData } from '@cozeloop/base-hooks';
-import { Role, TemplateType, type Prompt } from '@cozeloop/api-schema/prompt';
+import { ContentType, Role, type Prompt } from '@cozeloop/api-schema/prompt';
 import {
   IconCozLoading,
   IconCozBrace,
@@ -32,6 +28,7 @@ import {
   IconCozMore,
   IconCozExit,
   IconCozBattle,
+  IconCozPlug,
 } from '@coze-arch/coze-design/icons';
 import {
   Button,
@@ -42,7 +39,7 @@ import {
   Typography,
 } from '@coze-arch/coze-design';
 
-import { convertDisplayTime } from '@/utils/prompt';
+import { convertDisplayTime, nextVersion } from '@/utils/prompt';
 import { usePromptStore } from '@/store/use-prompt-store';
 import {
   type CompareGroupLoop,
@@ -56,9 +53,8 @@ import { PromptSubmit } from '../prompt-submit';
 import { PromptDelete } from '../prompt-delete';
 
 export function PromptHeader() {
-  const { spaceID } = useSpace();
-  const baseURL = getBaseUrl(spaceID);
-  const navigate = useNavigate();
+  const globalDisabled = useGuard({ point: GuardPoint['pe.prompt.global'] });
+  const navigate = useNavigateModule();
 
   const submitModal = useModalData();
   const deleteModal = useModalData<Prompt>();
@@ -75,6 +71,7 @@ export function PromptHeader() {
     setVersionChangeLoading,
     setExecuteHistoryVisible,
     readonly,
+    setBasicReadonly,
   } = useBasicStore(
     useShallow(state => ({
       autoSaving: state.autoSaving,
@@ -84,6 +81,7 @@ export function PromptHeader() {
       setVersionChangeLoading: state.setVersionChangeLoading,
       setExecuteHistoryVisible: state.setExecuteHistoryVisible,
       readonly: state.readonly,
+      setBasicReadonly: state.setReadonly,
     })),
   );
 
@@ -96,6 +94,7 @@ export function PromptHeader() {
     currentModel,
     tools,
     toolCallConfig,
+    templateType,
   } = usePromptStore(
     useShallow(state => ({
       promptInfo: state.promptInfo,
@@ -106,6 +105,7 @@ export function PromptHeader() {
       currentModel: state.currentModel,
       tools: state.tools,
       toolCallConfig: state.toolCallConfig,
+      templateType: state.templateType,
     })),
   );
 
@@ -147,9 +147,11 @@ export function PromptHeader() {
     getPromptByVersion('', true)
       .then(() => {
         setVersionChangeLoading(false);
+        setBasicReadonly(false);
       })
       .catch(() => {
         setVersionChangeLoading(false);
+        setBasicReadonly(false);
       });
   };
 
@@ -167,19 +169,45 @@ export function PromptHeader() {
     [messageList, variables],
   );
 
+  const isMultiModalModel = currentModel?.ability?.multi_modal;
+  const multiModalError = messageList?.some(message => {
+    if (
+      message.parts?.some(
+        part => part.type === ContentType.MultiPartVariable,
+      ) &&
+      !isMultiModalModel
+    ) {
+      return true;
+    }
+    return false;
+  });
+
+  const submitErrorTip = useMemo(() => {
+    if (multiModalError) {
+      return '所选模型不支持多模态，请调整变量类型或更换模型';
+    }
+    if (hasPlaceholderError) {
+      return 'Placeholder 变量不存在或命名错误';
+    }
+    if (!hasPeDraft) {
+      return '当前无草稿变更';
+    }
+    return '';
+  }, [multiModalError, hasPlaceholderError, hasPeDraft]);
+
   const renderSubmitBtn = () => {
     if (!promptInfo?.prompt_key) {
       return null;
     }
-    if (!versionChangeVisible && readonly) {
+    if (!versionChangeVisible && readonly && !globalDisabled.data.readonly) {
       return (
         <Button
           color="brand"
           onClick={handleBackToDraft}
           loading={versionChangeLoading}
-          disabled={streaming}
+          disabled={globalDisabled.data.readonly || streaming}
         >
-          {I18n.t('revert_draft_version')}
+          返回草稿版本
         </Button>
       );
     }
@@ -190,12 +218,8 @@ export function PromptHeader() {
 
     return (
       <TooltipWhenDisabled
-        content={
-          !hasPeDraft
-            ? I18n.t('no_draft_change')
-            : I18n.t('placeholder_var_create_error')
-        }
-        disabled={hasPlaceholderError || !hasPeDraft}
+        content={submitErrorTip}
+        disabled={hasPlaceholderError || !hasPeDraft || multiModalError}
         theme="dark"
       >
         <Button
@@ -205,25 +229,27 @@ export function PromptHeader() {
             streaming ||
             hasPlaceholderError ||
             versionChangeLoading ||
-            !hasPeDraft
+            !hasPeDraft ||
+            multiModalError ||
+            globalDisabled.data.readonly
           }
         >
-          {I18n.t('submit_new_version')}
+          提交新版本
         </Button>
       </TooltipWhenDisabled>
     );
   };
 
   const handleBack = () => {
-    navigate(`${getBaseUrl(spaceID)}/pe/prompts`);
+    navigate('pe/prompts');
   };
 
   const handleAddNewComparePrompt = () => {
     const newComparePrompt: CompareGroupLoop = {
       prompt_detail: {
         prompt_template: {
-          template_type: TemplateType.Normal,
-          messages: messageList,
+          template_type: templateType,
+          messages: messageList?.map(it => ({ ...it, key: nanoid() })),
           variable_defs: variables,
         },
         model_config: modelConfig,
@@ -266,11 +292,11 @@ export function PromptHeader() {
               className="!py-0.5"
               prefixIcon={<IconCozLoading spin />}
             >
-              {I18n.t('draft_saving')}
+              草稿保存中...
             </Tag>
           ) : (
             <Tag color="primary">
-              {I18n.t('draft_auto_saved_in')}
+              草稿已自动保存于
               {promptInfo?.prompt_draft?.draft_info?.updated_at
                 ? convertDisplayTime(
                     promptInfo?.prompt_draft?.draft_info?.updated_at,
@@ -318,7 +344,7 @@ export function PromptHeader() {
               <TextWithCopy
                 content={promptInfo.prompt_key}
                 maxWidth={200}
-                copyTooltipText={I18n.t('copy_prompt_key')}
+                copyTooltipText="复制 Prompt Key"
                 textClassName="!text-xs"
                 textType="tertiary"
               />
@@ -326,34 +352,42 @@ export function PromptHeader() {
                 layout="vertical"
                 style={{ height: 12, margin: '0 8px' }}
               />
+              <Tag
+                color="primary"
+                className="!py-0.5 cursor-pointer"
+                prefixIcon={<IconCozPlug />}
+                onClick={() => {
+                  sendEvent(EVENT_NAMES.prompt_click_view_code, {
+                    prompt_id: `${promptInfo?.id || 'playground'}`,
+                  });
+                  window.open('https://loop.coze.cn/open/docs/cozeloop/sdk');
+                }}
+              >
+                使用 SDK
+              </Tag>
+              <Divider
+                layout="vertical"
+                style={{ height: 12, margin: '0 8px' }}
+              />
               {promptInfo.prompt_draft || promptInfo.prompt_commit ? (
                 <Tag
                   color={isDraftEdit ? 'yellow' : 'brand'}
                   className="!py-0.5"
                 >
-                  {isDraftEdit
-                    ? I18n.t('changes_not_submitted')
-                    : I18n.t('submitted')}
-                </Tag>
-              ) : (
-                <Tag
-                  color={isDraftEdit ? 'yellow' : 'brand'}
-                  className="!py-0.5"
-                >
-                  {I18n.t('changes_not_submitted')}
+                  {isDraftEdit ? '修改未提交' : '已提交'}
                 </Tag>
-              )}
+              ) : null}
               {autoSaving ? (
                 <Tag
                   color="primary"
                   className="!py-0.5"
                   prefixIcon={<IconCozLoading spin />}
                 >
-                  {I18n.t('draft_saving')}
+                  草稿保存中...
                 </Tag>
               ) : isDraftEdit ? (
                 <Tag color="primary" className="!py-0.5">
-                  {I18n.t('draft_auto_saved_in')}
+                  草稿已自动保存于
                   {promptInfo?.prompt_draft?.draft_info?.updated_at ||
                   promptInfo?.prompt_commit?.commit_info?.committed_at
                     ? convertDisplayTime(
@@ -387,9 +421,14 @@ export function PromptHeader() {
                 });
               }}
               icon={<IconCozBattle />}
-              disabled={streaming || versionChangeLoading || readonly}
+              disabled={
+                streaming ||
+                versionChangeLoading ||
+                readonly ||
+                globalDisabled.data.readonly
+              }
             >
-              {I18n.t('enter_free_comparison_mode')}
+              进入自由对比模式
             </Button>
             {promptInfo?.prompt_key ? (
               <Button
@@ -397,13 +436,17 @@ export function PromptHeader() {
                 onClick={() => setVersionChangeVisible(v => Boolean(!v))}
                 disabled={streaming}
               >
-                {I18n.t('version_record')}
+                版本记录
               </Button>
             ) : null}
             {promptInfo?.prompt_key ? null : (
               <TooltipWhenDisabled
-                content={I18n.t('placeholder_var_create_error')}
-                disabled={hasPlaceholderError}
+                content={
+                  !modelConfig?.model_id
+                    ? '请选择一个模型'
+                    : 'Placeholder 变量名不存在或命名错误，无法创建'
+                }
+                disabled={hasPlaceholderError || !modelConfig?.model_id}
                 theme="dark"
               >
                 <Button
@@ -415,7 +458,7 @@ export function PromptHeader() {
                         prompt_commit: {
                           detail: {
                             prompt_template: {
-                              template_type: TemplateType.Normal,
+                              template_type: templateType,
                               messages: messageList,
                               variable_defs: variables,
                             },
@@ -427,9 +470,11 @@ export function PromptHeader() {
                       },
                     });
                   }}
-                  disabled={hasPlaceholderError || streaming}
+                  disabled={
+                    hasPlaceholderError || streaming || !modelConfig?.model_id
+                  }
                 >
-                  {I18n.t('quick_create')}
+                  快捷创建
                 </Button>
               </TooltipWhenDisabled>
             )}
@@ -446,7 +491,7 @@ export function PromptHeader() {
                       className="!px-2"
                       onClick={() => setExecuteHistoryVisible(true)}
                     >
-                      {I18n.t('debug_history')}
+                      调试历史
                     </Dropdown.Item>
                     {readonly ? (
                       <Dropdown.Item
@@ -460,7 +505,7 @@ export function PromptHeader() {
                         }
                         disabled={streaming || versionChangeLoading}
                       >
-                        {I18n.t('create_copy')}
+                        创建副本
                       </Dropdown.Item>
                     ) : null}
                     <Dropdown.Item
@@ -468,9 +513,7 @@ export function PromptHeader() {
                       onClick={() => onDeletePrompt(promptInfo)}
                       disabled={streaming}
                     >
-                      <Typography.Text type="danger">
-                        {I18n.t('delete')}
-                      </Typography.Text>
+                      <Typography.Text type="danger">删除</Typography.Text>
                     </Dropdown.Item>
                   </Dropdown.Menu>
                 }
@@ -490,7 +533,7 @@ export function PromptHeader() {
               icon={<IconCozExit />}
               disabled={streaming}
             >
-              {I18n.t('exit_free_comparison_mode')}
+              退出自由对比模式
             </Button>
             <Button
               color="primary"
@@ -498,7 +541,7 @@ export function PromptHeader() {
               disabled={(compareConfig?.groups || []).length >= 3 || streaming}
               onClick={handleAddNewComparePrompt}
             >
-              {I18n.t('add_control_group')}
+              增加对照组
             </Button>
           </>
         )}
@@ -511,14 +554,14 @@ export function PromptHeader() {
         isEdit={promptInfoModal.data?.isEdit}
         onOk={res => {
           if (promptInfoModal.data?.isCopy) {
-            window.open(`${baseURL}/pe/prompts/${res.cloned_prompt_id}`);
+            window.open(`pe/prompts/${res.cloned_prompt_id}`);
           } else if (promptInfoModal.data?.isEdit) {
             setPromptInfo(v => ({
               ...v,
               prompt_basic: res?.prompt_basic,
             }));
           } else {
-            navigate(`${baseURL}/pe/prompts/${res.id}`);
+            navigate(`pe/prompts/${res.id}`);
           }
 
           promptInfoModal.close();
@@ -531,6 +574,7 @@ export function PromptHeader() {
           submitModal.close();
           handleBackToDraft();
         }}
+        initVersion={nextVersion(promptInfo?.prompt_basic?.latest_version)}
       />
       <PromptDelete
         data={deleteModal.data}
@@ -538,7 +582,7 @@ export function PromptHeader() {
         onCacnel={deleteModal.close}
         onOk={() => {
           deleteModal.close();
-          navigate(`${baseURL}/pe/prompts`);
+          navigate('pe/prompts');
         }}
       />
     </div>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/playground.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/playground.tsx
deleted file mode 100644
index 858ef9c46..000000000
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-header/playground.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/diff-content.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/diff-content.tsx
index d318ff90a..45f8be5d6 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/diff-content.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/diff-content.tsx
@@ -1,5 +1,4 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable @typescript-eslint/no-magic-numbers */
@@ -9,20 +8,27 @@ import { type ReactNode, useMemo } from 'react';
 
 import { isEqual } from 'lodash-es';
 import { useRequest } from 'ahooks';
+import { safeJsonParse } from '@cozeloop/toolkit';
 import { PromptDiffEditor } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { useSpace } from '@cozeloop/biz-hooks-adapter';
-import { type Prompt, ToolChoiceType } from '@cozeloop/api-schema/prompt';
+import {
+  type Prompt,
+  ToolChoiceType,
+  VariableType,
+} from '@cozeloop/api-schema/prompt';
 import { Scenario } from '@cozeloop/api-schema/llm-manage';
 import { LlmManageApi } from '@cozeloop/api-schema';
 import {
   IconCozIllusEmpty,
   IconCozIllusEmptyDark,
 } from '@coze-arch/coze-design/illustrations';
-import { IconCozArrowRightFill } from '@coze-arch/coze-design/icons';
+import { IconCozLongArrowUp } from '@coze-arch/coze-design/icons';
 import { EmptyState, Tag, Typography } from '@coze-arch/coze-design';
 
 import { objSortedKeys } from '@/utils/prompt';
+import { VARIABLE_TYPE_ARRAY_MAP } from '@/consts';
+
+import LibraryBlockWidget from '../loop-prompt-editor/widgets/skill';
 
 import styles from './index.module.less';
 
@@ -53,6 +59,7 @@ export function DiffContent({
       messageList: base?.prompt_commit?.detail?.prompt_template?.messages,
       tools: base?.prompt_commit?.detail?.tools,
       toolCallConfig: base?.prompt_commit?.detail?.tool_call_config,
+      templateType: base?.prompt_commit?.detail?.prompt_template?.template_type,
     };
     const currentItemObj = {
       modelConfig: current?.prompt_draft?.detail?.model_config,
@@ -60,6 +67,8 @@ export function DiffContent({
       messageList: current?.prompt_draft?.detail?.prompt_template?.messages,
       tools: current?.prompt_draft?.detail?.tools,
       toolCallConfig: current?.prompt_draft?.detail?.tool_call_config,
+      templateType:
+        current?.prompt_draft?.detail?.prompt_template?.template_type,
     };
 
     return {
@@ -87,7 +96,7 @@ export function DiffContent({
               <Tag color="primary">{key}</Tag>
               <Typography.Text className="flex gap-1 items-center !font-semibold">
                 {baseValue ?? 'None'}
-                <IconCozArrowRightFill />
+                <IconCozLongArrowUp className="rotate-90 coz-fg-secondary" />
                 {currentValue ?? 'None'}
               </Typography.Text>
             </div>
@@ -97,38 +106,48 @@ export function DiffContent({
     };
 
     addDiffItem(
-      I18n.t('model_id'),
+      '模型 ID',
       baseItem.modelConfig?.model_id,
       currentItem.modelConfig?.model_id,
     );
 
     const baseModel = data?.models?.find(
-      item => item.model_id === baseItem.modelConfig?.model_id,
+      (item: any) =>
+        item.model_id === baseItem.modelConfig?.model_id ||
+        item?.openModel?.model_id === baseItem.modelConfig?.model_id,
     );
     const currentModel = data?.models?.find(
-      item => item.model_id === currentItem.modelConfig?.model_id,
+      (item: any) =>
+        item.model_id === currentItem.modelConfig?.model_id ||
+        item?.openModel?.model_id === currentItem.modelConfig?.model_id,
     );
 
     if (baseModel?.name !== currentModel?.name) {
-      addDiffItem(
-        I18n.t('model_name'),
-        baseModel?.name || '',
-        currentModel?.name || '',
-      );
+      addDiffItem('模型名称', baseModel?.name || '', currentModel?.name || '');
     }
 
     addDiffItem(
-      I18n.t('temperature'),
+      '回复随机性',
       baseItem.modelConfig?.temperature,
       currentItem.modelConfig?.temperature,
     );
     addDiffItem(
-      I18n.t('max_tokens'),
+      '最大回复长度',
       baseItem.modelConfig?.max_tokens,
       currentItem.modelConfig?.max_tokens,
     );
     addDiffItem(
-      I18n.t('top_p'),
+      '重复语句惩罚',
+      baseItem.modelConfig?.frequency_penalty,
+      currentItem.modelConfig?.frequency_penalty,
+    );
+    addDiffItem(
+      '存在惩罚',
+      baseItem.modelConfig?.presence_penalty,
+      currentItem.modelConfig?.presence_penalty,
+    );
+    addDiffItem(
+      'Top P',
       baseItem.modelConfig?.top_p,
       currentItem.modelConfig?.top_p,
     );
@@ -155,13 +174,46 @@ export function DiffContent({
       item => !baseItem.variables?.find(it => it.key === item.key),
     );
 
+    const typeChangeArray = (currentItem.variables || [])
+      ?.map(currentVariable => {
+        const baseVariable = baseItem.variables?.find(
+          it => it.key === currentVariable.key,
+        );
+        if (baseVariable && baseVariable?.type !== currentVariable.type) {
+          return {
+            key: `${currentVariable.key}-${currentVariable.type}`,
+            value: (
+              <div className="flex items-center gap-4">
+                <Tag color="primary">类型变更</Tag>
+                <Typography.Text className="flex gap-1 items-center !font-semibold">
+                  {currentVariable.key}:{' '}
+                  {
+                    VARIABLE_TYPE_ARRAY_MAP[
+                      baseVariable.type || VariableType.String
+                    ]
+                  }
+                  <IconCozLongArrowUp className="rotate-90 coz-fg-secondary" />
+                  {
+                    VARIABLE_TYPE_ARRAY_MAP[
+                      currentVariable.type || VariableType.String
+                    ]
+                  }
+                </Typography.Text>
+              </div>
+            ),
+          };
+        }
+        return;
+      })
+      .filter(Boolean) as { key: string; value: ReactNode }[];
+
     deleteArray?.forEach(item => {
       array.push({
         key: item.key || '',
         value: (
           <div className="flex items-center gap-4">
-            <Tag color="primary">{I18n.t('delete')}</Tag>
-            <Typography.Text className="flex gap-1 items-center!font-semibold">
+            <Tag color="primary">删除</Tag>
+            <Typography.Text className="flex gap-1 items-center !font-semibold">
               {item.key}
             </Typography.Text>
           </div>
@@ -174,14 +226,18 @@ export function DiffContent({
         key: item.key || '',
         value: (
           <div className="flex items-center gap-4">
-            <Tag color="primary">{I18n.t('add')}</Tag>
-            <Typography.Text className="flex gap-1 items-center!font-semibold">
+            <Tag color="primary">新增</Tag>
+            <Typography.Text className="flex gap-1 items-center !font-semibold">
               {item.key}
             </Typography.Text>
           </div>
         ),
       });
     });
+
+    if (typeChangeArray?.length) {
+      array.push(...typeChangeArray);
+    }
     return array;
   }, [isSame, baseItem, currentItem]);
 
@@ -192,13 +248,27 @@ export function DiffContent({
 
   const toolsIsSame = isEqual(baseItem.tools, currentItem.tools);
 
+  const templateTypeIsSame = isEqual(
+    baseItem.templateType,
+    currentItem.templateType,
+  );
+
+  const baseLibrarys = safeJsonParse(
+    (base?.prompt_commit || base?.prompt_draft)?.detail?.ext_infos?.workflow ??
+      '[]',
+  );
+  const currentLibrarys = safeJsonParse(
+    (base?.prompt_commit || base?.prompt_draft)?.detail?.ext_infos?.workflow ??
+      '[]',
+  );
+
   if (isSame) {
     return (
       <div className="w-full h-[433px] flex items-center justify-center">
         <EmptyState
           icon={<IconCozIllusEmpty width="160" height="160" />}
           darkModeIcon={<IconCozIllusEmptyDark width="160" height="160" />}
-          title={I18n.t('submission_no_version_diff')}
+          title="本次提交无版本差异"
         />
       </div>
     );
@@ -207,9 +277,7 @@ export function DiffContent({
     <div className="w-full flex flex-col gap-5">
       {modelDiffData.length ? (
         <div className="flex flex-col gap-2">
-          <Typography.Text className="!font-semibold">
-            {I18n.t('model_config')}
-          </Typography.Text>
+          <Typography.Text className="!font-semibold">模型设置</Typography.Text>
           <div className={styles['diff-desc-table']}>
             {modelDiffData.map(it => (
               <div key={it.key} className={styles['diff-desc-table-row']}>
@@ -222,7 +290,7 @@ export function DiffContent({
       {!templateIsSame ? (
         <div className="flex flex-col gap-2">
           <Typography.Text className="!font-semibold">
-            {I18n.t('prompt_template')}
+            Prompt 模板
           </Typography.Text>
           <div className={styles['diff-info-compare']}>
             <div className={styles['diff-info-compare-header']}>
@@ -238,7 +306,7 @@ export function DiffContent({
                 size="small"
                 strong
               >
-                {I18n.t('draft')}
+                草稿
               </Typography.Text>
             </div>
             <div className="w-full h-[234px] overflow-auto styled-scrollbar !pr-[6px]">
@@ -248,6 +316,12 @@ export function DiffContent({
                     objSortedKeys({
                       ...it,
                       id: undefined,
+                      parts: it.parts?.map(part =>
+                        objSortedKeys({
+                          ...part,
+                          id: undefined,
+                        }),
+                      ),
                     }),
                   ) || [],
                   null,
@@ -258,21 +332,29 @@ export function DiffContent({
                     objSortedKeys({
                       ...it,
                       id: undefined,
+                      parts: it.parts?.map(part =>
+                        objSortedKeys({
+                          ...part,
+                          id: undefined,
+                        }),
+                      ),
                     }),
                   ) || [],
                   null,
                   2,
                 )}
-              />
+              >
+                <LibraryBlockWidget
+                  librarys={[...baseLibrarys, ...currentLibrarys]}
+                />
+              </PromptDiffEditor>
             </div>
           </div>
         </div>
       ) : null}
       {variabdlesDiffData.length ? (
         <div className="flex flex-col gap-2">
-          <Typography.Text className="!font-semibold">
-            {I18n.t('variable_setting')}
-          </Typography.Text>
+          <Typography.Text className="!font-semibold">变量设置</Typography.Text>
           <div className={styles['diff-desc-table']}>
             {variabdlesDiffData.map(it => (
               <div key={it.key} className={styles['diff-desc-table-row']}>
@@ -284,24 +366,22 @@ export function DiffContent({
       ) : null}
       {!toolCallConfigIsSame || !toolsIsSame ? (
         <div className="flex flex-col gap-2">
-          <Typography.Text className="!font-semibold">
-            {I18n.t('function')}
-          </Typography.Text>
+          <Typography.Text className="!font-semibold">函数</Typography.Text>
           {toolCallConfigIsSame ? null : (
             <div className={styles['diff-desc-table']}>
               <div className={styles['diff-desc-table-row']}>
                 <div className="flex items-center gap-4">
-                  <Tag color="primary">{I18n.t('function')}</Tag>
+                  <Tag color="primary">函数</Tag>
                   <Typography.Text className="flex gap-1 items-center !font-semibold">
                     {baseItem.toolCallConfig?.tool_choice ===
                     ToolChoiceType.Auto
-                      ? I18n.t('open_enable_function')
-                      : I18n.t('close_enable_function')}
-                    <IconCozArrowRightFill />
+                      ? '打开 启用函数'
+                      : '关闭 启用函数'}
+                    <IconCozLongArrowUp className="rotate-90 coz-fg-secondary" />
                     {currentItem.toolCallConfig?.tool_choice ===
                     ToolChoiceType.Auto
-                      ? I18n.t('open_enable_function')
-                      : I18n.t('close_enable_function')}
+                      ? '打开 启用函数'
+                      : '关闭 启用函数'}
                   </Typography.Text>
                 </div>
               </div>
@@ -322,7 +402,7 @@ export function DiffContent({
                   size="small"
                   strong
                 >
-                  {I18n.t('draft')}
+                  草稿
                 </Typography.Text>
               </div>
 
@@ -344,6 +424,23 @@ export function DiffContent({
           )}
         </div>
       ) : null}
+      {!templateTypeIsSame ? (
+        <div className="flex flex-col gap-2">
+          <Typography.Text className="!font-semibold">模版引擎</Typography.Text>
+          <div className={styles['diff-desc-table']}>
+            <div className={styles['diff-desc-table-row']}>
+              <div className="flex items-center gap-4">
+                <Tag color="primary">变更</Tag>
+                <Typography.Text className="flex gap-1 items-center !font-semibold">
+                  {baseItem.templateType ?? 'None'}
+                  <IconCozLongArrowUp className="rotate-90 coz-fg-secondary" />
+                  {currentItem.templateType ?? 'None'}
+                </Typography.Text>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.module.less
index fd55c1674..ebd69fc95 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable declaration-no-important */
 .tab-header{
@@ -77,7 +75,7 @@
     align-items: center;
 
     width: 100%;
-    padding-right: 30px;
+    padding-right: 5px;
 
     background: #f0f0f7;
     border-bottom: 1px solid rgba(82, 100, 154, 13%);
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.tsx
index 4ae048df4..cb6de0a26 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/prompt-submit/index.tsx
@@ -1,20 +1,15 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 
-import { useNavigate } from 'react-router-dom';
 import { useEffect, useRef, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 import classNames from 'classnames';
 import { useRequest } from 'ahooks';
 import { EVENT_NAMES, sendEvent } from '@cozeloop/tea-adapter';
-import { I18n } from '@cozeloop/i18n-adapter';
-import { getBaseUrl } from '@cozeloop/components';
-import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import { useNavigateModule, useSpace } from '@cozeloop/biz-hooks-adapter';
 import { type Prompt } from '@cozeloop/api-schema/prompt';
-import { promptManage } from '@cozeloop/api-schema';
+import { StonePromptApi } from '@cozeloop/api-schema';
 import {
   IconCozIllusDone,
   IconCozIllusDoneDark,
@@ -26,14 +21,22 @@ import {
   type FormApi,
   Loading,
   Modal,
+  FormInput,
   Skeleton,
   Typography,
+  FormTextArea,
 } from '@coze-arch/coze-design';
 
 import { sleep, versionValidate } from '@/utils/prompt';
 import { usePromptStore } from '@/store/use-prompt-store';
 import { CALL_SLEEP_TIME } from '@/consts';
 
+import {
+  VersionLabelTitle,
+  FormVersionLabelSelect,
+  type LabelWithPromptVersion,
+  checkLabelDuplicate,
+} from '../version-label';
 import { DiffContent } from './diff-content';
 
 import styles from './index.module.less';
@@ -51,25 +54,32 @@ export function PromptSubmit({
   onCancel,
   initVersion,
 }: PromptSubmitProps) {
-  const formApi = useRef<FormApi<{ version?: string; description?: string }>>();
+  const formApi = useRef<
+    FormApi<{
+      version?: string;
+      description?: string;
+      labels?: LabelWithPromptVersion[];
+    }>
+  >();
   const { spaceID } = useSpace();
   const { promptInfo } = usePromptStore(
     useShallow(state => ({ promptInfo: state.promptInfo })),
   );
-  const navigate = useNavigate();
-  const baseURL = getBaseUrl(spaceID);
+  const navigate = useNavigateModule();
 
-  const [basePrompt, setBasePrompt] = useState<Prompt>();
+  const [basePrompt, setBasePrompt] = useState<Prompt | undefined>();
+  const [basePromptLoading, setBasePromptLoading] = useState(false);
   const [currentPrompt, setCurrentPrompt] = useState<Prompt>();
 
   const [okButtonText, setOkButtonText] = useState('继续');
 
   const { runAsync: getPromptByVersion } = useRequest(
     (version?: string) =>
-      promptManage.GetPrompt({
+      StonePromptApi.GetPrompt({
         prompt_id: promptInfo?.id ?? '',
         with_draft: !version,
         with_commit: Boolean(version),
+        workspace_id: spaceID,
       }),
     {
       manual: true,
@@ -79,7 +89,7 @@ export function PromptSubmit({
 
   const showSuccessModal = () => {
     const modal = Modal.info({
-      title: I18n.t('submit_new_version'),
+      title: '提交新版本',
       width: 960,
       closable: true,
       content: (
@@ -89,33 +99,33 @@ export function PromptSubmit({
             darkModeIcon={<IconCozIllusDoneDark width="160" height="160" />}
             title={
               <Typography.Title heading={5} className="!my-4">
-                {I18n.t('version_submit_success')}
+                提交成功
               </Typography.Title>
             }
             description={
               <div className="flex flex-col items-center gap-2 w-[400px]">
                 <Typography.Text className="flex gap-2 items-center">
-                  {I18n.t('cozeloop_sdk_data_report_observation')}
+                  接入 CozeLoop SDK 上报数据，进行数据观测
                   <Typography.Text
                     link
                     onClick={() => {
-                      navigate(`${baseURL}/observation/traces`);
+                      navigate('observation/traces');
                       modal.destroy();
                     }}
                   >
-                    {I18n.t('go_immediately')}
+                    立即前往
                   </Typography.Text>
                 </Typography.Text>
                 <Typography.Text className="flex gap-2 items-center">
-                  {I18n.t('prompt_effect_evaluation')}
+                  对 Prompt 进行效果评估，提升应用效果
                   <Typography.Text
                     link
                     onClick={() => {
-                      navigate(`${baseURL}/evaluation/datasets`);
+                      navigate('evaluation/datasets');
                       modal.destroy();
                     }}
                   >
-                    {I18n.t('go_immediately')}
+                    立即前往
                   </Typography.Text>
                 </Typography.Text>
               </div>
@@ -123,7 +133,7 @@ export function PromptSubmit({
           />
         </div>
       ),
-      okText: I18n.t('close'),
+      okText: '关闭',
     });
   };
 
@@ -136,12 +146,16 @@ export function PromptSubmit({
         return;
       }
 
+      await checkLabelDuplicate(values.labels);
+
       try {
-        await promptManage.CommitDraft({
+        await StonePromptApi.CommitDraft({
           prompt_id: promptInfo?.id || '',
           commit_version: values?.version || '',
           commit_description: values?.description,
+          label_keys: values?.labels?.map(item => item.key),
         });
+
         sendEvent(EVENT_NAMES.prompt_submit_info, {
           prompt_id: `${promptInfo?.id || 'playground'}`,
           prompt_key: promptInfo?.prompt_key || 'playground',
@@ -164,19 +178,26 @@ export function PromptSubmit({
   );
 
   useEffect(() => {
-    if (visible && promptInfo?.prompt_draft?.draft_info?.base_version) {
-      getPromptByVersion().then(vres => {
-        setCurrentPrompt(vres.prompt);
-        getPromptByVersion(
-          promptInfo?.prompt_draft?.draft_info?.base_version,
-        ).then(res => {
-          setBasePrompt(res?.prompt);
+    if (visible) {
+      setBasePromptLoading(true);
+      if (promptInfo?.prompt_draft?.draft_info?.base_version) {
+        getPromptByVersion().then(vres => {
+          setCurrentPrompt(vres.prompt);
+          getPromptByVersion(
+            promptInfo?.prompt_draft?.draft_info?.base_version,
+          ).then(res => {
+            setBasePrompt(res?.prompt);
+            setBasePromptLoading(false);
+          });
         });
-      });
+      } else {
+        setBasePromptLoading(false);
+      }
     } else {
-      setOkButtonText(I18n.t('continue'));
+      setOkButtonText('继续');
       setBasePrompt(undefined);
       setCurrentPrompt(undefined);
+      setBasePromptLoading(false);
       formApi.current?.reset();
     }
   }, [visible, promptInfo]);
@@ -186,22 +207,26 @@ export function PromptSubmit({
       initValues={{ version: initVersion }}
       getFormApi={api => (formApi.current = api)}
     >
-      <Form.Input
+      <FormInput
         label={{
-          text: I18n.t('version'),
+          text: '版本',
           required: true,
         }}
         field="version"
         required
         validate={val => versionValidate(val, initVersion)}
-        placeholder={I18n.t('input_version_number')}
+        placeholder="请输入版本号，版本号格式为a.b.c, 且每段为0-9999"
+      />
+
+      <FormVersionLabelSelect
+        label={<VersionLabelTitle />}
+        field="labels"
+        promptID={promptInfo?.id || ''}
       />
-      <Form.TextArea
-        label={I18n.t('version_description')}
+      <FormTextArea
+        label="版本说明"
         field="description"
-        placeholder={I18n.t('please_input', {
-          field: I18n.t('version_description'),
-        })}
+        placeholder="请输入版本说明"
         maxCount={200}
         maxLength={200}
         rows={5}
@@ -210,8 +235,8 @@ export function PromptSubmit({
   );
 
   const handleSubmit = () => {
-    if (okButtonText === I18n.t('continue')) {
-      setOkButtonText(I18n.t('submit'));
+    if (okButtonText === '继续') {
+      setOkButtonText('提交');
     } else {
       submitRunAsync();
     }
@@ -220,27 +245,29 @@ export function PromptSubmit({
   return (
     <Modal
       className="min-h-[calc(100vh - 140px)]"
-      width={900}
+      width={basePrompt ? 900 : 640}
       visible={visible}
-      title={I18n.t('submit_new_version')}
+      title="提交新版本"
       onCancel={onCancel}
-      okText={basePrompt ? okButtonText : I18n.t('submit')}
-      cancelText={I18n.t('cancel')}
+      okText={basePrompt ? okButtonText : '提交'}
+      cancelText="取消"
       onOk={basePrompt ? handleSubmit : submitRunAsync}
       okButtonProps={{ loading: submitLoading }}
       height="fit-content"
     >
       <Skeleton
         loading={Boolean(
-          !currentPrompt && promptInfo?.prompt_draft?.draft_info?.base_version,
+          (!currentPrompt &&
+            promptInfo?.prompt_draft?.draft_info?.base_version) ||
+            basePromptLoading,
         )}
         placeholder={
-          <div className="w-full flex items-center justify-center  h-[470px]">
+          <div className="w-full flex items-center justify-center h-[470px]">
             <Loading loading />
           </div>
         }
       >
-        <div className="w-full overflow-y-auto">
+        <div className="w-full  overflow-y-auto">
           {basePrompt ? (
             <div className="flex flex-col gap-2">
               <div className={styles['tab-header']}>
@@ -251,7 +278,7 @@ export function PromptSubmit({
                     'cursor-pointer',
                   )}
                   icon={
-                    okButtonText === I18n.t('submit') ? (
+                    okButtonText === '提交' ? (
                       <span className={styles['tab-icon']}>
                         <IconCozCheckMarkFill />
                       </span>
@@ -259,24 +286,26 @@ export function PromptSubmit({
                       <span className={styles['tab-icon']}>1</span>
                     )
                   }
-                  onClick={() => setOkButtonText(I18n.t('continue'))}
+                  onClick={() => setOkButtonText('继续')}
                 >
-                  {I18n.t('confirm_version_difference')}
+                  确认版本差异
                 </Typography.Text>
                 <Typography.Text
                   className={classNames(styles['tab-step'], {
-                    [styles['tab-active']]: okButtonText === I18n.t('submit'),
+                    [styles['tab-active']]: okButtonText === '提交',
                   })}
                   icon={<span className={styles['tab-icon']}>2</span>}
                 >
-                  {I18n.t('confirm_version_info')}
+                  确认版本信息
                 </Typography.Text>
               </div>
               <div className="flex-1">
-                {okButtonText === I18n.t('continue') ? (
+                {okButtonText === '继续' ? (
                   <DiffContent base={basePrompt} current={currentPrompt} />
                 ) : (
-                  submitForm
+                  <div className="flex justify-center w-full">
+                    <div className="w-[600px]">{submitForm}</div>
+                  </div>
                 )}
               </div>
             </div>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/group-select.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/group-select.tsx
new file mode 100644
index 000000000..5443de7fc
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/group-select.tsx
@@ -0,0 +1,156 @@
+import { createContext, useContext, useState } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import classNames from 'classnames';
+import {
+  IconCozArrowDown,
+  IconCozInfinity,
+  IconCozSingleOperate,
+} from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Popover,
+  Typography,
+  CozInputNumber,
+} from '@coze-arch/coze-design';
+
+import { useBasicStore } from '@/store/use-basic-store';
+import { MessageListGroupType } from '@/consts';
+
+interface GroupSelectContextType {
+  groupNum: number;
+  setGroupNum?: (num: number) => void;
+}
+
+export const GroupSelectContext = createContext<GroupSelectContextType>({
+  groupNum: 2,
+});
+
+interface GroupSelectProps {
+  streaming?: boolean;
+}
+
+export function GroupSelect({ streaming }: GroupSelectProps) {
+  const ctx = useContext(GroupSelectContext);
+  const [dropVisible, setDropVisible] = useState(false);
+  const { groupType, setGroupType } = useBasicStore(
+    useShallow(state => ({
+      groupType: state.groupType,
+      setGroupType: state.setGroupType,
+    })),
+  );
+
+  const isMultiGroup = groupType === MessageListGroupType.Multi;
+  return (
+    <div className="flex items-center gap-3">
+      <Popover
+        trigger="custom"
+        visible={dropVisible}
+        content={
+          <div className="px-4 pt-3 pb-4 w-[350px]">
+            <Typography.Text strong className="mb-3 block">
+              运行模式
+            </Typography.Text>
+
+            <div className="flex flex-col gap-2">
+              <div
+                className={classNames(
+                  '!h-fit !px-3 !pt-1.5 !pb-3 border border-solid coz-stroke-primary rounded-lg cursor-pointer hover:bg-[#969fff26]',
+                  {
+                    'coz-stroke-hglt':
+                      groupType === MessageListGroupType.Single,
+                    'bg-[#969fff26]': groupType === MessageListGroupType.Single,
+                  },
+                )}
+                onClick={() => {
+                  setGroupType(MessageListGroupType.Single);
+                  setDropVisible(false);
+                  ctx.setGroupNum?.(1);
+                }}
+              >
+                <div className="flex items-center gap-3">
+                  <IconCozSingleOperate className="flex-shrink-0" />
+                  <div className="flex flex-col items-start">
+                    <Typography.Text strong style={{ lineHeight: '32px' }}>
+                      单次运行
+                    </Typography.Text>
+                    <Typography.Text
+                      size="small"
+                      className="!text-[13px] !leading-[20px] !coz-fg-secondary"
+                    >
+                      模型每次只输出一条回复
+                    </Typography.Text>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                className={classNames(
+                  'items-start !h-fit !px-3 !pt-1.5 !pb-3 border border-solid coz-stroke-primary rounded-lg cursor-pointer hover:bg-[#969fff26]',
+                  {
+                    'coz-stroke-hglt': isMultiGroup,
+                    'bg-[#969fff26]': isMultiGroup,
+                  },
+                )}
+                onClick={() => {
+                  setGroupType(MessageListGroupType.Multi);
+                  setDropVisible(false);
+                  ctx.setGroupNum?.(1);
+                }}
+              >
+                <div className="flex items-center gap-3">
+                  <IconCozInfinity className="flex-shrink-0" />
+                  <div className="flex flex-col items-start">
+                    <Typography.Text strong style={{ lineHeight: '32px' }}>
+                      多次运行
+                    </Typography.Text>
+                    <Typography.Text
+                      size="small"
+                      className="!text-[13px] !leading-[20px] !coz-fg-secondary"
+                    >
+                      模型每次同时输出多条回复,便于测试模型回复稳定性
+                    </Typography.Text>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        position="topLeft"
+        onClickOutSide={() => setDropVisible(false)}
+      >
+        <Button
+          icon={<IconCozArrowDown />}
+          iconPosition="right"
+          color="primary"
+          className="!border border-solid coz-stroke-primary"
+          onClick={() => !streaming && setDropVisible(true)}
+          disabled={streaming}
+          size="small"
+        >
+          <Typography.Text
+            icon={isMultiGroup ? <IconCozInfinity /> : <IconCozSingleOperate />}
+          >
+            {isMultiGroup ? '多次运行' : '单次运行'}
+          </Typography.Text>
+        </Button>
+      </Popover>
+      {isMultiGroup ? (
+        <div className="flex items-center gap-2">
+          <Typography.Text>运行组数</Typography.Text>
+          <CozInputNumber
+            min={2}
+            max={10}
+            style={{ width: 50 }}
+            value={ctx.groupNum}
+            size="small"
+            onNumberChange={v => {
+              ctx.setGroupNum?.(v);
+            }}
+            disabled={streaming}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.module.less
index 64e6639ec..465aae8c0 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable max-nesting-depth */
 .send-msg-area {
   display: flex;
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.tsx
index eb137011c..ea31d0a37 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/send-msg-area/index.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable @typescript-eslint/no-magic-numbers */
@@ -17,7 +15,7 @@ import {
   Prec,
   PromptBasicEditor,
 } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
+import { GuardPoint, useGuard } from '@cozeloop/guard';
 import { useSpace } from '@cozeloop/biz-hooks-adapter';
 import { uploadFile } from '@cozeloop/biz-components-adapter';
 import {
@@ -54,21 +52,34 @@ import {
   type ContentPartLoop,
   usePromptMockDataStore,
 } from '@/store/use-mockdata-store';
-import { MAX_FILE_SIZE, MAX_FILE_SIZE_MB, MAX_IMAGE_FILE } from '@/consts';
+import { useBasicStore } from '@/store/use-basic-store';
+import {
+  MAX_FILE_SIZE,
+  MAX_FILE_SIZE_MB,
+  MAX_IMAGE_FILE,
+  MessageListGroupType,
+} from '@/consts';
+
+import { GroupSelect } from './group-select';
 
 import styles from './index.module.less';
 
 interface SendMsgAreaProps {
   streaming?: boolean;
+  isSingleRound?: boolean;
   onMessageSend?: (queryMsg?: Message) => void;
   stopStreaming?: () => void;
+  onClearHistory?: () => void;
 }
 
 export function SendMsgArea({
   streaming,
   onMessageSend,
   stopStreaming,
+  onClearHistory,
+  isSingleRound,
 }: SendMsgAreaProps) {
+  const globalDisabled = useGuard({ point: GuardPoint['pe.prompt.global'] });
   const { spaceID } = useSpace();
   const [editorActive, setEditorActive] = useState(false);
 
@@ -77,6 +88,15 @@ export function SendMsgArea({
   });
   const [queryMsgKey, setQueryMsgKey] = useState<string>(nanoid());
 
+  const { groupType, executeDisabled } = useBasicStore(
+    useShallow(state => ({
+      groupType: state.groupType,
+      executeDisabled: state.executeDisabled,
+    })),
+  );
+
+  const isSingleGroup = groupType === MessageListGroupType.Single;
+
   const { variables, currentModel } = usePromptStore(
     useShallow(state => ({
       variables: state.variables,
@@ -125,7 +145,12 @@ export function SendMsgArea({
 
   const inputReadonly = streaming;
 
-  const executeDisabled = streaming || fileUploading || !currentModel?.model_id;
+  const currentExecuteDisabled =
+    streaming ||
+    fileUploading ||
+    !currentModel?.model_id ||
+    globalDisabled.data.readonly ||
+    executeDisabled;
 
   const isMultiModal = currentModel?.ability?.multi_modal;
   const isMultiModalRef = useLatest(isMultiModal);
@@ -188,7 +213,7 @@ export function SendMsgArea({
       }));
     } catch (error) {
       console.info('error', error);
-      Toast.error(I18n.t('image_upload_error'));
+      Toast.error('图片上传失败，请稍后重试');
       setQueryMsg(v => ({
         ...v,
         parts: (v?.parts || []).filter((it: ContentPartLoop) => it.uid !== uid),
@@ -197,7 +222,7 @@ export function SendMsgArea({
   };
 
   const handleSendMessage = () => {
-    if (executeDisabled) {
+    if (currentExecuteDisabled) {
       return;
     }
 
@@ -212,19 +237,13 @@ export function SendMsgArea({
       for (const item of Array.from(items)) {
         if (item.type.includes('image')) {
           if (isMaxImgSizeRef.current) {
-            Toast.warning(
-              I18n.t('max_upload_picture_num', { num: MAX_IMAGE_FILE }),
-            );
+            Toast.warning(`最多上传${MAX_IMAGE_FILE}张图片`);
             return;
           }
           const file = item.getAsFile();
           if (file) {
             if (file.size / 1024 > MAX_FILE_SIZE) {
-              Toast.error(
-                I18n.t('image_size_not_exceed_num_mb', {
-                  num: MAX_FILE_SIZE_MB,
-                }),
-              );
+              Toast.error(`图片大小不能超过${MAX_FILE_SIZE_MB}MB`);
               return;
             }
             uploadRef.current?.insert([file], 0);
@@ -238,6 +257,7 @@ export function SendMsgArea({
   const clearHistoricChat = () => {
     setHistoricMessage([]);
     compareConfig?.groups?.forEach((_, idx) => setHistoricMessageById(idx, []));
+    onClearHistory?.();
   };
 
   const extensions: Extension[] = useMemo(
@@ -297,8 +317,9 @@ export function SendMsgArea({
   return (
     <div className={styles['send-msg-area']}>
       <div className="flex items-center justify-end">
+        {isCompare ? null : <GroupSelect streaming={streaming} />}
         <div className="flex-1 flex items-center justify-center">
-          {streaming && stopStreaming ? (
+          {streaming && stopStreaming && isSingleGroup ? (
             <Space align="center">
               <Button
                 color="primary"
@@ -306,13 +327,13 @@ export function SendMsgArea({
                 size="mini"
                 onClick={stopStreaming}
               >
-                {I18n.t('stop_respond')}
+                停止响应
               </Button>
             </Space>
           ) : null}
         </div>
         {isCompare ? null : (
-          <Tooltip content={I18n.t('clear_history_messages')} theme="dark">
+          <Tooltip content="清空历史消息" theme="dark">
             <IconButton
               icon={<IconCozBroom />}
               onClick={clearHistoricChat}
@@ -321,135 +342,141 @@ export function SendMsgArea({
             />
           </Tooltip>
         )}
+        {isSingleRound ? (
+          <Button
+            icon={<IconCozPlayCircle />}
+            onClick={handleSendMessage}
+            disabled={currentExecuteDisabled}
+            size="small"
+          >
+            运行
+          </Button>
+        ) : null}
       </div>
-      <div
-        className={cn(styles['send-msg-area-content'], {
-          [styles['editor-active']]: editorActive,
-        })}
-      >
-        {imgParts?.length ? (
-          <ImagePreview closable className={styles['msg-files']}>
-            {imgParts?.map((it: ContentPartLoop) => (
-              <Badge
-                className={styles['msg-files-badge']}
-                count={
-                  <IconCozCrossCircleFillPalette
-                    className={styles['msg-files-badge-icon']}
-                    onClick={() => removePart(it)}
+      {isSingleRound ? null : (
+        <div
+          className={cn(styles['send-msg-area-content'], {
+            [styles['editor-active']]: editorActive,
+          })}
+        >
+          {imgParts?.length ? (
+            <ImagePreview closable className={styles['msg-files']}>
+              {imgParts?.map((it: ContentPartLoop) => (
+                <Badge
+                  className={styles['msg-files-badge']}
+                  count={
+                    <IconCozCrossCircleFillPalette
+                      className={styles['msg-files-badge-icon']}
+                      onClick={() => removePart(it)}
+                    />
+                  }
+                  key={it.image_url?.url || it.image_url?.uri || it.uid}
+                >
+                  <Spin
+                    style={{ width: 45, height: 45 }}
+                    spinning={it.status === 'uploading'}
+                    size="small"
+                  >
+                    <Image
+                      width={45}
+                      height={45}
+                      src={it.image_url?.url}
+                      imgStyle={{ objectFit: 'contain' }}
+                    />
+                  </Spin>
+                </Badge>
+              ))}
+            </ImagePreview>
+          ) : null}
+          <div className={cn('w-full flex-1 gap-0.5')}>
+            <PromptBasicEditor
+              key={queryMsgKey}
+              defaultValue={queryMsg?.content}
+              onChange={value =>
+                setQueryMsg(v => ({
+                  ...v,
+                  content: value,
+                }))
+              }
+              height={44}
+              variables={variables?.filter(
+                it => it.type === VariableType.String,
+              )}
+              readOnly={streaming || inputReadonly}
+              linePlaceholder="请输入问题测试大模型回复，回车发送，Shift+回车换行"
+              customExtensions={extensions}
+              onFocus={() => setEditorActive(true)}
+              onBlur={() => setEditorActive(false)}
+            />
+          </div>
+          <div className="flex items-center justify-between w-full gap-0.5 px-3">
+            <div className="flex items-center gap-2">
+              {isCompare ? (
+                <Tooltip content="清空历史消息" theme="dark">
+                  <IconButton
+                    icon={<IconCozBroom />}
+                    onClick={clearHistoricChat}
+                    color="secondary"
+                    disabled={streaming}
                   />
+                </Tooltip>
+              ) : null}
+              <Upload
+                key={queryMsgKey}
+                ref={uploadRef}
+                action=""
+                customRequest={handleUploadFile}
+                accept="image/*"
+                showUploadList={false}
+                maxSize={MAX_FILE_SIZE}
+                limit={canUploadFileSize}
+                onSizeError={() =>
+                  Toast.error(`图片大小不能超过${MAX_FILE_SIZE_MB}MB`)
+                }
+                onExceed={() =>
+                  Toast.warning(`最多上传${MAX_IMAGE_FILE}张图片`)
                 }
-                key={it.image_url?.url || it.image_url?.uri || it.uid}
+                multiple
+                fileList={imgParts.map(it => ({
+                  uid: it.uid || '',
+                  url: it.image_url?.url,
+                  status: it.status || 'success',
+                  name: it.uid || '',
+                  size: '0',
+                }))}
               >
-                <Spin
-                  style={{ width: 45, height: 45 }}
-                  spinning={it.status === 'uploading'}
-                  size="small"
-                >
-                  <Image
-                    width={45}
-                    height={45}
-                    src={it.image_url?.url}
-                    imgStyle={{ objectFit: 'contain' }}
-                  />
-                </Spin>
-              </Badge>
-            ))}
-          </ImagePreview>
-        ) : null}
-        <div className={cn('w-full flex-1 gap-0.5')}>
-          <PromptBasicEditor
-            key={queryMsgKey}
-            defaultValue={queryMsg?.content}
-            onChange={value =>
-              setQueryMsg(v => ({
-                ...v,
-                content: value,
-              }))
-            }
-            height={44}
-            variables={variables?.filter(it => it.type === VariableType.String)}
-            readOnly={streaming || inputReadonly}
-            linePlaceholder={I18n.t('input_question_tip')}
-            customExtensions={extensions}
-            onFocus={() => setEditorActive(true)}
-            onBlur={() => setEditorActive(false)}
-          />
-        </div>
-        <div className="flex items-center justify-between w-full gap-0.5 px-3">
-          <div className="flex items-center gap-2">
-            {isCompare ? (
-              <Tooltip content={I18n.t('clear_history_messages')} theme="dark">
                 <IconButton
-                  icon={<IconCozBroom />}
-                  onClick={clearHistoricChat}
-                  color="secondary"
-                  disabled={streaming}
+                  icon={<IconCozImage />}
+                  color="primary"
+                  disabled={streaming || isMaxImgSize || !isMultiModal}
                 />
-              </Tooltip>
-            ) : null}
-            <Upload
-              key={queryMsgKey}
-              ref={uploadRef}
-              action=""
-              customRequest={handleUploadFile}
-              accept="image/*"
-              showUploadList={false}
-              maxSize={MAX_FILE_SIZE}
-              limit={canUploadFileSize}
-              onSizeError={() =>
-                Toast.error(
-                  Toast.error(
-                    I18n.t('image_size_not_exceed_num_mb', {
-                      num: MAX_FILE_SIZE_MB,
-                    }),
-                  ),
-                )
-              }
-              onExceed={() =>
-                Toast.warning(
-                  I18n.t('max_upload_picture_num', { num: MAX_IMAGE_FILE }),
-                )
-              }
-              multiple
-              fileList={imgParts.map(it => ({
-                uid: it.uid || '',
-                url: it.image_url?.url,
-                status: it.status || 'success',
-                name: it.uid || '',
-                size: '0',
-              }))}
+              </Upload>
+              {isMultiModal ? (
+                <Typography.Text size="small" type="tertiary">
+                  {imgCount} / 20
+                </Typography.Text>
+              ) : (
+                <Typography.Text
+                  size="small"
+                  type="tertiary"
+                  icon={<IconCozInfoCircle />}
+                >
+                  该模型不支持上传图片
+                </Typography.Text>
+              )}
+            </div>
+            <Button
+              icon={<IconCozPlayCircle />}
+              onClick={handleSendMessage}
+              disabled={currentExecuteDisabled}
             >
-              <IconButton
-                icon={<IconCozImage />}
-                color="primary"
-                disabled={streaming || isMaxImgSize || !isMultiModal}
-              />
-            </Upload>
-            {isMultiModal ? (
-              <Typography.Text size="small" type="tertiary">
-                {imgCount} / 20
-              </Typography.Text>
-            ) : (
-              <Typography.Text
-                size="small"
-                type="tertiary"
-                icon={<IconCozInfoCircle />}
-              >
-                {I18n.t('model_not_support_picture')}
-              </Typography.Text>
-            )}
+              运行
+            </Button>
           </div>
-          <Button
-            icon={<IconCozPlayCircle />}
-            onClick={handleSendMessage}
-            disabled={executeDisabled}
-          >
-            {I18n.t('run')}
-          </Button>
         </div>
-      </div>
+      )}
       <Typography.Text size="small" type="tertiary" className="text-center">
-        {I18n.t('generated_by_ai_tip')}
+        内容由AI生成，无法确保真实准确，仅供参考。
       </Typography.Text>
     </div>
   );
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.module.less
index e2923d091..31061d2db 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 .tools-editor-container {
   cursor: pointer;
 
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.tsx
index d3086f0ec..73ece133b 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/tools-card/index.tsx
@@ -1,10 +1,7 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 import { useShallow } from 'zustand/react/shallow';
 import { EVENT_NAMES, sendEvent } from '@cozeloop/tea-adapter';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { CollapseCard } from '@cozeloop/components';
 import { useModalData } from '@cozeloop/base-hooks';
 import { ToolChoiceType } from '@cozeloop/api-schema/prompt';
@@ -52,7 +49,7 @@ export function ToolsCard({ uid, defaultVisible }: ToolsCardProps) {
     setMockTools,
   } = useCompare(uid);
 
-  const { readonly } = useBasicStore(
+  const { readonly: basicReadonly } = useBasicStore(
     useShallow(state => ({ readonly: state.readonly })),
   );
 
@@ -62,7 +59,7 @@ export function ToolsCard({ uid, defaultVisible }: ToolsCardProps) {
 
   const toolModal = useModalData<ToolWithMock>();
 
-  const currentReadonly = readonly || streaming;
+  const currentReadonly = basicReadonly || streaming;
   const functionCallEnabled = currentModel?.ability?.function_call;
 
   const deleteToolByTool = (name?: string) => {
@@ -86,11 +83,11 @@ export function ToolsCard({ uid, defaultVisible }: ToolsCardProps) {
         subInfo={
           functionCallEnabled || !currentModel ? null : (
             <Tag size="mini" color="red" prefixIcon={<IconCozWarningCircle />}>
-              {I18n.t('model_not_support')}
+              模型不支持
             </Tag>
           )
         }
-        title={<Typography.Text strong>{I18n.t('function')}</Typography.Text>}
+        title={<Typography.Text strong>函数</Typography.Text>}
         extra={
           <Space spacing="tight">
             <div
@@ -113,9 +110,7 @@ export function ToolsCard({ uid, defaultVisible }: ToolsCardProps) {
                 }}
                 disabled={currentReadonly || !functionCallEnabled}
               />
-              <Typography.Text size="small">
-                {I18n.t('enable_function')}
-              </Typography.Text>
+              <Typography.Text size="small">启用函数</Typography.Text>
             </div>
             {isCompare ? null : (
               <div
@@ -137,16 +132,14 @@ export function ToolsCard({ uid, defaultVisible }: ToolsCardProps) {
                     currentReadonly
                   }
                 />
-                <Typography.Text size="small">
-                  {I18n.t('single_step_debugging')}
-                </Typography.Text>
+                <Typography.Text size="small">单步调试</Typography.Text>
               </div>
             )}
           </Space>
         }
         defaultVisible={defaultVisible}
       >
-        <div className="flex flex-col gap-2 pt-4">
+        <div className="flex flex-col gap-2 pt-2">
           {tools?.map(item => {
             const mockTool = mockTools?.find(
               it => it?.name === item?.function?.name,
@@ -171,12 +164,12 @@ export function ToolsCard({ uid, defaultVisible }: ToolsCardProps) {
             onClick={() => toolModal.open()}
             disabled={currentReadonly || !functionCallEnabled}
           >
-            {I18n.t('new_function')}
+            新增函数
           </Button>
         </div>
       </CollapseCard>
       <ToolModal
-        disabled={!functionCallEnabled}
+        disabled={!functionCallEnabled || currentReadonly}
         visible={toolModal.visible}
         data={toolModal.data}
         onClose={() => toolModal.close()}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.module.less
index 27a57621c..42ba88d24 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 .tools-list-item {
   cursor: pointer;
 
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.tsx
index d8984bd39..ab1d1dfa1 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/index.tsx
@@ -1,6 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-import { I18n } from '@cozeloop/i18n-adapter';
 import { type Tool } from '@cozeloop/api-schema/prompt';
 import { IconCozTrashCan } from '@coze-arch/coze-design/icons';
 import { IconButton, Popconfirm, Typography } from '@coze-arch/coze-design';
@@ -40,10 +37,10 @@ export function ToolItem({
         </Typography.Text>
         {!showDelete ? null : (
           <Popconfirm
-            title={I18n.t('delete_function')}
-            content={I18n.t('confirm_delete_function')}
-            cancelText={I18n.t('Cancel')}
-            okText={I18n.t('delete')}
+            title="删除函数"
+            content="确认删除该函数吗？"
+            cancelText="取消"
+            okText="删除"
             okButtonProps={{ color: 'red' }}
             stopPropagation={true}
             onConfirm={e => {
@@ -76,7 +73,7 @@ export function ToolItem({
       </div>
       <div className="flex gap-1 w-full">
         <Typography.Text type="tertiary" size="small" className="flex-shrink-0">
-          {I18n.t('mock_value')}:
+          模拟值:
         </Typography.Text>
         <Typography.Text
           type="secondary"
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/tool-modal.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/tool-modal.tsx
index 8efa2bc8e..f3fd432a7 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/tool-modal.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/tools-item/tool-modal.tsx
@@ -1,13 +1,9 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useMemo, useState } from 'react';
 
-import classNames from 'classnames';
 import { safeParseJson } from '@cozeloop/toolkit';
-import { BaseJsonEditor, BaseRawTextEditor } from '@cozeloop/prompt-components';
 import { handleCopy, TooltipWhenDisabled } from '@cozeloop/components';
 import { ToolType } from '@cozeloop/api-schema/prompt';
 import { IconCozCopy } from '@coze-arch/coze-design/icons';
@@ -21,10 +17,9 @@ import {
   Toast,
   Typography,
 } from '@coze-arch/coze-design';
+import { SchemaEditor } from '@cozeloop/prompt-components';
 
 import { type ToolWithMock } from '.';
-import { I18n } from '@cozeloop/i18n-adapter';
-
 interface ToolModalProps {
   visible?: boolean;
   data?: ToolWithMock;
@@ -72,41 +67,6 @@ const TEMPLATE_DATA = `{
   }
 }`;
 
-export const SchemaEditor = ({
-  value,
-  onChange,
-  placeholder,
-  readOnly,
-  language,
-  className,
-}: SchemaEditorProps) => (
-  <div
-    className={classNames(
-      'w-full h-[500px] border border-solid coz-stroke-primary rounded-[4px] overflow-hidden relative bg-white',
-      className,
-    )}
-  >
-    {language === 'json' ? (
-      <BaseJsonEditor
-        className="w-full h-full overflow-y-auto"
-        onChange={onChange}
-        value={value || ''}
-        placeholder={placeholder}
-        readonly={readOnly}
-        borderRadius={4}
-      />
-    ) : (
-      <BaseRawTextEditor
-        className="w-full h-full overflow-y-auto"
-        onChange={onChange}
-        value={value || ''}
-        placeholder={placeholder}
-        readonly={readOnly}
-      />
-    )}
-  </div>
-);
-
 interface ToolSchemaProps {
   name?: string;
   description?: string;
@@ -182,7 +142,7 @@ export function ToolModal({
 
     if (hasItem) {
       Toast.warning({
-        content: I18n.t('method_exists'),
+        content: '当前方法已经存在，请重新命名',
         zIndex: 99999,
       });
       return;
@@ -207,7 +167,7 @@ export function ToolModal({
 
   return (
     <Modal
-      title={data?.function?.name || I18n.t('new_function')}
+      title={data?.function?.name || '新函数'}
       width={960}
       visible={visible}
       onCancel={onClose}
@@ -217,14 +177,14 @@ export function ToolModal({
         disabled ? null : (
           <Space>
             <Button className="mr-2" onClick={onClose} color="primary">
-              {I18n.t('cancel')}
+              取消
             </Button>
             <TooltipWhenDisabled
-              content={I18n.t('method_name_rule')}
+              content="方法名称必须是 a-z、A-Z、0-9，或包含下划线和破折号，长度最长为 64。"
               disabled={Boolean(schema && !canSaveTool)}
             >
               <Button onClick={handleSaveTool} disabled={!canSaveTool}>
-                {I18n.t('confirm')}
+                确认
               </Button>
             </TooltipWhenDisabled>
           </Space>
@@ -235,7 +195,10 @@ export function ToolModal({
       <Row gutter={16}>
         <Col span={14}>
           <div className="flex justify-between items-center w-full h-8 mb-2">
-            <Typography.Text className="font-semibold items" type="tertiary">
+            <Typography.Text
+              className="font-semibold flex items-center"
+              type="tertiary"
+            >
               SCHEMA
               <IconCozCopy
                 className="ml-2 hover:text-semi-primary cursor-pointer"
@@ -251,7 +214,7 @@ export function ToolModal({
                   setMockValue('Sunny');
                 }}
               >
-                {I18n.t('insert_template')}
+                插入模版
               </Button>
             )}
           </div>
@@ -266,7 +229,7 @@ export function ToolModal({
         <Col span={10}>
           <div className="flex justify-between items-center w-full h-8 mb-2">
             <Typography.Text className="font-semibold" type="tertiary">
-              {I18n.t('default_mock_value')}
+              默认模拟值
             </Typography.Text>
             <Select
               value={mockType}
@@ -282,7 +245,7 @@ export function ToolModal({
             language={mockType}
             value={mockValue}
             onChange={v => setMockValue(v)}
-            placeholder={I18n.t('input_mock_value_here')}
+            placeholder="在此处输入模拟值以模拟函数的返回值。"
             readOnly={disabled}
           />
         </Col>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.module.less
index dd9f97720..56cfe6c15 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable declaration-no-important */
 .tabs {
   display: flex;
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.tsx
index 9b708c31c..3c5e226eb 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/trace-tabs/index.tsx
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 
 import { useMemo, useState } from 'react';
@@ -11,7 +9,6 @@ import {
   TraceDetail,
   SpanType,
 } from '@cozeloop/observation-component-adapter';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { ResizeSidesheet, TextWithCopy } from '@cozeloop/components';
 import { useSpace } from '@cozeloop/biz-hooks-adapter';
 import {
@@ -137,21 +134,20 @@ export const TraceTab = ({
                 type="tertiary"
                 className="flex items-center gap-1"
               >
-                {I18n.t('prompt_debug_data_refresh_retry')}
+                Prompt调试数据在路上，请刷新重试
               </Typography.Text>
               <Typography.Text
                 className="text-brand-9 cursor-pointer pt-3"
                 icon={<IconCozRefresh className="text-secondary" />}
                 onClick={runAsync}
               >
-                {I18n.t('refresh')}
+                刷新
               </Typography.Text>
             </div>
           }
         />
       );
     }
-
     return (
       <div className="flex flex-col h-full w-full">
         {isDrawer ? null : traceItemHeader}
@@ -163,7 +159,7 @@ export const TraceTab = ({
             {spansItem?.map((item, index) => (
               <TabPane
                 tabIndex={index}
-                tab={I18n.t('x_step', { num: index + 1 })}
+                tab={`第${index + 1}步`}
                 key={item.span_id || index}
                 itemKey={String(index)}
                 className="px-5"
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.module.less
index 3a8d2455c..d046cf1e6 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable declaration-no-important */
 .variable-input {
   display: flex;
@@ -29,6 +27,11 @@
   :global{
     .semi-input-textarea{
       padding: 0 !important;
+      font-size: 13px;
+    }
+
+    .semi-input{
+      font-size: 13px;
     }
   }
 }
@@ -56,11 +59,32 @@
 
     box-sizing: border-box;
     width: 100%;
-    height: 36px;
-    padding: 12px 8px;
+    height: 28px;
+    padding: 0px 8px;
 
     font-size: 12px;
+    background: var(--Mg-COZ-mg-secondary, rgba(90, 108, 167, 0.04));
 
     border-bottom: 1px solid var(--Stroke-COZ-stroke-primary, rgba(82, 100, 154, 13%));
   }
 }
+
+.loop-variable-input{
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  :global{
+    .semi-input-wrapper{
+      border: none !important;
+      background: transparent !important;
+      padding: 0 !important;
+      .semi-input{
+        padding: 0 !important;
+      }
+    }
+  }
+
+  input::placeholder {
+    color:var(--coz-fg-dim);
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.tsx
index 922d0427d..705326eda 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/variable-input/index.tsx
@@ -1,65 +1,140 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable complexity */
+/* eslint-disable @coze-arch/max-line-per-function */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from 'react';
 
+import { useShallow } from 'zustand/react/shallow';
 import cn from 'classnames';
-import { type PromptMessage } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
-import { TextWithCopy } from '@cozeloop/components';
+import { MultipartEditor, TextWithCopy } from '@cozeloop/components';
+import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import { uploadFile } from '@cozeloop/biz-components-adapter';
 import { useModalData } from '@cozeloop/base-hooks';
-import { type Message, VariableType } from '@cozeloop/api-schema/prompt';
-import { IconCozTrashCan } from '@coze-arch/coze-design/icons';
+import {
+  ContentType,
+  type Message,
+  TemplateType,
+  VariableType,
+  type VariableVal,
+} from '@cozeloop/api-schema/prompt';
+import {
+  IconCozArrowDown,
+  IconCozEdit,
+  IconCozPlus,
+  IconCozTrashCan,
+} from '@coze-arch/coze-design/icons';
 import {
   Button,
   IconButton,
   Popconfirm,
-  TextArea,
+  Tag,
   Typography,
 } from '@coze-arch/coze-design';
 
 import { messageId } from '@/utils/prompt';
+import { usePromptStore } from '@/store/use-prompt-store';
+import { useBasicStore } from '@/store/use-basic-store';
+import { VARIABLE_TYPE_ARRAY_MAP } from '@/consts';
 
+import { VariableValueInput } from '../variables-card/variable-modal';
 import { PlaceholderModal } from '../variables-card/placeholder-modal';
 
 import styles from './index.module.less';
 
 interface VariableInputProps {
-  variableKey?: string;
   variableType?: VariableType;
-  variableValue?: string;
-  placeholderMessages?: PromptMessage[];
   readonly?: boolean;
-  onValueChange?: (params: {
-    key?: string;
-    value?: string;
-    messageList?: PromptMessage[];
-  }) => void;
+  variableVal?: VariableVal;
+  onValueChange?: (params: VariableVal) => void;
   onDelete?: (key?: string) => void;
+  onVariableChange?: (val?: VariableVal) => void;
 }
 export function VariableInput({
-  variableKey,
+  variableVal,
   variableType,
-  variableValue,
-  placeholderMessages,
   onValueChange,
   onDelete,
   readonly,
+  onVariableChange,
 }: VariableInputProps) {
+  const { spaceID } = useSpace();
+  const {
+    key: variableKey,
+    value: variableValue,
+    placeholder_messages: placeholderMessages,
+    multi_part_values: multiPartValues,
+  } = variableVal ?? {};
   const [editorActive, setEditorActive] = useState(false);
   const placeholderModal = useModalData<Message[]>();
+  const { templateType } = usePromptStore(
+    useShallow(state => ({
+      templateType: state.templateType,
+    })),
+  );
+  const { setExecuteDisabled } = useBasicStore(
+    useShallow(state => ({
+      setExecuteDisabled: state.setExecuteDisabled,
+    })),
+  );
+  const [collapse, setCollapse] = useState(false);
+
+  const isPlaceholder = variableType === VariableType.Placeholder;
+  const isMultiPart = variableType === VariableType.MultiPart;
+  const isNormal = templateType === TemplateType.Normal;
+
   return (
     <div
       className={cn(styles['variable-input'], {
         [styles['variable-input-active']]: editorActive,
+        '!pb-1': collapse,
       })}
     >
       <div className="flex items-center justify-between h-8">
-        <TextWithCopy
-          content={variableKey}
-          maxWidth={200}
-          copyTooltipText="copy_variable_name"
-          textClassName="variable-text"
-        />
+        <div className="flex items-center gap-2">
+          <TextWithCopy
+            content={variableKey}
+            maxWidth={200}
+            copyTooltipText="复制变量名"
+            textClassName="variable-text"
+          />
+          {isNormal ? null : (
+            <Tag
+              color="primary"
+              className={cn(
+                '!border !border-solid !coz-stroke-primary !bg-white',
+                {
+                  'cursor-default':
+                    readonly || isPlaceholder || isNormal || isMultiPart,
+                },
+              )}
+              onClick={e => {
+                if (!readonly && !isPlaceholder && !isNormal && !isMultiPart) {
+                  onVariableChange?.({
+                    key: variableKey,
+                    value: variableValue,
+                  });
+                }
+
+                e.stopPropagation();
+              }}
+            >
+              {
+                VARIABLE_TYPE_ARRAY_MAP[
+                  (variableType ??
+                    VariableType.String) as keyof typeof VARIABLE_TYPE_ARRAY_MAP
+                ]
+              }
+              {readonly || isPlaceholder || isMultiPart ? null : (
+                <IconCozEdit className="ml-1" />
+              )}
+            </Tag>
+          )}
+          <IconCozArrowDown
+            className={cn('cursor-pointer', {
+              '-rotate-90': collapse,
+            })}
+            onClick={() => setCollapse(!collapse)}
+          />
+        </div>
         {readonly ? (
           <IconButton
             className={styles['delete-btn']}
@@ -70,10 +145,10 @@ export function VariableInput({
           />
         ) : (
           <Popconfirm
-            title={I18n.t('delete_variable')}
-            content={I18n.t('confirm_delete_var_in_tpl')}
-            cancelText={I18n.t('Cancel')}
-            okText={I18n.t('confirm')}
+            title="删除变量"
+            content="将删除 Prompt 模板中的该变量。确认删除吗？"
+            cancelText="取消"
+            okText="删除"
             okButtonProps={{ color: 'red' }}
             onConfirm={() => onDelete?.(variableKey)}
           >
@@ -87,66 +162,115 @@ export function VariableInput({
           </Popconfirm>
         )}
       </div>
-      {variableType === VariableType.Placeholder ? (
-        <>
-          {placeholderMessages?.length ? (
-            <div className="flex flex-col gap-2">
-              {placeholderMessages.map(message => (
-                <div className={styles['placeholder-message-wrap']}>
-                  <div className={styles['placeholder-message-header']}>
-                    {message.role ?? '-'}
-                  </div>
-                  <div className="px-3 py-1 min-h-[20px]">
-                    <Typography.Text size="small">
-                      {message.content}
-                    </Typography.Text>
+      <div
+        className={cn('h-fit', {
+          hidden: collapse,
+        })}
+      >
+        {isPlaceholder ? (
+          <>
+            {placeholderMessages?.length ? (
+              <div className="flex flex-col gap-2">
+                {placeholderMessages.map(message => (
+                  <div className={styles['placeholder-message-wrap']}>
+                    <div className={styles['placeholder-message-header']}>
+                      {message.role ?? '-'}
+                    </div>
+                    <div className="px-3 py-1 min-h-[20px]">
+                      <Typography.Text size="small">
+                        {message.content}
+                      </Typography.Text>
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
+              </div>
+            ) : null}
+            <div>
+              <Button
+                color="primary"
+                className="mt-1"
+                onClick={() => {
+                  const messages = placeholderMessages?.map(
+                    (item: Message & { id?: string }) => {
+                      if (!item.id || item.id === '0') {
+                        return {
+                          ...item,
+                          id: messageId(),
+                        };
+                      }
+                      return item;
+                    },
+                  );
+                  placeholderModal.open(messages as any);
+                }}
+                size="small"
+                icon={<IconCozPlus />}
+              >
+                添加数据
+              </Button>
             </div>
-          ) : null}
-          <Button
-            color="primary"
-            disabled={readonly}
-            onClick={() => {
-              const messages = placeholderMessages?.map(item => {
-                if (!item.id || item.id === '0') {
-                  return {
-                    ...item,
-                    id: messageId(),
-                  };
-                }
-                return item;
+          </>
+        ) : null}
+        {isMultiPart ? (
+          <MultipartEditor
+            value={
+              multiPartValues?.map(it => ({
+                content_type:
+                  it.type === ContentType.ImageURL ? 'Image' : 'Text',
+                text: it.text,
+                image: it.image_url,
+              })) as any
+            }
+            uploadFile={(params: any) => {
+              setExecuteDisabled(true);
+              return uploadFile?.(params).finally(() => {
+                setExecuteDisabled(false);
               });
-              placeholderModal.open(messages);
             }}
-            size="small"
-          >
-            {I18n.t('edit_placeholder')}
-          </Button>
-        </>
-      ) : (
-        <TextArea
-          value={variableValue}
-          onChange={(value: string) =>
-            onValueChange?.({ key: variableKey, value })
-          }
-          placeholder={I18n.t('please_input', { field: I18n.t('param_value') })}
-          borderless
-          autosize={{ minRows: 1, maxRows: 3 }}
-          disabled={readonly}
-          onFocus={() => setEditorActive(true)}
-          onBlur={() => setEditorActive(false)}
-          className="!border-0 !bg-transparent !p-0"
-        />
-      )}
+            spaceID={spaceID}
+            onChange={value => {
+              onValueChange?.({
+                key: variableKey,
+                multi_part_values: value?.map(it => ({
+                  type:
+                    it.content_type === 'Image'
+                      ? ContentType.ImageURL
+                      : ContentType.Text,
+                  text: it.text,
+                  image_url: it.image,
+                })),
+              });
+            }}
+          />
+        ) : null}
+        {isPlaceholder || isMultiPart ? null : (
+          <VariableValueInput
+            typeValue={variableType}
+            value={variableValue}
+            onChange={value => onValueChange?.({ key: variableKey, value })}
+            inputConfig={{
+              borderless: true,
+              inputClassName: styles['loop-variable-input'],
+              onFocus: () => {
+                setEditorActive(true);
+              },
+              onBlur: () => {
+                setEditorActive(false);
+              },
+              size: 'small',
+            }}
+            minHeight={26}
+            maxHeight={128}
+          />
+        )}
+      </div>
       <PlaceholderModal
         visible={placeholderModal.visible}
         onCancel={placeholderModal.close}
         onOk={messageList => {
           onValueChange?.({
             key: variableKey,
-            messageList,
+            placeholder_messages: messageList as any,
           });
           placeholderModal.close();
         }}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.module.less
new file mode 100644
index 000000000..733d7e0db
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.module.less
@@ -0,0 +1,7 @@
+.variable-modal-form {
+  :global{
+    .semi-form-field-label{
+      padding-right: 0;
+    }
+  }
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.tsx
index 6f5f72418..fc9eaa9de 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/index.tsx
@@ -1,17 +1,27 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable security/detect-non-literal-regexp */
+/* eslint-disable @coze-arch/max-line-per-function */
 import { useShallow } from 'zustand/react/shallow';
 import { nanoid } from 'nanoid';
-import { type PromptMessage } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { CollapseCard } from '@cozeloop/components';
-import { Role, VariableType } from '@cozeloop/api-schema/prompt';
-import { Typography } from '@coze-arch/coze-design';
+import { useModalData } from '@cozeloop/base-hooks';
+import {
+  ContentType,
+  Role,
+  TemplateType,
+  type VariableDef,
+  VariableType,
+  type VariableVal,
+} from '@cozeloop/api-schema/prompt';
+import { IconCozPlus } from '@coze-arch/coze-design/icons';
+import { Button, Typography } from '@coze-arch/coze-design';
 
+import { usePromptStore } from '@/store/use-prompt-store';
 import { useBasicStore } from '@/store/use-basic-store';
 import { useCompare } from '@/hooks/use-compare';
+import { VARIABLE_TYPE_ARRAY_TAG } from '@/consts';
 
 import { VariableInput } from '../variable-input';
+import { VariableModal } from './variable-modal';
 
 interface VariablesCardProps {
   uid?: number;
@@ -25,15 +35,25 @@ export function VariablesCard({ uid, defaultVisible }: VariablesCardProps) {
     setMessageList,
     mockVariables,
     setMockVariables,
+    setVariables,
   } = useCompare(uid);
   const { readonly: basicReadonly } = useBasicStore(
     useShallow(state => ({
       readonly: state.readonly,
     })),
   );
+  const { templateType } = usePromptStore(
+    useShallow(state => ({
+      templateType: state.templateType,
+    })),
+  );
+
+  const isNormalTemplate = templateType === TemplateType.Normal;
 
   const readonly = basicReadonly || streaming;
 
+  const varibaleModal = useModalData<VariableVal>();
+
   const onDeleteVariable = (key?: string) => {
     if (key) {
       const variableItem = variables?.find(it => it.key === key);
@@ -47,24 +67,77 @@ export function VariablesCard({ uid, defaultVisible }: VariablesCardProps) {
           );
           return newList;
         });
-      } else {
-        const rep = new RegExp(`{{${key}}}`, 'g');
+      }
+
+      if (isNormalTemplate) {
+        const reg = new RegExp(`{{${key}}}`, 'g');
+
         setMessageList(list => {
           if (!Array.isArray(list)) {
             return [];
           }
           const newList = list?.map(it => {
             if (it.content) {
+              const hasReg = reg.test(it.content);
               return {
                 ...it,
-                key: rep.test(it.content) ? nanoid() : it.key,
-                content: it.content.replace(rep, ''),
+                key: hasReg ? nanoid() : it.key,
+                content: it.content.replace(reg, ''),
+              };
+            } else if (it.parts?.length) {
+              let needNewKey = false;
+              const newParts = it.parts
+                .filter(
+                  part =>
+                    !(
+                      part.type === ContentType.MultiPartVariable &&
+                      part.text === key
+                    ),
+                )
+                .map(part => {
+                  if (
+                    part.type === ContentType.Text &&
+                    part.text &&
+                    reg.test(part.text)
+                  ) {
+                    needNewKey = true;
+                    return {
+                      ...part,
+                      text: part.text.replace(reg, ''),
+                    };
+                  }
+                  return part;
+                });
+              return {
+                ...it,
+                key:
+                  needNewKey || newParts.length !== it.parts.length
+                    ? nanoid()
+                    : it.key,
+                parts: newParts,
+                content:
+                  newParts.length === 1
+                    ? newParts.map(part => part.text).join('')
+                    : undefined,
               };
             }
             return it;
           });
           return newList;
         });
+      } else {
+        setVariables(list => {
+          if (!Array.isArray(list)) {
+            return [];
+          }
+          return list?.filter(it => it.key !== key);
+        });
+        setMockVariables(list => {
+          if (!Array.isArray(list)) {
+            return [];
+          }
+          return list?.filter(it => it.key !== key);
+        });
       }
     }
   };
@@ -72,12 +145,9 @@ export function VariablesCard({ uid, defaultVisible }: VariablesCardProps) {
   const changeInputVariableValue = ({
     key,
     value,
-    messageList,
-  }: {
-    key?: string;
-    value?: string;
-    messageList?: PromptMessage[];
-  }) => {
+    placeholder_messages,
+    multi_part_values,
+  }: VariableVal) => {
     setMockVariables(list => {
       if (!Array.isArray(list)) {
         return [];
@@ -87,7 +157,8 @@ export function VariablesCard({ uid, defaultVisible }: VariablesCardProps) {
           return {
             ...it,
             value,
-            placeholder_messages: messageList,
+            placeholder_messages,
+            multi_part_values,
           };
         }
         return it;
@@ -96,39 +167,103 @@ export function VariablesCard({ uid, defaultVisible }: VariablesCardProps) {
     });
   };
 
+  const handleVariableModalOk = (
+    def: VariableDef,
+    value: VariableVal,
+    isEdit?: boolean,
+  ) => {
+    if (isEdit) {
+      setVariables(list => {
+        if (!Array.isArray(list)) {
+          return [def];
+        }
+        const newList = list?.map(it => (it.key === def.key ? def : it));
+        return newList;
+      });
+      setMockVariables(list => {
+        if (!Array.isArray(list)) {
+          return [value];
+        }
+        const newList = list?.map(it => (it.key === def.key ? value : it));
+        return newList;
+      });
+    } else {
+      setVariables(list => {
+        if (!Array.isArray(list)) {
+          return [def];
+        }
+        return [...list, def];
+      });
+      setMockVariables(list => {
+        if (!Array.isArray(list)) {
+          return [value];
+        }
+        return [...list, value];
+      });
+    }
+    varibaleModal.close();
+  };
+
+  const tagKeys = Object.values(VARIABLE_TYPE_ARRAY_TAG);
+
   return (
     <CollapseCard
-      title={
-        <Typography.Text strong>{I18n.t('prompt_variable')}</Typography.Text>
-      }
+      title={<Typography.Text strong>Prompt 变量</Typography.Text>}
       defaultVisible={defaultVisible}
     >
-      <div className="flex flex-col gap-2 pt-4 pb-3">
+      <div className="flex flex-col gap-2 pt-2 pb-3">
         {mockVariables?.map(item => {
           const variable = variables?.find(it => it.key === item.key);
+          const isNormalTag =
+            !variable?.type_tags?.length ||
+            tagKeys.includes(variable?.type_tags?.[0] ?? '');
+
           return (
             <VariableInput
               key={`${item.key}`}
-              variableKey={item.key}
               variableType={variable?.type}
-              placeholderMessages={item.placeholder_messages}
-              readonly={readonly}
-              variableValue={item.value}
+              readonly={readonly || !isNormalTag}
+              variableVal={item}
               onDelete={key => onDeleteVariable(key)}
               onValueChange={value => changeInputVariableValue({ ...value })}
+              onVariableChange={value =>
+                varibaleModal.open({ ...value, ...item })
+              }
             />
           );
         })}
 
-        {variables?.some(it => it.key) ? null : (
+        {variables?.some(it => it.key) ||
+        templateType === TemplateType.Jinja2 ? null : (
           <Typography.Text
             type="tertiary"
             style={{ color: 'var(--coz-fg-dim)' }}
           >
-            {I18n.t('no_variable')}
+            暂无变量
           </Typography.Text>
         )}
+        {templateType === TemplateType.Jinja2 ? (
+          <Button
+            color="primary"
+            icon={<IconCozPlus />}
+            onClick={e => {
+              varibaleModal.open();
+              e.stopPropagation();
+            }}
+            disabled={readonly}
+          >
+            新增变量
+          </Button>
+        ) : null}
       </div>
+      <VariableModal
+        visible={varibaleModal.visible}
+        data={varibaleModal.data}
+        variableList={variables}
+        onCancel={varibaleModal.close}
+        onOk={handleVariableModalOk}
+        typeDisabled={readonly}
+      />
     </CollapseCard>
   );
 }
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/placeholder-modal.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/placeholder-modal.tsx
index 65f26ecca..cd97e7fc2 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/placeholder-modal.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/placeholder-modal.tsx
@@ -1,12 +1,9 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 import { useEffect, useRef, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 import Sortable from 'sortablejs';
 import { type PromptMessage } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { Role } from '@cozeloop/api-schema/prompt';
 import { IconCozPlus } from '@coze-arch/coze-design/icons';
 import { Button, Modal } from '@coze-arch/coze-design';
@@ -19,8 +16,8 @@ import { LoopPromptEditor } from '../loop-prompt-editor';
 interface PlaceholderModalProps {
   variableKey: string;
   visible: boolean;
-  data?: PromptMessage[];
-  onOk: (v: PromptMessage[]) => void;
+  data?: PromptMessage<string>[];
+  onOk: (v: PromptMessage<string>[]) => void;
   onCancel: () => void;
 }
 
@@ -39,7 +36,7 @@ export function PlaceholderModal({
     })),
   );
 
-  const [messageList, setMessageList] = useState<Array<PromptMessage>>(
+  const [messageList, setMessageList] = useState<Array<PromptMessage<string>>>(
     data || [],
   );
   const [isDrag, setIsDrag] = useState(false);
@@ -117,12 +114,12 @@ export function PlaceholderModal({
 
   return (
     <Modal
-      title={I18n.t('mock_message_group', { key: variableKey })}
+      title={`模拟消息组-${variableKey}`}
       visible={visible}
       onCancel={onCancel}
       width={920}
-      cancelText={I18n.t('Cancel')}
-      okText={I18n.t('confirm')}
+      cancelText="取消"
+      okText="确定"
       onOk={handleOk}
     >
       <div className="flex flex-col gap-2 h-[500px] overflow-y-auto">
@@ -164,20 +161,20 @@ export function PlaceholderModal({
               maxHeight={240}
               forbidJinjaHighlight
               forbidVariables
-              placeholder={I18n.t('please_input', {
-                field: I18n.t('mock_message'),
-              })}
+              placeholder="请输入模拟消息"
+              optimizeBtnHidden
+              modalVariableBtnHidden
             />
           ))}
         </div>
         <Button
-          className="flex-shrink-0 w-[fit-content]"
+          className="flex-shrink-0 w-[100px]"
           icon={<IconCozPlus />}
           onClick={addMessage}
           disabled={streaming || readonly}
           color="primary"
         >
-          {I18n.t('add_message')}
+          添加消息
         </Button>
       </div>
     </Modal>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/variable-modal.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/variable-modal.tsx
new file mode 100644
index 000000000..899168550
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/variables-card/variable-modal.tsx
@@ -0,0 +1,451 @@
+/* eslint-disable complexity */
+/* eslint-disable @coze-arch/max-line-per-function */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+/* eslint-disable security/detect-non-literal-regexp */
+
+import { useEffect, useRef } from 'react';
+
+import classNames from 'classnames';
+import Ajv from 'ajv';
+import { safeParseJson } from '@cozeloop/toolkit';
+import { BaseJsonEditor } from '@cozeloop/prompt-components';
+import { formateDecimalPlacesString } from '@cozeloop/components';
+import {
+  VariableType,
+  type VariableDef,
+  type VariableVal,
+} from '@cozeloop/api-schema/prompt';
+import {
+  Form,
+  Modal,
+  Radio,
+  RadioGroup,
+  TextArea,
+  useFormApi,
+  withField,
+  Toast,
+  FormInput,
+  FormSelect,
+  type FormApi,
+  CozInputNumber,
+  Typography,
+} from '@coze-arch/coze-design';
+
+import { VARIABLE_MAX_LEN, VARIABLE_TYPE_ARRAY_MAP } from '@/consts';
+
+import styles from './index.module.less';
+
+interface AddVariablesProps {
+  visible: boolean;
+  data?: VariableVal;
+  variableList?: VariableDef[];
+  typeDisabled?: boolean;
+  onCancel: () => void;
+  onOk: (def: VariableDef, value: VariableVal, isEdit?: boolean) => void;
+}
+
+export const getSchemaErrorInfo = (errors: Object | null | undefined) => {
+  if (!errors) {
+    return '输入内容不符合列的字段定义';
+  }
+  const errorInfo = errors?.[0];
+  const type = errorInfo?.keyword;
+  const instancePath = errorInfo?.instancePath;
+  switch (type) {
+    case 'type': {
+      return `${instancePath}数据类型不符合字段定义`;
+    }
+    case 'required': {
+      return `缺少必填字段"${instancePath ? `${instancePath}/` : ''}${errorInfo?.params?.missingProperty}"`;
+    }
+    case 'additionalProperties': {
+      return `存在冗余字段${errorInfo?.params?.additionalProperty}`;
+    }
+    default: {
+      return '输入内容不符合列的字段定义';
+    }
+  }
+};
+
+const ajv = new Ajv();
+
+const validateJson = (value: string, typeValue: VariableType) => {
+  const data = safeParseJson(value);
+  if (typeof data !== 'object') {
+    return '输入内容不是合法json格式';
+  }
+
+  const schema =
+    typeValue === VariableType.Object
+      ? {
+          type: 'object',
+          properties: {},
+          additionalProperties: true,
+        }
+      : {
+          type: 'array',
+          items: {
+            type: 'object',
+          },
+        };
+  switch (typeValue) {
+    case VariableType.Array_Boolean:
+      schema.items = { type: 'boolean' };
+      break;
+    case VariableType.Array_Integer:
+      schema.items = { type: 'integer' };
+      break;
+    case VariableType.Array_Float:
+      schema.items = { type: 'number' };
+      break;
+    case VariableType.Array_String:
+      schema.items = { type: 'string' };
+      break;
+    default:
+      break;
+  }
+
+  const validate = ajv.compile(schema);
+  const valid = validate(data);
+
+  if (!valid) {
+    return getSchemaErrorInfo(validate.errors);
+  }
+  return '';
+};
+
+export function VariableValueInput({
+  value,
+  disabled,
+  editerHeight,
+  typeValue,
+  inputConfig,
+  onChange,
+  minHeight,
+  maxHeight,
+}: {
+  value?: string;
+  typeValue?: VariableType;
+  disabled?: boolean;
+  editerHeight?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  inputConfig?: {
+    borderless?: boolean;
+    inputClassName?: string;
+    size?: 'small' | 'default';
+    onFocus?: () => void;
+    onBlur?: () => void;
+  };
+  onChange?: (v: string) => void;
+}) {
+  const formApi = useFormApi();
+
+  const handleObjectEditorChange = changeValue => {
+    onChange?.(changeValue);
+    if (Object.keys(formApi).length) {
+      if (!changeValue) {
+        formApi?.setError('value', '');
+      } else {
+        const error = validateJson(
+          changeValue,
+          typeValue || VariableType.Object,
+        );
+        formApi?.setError('value', error);
+      }
+    }
+  };
+
+  if (
+    typeValue === VariableType.Placeholder ||
+    typeValue === VariableType.MultiPart
+  ) {
+    return null;
+  }
+
+  if (typeValue === VariableType.Boolean) {
+    return (
+      <RadioGroup
+        onChange={e => onChange?.(e.target.value)}
+        value={value}
+        disabled={disabled}
+      >
+        <Radio value="true">True</Radio>
+        <Radio value="false">False</Radio>
+      </RadioGroup>
+    );
+  }
+
+  if (typeValue === VariableType.Integer || typeValue === VariableType.Float) {
+    return (
+      <CozInputNumber
+        key={typeValue}
+        placeholder={
+          typeValue === VariableType.Integer
+            ? '请输入整数'
+            : '请输入浮点数，最多保留4位小数'
+        }
+        style={{ width: '100%' }}
+        value={value}
+        onChange={v => {
+          // 使用正则表达式检查是否为有效数字（不包括科学记数法）
+          const isValidNumber = /^-?\d*\.?\d*$/.test(`${v}`);
+          if (!isValidNumber) {
+            formApi?.setError('value', '输入内容不符合列的字段定义'); // 设置错误信息
+          } else {
+            formApi?.setError('value', ''); // 清除错误信息
+          }
+          onChange?.(`${v}`);
+        }}
+        disabled={disabled}
+        formatter={inputValue =>
+          formateDecimalPlacesString(
+            inputValue,
+            Number(value),
+            typeValue === VariableType.Integer ? 0 : 4,
+          )
+        }
+        precision={typeValue === VariableType.Integer ? 0 : undefined}
+        borderless={inputConfig?.borderless}
+        className={inputConfig?.inputClassName}
+        onFocus={inputConfig?.onFocus}
+        onBlur={inputConfig?.onBlur}
+        hideButtons
+        size={inputConfig?.size}
+      />
+    );
+  }
+
+  if (typeValue === VariableType.Object || typeValue?.includes('array')) {
+    return (
+      <div
+        className={classNames('rounded-[6px]', {
+          'border border-solid border-[rgba(68,83,130,0.25)]':
+            !inputConfig?.borderless,
+        })}
+        key={typeValue}
+      >
+        <BaseJsonEditor
+          value={value || ''}
+          onChange={handleObjectEditorChange}
+          borderRadius={6}
+          editerHeight={editerHeight}
+          minHeight={minHeight}
+          maxHeight={maxHeight}
+          readonly={disabled}
+          onFocus={inputConfig?.onFocus}
+          onBlur={inputConfig?.onBlur}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <TextArea
+      key={typeValue}
+      value={value}
+      onChange={e => onChange?.(e)}
+      placeholder="请输入变量值"
+      autosize={{
+        minRows: 1,
+        maxRows: 3,
+      }}
+      disabled={!typeValue || disabled}
+      borderless={inputConfig?.borderless}
+      className={inputConfig?.inputClassName}
+      onFocus={inputConfig?.onFocus}
+      onBlur={inputConfig?.onBlur}
+    />
+  );
+}
+
+const VariableValueInputFrom = withField(VariableValueInput);
+
+export function VariableModal({
+  visible,
+  data,
+  typeDisabled,
+  onCancel,
+  onOk,
+  variableList,
+}: AddVariablesProps) {
+  const formApiRef = useRef<FormApi<VariableDef & { value?: string }>>();
+  const handleOk = async () => {
+    const res = await formApiRef.current?.validate().catch(e => {
+      console.error(e);
+      Toast.error('无法新增，请检查表单数据');
+    });
+    if (res) {
+      if (
+        (res.type === VariableType.Object || res.type?.includes('array')) &&
+        res.value
+      ) {
+        const v = safeParseJson(res.value);
+        onOk?.(
+          { ...res },
+          { key: res.key, value: JSON.stringify(v, null, 2) },
+          Boolean(data?.key),
+        );
+        return;
+      }
+      onOk?.(res, { key: res.key, value: res.value }, Boolean(data?.key));
+    }
+  };
+
+  const currentData = variableList?.find(it => it.key === data?.key);
+
+  useEffect(() => {
+    if (!visible) {
+      formApiRef.current?.reset();
+    } else {
+      if (
+        (currentData?.type?.includes('array') ||
+          currentData?.type === VariableType.Object) &&
+        data?.value
+      ) {
+        formApiRef.current?.setValues(
+          { ...data, ...currentData },
+          { isOverride: true },
+        );
+        const v = safeParseJson(data.value);
+
+        setTimeout(() => {
+          formApiRef.current?.setValue('value', JSON.stringify(v, null, 2));
+        }, 100);
+      } else {
+        if (data) {
+          formApiRef.current?.setValues(
+            { ...data, ...currentData },
+            { isOverride: true },
+          );
+          setTimeout(() => {
+            formApiRef.current?.setValue('value', data.value);
+          }, 100);
+        }
+      }
+    }
+  }, [visible, currentData, data]);
+
+  return (
+    <Modal
+      title={data?.key ? '编辑变量' : '新增变量'}
+      visible={visible}
+      onCancel={onCancel}
+      size="medium"
+      maskClosable={false}
+      onOk={handleOk}
+      cancelText="取消"
+      okText="确认"
+    >
+      <Form<VariableDef & { value?: string }>
+        key={currentData?.key}
+        className={styles['variable-modal-form']}
+        initValues={{ ...currentData, value: data?.value }}
+        getFormApi={api => (formApiRef.current = api)}
+        onValueChange={(_values, changeValue) => {
+          if (changeValue.type) {
+            const newValue =
+              changeValue.type === VariableType.Boolean ? 'false' : '';
+            formApiRef.current?.setValue('value', newValue);
+          }
+        }}
+        showValidateIcon={false}
+        labelPosition="top"
+      >
+        {({ formState }) => {
+          const { type } = formState.values;
+          const isJson =
+            type?.includes('array') || type === VariableType.Object;
+          return (
+            <>
+              <FormInput
+                field="key"
+                label="变量名称"
+                placeholder="请输入变量名称"
+                rules={[
+                  { required: true, message: '请输入变量名称' },
+                  {
+                    validator: (_, value) => {
+                      const regex = new RegExp(
+                        `^[a-zA-Z][a-zA-Z0-9_-]{0,${VARIABLE_MAX_LEN}}$`,
+                        'gm',
+                      );
+                      if (value && value.indexOf(' ') === 0) {
+                        return new Error('变量名不能以空格开头');
+                      }
+
+                      if (value && !regex.test(value)) {
+                        return new Error(
+                          '变量名格式仅支持字母、数字、下划线、中划线，且不能以数字开头',
+                        );
+                      }
+                      if (
+                        variableList?.some(it => it.key === value) &&
+                        !data?.key
+                      ) {
+                        return new Error('变量名已存在');
+                      }
+                      return true;
+                    },
+                  },
+                ]}
+                disabled={Boolean(data?.key)}
+                maxLength={VARIABLE_MAX_LEN}
+              />
+              <FormSelect
+                field="type"
+                label="数据类型"
+                placeholder="请选择变量的数据类型"
+                rules={[{ required: true, message: '请选择变量的数据类型' }]}
+                optionList={Object.keys(VARIABLE_TYPE_ARRAY_MAP)
+                  .filter(
+                    key =>
+                      key !== VariableType.Placeholder &&
+                      key !== VariableType.MultiPart,
+                  )
+                  .map(key => ({
+                    label:
+                      VARIABLE_TYPE_ARRAY_MAP[
+                        key as keyof typeof VARIABLE_TYPE_ARRAY_MAP
+                      ],
+                    value: key,
+                  }))}
+                style={{ width: '100%' }}
+                disabled={typeDisabled}
+              />
+              <VariableValueInputFrom
+                field="value"
+                label={
+                  <div className="flex w-full items-center justify-between">
+                    变量值
+                    {isJson ? (
+                      <Typography.Text
+                        size="small"
+                        className={'!text-[13px]'}
+                        link
+                        onClick={() => {
+                          const json = safeParseJson(formState.values.value);
+                          if (json) {
+                            formApiRef.current?.setValue(
+                              'value',
+                              JSON.stringify(json, null, 2),
+                            );
+                          }
+                        }}
+                      >
+                        格式化JSON
+                      </Typography.Text>
+                    ) : null}
+                  </div>
+                }
+                typeValue={type}
+                minHeight={26}
+                maxHeight={180}
+              />
+            </>
+          );
+        }}
+      </Form>
+    </Modal>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/version-label/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/index.tsx
new file mode 100644
index 000000000..1b359cd21
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/index.tsx
@@ -0,0 +1,8 @@
+export {
+  VersionLabelSelect,
+  FormVersionLabelSelect,
+  type LabelWithPromptVersion,
+  checkLabelDuplicate,
+} from './version-label-select';
+export { VersionLabelTitle } from './version-label-title';
+export { VersionLabelModal } from './version-label-modal';
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-modal.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-modal.tsx
new file mode 100644
index 000000000..59612ee40
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-modal.tsx
@@ -0,0 +1,91 @@
+import { useRef } from 'react';
+
+import { useRequest } from 'ahooks';
+import { type Label } from '@cozeloop/api-schema/prompt';
+import { StonePromptApi } from '@cozeloop/api-schema';
+import { Button, Form, type FormApi, Modal } from '@coze-arch/coze-design';
+
+import { VersionLabelTitle } from './version-label-title';
+import {
+  checkLabelDuplicate,
+  FormVersionLabelSelect,
+  type LabelWithPromptVersion,
+} from './version-label-select';
+
+interface Props {
+  visible: boolean;
+  spaceID: string;
+  promptID: string;
+  version?: string;
+  labels: Label[];
+  onCancel?: () => void;
+  onConfirm?: (labels: string[]) => void;
+}
+export function VersionLabelModal(props: Props) {
+  const formApiRef = useRef<FormApi<{ labels: LabelWithPromptVersion[] }>>();
+  const service = useRequest(
+    async () => {
+      const values = formApiRef.current?.getValues();
+      await StonePromptApi.UpdateCommitLabels({
+        workspace_id: props.spaceID,
+        prompt_id: props.promptID,
+        commit_version: props.version,
+        label_keys: values?.labels.map(item => item.key),
+      });
+      return values?.labels || [];
+    },
+    {
+      manual: true,
+      onSuccess: val => {
+        props.onConfirm?.(val.map(item => item.key));
+      },
+    },
+  );
+
+  return (
+    <Modal
+      title="修改版本标识"
+      visible={props.visible}
+      onCancel={props.onCancel}
+      width={640}
+      footer={
+        <div>
+          <Button
+            color="primary"
+            onClick={e => {
+              e.stopPropagation();
+              props.onCancel?.();
+            }}
+          >
+            取消
+          </Button>
+          <Button
+            onClick={async e => {
+              e.stopPropagation();
+              const values = formApiRef.current?.getValues();
+              await checkLabelDuplicate(values?.labels, props.version);
+              service.run();
+            }}
+            loading={service.loading}
+          >
+            提交
+          </Button>
+        </div>
+      }
+    >
+      <Form
+        getFormApi={formApi => (formApiRef.current = formApi)}
+        initValues={{
+          labels: props.labels || [],
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        <FormVersionLabelSelect
+          promptID={props.promptID}
+          label={<VersionLabelTitle />}
+          field="labels"
+        />
+      </Form>
+    </Modal>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-select.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-select.tsx
new file mode 100644
index 000000000..1a36f3742
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-select.tsx
@@ -0,0 +1,320 @@
+/* eslint-disable @coze-arch/max-line-per-function */
+import { useState } from 'react';
+
+import { debounce } from 'lodash-es';
+import classNames from 'classnames';
+import { useRequest } from 'ahooks';
+import { BaseSearchSelect } from '@cozeloop/components';
+import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import { StonePromptApi } from '@cozeloop/api-schema';
+import { IconCozPlus } from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Divider,
+  Input,
+  withField,
+  Form,
+  type CommonFieldProps,
+  Checkbox,
+  Highlight,
+  Tag,
+  Tooltip,
+  Modal,
+  Space,
+  Toast,
+} from '@coze-arch/coze-design';
+
+import { useVersionLabelList } from '@/hooks/use-version-label-list';
+
+export interface LabelWithPromptVersion {
+  key: string;
+  promptVersion?: string;
+}
+
+interface Props {
+  promptID: string;
+  value?: LabelWithPromptVersion[];
+  onChange?: (value: LabelWithPromptVersion[]) => void;
+}
+
+const MAX_SELECT_COUNT = 20;
+
+export function VersionLabelSelect(props: Props) {
+  const [showCreate, setShowCreate] = useState(false);
+  const { spaceID } = useSpace();
+  const [createInputVal, setCreateInputVal] = useState('');
+
+  const [createErrorInfo, setCreateErrorInfo] = useState('');
+
+  const [filterKey, setFilterKey] = useState('');
+
+  const service = useVersionLabelList({
+    promptID: props.promptID,
+    filterKey,
+  });
+
+  const createLabel = useRequest(
+    async (name: string) => {
+      await StonePromptApi.CreateLabel({
+        workspace_id: spaceID,
+        label: { key: name },
+      });
+      return { key: name };
+    },
+    {
+      manual: true,
+      onSuccess: () => {
+        setCreateInputVal('');
+        if (filterKey) {
+          setFilterKey('');
+        } else {
+          // filterKey 清空时会触发reload
+          service.reload();
+        }
+
+        Toast.success('创建版本标识成功');
+      },
+    },
+  );
+
+  const validateCreateInput = (v: string) => {
+    let err = '';
+    if (!v) {
+      err = '请输入版本标识';
+    } else if (!/^[a-z0-9_]+$/.test(v)) {
+      err = '标识只允许小写字母、数字和下划线';
+    } else if (service.data?.list?.find(item => item.value === v)) {
+      err = '标识已存在';
+    } else if (v.length > 50) {
+      err = '标识长度不能超过50个字符';
+    }
+    setCreateErrorInfo(err);
+  };
+
+  const validateCreateInputAsync = async (v: string) => {
+    const res = await StonePromptApi.BatchGetLabel({
+      workspace_id: spaceID,
+      label_keys: [v],
+    });
+
+    const hasError = !!res.labels?.length;
+    if (hasError) {
+      setCreateErrorInfo('标识已存在');
+    }
+    return hasError;
+  };
+
+  const resetCreateState = () => {
+    setShowCreate(false);
+    setCreateInputVal('');
+    setCreateErrorInfo('');
+  };
+
+  const handleSearch = (inputValue: string) => {
+    setFilterKey(inputValue);
+  };
+
+  const renderOptionItem = renderProps => {
+    const {
+      disabled,
+      selected,
+      label,
+      focused,
+      className,
+      style,
+      onMouseEnter,
+      onClick,
+      promptVersion,
+    } = renderProps;
+    const optionCls = classNames({
+      ['semi-select-option']: true,
+      ['semi-select-option-focused']: focused,
+      ['semi-select-option-disabled']: disabled,
+      ['semi-select-option-selected']: selected,
+      className,
+    });
+    const searchWords = [filterKey];
+    return (
+      <div
+        style={style}
+        className={optionCls}
+        onClick={() => onClick()}
+        onMouseEnter={e => onMouseEnter()}
+      >
+        <Checkbox checked={selected} className="mr-2" />
+        <div className="flex-1 pr-2">
+          <Highlight
+            sourceString={label}
+            searchWords={searchWords}
+            highlightStyle={{
+              color: '#5147FF',
+              backgroundColor: 'inherit',
+              fontWeight: 400,
+            }}
+          />
+        </div>
+        {promptVersion ? (
+          <Tooltip
+            theme="dark"
+            content={`当前标识已存在于${promptVersion}版本`}
+          >
+            <Tag color="grey" size="mini">
+              {promptVersion}
+            </Tag>
+          </Tooltip>
+        ) : null}
+      </div>
+    );
+  };
+
+  const handleCreateLabel = async () => {
+    const hasError = await validateCreateInputAsync(createInputVal);
+    if (!hasError) {
+      createLabel.run(createInputVal);
+    }
+  };
+  return (
+    <BaseSearchSelect
+      filter
+      remote
+      multiple
+      className="w-full"
+      showRefreshBtn
+      showClear
+      maxTagCount={100}
+      showRestTagsPopover
+      ellipsisTrigger
+      onClickRefresh={() => service.reload()}
+      loading={service.loading}
+      loadOptionByIds={ids =>
+        Promise.resolve(
+          ((ids as string[]) || []).map(id => ({
+            label: id,
+            value: id,
+          })),
+        )
+      }
+      optionList={service.data?.list}
+      renderOptionItem={renderOptionItem}
+      onSearch={debounce(handleSearch, 500)}
+      onListScroll={e => {
+        const { currentTarget: target } = e;
+        // 距离底部 20px 时加载更多
+        if (
+          target.scrollTop + target.clientHeight + 20 >=
+          target.scrollHeight
+        ) {
+          service.loadMore();
+        }
+      }}
+      onDropdownVisibleChange={v => {
+        if (!v) {
+          resetCreateState();
+        }
+      }}
+      outerBottomSlot={
+        <div>
+          <Divider margin={4} />
+          {showCreate ? (
+            <div className="p-1">
+              <div
+                className="flex flex-col h-8"
+                onBlur={() => resetCreateState()}
+              >
+                <Input
+                  autoFocus
+                  suffix={
+                    <Button
+                      size="small"
+                      icon={<IconCozPlus />}
+                      disabled={!!createErrorInfo || !createInputVal}
+                      className="!w-6 !h-6 relative left-[4px]"
+                      loading={createLabel.loading}
+                      onClick={handleCreateLabel}
+                    />
+                  }
+                  validateStatus={createErrorInfo ? 'error' : 'default'}
+                  value={createInputVal}
+                  onChange={v => {
+                    setCreateInputVal(v);
+                    validateCreateInput(v);
+                  }}
+                />
+              </div>
+              {createErrorInfo ? (
+                <Form.ErrorMessage
+                  className="text-[12px]"
+                  error={createErrorInfo}
+                />
+              ) : null}
+            </div>
+          ) : (
+            <div
+              onClick={() => setShowCreate(true)}
+              className="flex items-center h-8 coz-fg-hglt cursor-pointer px-3"
+            >
+              <IconCozPlus className="mr-2" />
+              创建自定义标识
+            </div>
+          )}
+        </div>
+      }
+      max={MAX_SELECT_COUNT}
+      placeholder="请输入版本标识"
+      value={props.value?.map(item => item.key)}
+      onExceed={() => {
+        Toast.info(`最多选择${MAX_SELECT_COUNT}个标识`);
+      }}
+      onChange={v => {
+        props.onChange?.(
+          (v as string[]).map(item => ({
+            key: item,
+            promptVersion: service.data?.versionMap?.[item] || '',
+          })),
+        );
+      }}
+    />
+  );
+}
+
+export const FormVersionLabelSelect: React.FC<CommonFieldProps & Props> =
+  withField(VersionLabelSelect);
+
+/**
+ * 检测标签是否被其他版本使用
+ * @param labels
+ */
+export const checkLabelDuplicate = async (
+  labels: LabelWithPromptVersion[] = [],
+  currentVersion?: string,
+) => {
+  const labelsWithPrompt = (labels || []).filter(item =>
+    currentVersion
+      ? item.promptVersion && item.promptVersion !== currentVersion
+      : item.promptVersion,
+  );
+  if (labelsWithPrompt.length) {
+    await new Promise((resolve, reject) => {
+      Modal.info({
+        title: '版本标识存在重复',
+        content: (
+          <div className="coz-fg-secondary">
+            所选标识
+            <Space spacing={4} className="mx-1">
+              {labelsWithPrompt.map(item => (
+                <Tag key={item.key} size="mini" color="grey">
+                  {item.key}
+                </Tag>
+              ))}
+            </Space>
+            已在当前 Prompt 其他版本生效。提交成功后，标识将仅在当前版本生效。
+          </div>
+        ),
+        okText: '确认',
+        cancelText: '取消',
+        onOk: resolve,
+        onCancel: reject,
+      });
+    });
+  }
+};
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-title.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-title.tsx
new file mode 100644
index 000000000..b0c087087
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/version-label/version-label-title.tsx
@@ -0,0 +1,30 @@
+import { IconCozInfoCircle } from '@coze-arch/coze-design/icons';
+import { Tooltip } from '@coze-arch/coze-design';
+
+export function VersionLabelTitle() {
+  return (
+    <div className="flex items-center">
+      <div>版本标识</div>
+      <Tooltip
+        theme="dark"
+        content={
+          <div>
+            标记版本特性，可通过标识在 SDK 拉取 Prompt 特定版本。查看
+            <a
+              style={{
+                color: '#AAA6FF',
+                textDecoration: 'none',
+              }}
+              href="https://loop.coze.cn/open/docs/cozeloop/prompt_version"
+              target="_blank"
+            >
+              用户手册
+            </a>
+          </div>
+        }
+      >
+        <IconCozInfoCircle className="coz-fg-secondary ml-1 cursor-pointer" />
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.module.less
index d7c70838a..ea828eaba 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* stylelint-disable declaration-no-important */
 .description{
   :global{
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.tsx
index 8926e7bc4..1ddd4a81a 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/version-list/index.tsx
@@ -1,21 +1,20 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 
-import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 import { useRequest } from 'ahooks';
 import { sendEvent, EVENT_NAMES } from '@cozeloop/tea-adapter';
 import { PromptCreate } from '@cozeloop/prompt-components';
-import { I18n } from '@cozeloop/i18n-adapter';
-import { getBaseUrl } from '@cozeloop/components';
-import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import { useNavigateModule, useSpace } from '@cozeloop/biz-hooks-adapter';
 import { useModalData } from '@cozeloop/base-hooks';
-import { type CommitInfo, type Prompt } from '@cozeloop/api-schema/prompt';
-import { promptManage } from '@cozeloop/api-schema';
+import {
+  type Label,
+  type CommitInfo,
+  type Prompt,
+} from '@cozeloop/api-schema/prompt';
+import { StonePromptApi } from '@cozeloop/api-schema';
 import { IconCozDuplicate, IconCozUpdate } from '@coze-arch/coze-design/icons';
 import {
   Button,
@@ -33,12 +32,18 @@ import { useVersionList } from '@/hooks/use-version-list';
 import { usePrompt } from '@/hooks/use-prompt';
 import { CALL_SLEEP_TIME } from '@/consts';
 
+import { VersionLabelModal } from '../version-label';
 import VersionItem from './version-item';
 
 export function VersionList() {
   const { spaceID } = useSpace();
-  const navigate = useNavigate();
-  const baseURL = getBaseUrl(spaceID);
+  const navigate = useNavigateModule();
+
+  const labelModal = useModalData<{
+    labels: Label[];
+    version: string;
+  }>();
+
   const { promptInfo } = usePromptStore(
     useShallow(state => ({ promptInfo: state.promptInfo })),
   );
@@ -69,6 +74,7 @@ export function VersionList() {
     versionListLoading,
     versionListReload,
     versionListLoadingMore,
+    versionListMutate,
   } = useVersionList({
     promptID: promptInfo?.id,
     draftVersion,
@@ -78,7 +84,7 @@ export function VersionList() {
 
   const { runAsync: rollbackRunAsync } = useRequest(
     () =>
-      promptManage.RevertDraftFromCommit({
+      StonePromptApi.RevertDraftFromCommit({
         prompt_id: promptInfo?.id,
         commit_version_reverting_from: activeVersion,
       }),
@@ -87,7 +93,7 @@ export function VersionList() {
       ready: Boolean(spaceID && promptInfo?.id && activeVersion),
       refreshDeps: [spaceID, promptInfo?.id, activeVersion],
       onSuccess: async () => {
-        Toast.success(I18n.t('rollback_success'));
+        Toast.success('回滚成功');
         setVersionChangeLoading(true);
         await sleep(CALL_SLEEP_TIME);
         getPromptByVersion()
@@ -122,6 +128,32 @@ export function VersionList() {
     setActiveVersion(version);
   };
 
+  const handleLabelChange = (version: string, labels: Label[]) => {
+    if (!versionListData) {
+      return;
+    }
+    const newLabelMap = {
+      ...versionListData.versionLabelMap,
+    };
+    if (!newLabelMap[version]) {
+      newLabelMap[version] = [];
+    }
+
+    const changeLabelSet = new Set(labels.map(item => item.key));
+
+    for (const [key, value] of Object.entries(newLabelMap)) {
+      if (key !== version) {
+        newLabelMap[key] = value.filter(item => !changeLabelSet.has(item.key));
+      } else {
+        newLabelMap[key] = labels;
+      }
+    }
+    versionListMutate({
+      ...versionListData,
+      versionLabelMap: newLabelMap,
+    });
+  };
+
   useEffect(() => {
     if (spaceID && promptInfo?.id) {
       promptInfo?.prompt_draft?.draft_info &&
@@ -173,7 +205,16 @@ export function VersionList() {
               key={item.version}
               active={activeVersion === item.version}
               version={item}
+              labels={
+                versionListData?.versionLabelMap?.[item.version || ''] || []
+              }
               onClick={() => handleVersionChange(item.version)}
+              onEditLabels={v => {
+                labelModal.open({
+                  labels: v,
+                  version: item.version || '',
+                });
+              }}
             />
           )}
           size="small"
@@ -199,7 +240,7 @@ export function VersionList() {
             icon={<IconCozDuplicate />}
             onClick={() => promptInfoModal.open(promptInfo)}
           >
-            {I18n.t('create_copy')}
+            创建副本
           </Button>
           <Button
             className="flex-1"
@@ -208,11 +249,11 @@ export function VersionList() {
             icon={<IconCozUpdate />}
             onClick={() =>
               Modal.confirm({
-                title: I18n.t('restore_to_this_version'),
-                content: I18n.t('restore_version_tip'),
+                title: '还原为此版本',
+                content: '还原后将覆盖最新编辑的提示词。确认还原为此版本？',
                 onOk: rollbackRunAsync,
-                cancelText: I18n.t('Cancel'),
-                okText: I18n.t('restore'),
+                cancelText: '取消',
+                okText: '还原',
                 okButtonProps: {
                   color: 'red',
                 },
@@ -220,7 +261,7 @@ export function VersionList() {
               })
             }
           >
-            {I18n.t('restore_to_this_version')}
+            还原为此版本
           </Button>
         </Space>
       ) : null}
@@ -230,10 +271,27 @@ export function VersionList() {
         data={promptInfoModal?.data}
         isCopy
         onOk={res => {
-          navigate(`${baseURL}/pe/prompts/${res.cloned_prompt_id}`);
+          navigate(`pe/prompts/${res.cloned_prompt_id}`);
           promptInfoModal.close();
         }}
       />
+      <VersionLabelModal
+        visible={labelModal.visible}
+        spaceID={spaceID}
+        promptID={promptInfo?.id || ''}
+        labels={labelModal.data?.labels || []}
+        version={labelModal.data?.version}
+        onCancel={() => {
+          labelModal.close();
+        }}
+        onConfirm={val => {
+          handleLabelChange(
+            labelModal.data?.version || '',
+            val.map(item => ({ key: item })),
+          );
+          labelModal.close();
+        }}
+      />
     </div>
   );
 }
diff --git a/frontend/packages/cozeloop/prompt-pages/src/components/version-list/version-item.tsx b/frontend/packages/cozeloop/prompt-pages/src/components/version-list/version-item.tsx
index 3ae648c3c..510025ee7 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/components/version-list/version-item.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/components/version-list/version-item.tsx
@@ -1,28 +1,37 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable complexity */
 import cs from 'classnames';
 import { formatTimestampToString } from '@cozeloop/toolkit';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { UserProfile } from '@cozeloop/components';
-import { type CommitInfo } from '@cozeloop/api-schema/prompt';
+import { type CommitInfo, type Label } from '@cozeloop/api-schema/prompt';
 import { type UserInfoDetail } from '@cozeloop/api-schema/foundation';
-import { Descriptions, Tag, Typography } from '@coze-arch/coze-design';
+import { IconCozEdit } from '@coze-arch/coze-design/icons';
+import {
+  Button,
+  Descriptions,
+  Space,
+  Tag,
+  Typography,
+} from '@coze-arch/coze-design';
 
 import styles from './index.module.less';
 
 export default function VersionItem({
   version,
   active,
+  labels,
   className,
   onClick,
+  onEditLabels,
 }: {
   version?: CommitInfo & { user?: UserInfoDetail };
   active?: boolean;
+  labels?: Label[];
   className?: string;
   onClick?: () => void;
+  onEditLabels?: (labels: Label[]) => void;
 }) {
   const isDraft = !version?.version;
+
   return (
     <div className={`group flex cursor-pointer ${className}`} onClick={onClick}>
       <div className="w-6 h-10 flex items-center shrink-0">
@@ -38,16 +47,16 @@ export default function VersionItem({
           className={cs(styles.description, className)}
         >
           <Tag color={isDraft ? 'primary' : 'green'} className="mb-2">
-            {isDraft ? I18n.t('current_draft') : I18n.t('submit')}
+            {isDraft ? '当前草稿' : '提交'}
           </Tag>
           {isDraft ? null : (
-            <Descriptions.Item itemKey={I18n.t('version')}>
+            <Descriptions.Item itemKey="版本">
               <span className="font-medium">{version.version ?? '-'}</span>
             </Descriptions.Item>
           )}
           {!version?.committed_at ? null : (
             <Descriptions.Item
-              itemKey={isDraft ? I18n.t('save_time') : I18n.t('submit_time')}
+              itemKey={isDraft ? '保存时间' : '提交时间'}
               className="!text-[13px]"
             >
               <span className="font-medium !text-[13px]">
@@ -61,10 +70,7 @@ export default function VersionItem({
             </Descriptions.Item>
           )}
           {isDraft && !version?.committed_by ? null : (
-            <Descriptions.Item
-              itemKey={I18n.t('submitter')}
-              className="!text-[13px]"
-            >
+            <Descriptions.Item itemKey="提交人" className="!text-[13px]">
               <UserProfile
                 avatarUrl={version?.user?.avatar_url}
                 name={version?.user?.nick_name}
@@ -72,18 +78,55 @@ export default function VersionItem({
             </Descriptions.Item>
           )}
           {isDraft ? null : (
-            <Descriptions.Item
-              itemKey={I18n.t('version_description')}
-              className="!text-[13px]"
-            >
-              <Typography.Text
-                ellipsis={{ rows: 2, showTooltip: true }}
-                className="!text-[13px]"
-              >
-                {version.description || '-'}
-              </Typography.Text>
+            <Descriptions.Item itemKey="版本说明" className="!text-[13px]">
+              <div className="max-w-[195px]">
+                <Typography.Text
+                  ellipsis={{
+                    showTooltip: {
+                      opts: {
+                        theme: 'dark',
+                      },
+                    },
+                  }}
+                  className="!text-[13px]"
+                >
+                  {version.description || '-'}
+                </Typography.Text>
+              </div>
             </Descriptions.Item>
           )}
+          {!isDraft ? (
+            <Descriptions.Item itemKey="版本标识" className="!text-[13px]">
+              <Space spacing={4} wrap>
+                {labels?.map(item => (
+                  <Tag key={item.key} color="grey" className="max-w-[80px]">
+                    <Typography.Text
+                      className="!coz-fg-primary !text-[12px]"
+                      ellipsis={{
+                        showTooltip: {
+                          opts: {
+                            theme: 'dark',
+                          },
+                        },
+                      }}
+                    >
+                      {item.key}
+                    </Typography.Text>
+                  </Tag>
+                ))}
+
+                <Button
+                  icon={<IconCozEdit />}
+                  size="mini"
+                  color="secondary"
+                  onClick={e => {
+                    e.stopPropagation();
+                    onEditLabels?.(labels || []);
+                  }}
+                ></Button>
+              </Space>
+            </Descriptions.Item>
+          ) : null}
         </Descriptions>
       </div>
     </div>
diff --git a/frontend/packages/cozeloop/prompt-pages/src/consts/index.ts b/frontend/packages/cozeloop/prompt-pages/src/consts/index.ts
index c020fe7e7..4b6142bc3 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/consts/index.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/consts/index.ts
@@ -1,7 +1,7 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 
+import { Role, VariableType } from '@cozeloop/api-schema/prompt';
+
 export const VARIABLE_MAX_LEN = 50;
 export const UPDATED_DRAFT_CODE = 600503308;
 export const CALL_SLEEP_TIME = 400;
@@ -14,3 +14,58 @@ export enum PromptStorageKey {
   PLAYGROUND_INFO = 'playground-info',
   PLAYGROUND_MOCKSET = 'playground-mockset',
 }
+
+export enum MessageType {
+  System = 1,
+  User = 2,
+  Assistant = 3,
+  Tool = 4,
+  Placeholder = 20,
+}
+
+export const MESSAGE_TYPE_MAP = {
+  [MessageType.System]: Role.System,
+  [MessageType.User]: Role.User,
+  [MessageType.Assistant]: Role.Assistant,
+  [MessageType.Tool]: Role.Tool,
+  [MessageType.Placeholder]: Role.Placeholder,
+};
+
+export enum MessageListRoundType {
+  Multi = 'multi',
+  Single = 'single',
+}
+
+export enum MessageListGroupType {
+  Single = 'single',
+  Multi = 'multi',
+}
+
+export const VARIABLE_TYPE_ARRAY_MAP = {
+  [VariableType.String]: 'String',
+  [VariableType.Integer]: 'Integer',
+  [VariableType.Float]: 'Float',
+  [VariableType.Boolean]: 'Boolean',
+  [VariableType.Object]: 'Object',
+  [VariableType.Array_String]: 'Array<String>',
+  [VariableType.Array_Integer]: 'Array<Integer>',
+  [VariableType.Array_Float]: 'Array<Float>',
+  [VariableType.Array_Boolean]: 'Array<Boolean>',
+  [VariableType.Array_Object]: 'Array<Object>',
+  [VariableType.Placeholder]: 'Placeholder',
+  [VariableType.MultiPart]: '多模态',
+};
+
+export const VARIABLE_TYPE_ARRAY_TAG = {
+  [VariableType.String]: '1',
+  [VariableType.Integer]: '2',
+  [VariableType.Float]: '4',
+  [VariableType.Boolean]: '3',
+  [VariableType.Object]: '6',
+  [VariableType.Array_String]: '99',
+  [VariableType.Array_Integer]: '100',
+  [VariableType.Array_Float]: '102',
+  [VariableType.Array_Boolean]: '101',
+  [VariableType.Array_Object]: '103',
+  [VariableType.Placeholder]: 'Placeholder',
+};
diff --git a/frontend/packages/cozeloop/prompt-pages/src/develop/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/develop/index.tsx
index 064f3a054..619f13302 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/develop/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/develop/index.tsx
@@ -1,9 +1,8 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
+import { GuardPoint, useGuard } from '@cozeloop/guard';
 import { useBreadcrumb } from '@cozeloop/base-hooks';
 
 import { usePromptStore } from '@/store/use-prompt-store';
@@ -13,6 +12,7 @@ import { usePrompt } from '@/hooks/use-prompt';
 import { PromptDev } from '@/components/prompt-dev';
 
 export function PromptDevelop() {
+  const globalDisabled = useGuard({ point: GuardPoint['pe.prompt.global'] });
   const { promptID } = useParams<{
     promptID: string;
   }>();
@@ -20,7 +20,7 @@ export function PromptDevelop() {
   const queryVersion = searchParams.get('version') || undefined;
   const [getPromptLoading, setGetPromptLoading] = useState(true);
 
-  const { getPromptByVersion } = usePrompt({ promptID, registerSub: true });
+  const { getPromptByVersion } = usePrompt({ promptID, regiesterSub: true });
   const { clearStore: clearPromptStore, promptInfo } = usePromptStore(
     useShallow(state => ({
       clearStore: state.clearStore,
@@ -28,13 +28,16 @@ export function PromptDevelop() {
     })),
   );
 
-  const { clearStore: clearBasicStore } = useBasicStore(
-    useShallow(state => ({ clearStore: state.clearStore })),
+  const { clearStore: clearBasicStore, setBasicReadonly } = useBasicStore(
+    useShallow(state => ({
+      clearStore: state.clearStore,
+      setBasicReadonly: state.setReadonly,
+    })),
   );
 
-  const { clearMockDataStore } = usePromptMockDataStore(
+  const { clearMockdataStore } = usePromptMockDataStore(
     useShallow(state => ({
-      clearMockDataStore: state.clearMockDataStore,
+      clearMockdataStore: state.clearMockdataStore,
     })),
   );
 
@@ -44,16 +47,21 @@ export function PromptDevelop() {
 
   useEffect(() => {
     if (promptID) {
-      getPromptByVersion(queryVersion, true).then(() => {
-        setGetPromptLoading(false);
-      });
+      getPromptByVersion(queryVersion, true, globalDisabled.data.readonly).then(
+        () => {
+          setGetPromptLoading(false);
+          setBasicReadonly(
+            globalDisabled.data.readonly || Boolean(queryVersion),
+          );
+        },
+      );
     }
     return () => {
       clearPromptStore();
       clearBasicStore();
-      clearMockDataStore();
+      clearMockdataStore();
     };
-  }, [promptID, queryVersion]);
+  }, [promptID, queryVersion, globalDisabled.data.readonly]);
 
   return <PromptDev getPromptLoading={getPromptLoading} />;
 }
diff --git a/frontend/packages/cozeloop/prompt-pages/src/hooks/playground-mock.ts b/frontend/packages/cozeloop/prompt-pages/src/hooks/playground-mock.ts
new file mode 100644
index 000000000..cdd924411
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/hooks/playground-mock.ts
@@ -0,0 +1,67 @@
+import { Role, ToolType, VariableType } from '@cozeloop/api-schema/prompt';
+
+import { type PromptState } from '@/store/use-prompt-store';
+import { type PromptMockDataState } from '@/store/use-mockdata-store';
+
+export const mockMockSet: PromptMockDataState = {
+  historicMessage: [],
+};
+
+export const mockInfo: PromptState = {
+  modelConfig: {},
+  tools: [
+    {
+      type: ToolType.Function,
+      function: {
+        name: 'get_weather',
+        description: 'Determine weather in my location',
+        parameters:
+          '{"type":"object","properties":{"location":{"type":"string","description":"The city and state e.g. San Francisco, CA"},"unit":{"type":"string","enum":["c","f"]}},"required":["location"]}',
+      },
+    },
+  ],
+  variables: [
+    {
+      key: 'departure',
+      type: VariableType.String,
+      desc: '',
+    },
+    {
+      desc: '',
+      type: VariableType.String,
+      key: 'destination',
+    },
+    {
+      desc: '',
+      type: VariableType.String,
+      key: 'people_num',
+    },
+    {
+      desc: '',
+      type: VariableType.String,
+      key: 'days_num',
+    },
+    {
+      type: VariableType.String,
+      key: 'travel_theme',
+
+      desc: '',
+    },
+  ],
+  promptInfo: {},
+  messageList: [
+    {
+      key: '1',
+      content:
+        '# 角色\n你是一个专业的旅游规划助手，能够根据用户的具体需求和偏好，迅速且精准地为用户生成全面、详细且个性化的旅游规划文档。\n\n## 技能：制定旅游规划方案\n为用户量身制定合理且舒适的行程安排和贴心的旅行指引。对于不同主题，需要能够体现对应主题的特色、需求或注意事项等。如亲子游，需要体现带小孩旅行途中要注意的内容，用户的预算和偏好等。 \n回复使用以下格式（内容可以合理使用 emoji 表情，让内容更生动）：\n\n## 输出格式\n#### 基本信息\n- 🛫 出发地：{{departure}}  <如未提供，则不展示此信息>\n- 🎯 目的地：{{destination}}\n- 🫂 人数：{{people_num}}人\n- 📅 天数：{{days_num}}天\n- 🎨 主题：{{travel_theme}} \n##### <目的地>简介\n<介目的地的基本信息，约100字>\n<描述天气状况、穿衣指南，约100字>\n<描述当地特色饮食、风俗习惯等，约100字>\n#### Checklist\n- 手机、充电器\n<需要携带的物品或准备事项，按需求生成>\n#### 行程安排\n<根据用户期望天数（{{days_num}}天）安排每日行程>\n##### 第一天、地点1 - 地点2 - ...\n###### 行程1：地点1\n<地点的景点简介，约100字>\n<地点的交通方式，提供合理的交通方式及使用时间信息>\n<地点的游玩方式，提供推荐游玩时长、游玩方式、注意事项、预定信息等，约100字>\n<如果 {{days_num}}超过1天，则继续按照第一天格式生成>\n#### 注意事项\n<根据以上日程安排信息，提供一些目的地旅行的注意事项>\n\n\n## 限制:\n- 所输出的内容必须按照给定的格式进行组织，不能偏离框架要求。',
+      role: Role.System,
+    },
+    {
+      key: '2',
+      content:
+        '## 用户需求\n- 出发地：{{departure}}  \n- 目的地：{{destination}}\n- 人数：{{people_num}}\n- 天数：{{days_num}}\n- 主题：{{travel_theme}} ',
+
+      role: Role.User,
+    },
+  ],
+};
diff --git a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-compare.ts b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-compare.ts
index 9b2a08f8e..dc9d9c884 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-compare.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-compare.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable security/detect-object-injection */
 /* eslint-disable complexity */
@@ -109,11 +107,11 @@ export const useCompare = (uid?: number) => {
     const compareItem = compareConfig?.groups?.[uid] || {};
     return {
       messageList: compareItem?.prompt_detail?.prompt_template?.messages?.map(
-        (it: Message & { key?: string }) => {
+        (it: Message & { key?: string }, index) => {
           if (!it?.key) {
             return {
               ...it,
-              key: nanoid(),
+              key: `${uid}-${index}`,
             };
           }
           return it;
diff --git a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-llm-stream-run.ts b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-llm-stream-run.ts
index 3289006c1..f85dadd69 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-llm-stream-run.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-llm-stream-run.ts
@@ -1,5 +1,4 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 /* eslint-disable complexity */
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable max-lines-per-function */
@@ -7,7 +6,6 @@ import { useCallback, useRef, useState } from 'react';
 
 import { cloneDeep } from 'lodash-es';
 import { type ParsedEvent } from 'eventsource-parser';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { type DebugToolCall } from '@cozeloop/api-schema/prompt';
 import { promptDebug } from '@cozeloop/api-schema';
 import { fetchStream } from '@coze-arch/fetch-stream';
@@ -44,6 +42,9 @@ export interface LLMStreamResponse {
   reasoningContent?: string;
 }
 
+const RISE_ERR_CODE = 601505011;
+const JINJA_ERR_CODES = [600501004, 600501005];
+
 export const useLLMStreamRun = (uid?: number) => {
   const {
     mockTools: draftMockTools,
@@ -157,7 +158,7 @@ export const useLLMStreamRun = (uid?: number) => {
       const startTime = new Date().getTime();
       debugIdRef.current = undefined;
 
-      return new Promise<LLMStreamResponse>(resolve => {
+      return new Promise<LLMStreamResponse>((resolve, reject) => {
         fetchStream<ParsedEvent>(
           promptDebug.DebugStreaming.meta.url.replace(
             ':prompt_id',
@@ -182,9 +183,11 @@ export const useLLMStreamRun = (uid?: number) => {
                   message.data,
                 ) as promptDebug.DebugStreamingResponse & {
                   msg?: string;
+                  message?: string;
                   biz_extra?: {
                     biz_err_custom_extra?: string;
                   };
+                  biz_status?: number;
                 };
 
                 if (!messageChunk?.delta) {
@@ -192,8 +195,45 @@ export const useLLMStreamRun = (uid?: number) => {
                     messageChunk?.biz_extra?.biz_err_custom_extra;
                   const extra = JSON.parse(bizExtra || '{}');
                   debugIdRef.current = extra?.debug_id;
+
+                  const riskContent = JSON.parse(extra?.risk_content || '{}');
+
+                  const onlyBackUp = (
+                    riskContent?.recommend_operations || []
+                  ).every(item => item === 'backup_response');
+
+                  if (
+                    RISE_ERR_CODE === messageChunk?.biz_status &&
+                    onlyBackUp
+                  ) {
+                    autoExecuteResultRef.current =
+                      '用户输入或者模型返回包含风险内容';
+                    setAutoExecuteResult(autoExecuteResultRef.current);
+                    resolve({
+                      message: autoExecuteResultRef.current,
+                      tools: [],
+                      debugTrace: undefined,
+                      costInfo: {
+                        characters: 0,
+                        outpotTokens: '0',
+                        duration: '0',
+                        inputTokens: '0',
+                        recordId: '',
+                      },
+                      debugId: debugIdRef.current,
+                      reasoningContent: undefined,
+                    });
+                    abort();
+                    return;
+                  }
+
                   throw new Error(
-                    messageChunk?.msg || I18n.t('model_run_error'),
+                    messageChunk?.msg ||
+                      messageChunk?.message ||
+                      '模型运行出错',
+                    {
+                      cause: messageChunk?.biz_status || '',
+                    },
                   );
                 }
                 const {
@@ -277,13 +317,26 @@ export const useLLMStreamRun = (uid?: number) => {
 
                 console.error(error);
 
-                const errMsg = error instanceof Error ? error.message : '';
-                Toast.error(errMsg || I18n.t('model_run_error'));
-                resolve({
-                  debugId: debugIdRef.current,
-                  message: autoExecuteResultRef.current,
-                  tools: streamTools.current,
-                });
+                if ((error as Error)?.cause === RISE_ERR_CODE) {
+                  Toast.error('用户输入或者模型返回包含风险内容');
+                  reject(error);
+                } else if (
+                  JINJA_ERR_CODES.includes(Number((error as Error)?.cause))
+                ) {
+                  Toast.error((error as Error)?.message);
+                  resolve({
+                    debugId: debugIdRef.current,
+                    message: autoExecuteResultRef.current,
+                    tools: streamTools.current,
+                  });
+                } else {
+                  Toast.error('模型运行错误');
+                  resolve({
+                    debugId: debugIdRef.current,
+                    message: autoExecuteResultRef.current,
+                    tools: streamTools.current,
+                  });
+                }
               }
             },
             onAllSuccess: () => {
@@ -310,9 +363,7 @@ export const useLLMStreamRun = (uid?: number) => {
             },
             onError: e => {
               abort();
-              Toast.error(
-                e?.fetchStreamError?.msg || I18n.t('model_run_error'),
-              );
+              Toast.error(e?.fetchStreamError?.msg || '模型运行错误');
               console.error(e?.fetchStreamError?.msg);
             },
           },
diff --git a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-playground.ts b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-playground.ts
index c136ffe4c..39d5b7da6 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-playground.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-playground.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable complexity */
@@ -8,23 +6,33 @@ import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { nanoid } from 'nanoid';
 import { debounce, isEqual } from 'lodash-es';
+import { GuardPoint, useGuard } from '@cozeloop/guard';
 import { useSpace } from '@cozeloop/biz-hooks-adapter';
-import { Role } from '@cozeloop/api-schema/prompt';
+import { type Message, Role, TemplateType } from '@cozeloop/api-schema/prompt';
 
 import { getPromptStorageInfo, setPromptStorageInfo } from '@/utils/prompt';
 import { type PromptState, usePromptStore } from '@/store/use-prompt-store';
 import {
+  type DebugMessage,
   type PromptMockDataState,
   usePromptMockDataStore,
 } from '@/store/use-mockdata-store';
 import { useBasicStore } from '@/store/use-basic-store';
-import { CALL_SLEEP_TIME, PromptStorageKey } from '@/consts';
+import {
+  CALL_SLEEP_TIME,
+  MESSAGE_TYPE_MAP,
+  MessageType,
+  PromptStorageKey,
+} from '@/consts';
+
+import { mockInfo, mockMockSet } from './playground-mock';
 
 type PlaygroundInfoStorage = Record<string, PromptState>;
 
 type PlaygroundMockSetStorage = Record<string, PromptMockDataState>;
 
 export const usePlayground = () => {
+  const globalDisabled = useGuard({ point: GuardPoint['pe.prompt.global'] });
   const { spaceID } = useSpace();
   const {
     setPromptInfo,
@@ -34,6 +42,7 @@ export const usePlayground = () => {
     setTools,
     setVariables,
     setCurrentModel,
+    setTemplateType,
     clearStore: clearPromptStore,
   } = usePromptStore(
     useShallow(state => ({
@@ -44,6 +53,7 @@ export const usePlayground = () => {
       setTools: state.setTools,
       setVariables: state.setVariables,
       setCurrentModel: state.setCurrentModel,
+      setTemplateType: state.setTemplateType,
       clearStore: state.clearStore,
     })),
   );
@@ -57,7 +67,7 @@ export const usePlayground = () => {
     setHistoricMessage,
     setMockVariables,
     setUserDebugConfig,
-    clearMockDataStore,
+    clearMockdataStore,
     setCompareConfig,
   } = usePromptMockDataStore(
     useShallow(state => ({
@@ -66,7 +76,7 @@ export const usePlayground = () => {
       setUserDebugConfig: state.setUserDebugConfig,
       compareConfig: state.compareConfig,
       setCompareConfig: state.setCompareConfig,
-      clearMockDataStore: state.clearMockDataStore,
+      clearMockdataStore: state.clearMockdataStore,
     })),
   );
 
@@ -77,16 +87,30 @@ export const usePlayground = () => {
     const storagePlaygroundInfo = getPromptStorageInfo<PlaygroundInfoStorage>(
       PromptStorageKey.PLAYGROUND_INFO,
     );
-    const info = storagePlaygroundInfo?.[spaceID];
+    const oldInfo = storagePlaygroundInfo?.[spaceID];
+
+    const info: PromptState | undefined = globalDisabled.data.readonly
+      ? mockInfo
+      : oldInfo;
 
     const storagePlaygroundMockSet =
       getPromptStorageInfo<PlaygroundMockSetStorage>(
         PromptStorageKey.PLAYGROUND_MOCKSET,
       );
-    const mock = storagePlaygroundMockSet?.[spaceID];
+    const oldMock = storagePlaygroundMockSet?.[spaceID];
+    const mock: PromptMockDataState | undefined = globalDisabled.data.readonly
+      ? mockMockSet
+      : oldMock;
 
     if (mock) {
-      setHistoricMessage(mock?.historicMessage || []);
+      setHistoricMessage(
+        mock?.historicMessage?.map(
+          (it: DebugMessage & { message_type?: MessageType }) => ({
+            ...it,
+            role: MESSAGE_TYPE_MAP[it?.message_type ?? MessageType.Assistant],
+          }),
+        ) || [],
+      );
       setMockVariables(mock?.mockVariables || []);
       setUserDebugConfig(mock?.userDebugConfig || {});
       setCompareConfig(mock?.compareConfig || {});
@@ -97,10 +121,19 @@ export const usePlayground = () => {
     setToolCallConfig(info?.toolCallConfig || {});
     setVariables(info?.variables || []);
     setMessageList(
-      info?.messageList || [{ role: Role.System, content: '', key: nanoid() }],
+      info?.messageList?.map(
+        (it: Message & { message_type?: MessageType }) => ({
+          ...it,
+          role: MESSAGE_TYPE_MAP[it?.message_type ?? MessageType.System],
+        }),
+      ) || [{ role: Role.System, content: '', key: nanoid() }],
     );
     setCurrentModel(info?.currentModel || {});
-    setPromptInfo(info?.promptInfo || { workspace_id: spaceID });
+    setTemplateType(info?.templateType || TemplateType.Normal);
+    setPromptInfo({
+      workspace_id: spaceID,
+      prompt_draft: { draft_info: {} },
+    });
 
     setInitPlaygroundLoading(false);
 
@@ -109,7 +142,7 @@ export const usePlayground = () => {
       setTimeout(() => {
         clearPromptStore();
         clearBasicStore();
-        clearMockDataStore();
+        clearMockdataStore();
       }, 0);
     };
   }, [spaceID]);
@@ -137,6 +170,7 @@ export const usePlayground = () => {
         [sID]: info,
       },
     );
+
     setAutoSaving(false);
   }, CALL_SLEEP_TIME);
 
@@ -150,11 +184,30 @@ export const usePlayground = () => {
         messageList: state.messageList,
         promptInfo: state.promptInfo,
         currentModel: state.currentModel,
+        templateType: state.templateType,
       }),
       val => {
         if (!initPlaygroundLoading) {
+          const time = `${new Date().getTime()}`;
+          setPromptInfo({
+            ...val.promptInfo,
+            prompt_draft: {
+              draft_info: { updated_at: time },
+            },
+          });
           setAutoSaving(true);
-          saveInfo(val, spaceID);
+          saveInfo(
+            {
+              ...val,
+              promptInfo: {
+                ...val.promptInfo,
+                prompt_draft: {
+                  draft_info: { updated_at: time },
+                },
+              },
+            },
+            spaceID,
+          );
         }
       },
       {
diff --git a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-prompt.ts b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-prompt.ts
index 9744f98cc..d6a593e95 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-prompt.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-prompt.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable complexity */
 /* eslint-disable max-lines-per-function */
@@ -11,10 +9,12 @@ import { useShallow } from 'zustand/react/shallow';
 import { nanoid } from 'nanoid';
 import { isEqual } from 'lodash-es';
 import { useRequest } from 'ahooks';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { useSpace } from '@cozeloop/biz-hooks-adapter';
-import { TemplateType } from '@cozeloop/api-schema/prompt';
-import { promptDebug, promptManage } from '@cozeloop/api-schema';
+import {
+  type GetPromptResponse,
+  TemplateType,
+} from '@cozeloop/api-schema/prompt';
+import { type ApiResponse, StonePromptApi } from '@cozeloop/api-schema';
 
 import { messageId } from '@/utils/prompt';
 import { type PromptState, usePromptStore } from '@/store/use-prompt-store';
@@ -27,13 +27,20 @@ import { useBasicStore } from '@/store/use-basic-store';
 
 interface UsePromptProps {
   promptID?: string;
-  registerSub?: boolean;
+  regiesterSub?: boolean;
 }
 
 export const usePrompt = ({
   promptID,
-  registerSub = false,
-}: UsePromptProps) => {
+  regiesterSub = false,
+}: UsePromptProps): {
+  getPromptLoading: boolean;
+  getPromptByVersion: (
+    version?: string | undefined,
+    withCommit?: boolean | undefined,
+    onlyGetData?: boolean | undefined,
+  ) => Promise<GetPromptResponse & ApiResponse>;
+} => {
   const { spaceID } = useSpace();
 
   const { setReadonly, setSaveLock } = useBasicStore(
@@ -50,6 +57,8 @@ export const usePrompt = ({
     setModelConfig,
     setToolCallConfig,
     setTools,
+    setTemplateType,
+    setVariables,
   } = usePromptStore(
     useShallow(state => ({
       promptInfo: state.promptInfo,
@@ -59,6 +68,7 @@ export const usePrompt = ({
       setToolCallConfig: state.setToolCallConfig,
       setTools: state.setTools,
       setVariables: state.setVariables,
+      setTemplateType: state.setTemplateType,
     })),
   );
   const { setAutoSaving } = useBasicStore(
@@ -82,7 +92,7 @@ export const usePrompt = ({
 
   const { runAsync: getMockData } = useRequest(
     () =>
-      promptDebug.GetDebugContext({
+      StonePromptApi.GetDebugContext({
         workspace_id: spaceID,
         prompt_id: promptID!,
       }),
@@ -96,44 +106,66 @@ export const usePrompt = ({
     useRequest(
       (version?: string, withCommit?: boolean, onlyGetData?: boolean) => {
         setSaveLock(true);
-        return promptManage
-          .GetPrompt({
-            prompt_id: promptID!,
-            with_draft: !version,
-            commit_version: version,
-            with_commit: withCommit,
-          })
-          .then(async res => {
-            if (onlyGetData) {
-              return res;
-            }
-            setPromptInfo(res.prompt);
-            const currentPromptDetail =
-              res.prompt?.prompt_draft || res.prompt?.prompt_commit;
+        return StonePromptApi.GetPrompt({
+          prompt_id: promptID!,
+          with_draft: !version,
+          with_default_config: !version,
+          commit_version: version,
+          with_commit: withCommit,
+          workspace_id: spaceID!,
+        }).then(async res => {
+          setPromptInfo(res.prompt);
+          const currentPromptDetail = res.prompt?.prompt_draft ||
+            res.prompt?.prompt_commit || { detail: res.default_config };
+
+          setTemplateType(
+            currentPromptDetail?.detail?.prompt_template?.template_type,
+          );
+
+          const messageList =
+            currentPromptDetail?.detail?.prompt_template?.messages || [];
+          setMessageList(messageList.map(item => ({ ...item, key: nanoid() })));
+
+          setModelConfig(currentPromptDetail?.detail?.model_config);
+          setToolCallConfig(currentPromptDetail?.detail?.tool_call_config);
+          setTools(currentPromptDetail?.detail?.tools);
 
-            const messageList =
-              currentPromptDetail?.detail?.prompt_template?.messages || [];
-            setMessageList(
-              messageList.map(item => ({ ...item, key: nanoid() })),
-            );
+          setReadonly(Boolean(version));
 
-            setModelConfig(currentPromptDetail?.detail?.model_config);
-            setToolCallConfig(currentPromptDetail?.detail?.tool_call_config);
-            setTools(currentPromptDetail?.detail?.tools);
-            setReadonly(Boolean(version));
+          if (res.prompt && !onlyGetData) {
+            const mockRes = await getMockData();
+            const historicMessage: DebugMessage[] = (
+              mockRes.debug_context?.debug_core?.mock_contexts || []
+            )?.map((it: DebugMessage) => {
+              const id = messageId();
+              return {
+                id,
+                ...it,
+              };
+            });
+            setHistoricMessage(historicMessage);
+
+            if (
+              currentPromptDetail?.detail?.prompt_template?.template_type ===
+              TemplateType.Jinja2
+            ) {
+              const variablesDefs =
+                currentPromptDetail?.detail?.prompt_template?.variable_defs ||
+                [];
+              setVariables(variablesDefs);
 
-            if (res.prompt) {
-              const mockRes = await getMockData();
-              const historicMessage: DebugMessage[] = (
-                mockRes.debug_context?.debug_core?.mock_contexts || []
-              )?.map((it: DebugMessage) => {
-                const id = messageId();
+              const mockVariables = (variablesDefs || []).map(it => {
+                const mock = (
+                  mockRes.debug_context?.debug_core?.mock_variables || []
+                ).find(v => v.key === it.key);
                 return {
-                  id,
                   ...it,
+                  ...mock,
                 };
               });
-              setHistoricMessage(historicMessage);
+
+              setMockVariables(mockVariables);
+            } else {
               setMockVariables(array =>
                 array.map(it => {
                   const mock = (
@@ -142,23 +174,27 @@ export const usePrompt = ({
                   return {
                     ...it,
                     value: mock?.value,
+                    multi_part_values: mock?.multi_part_values,
+                    placeholder_messages: mock?.placeholder_messages,
                   };
                 }),
               );
-              const mockTools =
-                mockRes.debug_context?.debug_core?.mock_tools || [];
-              setMockTools(mockTools);
-              const userDebugConfig = mockRes.debug_context?.debug_config || {};
-              setUserDebugConfig(userDebugConfig);
-              setCompareConfig(mockRes.debug_context?.compare_config);
             }
 
-            setTimeout(() => {
-              setSaveLock(false);
-            }, 500);
+            const mockTools =
+              mockRes.debug_context?.debug_core?.mock_tools || [];
+            setMockTools(mockTools);
+            const userDebugConfig = mockRes.debug_context?.debug_config || {};
+            setUserDebugConfig(userDebugConfig);
+            setCompareConfig(mockRes.debug_context?.compare_config);
+          }
+
+          setTimeout(() => {
+            setSaveLock(false);
+          }, 500);
 
-            return res;
-          });
+          return res;
+        });
       },
       {
         ready: Boolean(promptID && spaceID),
@@ -172,12 +208,12 @@ export const usePrompt = ({
 
   const { runAsync: runSavePrompt, loading: savePromptLoading } = useRequest(
     (params: PromptState & { mergeVersion?: string }) =>
-      promptManage.SaveDraft({
+      StonePromptApi.SaveDraft({
         prompt_id: promptID!,
         prompt_draft: {
           detail: {
             prompt_template: {
-              template_type: TemplateType.Normal,
+              template_type: params.templateType ?? TemplateType.Normal,
               messages: params.messageList || [],
               variable_defs: params.variables,
             },
@@ -215,7 +251,7 @@ export const usePrompt = ({
 
   const { run: runSaveMockInfo, loading: mockLoading } = useRequest(
     (params: PromptMockDataState) =>
-      promptDebug.SaveDebugContext({
+      StonePromptApi.SaveDebugContext({
         workspace_id: spaceID!,
         prompt_id: promptID!,
         debug_context: {
@@ -239,7 +275,7 @@ export const usePrompt = ({
   useEffect(() => {
     let dataSub: () => void;
     let mockSub: () => void;
-    if (registerSub && promptID) {
+    if (regiesterSub && promptID) {
       dataSub = usePromptStore.subscribe(
         state => ({
           toolCallConfig: state.toolCallConfig,
@@ -247,6 +283,7 @@ export const usePrompt = ({
           modelConfig: state.modelConfig,
           tools: state.tools,
           messageList: state.messageList,
+          templateType: state.templateType,
         }),
         val => {
           const { readonly, saveLock } = useBasicStore.getState();
@@ -256,7 +293,7 @@ export const usePrompt = ({
             runSavePrompt({ ...val, promptInfo: currentPromptInfo });
           }
           if (currentPromptInfo?.id && currentPromptInfo.id !== promptID) {
-            console.error(I18n.t('prompt_id_inconsistent'));
+            console.error('promptID 不一致');
           }
         },
         {
@@ -298,7 +335,7 @@ export const usePrompt = ({
       dataSub?.();
       mockSub?.();
     };
-  }, [registerSub, promptID]);
+  }, [regiesterSub, promptID]);
 
   useEffect(() => {
     setAutoSaving(savePromptLoading || mockLoading);
diff --git a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-label-list.ts b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-label-list.ts
new file mode 100644
index 000000000..e0db30c27
--- /dev/null
+++ b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-label-list.ts
@@ -0,0 +1,62 @@
+import { useInfiniteScroll } from 'ahooks';
+import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import { StonePromptApi } from '@cozeloop/api-schema';
+
+export interface VersionLabelOption {
+  value: string;
+  label: string;
+  promptVersion?: string;
+}
+export function useVersionLabelList({
+  filterKey,
+  promptID,
+}: {
+  promptID?: string;
+  filterKey?: string;
+}) {
+  const { spaceID } = useSpace();
+
+  return useInfiniteScroll<{
+    list: VersionLabelOption[];
+    cursorID: string;
+    hasMore: boolean;
+    versionMap: Record<string, string>;
+  }>(
+    async dataSource => {
+      if (!promptID || !spaceID || dataSource?.hasMore === false) {
+        return {
+          list: [],
+          cursorID: '',
+          hasMore: false,
+          versionMap: { ...dataSource?.versionMap },
+        };
+      }
+      const res = await StonePromptApi.ListLabel({
+        workspace_id: spaceID,
+        prompt_id: promptID,
+        with_prompt_version_mapping: true,
+        label_key_like: filterKey,
+        page_token: dataSource?.cursorID,
+        page_size: 100,
+      });
+      const list = (res.labels || []).map(item => ({
+        label: item.key || '',
+        value: item.key || '',
+        promptVersion: res.prompt_version_mapping?.[item.key || ''],
+      }));
+
+      return {
+        list,
+        cursorID: res.next_page_token || '',
+        hasMore: res.has_more || false,
+        versionMap: {
+          ...dataSource?.versionMap,
+          ...res.prompt_version_mapping,
+        },
+      };
+    },
+    {
+      reloadDeps: [filterKey],
+    },
+  );
+}
diff --git a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-list.ts b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-list.ts
index e01fb9ef2..ee7c89b70 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-list.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/hooks/use-version-list.ts
@@ -1,11 +1,12 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable complexity */
 import { useInfiniteScroll } from 'ahooks';
 import { useSpace } from '@cozeloop/biz-hooks-adapter';
-import { type CommitInfo } from '@cozeloop/api-schema/prompt';
+import {
+  type ListCommitResponse,
+  type CommitInfo,
+} from '@cozeloop/api-schema/prompt';
 import { type UserInfoDetail } from '@cozeloop/api-schema/foundation';
-import { promptManage } from '@cozeloop/api-schema';
+import { StonePromptApi } from '@cozeloop/api-schema';
 
 export const useVersionList = ({
   promptID,
@@ -15,58 +16,66 @@ export const useVersionList = ({
   draftVersion?: CommitInfo & { user?: UserInfoDetail };
 }) => {
   const { spaceID } = useSpace();
-  const { loading, data, loadMore, reload, loadingMore } = useInfiniteScroll<{
-    list: CommitInfo[];
-    cursorID: string;
-    hasMore: boolean;
-  }>(
-    async dataSource => {
-      if (!promptID || !spaceID) {
-        return {
-          list: draftVersion ? [draftVersion] : [],
-          cursorID: '',
-          hasMore: false,
-        };
-      }
-      const resp = await promptManage
-        .ListCommit({
+  const { loading, data, loadMore, reload, loadingMore, mutate } =
+    useInfiniteScroll<{
+      list: CommitInfo[];
+      cursorID: string;
+      hasMore: boolean;
+      versionLabelMap: ListCommitResponse['commit_version_label_mapping'];
+    }>(
+      async dataSource => {
+        if (!promptID || !spaceID) {
+          return {
+            list: draftVersion ? [draftVersion] : [],
+            cursorID: '',
+            hasMore: false,
+            versionLabelMap: { ...dataSource?.versionLabelMap },
+          };
+        }
+        const resp = await StonePromptApi.ListCommit({
           page_token: dataSource?.cursorID,
           page_size: 10,
           prompt_id: promptID || '',
-        })
-        .catch(() => undefined);
+        }).catch(() => undefined);
 
-      if (resp?.prompt_commit_infos?.length) {
-        const newList = resp?.prompt_commit_infos?.map(it => {
-          const user = resp.users?.find(u => u.user_id === it.committed_by);
-          return { ...it, user };
-        });
-        if (!dataSource?.cursorID) {
+        const versionLabelMap = {
+          ...dataSource?.versionLabelMap,
+          ...(resp?.commit_version_label_mapping || {}),
+        };
+        if (resp?.prompt_commit_infos?.length) {
+          const newList = resp?.prompt_commit_infos?.map(it => {
+            const user = resp.users?.find(u => u.user_id === it.committed_by);
+            return { ...it, user };
+          });
+          if (!dataSource?.cursorID) {
+            return {
+              list: draftVersion ? [draftVersion, ...newList] : newList,
+              cursorID: resp.next_page_token || '',
+              hasMore: resp.has_more || false,
+              versionLabelMap,
+            };
+          }
           return {
-            list: draftVersion ? [draftVersion, ...newList] : newList,
+            list: newList || [],
             cursorID: resp.next_page_token || '',
             hasMore: resp.has_more || false,
+            versionLabelMap,
+          };
+        } else {
+          return {
+            list: draftVersion ? [draftVersion] : [],
+            cursorID: '',
+            hasMore: false,
+            versionLabelMap,
           };
         }
-        return {
-          list: newList || [],
-          cursorID: resp.next_page_token || '',
-          hasMore: resp.has_more || false,
-        };
-      } else {
-        return {
-          list: draftVersion ? [draftVersion] : [],
-          cursorID: '',
-          hasMore: false,
-        };
-      }
-    },
-    {
-      manual: true,
-      reloadDeps: [spaceID, promptID, draftVersion?.version],
-      isNoMore: dataSource => !dataSource?.hasMore,
-    },
-  );
+      },
+      {
+        manual: true,
+        reloadDeps: [spaceID, promptID, draftVersion?.version],
+        isNoMore: dataSource => !dataSource?.hasMore,
+      },
+    );
 
   return {
     versionListLoading: loading,
@@ -74,5 +83,6 @@ export const useVersionList = ({
     versionListLoadMore: loadMore,
     versionListReload: reload,
     versionListLoadingMore: loadingMore,
+    versionListMutate: mutate,
   };
 };
diff --git a/frontend/packages/cozeloop/prompt-pages/src/index.ts b/frontend/packages/cozeloop/prompt-pages/src/index.ts
index 5c840a7f3..12e36179f 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/index.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/index.ts
@@ -1,3 +1 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 export { default } from './app';
diff --git a/frontend/packages/cozeloop/prompt-pages/src/list/column.tsx b/frontend/packages/cozeloop/prompt-pages/src/list/column.tsx
index e35c2f897..81df3a424 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/list/column.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/list/column.tsx
@@ -1,7 +1,4 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { formatTimestampToString } from '@cozeloop/toolkit';
-import { I18n } from '@cozeloop/i18n-adapter';
 import { TextWithCopy, UserProfile } from '@cozeloop/components';
 import { type Prompt } from '@cozeloop/api-schema/prompt';
 import { type UserInfoDetail } from '@cozeloop/api-schema/foundation';
@@ -9,7 +6,7 @@ import { type ColumnProps, Tag, Typography } from '@coze-arch/coze-design';
 
 export const columns: ColumnProps<Prompt & { user?: UserInfoDetail }>[] = [
   {
-    title: I18n.t('prompt_key'),
+    title: 'Prompt Key',
     dataIndex: 'prompt_key',
     width: 260,
     render: (key?: string, item?: Prompt) => (
@@ -17,14 +14,19 @@ export const columns: ColumnProps<Prompt & { user?: UserInfoDetail }>[] = [
         <TextWithCopy
           content={key}
           className="overflow-hidden !text-[13px]"
-          copyTooltipText={I18n.t('copy_prompt_key')}
+          copyTooltipText="复制 Prompt Key"
           textType="primary"
         />
+        {item?.prompt_draft?.draft_info?.is_modified ? (
+          <Tag size="small" color="yellow" className="flex-shrink-0">
+            修改未提交
+          </Tag>
+        ) : null}
       </div>
     ),
   },
   {
-    title: I18n.t('prompt_name'),
+    title: 'Prompt 名称',
     dataIndex: 'prompt_basic.display_name',
     width: 200,
     render: (text: string) => (
@@ -39,7 +41,7 @@ export const columns: ColumnProps<Prompt & { user?: UserInfoDetail }>[] = [
     ),
   },
   {
-    title: I18n.t('prompt_description'),
+    title: 'Prompt 描述',
     dataIndex: 'prompt_basic.description',
     width: 220,
     render: (text: string) => (
@@ -54,13 +56,13 @@ export const columns: ColumnProps<Prompt & { user?: UserInfoDetail }>[] = [
     ),
   },
   {
-    title: I18n.t('latest_version'),
+    title: '最新版本',
     dataIndex: 'prompt_basic.latest_version',
     width: 140,
     render: (text: string) => (text ? <Tag color="primary">{text}</Tag> : '-'),
   },
   {
-    title: I18n.t('recent_submission_time'),
+    title: '最近提交时间',
     dataIndex: 'prompt_basic.latest_committed_at',
     width: 200,
     render: (text: string) => (
@@ -75,7 +77,7 @@ export const columns: ColumnProps<Prompt & { user?: UserInfoDetail }>[] = [
     sorter: true,
   },
   {
-    title: I18n.t('creator'),
+    title: '创建人',
     dataIndex: 'user',
     width: 140,
     render: (user?: UserInfoDetail) => (
@@ -83,7 +85,7 @@ export const columns: ColumnProps<Prompt & { user?: UserInfoDetail }>[] = [
     ),
   },
   {
-    title: I18n.t('create_time'),
+    title: '创建时间',
     dataIndex: 'prompt_basic.created_at',
     width: 200,
     render: (text: string) => (
diff --git a/frontend/packages/cozeloop/prompt-pages/src/list/index.module.less b/frontend/packages/cozeloop/prompt-pages/src/list/index.module.less
index 36a388a34..43c3eaf25 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/list/index.module.less
+++ b/frontend/packages/cozeloop/prompt-pages/src/list/index.module.less
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 .prompt-form {
   @apply flex gap-2 items-center;
 
diff --git a/frontend/packages/cozeloop/prompt-pages/src/list/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/list/index.tsx
index bec66824f..4044508e1 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/list/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/list/index.tsx
@@ -1,21 +1,25 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable max-len */
 /* eslint-disable @coze-arch/max-line-per-function */
-import { useNavigate } from 'react-router-dom';
 import { useRef, useState } from 'react';
 
 import { useDebounce, usePagination } from 'ahooks';
 import { PromptCreate } from '@cozeloop/prompt-components';
+import { Guard, GuardPoint, useGuard, useGuards } from '@cozeloop/guard';
 import {
   DEFAULT_PAGE_SIZE,
   PrimaryPage,
   TableColActions,
   TableWithPagination,
 } from '@cozeloop/components';
-import { useSpace } from '@cozeloop/biz-hooks-adapter';
+import {
+  useBaseURL,
+  useNavigateModule,
+  useSpace,
+} from '@cozeloop/biz-hooks-adapter';
+import { UserSelect } from '@cozeloop/biz-components-adapter';
 import { useModalData } from '@cozeloop/base-hooks';
 import { type Prompt } from '@cozeloop/api-schema/prompt';
-import { promptManage } from '@cozeloop/api-schema';
+import { StonePromptApi, type promptManage } from '@cozeloop/api-schema';
 import {
   IconCozIllusAdd,
   IconCozIllusEmpty,
@@ -36,18 +40,24 @@ import { PromptDelete } from '@/components/prompt-delete';
 import { columns } from './column';
 
 import styles from './index.module.less';
-import { I18n } from '@cozeloop/i18n-adapter';
 
+const FormUserSelect = withField(UserSelect);
 const FormSearch = withField(Search);
+
 interface PromptSearchProps {
   key_word?: string;
   order_by?: promptManage.ListPromptOrderBy;
   asc?: boolean;
+  created_bys?: string[];
 }
 
 export function PromptList() {
-  const navigate = useNavigate();
+  const navigate = useNavigateModule();
   const { spaceID } = useSpace();
+  // const globalDisabled = useGuard({ point: GuardPoint['pe.prompt.global'] });
+  const creatorSearchGuard = useGuard({
+    point: GuardPoint['pe.prompts.search_by_creator'],
+  });
 
   const createModal = useModalData<Prompt>();
   const formApi = useRef<FormApi<PromptSearchProps>>();
@@ -56,25 +66,23 @@ export function PromptList() {
 
   const service = usePagination(
     ({ current, pageSize }) =>
-      promptManage
-        .ListPrompt({
-          workspace_id: spaceID,
-          page_num: current,
-          page_size: pageSize,
-          ...debouncedFilterRecord,
-        })
-        .then(res => {
-          const newList = res.prompts?.map(it => {
-            const user = res.users?.find(
-              u => u.user_id === it?.prompt_basic?.created_by,
-            );
-            return { ...it, user };
-          });
-          return {
-            list: newList || [],
-            total: Number(res.total || 0),
-          };
-        }),
+      StonePromptApi.ListPrompt({
+        workspace_id: spaceID,
+        page_num: current,
+        page_size: pageSize,
+        ...debouncedFilterRecord,
+      }).then(res => {
+        const newList = res.prompts?.map(it => {
+          const user = res.users?.find(
+            u => u.user_id === it?.prompt_basic?.created_by,
+          );
+          return { ...it, user };
+        });
+        return {
+          list: newList || [],
+          total: Number(res.total || 0),
+        };
+      }),
     {
       defaultPageSize: DEFAULT_PAGE_SIZE,
       refreshDeps: [debouncedFilterRecord, spaceID],
@@ -83,22 +91,36 @@ export function PromptList() {
 
   const deleteModal = useModalData<Prompt>();
 
+  const { baseURL } = useBaseURL();
+
+  const guard = useGuards({
+    points: [GuardPoint['pe.prompts.delete'], GuardPoint['pe.prompts.history']],
+  });
+
   const operateCol: ColumnProps<Prompt> = {
-    title: I18n.t('operation'),
+    title: '操作',
     key: 'action',
     dataIndex: 'action',
-    width: 110,
+    width: 160,
     align: 'left',
     fixed: 'right',
     render: (_: unknown, row: Prompt) => (
       <TableColActions
         actions={[
           {
-            label: I18n.t('detail'),
-            onClick: () => navigate(`${row.id}`),
+            label: '详情',
+            onClick: () => navigate(`pe/prompts/${row.id}`),
+          },
+          {
+            label: '调用记录',
+            disabled: guard.data['pe.prompts.history'].readonly,
+            onClick: () =>
+              window.open(
+                `${baseURL}/observation/traces?relation=and&selected_span_type=root_span&trace_filters=%257B%2522query_and_or%2522%253A%2522and%2522%252C%2522filter_fields%2522%253A%255B%257B%2522field_name%2522%253A%2522prompt_key%2522%252C%2522logic_field_name_type%2522%253A%2522prompt_key%2522%252C%2522query_type%2522%253A%2522in%2522%252C%2522values%2522%253A%255B%2522${row.prompt_key}%2522%255D%257D%255D%257D&trace_platform=prompt`,
+              ),
           },
           {
-            label: I18n.t('delete'),
+            label: '删除',
             onClick: () => {
               if (row?.id) {
                 deleteModal.open(row);
@@ -119,7 +141,7 @@ export function PromptList() {
 
   return (
     <PrimaryPage
-      pageTitle={I18n.t('prompt_development')}
+      pageTitle="Prompt 开发"
       filterSlot={
         <div className="flex align-center justify-between">
           <Form<PromptSearchProps>
@@ -129,15 +151,24 @@ export function PromptList() {
           >
             <FormSearch
               field="key_word"
-              placeholder={I18n.t('search_prompt_key_or_prompt_name')}
+              placeholder="搜索 Prompt Key 或 Prompt 名称"
               width={360}
               noLabel
             />
+            {!creatorSearchGuard.data.readonly && (
+              <FormUserSelect
+                field="created_bys"
+                placeholder="所有创建人"
+                noLabel
+              />
+            )}
           </Form>
 
-          <Button icon={<IconCozPlus />} onClick={() => createModal.open()}>
-            {I18n.t('create_prompt')}
-          </Button>
+          <Guard point={GuardPoint['pe.prompts.create']}>
+            <Button icon={<IconCozPlus />} onClick={() => createModal.open()}>
+              创建 Prompt
+            </Button>
+          </Guard>
         </div>
       }
     >
@@ -149,20 +180,20 @@ export function PromptList() {
           sticky: { top: 0 },
           onRow: row => ({
             onClick: () => {
-              navigate(`${row.id}`);
+              navigate(`pe/prompts/${row.id}`);
             },
           }),
           onChange: ({ sorter, extra }) => {
             if (extra?.changeType === 'sorter' && sorter) {
               const arr = [
                 'prompt_basic.created_at',
-                'prompt_basic.updated_at',
+                'prompt_basic.latest_committed_at',
               ];
               if (arr.includes(sorter.dataIndex) && sorter.sortOrder) {
                 const orderBy =
-                  sorter.dataIndex === 'create_tsms'
-                    ? promptManage.ListPromptOrderBy.CreatedAt
-                    : promptManage.ListPromptOrderBy.CommitedAt;
+                  sorter.dataIndex === 'prompt_basic.created_at'
+                    ? StonePromptApi.ListPromptOrderBy.CreatedAt
+                    : StonePromptApi.ListPromptOrderBy.CommitedAt;
                 formApi.current?.setValue('order_by', orderBy);
                 formApi.current?.setValue(
                   'asc',
@@ -180,17 +211,15 @@ export function PromptList() {
             <EmptyState
               size="full_screen"
               icon={<IconCozIllusEmpty />}
-              title={I18n.t('failed_to_find_related_results')}
-              description={I18n.t(
-                'try_other_keywords_or_modify_filter_options',
-              )}
+              title="未能找到相关结果"
+              description="请尝试其他关键词或修改筛选项"
             />
           ) : (
             <EmptyState
               size="full_screen"
               icon={<IconCozIllusAdd />}
-              title={I18n.t('no_prompt')}
-              description={I18n.t('click_to_create')}
+              title="暂无 Prompt"
+              description="点击右上角创建按钮进行创建"
             />
           )
         }
@@ -201,7 +230,7 @@ export function PromptList() {
         onOk={res => {
           createModal.close();
           service.refresh();
-          navigate(`${res.id}`);
+          navigate(`pe/prompts/${res.id}`);
         }}
       />
       <PromptDelete
diff --git a/frontend/packages/cozeloop/prompt-pages/src/playground/index.tsx b/frontend/packages/cozeloop/prompt-pages/src/playground/index.tsx
index 712451c74..8f52963db 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/playground/index.tsx
+++ b/frontend/packages/cozeloop/prompt-pages/src/playground/index.tsx
@@ -1,10 +1,28 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
+import { useEffect } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+import { GuardPoint, useGuard } from '@cozeloop/guard';
+
+import { useBasicStore } from '@/store/use-basic-store';
 import { usePlayground } from '@/hooks/use-playground';
 import { PromptDev } from '@/components/prompt-dev';
 
 export function Playground() {
+  const globalDisabled = useGuard({ point: GuardPoint['pe.prompt.global'] });
   const { initPlaygroundLoading } = usePlayground();
 
+  const { clearStore: clearBasicStore, setBasicReadonly } = useBasicStore(
+    useShallow(state => ({
+      clearStore: state.clearStore,
+      setBasicReadonly: state.setReadonly,
+    })),
+  );
+
+  useEffect(() => {
+    setBasicReadonly(globalDisabled.data.readonly);
+
+    return () => clearBasicStore();
+  }, [globalDisabled.data.readonly]);
+
   return <PromptDev getPromptLoading={initPlaygroundLoading} />;
 }
diff --git a/frontend/packages/cozeloop/prompt-pages/src/store/use-basic-store.ts b/frontend/packages/cozeloop/prompt-pages/src/store/use-basic-store.ts
index 0f41632f1..394444781 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/store/use-basic-store.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/store/use-basic-store.ts
@@ -1,10 +1,10 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { type Dispatch, type SetStateAction } from 'react';
 
 import { create } from 'zustand';
 import { nanoid } from 'nanoid';
 import { produce } from 'immer';
+
+import { MessageListGroupType, MessageListRoundType } from '@/consts';
 interface BasicState {
   readonly?: boolean;
   saveLock?: boolean;
@@ -15,6 +15,9 @@ interface BasicState {
   debugId?: Int64;
   executeHistoryVisible?: boolean;
   optimizeEditorKey: string;
+  roundType?: MessageListRoundType;
+  groupType?: MessageListGroupType;
+  executeDisabled?: boolean;
 }
 
 type PromptActionType<S> = Dispatch<SetStateAction<S>>;
@@ -27,6 +30,9 @@ interface BasicAction {
   setDebugId: PromptActionType<Int64 | undefined>;
   setExecuteHistoryVisible: PromptActionType<boolean | undefined>;
   setSaveLock: PromptActionType<boolean | undefined>;
+  setRoundType: PromptActionType<MessageListRoundType | undefined>;
+  setGroupType: PromptActionType<MessageListGroupType | undefined>;
+  setExecuteDisabled: PromptActionType<boolean | undefined>;
   clearStore: () => void;
 }
 
@@ -91,6 +97,29 @@ export const useBasicStore = create<BasicState & BasicAction>()((set, get) => ({
         state.saveLock = val instanceof Function ? val(get().saveLock) : val;
       }),
     ),
+  roundType: MessageListRoundType.Multi,
+  setRoundType: (val: SetStateAction<MessageListRoundType | undefined>) => {
+    set(
+      produce((state: BasicState) => {
+        state.roundType = val instanceof Function ? val(get().roundType) : val;
+      }),
+    );
+  },
+  groupType: MessageListGroupType.Single,
+  setGroupType: (val: SetStateAction<MessageListGroupType | undefined>) =>
+    set(
+      produce((state: BasicState) => {
+        state.groupType = val instanceof Function ? val(get().groupType) : val;
+      }),
+    ),
+  executeDisabled: false,
+  setExecuteDisabled: (val: SetStateAction<boolean | undefined>) =>
+    set(
+      produce((state: BasicState) => {
+        state.executeDisabled =
+          val instanceof Function ? val(get().executeDisabled) : val;
+      }),
+    ),
   clearStore: () =>
     set({
       debugId: undefined,
@@ -101,5 +130,8 @@ export const useBasicStore = create<BasicState & BasicAction>()((set, get) => ({
       executeHistoryVisible: false,
       saveLock: true,
       optimizeEditorKey: nanoid(),
+      roundType: MessageListRoundType.Multi,
+      groupType: MessageListGroupType.Single,
+      executeDisabled: false,
     }),
 }));
diff --git a/frontend/packages/cozeloop/prompt-pages/src/store/use-mockdata-store.ts b/frontend/packages/cozeloop/prompt-pages/src/store/use-mockdata-store.ts
index 613c98e2b..d6c99469e 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/store/use-mockdata-store.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/store/use-mockdata-store.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/max-line-per-function */
 /* eslint-disable max-lines-per-function */
 /* eslint-disable security/detect-object-injection */
@@ -116,7 +114,7 @@ interface PromptMockDataAction {
     index: number,
     model: SetStateAction<Model | undefined>,
   ) => void;
-  clearMockDataStore: () => void;
+  clearMockdataStore: () => void;
 }
 
 const normalUpdateFunc = (
@@ -435,7 +433,7 @@ export const usePromptMockDataStore = create<
           group.currentModel = newValue;
         }),
       ),
-    clearMockDataStore: () =>
+    clearMockdataStore: () =>
       set(
         produce((state: PromptMockDataState) => {
           state.historicMessage = [];
diff --git a/frontend/packages/cozeloop/prompt-pages/src/store/use-prompt-store.ts b/frontend/packages/cozeloop/prompt-pages/src/store/use-prompt-store.ts
index e5f27ca22..0ae84ee6a 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/store/use-prompt-store.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/store/use-prompt-store.ts
@@ -1,11 +1,10 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 import { type Dispatch, type SetStateAction } from 'react';
 
 import { subscribeWithSelector } from 'zustand/middleware';
 import { create } from 'zustand';
 import { produce } from 'immer';
 import {
+  TemplateType,
   type Prompt,
   type Message,
   type VariableDef,
@@ -28,6 +27,7 @@ export interface PromptState {
   modelConfig?: ModelConfig;
   tools?: Array<Tool>;
   currentModel?: Model;
+  templateType?: TemplateType;
 }
 
 export type PromptActionType<S> = Dispatch<SetStateAction<S>>;
@@ -42,6 +42,7 @@ interface PromptAction {
   setModelConfig: PromptActionType<ModelConfig | undefined>;
   setTools: PromptActionType<Array<Tool> | undefined>;
   setCurrentModel: PromptActionType<Model | undefined>;
+  setTemplateType: PromptActionType<TemplateType | undefined>;
   clearStore: () => void;
 }
 
@@ -65,17 +66,21 @@ export const usePromptStore = create<PromptState & PromptAction>()(
             val instanceof Function ? val(get().messageList) : val;
         }),
       );
-      const { messageList = [] } = get();
-      const { mockVariables = [], setMockVariables } =
-        usePromptMockDataStore.getState();
-      const variables = getInputVariablesFromPrompt(messageList);
-      const newMockVariables = getMockVariables(variables, mockVariables);
-      set(
-        produce(state => {
-          state.variables = variables;
-        }),
-      );
-      setMockVariables(newMockVariables);
+      const { messageList = [], templateType } = get();
+      const isNormal = templateType === TemplateType.Normal;
+
+      if (isNormal) {
+        const { mockVariables = [], setMockVariables } =
+          usePromptMockDataStore.getState();
+        const variables = getInputVariablesFromPrompt(messageList);
+        const newMockVariables = getMockVariables(variables, mockVariables);
+        set(
+          produce(state => {
+            state.variables = variables;
+          }),
+        );
+        setMockVariables(newMockVariables);
+      }
     },
     variables: [],
     setVariables: (val: SetStateAction<Array<VariableDef> | undefined>) =>
@@ -116,6 +121,14 @@ export const usePromptStore = create<PromptState & PromptAction>()(
             val instanceof Function ? val(get().currentModel) : val;
         }),
       ),
+    templateType: undefined,
+    setTemplateType: (val: SetStateAction<TemplateType | undefined>) =>
+      set(
+        produce((state: PromptState) => {
+          state.templateType =
+            val instanceof Function ? val(get().templateType) : val;
+        }),
+      ),
     clearStore: () =>
       set(
         produce((state: PromptState) => {
@@ -126,6 +139,7 @@ export const usePromptStore = create<PromptState & PromptAction>()(
           state.modelConfig = undefined;
           state.tools = [];
           state.currentModel = undefined;
+          state.templateType = undefined;
         }),
       ),
   })),
diff --git a/frontend/packages/cozeloop/prompt-pages/src/types.d.ts b/frontend/packages/cozeloop/prompt-pages/src/types.d.ts
index fb46ea466..205ffe309 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/types.d.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/types.d.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /// <reference types='@coze-arch/bot-typings' />
 
 interface Window {
diff --git a/frontend/packages/cozeloop/prompt-pages/src/utils/llm.ts b/frontend/packages/cozeloop/prompt-pages/src/utils/llm.ts
index fe59a7dae..bebf6dd0c 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/utils/llm.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/utils/llm.ts
@@ -1,5 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
 /* eslint-disable security/detect-object-injection */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @coze-arch/max-line-per-function */
@@ -12,9 +10,9 @@ import { isUndefined } from 'lodash-es';
 import { EVENT_NAMES, sendEvent } from '@cozeloop/tea-adapter';
 import {
   type DebugStreamingRequest,
+  type DebugToolCall,
   type Message,
   Role,
-  TemplateType,
   ToolChoiceType,
 } from '@cozeloop/api-schema/prompt';
 
@@ -36,6 +34,10 @@ export const createLLMRun = ({
   traceKey,
   notReport,
   singleRound,
+
+  toolCalls: originToolCalls,
+  setToolCalls: setOriginToolCalls,
+  setHistoricChat: setOriginHistoricChat,
 }: {
   startStream: (
     params: DebugStreamingRequest,
@@ -47,6 +49,10 @@ export const createLLMRun = ({
   traceKey?: string;
   notReport?: boolean;
   singleRound?: boolean;
+
+  toolCalls?: DebugToolCall[];
+  setToolCalls?: React.Dispatch<React.SetStateAction<DebugToolCall[]>>;
+  setHistoricChat?: React.Dispatch<React.SetStateAction<DebugMessage[]>>;
 }) => {
   const { readonly } = useBasicStore.getState();
   const {
@@ -57,6 +63,7 @@ export const createLLMRun = ({
     currentModel: draftCurrentModel,
     variables: draftVariables,
     tools: draftTools,
+    templateType,
   } = usePromptStore.getState();
 
   const {
@@ -65,8 +72,8 @@ export const createLLMRun = ({
     userDebugConfig,
     mockTools: draftMockTools,
     mockVariables: draftMockVariables,
-    toolCalls,
-    setToolCalls,
+    toolCalls: draftToolCalls,
+    setToolCalls: setDraftToolCalls,
     setHistoricMessageById,
   } = usePromptMockDataStore.getState();
   const compareItem = isUndefined(uid)
@@ -87,16 +94,21 @@ export const createLLMRun = ({
   const mockVariables =
     compareItem?.debug_core?.mock_variables || draftMockVariables;
 
+  const toolCalls = originToolCalls || draftToolCalls;
+  const setToolCalls = setOriginToolCalls || setDraftToolCalls;
+
   const functionCllAble = currentModel?.ability?.function_call;
 
   const mockTools = functionCllAble
     ? compareItem?.debug_core?.mock_tools || draftMockTools
     : undefined;
 
-  const setHistoricMessage = isUndefined(uid)
-    ? setDraftHistoricMessage
-    : (list: SetStateAction<DebugMessage[]>) =>
-        setHistoricMessageById(uid, list);
+  const setHistoricMessage =
+    setOriginHistoricChat ||
+    (isUndefined(uid)
+      ? setDraftHistoricMessage
+      : (list: SetStateAction<DebugMessage[]>) =>
+          setHistoricMessageById(uid, list));
 
   const stepDebugger = !compareConfig?.groups?.length
     ? userDebugConfig?.single_step_debug
@@ -124,9 +136,8 @@ export const createLLMRun = ({
           draft_info: promptInfo?.prompt_draft?.draft_info,
           detail: {
             prompt_template: {
-              ...(promptInfo?.prompt_draft?.detail?.prompt_template || {
-                template_type: TemplateType.Normal,
-              }),
+              ...promptInfo?.prompt_draft?.detail?.prompt_template,
+              template_type: templateType,
               messages: messageList,
               variable_defs: variables,
             },
@@ -144,7 +155,12 @@ export const createLLMRun = ({
     messages: newMessage
       ? [...newHistoriceMessages, newMessage]
       : newHistoriceMessages,
-    variable_vals: mockVariables,
+    variable_vals: mockVariables?.map(it => ({
+      key: it.key,
+      value: it.value ? it.value : undefined,
+      placeholder_messages: it.placeholder_messages,
+      multi_part_values: it.multi_part_values,
+    })),
     mock_tools: mockTools,
     single_step_debug: singleStepDebug,
     debug_trace_key: traceKey,
diff --git a/frontend/packages/cozeloop/prompt-pages/src/utils/prompt.ts b/frontend/packages/cozeloop/prompt-pages/src/utils/prompt.ts
index 306f4d494..a14b0b18b 100644
--- a/frontend/packages/cozeloop/prompt-pages/src/utils/prompt.ts
+++ b/frontend/packages/cozeloop/prompt-pages/src/utils/prompt.ts
@@ -1,6 +1,3 @@
-// Copyright (c) 2025 coze-dev Authors
-// SPDX-License-Identifier: Apache-2.0
-/* eslint-disable arrow-body-style */
 /* eslint-disable security/detect-object-injection */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { uniqueId } from 'lodash-es';
@@ -10,7 +7,6 @@ import {
   formatTimestampToString,
   safeParseJson,
 } from '@cozeloop/toolkit';
-import { I18n } from '@cozeloop/i18n-adapter';
 import {
   ContentType,
   type Message,
@@ -31,12 +27,12 @@ export const messageId = () => {
 
 export function versionValidate(val?: string, basedVersion?: string): string {
   if (!val) {
-    return I18n.t('prompt_version_number_needed');
+    return '需要提供 Prompt 版本号';
   }
   const pattern = /^(?:0|[1-9]\d{0,3})(?:\.(?:0|[1-9]\d{0,3})){2}$/;
   const isValid = pattern.test(val);
   if (!isValid) {
-    return I18n.t('incorrect_version_number');
+    return '版本号格式不正确';
   }
   const versionNos = val.split('.') || [];
   const basedNos = basedVersion?.split('.') || [0, 0, 0];
@@ -48,7 +44,7 @@ export function versionValidate(val?: string, basedVersion?: string): string {
       return '';
     }
     if (curV < baseV) {
-      return I18n.t('version_number_lt_error');
+      return '版本号不能小于当前版本';
     }
   }
   return '';
@@ -72,11 +68,66 @@ function flattenArray(arr: unknown[]) {
   return flattened;
 }
 
+export const getMultiModalVariableKeys = (
+  messageList: Message[],
+  existKeys: string[],
+) => {
+  const multiModalMessageArray = messageList.filter(it => it.parts?.length);
+  const multiModalVariableKeys = multiModalMessageArray
+    .map(it =>
+      it.parts?.filter(part => part.type === ContentType.MultiPartVariable),
+    )
+    .flat()
+    .map(it => it?.text);
+  const multiModalVariableKeysSet = new Set(multiModalVariableKeys);
+  const multiModalVariableKeysArray = Array.from(multiModalVariableKeysSet);
+  const multiModalVariableArray: VariableDef[] = multiModalVariableKeysArray
+    ?.filter(key => key && existKeys.every(k => k !== key))
+    ?.map(key => ({
+      key,
+      type: VariableType.MultiPart,
+    }));
+  return multiModalVariableArray;
+};
+
+export const getPlaceholderVariableKeys = (
+  messageList: Message[],
+  existKeys: string[],
+) => {
+  const placeholderArray = messageList.filter(
+    it => it.role === Role.Placeholder,
+  );
+
+  const placeholderKeys = placeholderArray.map(it => it?.content);
+  const placeholderKeysSet = new Set(placeholderKeys);
+  const placeholderKeysArray = Array.from(placeholderKeysSet);
+
+  const placeholderVariablesArray: VariableDef[] = placeholderKeysArray
+    ?.filter(key => key && existKeys.every(k => k !== key))
+    ?.map(key => ({
+      key,
+      type: VariableType.Placeholder,
+    }));
+  return placeholderVariablesArray;
+};
+
 export const getInputVariablesFromPrompt = (messageList: Message[]) => {
   const regex = new RegExp(`{{[a-zA-Z]\\w{0,${VARIABLE_MAX_LEN - 1}}}}`, 'gm');
   const messageContents = messageList
     .filter(it => it.role !== Role.Placeholder)
-    .map(it => it.content || '');
+    .map(item => {
+      if (item.parts?.length) {
+        return item.parts
+          .map(it => {
+            if (it.type === ContentType.MultiPartVariable) {
+              return `<multimodal-variable>${it?.text}</multimodal-variable>`;
+            }
+            return it.text;
+          })
+          .join('');
+      }
+      return item.content || '';
+    });
 
   const resultArr = messageContents.map(str =>
     str.match(regex)?.map(key => key.replace('{{', '').replace('}}', '')),
@@ -92,22 +143,23 @@ export const getInputVariablesFromPrompt = (messageList: Message[]) => {
     type: VariableType.String,
   }));
 
-  const placeholderArray = messageList.filter(
-    it => it.role === Role.Placeholder,
+  const multiModalVariableArray = getMultiModalVariableKeys(
+    messageList,
+    result,
   );
-  const placeholderKeys = placeholderArray.map(it => it?.content);
-  const placeholderKeysSet = new Set(placeholderKeys);
-  const placeholderKeysArray = Array.from(placeholderKeysSet);
 
-  const placeholderContentArray: VariableDef[] = placeholderKeysArray
-    ?.filter(key => key && result.every(k => k !== key))
-    ?.map(key => ({
-      key,
-      type: VariableType.Placeholder,
-    }));
+  if (multiModalVariableArray?.length) {
+    result.push(...multiModalVariableArray.map(it => it.key || ''));
+    array.push(...multiModalVariableArray);
+  }
 
-  return placeholderContentArray?.length
-    ? array.concat(placeholderContentArray)
+  const placeholderVariableArray = getPlaceholderVariableKeys(
+    messageList,
+    result,
+  );
+
+  return placeholderVariableArray?.length
+    ? array.concat(placeholderVariableArray)
     : array;
 };
 
@@ -115,11 +167,17 @@ export const getMockVariables = (
   variables: VariableDef[],
   mockVariables: VariableVal[],
 ) => {
+  const map = new Map();
+  variables.forEach((item, index) => {
+    map.set(item.key, index);
+  });
   return variables.map(item => {
     const mockVariable = mockVariables.find(it => it.key === item.key);
     return {
       ...item,
       value: mockVariable?.value,
+      multi_part_values: mockVariable?.multi_part_values,
+      placeholder_messages: mockVariable?.placeholder_messages,
     };
   });
 };
@@ -245,3 +303,32 @@ export function getPromptStorageInfo<T>(storageKey: PromptStorageKey) {
 export function setPromptStorageInfo<T>(storageKey: PromptStorageKey, info: T) {
   storage.setItem(storageKey, JSON.stringify(info));
 }
+
+/**
+ * 递增版本号
+ * @param version 当前版本号，格式为 a.b.c
+ * @returns 下一个版本号
+ */
+export function nextVersion(version?: string): string {
+  if (!version) {
+    return '0.0.1';
+  }
+  const parts = version.split('.').map(Number);
+  if (parts.length !== 3 || parts.some(n => isNaN(n) || n < 0 || n > 9999)) {
+    return '0.0.1';
+  }
+  let [a, b, c] = parts;
+  c += 1;
+  if (c > 9999) {
+    c = 0;
+    b += 1;
+    if (b > 9999) {
+      b = 0;
+      a += 1;
+      if (a > 9999) {
+        return '10000.0.0';
+      }
+    }
+  }
+  return [a, b, c].join('.');
+}

From fd37f9c4fd4eb4d8bafb0f4bad4dce434c107a91 Mon Sep 17 00:00:00 2001
From: qihai <qihai@bytedance.com>
Date: Fri, 5 Sep 2025 15:55:10 +0800
Subject: [PATCH 5/6] feat(toolkit): migration

---
 frontend/packages/cozeloop/toolkit/package.json  |  3 ++-
 frontend/packages/cozeloop/toolkit/src/json.ts   |  7 ++++++-
 .../cozeloop/toolkit/src/storage/config.ts       | 16 ++++++++++++----
 .../cozeloop/toolkit/src/storage/index.ts        | 14 ++++++++++++--
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/cozeloop/toolkit/package.json b/frontend/packages/cozeloop/toolkit/package.json
index 5a88c80ad..4d4399905 100644
--- a/frontend/packages/cozeloop/toolkit/package.json
+++ b/frontend/packages/cozeloop/toolkit/package.json
@@ -10,7 +10,8 @@
     "test": "NODE_OPTIONS='--max_old_space_size=2048' NODE_ENV=test vitest --run --passWithNoTests"
   },
   "dependencies": {
-    "dayjs": "^1.11.7"
+    "dayjs": "^1.11.7",
+    "json-bigint": "~1.0.0"
   },
   "devDependencies": {
     "@coze-arch/eslint-config": "workspace:*",
diff --git a/frontend/packages/cozeloop/toolkit/src/json.ts b/frontend/packages/cozeloop/toolkit/src/json.ts
index 803541d5d..3898fe0da 100644
--- a/frontend/packages/cozeloop/toolkit/src/json.ts
+++ b/frontend/packages/cozeloop/toolkit/src/json.ts
@@ -1,9 +1,14 @@
 // Copyright (c) 2025 coze-dev Authors
 // SPDX-License-Identifier: Apache-2.0
 /* eslint-disable @coze-arch/use-error-in-catch */
+import JSONBig from 'json-bigint';
+
+const jsonBigIntToString = JSONBig({ storeAsString: true });
 export const safeJsonParse = (value?: string | null) => {
   try {
-    return JSON.parse(value || '');
+    return value
+      ? JSON.parse(JSON.stringify(jsonBigIntToString.parse(value)))
+      : '';
   } catch (error) {
     return '';
   }
diff --git a/frontend/packages/cozeloop/toolkit/src/storage/config.ts b/frontend/packages/cozeloop/toolkit/src/storage/config.ts
index d2889b0da..e74531af1 100644
--- a/frontend/packages/cozeloop/toolkit/src/storage/config.ts
+++ b/frontend/packages/cozeloop/toolkit/src/storage/config.ts
@@ -17,12 +17,13 @@ export const LOCAL_STORAGE_KEYS = [
   'first-login-flag',
   'metrics-filter-preset-time-range',
   'trace-selected-columns-open',
+  'trace-filter-storage',
 ] as const;
 
 export type LocalStorageKeys = (typeof LOCAL_STORAGE_KEYS)[number];
 
 export type LocalStorageCacheConfigMap = {
-  [key in LocalStorageKeys]?: { bindAccount: boolean };
+  [key in LocalStorageKeys]?: { bindAccount: boolean; bindSpace?: boolean };
 };
 
 export const cacheConfig: LocalStorageCacheConfigMap = {
@@ -39,10 +40,12 @@ export const cacheConfig: LocalStorageCacheConfigMap = {
     bindAccount: true,
   },
   'metrics-filter': {
-    bindAccount: true,
+    bindSpace: true,
+    bindAccount: false,
   },
   'metrics-filter-type': {
-    bindAccount: true,
+    bindAccount: false,
+    bindSpace: true,
   },
   'evaluate-used-up-notify': {
     bindAccount: true,
@@ -51,6 +54,11 @@ export const cacheConfig: LocalStorageCacheConfigMap = {
     bindAccount: true,
   },
   'metrics-filter-preset-time-range': {
-    bindAccount: true,
+    bindAccount: false,
+    bindSpace: true,
+  },
+  'trace-filter-storage': {
+    bindAccount: false,
+    bindSpace: true,
   },
 };
diff --git a/frontend/packages/cozeloop/toolkit/src/storage/index.ts b/frontend/packages/cozeloop/toolkit/src/storage/index.ts
index 23e45c216..8b9fe4323 100644
--- a/frontend/packages/cozeloop/toolkit/src/storage/index.ts
+++ b/frontend/packages/cozeloop/toolkit/src/storage/index.ts
@@ -9,19 +9,29 @@ interface CozeLoopStorageConfig {
 export class CozeLoopStorage {
   private field: string;
   private static userID: string;
+  private static spaceID: string;
 
   static setUserID(id: string) {
     CozeLoopStorage.userID = id;
   }
+  static setSpaceID(id: string) {
+    CozeLoopStorage.spaceID = id;
+  }
   constructor(config: CozeLoopStorageConfig) {
     this.field = config.field;
   }
 
   private makeKey(key: LocalStorageKeys) {
+    let result = `[${this.field}]`;
+
     if (cacheConfig[key]?.bindAccount) {
-      return `[${this.field}]:[${CozeLoopStorage.userID}]:${key}`;
+      result += `:[${CozeLoopStorage.userID}]`;
     }
-    return `[${this.field}]:${key}`;
+    if (cacheConfig[key]?.bindSpace) {
+      result += `:[${CozeLoopStorage.spaceID}]`;
+    }
+
+    return `${result}:${key}`;
   }
   setItem(key: LocalStorageKeys, value: string) {
     localStorage.setItem(`${this.makeKey(key)}`, value);

From 5d2817f6ab651f2984d2781bb5187dba6eae60cd Mon Sep 17 00:00:00 2001
From: qihai <qihai@bytedance.com>
Date: Fri, 5 Sep 2025 16:05:15 +0800
Subject: [PATCH 6/6] feat(i18n): update types

---
 .../config/subspaces/default/pnpm-lock.yaml   | 1189 ++++++++++++++---
 .../packages/cozeloop/i18n/scripts/utils.ts   |   19 +-
 .../cozeloop/i18n/src/locale-types.ts         | 1136 +++++++++++++++-
 3 files changed, 2125 insertions(+), 219 deletions(-)

diff --git a/common/config/subspaces/default/pnpm-lock.yaml b/common/config/subspaces/default/pnpm-lock.yaml
index d41a30bda..3e61e68ee 100644
--- a/common/config/subspaces/default/pnpm-lock.yaml
+++ b/common/config/subspaces/default/pnpm-lock.yaml
@@ -1701,6 +1701,9 @@ importers:
       react-sortable-hoc:
         specifier: 2.0.0
         version: 2.0.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+      sortablejs:
+        specifier: ~1.15.2
+        version: 1.15.6
     devDependencies:
       '@coze-arch/bot-typings':
         specifier: workspace:*
@@ -2889,6 +2892,12 @@ importers:
       '@codemirror/language':
         specifier: ^6.10.1
         version: 6.11.1
+      '@codemirror/merge':
+        specifier: ^6.10.0
+        version: 6.10.2
+      '@codemirror/search':
+        specifier: ^6.5.5
+        version: 6.5.11
       '@codemirror/state':
         specifier: ^6.4.1
         version: 6.5.2
@@ -2905,8 +2914,11 @@ importers:
         specifier: workspace:*
         version: link:../../arch/fetch-stream
       '@coze-editor/editor':
-        specifier: 0.1.0-alpha.d92d50
-        version: 0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(typescript@5.8.2)(vue@3.5.16)
+        specifier: 0.1.0-alpha.dac011
+        version: 0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(typescript@5.8.2)(vue@3.5.16)
+      '@coze-editor/extension-regexp-decorator':
+        specifier: 0.1.0-alpha.0fd19e
+        version: 0.1.0-alpha.0fd19e(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
       '@cozeloop/api-schema':
         specifier: workspace:*
         version: link:../api-schema
@@ -2925,6 +2937,9 @@ importers:
       '@lezer/common':
         specifier: ^1.2.2
         version: 1.2.3
+      '@shikijs/langs':
+        specifier: ^3.9.2
+        version: 3.12.2
       '@shikijs/themes':
         specifier: ^3.2.2
         version: 3.6.0
@@ -2935,20 +2950,29 @@ importers:
         specifier: ^2.3.2
         version: 2.5.1
       codemirror-shiki:
-        specifier: ^0.2.2
-        version: 0.2.3(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(shiki@3.6.0)
+        specifier: ^0.3.0
+        version: 0.3.0(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(shiki@3.6.0)
+      crelt:
+        specifier: ^1.0.5
+        version: 1.0.6
       eventsource-parser:
         specifier: ^1.0.0
         version: 1.1.2
       immer:
         specifier: ^10.0.3
         version: 10.1.1
+      js-base64:
+        specifier: ^3.7.7
+        version: 3.7.8
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
       lucide-react:
         specifier: ^0.438.0
         version: 0.438.0(react@18.2.0)
+      mermaid:
+        specifier: ^11.4.1
+        version: 11.11.0
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
@@ -2964,6 +2988,9 @@ importers:
       sortablejs:
         specifier: ~1.15.2
         version: 1.15.6
+      svg-pan-zoom:
+        specifier: ^3.6.2
+        version: 3.6.2
       tippy.js:
         specifier: ^6.3.7
         version: 6.3.7
@@ -3040,9 +3067,9 @@ importers:
       '@cozeloop/components':
         specifier: workspace:*
         version: link:../components
-      '@cozeloop/i18n-adapter':
+      '@cozeloop/guard':
         specifier: workspace:*
-        version: link:../i18n
+        version: link:../guard
       '@cozeloop/observation-component-adapter':
         specifier: workspace:*
         version: link:../observation/trace-detail-open
@@ -3058,6 +3085,9 @@ importers:
       ahooks:
         specifier: 3.7.8
         version: 3.7.8(patch_hash=sa4ddrxdk2yhjzudeck6u5ww3i)(react@18.2.0)
+      ajv:
+        specifier: ~8.12.0
+        version: 8.12.0
       classnames:
         specifier: ^2.3.2
         version: 2.5.1
@@ -3557,6 +3587,9 @@ importers:
       dayjs:
         specifier: ^1.11.7
         version: 1.11.13
+      json-bigint:
+        specifier: ~1.0.0
+        version: 1.0.0
     devDependencies:
       '@coze-arch/eslint-config':
         specifier: workspace:*
@@ -3597,6 +3630,17 @@ packages:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
+  /@antfu/install-pkg@1.1.0:
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+    dependencies:
+      package-manager-detector: 1.3.0
+      tinyexec: 1.0.1
+    dev: false
+
+  /@antfu/utils@9.2.0:
+    resolution: {integrity: sha512-Oq1d9BGZakE/FyoEtcNeSwM7MpDO2vUBi11RWBZXf75zPsbUVWmUs03EqkRFrcgbXyKTas0BdZWC1wcuSoqSAw==}
+    dev: false
+
   /@asamuzakjp/css-color@3.2.0:
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
     dependencies:
@@ -5585,6 +5629,10 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
+  /@braintree/sanitize-url@7.1.1:
+    resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==}
+    dev: false
+
   /@bufbuild/protobuf@2.5.2:
     resolution: {integrity: sha512-foZ7qr0IsUBjzWIq+SuBLfdQCpJ1j8cTuNNT4owngTHoN5KsJb8L9t65fzz7SCeSWzescoOil/0ldqiL041ABg==}
     dev: true
@@ -5655,6 +5703,33 @@ packages:
       - utf-8-validate
     dev: false
 
+  /@chevrotain/cst-dts-gen@11.0.3:
+    resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==}
+    dependencies:
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+    dev: false
+
+  /@chevrotain/gast@11.0.3:
+    resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==}
+    dependencies:
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+    dev: false
+
+  /@chevrotain/regexp-to-ast@11.0.3:
+    resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==}
+    dev: false
+
+  /@chevrotain/types@11.0.3:
+    resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==}
+    dev: false
+
+  /@chevrotain/utils@11.0.3:
+    resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
+    dev: false
+
   /@codemirror/autocomplete@6.18.6:
     resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
     dependencies:
@@ -5807,45 +5882,44 @@ packages:
     resolution: {integrity: sha512-64YfAtHYVpssHXA4YOVu40CVUpZ+1JqESGA+esVI0lvFoNfdxF8WY5GkuIz5Xlj/73IKfgwIrxUHxM4EosAfMA==}
     dev: true
 
-  /@coze-editor/code-language-json@0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50):
-    resolution: {integrity: sha512-uOY6VT2elbSZ6/pWI5jT0lH3nmZF5M+rVXmI7wkzcEzoWbUCbvoMJG5v7/77cAwGABWY/zzYEarmSvgGBnd8nw==}
+  /@coze-editor/code-language-json@0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011):
+    resolution: {integrity: sha512-mr4SDvE13CaN4+O6c2vVA12hPPUu+lbvziYnJQHCMN0GMNtRhwRiMnTDe1MiEPdTBEwjivvDDwNAjD6BQ3nwkg==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011
     dependencies:
       '@codemirror/autocomplete': 6.18.6
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extension-lint': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/lezer-parser-json': 0.1.0-alpha.d92d50
-      '@coze-editor/parser-json': 0.1.0-alpha.d92d50
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-lint': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/lezer-parser-json': 0.1.0-alpha.dac011
+      '@coze-editor/parser-json': 0.1.0-alpha.dac011
       '@lezer/json': 1.0.3
       '@lukeed/uuid': 2.0.1
-      fuse.js: 7.1.0
       text-mapping: 1.0.1
       vscode-json-languageservice: 5.6.0
       vscode-uri: 3.1.0
     dev: false
 
-  /@coze-editor/code-language-python@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50):
-    resolution: {integrity: sha512-km9PpaRmwoMKVVi5oSR3mlNC57TXH0re72qlzpaNfJGd+NjNko4IInWsy/Gs5YTD2P1wQIDERH0Ms96PJ2uw6w==}
+  /@coze-editor/code-language-python@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011):
+    resolution: {integrity: sha512-zLyZaaPF7hUQ1t7jIM3u4zSp2Lxyth7cAHbKiCK/e8Qk13/ZyspqnQtDPqNZiXPhe6E3kRf+mAae+SbjuGtZFw==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011
     dependencies:
       '@codemirror/lang-python': 6.2.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
     dev: false
 
-  /@coze-editor/code-language-shared@0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-Dd8oMC3PtoeeeeVGto5pEUKwtYwQbw7hFIjj3bk5E9xRZ4buV4/PZ70n4ErPMGttrQGhFon6P+oqPm9T5rBxmQ==}
+  /@coze-editor/code-language-shared@0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-Poj28dXDZU7NCnw8QryoCo0Xr8GD/Lb1xmF8uWBRtiIdpR85iROwSGpmyB5nnIDcWC4fK5l54bE/2T9S+DSK5Q==}
     peerDependencies:
       '@codemirror/autocomplete': ^6.18.0
       '@codemirror/language': ^6.0.0
@@ -5856,8 +5930,8 @@ packages:
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/extension-lint': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-lint': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       mitt: 3.0.1
       vscode-languageserver-textdocument: 1.0.12
       vscode-languageserver-types: 3.17.5
@@ -5865,36 +5939,35 @@ packages:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/code-language-shell@0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50):
-    resolution: {integrity: sha512-Rfzv4OR6E5Mj2NnaHTmgSwtgz8u8AqqkY68wWLVpc9mRk1sl4SW9e4hGYg73w7ibygdODmPBHxDruF6kphxZTQ==}
+  /@coze-editor/code-language-shell@0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011):
+    resolution: {integrity: sha512-xEDtQ9lAzIFtW9SSalzOUowambOpYSf+Skm+xg45CiWgAEKgzt9lZohAgWJqaOx7iH7oHkFkcRLCu3M3lSzdQg==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011
     dependencies:
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
     dev: false
 
-  /@coze-editor/code-language-typescript@0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50)(typescript@5.8.2):
-    resolution: {integrity: sha512-CkIiCwRMzOza6ok3Dv7KbS0En9a0Pbm3X8dfq9GQjO0pJiDEJ+bclbpUjeo70zSDTuPw8N/s2d+som6ZO1AHaw==}
+  /@coze-editor/code-language-typescript@0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011)(typescript@5.8.2):
+    resolution: {integrity: sha512-PbzIGMekF/Nz4spBZo4Bqzd2h+36EzKEPhNjQX6YMwDs+BdG5JHiR8MfuwtOKA8LmFFbZCPr6y/gD/1SvkISZw==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011
       typescript: 5.8.2
     dependencies:
       '@codemirror/lang-javascript': 6.2.4
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       '@lukeed/uuid': 2.0.1
-      '@nozbe/microfuzz': 1.0.0
       '@typescript/vfs': 1.6.1(typescript@5.8.2)
       comlink: 4.4.2
       lz-string: 1.5.0
@@ -5907,8 +5980,8 @@ packages:
       - supports-color
     dev: false
 
-  /@coze-editor/core-plugins@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-otBOwlH7lZKv7gisW/qQ25MgcRw0zgH0C8lG/EBcqAQVaPQEwAbV7fPU7ClL4fhGyZzoYgZ6Em8tRaVtSmPFUg==}
+  /@coze-editor/core-plugins@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-JAU62Pnmn8QJbfB3DD7FG34Jfk5zTNQK7sFx3biKYQAdWrSbL4Gf1yMi2Bp6c1zDNGlPcA9UjBkNIo9uyl+Vgg==}
     peerDependencies:
       '@codemirror/commands': ^6.3.3
       '@codemirror/state': ^6.4.1
@@ -5917,15 +5990,15 @@ packages:
       '@codemirror/commands': 6.8.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/extension-placeholder': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extension-placeholder': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       es-toolkit: 1.39.3
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/core@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-F7GkXRWQSS5z9wTCW2ezG0fLqJjsCt0b7Op9gCKF6tXpGQ93FjFDEQN+yYCfqYQZJTqVraXOdv0T9rQFUHcjvg==}
+  /@coze-editor/core@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-FM/3do6NIwHnqP8oCJMNSCQvs8WEIJ51SMNJ6h6d9dB9z/DKLVOxRHKRyH8x0ZJ4M6zZnpkPkR5zZGOwHuHT3w==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -5935,8 +6008,8 @@ packages:
       mitt: 3.0.1
     dev: false
 
-  /@coze-editor/editor@0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(typescript@5.8.2)(vue@3.5.16):
-    resolution: {integrity: sha512-NyYiHR6WnA/GPzOgNV6Wa8N3pP09kvjsliwmPlLtnEKQ3Q671VEdw1WgO13IJLi/noeHxeUs1ElOk4CHGjhZNQ==}
+  /@coze-editor/editor@0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)(typescript@5.8.2)(vue@3.5.16):
+    resolution: {integrity: sha512-pqGHjoRV/9SLjfdGgSBFbUG660i/ozIxIFe5/UMusyTwuF8tSRrVezFxsJLxXnK/V2qAr+wLYWJd3POlTXhZgQ==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -5946,32 +6019,32 @@ packages:
       '@codemirror/commands': 6.8.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/code-language-json': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50)
-      '@coze-editor/code-language-python': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50)
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/code-language-shell': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50)
-      '@coze-editor/code-language-typescript': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50)(typescript@5.8.2)
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/extension-json-ast': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extension-json-empty-string-value-completion': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extension-json-hover': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extension-json-unnecessary-properties': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extension-regexp-decorator': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/preset-code': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50)(@lezer/common@1.2.3)
-      '@coze-editor/preset-expression': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/preset-none': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/preset-prompt': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/preset-universal': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/preset-variable': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/react': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
-      '@coze-editor/react-components': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.d92d50)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
-      '@coze-editor/react-hooks': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.d92d50)(react-dom@18.2.0)(react@18.2.0)
-      '@coze-editor/react-merge': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.d92d50)(react-dom@18.2.0)(react@18.2.0)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/vscode': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/vue': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(vue@3.5.16)
-      '@coze-editor/vue-components': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/vue@0.1.0-alpha.d92d50)(@lezer/common@1.2.3)(vue@3.5.16)
+      '@coze-editor/code-language-json': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011)
+      '@coze-editor/code-language-python': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011)
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/code-language-shell': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011)
+      '@coze-editor/code-language-typescript': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011)(typescript@5.8.2)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extension-json-ast': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-json-empty-string-value-completion': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-json-hover': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-json-unnecessary-properties': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-regexp-decorator': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/preset-code': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011)(@lezer/common@1.2.3)
+      '@coze-editor/preset-expression': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/preset-none': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/preset-prompt': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/preset-universal': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/preset-variable': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/react': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/react-components': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.dac011)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/react-hooks': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.dac011)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/react-merge': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.dac011)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/vscode': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/vue': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(vue@3.5.16)
+      '@coze-editor/vue-components': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/vue@0.1.0-alpha.dac011)(@lezer/common@1.2.3)(vue@3.5.16)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -5984,8 +6057,8 @@ packages:
       - vue
     dev: false
 
-  /@coze-editor/extension-completion-icons@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-ReBPlloY2N5FZ3n/95QAnKi5ZKm7gwAGh0Ms2R8Rs2KL05VPbH68N9WOFZKVDULVbYXWSooW7ZXkHE2qbbivjA==}
+  /@coze-editor/extension-completion-icons@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-0aBvTxXev/SykY+MNXJM9fTxfkuLYdJvKX0CrA50l5Vt+6YpSkayoCH0PlbY0wXm13LAKfeET4q98ktBo16IRg==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -5994,65 +6067,65 @@ packages:
       '@codemirror/view': 6.37.2
     dev: false
 
-  /@coze-editor/extension-json-ast@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-sKqACYB+Hi35do7Isz+1JegAPf0lHZjspVJpDPSgyRNEnh99VUtnxkPNr7ThbODL66rxTz+NAWFJAbJVdcUXtw==}
+  /@coze-editor/extension-json-ast@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-P3nD6EgQmBeT1fL3/FOoVN1P/GhXDg33IzbCjFDtGLV7IWpnMUW/b8/FDoHz3Fvz57a6qoRL2IuyW9G2qDoORQ==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/parser-json': 0.1.0-alpha.d92d50
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/parser-json': 0.1.0-alpha.dac011
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       vscode-languageserver-textdocument: 1.0.12
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/extension-json-empty-string-value-completion@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-CjhGquZ0C6dcpRfvlpKyagjM03MpW+ApBsjdo4xNOlPzu+BOD9UtcR7DDyFAGSXmyroulgyiFp91vQTuGO1TnA==}
+  /@coze-editor/extension-json-empty-string-value-completion@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-CUPTBJH51MrAuo6rbx3rsQNPz+nhuXGVo9AWzcXpxTM+HCQL+QKMZvQ2m1dzC2HdcpLRwX6K5y5A4IqFqd9voA==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/extension-json-ast': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-json-ast': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/extension-json-hover@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-bEByKK8UuqRkPtXUU3VC2c9+Qvyg91Ni9x0wqvyzaYZxVBAKbAoc8B854W5DIOxCD9xrwi0Yonng3TawHaJKAw==}
+  /@coze-editor/extension-json-hover@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-xx5X056diXoTUtPDQF65Jc5IV9NTxHUrd/BYrMY9g9+IV5HM87R9ucGugrFk2zJCVdWzD2urFx7XLzJm+T3OMQ==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/extension-json-ast': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-json-ast': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/extension-json-unnecessary-properties@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-F+a1pa1m0vC0j0rG3p5fTFTgSP/sx23jTxO0SS2fnCu0RYO7VFC1BzFt1nueq6FKFerFI2fabCfxWidbflz8YQ==}
+  /@coze-editor/extension-json-unnecessary-properties@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-c+/PKUxPo6L2JYZHkUHnFLjDdx9/Ez4I5KQ0JacmAzJFQdCBa4oM0za8GwGuxVENHsAyiKbLCugmE8+bPg6XUQ==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/extension-json-ast': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-json-ast': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/extension-links@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-so13JBoFa7kN+mnq23VM2lQHr3GLyS27dx4VGVtzaPfKg2jpFnOlf6+zbAWmbdwU+nOkhLEdWfSGcQw30qA3KQ==}
+  /@coze-editor/extension-links@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-asGLbJKEoocEKJJOlbBUDnYIfVeDaXSSO9KybjO+9a5LjHs9Z3lKHLd3Qzd1cf+N/Y3OMdlYA7UJNkm4+5mkHw==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6061,8 +6134,8 @@ packages:
       '@codemirror/view': 6.37.2
     dev: false
 
-  /@coze-editor/extension-lint@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-aI9GvXS7xwPjMQxiR27+Ah94l9+ghrYGkytZ8iYhK5iie4F7J/ot0ZcJ4tbgcS2q3BgNRO9eBpYjlLyNLmSVkg==}
+  /@coze-editor/extension-lint@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-oWcVX60E7Od4dR80vsgvL6HH8FYKSBnhBxHr2Ro4bYuL4rwWagkcgTm1ordRSVx9PG4N4JZa34nxwW3WOOYYIg==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6072,21 +6145,21 @@ packages:
       crelt: 1.0.6
     dev: false
 
-  /@coze-editor/extension-placeholder@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-9gaALOhBd42N5f29nUsf6WfqDj+9De8quwHR5BqZov76xnF8oac90ozxCqQpY7Grif7SUGoC28UfDXjC1BJ19A==}
+  /@coze-editor/extension-placeholder@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-X2FoquVMEV42Q3NB3if1Pgr9nU8ZpvcwP4LYYQsc7oGjLunrjYnYnPYZyqM1h4sywX3WIrWXhNwyxy4QVwsy9g==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/extension-regexp-decorator@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-jDY/zqsq/Fsd4azFrIQsTHIqChHmgz5VyUhM7esMdLfuaHIS1PA6SlM1O4ebNJ+dfN4mmDSsrqWEQVo7Ot3hGQ==}
+  /@coze-editor/extension-regexp-decorator@0.1.0-alpha.0fd19e(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-kjFimIUQIv25YiAdtWjl+0vhWuwAxweW5qch/KF3RF2OnHUEyHc7ofRPRmM3aRRFTLnerOmwI6D35pLLjGHgmA==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6095,8 +6168,18 @@ packages:
       '@codemirror/view': 6.37.2
     dev: false
 
-  /@coze-editor/extension-scrollbar@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-qglWne94Ymh08p7SFZcGik6/08D9ffiZiWE7v2EXPwhtHYaTATU9lRuI5rTVfAaBUZP5lRx62P5w/yIWnQ3/zw==}
+  /@coze-editor/extension-regexp-decorator@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-sP8IZa7W5fxhrWYpI/uZscwGTOOWR/UA2Yins4zoxa3v2YAbYS6QPS+FAxwOfFupRugv9H38aye4AWuSObZC2w==}
+    peerDependencies:
+      '@codemirror/state': ^6.4.1
+      '@codemirror/view': ^6.26.1
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+    dev: false
+
+  /@coze-editor/extension-scrollbar@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-JlRhFpJPaIxolequhaF+VGrQUUbBKCCT0OkzzmG/Sdn3SVIUwduw9YnV09KAAKlx6kmmYaAzRVMGX8EH5hey0A==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6106,8 +6189,8 @@ packages:
       overlayscrollbars: 2.11.4
     dev: false
 
-  /@coze-editor/extensions@0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-BhWXPl6kcUy915P5hhEhV5mmpRfCGRYqxuCBm/KksOJX2GI5OvJVrAVkDth65E7hTQ+BCbkZ7pSZsVICplvOSA==}
+  /@coze-editor/extensions@0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-arOe7CO5zPtZtyeS/853MqmIg5RNSLUUiO+YWFPrsKT+WBeie+NVdzJTodIn8Tsy612uiLNSOj5fJQkppDnqIw==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.4.1
@@ -6116,68 +6199,69 @@ packages:
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/extension-placeholder': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/lezer-parser-template': 0.1.0-alpha.d92d50
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-placeholder': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/lezer-parser-template': 0.1.0-alpha.dac011
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       '@lezer/common': 1.2.3
       crelt: 1.0.6
       es-toolkit: 1.39.3
     dev: false
 
-  /@coze-editor/lezer-parser-jinja2@0.1.0-alpha.d92d50:
-    resolution: {integrity: sha512-rQ3DGmPMGBtDAOa8SwguQXqTli7VujDbk/fk448gu4WiKyadgo3fkgrxWuUbEPF3Gj30BR5jLpHIy03cPpmeUg==}
+  /@coze-editor/lezer-parser-jinja2@0.1.0-alpha.dac011:
+    resolution: {integrity: sha512-u5Z96VYaPsqV4sIMJP2UFbckRfg7CFs7Y8CEAcqLEN9ftiYAfo9Vj3GQyLtfLVCABya7Ica9vLt8pOPZW9xEAQ==}
     dependencies:
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
     dev: false
 
-  /@coze-editor/lezer-parser-json@0.1.0-alpha.d92d50:
-    resolution: {integrity: sha512-/4v7enLKCxlot/ZYPBAhVvTeBmYjeFXzBQ8HprbScQyGDZwZYSZ5gzYOJxrksnrz8iQ0LXmZJUgqNsJxBGUs3g==}
+  /@coze-editor/lezer-parser-json@0.1.0-alpha.dac011:
+    resolution: {integrity: sha512-pFmYCPv9AINLLO9ilwlYJMpsdN0nc0Nm6Yf7byI5zAYC+SSjR6i5MWXaKihEFmui1EbQJH11tlnv6P7bTvCutw==}
     dependencies:
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
     dev: false
 
-  /@coze-editor/lezer-parser-template@0.1.0-alpha.d92d50:
-    resolution: {integrity: sha512-yKGY6ISOWH56O+ewyqLZ56vXOD4CpEn8gW9hR0n7g0gKyamj+hfZtUGpb/k4LRRTVSWlzQD5vJHW2yUNRWvMAA==}
+  /@coze-editor/lezer-parser-template@0.1.0-alpha.dac011:
+    resolution: {integrity: sha512-jo8DSAkzwktsonHpeiblROMSOMipQIZKrDw9ZZWNwq5OT3ChaaWr6R7/lLXub+1DjwJVTPXuwOqieahR7+ZJgA==}
     dependencies:
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
     dev: false
 
-  /@coze-editor/parser-json@0.1.0-alpha.d92d50:
-    resolution: {integrity: sha512-RjXb+TvLaf+Nl7iVcVsHrvoMC086WtErZAp2W7vftlbSJ3R5MEL8EyTfoDbg2u+wUKVuvPcAdcmz4v0AUvSBjw==}
+  /@coze-editor/parser-json@0.1.0-alpha.dac011:
+    resolution: {integrity: sha512-5vmEQ6KL29XV+/LZYarWIXVt1ja2xheWrKG7vKTnDi8g0gsBEowidRSF7PgSedoY5hhmxL4tA353oJ4NesqHHA==}
     dependencies:
       '@vscode/l10n': 0.0.18
       vscode-languageserver-textdocument: 1.0.12
       vscode-languageserver-types: 3.17.5
     dev: false
 
-  /@coze-editor/preset-code@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.d92d50)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-/EGomHP+i3g8i2Dwpd07L7o7mJJgRdf7a45SJHTxBgW+64bzgXehtgamCq/Vwu/06l9fErXAoRtaUzwdpxK6XA==}
+  /@coze-editor/preset-code@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/code-language-shared@0.1.0-alpha.dac011)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-Yw6FX+of66+68jyp1gOnmoOoo99YfnrJ/W6PGSgzt69bUI9LS2VN68GttpwjyKdfrU2TfNenzhjkYBi0YaEyLQ==}
     peerDependencies:
       '@codemirror/commands': ^6.3.3
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011
     dependencies:
       '@codemirror/autocomplete': 6.18.6
       '@codemirror/commands': 6.8.1
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/code-language-shared': 0.1.0-alpha.d92d50(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/core-plugins': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extension-completion-icons': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/extension-links': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/extension-lint': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/extension-scrollbar': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/preset-universal': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/vscode': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/code-language-shared': 0.1.0-alpha.dac011(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core-plugins': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-completion-icons': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extension-links': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extension-lint': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extension-scrollbar': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/preset-universal': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/vscode': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
       '@lezer/highlight': 1.2.1
+      '@nozbe/microfuzz': 1.0.0
       codemirror-shiki: 0.2.3(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(shiki@3.6.0)
       marked: 15.0.12
       marked-shiki: 1.2.0(marked@15.0.12)(shiki@3.6.0)
@@ -6189,8 +6273,8 @@ packages:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/preset-expression@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-SjVv2iPJMouvzzijvDfvgU3x/NpV3K/c5dO9lUHFr4soL+pI3oeCG6AuvfblVeKbIu0DP67NxUQYgIhwhQA33Q==}
+  /@coze-editor/preset-expression@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-4/K7WMcYP8iiPS3m+Maj3L0bUUj1g55/du4aYEHs0qZHyNXXXoSvp12Sd/xihMrSA5UYH+h7BTEfANVBQxriUQ==}
     peerDependencies:
       '@codemirror/commands': ^6.3.3
       '@codemirror/state': ^6.4.1
@@ -6201,26 +6285,26 @@ packages:
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/core-plugins': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core-plugins': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/preset-none@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-SRnzx4Y2Ac/pIZ94iqaDXMRSppP3395neewCvYKL0LZPOaFupg1YY9DQmuYHMhfOjTYhEjdQbSnI3/9DgkHI6g==}
+  /@coze-editor/preset-none@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-SP7DP1Rb+ysTccMQCVab7t10DXqkdouXc90F748IzCZMwm8bqvEU636j5Kfxt3LjBONxCO4uEe2j8Csbujv7yw==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
     dev: false
 
-  /@coze-editor/preset-prompt@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-/ThYkl/DUNXR+1/nwpLslJpq+un/UyM+w6UKNfhKAllHTWSjFzUsDicIYoU/SMyAt62YRsKmgo0U+Pg/VMp9tg==}
+  /@coze-editor/preset-prompt@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-bH2OJKS1G815DnxH/lWvAI+4ePd2XMry2uCaz6EngE1pmVh9ztDQFoVn35c7biMMErGi5qa7eZgXB7OdedYbfw==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6229,11 +6313,11 @@ packages:
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/core-plugins': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/lezer-parser-jinja2': 0.1.0-alpha.d92d50
-      '@coze-editor/preset-expression': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core-plugins': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/lezer-parser-jinja2': 0.1.0-alpha.dac011
+      '@coze-editor/preset-expression': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       '@lezer/common': 1.2.3
       '@lezer/html': 1.3.10
       '@lezer/markdown': 1.4.3
@@ -6241,25 +6325,25 @@ packages:
       - '@codemirror/commands'
     dev: false
 
-  /@coze-editor/preset-universal@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-iS+V6x0ot/N3V1vxKHhPeif7px4tzVpZEGW0Gc8Yg9hNaVoZuoATu9f7Akc0B7cuD74SdmvY07ddBnZkWdSlXQ==}
+  /@coze-editor/preset-universal@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-6JxAHHr3u9n1hWe5WcO58bA8FRiiyCIVLbABAUFskdrUNHJd/6rvmo2+LwpX26xtXfEdGt1LkYNTUl94q6hCCg==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/core-plugins': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core-plugins': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
     transitivePeerDependencies:
       - '@codemirror/commands'
       - '@codemirror/language'
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/preset-variable@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-bUMmJTeEmxXyY5lQHTvSwv9w7l9G0XNreuPKfC6ei/XG5/swzuOuRSfSY0iuRC4xJ8vu/JYn3OfYubLgobaWOg==}
+  /@coze-editor/preset-variable@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-QY6fRWGhiJ7Izuy7O0kfgRQFBgXoOWX0ari6mpUt8eO/F7Uup4PfGIC3LxSacDpFZhjy5fj2CM8Ag6Kp6YslEA==}
     peerDependencies:
       '@codemirror/commands': ^6.3.3
       '@codemirror/state': ^6.4.1
@@ -6270,22 +6354,22 @@ packages:
       '@codemirror/language': 6.11.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/core-plugins': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/preset-expression': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core-plugins': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/preset-expression': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       '@lezer/common': 1.2.3
       '@lezer/javascript': 1.5.1
       '@lezer/python': 1.1.18
     dev: false
 
-  /@coze-editor/react-components@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.d92d50)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Eqo2NWnaVCzz60Iw+/b6JFnJ9WO32VadKI//CAh806W0SOx6F2AhhnaFhd5T9imUtADXsmSKznWcMBNyClzvfw==}
+  /@coze-editor/react-components@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.dac011)(@lezer/common@1.2.3)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-TgPB7/kTD4uGxs8sysjfZx4WeNZPqZCi599ZvYVSV6OXdfDmqgNizhfI1aPjKMSVyzWCqqrYCpF17eOhfDDsdQ==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/react': 0.1.0-alpha.d92d50
+      '@coze-editor/react': 0.1.0-alpha.dac011
       react: 18.2.0
       react-dom: 18.2.0
     dependencies:
@@ -6293,12 +6377,12 @@ packages:
       '@codemirror/merge': 6.10.2
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/extension-placeholder': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/react': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
-      '@coze-editor/react-hooks': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.d92d50)(react-dom@18.2.0)(react@18.2.0)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/vscode': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/extension-placeholder': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/react': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/react-hooks': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.dac011)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/vscode': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
       '@floating-ui/dom': 1.7.1
       '@lezer/highlight': 1.2.1
       '@lukeed/uuid': 2.0.1
@@ -6313,43 +6397,43 @@ packages:
       - '@types/react'
     dev: false
 
-  /@coze-editor/react-hooks@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.d92d50)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-tMkAewN9PdnvrFsTKHR++S6CfJIXriWCrAQQxBnY7Vn5L78EIS8COIRiFEv+XmfnSDqCPnYeilR21me8NmZK+Q==}
+  /@coze-editor/react-hooks@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.dac011)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-jXkF1Py1sbHeHnGT1fcHFtnxZLQX/cQU9MPEV73vwOxhB3CalABxZmk+38JoCjzxH2cNiH9hKF575WJH2seIWg==}
     peerDependencies:
       '@codemirror/commands': ^6.3.3
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/react': 0.1.0-alpha.d92d50
+      '@coze-editor/react': 0.1.0-alpha.dac011
       react: 18.2.0
       react-dom: 18.2.0
     dependencies:
       '@codemirror/commands': 6.8.1
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/react': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/react': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@coze-editor/react-merge@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.d92d50)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-T6uqslbOSp0jhn/SLT8IqJH1ySAFuhX73xMst7Tfz5MHBvJ5elaVZwnIeyVFLN31hmIW4zhe/lxYtHHv09/lwQ==}
+  /@coze-editor/react-merge@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/react@0.1.0-alpha.dac011)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-6nBc4chvnqttCYih7E/B/e7eznPW4wwbrNFNRZ6Tkwg5zLbAHw2FQVxkRYImecuWjipJic7HebOzRjnHspO5Mw==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/react': 0.1.0-alpha.d92d50
+      '@coze-editor/react': 0.1.0-alpha.dac011
       react: 18.2.0
       react-dom: 18.2.0
     dependencies:
       '@codemirror/merge': 6.10.2
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/react': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
+      '@coze-editor/react': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@coze-editor/react@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-a6o05vBiH7N2CgHlVmb6HrBfZfdl9nV0ab0NfjJ/U7Y9Vcoq9932N40S9d7phS+l3xllyEsEI1nivXWSJnJL4Q==}
+  /@coze-editor/react@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-9qG/6NECDgYB+w6GLQJCLJnjZE/u76o85fmOTXAvR0fM/6jSBLabjDXXAwhEZb+oU1seKH/bZX3MsJgY+NhWmg==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6358,13 +6442,13 @@ packages:
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@coze-editor/utils@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
-    resolution: {integrity: sha512-Odnk9qq0WfR4KlDaB3q5uN2yYu1U4KM2mTIIFJuv3MQdo4HIN/qCKa+2FvyMDo2eXSCx7Vcb5O9v7tHrTOIiiw==}
+  /@coze-editor/utils@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3):
+    resolution: {integrity: sha512-CyE3206/rGGxeiT5qm7HfW1wTve8ap0cTjU0hUnU/yy/4OzpGHiLSLR724kQaOZWzVzv9fpiYgWmGZfW0KaIsw==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6375,8 +6459,8 @@ packages:
       '@lezer/common': 1.2.3
     dev: false
 
-  /@coze-editor/vscode@0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
-    resolution: {integrity: sha512-2jvw0kdj7RFbWnMaDwqBKFP7arKiSkW+EsPeL/TICaEZOGMz/QwhFPyKk794nxYZc7GkCCNF9qkTpEcvpR5T0w==}
+  /@coze-editor/vscode@0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2):
+    resolution: {integrity: sha512-W3UaaZ8KU3AGV0ZTvn9uFCSHsV+n588jWy2wWY4ISEAI5Qq/Sl83fA+VFI02xGaqGRhD7w/1Tgqx/p3L3/mI0Q==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6388,20 +6472,20 @@ packages:
       crelt: 1.0.6
     dev: false
 
-  /@coze-editor/vue-components@0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/vue@0.1.0-alpha.d92d50)(@lezer/common@1.2.3)(vue@3.5.16):
-    resolution: {integrity: sha512-P6SYni2zcHHn7nYPwJti4T8OAKpE7hNEgjAnh2Wk8xosi5uZHy/cFQ5G5hVQX+kHxlIv2GKC3ykdCU3b0Diq8w==}
+  /@coze-editor/vue-components@0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@coze-editor/vue@0.1.0-alpha.dac011)(@lezer/common@1.2.3)(vue@3.5.16):
+    resolution: {integrity: sha512-BLyHuRsNWdCzE8Q+tT9rPiuDWQexlJm48ZOoXh+q+fuyphz1r2YVFLrPUa0Ecgo36uw4KSFiaaCH+4Lq1Wbm7w==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
-      '@coze-editor/vue': 0.1.0-alpha.d92d50
+      '@coze-editor/vue': 0.1.0-alpha.dac011
       vue: ^3.5.0
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/extension-placeholder': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extensions': 0.1.0-alpha.d92d50(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/utils': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/vue': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(vue@3.5.16)
+      '@coze-editor/extension-placeholder': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extensions': 0.1.0-alpha.dac011(@codemirror/language@6.11.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/utils': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/vue': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(vue@3.5.16)
       '@floating-ui/dom': 1.7.1
       vue: 3.5.16(typescript@5.8.2)
     transitivePeerDependencies:
@@ -6409,8 +6493,8 @@ packages:
       - '@lezer/common'
     dev: false
 
-  /@coze-editor/vue@0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(vue@3.5.16):
-    resolution: {integrity: sha512-QswEARb0Zlek8GJk0g6mQyVxIkMzyuXXbICJdSYWNJbEopcvQfnUar9AHjZtJZ9ffQHafjI3VbvL7WHDKrH2Vw==}
+  /@coze-editor/vue@0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)(vue@3.5.16):
+    resolution: {integrity: sha512-qCJrzyCw9m/ToJcK9eKYpfopoz11UqswtwjkAah6/EfUgbREcd4P8lCAD3q90amdSrL3yFqSiQH3Zhh6/Oiqeg==}
     peerDependencies:
       '@codemirror/state': ^6.4.1
       '@codemirror/view': ^6.26.1
@@ -6418,9 +6502,9 @@ packages:
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.37.2
-      '@coze-editor/core': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
-      '@coze-editor/core-plugins': 0.1.0-alpha.d92d50(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
-      '@coze-editor/extension-placeholder': 0.1.0-alpha.d92d50(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/core': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)
+      '@coze-editor/core-plugins': 0.1.0-alpha.dac011(@codemirror/commands@6.8.1)(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
+      '@coze-editor/extension-placeholder': 0.1.0-alpha.dac011(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(@lezer/common@1.2.3)
       vue: 3.5.16(typescript@5.8.2)
     transitivePeerDependencies:
       - '@codemirror/commands'
@@ -7489,6 +7573,25 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: false
+
+  /@iconify/utils@3.0.1:
+    resolution: {integrity: sha512-A78CUEnFGX8I/WlILxJCuIJXloL0j/OJ9PSchPAfCargEIKmUBWvvEMmKWB5oONwiUqlNt+5eRufdkLxeHIWYw==}
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 9.2.0
+      '@iconify/types': 2.0.0
+      debug: 4.3.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -7800,6 +7903,12 @@ packages:
       react: 18.2.0
     dev: true
 
+  /@mermaid-js/parser@0.6.2:
+    resolution: {integrity: sha512-+PO02uGF6L6Cs0Bw8RpGhikVvMWEysfAyl27qTlroUB8jSWr1lL0Sf6zi78ZxlSnmgSY2AMMKVgghnN9jTtwkQ==}
+    dependencies:
+      langium: 3.3.1
+    dev: false
+
   /@microsoft/rush-lib@5.147.2(@types/node@18.18.9):
     resolution: {integrity: sha512-MCUkNe91yGv0LZgLraB42eHNRRq0rRG5Xz4xfm1wqdi73NymbaRO/qgOFrIO8QTuDtEneuH6NSAzb0wPkyy/yA==}
     engines: {node: '>=5.6.0'}
@@ -10169,6 +10278,12 @@ packages:
       '@shikijs/vscode-textmate': 10.0.2
     dev: false
 
+  /@shikijs/langs@3.12.2:
+    resolution: {integrity: sha512-bVx5PfuZHDSHoBal+KzJZGheFuyH4qwwcwG/n+MsWno5cTlKmaNtTsGzJpHYQ8YPbB5BdEdKU1rga5/6JGY8ww==}
+    dependencies:
+      '@shikijs/types': 3.12.2
+    dev: false
+
   /@shikijs/langs@3.6.0:
     resolution: {integrity: sha512-IdZkQJaLBu1LCYCwkr30hNuSDfllOT8RWYVZK1tD2J03DkiagYKRxj/pDSl8Didml3xxuyzUjgtioInwEQM/TA==}
     dependencies:
@@ -10181,6 +10296,13 @@ packages:
       '@shikijs/types': 3.6.0
     dev: false
 
+  /@shikijs/types@3.12.2:
+    resolution: {integrity: sha512-K5UIBzxCyv0YoxN3LMrKB9zuhp1bV+LgewxuVwHdl4Gz5oePoUFrr9EfgJlGlDeXCU1b/yhdnXeuRvAnz8HN8Q==}
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+    dev: false
+
   /@shikijs/types@3.6.0:
     resolution: {integrity: sha512-cLWFiToxYu0aAzJqhXTQsFiJRTFDAGl93IrMSBNaGSzs7ixkLfdG6pH11HipuWFGW5vyx4X47W8HDQ7eSrmBUg==}
     dependencies:
@@ -11387,6 +11509,185 @@ packages:
       '@types/node': 18.18.9
     dev: true
 
+  /@types/d3-array@3.2.1:
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+    dev: false
+
+  /@types/d3-axis@3.0.6:
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-brush@3.0.6:
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-chord@3.0.6:
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+    dev: false
+
+  /@types/d3-color@3.1.3:
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+    dev: false
+
+  /@types/d3-contour@3.0.6:
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/geojson': 7946.0.16
+    dev: false
+
+  /@types/d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+    dev: false
+
+  /@types/d3-dispatch@3.0.7:
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+    dev: false
+
+  /@types/d3-drag@3.0.7:
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-dsv@3.0.7:
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+    dev: false
+
+  /@types/d3-ease@3.0.2:
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+    dev: false
+
+  /@types/d3-fetch@3.0.7:
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+    dev: false
+
+  /@types/d3-force@3.0.10:
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+    dev: false
+
+  /@types/d3-format@3.0.4:
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+    dev: false
+
+  /@types/d3-geo@3.1.0:
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+    dependencies:
+      '@types/geojson': 7946.0.16
+    dev: false
+
+  /@types/d3-hierarchy@3.1.7:
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+    dev: false
+
+  /@types/d3-interpolate@3.0.4:
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+    dependencies:
+      '@types/d3-color': 3.1.3
+    dev: false
+
+  /@types/d3-path@3.1.1:
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+    dev: false
+
+  /@types/d3-polygon@3.0.2:
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+    dev: false
+
+  /@types/d3-quadtree@3.0.6:
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+    dev: false
+
+  /@types/d3-random@3.0.3:
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+    dev: false
+
+  /@types/d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+    dev: false
+
+  /@types/d3-scale@4.0.9:
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+    dependencies:
+      '@types/d3-time': 3.0.4
+    dev: false
+
+  /@types/d3-selection@3.0.11:
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+    dev: false
+
+  /@types/d3-shape@3.1.7:
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+    dependencies:
+      '@types/d3-path': 3.1.1
+    dev: false
+
+  /@types/d3-time-format@4.0.3:
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+    dev: false
+
+  /@types/d3-time@3.0.4:
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+    dev: false
+
+  /@types/d3-timer@3.0.2:
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+    dev: false
+
+  /@types/d3-transition@3.0.9:
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+    dependencies:
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3-zoom@3.0.8:
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+    dev: false
+
+  /@types/d3@7.4.3:
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+    dev: false
+
   /@types/debug@4.1.12:
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
     dependencies:
@@ -11480,6 +11781,10 @@ packages:
       '@types/node': 18.18.9
     dev: true
 
+  /@types/geojson@7946.0.16:
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+    dev: false
+
   /@types/glob@7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
@@ -14210,6 +14515,26 @@ packages:
     engines: {node: '>= 16'}
     dev: true
 
+  /chevrotain-allstar@0.3.1(chevrotain@11.0.3):
+    resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==}
+    peerDependencies:
+      chevrotain: ^11.0.0
+    dependencies:
+      chevrotain: 11.0.3
+      lodash-es: 4.17.21
+    dev: false
+
+  /chevrotain@11.0.3:
+    resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==}
+    dependencies:
+      '@chevrotain/cst-dts-gen': 11.0.3
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/regexp-to-ast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      '@chevrotain/utils': 11.0.3
+      lodash-es: 4.17.21
+    dev: false
+
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -14387,6 +14712,18 @@ packages:
       shiki: 3.6.0
     dev: false
 
+  /codemirror-shiki@0.3.0(@codemirror/state@6.5.2)(@codemirror/view@6.37.2)(shiki@3.6.0):
+    resolution: {integrity: sha512-KSrfcm8RNSgTl3+Vgq+HuGA/bQGbxBMGosoFXL77yWc6r8JjLygIBndqL9evCv2ED9EOoeZozROcXNanN7Mabg==}
+    peerDependencies:
+      '@codemirror/state': ^6
+      '@codemirror/view': ^6
+      shiki: '>=2.0.0'
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.37.2
+      shiki: 3.6.0
+    dev: false
+
   /codepage@1.15.0:
     resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
     engines: {node: '>=0.8'}
@@ -14483,7 +14820,6 @@ packages:
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
-    dev: true
 
   /commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
@@ -14573,7 +14909,10 @@ packages:
 
   /confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
-    dev: true
+
+  /confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+    dev: false
 
   /configstore@5.0.1:
     resolution: {integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==}
@@ -14657,6 +14996,18 @@ packages:
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  /cose-base@1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+    dependencies:
+      layout-base: 1.0.2
+    dev: false
+
+  /cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+    dependencies:
+      layout-base: 2.0.1
+    dev: false
+
   /cosmiconfig@5.2.1:
     resolution: {integrity: sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==}
     engines: {node: '>=4'}
@@ -14852,10 +15203,95 @@ packages:
       array-find-index: 1.0.2
     dev: true
 
+  /cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1):
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.33.1
+    dev: false
+
+  /cytoscape-fcose@2.2.0(cytoscape@3.33.1):
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.33.1
+    dev: false
+
+  /cytoscape@3.33.1:
+    resolution: {integrity: sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==}
+    engines: {node: '>=0.10'}
+    dev: false
+
   /d3-array@1.2.4:
     resolution: {integrity: sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==}
     dev: false
 
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
+
+  /d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
+  /d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+    dependencies:
+      delaunator: 5.0.1
+    dev: false
+
+  /d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+    dev: false
+
   /d3-dsv@2.0.0:
     resolution: {integrity: sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==}
     hasBin: true
@@ -14865,12 +15301,55 @@ packages:
       rw: 1.3.3
     dev: false
 
+  /d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+    dev: false
+
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dsv: 3.0.1
+    dev: false
+
+  /d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /d3-geo@1.12.1:
     resolution: {integrity: sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==}
     dependencies:
       d3-array: 1.2.4
     dev: false
 
+  /d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
   /d3-hexbin@0.2.2:
     resolution: {integrity: sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w==}
     dev: false
@@ -14880,6 +15359,168 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+    dev: false
+
+  /d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+    dependencies:
+      d3-array: 1.2.4
+      d3-shape: 1.3.7
+    dev: false
+
+  /d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+    dev: false
+
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+    dependencies:
+      d3-path: 1.0.9
+    dev: false
+
+  /d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-transition@3.0.1(d3-selection@3.0.0):
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
+  /d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+    dev: false
+
+  /dagre-d3-es@7.0.11:
+    resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==}
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.17.21
+    dev: false
+
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: false
@@ -15118,6 +15759,12 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+    dependencies:
+      robust-predicates: 3.0.2
+    dev: false
+
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -15337,6 +15984,12 @@ packages:
       '@types/trusted-types': 2.0.7
     dev: false
 
+  /dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+    dev: false
+
   /domutils@1.7.0:
     resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
     dependencies:
@@ -16526,6 +17179,10 @@ packages:
       - supports-color
     dev: true
 
+  /exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
+    dev: false
+
   /extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -17047,11 +17704,6 @@ packages:
   /functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
-  /fuse.js@7.1.0:
-    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
-    engines: {node: '>=10'}
-    dev: false
-
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -17338,6 +17990,11 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
+  /globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+    dev: false
+
   /globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -17435,6 +18092,10 @@ packages:
       through2: 2.0.5
     dev: true
 
+  /hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+    dev: false
+
   /handlebars@4.7.8:
     resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
     engines: {node: '>=0.4.7'}
@@ -17976,6 +18637,11 @@ packages:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  /internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /intersection-observer@0.12.2:
     resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
 
@@ -18657,6 +19323,10 @@ packages:
       react: 18.2.0
     dev: false
 
+  /js-base64@3.7.8:
+    resolution: {integrity: sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==}
+    dev: false
+
   /js-binary-schema-parser@2.0.3:
     resolution: {integrity: sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==}
     dev: false
@@ -18945,6 +19615,10 @@ packages:
     dependencies:
       json-buffer: 3.0.1
 
+  /khroma@2.1.0:
+    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
+    dev: false
+
   /kind-of@3.2.2:
     resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
     engines: {node: '>=0.10.0'}
@@ -18991,6 +19665,21 @@ packages:
     resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==}
     dev: true
 
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: false
+
+  /langium@3.3.1:
+    resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      chevrotain: 11.0.3
+      chevrotain-allstar: 0.3.1(chevrotain@11.0.3)
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.0.8
+    dev: false
+
   /language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
     dev: false
@@ -19009,6 +19698,14 @@ packages:
       package-json: 6.5.0
     dev: false
 
+  /layout-base@1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+    dev: false
+
+  /layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+    dev: false
+
   /lazy-universal-dotenv@4.0.0:
     resolution: {integrity: sha512-aXpZJRnTkpK6gQ/z4nk+ZBLd/Qdp118cvPruLSIQzQNRhKwEcdXCOzXuF55VDqIiuAaY3UGZ10DJtvZzDcvsxg==}
     engines: {node: '>=14.0.0'}
@@ -19094,6 +19791,15 @@ packages:
       json5: 2.2.3
     dev: true
 
+  /local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+    dev: false
+
   /locate-path@2.0.0:
     resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
     engines: {node: '>=4'}
@@ -19891,6 +20597,33 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  /mermaid@11.11.0:
+    resolution: {integrity: sha512-9lb/VNkZqWTRjVgCV+l1N+t4kyi94y+l5xrmBmbbxZYkfRl5hEDaTPMOcaWKCl1McG8nBEaMlWwkcAEEgjhBgg==}
+    dependencies:
+      '@braintree/sanitize-url': 7.1.1
+      '@iconify/utils': 3.0.1
+      '@mermaid-js/parser': 0.6.2
+      '@types/d3': 7.4.3
+      cytoscape: 3.33.1
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1)
+      cytoscape-fcose: 2.2.0(cytoscape@3.33.1)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.11
+      dayjs: 1.11.13
+      dompurify: 3.2.6
+      katex: 0.16.22
+      khroma: 2.1.0
+      lodash-es: 4.17.21
+      marked: 15.0.12
+      roughjs: 4.6.6
+      stylis: 4.3.6
+      ts-dedent: 2.2.0
+      uuid: 11.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
@@ -20653,7 +21386,6 @@ packages:
       pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.6.1
-    dev: true
 
   /monaco-editor@0.45.0:
     resolution: {integrity: sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA==}
@@ -21261,6 +21993,10 @@ packages:
       semver: 6.3.1
     dev: false
 
+  /package-manager-detector@1.3.0:
+    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+    dev: false
+
   /pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
     dev: true
@@ -21420,7 +22156,6 @@ packages:
 
   /pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
-    dev: true
 
   /pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
@@ -21534,7 +22269,14 @@ packages:
       confbox: 0.1.8
       mlly: 1.7.4
       pathe: 2.0.3
-    dev: true
+
+  /pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.7
+      pathe: 2.0.3
+    dev: false
 
   /please-upgrade-node@3.2.0:
     resolution: {integrity: sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==}
@@ -22085,6 +22827,10 @@ packages:
       side-channel: 1.1.0
     dev: true
 
+  /quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+    dev: false
+
   /query-string@8.2.0:
     resolution: {integrity: sha512-tUZIw8J0CawM5wyGBiDOAp7ObdRQh4uBor/fUR9ZjmbZVvw95OD9If4w3MQxr99rg0DJZ/9CIORcpEqU5hQG7g==}
     engines: {node: '>=14.16'}
@@ -23173,6 +23919,10 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+    dev: false
+
   /rollup@3.29.5:
     resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -23218,6 +23968,15 @@ packages:
       points-on-path: 0.2.1
     dev: false
 
+  /roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+    dev: false
+
   /rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
     dev: false
@@ -24562,6 +25321,10 @@ packages:
     resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
     dev: true
 
+  /stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+    dev: false
+
   /sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -24619,6 +25382,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /svg-pan-zoom@3.6.2:
+    resolution: {integrity: sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==}
+    dev: false
+
   /svg-parser@2.0.4:
     resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
     dev: true
@@ -24931,6 +25698,10 @@ packages:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
     dev: true
 
+  /tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+    dev: false
+
   /tinyglobby@0.2.14:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
@@ -25152,7 +25923,6 @@ packages:
   /ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
-    dev: true
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
@@ -25363,7 +26133,6 @@ packages:
 
   /ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
-    dev: true
 
   /uglify-js@3.19.3:
     resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
@@ -25832,6 +26601,11 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
+  /uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+    dev: false
+
   /uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -26419,6 +27193,18 @@ packages:
       vscode-uri: 3.1.0
     dev: false
 
+  /vscode-jsonrpc@8.2.0:
+    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
+  /vscode-languageserver-protocol@3.17.5:
+    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
+    dependencies:
+      vscode-jsonrpc: 8.2.0
+      vscode-languageserver-types: 3.17.5
+    dev: false
+
   /vscode-languageserver-textdocument@1.0.12:
     resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
     dev: false
@@ -26427,6 +27213,17 @@ packages:
     resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
     dev: false
 
+  /vscode-languageserver@9.0.1:
+    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
+    hasBin: true
+    dependencies:
+      vscode-languageserver-protocol: 3.17.5
+    dev: false
+
+  /vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+    dev: false
+
   /vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
     dev: false
diff --git a/frontend/packages/cozeloop/i18n/scripts/utils.ts b/frontend/packages/cozeloop/i18n/scripts/utils.ts
index 528ce98cd..1fced1adf 100644
--- a/frontend/packages/cozeloop/i18n/scripts/utils.ts
+++ b/frontend/packages/cozeloop/i18n/scripts/utils.ts
@@ -69,14 +69,19 @@ function parseElement(el: MessageFormatElement): TypeInfo[] | undefined {
 }
 
 export function icu2Type(message: string) {
-  const elements = parse(message);
-  const types: TypeInfo[] = [];
+  try {
+    const elements = parse(message);
+    const types: TypeInfo[] = [];
 
-  for (const element of elements) {
-    const elementTypes = parseElement(element);
+    for (const element of elements) {
+      const elementTypes = parseElement(element);
 
-    elementTypes?.length && types.push(...elementTypes);
-  }
+      elementTypes?.length && types.push(...elementTypes);
+    }
 
-  return types;
+    return types;
+    // eslint-disable-next-line @coze-arch/use-error-in-catch -- skip
+  } catch {
+    return [];
+  }
 }
diff --git a/frontend/packages/cozeloop/i18n/src/locale-types.ts b/frontend/packages/cozeloop/i18n/src/locale-types.ts
index e2f2adc2d..ae677761a 100644
--- a/frontend/packages/cozeloop/i18n/src/locale-types.ts
+++ b/frontend/packages/cozeloop/i18n/src/locale-types.ts
@@ -149,14 +149,8 @@ interface I18nTranslateFn {
     },
     fallbackText?: string,
   ): string;
-  /** 请选择{field} */
-  (
-    key: 'please_select',
-    options?: {
-      /** string */ field: ReactNode;
-    },
-    fallbackText?: string,
-  ): string;
+  /** 请选择 */
+  (key: 'please_select', fallbackText?: string): string;
   /** 预览 */
   (key: 'preview', fallbackText?: string): string;
   /** 刷新 */
@@ -784,7 +778,7 @@ interface I18nTranslateFn {
   (key: 'add_user_prompt', fallbackText?: string): string;
   /** 提交新版本 */
   (key: 'submit_new_version', fallbackText?: string): string;
-  /** 创建评估器 */
+  /** 新建评估器 */
   (key: 'create_evaluator', fallbackText?: string): string;
   /** 版本号格式为a.b.c，且每段为0-9999 */
   (key: 'version_number_format', fallbackText?: string): string;
@@ -798,7 +792,7 @@ interface I18nTranslateFn {
     },
     fallbackText?: string,
   ): string;
-  /** 选择模板 */
+  /** 选择模版 */
   (key: 'select_template', fallbackText?: string): string;
   /** 预置评估器 */
   (key: 'preset_evaluator', fallbackText?: string): string;
@@ -1449,6 +1443,1074 @@ interface I18nTranslateFn {
   (key: 'only_support_english_letters_numbers_and_chinese_and_', fallbackText?: string): string;
   /** 仅支持英文、数字、下划线，且需要以字母开头 */
   (key: 'only_support_english_numbers_and_underscores_and_start_with_a_letter', fallbackText?: string): string;
+  /** 请选择版本 */
+  (key: 'select_version', fallbackText?: string): string;
+  /** 多模态 */
+  (key: 'multimodal', fallbackText?: string): string;
+  /** 至少保留一个数据项 */
+  (key: 'keep_at_least_one_data_item', fallbackText?: string): string;
+  /** 单次最多添加{num}条数据项 */
+  (
+    key: 'add_up_to_{num}_data_items_at_a_time',
+    options?: {
+      /** string */ num: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 成功添加{successCount}条数据 */
+  (
+    key: 'successfully_added_{successcount}_data',
+    options?: {
+      /** string */ successCount: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 修改未提交 */
+  (key: 'unsubmitted_changes', fallbackText?: string): string;
+  /** 去提交 */
+  (key: 'to_submit', fallbackText?: string): string;
+  /** 确认删除 */
+  (key: 'delete_confirm', fallbackText?: string): string;
+  /** 此操作不可逆 */
+  (key: 'this_operation_is_irreversible', fallbackText?: string): string;
+  /** 请输入列名称 */
+  (key: 'please_enter_column_name', fallbackText?: string): string;
+  /** 列名称已存在 */
+  (key: 'column_name_exists', fallbackText?: string): string;
+  /** 请选择数据类型 */
+  (key: 'select_data_type', fallbackText?: string): string;
+  /** 草稿版本存在存量数据项，不支持修改数据类型。 */
+  (key: 'draft_has_existing_data_can_not_modifying', fallbackText?: string): string;
+  /** undefined */
+  (key: 'required', fallbackText?: string): string;
+  /** 允许冗余字段 */
+  (key: 'redundant_fields_allowed', fallbackText?: string): string;
+  /** 请输入列描述 */
+  (key: 'enter_column_description', fallbackText?: string): string;
+  /** 最多支持{num}列 */
+  (
+    key: 'supports_up_to_{num}_columns',
+    options?: {
+      /** string */ num: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 至少保留一个列 */
+  (key: 'retain_at_least_one_column', fallbackText?: string): string;
+  /** 更新成功 */
+  (key: 'prompt_block_update_success', fallbackText?: string): string;
+  /** 请输入评测集名称 */
+  (key: 'enter_evaluation_name', fallbackText?: string): string;
+  /** 如何创建评测集 */
+  (key: 'how_to_create_a_review_set', fallbackText?: string): string;
+  /** 请输入评测集描述 */
+  (key: 'please_enter_a_review_set_description', fallbackText?: string): string;
+  /** 基本信息 */
+  (key: 'basic_information', fallbackText?: string): string;
+  /** 信息未保存 */
+  (key: 'information_not_saved', fallbackText?: string): string;
+  /** 切换后当前修改会被覆盖 */
+  (key: 'switching_modification_overwritten_tips', fallbackText?: string): string;
+  /** 作为输入投递给评测对象 */
+  (key: 'evaluation_set_input_tips', fallbackText?: string): string;
+  /** 预期理想输出，可作为评估时的参考标准 */
+  (key: 'evaluation_set_reference_output_tips', fallbackText?: string): string;
+  /** 工作流开始节点的输入参数及取值，你可以在指定工作流的编排页面查看参数列表。 */
+  (key: 'evaluation_set_workflow_params_tips', fallbackText?: string): string;
+  /** 工作流需要关联的 Coze 智能体 ID。 */
+  (key: 'workflow_need_associated_coze_agent_id', fallbackText?: string): string;
+  /** 用于指定工作流需要的一些额外的字段。 */
+  (key: 'workflow_additional_fields', fallbackText?: string): string;
+  /** 该工作流关联的应用的 ID。 */
+  (key: 'workflow_associated_coze_agent_id', fallbackText?: string): string;
+  /** 默认 */
+  (key: 'default', fallbackText?: string): string;
+  /** Coze 工作流 */
+  (key: 'coze_workflow', fallbackText?: string): string;
+  /** 一键将评测集的列调整为兼容工作流执行 API 的数据格式。 */
+  (key: 'adjust_the_columns_with_workflow_api', fallbackText?: string): string;
+  /** 导入数据列 */
+  (key: 'import_data_columns', fallbackText?: string): string;
+  /** 模板 */
+  (key: 'template', fallbackText?: string): string;
+  /** 支持文件格式：csv、zip、xlsx、xls，文件最大200MB，仅支持导入一个文件 */
+  (key: 'evaluation_set_import_files_tips', fallbackText?: string): string;
+  /** 请上传文件 */
+  (key: 'please_upload_file', fallbackText?: string): string;
+  /** 请配置导入列 */
+  (key: 'please_configure_the_import_column', fallbackText?: string): string;
+  /** 追加数据 */
+  (key: 'evaluation_set_append_data', fallbackText?: string): string;
+  /** 全量覆盖 */
+  (key: 'evaluation_set_overwrite_data', fallbackText?: string): string;
+  /** 确认选择全量覆盖 */
+  (key: 'confirm_full_overwrite', fallbackText?: string): string;
+  /** 导入数据将覆盖现有数据 */
+  (key: 'importing_data_will_overwrite_existing_data', fallbackText?: string): string;
+  /** 格式化JSON */
+  (key: 'format_json', fallbackText?: string): string;
+  /** 字段补全 */
+  (key: 'field_completion', fallbackText?: string): string;
+  /** 请输入数值 */
+  (key: 'enter_number', fallbackText?: string): string;
+  /** 请输入大于等于{num}的数字 */
+  (
+    key: 'enter_number_greater_than_or_equal_to_{num}',
+    options?: {
+      /** string */ num: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 请输入小于等于{num}的数字 */
+  (
+    key: 'enter_number_less_than_or_equal_to_{num}',
+    options?: {
+      /** string */ num: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 请输入整数 */
+  (key: 'enter_integer', fallbackText?: string): string;
+  /** 仅支持精确到小数点后{num}位 */
+  (
+    key: 'decimal_places_support',
+    options?: {
+      /** string */ num: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 请输入内容 */
+  (key: 'please_enter_content', fallbackText?: string): string;
+  /** 输入内容不是合法json格式 */
+  (key: 'the_input_content_is_not_in_legal_json_format', fallbackText?: string): string;
+  /** 请输入对象 */
+  (key: 'please_enter_an_object', fallbackText?: string): string;
+  /** 输入内容不符合列的字段定义 */
+  (key: 'the_input_does_not_match_the_field_definition_of_the_column', fallbackText?: string): string;
+  /** 数据类型不符合字段定义 */
+  (key: 'data_type_does_not_match_the_field_definition', fallbackText?: string): string;
+  /** 缺少必填字段 */
+  (key: 'missing_required_field', fallbackText?: string): string;
+  /** 存在冗余字段 */
+  (key: 'there_is_redundant_field', fallbackText?: string): string;
+  /** undefined */
+  (key: 'previous', fallbackText?: string): string;
+  /** 上一条 */
+  (key: 'previous_one', fallbackText?: string): string;
+  /** 下一条 */
+  (key: 'next_one', fallbackText?: string): string;
+  /** 在最大高度内滚动查看字段内容 */
+  (key: 'scroll_to_view_field_content_within_maximum_height', fallbackText?: string): string;
+  /** 字段内容不受最大高度限制 */
+  (key: 'field_content_is_not_limited_by_maximum_height', fallbackText?: string): string;
+  /** 删除评测集 */
+  (key: 'delete_review_set', fallbackText?: string): string;
+  /** 确定删除评测集 {name}  吗？此修改将不可逆。 */
+  (
+    key: 'evaluation_set_{name}_delete_tips',
+    options?: {
+      /** string */ name: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 请尝试其他关键词或修改筛选项 */
+  (key: 'try_other_keywords', fallbackText?: string): string;
+  /** 点击右上角新建评测集按钮进行创建 */
+  (key: 'evaluation_set_click_the_button_to_create', fallbackText?: string): string;
+  /** 查看参数 */
+  (key: 'view_parameters', fallbackText?: string): string;
+  /** 得分仅预览效果，非实际结果。 */
+  (key: 'scores_only_previews_not_actual_results', fallbackText?: string): string;
+  /** Prompt 详情 */
+  (key: 'prompt_details', fallbackText?: string): string;
+  /** 查看标签详情 */
+  (key: 'view_tag_details', fallbackText?: string): string;
+  /** 请输入{num1}～{num2}区间内的数字 */
+  (
+    key: 'please_enter_a_number_in_the_range_{num1}_to_{num2}',
+    options?: {
+      /** string */ num1: ReactNode;
+      /** string */ num2: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 请输入原因 */
+  (key: 'please_enter_the_reason', fallbackText?: string): string;
+  /** 更新评分成功 */
+  (key: 'update_score_successful', fallbackText?: string): string;
+  /** 已选 {num} 条数据 */
+  (
+    key: '{num}_data_selected',
+    options?: {
+      /** string */ num: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 取消选择 */
+  (key: 'cancel_selection', fallbackText?: string): string;
+  /** 实验对比 */
+  (key: 'experimental_comparison', fallbackText?: string): string;
+  /** 升级「企业团队版套餐」 */
+  (key: 'upgrade_enterprise_team_edition_package', fallbackText?: string): string;
+  /** 后可使用此功能 */
+  (key: 'you_can_use_this_function_later', fallbackText?: string): string;
+  /** 成功 {success_count} 条， 失败 {fail_count} 条 */
+  (
+    key: 'evaluate_success_{success_count}_fail_{fail_count}',
+    options?: {
+      /** string */ success_count: ReactNode;
+      /** string */ fail_count: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 过滤器 */
+  (key: 'data_filter', fallbackText?: string): string;
+  /** 清空筛选 */
+  (key: 'clear_filter', fallbackText?: string): string;
+  /** 应用 */
+  (key: 'application', fallbackText?: string): string;
+  /** 请选择评测集 */
+  (key: 'select_evaluation_set', fallbackText?: string): string;
+  /** 新建评测集 */
+  (key: 'create_evaluation_set', fallbackText?: string): string;
+  /** 请选择评测集版本 */
+  (key: 'please_select_evaluation_set_version', fallbackText?: string): string;
+  /** 请选择评估器 */
+  (key: 'please_select_evaluator', fallbackText?: string): string;
+  /** 添加子项 */
+  (key: 'add_child_item', fallbackText?: string): string;
+  /** 数据结构 */
+  (key: 'data_structure', fallbackText?: string): string;
+  /** 数据结构不符合要求，无法导入 */
+  (key: 'evaluation_set_import_error_data_structure_tips', fallbackText?: string): string;
+  /** 导入数据类型与列的数据类型不一致，无法导入 */
+  (key: 'evaluation_set_import_error_data_type_tips', fallbackText?: string): string;
+  /** 样例数据格式错误 */
+  (key: 'sample_data_format_error', fallbackText?: string): string;
+  /** 导入样例数据 */
+  (key: 'import_sample_data', fallbackText?: string): string;
+  /** 基于样例数据自动提取数据结构 */
+  (key: 'automatic_extraction_of_data_structure_based_on_sample_data', fallbackText?: string): string;
+  /** 样例数据 */
+  (key: 'evaluation_set_builtin_example_data', fallbackText?: string): string;
+  /** 提取数据结构 */
+  (key: 'extract_data_structure', fallbackText?: string): string;
+  /** 确认提取数据结构 */
+  (key: 'confirm_the_extracted_data_structure', fallbackText?: string): string;
+  /** 提取数据结构将覆盖原有的字段定义 */
+  (key: 'extracting_the_data_structure_overwrite_tips', fallbackText?: string): string;
+  /** 已下钻到最小层级，无法再下钻 */
+  (key: 'drilled_to_minimum_level_tips', fallbackText?: string): string;
+  /** 确认切换 */
+  (key: 'confirm_the_switch', fallbackText?: string): string;
+  /** 当前JSON Schema不合法，切换会导致配置丢失，是否继续切换 */
+  (key: 'evaluation_set_json_schema_invalid_tips', fallbackText?: string): string;
+  /** 冗余字段校验 */
+  (key: 'redundant_field_check', fallbackText?: string): string;
+  /** 高级校验规则 */
+  (key: 'advanced_validation_rule', fallbackText?: string): string;
+  /** 数据加工 */
+  (key: 'data_processing_short', fallbackText?: string): string;
+  /** 移除冗余字段 */
+  (key: 'remove_redundant_fields', fallbackText?: string): string;
+  /** 可视化配置 */
+  (key: 'visual_configuration', fallbackText?: string): string;
+  /** 手动添加 */
+  (key: 'app_client_add_env', fallbackText?: string): string;
+  /** 本地导入 */
+  (key: 'local_import', fallbackText?: string): string;
+  /** 删除数据项 */
+  (key: 'delete_data_items', fallbackText?: string): string;
+  /** 确定删除数据项 */
+  (key: 'confirm_delete_data_items', fallbackText?: string): string;
+  /** 提交成功 */
+  (key: 'submitted_successfully', fallbackText?: string): string;
+  /** 版本不能为空 */
+  (key: 'version_cannot_be_empty', fallbackText?: string): string;
+  /** 请输入正确的版本，格式为a.b.c，且每段为0-999 */
+  (key: 'version_number_format_tips', fallbackText?: string): string;
+  /** 新版本必须大于当前版本 */
+  (key: 'new_version_greater_than_current', fallbackText?: string): string;
+  /** 测试 */
+  (key: 'test', fallbackText?: string): string;
+  /** 文本 */
+  (key: 'plaintext', fallbackText?: string): string;
+  /** 图片-源文件 */
+  (key: 'image_source_file', fallbackText?: string): string;
+  /** 图片-外链 */
+  (key: 'image_external_link', fallbackText?: string): string;
+  /** 图片大小不能超过{size}MB */
+  (
+    key: 'the_image_size_cannot_exceed_{size}_mb',
+    options?: {
+      /** string */ size: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 如不保存，已编辑的信息将会丢失。 */
+  (key: 'saved_lost_data_tips', fallbackText?: string): string;
+  /** 保存并继续 */
+  (key: 'evaluation_set_save_and_continue', fallbackText?: string): string;
+  /** 不保存 */
+  (key: 'do_not_save', fallbackText?: string): string;
+  /** 请选择版本号 */
+  (key: 'please_select_a_version_number', fallbackText?: string): string;
+  /** 实验列表 */
+  (key: 'experiments_list', fallbackText?: string): string;
+  /** 请选择指标 */
+  (key: 'please_select_an_indicator', fallbackText?: string): string;
+  /** 请选择评测对象 */
+  (key: 'please_select_evaluate_target', fallbackText?: string): string;
+  /** 评测对象类型 */
+  (key: 'evaluate_target_type', fallbackText?: string): string;
+  /** 暂无导出记录 */
+  (key: 'no_export_record_yet', fallbackText?: string): string;
+  /** 未能找到相关结果 */
+  (key: 'no_results_found', fallbackText?: string): string;
+  /** 暂无实验 */
+  (key: 'no_experiment_yet', fallbackText?: string): string;
+  /** 总条数 */
+  (key: 'total_number', fallbackText?: string): string;
+  /** 成功 */
+  (key: 'status_success', fallbackText?: string): string;
+  /** 失败 */
+  (key: 'status_failed', fallbackText?: string): string;
+  /** 中止 */
+  (key: 'status_abort', fallbackText?: string): string;
+  /** 执行中 */
+  (key: 'status_running', fallbackText?: string): string;
+  /** 待执行 */
+  (key: 'status_pending', fallbackText?: string): string;
+  /** 请选择分类 */
+  (key: 'please_select_a_category', fallbackText?: string): string;
+  /** 请输入数值 */
+  (key: 'please_enter_a_value', fallbackText?: string): string;
+  /** 未找到匹配的选项 */
+  (key: 'no_matching_options_found', fallbackText?: string): string;
+  /** 新建 Prompt */
+  (key: 'create_new_prompt', fallbackText?: string): string;
+  /** 暂无数据 */
+  (key: 'no_data_yet', fallbackText?: string): string;
+  /** 正在加载字段映射 */
+  (key: 'loading_data_field_mapping', fallbackText?: string): string;
+  /** 请输入整数 */
+  (key: 'please_enter_integer', fallbackText?: string): string;
+  /** 上传失败 */
+  (key: 'upload_fail', fallbackText?: string): string;
+  /** 请至少添加一个图片链接 */
+  (key: 'please_add_at_least_one_image_link', fallbackText?: string): string;
+  /** 上传失败，请重试 */
+  (key: 'upload_failed_please_try_again', fallbackText?: string): string;
+  /** 图片 */
+  (key: 'image', fallbackText?: string): string;
+  /** 请输入图片链接 */
+  (key: 'please_enter_the_picture_link', fallbackText?: string): string;
+  /** 请输入有效的URL */
+  (key: 'please_enter_a_valid_url', fallbackText?: string): string;
+  /** 图片地址 */
+  (key: 'image_address', fallbackText?: string): string;
+  /** 图片预览 */
+  (key: 'image_preview', fallbackText?: string): string;
+  /** 上传中 */
+  (key: 'uploading', fallbackText?: string): string;
+  /** 导入已通过图片 */
+  (key: 'import_approved_images', fallbackText?: string): string;
+  /** 上传 */
+  (key: 'upload', fallbackText?: string): string;
+  /** 正在上传图片 */
+  (key: 'uploading_pictures', fallbackText?: string): string;
+  /** 添加图片链接 */
+  (key: 'add_image_link', fallbackText?: string): string;
+  /** 请输入名称 */
+  (key: 'please_input_name', fallbackText?: string): string;
+  /** 请输入描述 */
+  (key: 'please_input_description', fallbackText?: string): string;
+  /** 请输入版本号 */
+  (key: 'please_input_version_number', fallbackText?: string): string;
+  /** 通过 Function Call 从 LLM 中提取数据，固定评估器输出格式为“得分-原因”。 */
+  (key: 'evaluator_output_tips', fallbackText?: string): string;
+  /** 当前实验未完成,不支持导出和下载 */
+  (key: 'export_not_supported_incomplete_experiment', fallbackText?: string): string;
+  /** 导出文件最多能保存100天,过期后需要重新导出再下载。 */
+  (key: 'export_files_save_limit_100_days', fallbackText?: string): string;
+  /** 导出进行中,请等导出结束后再尝试 */
+  (key: 'export_in_progress_wait', fallbackText?: string): string;
+  /** 导出失败,请重新导出 */
+  (key: 'export_failed_retry', fallbackText?: string): string;
+  /** 导出文件最多存储100天,已过期 */
+  (key: 'export_file_expired_100_days_limit', fallbackText?: string): string;
+  /** 导出任务 ID */
+  (key: 'export_task_id', fallbackText?: string): string;
+  /** 导出状态 */
+  (key: 'export_status', fallbackText?: string): string;
+  /** 导出格式 */
+  (key: 'export_format', fallbackText?: string): string;
+  /** 批量选择 */
+  (key: 'bulk_select', fallbackText?: string): string;
+  /** 张三 */
+  (key: 'user_zhangsan', fallbackText?: string): string;
+  /** 李四 */
+  (key: 'user_lisi', fallbackText?: string): string;
+  /** 王五 */
+  (key: 'user_wangwu', fallbackText?: string): string;
+  /** 请选择 Prompt Key */
+  (key: 'please_select_prompt_key', fallbackText?: string): string;
+  /** 百科达人 */
+  (key: 'encyclopedia_expert', fallbackText?: string): string;
+  /** 笑话大王 */
+  (key: 'joke_king', fallbackText?: string): string;
+  /** 查看并下载文件 */
+  (key: 'view_and_download_files', fallbackText?: string): string;
+  /** CSV格式 */
+  (key: 'csv_format', fallbackText?: string): string;
+  /** 请配置字段映射 */
+  (key: 'please_configure_field_mapping', fallbackText?: string): string;
+  /** 对比{placeholder1}个实验 */
+  (
+    key: 'compare_placeholder1_experiments',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 评估器 {placeholder1} */
+  (
+    key: 'evaluator_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 跳过评测对象执行配置,适用于评测集已包含agent实际输出的评测场景。 */
+  (key: 'skip_eval_object_execution_config', fallbackText?: string): string;
+  /** 选择跳过评估器配置,实验仅获agent实际输出,适用于人工标注的评测场景。 */
+  (key: 'skip_evaluator_config_agent_output_only', fallbackText?: string): string;
+  /** 总条数 {placeholder1}（成功 {success_turn_cnt} */
+  (
+    key: 'total_count_placeholder1_success_count',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+      /** string */ success_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 失败 {fail_turn_cnt} */
+  (
+    key: 'failure_count_fail_turn_cnt',
+    options?: {
+      /** string */ fail_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 中止 {terminated_turn_cnt} */
+  (
+    key: 'terminated_count_terminated_turn_cnt',
+    options?: {
+      /** string */ terminated_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 执行中 {processing_turn_cnt} */
+  (
+    key: 'processing_count_processing_turn_cnt',
+    options?: {
+      /** string */ processing_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 待执行 {pending_turn_cnt}） */
+  (
+    key: 'pending_count_pending_turn_cnt',
+    options?: {
+      /** string */ pending_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** { }               吗？ */
+  (key: 'confirm_placeholder_question', fallbackText?: string): string;
+  /** - 评测集 */
+  (key: 'minus_evaluation_dataset', fallbackText?: string): string;
+  /** 对比实验详情 */
+  (key: 'comparison_experiment_details', fallbackText?: string): string;
+  /** 最大并发执行条数 */
+  (key: 'max_concurrent_execution_count', fallbackText?: string): string;
+  /** 实验支持并发执行评测集中的条目,但受限于评测对象的并发度和调用评估器的模型 TPM 限制。这里设置理想的最大执行条数。 */
+  (key: 'experiment_supports_concurrent_eval_limitations', fallbackText?: string): string;
+  /** 最大并发执行条数最多支持 {EVAL_EXPERIMENT_CONCUR_COUNT_MAX} 条。 */
+  (
+    key: 'max_concurrent_execution_count_limit',
+    options?: {
+      /** string */ EVAL_EXPERIMENT_CONCUR_COUNT_MAX: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 上一步 */
+  (key: 'dataset_previous_step', fallbackText?: string): string;
+  /** 此步骤已选择跳过 */
+  (key: 'this_step_skipped', fallbackText?: string): string;
+  /** 此步骤已选择跳过。 */
+  (key: 'this_step_skipped_period', fallbackText?: string): string;
+  /** 人工标注 */
+  (key: 'data_engine_manual_annotation', fallbackText?: string): string;
+  /** 删除此标签 */
+  (key: 'delete_this_tag', fallbackText?: string): string;
+  /** 删除此标签将影响已打标的内容 */
+  (key: 'deleting_tag_affects_labeled_content', fallbackText?: string): string;
+  /** 请输入关键词检索，最长{MAX_SEARCH_LENGTH}字符 */
+  (
+    key: 'enter_keyword_search_max_length',
+    options?: {
+      /** string */ MAX_SEARCH_LENGTH: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 关键词检索最长{MAX_SEARCH_LENGTH}字符,超出部分已被自动截断 */
+  (
+    key: 'keyword_search_length_limited_truncated',
+    options?: {
+      /** string */ MAX_SEARCH_LENGTH: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 普通模式 */
+  (key: 'fornax_prompt_compare_normal', fallbackText?: string): string;
+  /** 快速标注模式 */
+  (key: 'quick_annotation_mode', fallbackText?: string): string;
+  /** 稍等几秒后 */
+  (key: 'wait_a_few_seconds', fallbackText?: string): string;
+  /** 页面查看 */
+  (key: 'page_view', fallbackText?: string): string;
+  /** 是否人工校准得分 */
+  (key: 'manual_score_calibration', fallbackText?: string): string;
+  /** 请输入,最长{limitLength}字符 */
+  (
+    key: 'please_enter_max_limit_length',
+    options?: {
+      /** string */ limitLength: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 输入内容最长{limitLength}字符,超出部分已被自动截断 */
+  (
+    key: 'input_content_limited_truncated',
+    options?: {
+      /** string */ limitLength: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 请输入{limitLength}位ID */
+  (
+    key: 'please_enter_id_limit_length',
+    options?: {
+      /** string */ limitLength: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** ID不合法,必须是{limitLength}位 */
+  (
+    key: 'id_invalid_must_be_limit_length',
+    options?: {
+      /** string */ limitLength: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 查看详情： */
+  (key: 'loop_view_details', fallbackText?: string): string;
+  /** 上一条 */
+  (key: 'data_engine_previous', fallbackText?: string): string;
+  /** 下一条 */
+  (key: 'data_engine_next', fallbackText?: string): string;
+  /** 评测集数据 */
+  (key: 'loop_evaluation_dataset', fallbackText?: string): string;
+  /** 评估器得分 */
+  (key: 'loop_evaluator_score', fallbackText?: string): string;
+  /** 评估器聚合得分 */
+  (key: 'evaluator_aggregate_score', fallbackText?: string): string;
+  /** 标注聚合得分 */
+  (key: 'annotation_aggregate_score', fallbackText?: string): string;
+  /** 完成该标签的所有数据标注后,再刷新重试 */
+  (key: 'refresh_after_all_tag_annotations_completed', fallbackText?: string): string;
+  /** 其他 */
+  (key: 'fornax_analytics_subtitle_others', fallbackText?: string): string;
+  /** {placeholder0}明细 */
+  (
+    key: 'placeholder0_details',
+    options?: {
+      /** string */ placeholder0: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 条 ({placeholder1}) */
+  (
+    key: 'items_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 标签列表 */
+  (key: 'tag_list', fallbackText?: string): string;
+  /** 请输入标签名称搜索 */
+  (key: 'please_enter_tag_name_search', fallbackText?: string): string;
+  /** 添加标签列至数据明细 */
+  (key: 'add_tag_column_to_data_details', fallbackText?: string): string;
+  /** 已添加标签 {placeholder1} */
+  (
+    key: 'tag_added_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 删除标签 */
+  (key: 'delete_tag', fallbackText?: string): string;
+  /** 更新人： */
+  (key: 'updated_by', fallbackText?: string): string;
+  /** 人工标注管理 */
+  (key: 'manual_annotation_management', fallbackText?: string): string;
+  /** 新建标签 */
+  (key: 'data_engine_create_new_tag', fallbackText?: string): string;
+  /** 添加 */
+  (key: 'space_member_role_type_add_btn', fallbackText?: string): string;
+  /** 该分类标签选项已禁用，若修改将不再展示 */
+  (key: 'tag_disabled_no_modification', fallbackText?: string): string;
+  /** User Prompt 不可为空 */
+  (key: 'user_prompt_required', fallbackText?: string): string;
+  /** 所选模型不支持多模态，请调整变量类型或更换模型 */
+  (key: 'model_not_support_multimodal', fallbackText?: string): string;
+  /** 操作人 */
+  (key: 'application_operator', fallbackText?: string): string;
+  /** 完成时间 */
+  (key: 'data_annotate_end_time', fallbackText?: string): string;
+  /** 覆盖 Prompt 模型配置 */
+  (key: 'dataset_ai_annotation_prompt_config_override', fallbackText?: string): string;
+  /** 复制成功 */
+  (key: 'prompt_example_copy_success', fallbackText?: string): string;
+  /** 复制失败 */
+  (key: 'prompt_example_copy_failed', fallbackText?: string): string;
+  /** 复制 {idString} */
+  (
+    key: 'cozeloop_open_evaluate_copy_with_id',
+    options?: {
+      /** string */ idString: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** Coze 智能体 */
+  (key: 'cozeloop_open_evaluate_coze_intelligent_agent', fallbackText?: string): string;
+  /** 数据嵌套层数超限 */
+  (key: 'data_engine_data_nesting_exceeds_limit', fallbackText?: string): string;
+  /** 数据转换失败 */
+  (key: 'data_engine_data_conversion_failed', fallbackText?: string): string;
+  /** 图片数量超限 */
+  (key: 'data_engine_exceed_max_image_count', fallbackText?: string): string;
+  /** 图片大小超限 */
+  (key: 'data_engine_exceed_max_image_size', fallbackText?: string): string;
+  /** 图片获取失败 */
+  (key: 'data_engine_get_image_failed', fallbackText?: string): string;
+  /** 文件扩展名不合法 */
+  (key: 'data_engine_illegal_extension', fallbackText?: string): string;
+  /** 上传图片失败 */
+  (key: 'cozeloop_open_evaluate_image_upload_failed', fallbackText?: string): string;
+  /** 世界上最大的动物是什么 */
+  (key: 'evaluate_biggest_animal_world', fallbackText?: string): string;
+  /** 蓝鲸 */
+  (key: 'evaluate_blue_whale', fallbackText?: string): string;
+  /** 告诉我一些这个动物的生活习性 */
+  (key: 'evaluate_living_habits_animal', fallbackText?: string): string;
+  /** 吃鱼 */
+  (key: 'data_engine_eat_fish', fallbackText?: string): string;
+  /** 实验对比最大数量不能超过 {MAX_EXPERIMENT_CONTRAST_COUNT} 个，请重新选择。 */
+  (
+    key: 'cozeloop_open_evaluate_max_experiment_contrast_limit',
+    options?: {
+      /** string */ MAX_EXPERIMENT_CONTRAST_COUNT: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** JSON Schema格式错误 */
+  (key: 'cozeloop_open_evaluate_json_schema_format_error', fallbackText?: string): string;
+  /** JSON Schema数据类型与列的类型不一致，请修改 */
+  (key: 'cozeloop_open_evaluate_json_schema_type_mismatch', fallbackText?: string): string;
+  /** JSON 格式错误 */
+  (key: 'cozeloop_open_evaluate_json_format_error', fallbackText?: string): string;
+  /** 仅支持英文字母、数字、中文开头 */
+  (key: 'data_engine_support_letter_number_chinese_start', fallbackText?: string): string;
+  /** 仅支持英文字母、数字、中文，“-”，“_”，“.” */
+  (key: 'data_engine_support_letter_number_chinese_special_char', fallbackText?: string): string;
+  /** 仅支持英文、数字、下划线，且需要以字母开头 */
+  (key: 'data_engine_support_letter_number_underscore_start_letter', fallbackText?: string): string;
+  /** 文件读取失败 */
+  (key: 'fornax_knowledge_file_read_fail', fallbackText?: string): string;
+  /** 文件格式错误 */
+  (key: 'data_engine_file_format_error', fallbackText?: string): string;
+  /** 单次最多添加10条数据项 */
+  (key: 'cozeloop_open_evaluate_max_10_data_items_per_add', fallbackText?: string): string;
+  /** 成功添加{successCount}条数据 */
+  (
+    key: 'cozeloop_open_evaluate_successfully_added_data_count',
+    options?: {
+      /** string */ successCount: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 数据项{placeholder1} */
+  (
+    key: 'cozeloop_open_evaluate_data_item_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 添加数据             {ExpandNode} */
+  (
+    key: 'cozeloop_open_evaluate_add_data_expandnode',
+    options?: {
+      /** string */ ExpandNode: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 列 {placeholder1} */
+  (
+    key: 'data_engine_column_placeholder',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 确认删除 */
+  (key: 'task_delete_confirm_btn', fallbackText?: string): string;
+  /** { }                 列，此操作不可逆 */
+  (key: 'cozeloop_open_evaluate_column_braces_irreversible', fallbackText?: string): string;
+  /** 确认 */
+  (key: 'global_btn_confirm', fallbackText?: string): string;
+  /** 取消 */
+  (key: 'global_btn_cancel', fallbackText?: string): string;
+  /** 导入数据列 */
+  (key: 'data_engine_import_data_columns', fallbackText?: string): string;
+  /** {placeholder0} 模板 */
+  (
+    key: 'cozeloop_open_evaluate_template_placeholder0',
+    options?: {
+      /** string */ placeholder0: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 支持文件格式：csv、zip、xlsx、xls，文件最大200MB,                           仅支持导入一个文件 */
+  (key: 'cozeloop_open_evaluate_supported_file_formats_limit', fallbackText?: string): string;
+  /** 下载模板 */
+  (key: 'evaluate_dataset_download_template', fallbackText?: string): string;
+  /** 适用于在同个单元格中管理图、文各类模态混排的数据。 */
+  (key: 'cozeloop_open_evaluate_multi_modal_data_in_cell_usage', fallbackText?: string): string;
+  /** 其Array<Object>数据样例如下，常见于多模态场景的Model span中。 */
+  (key: 'cozeloop_open_evaluate_array_object_data_sample_multimodal', fallbackText?: string): string;
+  /** 点击自动补全该数据结构内的所有字段 */
+  (key: 'cozeloop_open_evaluate_click_autocomplete_all_fields', fallbackText?: string): string;
+  /** 自动补全字段将覆盖原有内容 */
+  (key: 'cozeloop_open_evaluate_autocomplete_overwrites_original', fallbackText?: string): string;
+  /** 自动补全数据结构内所有字段将覆盖原有内容。确认覆盖吗？ */
+  (key: 'cozeloop_open_evaluate_autocomplete_confirm_overwrite_all_fields', fallbackText?: string): string;
+  /** 请输入大于等于{minimum}的数字 */
+  (
+    key: 'cozeloop_open_evaluate_enter_number_greater_equal_minimum',
+    options?: {
+      /** string */ minimum: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 请输入小于等于{maximum}的数字 */
+  (
+    key: 'cozeloop_open_evaluate_enter_number_less_equal_maximum',
+    options?: {
+      /** string */ maximum: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 仅支持精确到小数点后{placeholder1}位 */
+  (
+    key: 'data_engine_decimal_places_support',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** {instancePath}数据类型不符合字段定义 */
+  (
+    key: 'cozeloop_open_evaluate_data_type_mismatch_instancepath',
+    options?: {
+      /** string */ instancePath: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 缺少必填字段"{placeholder1}{placeholder2}" */
+  (
+    key: 'cozeloop_open_evaluate_missing_required_field',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+      /** string */ placeholder2: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 存在冗余字段{placeholder1} */
+  (
+    key: 'cozeloop_open_evaluate_redundant_field_exists',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 确定删除评测集 */
+  (key: 'cozeloop_open_evaluate_confirm_delete_evaluation_set', fallbackText?: string): string;
+  /** 吗？此修改将不可逆。 */
+  (key: 'data_engine_this_change_irreversible', fallbackText?: string): string;
+  /** 删除 */
+  (key: 'space_member_role_type_del_btn', fallbackText?: string): string;
+  /** {placeholder1} 分 */
+  (
+    key: 'cozeloop_open_evaluate_score_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 条， 失败 */
+  (key: 'cozeloop_open_evaluate_items_failed', fallbackText?: string): string;
+  /** 条 */
+  (key: 'fornax_tiao', fallbackText?: string): string;
+  /** 存在以下原因导致执行失败，请自行纠正后重试 */
+  (key: 'cozeloop_open_evaluate_execution_failed_reasons', fallbackText?: string): string;
+  /** （{placeholder1}条） */
+  (
+    key: 'cozeloop_open_evaluate_placeholder1_items_in_brackets',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 该字段必填 */
+  (key: 'evaluate_dataset_input_required', fallbackText?: string): string;
+  /** 请输入0～1区间内的数字 */
+  (key: 'cozeloop_open_evaluate_enter_number_between_0_1', fallbackText?: string): string;
+  /** 最多保留小数点后四位 */
+  (key: 'cozeloop_open_evaluate_max_four_decimal_places', fallbackText?: string): string;
+  /** 更新 */
+  (key: 'cozeloop_open_evaluate_update', fallbackText?: string): string;
+  /** 得分 */
+  (key: 'evaluate_task_score', fallbackText?: string): string;
+  /** 已选 {placeholder1} 条数据 */
+  (
+    key: 'cozeloop_open_evaluate_selected_data_count',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 评测对象 */
+  (key: 'evaluate_case_create_eval_object', fallbackText?: string): string;
+  /** 新节点{placeholder1} */
+  (
+    key: 'cozeloop_open_evaluate_new_node_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 导出记录 */
+  (key: 'evaluate_export_records', fallbackText?: string): string;
+  /** 导出中，查看 */
+  (key: 'cozeloop_open_evaluate_export_in_progress_view', fallbackText?: string): string;
+  /** 导出失败 */
+  (key: 'evaluate_export_failed', fallbackText?: string): string;
+  /** 下载文件 */
+  (key: 'cozeloop_open_evaluate_download_file', fallbackText?: string): string;
+  /** 导出中 */
+  (key: 'model_exporting', fallbackText?: string): string;
+  /** 实验明细导出中 */
+  (key: 'cozeloop_open_evaluate_experiment_details_exporting', fallbackText?: string): string;
+  /** 实验明细导出失败 */
+  (key: 'cozeloop_open_evaluate_experiment_details_export_failed', fallbackText?: string): string;
+  /** 实验明细导出成功 */
+  (key: 'cozeloop_open_evaluate_experiment_details_export_success', fallbackText?: string): string;
+  /** 操作 */
+  (key: 'prompt_prompt_operate', fallbackText?: string): string;
+  /** 导出 */
+  (key: 'evaluate_export', fallbackText?: string): string;
+  /** 仅支持导出终态(成功或失败)的实验 */
+  (key: 'cozeloop_open_evaluate_export_only_final_state_experiments', fallbackText?: string): string;
+  /** 动态参数 */
+  (key: 'cozeloop_open_evaluate_dynamic_parameters', fallbackText?: string): string;
+  /** 确定要删除 */
+  (key: 'cozeloop_open_evaluate_confirm_to_delete', fallbackText?: string): string;
+  /** 复制 */
+  (key: 'evaluate_copy', fallbackText?: string): string;
+  /** 配置，直接或修改配置后发起实验。 */
+  (key: 'cozeloop_open_evaluate_config_and_launch_experiment', fallbackText?: string): string;
+  /** 导出实验明细 */
+  (key: 'cozeloop_open_evaluate_export_experiment_details', fallbackText?: string): string;
+  /** 导出格式 */
+  (key: 'evaluate_export_format', fallbackText?: string): string;
+  /** 请选择导出格式 */
+  (key: 'cozeloop_open_evaluate_please_select_export_format', fallbackText?: string): string;
+  /** 请选择 Prompt key 和版本号后再查看 */
+  (key: 'cozeloop_open_evaluate_select_prompt_key_version_before_view', fallbackText?: string): string;
+  /** 数据结构 */
+  (key: 'cozeloop_open_evaluate_data_structure', fallbackText?: string): string;
+  /** 预置Arrary<Object>数据类型，Object数据结构如下。适用于管理图、文等各类模态混排的数据。 */
+  (key: 'cozeloop_open_evaluate_preset_array_object_data_type', fallbackText?: string): string;
+  /** (共有{currentColumnNum}/50列) */
+  (
+    key: 'data_engine_column_count_info',
+    options?: {
+      /** string */ currentColumnNum: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 编辑列： */
+  (key: 'cozeloop_open_evaluate_edit_column', fallbackText?: string): string;
+  /** 确认切换？ */
+  (key: 'cozeloop_open_evaluate_confirm_switch', fallbackText?: string): string;
+  /** 开启后，Object数据类型支持配置校验规则，用于控制数据导入时，如果存在Object数据结构定义之外的字段，该数据是否准入 */
+  (key: 'cozeloop_open_evaluate_enable_object_type_validation_rules', fallbackText?: string): string;
+  /** 是否关闭 冗余字段校验 配置项 */
+  (key: 'cozeloop_open_evaluate_confirm_disable_redundant_field_validation', fallbackText?: string): string;
+  /** 关闭后 冗余字段校验 配置将采用默认配置“否”，确定关闭吗？ */
+  (key: 'cozeloop_open_evaluate_disable_redundant_validation_default_no', fallbackText?: string): string;
+  /** 导入数据时，在完成校验后对数据的加工操作。 */
+  (key: 'cozeloop_open_evaluate_data_processing_after_validation_import', fallbackText?: string): string;
+  /** 导入数据时，是否移除数据结构定义之外字段 */
+  (key: 'cozeloop_open_evaluate_remove_fields_outside_structure_on_import', fallbackText?: string): string;
+  /** 描述：{placeholder1} */
+  (
+    key: 'description_{placeholder1}',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 更新时间：{placeholder1} */
+  (
+    key: 'cozeloop_open_evaluate_update_time_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 创建时间：{placeholder1} */
+  (
+    key: 'cozeloop_open_evaluate_creation_time_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 创建人： */
+  (key: 'evaluate_dataset_info_creator', fallbackText?: string): string;
+  /** 新版本必须大于当前版本：{placeholder1} */
+  (
+    key: 'data_engine_new_version_greater_than_current',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 更新时间 */
+  (key: 'prompt_prompt_update_time', fallbackText?: string): string;
+  /** 创建时间 */
+  (key: 'prompt_prompt_create_time', fallbackText?: string): string;
+  /** 编辑 */
+  (key: 'space_basic_edit_btn', fallbackText?: string): string;
+  /** 点击右上角添加数据进行添加 */
+  (key: 'cozeloop_open_evaluate_click_top_right_to_add_data', fallbackText?: string): string;
+  /** 确认删除已选的{placeholder1}数据项？此操作不可逆 */
+  (
+    key: 'cozeloop_open_evaluate_confirm_delete_selected_data_irreversible',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 条数据 */
+  (key: 'data_engine_items', fallbackText?: string): string;
+  /** 图片大小不能超过20MB */
+  (key: 'cozeloop_open_evaluate_image_size_limit_20mb', fallbackText?: string): string;
+  /** 点击右上角导出按钮进行导出 */
+  (key: 'cozeloop_open_evaluate_click_export_button_top_right', fallbackText?: string): string;
+  /** 总条数 {placeholder1} */
+  (
+    key: 'cozeloop_open_evaluate_total_count_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 成功 {success_turn_cnt} */
+  (
+    key: 'cozeloop_open_evaluate_success_count',
+    options?: {
+      /** string */ success_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 失败 {fail_turn_cnt} */
+  (
+    key: 'evaluate_failure_count_fail_turn_cnt',
+    options?: {
+      /** string */ fail_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 中止 {terminated_turn_cnt} */
+  (
+    key: 'evaluate_terminated_count_terminated_turn_cnt',
+    options?: {
+      /** string */ terminated_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 执行中 {processing_turn_cnt} */
+  (
+    key: 'evaluate_processing_count_processing_turn_cnt',
+    options?: {
+      /** string */ processing_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 待执行 {pending_turn_cnt} */
+  (
+    key: 'cozeloop_open_evaluate_pending_count',
+    options?: {
+      /** string */ pending_turn_cnt: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 所选字段数据类型不一致，请重新选择 */
+  (key: 'cozeloop_open_evaluate_selected_field_type_inconsistent', fallbackText?: string): string;
+  /** 该标签选项已禁用，若修改将不再允许被选中 */
+  (key: 'cozeloop_open_evaluate_tag_option_disabled_no_longer_selectable', fallbackText?: string): string;
+  /** 选择上一步配置的评测集作为评测对象，适用于该评测集已包含agent输出的场景。 */
+  (key: 'cozeloop_open_evaluate_select_previous_eval_set_as_target', fallbackText?: string): string;
+  /** 请输入integer */
+  (key: 'cozeloop_open_evaluate_enter_integer', fallbackText?: string): string;
+  /** 请输入文本内容 */
+  (key: 'cozeloop_open_evaluate_enter_text_content', fallbackText?: string): string;
+  /** 图片{placeholder1} */
+  (
+    key: 'cozeloop_open_evaluate_image_placeholder1',
+    options?: {
+      /** string */ placeholder1: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 上传中... */
+  (key: 'cozeloop_open_evaluate_uploading', fallbackText?: string): string;
+  /** 正在上传图片... */
+  (key: 'cozeloop_open_evaluate_uploading_image', fallbackText?: string): string;
+  /** 请配置字段映射 */
+  (key: 'evaluate_please_configure_field_mapping', fallbackText?: string): string;
+  /** 参数注入 */
+  (key: 'evaluate_parameter_injection', fallbackText?: string): string;
+  /** 请求评测对象时，可注入填写的参数，来拿到评测对象的输出结果。如请求环境的泳道、测试账号的 UID 等。 */
+  (key: 'cozeloop_open_evaluate_inject_parameters_for_evaluation_request', fallbackText?: string): string;
   /** 图片不可访问 */
   (key: 'analytics_image_error', fallbackText?: string): string;
   /** Arguments */
@@ -1715,6 +2777,54 @@ interface I18nTranslateFn {
   (key: 'task_filter_not_in', fallbackText?: string): string;
   /** 不为空 */
   (key: 'task_filter_not_null', fallbackText?: string): string;
+  /** 点赞 */
+  (key: 'task_filter_thumbs_up', fallbackText?: string): string;
+  /** 点踩 */
+  (key: 'task_filter_thumbs_down', fallbackText?: string): string;
+  /** 获取元数据信息失败：{msg} */
+  (
+    key: 'analytics_fetch_meta_error',
+    options?: {
+      /** string */ msg: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 不允许为空 */
+  (key: 'validation_not_allowed_to_be_empty', fallbackText?: string): string;
+  /** 名称长度不能超过{num}个字符 */
+  (
+    key: 'validation_name_length_limit',
+    options?: {
+      /** string */ num: ReactNode;
+    },
+    fallbackText?: string,
+  ): string;
+  /** 视图名称已存在 */
+  (key: 'validation_view_name_exists', fallbackText?: string): string;
+  /** 全部时间 */
+  (key: 'time_all_time', fallbackText?: string): string;
+  /** Feedback-自动评测 */
+  (key: 'feedback_auto_evaluate', fallbackText?: string): string;
+  /** Feedback-人工标注 */
+  (key: 'feedback_manual_annotation', fallbackText?: string): string;
+  /** Feedback-Coze 对话 */
+  (key: 'feedback_coze_conversation', fallbackText?: string): string;
+  /** 自动评测 */
+  (key: 'auto_evaluate', fallbackText?: string): string;
+  /** 人工标注 */
+  (key: 'manual_annotation', fallbackText?: string): string;
+  /** Coze 对话 */
+  (key: 'coze_conversation', fallbackText?: string): string;
+  /** 反馈结果 */
+  (key: 'feedback_results', fallbackText?: string): string;
+  /** 来源 */
+  (key: 'source', fallbackText?: string): string;
+  /** 更新人 */
+  (key: 'updater', fallbackText?: string): string;
+  /** 暂无 Feedback */
+  (key: 'no_feedback', fallbackText?: string): string;
+  /** 点击右上方标注数据按钮进行创建 */
+  (key: 'click_annotation_button_to_create', fallbackText?: string): string;
   /** 标签 */
   (key: 'tag', fallbackText?: string): string;
   /** 标签管理 */
@@ -1735,8 +2845,6 @@ interface I18nTranslateFn {
   (key: 'tag_option_one', fallbackText?: string): string;
   /** 选项二 */
   (key: 'tag_option_two', fallbackText?: string): string;
-  /** 标签列表 */
-  (key: 'tag_list', fallbackText?: string): string;
   /** 共 {placeholder1} 个标签 */
   (
     key: 'tag_number_with_placeholder',
@@ -1780,8 +2888,6 @@ interface I18nTranslateFn {
   ): string;
   /** 修改标签后，存量已打标数据将会自动同步更新。 */
   (key: 'tag_edit_sync_warning', fallbackText?: string): string;
-  /** 该分类标签选项已禁用，若修改将不再展示 */
-  (key: 'tag_disabled_no_modification', fallbackText?: string): string;
   /** 标签名称必须为 1～50 字符长度 */
   (key: 'tag_name_length_limit', fallbackText?: string): string;
   /** 标签名称仅支持输入中文、英文、数字和下划线 */
@@ -1834,8 +2940,6 @@ interface I18nTranslateFn {
   (key: 'enter_tag_type', fallbackText?: string): string;
   /** 请输入子标签名称 */
   (key: 'enter_subtag_name', fallbackText?: string): string;
-  /** 请输入数值 */
-  (key: 'enter_number', fallbackText?: string): string;
   /** 请输入文本 */
   (key: 'enter_text', fallbackText?: string): string;
   /** 请输入创建人 */