fix(demo): endNode form-meta and form validation (#293)

* feat(docs): add contact us page

* fix(demo): endNode form-meta and form validation

apps/demo-fixed-layout/src/initial-data.ts

@@ -111,7 +111,7 @@ export const initialData: FlowDocumentJSON = {
               data: {
                 title: 'If_0',
                 inputsValues: {
-                  condition: '',
+                  condition: { type: 'constant', content: true },
                 },
                 inputs: {
                   type: 'object',
@@ -131,7 +131,7 @@ export const initialData: FlowDocumentJSON = {
               data: {
                 title: 'If_1',
                 inputsValues: {
-                  condition: '',
+                  condition: { type: 'constant', content: true },
                 },
                 inputs: {
                   type: 'object',
@@ -168,7 +168,7 @@ export const initialData: FlowDocumentJSON = {
           data: {
             title: 'Catch Block 1',
             inputsValues: {
-              condition: '',
+              condition: { type: 'constant', content: true },
             },
             inputs: {
               type: 'object',
@@ -188,7 +188,7 @@ export const initialData: FlowDocumentJSON = {
           data: {
             title: 'Catch Block 2',
             inputsValues: {
-              condition: '',
+              condition: { type: 'constant', content: true },
             },
             inputs: {
               type: 'object',

apps/demo-fixed-layout/src/nodes/condition/index.ts

@@ -31,7 +31,7 @@ export const ConditionNodeRegistry: FlowNodeRegistry = {
           data: {
             title: 'If_0',
             inputsValues: {
-              condition: '',
+              condition: { type: 'constant', content: '' },
             },
             inputs: {
               type: 'object',
@@ -51,7 +51,7 @@ export const ConditionNodeRegistry: FlowNodeRegistry = {
           data: {
             title: 'If_1',
             inputsValues: {
-              condition: '',
+              condition: { type: 'constant', content: '' },
             },
             inputs: {
               type: 'object',

apps/demo-fixed-layout/src/nodes/end/form-meta.tsx

@@ -1,16 +1,13 @@
-import {
-  Field,
-  FieldRenderProps,
-  FormRenderProps,
-  FormMeta,
-  ValidateTrigger,
-} from '@flowgram.ai/fixed-layout-editor';
+import { mapValues } from 'lodash-es';
+import { IFlowValue } from '@flowgram.ai/form-materials';
+import { Field, FieldRenderProps, FormMeta } from '@flowgram.ai/fixed-layout-editor';
 
-import { FlowNodeJSON, JsonSchema } from '../../typings';
+import { defaultFormMeta } from '../default-form-meta';
+import { JsonSchema } from '../../typings';
 import { useIsSidebar } from '../../hooks';
 import { FormHeader, FormContent, FormOutputs, PropertiesEdit } from '../../form-components';
 
-export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON['data']>) => {
+export const renderForm = () => {
   const isSidebar = useIsSidebar();
   if (isSidebar) {
     return (
@@ -20,12 +17,30 @@ export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON['data']>) => {
           <Field
             name="outputs.properties"
             render={({
-              field: { value, onChange },
-              fieldState,
+              field: { value: propertiesSchemaValue, onChange: propertiesSchemaChange },
             }: FieldRenderProps<Record<string, JsonSchema>>) => (
-              <>
-                <PropertiesEdit value={value} onChange={onChange} useFx={true} />
-              </>
+              <Field<Record<string, IFlowValue>> name="inputsValues">
+                {({ field: { value: propertiesValue, onChange: propertiesValueChange } }) => {
+                  const onChange = (newProperties: Record<string, JsonSchema>) => {
+                    const newPropertiesValue = mapValues(newProperties, (v) => v.default);
+                    const newPropetiesSchema = mapValues(newProperties, (v) => {
+                      delete v.default;
+                      return v;
+                    });
+                    propertiesValueChange(newPropertiesValue);
+                    propertiesSchemaChange(newPropetiesSchema);
+                  };
+                  const value = mapValues(propertiesSchemaValue, (v, key) => ({
+                    ...v,
+                    default: propertiesValue?.[key],
+                  }));
+                  return (
+                    <>
+                      <PropertiesEdit value={value} onChange={onChange} useFx={true} />
+                    </>
+                  );
+                }}
+              </Field>
             )}
           />
           <FormOutputs />
@@ -43,10 +58,7 @@ export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON['data']>) => {
   );
 };
 
-export const formMeta: FormMeta<FlowNodeJSON['data']> = {
+export const formMeta: FormMeta = {
+  ...defaultFormMeta,
   render: renderForm,
-  validateTrigger: ValidateTrigger.onChange,
-  validate: {
-    title: ({ value }: { value: string }) => (value ? undefined : 'Title is required'),
-  },
 };

apps/demo-fixed-layout/src/nodes/llm/index.ts

@@ -19,7 +19,24 @@ export const LLMNodeRegistry: FlowNodeRegistry = {
       type: 'llm',
       data: {
         title: `LLM_${++index}`,
-        inputsValues: {},
+        inputsValues: {
+          modelType: {
+            type: 'constant',
+            content: 'gpt-3.5-turbo',
+          },
+          temperature: {
+            type: 'constant',
+            content: 0.5,
+          },
+          systemPrompt: {
+            type: 'constant',
+            content: 'You are an AI assistant.',
+          },
+          prompt: {
+            type: 'constant',
+            content: '',
+          },
+        },
         inputs: {
           type: 'object',
           required: ['modelType', 'temperature', 'prompt'],

apps/demo-free-layout/src/initial-data.ts

@@ -138,7 +138,24 @@ export const initialData: FlowDocumentJSON = {
           },
           data: {
             title: 'LLM_4',
-            inputsValues: {},
+            inputsValues: {
+              modelType: {
+                type: 'constant',
+                content: 'gpt-3.5-turbo',
+              },
+              temperature: {
+                type: 'constant',
+                content: 0.5,
+              },
+              systemPrompt: {
+                type: 'constant',
+                content: 'You are an AI assistant.',
+              },
+              prompt: {
+                type: 'constant',
+                content: '',
+              },
+            },
             inputs: {
               type: 'object',
               required: ['modelType', 'temperature', 'prompt'],
@@ -178,7 +195,24 @@ export const initialData: FlowDocumentJSON = {
           },
           data: {
             title: 'LLM_5',
-            inputsValues: {},
+            inputsValues: {
+              modelType: {
+                type: 'constant',
+                content: 'gpt-3.5-turbo',
+              },
+              temperature: {
+                type: 'constant',
+                content: 0.5,
+              },
+              systemPrompt: {
+                type: 'constant',
+                content: 'You are an AI assistant.',
+              },
+              prompt: {
+                type: 'constant',
+                content: '',
+              },
+            },
             inputs: {
               type: 'object',
               required: ['modelType', 'temperature', 'prompt'],
@@ -314,7 +348,24 @@ export const initialData: FlowDocumentJSON = {
           },
           data: {
             title: 'LLM_1',
-            inputsValues: {},
+            inputsValues: {
+              modelType: {
+                type: 'constant',
+                content: 'gpt-3.5-turbo',
+              },
+              temperature: {
+                type: 'constant',
+                content: 0.5,
+              },
+              systemPrompt: {
+                type: 'constant',
+                content: 'You are an AI assistant.',
+              },
+              prompt: {
+                type: 'constant',
+                content: '',
+              },
+            },
             inputs: {
               type: 'object',
               required: ['modelType', 'temperature', 'prompt'],

apps/demo-free-layout/src/nodes/end/form-meta.tsx

@@ -1,16 +1,13 @@
-import {
-  Field,
-  FieldRenderProps,
-  FormRenderProps,
-  FormMeta,
-  ValidateTrigger,
-} from '@flowgram.ai/free-layout-editor';
+import { mapValues } from 'lodash-es';
+import { Field, FieldRenderProps, FormMeta } from '@flowgram.ai/free-layout-editor';
+import { IFlowValue } from '@flowgram.ai/form-materials';
 
-import { FlowNodeJSON, JsonSchema } from '../../typings';
+import { defaultFormMeta } from '../default-form-meta';
+import { JsonSchema } from '../../typings';
 import { useIsSidebar } from '../../hooks';
 import { FormHeader, FormContent, FormOutputs, PropertiesEdit } from '../../form-components';
 
-export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON>) => {
+export const renderForm = () => {
   const isSidebar = useIsSidebar();
   if (isSidebar) {
     return (
@@ -20,12 +17,30 @@ export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON>) => {
           <Field
             name="outputs.properties"
             render={({
-              field: { value, onChange },
-              fieldState,
+              field: { value: propertiesSchemaValue, onChange: propertiesSchemaChange },
             }: FieldRenderProps<Record<string, JsonSchema>>) => (
-              <>
-                <PropertiesEdit value={value} onChange={onChange} useFx={true} />
-              </>
+              <Field<Record<string, IFlowValue>> name="inputsValues">
+                {({ field: { value: propertiesValue, onChange: propertiesValueChange } }) => {
+                  const onChange = (newProperties: Record<string, JsonSchema>) => {
+                    const newPropertiesValue = mapValues(newProperties, (v) => v.default);
+                    const newPropetiesSchema = mapValues(newProperties, (v) => {
+                      delete v.default;
+                      return v;
+                    });
+                    propertiesValueChange(newPropertiesValue);
+                    propertiesSchemaChange(newPropetiesSchema);
+                  };
+                  const value = mapValues(propertiesSchemaValue, (v, key) => ({
+                    ...v,
+                    default: propertiesValue?.[key],
+                  }));
+                  return (
+                    <>
+                      <PropertiesEdit value={value} onChange={onChange} useFx={true} />
+                    </>
+                  );
+                }}
+              </Field>
             )}
           />
           <FormOutputs />
@@ -43,10 +58,7 @@ export const renderForm = ({ form }: FormRenderProps<FlowNodeJSON>) => {
   );
 };
 
-export const formMeta: FormMeta<FlowNodeJSON> = {
+export const formMeta: FormMeta = {
+  ...defaultFormMeta,
   render: renderForm,
-  validateTrigger: ValidateTrigger.onChange,
-  validate: {
-    title: ({ value }: { value: string }) => (value ? undefined : 'Title is required'),
-  },
 };

apps/demo-free-layout/src/nodes/llm/index.ts

@@ -24,7 +24,24 @@ export const LLMNodeRegistry: FlowNodeRegistry = {
       type: 'llm',
       data: {
         title: `LLM_${++index}`,
-        inputsValues: {},
+        inputsValues: {
+          modelType: {
+            type: 'constant',
+            content: 'gpt-3.5-turbo',
+          },
+          temperature: {
+            type: 'constant',
+            content: 0.5,
+          },
+          systemPrompt: {
+            type: 'constant',
+            content: 'You are an AI assistant.',
+          },
+          prompt: {
+            type: 'constant',
+            content: '',
+          },
+        },
         inputs: {
           type: 'object',
           required: ['modelType', 'temperature', 'prompt'],

apps/docs/src/en/api/utils/get-node-form.mdx

@@ -9,11 +9,20 @@ Get the form capabilities of the node, needs to be enabled node engine
 
 ```tsx pure
 
+// 1. BaseNode
 function BaseNode({ node }) {
   const form = getNodeForm(node);
   console.log(form.getValueIn('title'))
   return <div>{form?.render()}</div>
 }
+
+// 2. useNodeRender
+function BaseNode() {
+  const { form } = useNodeRender();
+  console.log(form.getValueIn('title'))
+  return <div>{form?.render()}</div>
+}
+
 ```
 
 ## Return Inteface
@@ -45,6 +54,10 @@ export interface NodeFormProps<TValues> {
    * @param name path
    */
   setValueIn<TValue>(name: FieldName, value: TValue): void;
+  /**
+   * set form values
+   */
+  updateFormValues(values: any): void;
   /**
    * Render form
    */
@@ -67,7 +80,7 @@ export interface NodeFormProps<TValues> {
   onFormValueChangeIn<TValue = FieldValue, TFormValue = FieldValue>(
     name: FieldName,
     callback: (payload: onFormValueChangeInPayload<TValue, TFormValue>) => void
-  ): void;
+  ): Disposable;
 }
 ```
 

apps/docs/src/en/guide/_meta.json

@@ -1,5 +1,6 @@
 [
   "introduction",
+  "contact-us",
   {
     "type": "dir",
     "name": "getting-started",

apps/docs/src/en/guide/contact-us.mdx

@@ -0,0 +1,7 @@
+# Contact US
+
+- Issues: [Issues](https://github.com/bytedance/flowgram.ai/issues)
+- Discord: https://discord.gg/SwDWdrgA9f
+- Lark: Scan the QR code below with [Register Feishu](https://www.feishu.cn/en/) to join our FlowGram user group.
+
+<img src="/lark-group.png" width="200"/>

apps/docs/src/zh/api/utils/get-node-form.mdx

@@ -9,11 +9,20 @@
 
 ```tsx pure
 
+// 1. BaseNode
 function BaseNode({ node }) {
   const form = getNodeForm(node);
   console.log(form.getValueIn('title'))
   return <div>{form?.render()}</div>
 }
+
+// 2. useNodeRender
+function BaseNode() {
+  const { form } = useNodeRender();
+  console.log(form.getValueIn('title'))
+  return <div>{form?.render()}</div>
+}
+
 ```
 
 ## Return Inteface
@@ -45,6 +54,10 @@ export interface NodeFormProps<TValues> {
    * @param name path
    */
   setValueIn<TValue>(name: FieldName, value: TValue): void;
+  /**
+   * set form values
+   */
+  updateFormValues(values: any): void;
   /**
    * Render form
    */
@@ -67,7 +80,8 @@ export interface NodeFormProps<TValues> {
   onFormValueChangeIn<TValue = FieldValue, TFormValue = FieldValue>(
     name: FieldName,
     callback: (payload: onFormValueChangeInPayload<TValue, TFormValue>) => void
-  ): void;
+  ): Disposable;
 }
+
 ```
 

apps/docs/src/zh/guide/_meta.json

@@ -1,5 +1,6 @@
 [
   "introduction",
+  "contact-us",
   {
     "type": "dir",
     "name": "getting-started",

apps/docs/src/zh/guide/contact-us.mdx

@@ -0,0 +1,7 @@
+# 联系我们
+
+- Issues: [Issues](https://github.com/bytedance/flowgram.ai/issues)
+- Discord: https://discord.gg/SwDWdrgA9f
+- Lark: 通过 [注册飞书](https://www.feishu.cn/en/) 并扫描下边的二维码加入飞书群
+
+<img src="/lark-group.png" width="200"/>

apps/docs/src/zh/guide/question.mdx

@@ -0,0 +1,3 @@
+# 常见问题
+
+todo