@flowgram.ai/form-materials 0.2.20 → 0.2.22

package/src/components/json-editor-with-variables/styles.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+import { Tag } from '@douyinfe/semi-ui';
+
+export const UIRootTitle = styled.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+
+export const UIVarName = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const UITag = styled(Tag)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+
+export const UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;

package/src/components/prompt-editor/config.json

@@ -2,7 +2,7 @@
   "name": "prompt-editor",
   "depMaterials": [],
   "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
     "styled-components"
   ]

package/src/components/prompt-editor/index.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { Renderer, EditorProvider } from '@coze-editor/editor/react';
+import { Renderer, EditorProvider, ActiveLinePlaceholder } from '@coze-editor/editor/react';
 import preset from '@coze-editor/editor/preset-prompt';
 
 import { PropsType } from './types';
@@ -17,7 +17,16 @@ import JinjaHighlight from './extensions/jinja';
 export type PromptEditorPropsType = PropsType;
 
 export function PromptEditor(props: PropsType) {
-  const { value, onChange, readonly, style, hasError, children } = props || {};
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children,
+  } = props || {};
 
   return (
     <UIContainer $hasError={hasError} style={style}>
@@ -28,11 +37,15 @@ export function PromptEditor(props: PropsType) {
           options={{
             readOnly: readonly,
             editable: !readonly,
+            placeholder,
           }}
           onChange={(e) => {
             onChange({ type: 'template', content: e.value });
           }}
         />
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
         <MarkdownHighlight />
         <LanguageSupport />
         <JinjaHighlight />

package/src/components/prompt-editor/types.tsx

@@ -12,5 +12,7 @@ export type PropsType = React.PropsWithChildren<{
   onChange: (value?: IFlowTemplateValue) => void;
   readonly?: boolean;
   hasError?: boolean;
+  placeholder?: string;
+  activeLinePlaceholder?: string;
   style?: React.CSSProperties;
 }>;

package/src/components/prompt-editor-with-inputs/config.json

@@ -0,0 +1,13 @@
+{
+  "name": "prompt-editor-with-inputs",
+  "depMaterials": [
+    "prompt-editor",
+    "flow-value"
+  ],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
+    "@codemirror/view",
+    "styled-components",
+    "@douyinfe/semi-ui"
+  ]
+}

package/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { Popover } from '@douyinfe/semi-ui';
+import {
+  Mention,
+  MentionOpenChangeEvent,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror,
+} from '@coze-editor/editor/react';
+import { EditorAPI } from '@coze-editor/editor/preset-prompt';
+
+import { InputsPicker } from '../inputs-picker';
+import { IFlowValue } from '../../../typings';
+
+export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlowValue> }) {
+  const [posKey, setPosKey] = useState('');
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor<EditorAPI>();
+
+  function insert(variablePath: string) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+
+    if (!range) {
+      return;
+    }
+
+    editor.replaceText({
+      ...range,
+      text: '{{' + variablePath + '}}',
+    });
+
+    setVisible(false);
+  }
+
+  function handleOpenChange(e: MentionOpenChangeEvent) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+
+  return (
+    <>
+      <Mention triggerCharacters={['{', '{}', '@']} onOpenChange={handleOpenChange} />
+
+      <Popover
+        visible={visible}
+        trigger="custom"
+        position="topLeft"
+        rePosKey={posKey}
+        content={
+          <div style={{ width: 300 }}>
+            <InputsPicker
+              inputsValues={inputsValues}
+              onSelect={(v) => {
+                insert(v);
+              }}
+            />
+          </div>
+        }
+      >
+        {/* PositionMirror allows the Popover to appear at the specified cursor position */}
+        <PositionMirror
+          position={position}
+          // When Doc scroll, update position
+          onChange={() => setPosKey(String(Math.random()))}
+        />
+      </Popover>
+    </>
+  );
+}

package/src/components/prompt-editor-with-inputs/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { InputsTree } from './extensions/inputs-tree';
+import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
+import { IFlowValue } from '../../typings';
+
+interface PropsType extends PromptEditorPropsType {
+  inputsValues: Record<string, IFlowValue>;
+}
+
+export function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsType) {
+  return (
+    <PromptEditor {...restProps}>
+      <InputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}

package/src/components/prompt-editor-with-inputs/inputs-picker.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useMemo } from 'react';
+
+import { last } from 'lodash';
+import {
+  type ArrayType,
+  ASTMatch,
+  type BaseType,
+  type BaseVariableField,
+  useScopeAvailable,
+} from '@flowgram.ai/editor';
+import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { Tree } from '@douyinfe/semi-ui';
+
+import { IFlowValue } from '../../typings';
+
+type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
+
+export function InputsPicker({
+  inputsValues,
+  onSelect,
+}: {
+  inputsValues: Record<string, IFlowValue>;
+  onSelect: (v: string) => void;
+}) {
+  const available = useScopeAvailable();
+
+  const getArrayDrilldown = (type: ArrayType, depth = 1): { type: BaseType; depth: number } => {
+    if (ASTMatch.isArray(type.items)) {
+      return getArrayDrilldown(type.items, depth + 1);
+    }
+
+    return { type: type.items, depth: depth };
+  };
+
+  const renderVariable = (variable: VariableField, keyPath: string[]): TreeNodeData => {
+    let type = variable?.type;
+
+    let children: TreeNodeData[] | undefined;
+
+    if (ASTMatch.isObject(type)) {
+      children = (type.properties || [])
+        .map((_property) => renderVariable(_property as VariableField, [...keyPath, _property.key]))
+        .filter(Boolean) as TreeNodeData[];
+    }
+
+    if (ASTMatch.isArray(type)) {
+      const drilldown = getArrayDrilldown(type);
+
+      if (ASTMatch.isObject(drilldown.type)) {
+        children = (drilldown.type.properties || [])
+          .map((_property) =>
+            renderVariable(_property as VariableField, [
+              ...keyPath,
+              ...new Array(drilldown.depth).fill('[0]'),
+              _property.key,
+            ])
+          )
+          .filter(Boolean) as TreeNodeData[];
+      }
+    }
+
+    const key = keyPath
+      .map((_key, idx) => (_key === '[0]' || idx === 0 ? _key : `.${_key}`))
+      .join('');
+
+    return {
+      key: key,
+      label: last(keyPath),
+      value: key,
+      children,
+    };
+  };
+
+  const treeData: TreeNodeData[] = useMemo(
+    () =>
+      Object.entries(inputsValues).map(([key, value]) => {
+        if (value.type === 'ref') {
+          const variable = available.getByKeyPath(value.content || []);
+
+          if (variable) {
+            return renderVariable(variable, [key]);
+          }
+        }
+
+        return {
+          key,
+          value: key,
+          label: key,
+        };
+      }),
+    []
+  );
+
+  return <Tree treeData={treeData} onSelect={(v) => onSelect(v)} />;
+}

package/src/components/prompt-editor-with-variables/config.json

@@ -1,10 +1,11 @@
 {
-  "name": "prompt-editor",
+  "name": "prompt-editor-with-variables",
   "depMaterials": [
-    "variable-selector"
+    "variable-selector",
+    "prompt-editor"
   ],
   "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
     "styled-components",
     "@douyinfe/semi-ui"