feat: wip

latitude-dev · Jan 17, 2025 · 4b1da6b · 4b1da6b
1 parent 868354b
commit 4b1da6b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 41 deletions.
diff --git a/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/ToolCallForm/Editor/index.tsx b/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/ToolCallForm/Editor/index.tsx
@@ -68,6 +68,7 @@ function updatePlaceholder({
 export default function TextEditor({
   value,
   onChange,
+  onCmdEnter,
   placeholder,
 }: TextEditorProps) {
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
@@ -109,13 +110,19 @@ export default function TextEditor({
           hasPlaceholder,
         })
       })
+
       editor.onDidChangeModelDecorations(() => {
         updateHeight(editor)
       })
 
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+        const value = editor.getValue()
+        onCmdEnter?.(value)
+      })
+
       isMountedRef.current = true
     },
-    [updateHeight, isMountedRef, monacoRef, placeholder],
+    [updateHeight, isMountedRef, monacoRef, placeholder, onCmdEnter, onChange],
   )
   return (
     <>

diff --git a/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/ToolCallForm/Editor/types.ts b/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/ToolCallForm/Editor/types.ts
@@ -1,5 +1,6 @@
 export type TextEditorProps = {
   value?: string
   onChange: (value: string | undefined) => void
+  onCmdEnter?: (value?: string | undefined) => void
   placeholder: string
 }
diff --git a/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/ToolCallForm/index.tsx b/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/ToolCallForm/index.tsx
@@ -45,10 +45,12 @@ function ToolEditor({
   value,
   toolRequest,
   onChange,
+  onSubmit,
   placeholder,
 }: {
   toolRequest: ToolRequest
   onChange: (value: string | undefined) => void
+  onSubmit?: (sentValue?: string | undefined) => void
   placeholder: string
   value: string | undefined
 }) {
@@ -67,6 +69,7 @@ function ToolEditor({
         <TextEditor
           value={value}
           onChange={onChange}
+          onCmdEnter={onSubmit}
           placeholder={placeholder}
         />
       </div>
@@ -93,67 +96,81 @@ export function ToolCallForm({
     ToolRequest | undefined
   >(toolRequests[0])
   const [isLastRequest, setIslastRequest] = useState(toolRequests.length <= 1)
-  const [value, setValue] = useState<string | undefined>(' ')
+  const [value, setValue] = useState<string | undefined>('')
   const onChange = useCallback((newValue: string | undefined) => {
     setValue(newValue)
   }, [])
-  const onLocalSend = useCallback(() => {
-    if (!currentToolRequest) return
-    if (!value) return
+  const onLocalSend = useCallback(
+    (sentValue?: string | undefined) => {
+      const someValue = sentValue || value
+      const trimmedValue = someValue?.trim()
 
-    const message = buildToolResponseMessage({
+      if (!currentToolRequest) return
+      if (!trimmedValue) return
+
+      const message = buildToolResponseMessage({
+        value: trimmedValue,
+        toolRequest: currentToolRequest,
+      })
+      addLocalMessages([message])
+      const findNextToolRequest = toolRequests.findIndex(
+        (tr) => tr.toolCallId === currentToolRequest.toolCallId,
+      )
+      const nextIndex = findNextToolRequest + 1
+      const nextToolRequest = toolRequests[nextIndex]
+
+      if (nextToolRequest) {
+        setCurrentToolRequest(nextToolRequest)
+        setValue('')
+      }
+      setIslastRequest(nextIndex === toolRequests.length - 1)
+    },
+    [
+      currentToolRequest,
+      addLocalMessages,
       value,
-      toolRequest: currentToolRequest,
-    })
-    addLocalMessages([message])
-    const findNextToolRequest = toolRequests.findIndex(
-      (tr) => tr.toolCallId === currentToolRequest.toolCallId,
-    )
-    const nextIndex = findNextToolRequest + 1
-    const nextToolRequest = toolRequests[nextIndex]
+      setIslastRequest,
+      setCurrentToolRequest,
+      toolRequests,
+    ],
+  )
 
-    if (nextToolRequest) {
-      setCurrentToolRequest(nextToolRequest)
-      setValue('')
-    }
-    setIslastRequest(nextIndex === toolRequests.length - 1)
-  }, [
-    currentToolRequest,
-    addLocalMessages,
-    value,
-    setIslastRequest,
-    setCurrentToolRequest,
-    toolRequests,
-  ])
+  const onServerSend = useCallback(
+    (sentValue?: string | undefined) => {
+      const someValue = sentValue || value
+      const trimmedValue = someValue?.trim()
 
-  const onServerSend = useCallback(() => {
-    if (!currentToolRequest) return
-    if (!value) return
+      if (!currentToolRequest) return
+      if (!trimmedValue) return
 
-    console.log('SENDING TO SERVER')
-    const message = buildToolResponseMessage({
-      value,
-      toolRequest: currentToolRequest,
-    })
-    addLocalMessages([message])
-    sendToServer?.([message])
-  }, [addLocalMessages, sendToServer, currentToolRequest, value])
+      console.log('SENDING TO SERVER')
+      const message = buildToolResponseMessage({
+        value: trimmedValue,
+        toolRequest: currentToolRequest,
+      })
+      addLocalMessages([message])
+      sendToServer?.([message])
+    },
+    [addLocalMessages, sendToServer, currentToolRequest, value],
+  )
 
   if (!currentToolRequest) return null
 
+  const onSubmitHandler = isLastRequest ? onServerSend : onLocalSend
   return (
     <ClientOnly className='flex flex-col w-full pb-14'>
       <ToolEditor
         placeholder={placeholder}
         value={value}
         toolRequest={currentToolRequest}
         onChange={onChange}
+        onSubmit={onSubmitHandler}
       />
       <div className='absolute bottom-4 right-4'>
         <ToolBar
           disabled={disabled}
           clearChat={clearChat}
-          onSubmit={isLastRequest ? onServerSend : onLocalSend}
+          onSubmit={onSubmitHandler}
           submitLabel='Send tool response'
         />
       </div>

diff --git a/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/index.tsx b/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/index.tsx
@@ -83,12 +83,12 @@ export function ChatTextArea({
         'dark:bg-foreground/10 rounded-md',
         {
           'overflow-hidden': toolRequests.length > 0,
-        }
+        },
       )}
     >
       {toolRequests.length > 0 && addMessages ? (
         <ToolCallForm
-          placeholder='Fill in the tool call response here...'
+          placeholder='Fill in the tool call response here... (Cmd+Enter to submit)'
           toolRequests={toolRequests}
           sendToServer={onSubmit}
           addLocalMessages={addMessages}