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 index aa5b92807..de4c967dd 100644 --- 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(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 index 6acc67698..05eb25e68 100644 --- 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 index 2d1a0b07d..7b8201a74 100644 --- 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({ @@ -93,54 +96,67 @@ export function ToolCallForm({ ToolRequest | undefined >(toolRequests[0]) const [isLastRequest, setIslastRequest] = useState(toolRequests.length <= 1) - const [value, setValue] = useState(' ') + const [value, setValue] = useState('') 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 (
diff --git a/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/index.tsx b/packages/web-ui/src/ds/molecules/Chat/ChatTextArea/index.tsx index a4d76e881..791fa6a95 100644 --- 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 ? (