From 00b5583a56dc56b06d8b89e3300f010019587c2c Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Fri, 9 Feb 2024 14:18:25 -0800
Subject: [PATCH 01/14] add TextInputField component

---
 .../components/react-flow/TextInputField.tsx  | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 packages/client/editor/src/components/react-flow/TextInputField.tsx

diff --git a/packages/client/editor/src/components/react-flow/TextInputField.tsx b/packages/client/editor/src/components/react-flow/TextInputField.tsx
new file mode 100644
index 0000000000..c824a7b39e
--- /dev/null
+++ b/packages/client/editor/src/components/react-flow/TextInputField.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Input } from '@magickml/ui';
+import { v4 as uuidv4 } from 'uuid'
+
+export const TextInputField = ({
+  value,
+  onChange,
+  onFocus,
+  handleBlur,
+}: {
+  value: string
+  onChange: (e) => void
+  onFocus?: (inputId: string) => void
+  handleBlur?: () => void
+}) => {
+
+  const inputId = React.useMemo(() => `text-input::${uuidv4()}`, []);
+  return (
+    <Input
+      id={inputId}
+      className='bg-dark-3 h-5 rounded-sm px-2'
+      type="text"
+      placeholder="input text..."
+      value={value}
+      onChange={(e) => onChange(e)}
+      onFocus={() => onFocus(inputId)}
+      onBlur={handleBlur}
+    />
+  )
+};

From a48cbe1436e4cf8053964c993e5335c330cd44d1 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:06:27 -0800
Subject: [PATCH 02/14] make ket unique

---
 .../editor/src/components/PropertiesWindow/PropertiesWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/editor/src/components/PropertiesWindow/PropertiesWindow.tsx b/packages/client/editor/src/components/PropertiesWindow/PropertiesWindow.tsx
index ace9625149..919c441efd 100644
--- a/packages/client/editor/src/components/PropertiesWindow/PropertiesWindow.tsx
+++ b/packages/client/editor/src/components/PropertiesWindow/PropertiesWindow.tsx
@@ -115,7 +115,7 @@ export const PropertiesWindow = (props: Props) => {
         )
 
         return (
-          <div className={borderClass}>
+          <div key={key + index} className={borderClass}>
             <Component {...componentProps} />
           </div>
         )

From acbe05a763dd146101a7ebd133e9459f2f760118 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:08:16 -0800
Subject: [PATCH 03/14] use new TextInputField for input nodes

---
 .../src/components/react-flow/InputSocket.tsx | 54 ++++++++++++++-----
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/packages/client/editor/src/components/react-flow/InputSocket.tsx b/packages/client/editor/src/components/react-flow/InputSocket.tsx
index 975f45a8e8..365a5d33e1 100644
--- a/packages/client/editor/src/components/react-flow/InputSocket.tsx
+++ b/packages/client/editor/src/components/react-flow/InputSocket.tsx
@@ -2,7 +2,7 @@ import { InputSocketSpecJSON, NodeSpecJSON } from '@magickml/behave-graph'
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import cx from 'classnames'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Handle, Position } from 'reactflow'
 
 import { colors, valueTypeColorMap } from '../../utils/colors'
@@ -19,6 +19,13 @@ import {
   Switch,
 } from '@magickml/client-ui'
 import ReactJson from 'react-json-view'
+import { TextInputField } from './TextInputField.js'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  selectTextEditorState,
+  setActiveInput,
+  setTextEditorState,
+} from 'client/state'
 
 export type InputSocketProps = {
   connected: boolean
@@ -27,6 +34,8 @@ export type InputSocketProps = {
   lastEventInput: any
   specJSON: NodeSpecJSON[]
   hideValue?: boolean
+  isActive: boolean
+  textEditorState: string
 } & InputSocketSpecJSON
 
 const InputFieldForValue = ({
@@ -38,6 +47,7 @@ const InputFieldForValue = ({
   valueType,
   connected,
   hideValue = false,
+  isActive,
 }: Pick<
   InputSocketProps,
   | 'choices'
@@ -48,9 +58,12 @@ const InputFieldForValue = ({
   | 'valueType'
   | 'connected'
   | 'hideValue'
+  | 'isActive'
 >) => {
+  const dispatch = useDispatch()
+  const textEditorState = useSelector(selectTextEditorState)
   const showChoices = choices?.length
-  const inputVal = (value ? value : defaultValue ?? '') as string
+  const [inputVal, setInputVal] = useState(value ? value : defaultValue ?? '')
   const hideValueInput = hideValue || connected
 
   const inputClass = cx('h-6 text-sm')
@@ -60,6 +73,24 @@ const InputFieldForValue = ({
     !hideValueInput && 'bg-[var(--foreground-color)]'
   )
 
+  const handleChange = ({ key, value }: { key: string; value: any }) => {
+    onChange(key, value)
+    setInputVal(value)
+    dispatch(setTextEditorState(value))
+  }
+
+  const onFocus = (x: string) => {
+    handleChange({ key: name, value: x })
+    dispatch(setActiveInput(name))
+  }
+
+  useEffect(() => {
+    if (isActive) {
+      handleChange({ key: name, value: textEditorState || '' })
+      setInputVal(textEditorState || '')
+    }
+  }, [isActive, textEditorState])
+
   return (
     <div style={{ borderRadius: 5 }} className={containerClass}>
       {/* flex layout these divs 50 50 */}
@@ -86,13 +117,12 @@ const InputFieldForValue = ({
             </Select>
           )}
           {valueType === 'string' && !showChoices && (
-            <Input
-              type="text"
-              className={inputClass}
-              value={String(inputVal) || ''}
-              onChange={e => {
-                onChange(name, e.currentTarget.value)
-              }}
+            <TextInputField
+              value={inputVal}
+              onChange={e =>
+                handleChange({ key: name, value: e.currentTarget.value })
+              }
+              onFocus={() => onFocus(inputVal)}
             />
           )}
           {valueType === 'float' && !showChoices && (
@@ -135,6 +165,8 @@ const InputSocket: React.FC<InputSocketProps> = ({
   connected,
   specJSON,
   lastEventInput,
+  isActive,
+  textEditorState,
   ...rest
 }) => {
   const { name, valueType } = rest
@@ -151,7 +183,6 @@ const InputSocket: React.FC<InputSocketProps> = ({
   // @ts-ignore
   const [backgroundColor, borderColor] = colors[colorName]
   const showName = isFlowSocket === false || name !== 'flow'
-
   return (
     <div className="flex grow items-center justify-start h-7 w-full">
       {isFlowSocket && (
@@ -160,15 +191,14 @@ const InputSocket: React.FC<InputSocketProps> = ({
           {showName && <div className="capitalize mr-2 truncate">{name}</div>}
         </>
       )}
-
       {!isFlowSocket && (
         <InputFieldForValue
           connected={connected}
           hideValue={isArraySocket || isObjectSocket}
+          isActive={isActive}
           {...rest}
         />
       )}
-
       <Popover>
         <PopoverTrigger asChild>
           <Handle

From 2a591ba69af86e493ec07640c53fd8cc27ee91b8 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:08:54 -0800
Subject: [PATCH 04/14] pass nodeId and isActive to InputSocket

---
 .../editor/src/components/react-flow/Node.tsx | 60 +++++--------------
 1 file changed, 15 insertions(+), 45 deletions(-)

diff --git a/packages/client/editor/src/components/react-flow/Node.tsx b/packages/client/editor/src/components/react-flow/Node.tsx
index 1bfba3ce71..6b9225821e 100644
--- a/packages/client/editor/src/components/react-flow/Node.tsx
+++ b/packages/client/editor/src/components/react-flow/Node.tsx
@@ -6,18 +6,19 @@ import {
   useUpdateNodeInternals,
 } from 'reactflow'
 
-import InputSocket from './InputSocket'
-import NodeContainer from './NodeContainer'
-import OutputSocket from './OutputSocket'
-import { useChangeNodeData } from '../../hooks/react-flow/useChangeNodeData'
-import { isHandleConnected } from '../../utils/isHandleConnected'
-import { useSelectAgentsSpell } from 'client/state'
+import InputSocket from './InputSocket.js'
+import NodeContainer from './NodeContainer.js'
+import OutputSocket from './OutputSocket.js'
+import { useChangeNodeData } from '../../hooks/react-flow/useChangeNodeData.js'
+import { isHandleConnected } from '../../utils/isHandleConnected.js'
+import { selectActiveInput, useSelectAgentsSpell } from 'client/state'
 import { SpellInterface } from 'server/schemas'
-import { getConfig } from '../../utils/getNodeConfig'
-import { configureSockets } from '../../utils/configureSockets'
+import { getConfig } from '../../utils/getNodeConfig.js'
+import { configureSockets } from '../../utils/configureSockets.js'
 import { enqueueSnackbar } from 'notistack'
 import { debounce } from 'lodash'
 import { Tab, usePubSub } from '@magickml/providers'
+import { useSelector } from 'react-redux'
 
 type NodeProps = FlowNodeProps & {
   tab: Tab
@@ -43,18 +44,18 @@ export const Node: React.FC<NodeProps> = ({
   const [endEventName, setEndEventName] = useState<string | null>(null)
   const [startEventName, setStartEventName] = useState<string | null>(null)
   const [errorEventName, setErrorEventName] = useState<string | null>(null)
-  // const [commitEventname, setCommitEventName] = useState<string | null>(null)
   const [lastInputs, setLastInputs] = useState<Record<string, any> | null>(null)
   const [lastOutputs, setLastOutputs] = useState<Record<string, any> | null>(
     null
   )
-
   const [running, setRunning] = useState(false)
   const [done, setDone] = useState(false)
   const [error, setError] = useState(false)
   const edges = useEdges()
   const handleChange = useChangeNodeData(id)
 
+  const focusedInputName = useSelector(selectActiveInput)
+
   // Hook into to event to reset node states and stop animations
   useEffect(() => {
     const unsubscribe = subscribe(events.RESET_NODE_STATE, () => {
@@ -99,41 +100,6 @@ export const Node: React.FC<NodeProps> = ({
     // setCommitEventName(`${spell.id}-${id}-commit`)
   }, [spell, id])
 
-  // Handle commit event
-  // useEffect(() => {
-  //   if (!spellEvent) return;
-  //   if (spellEvent.event === commitEventname) {
-  //     const commitedSocket = spellEvent.socket
-
-  //     const connectedEdge = edges.find(edge => {
-  //       return edge.source === id && edge.sourceHandle === commitedSocket
-  //     })
-
-  //     if (!connectedEdge) return;
-
-  //     setEdges(tab.id, edges => {
-  //       const newEdges = edges.map(edge => {
-  //         if (edge.id === connectedEdge.id) {
-  //           return {
-  //             ...edge,
-  //             animated: true,
-  //             style: {
-  //               stroke: 'white'
-  //             }
-  //           }
-  //         }
-
-  //         return edge
-  //       })
-
-  //       return newEdges
-  //     })
-
-  //     debounceAnimateEdgeDone(connectedEdge)
-  //   }
-
-  // }, [spellEvent])
-
   // Handle start event
   useEffect(() => {
     if (!spellEvent) return
@@ -205,6 +171,8 @@ export const Node: React.FC<NodeProps> = ({
               value={data[flowInput.name] ?? flowInput.defaultValue}
               onChange={handleChange}
               connected={isHandleConnected(edges, id, flowInput.name, 'target')}
+              nodeId={id}
+              isActive={focusedInputName === flowInput.name}
             />
           )}
           {output && (
@@ -242,6 +210,8 @@ export const Node: React.FC<NodeProps> = ({
             }
             onChange={handleChange}
             connected={isHandleConnected(edges, id, input.name, 'target')}
+            nodeId={id}
+            isActive={focusedInputName === input.name}
           />
         </div>
       ))}

From 2c80da114c184aa9620b0e96e7a1284d2e39d860 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:09:15 -0800
Subject: [PATCH 05/14] add optional params to TxtInputField

---
 .../src/components/react-flow/TextInputField.tsx      | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/client/editor/src/components/react-flow/TextInputField.tsx b/packages/client/editor/src/components/react-flow/TextInputField.tsx
index c824a7b39e..c4cab68ddf 100644
--- a/packages/client/editor/src/components/react-flow/TextInputField.tsx
+++ b/packages/client/editor/src/components/react-flow/TextInputField.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Input } from '@magickml/ui';
-import { v4 as uuidv4 } from 'uuid'
 
 export const TextInputField = ({
   value,
@@ -9,22 +8,20 @@ export const TextInputField = ({
   handleBlur,
 }: {
   value: string
-  onChange: (e) => void
-  onFocus?: (inputId: string) => void
+  onChange?: (e) => void
+  onFocus?: () => void
   handleBlur?: () => void
 }) => {
 
-  const inputId = React.useMemo(() => `text-input::${uuidv4()}`, []);
   return (
     <Input
-      id={inputId}
       className='bg-dark-3 h-5 rounded-sm px-2'
       type="text"
       placeholder="input text..."
       value={value}
       onChange={(e) => onChange(e)}
-      onFocus={() => onFocus(inputId)}
-      onBlur={handleBlur}
+      onFocus={() => onFocus()}
+      onBlur={() => handleBlur()}
     />
   )
 };

From a987f8df263a938bbd397aaa20feac92aa145a67 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:10:26 -0800
Subject: [PATCH 06/14] add in textEditor redux state

---
 .../src/components/TextEditorWindow/index.tsx | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/client/editor/src/components/TextEditorWindow/index.tsx b/packages/client/editor/src/components/TextEditorWindow/index.tsx
index 8986935ff1..a54190cb69 100644
--- a/packages/client/editor/src/components/TextEditorWindow/index.tsx
+++ b/packages/client/editor/src/components/TextEditorWindow/index.tsx
@@ -1,14 +1,15 @@
 import { debounce } from 'lodash'
 import Editor from '@monaco-editor/react'
 import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { Window } from 'client/core'
-import { selectActiveNode } from 'client/state'
+import { selectActiveNode, selectTextEditorState, setTextEditorState, selectActiveInput } from 'client/state'
 import { useChangeNodeData } from '../../hooks/react-flow/useChangeNodeData'
 import WindowMessage from '../WindowMessage/WindowMessage'
 
 const TextEditor = props => {
-  const [code, setCodeState] = useState<string | undefined>(undefined)
+  const dispatch = useDispatch()
+  const [code, setCode] = useState<string | undefined>(undefined)
 
   const [editorOptions] = useState<Record<string, any>>({
     wordWrap: 'on',
@@ -18,15 +19,47 @@ const TextEditor = props => {
 
   const selectedNode = useSelector(selectActiveNode(props.tab.id))
   const handleChange = useChangeNodeData(selectedNode?.id);
+  const textEditorState = useSelector(selectTextEditorState)
+  const activeInput = useSelector(selectActiveInput)
+
+  const handleEditorWillMount = monaco => {
+    monaco.editor.defineTheme('sds-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      wordWrap: true,
+      colors: {
+        'editor.background': "#171b1c",
+      },
+    })
+  }
+
+  const debounceSave = debounce((code) => {
+    handleChange('configuration', {
+      ...configuration,
+      textEditorData: code,
+    })
+  }, 1000)
+
+  const updateCode = rawCode => {
+    const code = rawCode.replace('\r\n', '\n')
+    dispatch(setTextEditorState(code))
+    debounceSave(code)
+  }
 
   useEffect(() => {
-    if (!selectedNode) return
+    if (!selectedNode || textEditorState) return
     const { configuration } = selectedNode.data
     const { textEditorData } = configuration
     if (textEditorData === undefined) return
     setCode(textEditorData)
   }, [selectedNode])
 
+  useEffect(() => {
+    if (textEditorState === undefined) return
+    setCode(textEditorState || '')
+  }, [textEditorState])
+
   // listen for changes to the code and check if selected node is text template
   // then we want to parse the template for sockets and add them to the node
   useEffect(() => {
@@ -75,7 +108,6 @@ const TextEditor = props => {
         ...sockets.filter(Boolean),
       ],
     })
-    // handleChange('sockets', sockets)
   }, [code])
 
   if (!selectedNode) return null
@@ -83,35 +115,7 @@ const TextEditor = props => {
   const { configuration } = selectedNode.data
   const { textEditorOptions, textEditorData } = configuration
 
-  const handleEditorWillMount = monaco => {
-    monaco.editor.defineTheme('sds-dark', {
-      base: 'vs-dark',
-      inherit: true,
-      rules: [],
-      wordWrap: true,
-      colors: {
-        'editor.background': "#171b1c",
-      },
-    })
-  }
-
-  const debounceSave = debounce((code) => {
-    handleChange('configuration', {
-      ...configuration,
-      textEditorData: code,
-    })
-  }, 1000)
-
-  const updateCode = rawCode => {
-    const code = rawCode.replace('\r\n', '\n')
-    debounceSave(code)
-  }
-
-  const setCode = update => {
-    setCodeState(update)
-  }
-
-  if (textEditorData === undefined)
+  if (textEditorData === undefined || !activeInput)
     return <WindowMessage content="Select a node with a text field" />
 
   return (

From a8f046edfa7751bbd57c6343ac368e50d96e40e6 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:10:37 -0800
Subject: [PATCH 07/14] comment out log

---
 packages/client/editor/src/contexts/FrigadeProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/editor/src/contexts/FrigadeProvider.tsx b/packages/client/editor/src/contexts/FrigadeProvider.tsx
index 93f3be7343..7389da0178 100644
--- a/packages/client/editor/src/contexts/FrigadeProvider.tsx
+++ b/packages/client/editor/src/contexts/FrigadeProvider.tsx
@@ -12,7 +12,7 @@ type Props = {
 const FrigadeProvider = ({ children }: Props) => {
   const globalConfig = useSelector((state: any) => state.globalConfig)
 
-  console.log('FRIGADE_KEY', FRIGADE_KEY)
+  // console.log("FRIGADE_KEY", FRIGADE_KEY)
 
   return (
     <FrigadeProviderOG

From c0b1a2843bb0bcca6396f0963abebcd169c4e012 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:10:52 -0800
Subject: [PATCH 08/14] add textEditorState and activeIUnput to global config
 state

---
 packages/client/state/src/lib/globalConfig.ts | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/client/state/src/lib/globalConfig.ts b/packages/client/state/src/lib/globalConfig.ts
index 3ade4eb47a..cbfbe0f465 100644
--- a/packages/client/state/src/lib/globalConfig.ts
+++ b/packages/client/state/src/lib/globalConfig.ts
@@ -18,6 +18,8 @@ export interface GlobalConfig {
   currentSpellReleaseId: string
   theme: string
   dockviewTheme: string
+  textEditorState: string
+  activeInput: string
 }
 
 /**
@@ -32,6 +34,8 @@ export const globalConfigSlice: Slice<GlobalConfig> = createSlice({
     projectId: '',
     currentAgentId: '',
     currentSpellReleaseId: '',
+    textEditorState: '',
+    activeInput: '',
     dockviewTheme: 'dockview-theme-night',
     theme: 'abyss',
   },
@@ -72,6 +76,18 @@ export const globalConfigSlice: Slice<GlobalConfig> = createSlice({
     ): void => {
       state.dockviewTheme = action.payload
     },
+    setTextEditorState: (
+      state: GlobalConfig,
+      action: PayloadAction<string>
+    ): void => {
+      state.textEditorState = action.payload
+    },
+    setActiveInput: (
+      state: GlobalConfig,
+      action: PayloadAction<string>
+    ): void => {
+      state.activeInput = action.payload
+    },
   },
 })
 
@@ -84,9 +100,16 @@ export const {
   setCurrentAgentId,
   setDockviewTheme,
   setCurrentSpellReleaseId,
+  setTextEditorState,
+  setActiveInput,
 } = globalConfigSlice.actions
 
 /**
  * Export GlobalConfigSlice reducer.
  */
 export default globalConfigSlice.reducer
+
+export const selectTextEditorState = state =>
+  state.globalConfig.textEditorState as string
+export const selectActiveInput = state =>
+  state.globalConfig.activeInput as string

From bc4e6c61449af261d7d16b85b6a47a3d2c872641 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Sun, 11 Feb 2024 16:20:11 -0800
Subject: [PATCH 09/14] update imports from, mgerge conflicts

---
 .../src/components/react-flow/InputSocket.tsx |  3 ++-
 .../components/react-flow/TextInputField.tsx  | 11 ++++----
 packages/client/ui/src/lib/core/ui/input.tsx  | 25 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/client/editor/src/components/react-flow/InputSocket.tsx b/packages/client/editor/src/components/react-flow/InputSocket.tsx
index 365a5d33e1..1514d27e60 100644
--- a/packages/client/editor/src/components/react-flow/InputSocket.tsx
+++ b/packages/client/editor/src/components/react-flow/InputSocket.tsx
@@ -19,13 +19,14 @@ import {
   Switch,
 } from '@magickml/client-ui'
 import ReactJson from 'react-json-view'
-import { TextInputField } from './TextInputField.js'
+import { TextInputField } from './TextInputField'
 import { useDispatch, useSelector } from 'react-redux'
 import {
   selectTextEditorState,
   setActiveInput,
   setTextEditorState,
 } from 'client/state'
+import { Popover, PopoverContent, PopoverTrigger } from '@magickml/client-ui'
 
 export type InputSocketProps = {
   connected: boolean
diff --git a/packages/client/editor/src/components/react-flow/TextInputField.tsx b/packages/client/editor/src/components/react-flow/TextInputField.tsx
index c4cab68ddf..62509fa5fe 100644
--- a/packages/client/editor/src/components/react-flow/TextInputField.tsx
+++ b/packages/client/editor/src/components/react-flow/TextInputField.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Input } from '@magickml/ui';
+import { Input } from '@magickml/client-ui'
+import React from 'react'
 
 export const TextInputField = ({
   value,
@@ -12,16 +12,15 @@ export const TextInputField = ({
   onFocus?: () => void
   handleBlur?: () => void
 }) => {
-
   return (
     <Input
-      className='bg-dark-3 h-5 rounded-sm px-2'
+      className="bg-dark-3 h-5 rounded-sm px-2"
       type="text"
       placeholder="input text..."
       value={value}
-      onChange={(e) => onChange(e)}
+      onChange={e => onChange(e)}
       onFocus={() => onFocus()}
       onBlur={() => handleBlur()}
     />
   )
-};
+}
diff --git a/packages/client/ui/src/lib/core/ui/input.tsx b/packages/client/ui/src/lib/core/ui/input.tsx
index 2271e8e725..7e87bf2f50 100644
--- a/packages/client/ui/src/lib/core/ui/input.tsx
+++ b/packages/client/ui/src/lib/core/ui/input.tsx
@@ -17,7 +17,30 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-lg border-2 border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          `
+          flex
+          h-9
+          w-full
+          rounded-lg
+          border-2
+          border-input
+          bg-transparent
+          px-3
+          py-1
+          text-sm
+          shadow-sm
+          transition-colors
+          file:border-0
+          file:bg-transparent
+          file:text-sm
+          file:font-medium
+          placeholder:text-muted-foreground
+          focus-visible:outline-none
+          focus-visible:ring-1
+          focus-visible:ring-ring
+          disabled:cursor-not-allowed
+          disabled:opacity-50
+        `,
           className
         )}
         ref={ref}

From c52479db1523ea26f02e1b480b30fb64045217e3 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Mon, 12 Feb 2024 11:18:55 -0800
Subject: [PATCH 10/14] merge

---
 .../src/components/react-flow/InputSocket.tsx      |  1 -
 .../editor/src/components/react-flow/Node.tsx      | 14 +++++++-------
 .../src/components/react-flow/TextInputField.tsx   | 12 +++++++++---
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/client/editor/src/components/react-flow/InputSocket.tsx b/packages/client/editor/src/components/react-flow/InputSocket.tsx
index 1514d27e60..047816b774 100644
--- a/packages/client/editor/src/components/react-flow/InputSocket.tsx
+++ b/packages/client/editor/src/components/react-flow/InputSocket.tsx
@@ -26,7 +26,6 @@ import {
   setActiveInput,
   setTextEditorState,
 } from 'client/state'
-import { Popover, PopoverContent, PopoverTrigger } from '@magickml/client-ui'
 
 export type InputSocketProps = {
   connected: boolean
diff --git a/packages/client/editor/src/components/react-flow/Node.tsx b/packages/client/editor/src/components/react-flow/Node.tsx
index 6b9225821e..849249d174 100644
--- a/packages/client/editor/src/components/react-flow/Node.tsx
+++ b/packages/client/editor/src/components/react-flow/Node.tsx
@@ -6,15 +6,15 @@ import {
   useUpdateNodeInternals,
 } from 'reactflow'
 
-import InputSocket from './InputSocket.js'
-import NodeContainer from './NodeContainer.js'
-import OutputSocket from './OutputSocket.js'
-import { useChangeNodeData } from '../../hooks/react-flow/useChangeNodeData.js'
-import { isHandleConnected } from '../../utils/isHandleConnected.js'
+import InputSocket from './InputSocket'
+import NodeContainer from './NodeContainer'
+import OutputSocket from './OutputSocket'
+import { useChangeNodeData } from '../../hooks/react-flow/useChangeNodeData'
+import { isHandleConnected } from '../../utils/isHandleConnected'
 import { selectActiveInput, useSelectAgentsSpell } from 'client/state'
 import { SpellInterface } from 'server/schemas'
-import { getConfig } from '../../utils/getNodeConfig.js'
-import { configureSockets } from '../../utils/configureSockets.js'
+import { getConfig } from '../../utils/getNodeConfig'
+import { configureSockets } from '../../utils/configureSockets'
 import { enqueueSnackbar } from 'notistack'
 import { debounce } from 'lodash'
 import { Tab, usePubSub } from '@magickml/providers'
diff --git a/packages/client/editor/src/components/react-flow/TextInputField.tsx b/packages/client/editor/src/components/react-flow/TextInputField.tsx
index 62509fa5fe..b5617d132d 100644
--- a/packages/client/editor/src/components/react-flow/TextInputField.tsx
+++ b/packages/client/editor/src/components/react-flow/TextInputField.tsx
@@ -18,9 +18,15 @@ export const TextInputField = ({
       type="text"
       placeholder="input text..."
       value={value}
-      onChange={e => onChange(e)}
-      onFocus={() => onFocus()}
-      onBlur={() => handleBlur()}
+      onChange={e => {
+        onChange && onChange(e)
+      }}
+      onFocus={() => {
+        onFocus && onFocus()
+      }}
+      onBlur={() => {
+        handleBlur && handleBlur()
+      }}
     />
   )
 }

From a9d87b193df19f7d296c10d8c5c6c7c35c4f08ed Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Mon, 12 Feb 2024 13:51:36 -0800
Subject: [PATCH 11/14] hanlde merge

---
 .../PropertiesWindow/SocketConfig.tsx         | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/packages/client/editor/src/components/PropertiesWindow/SocketConfig.tsx b/packages/client/editor/src/components/PropertiesWindow/SocketConfig.tsx
index b034304713..914d6c66ec 100644
--- a/packages/client/editor/src/components/PropertiesWindow/SocketConfig.tsx
+++ b/packages/client/editor/src/components/PropertiesWindow/SocketConfig.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useState } from "react"
-import { ConfigurationComponentProps } from "./PropertiesWindow"
-import SingleElement from "./SingleElement"
+import { useCallback, useState } from 'react'
+import { ConfigurationComponentProps } from './PropertiesWindow'
+import SingleElement from './SingleElement'
 
 /**
  * AddNewSocket component provides a form input to add a new socket.
@@ -53,19 +53,19 @@ const AddNewSocket = ({ addSocket, valueTypes, definedValueType }) => {
             }
           }}
         />
-        {!definedValueType &&
+        {!definedValueType && (
           <select
             value={selectedValueType}
             onChange={e => setSelectedValueType(e.target.value)}
-            className="flex flex-1 px-3 bg-[var(--background-color)] rounded-sm">
-            {
-              valueTypes.map(type => (
-                <option value={type}>{type}</option>
-              ))
-            }
+            className="flex flex-1 px-3 bg-[var(--background-color)] rounded-sm"
+          >
+            {valueTypes.map(type => (
+              <option key={type} value={type}>
+                {type}
+              </option>
+            ))}
           </select>
-
-        }
+        )}
         {/* Add button */}
         <button style={{ margin: 0 }} onClick={onAdd} type="submit">
           Add
@@ -75,27 +75,29 @@ const AddNewSocket = ({ addSocket, valueTypes, definedValueType }) => {
   )
 }
 
-
-export const SocketConfig = ({ config, updateConfigKey, fullConfig }: ConfigurationComponentProps) => {
-  const defaultValues = [
-    'string',
-    'integer',
-    'boolean'
-  ]
+export const SocketConfig = ({
+  config,
+  updateConfigKey,
+  fullConfig,
+}: ConfigurationComponentProps) => {
+  const defaultValues = ['string', 'integer', 'boolean']
   const [configKey, sockets = []] = config
   const { socketValues = defaultValues, valueType = null } = fullConfig
 
-  const addSocket = useCallback((socket) => {
-    const newValue = [
-      ...sockets,
-      {
-        name: socket.name,
-        valueType: socket.valueType
-      }
-    ]
+  const addSocket = useCallback(
+    socket => {
+      const newValue = [
+        ...sockets,
+        {
+          name: socket.name,
+          valueType: socket.valueType,
+        },
+      ]
 
-    updateConfigKey(configKey, newValue)
-  }, [sockets, configKey, updateConfigKey])
+      updateConfigKey(configKey, newValue)
+    },
+    [sockets, configKey, updateConfigKey]
+  )
 
   const deleteSocket = (name: string) => {
     const newValue = sockets.filter((socket: any) => socket.name !== name)
@@ -114,7 +116,11 @@ export const SocketConfig = ({ config, updateConfigKey, fullConfig }: Configurat
         />
       ))}
       <div>
-        <AddNewSocket addSocket={addSocket} valueTypes={socketValues} definedValueType={valueType} />
+        <AddNewSocket
+          addSocket={addSocket}
+          valueTypes={socketValues}
+          definedValueType={valueType}
+        />
         {/* <Input value={key} onChange={e => setKey(e.target.value)} />
         <select value={valueType} onChange={e => setValueType(e.target.value)}>
           <option value="string">string</option>

From af12f8780f1f74967a2a5cc3ad8302de52cb9315 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Mon, 12 Feb 2024 13:52:23 -0800
Subject: [PATCH 12/14] handle merge

---
 .../src/components/TextEditorWindow/index.tsx | 50 +++++++++++--------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/client/editor/src/components/TextEditorWindow/index.tsx b/packages/client/editor/src/components/TextEditorWindow/index.tsx
index a54190cb69..f4de88a7a3 100644
--- a/packages/client/editor/src/components/TextEditorWindow/index.tsx
+++ b/packages/client/editor/src/components/TextEditorWindow/index.tsx
@@ -3,7 +3,12 @@ import Editor from '@monaco-editor/react'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Window } from 'client/core'
-import { selectActiveNode, selectTextEditorState, setTextEditorState, selectActiveInput } from 'client/state'
+import {
+  selectActiveNode,
+  selectTextEditorState,
+  setTextEditorState,
+  selectActiveInput,
+} from 'client/state'
 import { useChangeNodeData } from '../../hooks/react-flow/useChangeNodeData'
 import WindowMessage from '../WindowMessage/WindowMessage'
 
@@ -14,11 +19,11 @@ const TextEditor = props => {
   const [editorOptions] = useState<Record<string, any>>({
     wordWrap: 'on',
     minimap: { enabled: false },
-    fontSize: 16
+    fontSize: 16,
   })
 
   const selectedNode = useSelector(selectActiveNode(props.tab.id))
-  const handleChange = useChangeNodeData(selectedNode?.id);
+  const handleChange = useChangeNodeData(selectedNode?.id)
   const textEditorState = useSelector(selectTextEditorState)
   const activeInput = useSelector(selectActiveInput)
 
@@ -29,12 +34,12 @@ const TextEditor = props => {
       rules: [],
       wordWrap: true,
       colors: {
-        'editor.background': "#171b1c",
+        'editor.background': '#171b1c',
       },
     })
   }
 
-  const debounceSave = debounce((code) => {
+  const debounceSave = debounce(code => {
     handleChange('configuration', {
       ...configuration,
       textEditorData: code,
@@ -43,6 +48,7 @@ const TextEditor = props => {
 
   const updateCode = rawCode => {
     const code = rawCode.replace('\r\n', '\n')
+    console.log('DISPATCHING', code)
     dispatch(setTextEditorState(code))
     debounceSave(code)
   }
@@ -65,27 +71,31 @@ const TextEditor = props => {
   useEffect(() => {
     if (!code) return
     if (!selectedNode) return
-    if (!selectedNode.data?.configuration?.textEditorOptions?.options?.language) return
+    if (!selectedNode.data?.configuration?.textEditorOptions?.options?.language)
+      return
     const { configuration } = selectedNode.data
     const { textEditorOptions } = configuration
     const { options } = textEditorOptions
     const { language } = options
     if (language !== 'handlebars') return
     // socket regex looks for handlebars style {{socketName}}
-    const socketRegex = /{{(.+?)}}/g;
-
+    const socketRegex = /{{(.+?)}}/g
 
     const socketMatches = code.matchAll(socketRegex)
     const sockets = []
     for (const match of socketMatches) {
       if (!match[1]) continue
-      const socketName = match[1].split(' ')
-        .filter(name =>
-          !name.startsWith('#') &&
-          !name.startsWith('/') &&
-          !name.startsWith('@') &&
-          name !== 'this'
-        ).join('').trim()
+      const socketName = match[1]
+        .split(' ')
+        .filter(
+          name =>
+            !name.startsWith('#') &&
+            !name.startsWith('/') &&
+            !name.startsWith('@') &&
+            name !== 'this'
+        )
+        .join('')
+        .trim()
 
       console.log('Socket name', socketName)
 
@@ -96,17 +106,15 @@ const TextEditor = props => {
         valueType: 'string',
       }
 
-      if (configuration.socketInputs.find(input => input.name === socketName)) continue
+      if (configuration.socketInputs.find(input => input.name === socketName))
+        continue
 
       sockets.push(socket)
     }
 
     handleChange('configuration', {
       ...configuration,
-      socketInputs: [
-        ...configuration.socketInputs,
-        ...sockets.filter(Boolean),
-      ],
+      socketInputs: [...configuration.socketInputs, ...sockets.filter(Boolean)],
     })
   }, [code])
 
@@ -115,7 +123,7 @@ const TextEditor = props => {
   const { configuration } = selectedNode.data
   const { textEditorOptions, textEditorData } = configuration
 
-  if (textEditorData === undefined || !activeInput)
+  if (textEditorData === undefined && !activeInput)
     return <WindowMessage content="Select a node with a text field" />
 
   return (

From 448c899b0dd312b2d28f759f80671ec27532755d Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Mon, 12 Feb 2024 13:52:39 -0800
Subject: [PATCH 13/14] commit cloud diff

---
 portal/cloud | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/portal/cloud b/portal/cloud
index c2a9398644..9bc02417d3 160000
--- a/portal/cloud
+++ b/portal/cloud
@@ -1 +1 @@
-Subproject commit c2a9398644389fe96e64ef1e68e7187c7b56f00c
+Subproject commit 9bc02417d306e46b881c0631298b9e42a9d794de

From cdefa754a4454772df014bb57a0f1676690fbcbf Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Mon, 12 Feb 2024 13:54:13 -0800
Subject: [PATCH 14/14] commit cloud diff

---
 portal/cloud | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/portal/cloud b/portal/cloud
index 9bc02417d3..fa1b4f3989 160000
--- a/portal/cloud
+++ b/portal/cloud
@@ -1 +1 @@
-Subproject commit 9bc02417d306e46b881c0631298b9e42a9d794de
+Subproject commit fa1b4f39891a2e5981aa49435d8647785eaa5ae8