import type { ChangeEvent, FormEvent, KeyboardEvent } from "react"; import { useRef, useState } from "react"; interface UseChatComposerOptions { busy: boolean; onSend: (message: string) => Promise; } export const useChatComposer = ({ busy, onSend }: UseChatComposerOptions) => { const [draft, setDraft] = useState(""); const [isFocused, setIsFocused] = useState(false); const textareaRef = useRef(null); const canSend = draft.trim().length > 0 && !busy; const handleSubmit = async (event?: FormEvent) => { event?.preventDefault(); const message = draft.trim(); if (!message || busy) { return; } setDraft(""); try { await onSend(message); } finally { textareaRef.current?.focus(); } }; const handleKeyDown = (event: KeyboardEvent) => { if ( event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing ) { event.preventDefault(); void handleSubmit(); } }; const inputProps = { onBlur: () => setIsFocused(false), onChange: (event: ChangeEvent) => setDraft(event.target.value), onFocus: () => setIsFocused(true), onKeyDown: handleKeyDown, ref: textareaRef, value: draft, }; return { canSend, draft, handleSubmit, inputProps, isFocused, }; };