@flowgram.ai/form-materials 0.1.0-alpha.17 → 0.1.0-alpha.19

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

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-json-schema-editor-container {
+  /* & .semi-input {
+    background-color: #fff;
+    border-radius: 6px;
+    height: 24px;
+  } */
+}
+
+.gedit-m-json-schema-editor-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.gedit-m-json-schema-editor-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-json-schema-editor-expand-detail {
+  display: flex;
+  flex-direction: column;
+}
+
+.gedit-m-json-schema-editor-label {
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+  margin-bottom: 2px;
+}
+
+.gedit-m-json-schema-editor-tree-items {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.gedit-m-json-schema-editor-tree-items.shrink {
+  padding-left: 3px;
+  margin-top: 10px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left {
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::before {
+  /* 竖线 */
+  content: "";
+  height: var(--line-height, 100%);
+  position: absolute;
+  left: -14px;
+  top: -16px;
+  width: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::after {
+  /* 横线 */
+  content: "";
+  position: absolute;
+  left: -14px; /* 横线起点和竖线对齐 */
+  top: 8px; /* 跟随你的行高调整 */
+  width: var(--line-width, 30px); /* 横线长度 */
+  height: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.is-last::before {
+  height: 24px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.show-collapse::after {
+  width: 12px;
+}
+
+.gedit-m-json-schema-editor-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.gedit-m-json-schema-editor-tree-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-collapsible {
+  display: none;
+}
+
+.gedit-m-json-schema-editor-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-json-schema-editor-name {
+  flex-grow: 1;
+}
+
+.gedit-m-json-schema-editor-type {
+}
+
+.gedit-m-json-schema-editor-required {
+}
+
+.gedit-m-json-schema-editor-actions {
+  white-space: nowrap;
+}
+
+.gedit-m-json-schema-editor-default-value-wrapper {
+  margin: 0;
+}
+
+.gedit-m-json-schema-editor-constant-input-wrapper {
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+}

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

@@ -14,11 +14,12 @@ import {
 import preset, { EditorAPI } from '@flowgram.ai/coze-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';
 
+import './styles.css';
+
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
 
@@ -42,22 +43,32 @@ export function PromptEditor(props: PromptEditorPropsType) {
 
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value?.content || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value?.content) {
-      editorRef.current?.setValue(String(value?.content || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
-    <UIContainer $hasError={hasError} style={style}>
+    <div className={`gedit-m-prompt-editor-container ${hasError ? 'has-error' : ''}`} style={style}>
       <EditorProvider>
         <Renderer
           didMount={(editor: EditorAPI) => {
             editorRef.current = editor;
           }}
           plugins={preset}
-          defaultValue={String(value?.content)}
+          defaultValue={editorValue}
           options={{
             readOnly: readonly,
             editable: !readonly,
@@ -76,6 +87,6 @@ export function PromptEditor(props: PromptEditorPropsType) {
         <JinjaHighlight />
         {children}
       </EditorProvider>
-    </UIContainer>
+    </div>
   );
 }

package/src/components/prompt-editor/styles.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-prompt-editor-container {
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+}
+
+.gedit-m-prompt-editor-container.has-error {
+  border: 1px solid var(--semi-color-danger-6);
+}

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

@@ -3,10 +3,23 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
+import React from 'react';
 
-export const PromptEditorWithInputs = lazySuspense(() =>
-  import('./editor').then((module) => ({ default: module.PromptEditorWithInputs }))
-);
+import type { IInputsValues } from '@/shared/flow-value';
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
-export type { PromptEditorWithInputsProps } from './editor';
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+  inputsValues: IInputsValues;
+}
+
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <EditorInputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}

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

@@ -3,10 +3,18 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
+import React from 'react';
 
-export const PromptEditorWithVariables = lazySuspense(() =>
-  import('./editor').then((module) => ({ default: module.PromptEditorWithVariables }))
-);
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 
-export type { PromptEditorWithVariablesProps } from './editor';
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
+
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </PromptEditor>
+  );
+}

package/src/components/variable-selector/context.tsx

@@ -5,10 +5,19 @@
 
 import React, { createContext, useContext, useMemo } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { BaseVariableField } from '@flowgram.ai/editor';
 
+type VariableField = BaseVariableField<{
+  icon?: string | JSX.Element;
+  title?: string;
+  disabled?: boolean;
+}>;
+
 export const VariableSelectorContext = createContext<{
-  skipVariable?: (variable?: BaseVariableField) => boolean;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+  skipVariable?: (variable: VariableField) => boolean;
 }>({});
 
 export const useVariableSelectorContext = () => useContext(VariableSelectorContext);
@@ -16,11 +25,22 @@ export const useVariableSelectorContext = () => useContext(VariableSelectorConte
 export const VariableSelectorProvider = ({
   children,
   skipVariable,
+  includeSchema,
+  excludeSchema,
 }: {
   skipVariable?: (variable?: BaseVariableField) => boolean;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
   children: React.ReactNode;
 }) => {
-  const context = useMemo(() => ({ skipVariable }), [skipVariable]);
+  const context = useMemo(
+    () => ({
+      skipVariable,
+      includeSchema,
+      excludeSchema,
+    }),
+    [skipVariable, includeSchema, excludeSchema]
+  );
 
   return (
     <VariableSelectorContext.Provider value={context}>{children}</VariableSelectorContext.Provider>

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

@@ -9,15 +9,16 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
 import { type TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
 import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
-import { Popover } from '@douyinfe/semi-ui';
+import { Popover, Tag, TreeSelect } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
 import { createInjectMaterial } from '@/shared';
 
 import { useVariableTree } from './use-variable-tree';
-import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 import { useVariableSelectorContext } from './context';
 
+import './styles.css';
+
 export interface VariableSelectorProps {
   value?: string[];
   config?: {
@@ -75,62 +76,71 @@ export const VariableSelector = ({
 
   return (
     <>
-      <UITreeSelect
+      <TreeSelect
+        className={`gedit-m-variable-selector-tree-select ${hasError ? 'error' : ''}`}
         dropdownMatchSelectWidth={false}
         disabled={readonly}
         treeData={treeData}
         size="small"
         value={treeValue}
         clearIcon={null}
-        $error={hasError}
         style={style}
         validateStatus={hasError ? 'error' : undefined}
+        dropdownClassName="gedit-m-variable-selector-dropdown"
         onChange={(_, _config) => {
           onChange((_config as TreeNodeData).keyPath as string[]);
         }}
         renderSelectedItem={(_option: TreeNodeData) => {
           if (!_option?.keyPath) {
             return (
-              <UITag
+              <Tag
+                className="gedit-m-variable-selector-tag"
                 prefixIcon={<IconIssueStroked />}
                 color="amber"
                 closable={!readonly}
                 onClose={() => onChange(undefined)}
               >
                 {config?.notFoundContent ?? 'Undefined'}
-              </UITag>
+              </Tag>
             );
           }
 
           const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
 
           const rootTitle = (
-            <UIRootTitle>
+            <div className="gedit-m-variable-selector-root-title">
               {_option.rootMeta?.title
                 ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} `
                 : null}
-            </UIRootTitle>
+            </div>
           );
 
           return (
             <div>
               <Popover
                 content={
-                  <UIPopoverContent>
+                  <div className="gedit-m-variable-selector-tag-pop">
                     {rootIcon}
                     {rootTitle}
-                    <UIVarName>{_option.keyPath.slice(1).join('.')}</UIVarName>
-                  </UIPopoverContent>
+                    <div className="gedit-m-variable-selector-var-name">
+                      {_option.keyPath.slice(1).join('.')}
+                    </div>
+                  </div>
                 }
               >
-                <UITag
+                <Tag
+                  className="gedit-m-variable-selector-tag"
                   prefixIcon={rootIcon}
                   closable={!readonly}
                   onClose={() => onChange(undefined)}
                 >
                   {rootTitle}
-                  {!_option.isRoot && <UIVarName $inSelector>{_option.label}</UIVarName>}
-                </UITag>
+                  {!_option.isRoot && (
+                    <div className="gedit-m-variable-selector-var-name in-selector">
+                      {_option.label}
+                    </div>
+                  )}
+                </Tag>
               </Popover>
             </div>
           );

package/src/components/variable-selector/styles.css

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-variable-selector-root-title {
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+}
+
+.gedit-m-variable-selector-var-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.in-selector {
+    min-width: 50%;
+  }
+}
+
+.gedit-m-variable-selector-tag {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  height: 22px;
+
+  .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+}
+
+.gedit-m-variable-selector-tree-select {
+  outline: none;
+
+  &.error {
+    outline: 1px solid red;
+  }
+
+  .semi-tree-select-selection {
+    padding: 0px;
+    height: 22px;
+  }
+
+  .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+}
+
+.gedit-m-variable-selector-tag-pop {
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+}
+
+.gedit-m-variable-selector-dropdown {
+  max-height: 300px;
+  overflow: auto;
+}

package/src/components/variable-selector/use-variable-tree.tsx

@@ -15,6 +15,8 @@ import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
+import { useVariableSelectorContext } from './context';
+
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;
   title?: string;
@@ -26,7 +28,13 @@ export function useVariableTree(params: {
   excludeSchema?: IJsonSchema | IJsonSchema[];
   skipVariable?: (variable: VariableField) => boolean;
 }): TreeNodeData[] {
-  const { includeSchema, excludeSchema, skipVariable } = params;
+  const context = useVariableSelectorContext();
+
+  const {
+    includeSchema = context.includeSchema,
+    excludeSchema = context.excludeSchema,
+    skipVariable = context.skipVariable,
+  } = params;
 
   const typeManager = useTypeManager() as JsonSchemaTypeManager;
   const variables = useAvailableVariables();

package/src/index.ts

@@ -115,6 +115,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
   type IPolyfillRoot,
   unstableSetCreateRoot,
   withSuspense,

package/src/shared/flow-value/index.ts

@@ -13,4 +13,5 @@ export {
   type IFlowExpressionValue,
   type IFlowTemplateValue,
   type IFlowConstantRefValue,
+  type IInputsValues,
 } from './types';

package/src/shared/flow-value/types.ts

@@ -43,3 +43,7 @@ export type IFlowValue =
   | IFlowTemplateValue;
 
 export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;
+
+export interface IInputsValues {
+  [key: string]: IInputsValues | IFlowValue | undefined;
+}

package/src/shared/index.ts

@@ -13,6 +13,7 @@ export {
   type IFlowTemplateValue,
   type IFlowValue,
   type IFlowValueExtra,
+  type IInputsValues,
 } from './flow-value';
 export {
   formatLegacyRefOnInit,

package/src/shared/inject-material/index.tsx

@@ -62,7 +62,7 @@ export function createInjectMaterial<Props>(
     const container = usePlaygroundContainer();
 
     // Check if renderer registry is bound in container
-    if (!container?.isBound(FlowRendererRegistry)) {
+    if (!container?.isBound?.(FlowRendererRegistry)) {
       // If no registry, use default component directly
       return React.createElement(Component as (props?: any) => any, { ...props });
     }

package/dist/cjs/components/batch-outputs/styles.js

@@ -1,60 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    UIRows: ()=>UIRows,
-    UIRow: ()=>UIRow
-});
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
-const UIRows = external_styled_components_default().div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 10px;
-`;
-const UIRow = external_styled_components_default().div`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`;
-exports.UIRow = __webpack_exports__.UIRow;
-exports.UIRows = __webpack_exports__.UIRows;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "UIRow",
-    "UIRows"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/cjs/components/condition-row/styles.js

@@ -1,77 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    UIOperator: ()=>UIOperator,
-    UIContainer: ()=>UIContainer,
-    UIRight: ()=>UIRight,
-    UIValues: ()=>UIValues,
-    UILeft: ()=>UILeft
-});
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
-const UIContainer = external_styled_components_default().div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-const UIOperator = external_styled_components_default().div``;
-const UILeft = external_styled_components_default().div`
-  width: 100%;
-`;
-const UIRight = external_styled_components_default().div`
-  width: 100%;
-`;
-const UIValues = external_styled_components_default().div`
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-`;
-exports.UIContainer = __webpack_exports__.UIContainer;
-exports.UILeft = __webpack_exports__.UILeft;
-exports.UIOperator = __webpack_exports__.UIOperator;
-exports.UIRight = __webpack_exports__.UIRight;
-exports.UIValues = __webpack_exports__.UIValues;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "UIContainer",
-    "UILeft",
-    "UIOperator",
-    "UIRight",
-    "UIValues"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});