1+ import { useCallback } from "react"
2+
13import { InfoCircleOutlined } from "@ant-design/icons"
2- import Editor from "@monaco-editor/react"
34import { theme , Form , Tooltip , InputNumber , Switch , Input , AutoComplete } from "antd"
4- import { Rule } from "antd/es/form"
5+ import { FormInstance , Rule } from "antd/es/form"
56import Link from "next/link"
67import { createUseStyles } from "react-jss"
78
8- import { useAppTheme } from "@/oss/components/Layout/ThemeContextProvider "
9+ import SharedEditor from "@/oss/components/Playground/Components/SharedEditor "
910import { isValidRegex } from "@/oss/lib/helpers/validators"
1011import { generatePaths } from "@/oss/lib/transformers"
1112import { EvaluationSettingsTemplate , JSSTheme } from "@/oss/lib/Types"
@@ -15,15 +16,24 @@ import {Messages} from "./Messages"
1516type DynamicFormFieldProps = EvaluationSettingsTemplate & {
1617 name : string | string [ ]
1718 traceTree : Record < string , any >
19+ form ?: FormInstance < any >
1820}
1921
2022const useStyles = createUseStyles ( ( theme : JSSTheme ) => ( {
21- editor : {
22- border : `1px solid ${ theme . colorBorder } ` ,
23- borderRadius : theme . borderRadius ,
24- overflow : "hidden" ,
25- "& .monaco-editor" : {
26- width : "0 !important" ,
23+ codeEditor : {
24+ "& .agenta-editor-wrapper" : {
25+ minHeight : 375 ,
26+ } ,
27+ "&.agenta-shared-editor" : {
28+ borderColor : theme . colorBorder ,
29+ } ,
30+ } ,
31+ objectEditor : {
32+ "& .agenta-editor-wrapper" : {
33+ minHeight : 120 ,
34+ } ,
35+ "&.agenta-shared-editor" : {
36+ borderColor : theme . colorBorder ,
2737 } ,
2838 } ,
2939 ExternalHelp : {
@@ -45,6 +55,41 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
4555 } ,
4656} ) )
4757
58+ interface ControlledSharedEditorProps {
59+ value ?: unknown
60+ onChange ?: ( value : string ) => void
61+ className ?: string
62+ language ?: "json" | "yaml" | "code"
63+ }
64+
65+ const ControlledSharedEditor = ( {
66+ value,
67+ onChange,
68+ className,
69+ language,
70+ } : ControlledSharedEditorProps ) => {
71+ const handleValueChange = useCallback (
72+ ( next : string ) => {
73+ onChange ?.( next )
74+ } ,
75+ [ onChange ] ,
76+ )
77+
78+ return (
79+ < SharedEditor
80+ initialValue = { value }
81+ value = { value as string }
82+ handleChange = { handleValueChange }
83+ className = { className }
84+ syncWithInitialValueChanges
85+ editorProps = { {
86+ codeOnly : true ,
87+ ...( language ? { language} : { } ) ,
88+ } }
89+ />
90+ )
91+ }
92+
4893export const DynamicFormField : React . FC < DynamicFormFieldProps > = ( {
4994 name,
5095 label,
@@ -55,11 +100,24 @@ export const DynamicFormField: React.FC<DynamicFormFieldProps> = ({
55100 max,
56101 required,
57102 traceTree,
103+ form,
58104} ) => {
59- const { appTheme} = useAppTheme ( )
105+ const settingsValue = Form . useWatch ( name , form )
106+
60107 const classes = useStyles ( )
61108 const { token} = theme . useToken ( )
62109
110+ const handleValueChange = useCallback (
111+ ( next : string ) => {
112+ if ( form ) {
113+ form . setFieldsValue ( {
114+ [ name as string ] : next ,
115+ } )
116+ }
117+ } ,
118+ [ form , name ] ,
119+ )
120+
63121 const rules : Rule [ ] = [ { required : required ?? true , message : "This field is required" } ]
64122 if ( type === "regex" )
65123 rules . push ( {
@@ -100,7 +158,11 @@ export const DynamicFormField: React.FC<DynamicFormFieldProps> = ({
100158 ) }
101159 </ div >
102160 }
103- initialValue = { defaultVal }
161+ initialValue = {
162+ type === "object" && defaultVal && typeof defaultVal === "object"
163+ ? JSON . stringify ( defaultVal , null , 2 )
164+ : defaultVal
165+ }
104166 rules = { rules }
105167 hidden = { type === "hidden" }
106168 >
@@ -126,21 +188,18 @@ export const DynamicFormField: React.FC<DynamicFormFieldProps> = ({
126188 ) : type === "text" ? (
127189 < Input . TextArea rows = { 10 } />
128190 ) : type === "code" ? (
129- < Editor
130- className = { classes . editor }
131- height = { 375 }
132- width = "100%"
133- language = "python"
134- theme = { `vs-${ appTheme } ` }
191+ < ControlledSharedEditor
192+ className = { classes . codeEditor }
193+ value = { settingsValue }
194+ onChange = { handleValueChange }
195+ language = "code"
135196 />
136197 ) : type === "object" ? (
137- < Editor
138- className = { classes . editor }
139- height = { 120 }
140- width = "100%"
198+ < ControlledSharedEditor
199+ className = { classes . objectEditor }
141200 language = "json"
142- options = { { lineNumbers : "off" } }
143- theme = { `vs- ${ appTheme } ` }
201+ value = { settingsValue }
202+ onChange = { handleValueChange }
144203 />
145204 ) : null }
146205 </ Form . Item >
0 commit comments