[minor] New Message Input component implementation#2504
[minor] New Message Input component implementation#2504PelayoFelgueroso wants to merge 20 commits into
Conversation
…lds error message
| const [isFocused, setIsFocused] = useState(false); | ||
| const fileInputRef = useRef<HTMLInputElement | null>(null); | ||
| const { transcript, isRecording, startRecording, stopRecording, resetTranscript } = useVoiceTranscription({ | ||
| lang: locale ?? "en-US", |
There was a problem hiding this comment.
Change it so that the default value of locale is "en-US" instead of defaulting to en-US if locale is undefined.
|
|
||
| const handleInputOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => { | ||
| const el = event.target; | ||
| el.style.height = "auto"; |
There was a problem hiding this comment.
There is no need to change the scrollHeight to achieve a growing textarea.
| } | ||
| `; | ||
|
|
||
| const Input = styled.textarea<{ isRecording?: boolean }>` |
There was a problem hiding this comment.
This variable should be more descriptive. Input is just too generic.
| `; | ||
|
|
||
| const InputWrapper = styled.div` | ||
| max-height: 150px; |
There was a problem hiding this comment.
Where does this max-height comes from? Based on the design the max height is for the whole component, so the maximun height can change depending how many elements are inside the message input.
| const InputWrapper = styled.div` | ||
| max-height: 150px; | ||
| position: relative; | ||
| flex-grow: 1; |
There was a problem hiding this comment.
I do not see the point of this flex grow and direction.
| medium: "360px", | ||
| large: "480px", | ||
| fillParent: "100%", | ||
| fillParent: "fit-content", |
There was a problem hiding this comment.
Fill parent should always be 100% size.
There was a problem hiding this comment.
Review all the visual test cases, there are multiple that does not make sense as visual tests.
| fileInput.dispatchEvent(new Event("change", { bubbles: true })); | ||
|
|
||
| expect(callbackFile).toHaveBeenCalled(); | ||
| }); |
There was a problem hiding this comment.
We should add a transcript test.
| * The type parameter indicates whether it's a "submit" or "stop" event. | ||
| * For submit events, an AbortSignal is provided to allow cancellation. | ||
| */ | ||
| onButtonClick?: (type: "submit" | "stop") => void; |
There was a problem hiding this comment.
Have we considered about passing all the relevant information on submit to the user in case the component is not controlled? That makes proccessing the input far easier.
| }; | ||
|
|
||
| recognition.onerror = (event: SpeechRecognitionErrorEvent) => { | ||
| console.error("Speech recognition error:", event.error); |
There was a problem hiding this comment.
This error should be sent to the message input to display any possible error related to the voice transcript.
2 participants
Checklist
(Check off all the items before submitting)
/libdirectory./websiteas needed.Purpose
Implemente the new message input component based on the design.