@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/components/agent-helper/prompt-input/index.tsx

@@ -1,640 +1,646 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-import CodeMirror from 'codemirror';
-import { cn } from '../../../lib/utils';
-import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
-import { FieldSelectPopover } from '../field-select';
-import type { IField, ISubformField } from '@baishuyun/types';
-
-// ── Create a DOM node for the field tag (used inside CodeMirror) ────
-
-function createFieldTagDom(label: string): HTMLSpanElement {
-  const wrapper = document.createElement('span');
-  wrapper.className = 'prompt-field-tag';
-
-  const iconSpan = document.createElement('span');
-  iconSpan.className = 'prompt-field-tag-icon';
-  iconSpan.innerHTML =
-    '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="2" stroke="#6F829E" stroke-width="1.2"/><path d="M5 5.5H9M5 7.5H8" stroke="#6F829E" stroke-width="1.2" stroke-linecap="round"/></svg>';
-
-  const textSpan = document.createElement('span');
-  textSpan.textContent = label;
-
-  wrapper.appendChild(iconSpan);
-  wrapper.appendChild(textSpan);
-  return wrapper;
-}
-
-// ── CodeMirror Helpers ──────────────────────────────────────────────
-
-function resolveFieldWidgetInfo(
-  fields: IField[],
-  key: string,
-): { widgetName: string; label: string } | undefined {
-  const dotIndex = key.indexOf('.');
-  if (dotIndex > 0) {
-    const parentName = key.substring(0, dotIndex);
-    const childName = key.substring(dotIndex + 1);
-    const parent = fields.find((f) => f.widget?.widgetName === parentName);
-    if (parent?.widget?.items) {
-      const child = parent.widget.items.find(
-        (item): item is ISubformField =>
-          'widget' in item && item.widget?.widgetName === childName,
-      );
-      if (child) {
-        return { widgetName: key, label: child.label };
-      }
-    }
-  } else {
-    const field = fields.find((f) => f.widget?.widgetName === key);
-    if (field) {
-      return { widgetName: key, label: field.label };
-    }
-  }
-  return undefined;
-}
-
-function addFieldToCM(
-  cm: CodeMirror.Editor,
-  widgetName: string,
-  displayLabel: string,
-): void {
-  const from = cm.getCursor('from');
-
-  cm.replaceSelection('${' + widgetName + '}');
-  const to = cm.getCursor();
-
-  const tagNode = createFieldTagDom(displayLabel);
-  tagNode.setAttribute('data-field-key', widgetName);
-
-  cm.markText(from, to, {
-    handleMouseEvents: true,
-    atomic: true,
-    replacedWith: tagNode,
-  });
-}
-
-function getTemplateFromCM(cm: CodeMirror.Editor): string {
-  const wrapper = cm.getWrapperElement();
-  const lineElements = wrapper.querySelectorAll('.CodeMirror-line');
-  const lines: string[] = [];
-
-  lineElements.forEach((lineEl) => {
-    let lineText = '';
-    walkLineNode(lineEl);
-    lines.push(lineText);
-
-    function walkLineNode(node: Node): void {
-      if (node instanceof HTMLElement) {
-        const key = node.getAttribute('data-field-key');
-        if (key && node.classList.contains('prompt-field-tag')) {
-          lineText += '${' + key + '}';
-          return;
-        }
-      }
-      const children = Array.from(node.childNodes);
-      for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (child.nodeType === Node.TEXT_NODE) {
-          lineText += child.textContent || '';
-        } else {
-          walkLineNode(child);
-        }
-      }
-    }
-  });
-
-  return lines.join('\n').trim();
-}
-
-function setTemplateToCM(
-  cm: CodeMirror.Editor,
-  template: string,
-  fields: IField[],
-): void {
-  cm.setValue('');
-  if (!template) {
-    cm.refresh();
-    return;
-  }
-
-  const normalized = template.trim().replace(/\s{2,}/g, ' ');
-  const parts = normalized.split(/(\$\{[^${}]*\})/g);
-
-  for (const part of parts) {
-    const match = part.match(/^\$\{([^${}]*)\}$/);
-    if (match) {
-      const info = resolveFieldWidgetInfo(fields, match[1]);
-      if (info) {
-        addFieldToCM(cm, info.widgetName, info.label);
-      } else {
-        cm.replaceSelection(part);
-      }
-    } else {
-      cm.replaceSelection(part);
-    }
-  }
-
-  cm.refresh();
-}
-
-// ── PromptInput Component ──────────────────────────────────────────
-
-export interface PromptInputProps {
-  fields: IField[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (template: string) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export const PromptInput = ({
-  fields,
-  value,
-  defaultValue,
-  onChange,
-  placeholder = '示例：放配置时候的提示词内容进行引导说明',
-  className,
-  disabled = false,
-}: PromptInputProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const cmRef = useRef<CodeMirror.Editor | null>(null);
-  const [open, setOpen] = useState(false);
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-  const insertBtnRef = useRef<HTMLButtonElement | null>(null);
-  const isInternalUpdateRef = useRef(false);
-
-  // Create field key cache ref to avoid stale closure in CM callbacks
-  const fieldsRef = useRef(fields);
-  fieldsRef.current = fields;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-
-  // Initialize CodeMirror
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const cm = CodeMirror(container, {
-      mode: undefined,
-      lineWrapping: true,
-      lineNumbers: false,
-      smartIndent: false,
-      autofocus: false,
-      extraKeys: {
-        Enter: (instance: CodeMirror.Editor) => {
-          // Allow regular newlines
-          instance.replaceSelection('\n');
-        },
-      },
-    } as CodeMirror.EditorConfiguration);
-
-    cmRef.current = cm;
-
-    const initialValue = value ?? defaultValue ?? '';
-    if (initialValue) {
-      isInternalUpdateRef.current = true;
-      setTemplateToCM(cm, initialValue, fieldsRef.current);
-      isInternalUpdateRef.current = false;
-    }
-
-    cm.on('changes', () => {
-      if (isInternalUpdateRef.current) return;
-      const template = getTemplateFromCM(cm);
-      onChangeRef.current?.(template);
-    });
-
-    // Toggle placeholder visibility
-    const wrapper = cm.getWrapperElement();
-    const updatePlaceholder = () => {
-      const text = getTemplateFromCM(cm);
-      const isEmpty = text === '';
-      if (isEmpty) {
-        wrapper.setAttribute('data-placeholder', placeholder);
-        wrapper.classList.add('cm-empty');
-      } else {
-        wrapper.removeAttribute('data-placeholder');
-        wrapper.classList.remove('cm-empty');
-      }
-    };
-    cm.on('change', updatePlaceholder);
-    updatePlaceholder();
-
-    return () => {
-      // CodeMirror created from div (not textarea) doesn't have toTextArea
-      const wrapper = cm.getWrapperElement();
-      if (wrapper?.parentNode) {
-        wrapper.parentNode.removeChild(wrapper);
-      }
-    };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Handle controlled value updates
-  const prevFieldsLenRef = useRef(0);
-  useEffect(() => {
-    const cm = cmRef.current;
-    if (!cm || value === undefined) return;
-    const currentTemplate = getTemplateFromCM(cm);
-    const fieldsBecameAvailable = prevFieldsLenRef.current === 0 && fields.length > 0;
-    prevFieldsLenRef.current = fields.length;
-    if (currentTemplate !== value || fieldsBecameAvailable) {
-      isInternalUpdateRef.current = true;
-      setTemplateToCM(cm, value, fields);
-      isInternalUpdateRef.current = false;
-    }
-  }, [value, fields]);
-
-  // Update placeholder when prop changes
-  useEffect(() => {
-    const cm = cmRef.current;
-    if (!cm) return;
-    const wrapper = cm.getWrapperElement();
-    const isEmpty = getTemplateFromCM(cm) === '';
-    if (isEmpty) {
-      wrapper.setAttribute('data-placeholder', placeholder);
-    }
-  }, [placeholder]);
-
-  const handleFieldSelect = useCallback(
-    (_field: IField, nodeKey: string) => {
-      const cm = cmRef.current;
-      if (!cm) return;
-      const info = resolveFieldWidgetInfo(fieldsRef.current, nodeKey);
-      if (!info) return;
-      cm.focus();
-      isInternalUpdateRef.current = true;
-      addFieldToCM(cm, info.widgetName, info.label);
-      isInternalUpdateRef.current = false;
-      const template = getTemplateFromCM(cm);
-      onChangeRef.current?.(template);
-      setOpen(false);
-    },
-    [],
-  );
-
-  const setInsertBtnRef = useCallback((node: HTMLButtonElement | null) => {
-    insertBtnRef.current = node;
-    if (!node) {
-      setPortalContainer(null);
-      return;
-    }
-    const rootNode = node.getRootNode();
-    if (rootNode instanceof ShadowRoot) {
-      const existing = rootNode.querySelector<HTMLElement>(
-        '[data-bs-prompt-input-portal]',
-      );
-      if (existing) {
-        setPortalContainer(existing);
-        return;
-      }
-      const container = document.createElement('div');
-      container.setAttribute('data-bs-prompt-input-portal', 'true');
-      rootNode.appendChild(container);
-      setPortalContainer(container);
-    } else {
-      setPortalContainer(null);
-    }
-  }, []);
-
-  return (
-    <div className={cn('prompt-input-root relative', className)}>
-      {/* CodeMirror editor area */}
-      <div
-        ref={containerRef}
-        className="prompt-input-codemirror"
-      />
-
-      {/* Insert Field button - absolute top-right */}
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <button
-            ref={setInsertBtnRef}
-            type="button"
-            disabled={disabled}
-            className={cn(
-              'absolute top-[-26px] right-[10px] z-10',
-              'text-[14px] text-[#0265ff] leading-[normal]',
-              'cursor-pointer bg-transparent border-0',
-              'hover:opacity-80',
-              disabled && 'opacity-50 cursor-not-allowed',
-            )}
-          >
-            插入字段
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="end"
-          sideOffset={4}
-          portalContainer={portalContainer}
-          className="!border-0 !p-0"
-        >
-          <FieldSelectPopover
-            fields={fields}
-            onSelect={handleFieldSelect}
-            showTypeBadge
-          />
-        </PopoverContent>
-      </Popover>
-
-      {/* Inline styles — includes CodeMirror base + component overrides */}
-      <style>{`
-        /* ═══════════════════════════════════════════════════════════════
-           CodeMirror base styles (inlined from codemirror/lib/codemirror.css)
-           ═══════════════════════════════════════════════════════════════ */
-        .CodeMirror {
-          font-family: monospace;
-          height: 300px;
-          color: black;
-          direction: ltr;
-          position: relative;
-          overflow: hidden;
-          background: white;
-        }
-        .CodeMirror-lines { padding: 4px 0; cursor: text; min-height: 1px; }
-        .CodeMirror pre.CodeMirror-line,
-        .CodeMirror pre.CodeMirror-line-like {
-          padding: 0 4px;
-          -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-          border-width: 0;
-          background: transparent;
-          font-family: inherit;
-          font-size: inherit;
-          margin: 0;
-          white-space: pre;
-          word-wrap: normal;
-          line-height: inherit;
-          color: inherit;
-          z-index: 2;
-          position: relative;
-          overflow: visible;
-          -webkit-tap-highlight-color: transparent;
-          -webkit-font-variant-ligatures: contextual;
-          font-variant-ligatures: contextual;
-        }
-        .CodeMirror-wrap pre.CodeMirror-line,
-        .CodeMirror-wrap pre.CodeMirror-line-like {
-          word-wrap: break-word;
-          white-space: pre-wrap;
-          word-break: normal;
-        }
-        .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }
-        .CodeMirror-gutters {
-          border-right: 1px solid #ddd;
-          background-color: #f7f7f7;
-          white-space: nowrap;
-          position: absolute; left: 0; top: 0;
-          min-height: 100%;
-          z-index: 3;
-        }
-        .CodeMirror-linenumber {
-          padding: 0 3px 0 5px;
-          min-width: 20px;
-          text-align: right;
-          color: #999;
-          white-space: nowrap;
-        }
-        .CodeMirror-guttermarker { color: black; }
-        .CodeMirror-guttermarker-subtle { color: #999; }
-        .CodeMirror-cursor {
-          border-left: 1px solid black;
-          border-right: none;
-          width: 0;
-          position: absolute;
-          pointer-events: none;
-        }
-        .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }
-        .cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; }
-        .cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }
-        .cm-fat-cursor .CodeMirror-line::selection,
-        .cm-fat-cursor .CodeMirror-line > span::selection,
-        .cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
-        .cm-fat-cursor .CodeMirror-line::-moz-selection,
-        .cm-fat-cursor .CodeMirror-line > span::-moz-selection,
-        .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
-        .cm-fat-cursor { caret-color: transparent; }
-        @-moz-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} }
-        @-webkit-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} }
-        @keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} }
-        .cm-tab { display: inline-block; text-decoration: inherit; }
-        .CodeMirror-rulers {
-          position: absolute;
-          left: 0; right: 0; top: -50px; bottom: 0;
-          overflow: hidden;
-        }
-        .CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; }
-        .cm-s-default .cm-header { color: blue; }
-        .cm-s-default .cm-quote { color: #090; }
-        .cm-negative { color: #d44; }
-        .cm-positive { color: #292; }
-        .cm-header, .cm-strong { font-weight: bold; }
-        .cm-em { font-style: italic; }
-        .cm-link { text-decoration: underline; }
-        .cm-strikethrough { text-decoration: line-through; }
-        .cm-s-default .cm-keyword { color: #708; }
-        .cm-s-default .cm-atom { color: #219; }
-        .cm-s-default .cm-number { color: #164; }
-        .cm-s-default .cm-def { color: #00f; }
-        .cm-s-default .cm-variable-2 { color: #05a; }
-        .cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: #085; }
-        .cm-s-default .cm-comment { color: #a50; }
-        .cm-s-default .cm-string { color: #a11; }
-        .cm-s-default .cm-string-2 { color: #f50; }
-        .cm-s-default .cm-meta { color: #555; }
-        .cm-s-default .cm-qualifier { color: #555; }
-        .cm-s-default .cm-builtin { color: #30a; }
-        .cm-s-default .cm-bracket { color: #997; }
-        .cm-s-default .cm-tag { color: #170; }
-        .cm-s-default .cm-attribute { color: #00c; }
-        .cm-s-default .cm-hr { color: #999; }
-        .cm-s-default .cm-link { color: #00c; }
-        .cm-s-default .cm-error { color: #f00; }
-        .cm-invalidchar { color: #f00; }
-        .CodeMirror-composing { border-bottom: 2px solid; }
-        div.CodeMirror span.CodeMirror-matchingbracket { color: #0b0; }
-        div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #a22; }
-        .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-        .CodeMirror-activeline-background { background: #e8f2ff; }
-        .CodeMirror-scroll {
-          overflow: scroll !important;
-          margin-bottom: -50px; margin-right: -50px;
-          padding-bottom: 50px;
-          height: 100%;
-          outline: none;
-          position: relative;
-          z-index: 0;
-        }
-        .CodeMirror-sizer {
-          position: relative;
-          border-right: 50px solid transparent;
-        }
-        .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-          position: absolute;
-          z-index: 6;
-          display: none;
-          outline: none;
-        }
-        .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; }
-        .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; }
-        .CodeMirror-scrollbar-filler { right: 0; bottom: 0; }
-        .CodeMirror-gutter-filler { left: 0; bottom: 0; }
-        .CodeMirror-gutter {
-          white-space: normal;
-          height: 100%;
-          display: inline-block;
-          vertical-align: top;
-          margin-bottom: -50px;
-        }
-        .CodeMirror-gutter-wrapper {
-          position: absolute;
-          z-index: 4;
-          background: none !important;
-          border: none !important;
-        }
-        .CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; }
-        .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
-        .CodeMirror-gutter-wrapper ::selection { background-color: transparent; }
-        .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent; }
-        .CodeMirror-linebackground {
-          position: absolute;
-          left: 0; right: 0; top: 0; bottom: 0;
-          z-index: 0;
-        }
-        .CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; }
-        .CodeMirror-rtl pre { direction: rtl; }
-        .CodeMirror-code { outline: none; }
-        .CodeMirror-scroll,
-        .CodeMirror-sizer,
-        .CodeMirror-gutter,
-        .CodeMirror-gutters,
-        .CodeMirror-linenumber {
-          -moz-box-sizing: content-box;
-          box-sizing: content-box;
-        }
-        .CodeMirror-measure {
-          position: absolute;
-          width: 100%;
-          height: 0;
-          overflow: hidden;
-          visibility: hidden;
-        }
-        .CodeMirror-measure pre { position: static; }
-        div.CodeMirror-cursors {
-          visibility: hidden;
-          position: relative;
-          z-index: 3;
-        }
-        div.CodeMirror-dragcursors { visibility: visible; }
-        .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }
-        .CodeMirror-selected { background: #d9d9d9; }
-        .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-        .CodeMirror-crosshair { cursor: crosshair; }
-        .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-        .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
-        .cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, .4); }
-        .cm-force-border { padding-right: .1px; }
-        @media print {
-          .CodeMirror div.CodeMirror-cursors { visibility: hidden; }
-        }
-        .cm-tab-wrap-hack:after { content: ''; }
-        span.CodeMirror-selectedtext { background: none; }
-
-        /* ── Outer wrapper ── */
-        .prompt-input-root {
-          border: 1px solid #E0E0E0;
-          border-radius: 4px;
-          min-height: 120px;
-          position: relative;
-        }
-
-        /* ── CodeMirror container ── */
-        .prompt-input-codemirror {
-          height: 100%;
-          min-height: 120px;
-        }
-
-        .prompt-input-codemirror .CodeMirror {
-          height: 100%;
-          min-height: 120px;
-          border: 0;
-          border-radius: 4px;
-          font-family: inherit;
-          font-size: 14px;
-          line-height: 1.6;
-          color: #030303;
-          background: transparent;
-        }
-
-        .prompt-input-codemirror .CodeMirror-scroll {
-          min-height: 120px;
-          overflow: hidden !important;
-        }
-
-        .prompt-input-codemirror .CodeMirror-lines {
-          padding: 10px 80px 10px 10px;
-        }
-
-        .prompt-input-codemirror .CodeMirror pre.CodeMirror-line,
-        .prompt-input-codemirror .CodeMirror pre.CodeMirror-line-like {
-          padding: 0;
-        }
-
-        .prompt-input-codemirror .CodeMirror .CodeMirror-cursor {
-          border-left: 1px solid #030303;
-        }
-
-        /* ── Placeholder ── */
-        .prompt-input-codemirror .CodeMirror.cm-empty .CodeMirror-lines::before {
-          content: attr(data-placeholder);
-          position: absolute;
-          left: 10px;
-          top: 10px;
-          color: #999999;
-          font-size: 14px;
-          pointer-events: none;
-          z-index: 1;
-        }
-
-        /* ── Field tag widget ── */
-        .prompt-field-tag {
-          display: inline-flex;
-          align-items: center;
-          gap: 6px;
-          height: 26px;
-          padding: 0 6px;
-          background: #EFF0F6;
-          border-radius: 4px;
-          font-size: 14px;
-          margin: 3px 3px;                                                                                                                                                                 
-          line-height: normal;
-          color: #000000;
-          white-space: nowrap;
-          user-select: none;
-          vertical-align: middle;
-        }
-
-        // .CodeMirror-widget + .CodeMirror-widget > .prompt-field-tag {                                                                                                                        
-        //   margin-left: 0;
-        // }
-
-        .CodeMirror-line {
-          line-height: 1.4;          /* 设置一个符合你字体大小的行高，例如 20px */
-        }
-
-        .CodeMirror-cursor {
-          height: 1.4em;
-          border-left: 1px solid black;
-        }
-
-        .prompt-field-tag-icon {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 14px;
-          height: 14px;
-          flex-shrink: 0;
-        }
-      `}</style>
-    </div>
-  );
-};
+import { useEffect, useRef, useState, useCallback } from 'react';
+import CodeMirror from 'codemirror';
+import { cn } from '../../../lib/utils';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { FieldSelectPopover } from '../field-select';
+import type { IField, ISubformField } from '@baishuyun/types';
+
+// ── Create a DOM node for the field tag (used inside CodeMirror) ────
+
+function createFieldTagDom(label: string): HTMLSpanElement {
+  const wrapper = document.createElement('span');
+  wrapper.className = 'prompt-field-tag';
+
+  const iconSpan = document.createElement('span');
+  iconSpan.className = 'prompt-field-tag-icon';
+  iconSpan.innerHTML =
+    '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="2" stroke="#6F829E" stroke-width="1.2"/><path d="M5 5.5H9M5 7.5H8" stroke="#6F829E" stroke-width="1.2" stroke-linecap="round"/></svg>';
+
+  const textSpan = document.createElement('span');
+  textSpan.textContent = label;
+
+  wrapper.appendChild(iconSpan);
+  wrapper.appendChild(textSpan);
+  return wrapper;
+}
+
+// ── CodeMirror Helpers ──────────────────────────────────────────────
+
+function resolveFieldWidgetInfo(
+  fields: IField[],
+  fullKey: string,
+): { widgetName: string; label: string } | undefined {
+  const  key = fullKey.replace('virtual.', '');
+
+  const dotIndex = key.indexOf('.');
+  if (dotIndex > 0) {
+    const parentName = key.substring(0, dotIndex);
+    const childName = key.substring(dotIndex + 1);
+    const parent = fields.find((f) => f.widget?.widgetName === parentName);
+    if (parent?.widget?.items) {
+      const child = parent.widget.items.find(
+        (item): item is ISubformField =>
+          'widget' in item && item.widget?.widgetName === childName,
+      );
+      if (child) {
+        return { widgetName: fullKey, label: child.label };
+      }
+    }
+  } else {
+    const field = fields.find((f) => f.widget?.widgetName === key);
+    if (field) {
+      return { widgetName: fullKey, label: field.label };
+    }
+  }
+  return undefined;
+}
+
+function addFieldToCM(
+  cm: CodeMirror.Editor,
+  widgetName: string,
+  displayLabel: string,
+): void {
+  const from = cm.getCursor('from');
+
+  cm.replaceSelection('${' + widgetName + '}');
+  const to = cm.getCursor();
+
+  const isVirtual = widgetName?.includes("virtual");
+
+  const label = isVirtual ? `触发行.${displayLabel}` : displayLabel;
+
+  const tagNode = createFieldTagDom(label);
+  tagNode.setAttribute('data-field-key', widgetName);
+
+  cm.markText(from, to, {
+    handleMouseEvents: true,
+    atomic: true,
+    replacedWith: tagNode,
+  });
+}
+
+function getTemplateFromCM(cm: CodeMirror.Editor): string {
+  const wrapper = cm.getWrapperElement();
+  const lineElements = wrapper.querySelectorAll('.CodeMirror-line');
+  const lines: string[] = [];
+
+  lineElements.forEach((lineEl) => {
+    let lineText = '';
+    walkLineNode(lineEl);
+    lines.push(lineText);
+
+    function walkLineNode(node: Node): void {
+      if (node instanceof HTMLElement) {
+        const key = node.getAttribute('data-field-key');
+        if (key && node.classList.contains('prompt-field-tag')) {
+          lineText += '${' + key + '}';
+          return;
+        }
+      }
+      const children = Array.from(node.childNodes);
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (child.nodeType === Node.TEXT_NODE) {
+          lineText += child.textContent || '';
+        } else {
+          walkLineNode(child);
+        }
+      }
+    }
+  });
+
+  return lines.join('\n').trim();
+}
+
+function setTemplateToCM(
+  cm: CodeMirror.Editor,
+  template: string,
+  fields: IField[],
+): void {
+  cm.setValue('');
+  if (!template) {
+    cm.refresh();
+    return;
+  }
+
+  const normalized = template.trim().replace(/\s{2,}/g, ' ');
+  const parts = normalized.split(/(\$\{[^${}]*\})/g);
+
+  for (const part of parts) {
+    const match = part.match(/^\$\{([^${}]*)\}$/);
+    if (match) {
+      const info = resolveFieldWidgetInfo(fields, match[1]);
+      if (info) {
+        addFieldToCM(cm, info.widgetName, info.label);
+      } else {
+        cm.replaceSelection(part);
+      }
+    } else {
+      cm.replaceSelection(part);
+    }
+  }
+
+  cm.refresh();
+}
+
+// ── PromptInput Component ──────────────────────────────────────────
+
+export interface PromptInputProps {
+  fields: IField[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (template: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const PromptInput = ({
+  fields,
+  value,
+  defaultValue,
+  onChange,
+  placeholder = '示例：放配置时候的提示词内容进行引导说明',
+  className,
+  disabled = false,
+}: PromptInputProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const cmRef = useRef<CodeMirror.Editor | null>(null);
+  const [open, setOpen] = useState(false);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const insertBtnRef = useRef<HTMLButtonElement | null>(null);
+  const isInternalUpdateRef = useRef(false);
+
+  // Create field key cache ref to avoid stale closure in CM callbacks
+  const fieldsRef = useRef(fields);
+  fieldsRef.current = fields;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  // Initialize CodeMirror
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const cm = CodeMirror(container, {
+      mode: undefined,
+      lineWrapping: true,
+      lineNumbers: false,
+      smartIndent: false,
+      autofocus: false,
+      extraKeys: {
+        Enter: (instance: CodeMirror.Editor) => {
+          // Allow regular newlines
+          instance.replaceSelection('\n');
+        },
+      },
+    } as CodeMirror.EditorConfiguration);
+
+    cmRef.current = cm;
+
+    const initialValue = value ?? defaultValue ?? '';
+    if (initialValue) {
+      isInternalUpdateRef.current = true;
+      setTemplateToCM(cm, initialValue, fieldsRef.current);
+      isInternalUpdateRef.current = false;
+    }
+
+    cm.on('changes', () => {
+      if (isInternalUpdateRef.current) return;
+      const template = getTemplateFromCM(cm);
+      onChangeRef.current?.(template);
+    });
+
+    // Toggle placeholder visibility
+    const wrapper = cm.getWrapperElement();
+    const updatePlaceholder = () => {
+      const text = getTemplateFromCM(cm);
+      const isEmpty = text === '';
+      if (isEmpty) {
+        wrapper.setAttribute('data-placeholder', placeholder);
+        wrapper.classList.add('cm-empty');
+      } else {
+        wrapper.removeAttribute('data-placeholder');
+        wrapper.classList.remove('cm-empty');
+      }
+    };
+    cm.on('change', updatePlaceholder);
+    updatePlaceholder();
+
+    return () => {
+      // CodeMirror created from div (not textarea) doesn't have toTextArea
+      const wrapper = cm.getWrapperElement();
+      if (wrapper?.parentNode) {
+        wrapper.parentNode.removeChild(wrapper);
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Handle controlled value updates
+  const prevFieldsLenRef = useRef(0);
+  useEffect(() => {
+    const cm = cmRef.current;
+    if (!cm || value === undefined) return;
+    const currentTemplate = getTemplateFromCM(cm);
+    const fieldsBecameAvailable = prevFieldsLenRef.current === 0 && fields.length > 0;
+    prevFieldsLenRef.current = fields.length;
+    if (currentTemplate !== value || fieldsBecameAvailable) {
+      isInternalUpdateRef.current = true;
+      setTemplateToCM(cm, value, fields);
+      isInternalUpdateRef.current = false;
+    }
+  }, [value, fields]);
+
+  // Update placeholder when prop changes
+  useEffect(() => {
+    const cm = cmRef.current;
+    if (!cm) return;
+    const wrapper = cm.getWrapperElement();
+    const isEmpty = getTemplateFromCM(cm) === '';
+    if (isEmpty) {
+      wrapper.setAttribute('data-placeholder', placeholder);
+    }
+  }, [placeholder]);
+
+  const handleFieldSelect = useCallback(
+    (_field: IField, nodeKey: string) => {
+      const cm = cmRef.current;
+      if (!cm) return;
+      const info = resolveFieldWidgetInfo(fieldsRef.current, nodeKey);
+      if (!info) return;
+      cm.focus();
+      isInternalUpdateRef.current = true;
+      addFieldToCM(cm, info.widgetName, info.label);
+      isInternalUpdateRef.current = false;
+      const template = getTemplateFromCM(cm);
+      onChangeRef.current?.(template);
+      setOpen(false);
+    },
+    [],
+  );
+
+  const setInsertBtnRef = useCallback((node: HTMLButtonElement | null) => {
+    insertBtnRef.current = node;
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>(
+        '[data-bs-prompt-input-portal]',
+      );
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-prompt-input-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  return (
+    <div className={cn('prompt-input-root relative', className)}>
+      {/* CodeMirror editor area */}
+      <div
+        ref={containerRef}
+        className="prompt-input-codemirror"
+      />
+
+      {/* Insert Field button - absolute top-right */}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setInsertBtnRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'absolute top-[-26px] right-[10px] z-10',
+              'text-[14px] text-[#0265ff] leading-[normal]',
+              'cursor-pointer bg-transparent border-0',
+              'hover:opacity-80',
+              disabled && 'opacity-50 cursor-not-allowed',
+            )}
+          >
+            插入字段
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="end"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 !p-0"
+        >
+          <FieldSelectPopover
+            fields={fields}
+            onSelect={handleFieldSelect}
+            showTypeBadge
+          />
+        </PopoverContent>
+      </Popover>
+
+      {/* Inline styles — includes CodeMirror base + component overrides */}
+      <style>{`
+        /* ═══════════════════════════════════════════════════════════════
+           CodeMirror base styles (inlined from codemirror/lib/codemirror.css)
+           ═══════════════════════════════════════════════════════════════ */
+        .CodeMirror {
+          font-family: monospace;
+          height: 300px;
+          color: black;
+          direction: ltr;
+          position: relative;
+          overflow: hidden;
+          background: white;
+        }
+        .CodeMirror-lines { padding: 4px 0; cursor: text; min-height: 1px; }
+        .CodeMirror pre.CodeMirror-line,
+        .CodeMirror pre.CodeMirror-line-like {
+          padding: 0 4px;
+          -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+          border-width: 0;
+          background: transparent;
+          font-family: inherit;
+          font-size: inherit;
+          margin: 0;
+          white-space: pre;
+          word-wrap: normal;
+          line-height: inherit;
+          color: inherit;
+          z-index: 2;
+          position: relative;
+          overflow: visible;
+          -webkit-tap-highlight-color: transparent;
+          -webkit-font-variant-ligatures: contextual;
+          font-variant-ligatures: contextual;
+        }
+        .CodeMirror-wrap pre.CodeMirror-line,
+        .CodeMirror-wrap pre.CodeMirror-line-like {
+          word-wrap: break-word;
+          white-space: pre-wrap;
+          word-break: normal;
+        }
+        .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }
+        .CodeMirror-gutters {
+          border-right: 1px solid #ddd;
+          background-color: #f7f7f7;
+          white-space: nowrap;
+          position: absolute; left: 0; top: 0;
+          min-height: 100%;
+          z-index: 3;
+        }
+        .CodeMirror-linenumber {
+          padding: 0 3px 0 5px;
+          min-width: 20px;
+          text-align: right;
+          color: #999;
+          white-space: nowrap;
+        }
+        .CodeMirror-guttermarker { color: black; }
+        .CodeMirror-guttermarker-subtle { color: #999; }
+        .CodeMirror-cursor {
+          border-left: 1px solid black;
+          border-right: none;
+          width: 0;
+          position: absolute;
+          pointer-events: none;
+        }
+        .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }
+        .cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; }
+        .cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }
+        .cm-fat-cursor .CodeMirror-line::selection,
+        .cm-fat-cursor .CodeMirror-line > span::selection,
+        .cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
+        .cm-fat-cursor .CodeMirror-line::-moz-selection,
+        .cm-fat-cursor .CodeMirror-line > span::-moz-selection,
+        .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
+        .cm-fat-cursor { caret-color: transparent; }
+        @-moz-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} }
+        @-webkit-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} }
+        @keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} }
+        .cm-tab { display: inline-block; text-decoration: inherit; }
+        .CodeMirror-rulers {
+          position: absolute;
+          left: 0; right: 0; top: -50px; bottom: 0;
+          overflow: hidden;
+        }
+        .CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; }
+        .cm-s-default .cm-header { color: blue; }
+        .cm-s-default .cm-quote { color: #090; }
+        .cm-negative { color: #d44; }
+        .cm-positive { color: #292; }
+        .cm-header, .cm-strong { font-weight: bold; }
+        .cm-em { font-style: italic; }
+        .cm-link { text-decoration: underline; }
+        .cm-strikethrough { text-decoration: line-through; }
+        .cm-s-default .cm-keyword { color: #708; }
+        .cm-s-default .cm-atom { color: #219; }
+        .cm-s-default .cm-number { color: #164; }
+        .cm-s-default .cm-def { color: #00f; }
+        .cm-s-default .cm-variable-2 { color: #05a; }
+        .cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: #085; }
+        .cm-s-default .cm-comment { color: #a50; }
+        .cm-s-default .cm-string { color: #a11; }
+        .cm-s-default .cm-string-2 { color: #f50; }
+        .cm-s-default .cm-meta { color: #555; }
+        .cm-s-default .cm-qualifier { color: #555; }
+        .cm-s-default .cm-builtin { color: #30a; }
+        .cm-s-default .cm-bracket { color: #997; }
+        .cm-s-default .cm-tag { color: #170; }
+        .cm-s-default .cm-attribute { color: #00c; }
+        .cm-s-default .cm-hr { color: #999; }
+        .cm-s-default .cm-link { color: #00c; }
+        .cm-s-default .cm-error { color: #f00; }
+        .cm-invalidchar { color: #f00; }
+        .CodeMirror-composing { border-bottom: 2px solid; }
+        div.CodeMirror span.CodeMirror-matchingbracket { color: #0b0; }
+        div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #a22; }
+        .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+        .CodeMirror-activeline-background { background: #e8f2ff; }
+        .CodeMirror-scroll {
+          overflow: scroll !important;
+          margin-bottom: -50px; margin-right: -50px;
+          padding-bottom: 50px;
+          height: 100%;
+          outline: none;
+          position: relative;
+          z-index: 0;
+        }
+        .CodeMirror-sizer {
+          position: relative;
+          border-right: 50px solid transparent;
+        }
+        .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+          position: absolute;
+          z-index: 6;
+          display: none;
+          outline: none;
+        }
+        .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; }
+        .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; }
+        .CodeMirror-scrollbar-filler { right: 0; bottom: 0; }
+        .CodeMirror-gutter-filler { left: 0; bottom: 0; }
+        .CodeMirror-gutter {
+          white-space: normal;
+          height: 100%;
+          display: inline-block;
+          vertical-align: top;
+          margin-bottom: -50px;
+        }
+        .CodeMirror-gutter-wrapper {
+          position: absolute;
+          z-index: 4;
+          background: none !important;
+          border: none !important;
+        }
+        .CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; }
+        .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
+        .CodeMirror-gutter-wrapper ::selection { background-color: transparent; }
+        .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent; }
+        .CodeMirror-linebackground {
+          position: absolute;
+          left: 0; right: 0; top: 0; bottom: 0;
+          z-index: 0;
+        }
+        .CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; }
+        .CodeMirror-rtl pre { direction: rtl; }
+        .CodeMirror-code { outline: none; }
+        .CodeMirror-scroll,
+        .CodeMirror-sizer,
+        .CodeMirror-gutter,
+        .CodeMirror-gutters,
+        .CodeMirror-linenumber {
+          -moz-box-sizing: content-box;
+          box-sizing: content-box;
+        }
+        .CodeMirror-measure {
+          position: absolute;
+          width: 100%;
+          height: 0;
+          overflow: hidden;
+          visibility: hidden;
+        }
+        .CodeMirror-measure pre { position: static; }
+        div.CodeMirror-cursors {
+          visibility: hidden;
+          position: relative;
+          z-index: 3;
+        }
+        div.CodeMirror-dragcursors { visibility: visible; }
+        .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }
+        .CodeMirror-selected { background: #d9d9d9; }
+        .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+        .CodeMirror-crosshair { cursor: crosshair; }
+        .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+        .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+        .cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, .4); }
+        .cm-force-border { padding-right: .1px; }
+        @media print {
+          .CodeMirror div.CodeMirror-cursors { visibility: hidden; }
+        }
+        .cm-tab-wrap-hack:after { content: ''; }
+        span.CodeMirror-selectedtext { background: none; }
+
+        /* ── Outer wrapper ── */
+        .prompt-input-root {
+          border: 1px solid #E0E0E0;
+          border-radius: 4px;
+          min-height: 120px;
+          position: relative;
+        }
+
+        /* ── CodeMirror container ── */
+        .prompt-input-codemirror {
+          height: 100%;
+          min-height: 120px;
+        }
+
+        .prompt-input-codemirror .CodeMirror {
+          height: 100%;
+          min-height: 120px;
+          border: 0;
+          border-radius: 4px;
+          font-family: inherit;
+          font-size: 14px;
+          line-height: 1.6;
+          color: #030303;
+          background: transparent;
+        }
+
+        .prompt-input-codemirror .CodeMirror-scroll {
+          min-height: 120px;
+          overflow: hidden !important;
+        }
+
+        .prompt-input-codemirror .CodeMirror-lines {
+          padding: 10px 80px 10px 10px;
+        }
+
+        .prompt-input-codemirror .CodeMirror pre.CodeMirror-line,
+        .prompt-input-codemirror .CodeMirror pre.CodeMirror-line-like {
+          padding: 0;
+        }
+
+        .prompt-input-codemirror .CodeMirror .CodeMirror-cursor {
+          border-left: 1px solid #030303;
+        }
+
+        /* ── Placeholder ── */
+        .prompt-input-codemirror .CodeMirror.cm-empty .CodeMirror-lines::before {
+          content: attr(data-placeholder);
+          position: absolute;
+          left: 10px;
+          top: 10px;
+          color: #999999;
+          font-size: 14px;
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        /* ── Field tag widget ── */
+        .prompt-field-tag {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          height: 26px;
+          padding: 0 6px;
+          background: #EFF0F6;
+          border-radius: 4px;
+          font-size: 14px;
+          margin: 3px 3px;                                                                                                                                                                 
+          line-height: normal;
+          color: #000000;
+          white-space: nowrap;
+          user-select: none;
+          vertical-align: middle;
+        }
+
+        // .CodeMirror-widget + .CodeMirror-widget > .prompt-field-tag {                                                                                                                        
+        //   margin-left: 0;
+        // }
+
+        .CodeMirror-line {
+          line-height: 1.4;          /* 设置一个符合你字体大小的行高，例如 20px */
+        }
+
+        .CodeMirror-cursor {
+          height: 1.4em;
+          border-left: 1px solid black;
+        }
+
+        .prompt-field-tag-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 14px;
+          height: 14px;
+          flex-shrink: 0;
+        }
+      `}</style>
+    </div>
+  );
+};