@flowgram.ai/form-materials 0.2.16 → 0.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -30,7 +30,9 @@
     "chalk": "^5.3.0",
     "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@flowgram.ai/editor": "0.2.16"
+    "@coze-editor/editor": "0.1.0-alpha.8d7a30",
+    "@codemirror/view": "~6.38.0",
+    "@flowgram.ai/editor": "0.2.18"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -46,8 +48,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.0.4",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.16",
-    "@flowgram.ai/ts-config": "0.2.16"
+    "@flowgram.ai/ts-config": "0.2.18",
+    "@flowgram.ai/eslint-config": "0.2.18"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/batch-outputs/config.json

@@ -0,0 +1,12 @@
+{
+  "name": "batch-outputs",
+  "depMaterials": [
+    "flow-value",
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "@douyinfe/semi-icons",
+    "styled-components"
+  ]
+}

package/src/components/batch-outputs/index.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Button, Input } from '@douyinfe/semi-ui';
+import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
+
+import { useList } from './use-list';
+import { PropsType } from './types';
+import { VariableSelector } from '../variable-selector';
+import { UIRow, UIRows } from './styles';
+
+export function BatchOutputs(props: PropsType) {
+  const { readonly, style } = props;
+
+  const { list, add, update, remove } = useList(props);
+
+  return (
+    <div>
+      <UIRows style={style}>
+        {list.map((item) => (
+          <UIRow key={item.id}>
+            <Input
+              style={{ width: 100 }}
+              disabled={readonly}
+              size="small"
+              value={item.key}
+              onChange={(v) => update({ ...item, key: v })}
+            />
+            <VariableSelector
+              style={{ flexGrow: 1 }}
+              readonly={readonly}
+              value={item.value?.content}
+              onChange={(v) =>
+                update({
+                  ...item,
+                  value: {
+                    type: 'ref',
+                    content: v,
+                  },
+                })
+              }
+            />
+            <Button
+              disabled={readonly}
+              icon={<IconDelete />}
+              size="small"
+              onClick={() => remove(item.id)}
+            />
+          </UIRow>
+        ))}
+      </UIRows>
+      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
+        Add
+      </Button>
+    </div>
+  );
+}

package/src/components/batch-outputs/styles.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const UIRows = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+export const UIRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;

package/src/components/batch-outputs/types.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowRefValue } from '../../typings';
+
+export type ValueType = Record<string, IFlowRefValue | undefined>;
+
+export interface OutputItem {
+  id: number;
+  key?: string;
+  value?: IFlowRefValue;
+}
+
+export interface PropsType {
+  value?: ValueType;
+  onChange: (value?: ValueType) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: React.CSSProperties;
+}

package/src/components/batch-outputs/use-list.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useEffect, useState } from 'react';
+
+import { difference } from 'lodash';
+
+import { OutputItem, PropsType } from './types';
+
+let _id = 0;
+function genId() {
+  return _id++;
+}
+
+export function useList({ value, onChange }: PropsType) {
+  const [list, setList] = useState<OutputItem[]>([]);
+
+  useEffect(() => {
+    setList((_prevList) => {
+      const newKeys = Object.keys(value || {});
+      const oldKeys = _prevList.map((item) => item.key).filter(Boolean) as string[];
+      const addKeys = difference(newKeys, oldKeys);
+
+      return _prevList
+        .filter((item) => !item.key || newKeys.includes(item.key))
+        .map((item) => ({
+          id: item.id,
+          key: item.key,
+          value: item.key ? value?.[item.key!] : undefined,
+        }))
+        .concat(
+          addKeys.map((_key) => ({
+            id: genId(),
+            key: _key,
+            value: value?.[_key],
+          }))
+        );
+    });
+  }, [value]);
+
+  const add = () => {
+    setList((prevList) => [
+      ...prevList,
+      {
+        id: genId(),
+      },
+    ]);
+  };
+
+  const update = (item: OutputItem) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === item.id) {
+          return item;
+        }
+        return _item;
+      });
+
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  const remove = (itemId: number) => {
+    setList((prevList) => {
+      const nextList = prevList.filter((_item) => _item.id !== itemId);
+
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key!, item.value])
+        )
+      );
+
+      return nextList;
+    });
+  };
+
+  return { list, add, update, remove };
+}

package/src/components/batch-variable-selector/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React from 'react';
 
 import { PrivateScopeProvider } from '@flowgram.ai/editor';

package/src/components/condition-row/constants.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { IRules, Op, OpConfigs } from './types';
 
 export const rules: IRules = {

package/src/components/condition-row/hooks/useOp.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useMemo } from 'react';
 
 import { Button, Select } from '@douyinfe/semi-ui';

package/src/components/condition-row/hooks/useRule.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useMemo } from 'react';
 
 import { useScopeAvailable } from '@flowgram.ai/editor';

package/src/components/condition-row/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useMemo } from 'react';
 
 import { Input } from '@douyinfe/semi-ui';

package/src/components/condition-row/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const UIContainer = styled.div`

package/src/components/condition-row/types.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { IFlowConstantRefValue, IFlowRefValue, JsonSchemaBasicType } from '../../typings';
 
 export enum Op {

package/src/components/constant-input/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 

package/src/components/constant-input/types.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { IJsonSchema } from '../../typings';
 
 export interface Strategy<Value = any> {

package/src/components/dynamic-value-input/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useMemo } from 'react';
 
 import { IconButton } from '@douyinfe/semi-ui';
@@ -19,6 +24,7 @@ interface PropsType {
   schema?: IJsonSchema;
   constantProps?: {
     strategies?: Strategy[];
+    schema?: IJsonSchema; // set schema of constant input only
     [key: string]: any;
   };
 }
@@ -44,6 +50,7 @@ export function DynamicValueInput({
       // Display Variable Or Delete
       return (
         <VariableSelector
+          style={{ width: '100%' }}
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
           includeSchema={includeSchema}

package/src/components/dynamic-value-input/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import styled from 'styled-components';
 
 export const UIContainer = styled.div`
@@ -8,6 +13,8 @@ export const UIContainer = styled.div`
 
 export const UIMain = styled.div`
   flex-grow: 1;
+  overflow: hidden;
+  min-width: 0;
 
   & .semi-tree-select,
   & .semi-input-number,

package/src/components/index.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 export * from './variable-selector';
 export * from './type-selector';
 export * from './json-schema-editor';
@@ -5,3 +10,6 @@ export * from './batch-variable-selector';
 export * from './constant-input';
 export * from './dynamic-value-input';
 export * from './condition-row';
+export * from './batch-outputs';
+export * from './prompt-editor';
+export * from './prompt-editor-with-variables';

package/src/components/json-schema-editor/components/blur-input.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useEffect, useState } from 'react';
 
 import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';

package/src/components/json-schema-editor/default-value.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useRef, useState, useCallback } from 'react';
 
 import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';

package/src/components/json-schema-editor/hooks.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { IJsonSchema } from '../../typings';

package/src/components/json-schema-editor/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useMemo, useState } from 'react';
 
 import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';

package/src/components/json-schema-editor/styles.tsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React from 'react';
 
 import styled, { css } from 'styled-components';

package/src/components/json-schema-editor/types.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import { IJsonSchema } from '../../typings';
 
 export interface PropertyValueType extends IJsonSchema {

package/src/components/json-schema-editor/utils.ts

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 /**
  * Return the corresponding string description according to the type of the input value.根据输入值的类型返回对应的字符串描述。
  * @param value - 需要判断类型的值。The value whose type needs to be judged.

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

@@ -0,0 +1,9 @@
+{
+  "name": "prompt-editor",
+  "depMaterials": [],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@codemirror/view",
+    "styled-components"
+  ]
+}

package/src/components/prompt-editor/extensions/jinja.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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 injector = useInjector();
+
+  useLayoutEffect(
+    () =>
+      injector.inject([
+        astDecorator.whole.of((cursor) => {
+          if (cursor.name === 'JinjaStatementStart' || cursor.name === 'JinjaStatementEnd') {
+            return {
+              type: 'className',
+              className: 'jinja-statement-bracket',
+            };
+          }
+
+          if (cursor.name === 'JinjaComment') {
+            return {
+              type: 'className',
+              className: 'jinja-comment',
+            };
+          }
+
+          if (cursor.name === 'JinjaExpression') {
+            return {
+              type: 'className',
+              className: 'jinja-expression',
+            };
+          }
+        }),
+        EditorView.theme({
+          '.jinja-statement-bracket': {
+            color: '#D1009D',
+          },
+          '.jinja-comment': {
+            color: '#0607094D',
+          },
+          '.jinja-expression': {
+            color: '#4E40E5',
+          },
+        }),
+      ]),
+    [injector]
+  );
+
+  return null;
+}
+
+export default JinjaHighlight;

package/src/components/prompt-editor/extensions/language-support.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useLayoutEffect } from 'react';
+
+import { useInjector } from '@coze-editor/editor/react';
+import { languageSupport } from '@coze-editor/editor/preset-prompt';
+
+function LanguageSupport() {
+  const injector = useInjector();
+
+  useLayoutEffect(() => injector.inject([languageSupport]), [injector]);
+
+  return null;
+}
+
+export default LanguageSupport;

package/src/components/prompt-editor/extensions/markdown.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useLayoutEffect } from 'react';
+
+import { useInjector } from '@coze-editor/editor/react';
+import { astDecorator } from '@coze-editor/editor';
+import { EditorView } from '@codemirror/view';
+
+function MarkdownHighlight() {
+  const injector = useInjector();
+
+  useLayoutEffect(
+    () =>
+      injector.inject([
+        astDecorator.whole.of((cursor) => {
+          // # heading
+          if (cursor.name.startsWith('ATXHeading')) {
+            return {
+              type: 'className',
+              className: 'heading',
+            };
+          }
+
+          // *italic*
+          if (cursor.name === 'Emphasis') {
+            return {
+              type: 'className',
+              className: 'emphasis',
+            };
+          }
+
+          // **bold**
+          if (cursor.name === 'StrongEmphasis') {
+            return {
+              type: 'className',
+              className: 'strong-emphasis',
+            };
+          }
+
+          // -
+          // 1.
+          // >
+          if (cursor.name === 'ListMark' || cursor.name === 'QuoteMark') {
+            return {
+              type: 'className',
+              className: 'mark',
+            };
+          }
+        }),
+        EditorView.theme({
+          '.heading': {
+            color: '#00818C',
+            fontWeight: 'bold',
+          },
+          '.emphasis': {
+            fontStyle: 'italic',
+          },
+          '.strong-emphasis': {
+            fontWeight: 'bold',
+          },
+          '.mark': {
+            color: '#4E40E5',
+          },
+        }),
+      ]),
+    [injector]
+  );
+
+  return null;
+}
+
+export default MarkdownHighlight;

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Renderer, EditorProvider } from '@coze-editor/editor/react';
+import preset from '@coze-editor/editor/preset-prompt';
+
+import { PropsType } from './types';
+import { UIContainer } from './styles';
+import MarkdownHighlight from './extensions/markdown';
+import LanguageSupport from './extensions/language-support';
+import JinjaHighlight from './extensions/jinja';
+
+export type PromptEditorPropsType = PropsType;
+
+export function PromptEditor(props: PropsType) {
+  const { value, onChange, readonly, style, hasError, children } = props || {};
+
+  return (
+    <UIContainer $hasError={hasError} style={style}>
+      <EditorProvider>
+        <Renderer
+          plugins={preset}
+          defaultValue={String(value?.content)}
+          options={{
+            readOnly: readonly,
+            editable: !readonly,
+          }}
+          onChange={(e) => {
+            onChange({ type: 'template', content: e.value });
+          }}
+        />
+        <MarkdownHighlight />
+        <LanguageSupport />
+        <JinjaHighlight />
+        {children}
+      </EditorProvider>
+    </UIContainer>
+  );
+}