@baishuyun/ai-design 1.0.3 → 1.0.5

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

@@ -0,0 +1,629 @@
+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 } 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 FIELD_KEY(field: IField): string {
+  return field.widget?.widgetName || field.label;
+}
+
+function getFieldByKey(fields: IField[], key: string): IField | undefined {
+  return fields.find((f) => FIELD_KEY(f) === key);
+}
+
+function addFieldToCM(
+  cm: CodeMirror.Editor,
+  field: IField,
+): void {
+  const key = FIELD_KEY(field);
+  const displayLabel = field.label;
+  const from = cm.getCursor('from');
+
+  // Insert the template placeholder as the document text so that
+  // getTemplateFromCM always outputs ${key} regardless of whether
+  // markText has applied the replacedWith DOM decoration yet.
+  cm.replaceSelection('${' + key + '}');
+  const to = cm.getCursor();
+
+  const tagNode = createFieldTagDom(displayLabel);
+  tagNode.setAttribute('data-field-key', key);
+
+  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 field = getFieldByKey(fields, match[1]);
+      if (field) {
+        addFieldToCM(cm, field);
+      } 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
+  useEffect(() => {
+    const cm = cmRef.current;
+    if (!cm || value === undefined) return;
+    const currentTemplate = getTemplateFromCM(cm);
+    if (currentTemplate !== value) {
+      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) => {
+      const cm = cmRef.current;
+      if (!cm) return;
+      cm.focus();
+      isInternalUpdateRef.current = true;
+      addFieldToCM(cm, field);
+      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 0;                                                                                                                                                                 
+          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-line > span { 
+          display: inline-flex;       /* 让行内元素使用 inline-flex 布局 */
+          align-items: center;       /* 垂直居中对齐行内元素 */
+          gap: 6px;                  /* 行内元素之间的间距 */
+          flex-wrap: wrap;            /* 允许行内元素换行 */
+        }
+
+        /* 保证光标元素自身不继承异常高度 */
+        .CodeMirror-cursor {
+          height: auto !important;    /* 让光标高度由行高自动决定，而不是被某个固定值撑高 */
+          border-left: 1px solid black;  /* 确保光标可见，颜色可自定义 */
+          transform: translateY(0);
+        }
+
+        .prompt-field-tag-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 14px;
+          height: 14px;
+          flex-shrink: 0;
+        }
+      `}</style>
+    </div>
+  );
+};