diff --git a/app/src/client/components/ChatForm.tsx b/app/src/client/components/ChatForm.tsx index e8a84ad..bcb10c4 100644 --- a/app/src/client/components/ChatForm.tsx +++ b/app/src/client/components/ChatForm.tsx @@ -1,14 +1,13 @@ import React, { useRef, useState, useEffect, useCallback } from 'react'; -import _ from 'lodash'; - import { type Chat } from 'wasp/entities'; import { createNewChat } from 'wasp/client/operations'; import { useHistory } from 'react-router-dom'; import TextareaAutosize from 'react-textarea-autosize'; +import { useSocketListener } from 'wasp/client/webSocket'; interface ChatFormProps { - handleFormSubmit: (userQuery: string) => void; + handleFormSubmit: (userQuery: string, isUserRespondedWithNextAction?: boolean, retrySameChat?: boolean) => void; currentChatDetails: Chat | null | undefined; triggerChatFormSubmitMsg?: string | null; } @@ -17,18 +16,34 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger const [formInputValue, setFormInputValue] = useState(''); const [disableFormSubmit, setDisableFormSubmit] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); + const [toggleTextAreaFocus, setToggleTextAreaFocus] = useState(false); + const isProcessing = useRef(false); + const textAreaRef = React.useRef(); + const isEmptyMessage = formInputValue.trim().length === 0; const history = useHistory(); - const formInputRef = useCallback( + const formRef = useCallback( async (node: any) => { if (node !== null && triggerChatFormSubmitMsg) { - // @ts-ignore await handleFormSubmit(triggerChatFormSubmitMsg, true); } }, [triggerChatFormSubmitMsg] ); + useEffect(() => { + if (toggleTextAreaFocus && (!disableFormSubmit || !isSubmitting || !isProcessing.current)) { + if (textAreaRef.current) { + textAreaRef.current.focus(); + } + } + }, [disableFormSubmit, isSubmitting, isProcessing.current, toggleTextAreaFocus]); + + const setFocusOnTextArea = () => { + setToggleTextAreaFocus(true); + }; + useSocketListener('streamFromTeamFinished', setFocusOnTextArea); + useEffect(() => { if (currentChatDetails) { setDisableFormSubmit(currentChatDetails.team_status === 'inprogress'); @@ -37,13 +52,14 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger } }, [currentChatDetails]); - const handleSubmit = async (event: React.FormEvent) => { - event.preventDefault(); - - if (isSubmitting) return; + const submitForm = async (inputValue: string) => { + if (isSubmitting || disableFormSubmit || isProcessing.current || isEmptyMessage) return; const msgToSubmit = formInputValue.trim(); + setIsSubmitting(true); + setToggleTextAreaFocus(false); + isProcessing.current = true; try { if (!currentChatDetails) { @@ -63,14 +79,30 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger window.alert('Error: Something went wrong. Please try again later.'); } finally { setIsSubmitting(false); + isProcessing.current = false; } }; - const debouncedHandleSubmit = _.debounce(handleSubmit, 500); + const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + await submitForm(formInputValue); + }; + + const handleButtonClick = async (event: React.MouseEvent) => { + event.preventDefault(); + await submitForm(formInputValue); + }; + + const handleKeyDown = async (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + await submitForm(formInputValue); + } + }; return (
-
+ @@ -87,21 +119,20 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger className='block rounded-lg w-full h-12 text-sm text-white bg-primary focus:outline-none focus:ring-0 focus:border-captn-light-blue' placeholder='Enter your message...' required - ref={formInputRef} value={formInputValue} onChange={(e) => setFormInputValue(e.target.value)} - disabled={disableFormSubmit} - onKeyDown={(e) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - debouncedHandleSubmit(e as any); - } - }} + disabled={disableFormSubmit || isSubmitting} + ref={textAreaRef} + onKeyDown={handleKeyDown} />