@flowgram.ai/form-materials 0.1.0-alpha.10

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

@@ -0,0 +1,267 @@
+/**
+ * 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';
+import {
+  IconExpand,
+  IconShrink,
+  IconPlus,
+  IconChevronDown,
+  IconChevronRight,
+  IconMinus,
+} from '@douyinfe/semi-icons';
+
+import { TypeSelector } from '../type-selector';
+import { IJsonSchema } from '../../typings';
+import { ConfigType, PropertyValueType } from './types';
+import {
+  IconAddChildren,
+  UIActions,
+  UICollapseTrigger,
+  UICollapsible,
+  UIContainer,
+  UIExpandDetail,
+  UILabel,
+  UIProperties,
+  UIPropertyLeft,
+  UIPropertyMain,
+  UIPropertyRight,
+  UIRequired,
+  UIType,
+} from './styles';
+import { UIName } from './styles';
+import { DefaultValueWrapper, UIRow } from './styles';
+import { usePropertiesEdit } from './hooks';
+import { DefaultValue } from './default-value';
+import { BlurInput } from './components/blur-input';
+
+export function JsonSchemaEditor(props: {
+  value?: IJsonSchema;
+  onChange?: (value: IJsonSchema) => void;
+  config?: ConfigType;
+  className?: string;
+}) {
+  const { value = { type: 'object' }, config = {}, onChange: onChangeProps } = props;
+  const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
+    value,
+    onChangeProps
+  );
+
+  return (
+    <UIContainer className={props.className}>
+      <UIProperties>
+        {propertyList.map((_property, index) => (
+          <PropertyEdit
+            key={_property.key}
+            value={_property}
+            config={config}
+            $index={index}
+            onChange={(_v) => {
+              onEditProperty(_property.key!, _v);
+            }}
+            onRemove={() => {
+              onRemoveProperty(_property.key!);
+            }}
+          />
+        ))}
+      </UIProperties>
+      <Button
+        size="small"
+        style={{ marginTop: 10, marginLeft: 16 }}
+        icon={<IconPlus />}
+        onClick={onAddProperty}
+      >
+        {config?.addButtonText ?? 'Add'}
+      </Button>
+    </UIContainer>
+  );
+}
+
+function PropertyEdit(props: {
+  value?: PropertyValueType;
+  config?: ConfigType;
+  onChange?: (value: PropertyValueType) => void;
+  onRemove?: () => void;
+  $isLast?: boolean;
+  $index?: number;
+  $isFirst?: boolean;
+  $parentExpand?: boolean;
+  $parentType?: string;
+  $showLine?: boolean;
+  $level?: number; // 添加层级属性
+}) {
+  const {
+    value,
+    config,
+    $level = 0,
+    onChange: onChangeProps,
+    onRemove,
+    $index,
+    $isFirst,
+    $isLast,
+    $parentExpand = false,
+    $parentType = '',
+    $showLine,
+  } = props;
+
+  const [expand, setExpand] = useState(false);
+  const [collapse, setCollapse] = useState(false);
+
+  const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
+
+  const typeSelectorValue = useMemo(() => ({ type, items }), [type, items]);
+
+  const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } =
+    usePropertiesEdit(value, onChangeProps);
+
+  const onChange = (key: string, _value: any) => {
+    onChangeProps?.({
+      ...(value || {}),
+      [key]: _value,
+    });
+  };
+
+  const showCollapse = isDrilldownObject && propertyList.length > 0;
+
+  return (
+    <>
+      <UIPropertyLeft
+        type={type}
+        $index={$index}
+        $isFirst={$isFirst}
+        $isLast={$isLast}
+        $showLine={$showLine}
+        $isExpand={expand}
+        $parentExpand={$parentExpand}
+        $parentType={$parentType}
+      >
+        {showCollapse && (
+          <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
+            {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
+          </UICollapseTrigger>
+        )}
+      </UIPropertyLeft>
+      <UIPropertyRight>
+        <UIPropertyMain
+          $showCollapse={showCollapse}
+          $collapse={collapse}
+          $expand={expand}
+          type={type}
+        >
+          <UIRow>
+            <UIName>
+              <BlurInput
+                placeholder={config?.placeholder ?? 'Input Variable Name'}
+                size="small"
+                value={name}
+                onChange={(value) => onChange('name', value)}
+              />
+            </UIName>
+            <UIType>
+              <TypeSelector
+                value={typeSelectorValue}
+                onChange={(_value) => {
+                  onChangeProps?.({
+                    ...(value || {}),
+                    ..._value,
+                  });
+                }}
+              />
+            </UIType>
+            <UIRequired>
+              <Checkbox
+                checked={isPropertyRequired}
+                onChange={(e) => onChange('isPropertyRequired', e.target.checked)}
+              />
+            </UIRequired>
+            <UIActions>
+              <IconButton
+                size="small"
+                theme="borderless"
+                icon={expand ? <IconShrink size="small" /> : <IconExpand size="small" />}
+                onClick={() => {
+                  setExpand((_expand) => !_expand);
+                }}
+              />
+              {isDrilldownObject && (
+                <IconButton
+                  size="small"
+                  theme="borderless"
+                  icon={<IconAddChildren />}
+                  onClick={() => {
+                    onAddProperty();
+                    setCollapse(true);
+                  }}
+                />
+              )}
+              <IconButton
+                size="small"
+                theme="borderless"
+                icon={<IconMinus size="small" />}
+                onClick={onRemove}
+              />
+            </UIActions>
+          </UIRow>
+          {expand && (
+            <UIExpandDetail>
+              <UILabel>{config?.descTitle ?? 'Description'}</UILabel>
+              <BlurInput
+                size="small"
+                value={description}
+                onChange={(value) => onChange('description', value)}
+                placeholder={config?.descPlaceholder ?? 'Help LLM to understand the property'}
+              />
+              {$level === 0 && type && type !== 'array' && (
+                <>
+                  <UILabel style={{ marginTop: 10 }}>
+                    {config?.defaultValueTitle ?? 'Default Value'}
+                  </UILabel>
+                  <DefaultValueWrapper>
+                    <DefaultValue
+                      value={defaultValue}
+                      schema={value}
+                      type={type}
+                      placeholder={config?.defaultValuePlaceholder}
+                      jsonFormatText={config?.jsonFormatText}
+                      onChange={(value) => onChange('default', value)}
+                    />
+                  </DefaultValueWrapper>
+                </>
+              )}
+            </UIExpandDetail>
+          )}
+        </UIPropertyMain>
+        {showCollapse && (
+          <UICollapsible $collapse={collapse}>
+            <UIProperties $shrink={true}>
+              {propertyList.map((_property, index) => (
+                <PropertyEdit
+                  key={_property.key}
+                  value={_property}
+                  config={config}
+                  $level={$level + 1} // 传递递增的层级
+                  $parentExpand={expand}
+                  $parentType={type}
+                  onChange={(_v) => {
+                    onEditProperty(_property.key!, _v);
+                  }}
+                  onRemove={() => {
+                    onRemoveProperty(_property.key!);
+                  }}
+                  $isLast={index === propertyList.length - 1}
+                  $isFirst={index === 0}
+                  $index={index}
+                  $showLine={true}
+                />
+              ))}
+            </UIProperties>
+          </UICollapsible>
+        )}
+      </UIPropertyRight>
+    </>
+  );
+}

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

@@ -0,0 +1,240 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import styled, { css } from 'styled-components';
+import Icon from '@douyinfe/semi-icons';
+
+export const UIContainer = styled.div`
+  /* & .semi-input {
+    background-color: #fff;
+    border-radius: 6px;
+    height: 24px;
+  } */
+`;
+
+export const UIRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+export const UICollapseTrigger = styled.div`
+  cursor: pointer;
+  margin-right: 5px;
+`;
+
+export const UIExpandDetail = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const UILabel = styled.div`
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+  margin-bottom: 2px;
+`;
+
+export const UIProperties = styled.div<{ $shrink?: boolean }>`
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  ${({ $shrink }) =>
+    $shrink &&
+    css`
+      padding-left: 10px;
+      margin-top: 10px;
+    `}
+`;
+
+export const UIPropertyLeft = styled.div<{
+  $isLast?: boolean;
+  $showLine?: boolean;
+  $isExpand?: boolean;
+  type?: string;
+  $isFirst?: boolean;
+  $index?: number;
+  $parentExpand?: boolean;
+  $parentType?: string;
+}>`
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+
+  ${({ $showLine, $isLast, $parentType }) => {
+    let height = '100%';
+    if ($parentType && $isLast) {
+      height = '24px';
+    }
+
+    return (
+      $showLine &&
+      css`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -22px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -22px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: 18px; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `
+    );
+  }}
+`;
+
+export const UIPropertyRight = styled.div`
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+
+export const UIPropertyMain = styled.div<{
+  $expand?: boolean;
+  type?: string;
+  $collapse?: boolean;
+  $showCollapse?: boolean;
+}>`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+
+  ${({ $expand, type, $collapse, $showCollapse }) => {
+    const beforeElement = `
+      &::before {
+        /* 竖线 */
+        content: '';
+        height: 100%;
+        position: absolute;
+        left: -12px;
+        top: 18px;
+        width: 1px;
+        background: #d9d9d9;
+        display: block;
+      }`;
+
+    return (
+      $expand &&
+      css`
+        background-color: #f5f5f5;
+        padding: 10px;
+        border-radius: 4px;
+
+        ${$showCollapse &&
+        $collapse &&
+        (type === 'array' || type === 'object') &&
+        css`
+          ${beforeElement}
+        `}
+      `
+    );
+  }}
+`;
+
+export const UICollapsible = styled.div<{ $collapse?: boolean }>`
+  display: none;
+
+  ${({ $collapse }) =>
+    $collapse &&
+    css`
+      display: block;
+    `}
+`;
+
+export const UIName = styled.div`
+  flex-grow: 1;
+`;
+
+export const UIType = styled.div``;
+
+export const UIRequired = styled.div``;
+
+export const UIActions = styled.div`
+  white-space: nowrap;
+`;
+
+const iconAddChildrenSvg = (
+  <svg
+    className="icon-icon icon-icon-coz_add_node "
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+    ></path>
+    <path d="M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"></path>
+  </svg>
+);
+
+export const IconAddChildren = () => <Icon size="small" svg={iconAddChildrenSvg} />;
+
+export const DefaultValueWrapper = styled.div`
+  margin: 0;
+`;
+
+export const JSONViewerWrapper = styled.div`
+  padding: 0 0 24px;
+  &:first-child {
+    margin-top: 0px;
+  }
+`;
+
+export const JSONHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--semi-color-fill-0);
+  border-radius: 6px 6px 0 0;
+  height: 36px;
+  padding: 0 8px 0 12px;
+`;
+
+export const JSONHeaderLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const JSONHeaderRight = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const ConstantInputWrapper = styled.div`
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '../../typings';
+
+export interface PropertyValueType extends IJsonSchema {
+  name?: string;
+  key?: number;
+  isPropertyRequired?: boolean;
+}
+
+export type PropertiesValueType = Pick<PropertyValueType, 'properties' | 'required'>;
+
+export type JsonSchemaProperties = IJsonSchema['properties'];
+
+export interface ConfigType {
+  placeholder?: string;
+  descTitle?: string;
+  descPlaceholder?: string;
+  defaultValueTitle?: string;
+  defaultValuePlaceholder?: string;
+  addButtonText?: string;
+  jsonFormatText?: string;
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ * @returns 返回值的类型字符串 The type string of the return value（'string', 'integer', 'number', 'boolean', 'object', 'array', 'other'）。
+ */
+export function getValueType(value: any): string {
+  const type = typeof value;
+
+  if (type === 'string') {
+    return 'string';
+  } else if (type === 'number') {
+    return Number.isInteger(value) ? 'integer' : 'number';
+  } else if (type === 'boolean') {
+    return 'boolean';
+  } else if (type === 'object') {
+    if (value === null) {
+      return 'other';
+    }
+    return Array.isArray(value) ? 'array' : 'object';
+  } else {
+    // undefined, function, symbol, bigint etc.
+    return 'other';
+  }
+}

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

@@ -0,0 +1,9 @@
+{
+  "name": "prompt-editor",
+  "depMaterials": [],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
+    "@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;