zopu-code/repos/web/hooks/chat/use-chat-composer.ts

import type { ChangeEvent, FormEvent, KeyboardEvent } from "react";
import { useRef, useState } from "react";

interface UseChatComposerOptions {
  busy: boolean;
  onSend: (message: string) => Promise<void>;
}

export const useChatComposer = ({ busy, onSend }: UseChatComposerOptions) => {
  const [draft, setDraft] = useState("");
  const [isFocused, setIsFocused] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(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<HTMLTextAreaElement>) => {
    if (
      event.key === "Enter" &&
      !event.shiftKey &&
      !event.nativeEvent.isComposing
    ) {
      event.preventDefault();
      void handleSubmit();
    }
  };

  const inputProps = {
    onBlur: () => setIsFocused(false),
    onChange: (event: ChangeEvent<HTMLTextAreaElement>) =>
      setDraft(event.target.value),
    onFocus: () => setIsFocused(true),
    onKeyDown: handleKeyDown,
    ref: textareaRef,
    value: draft,
  };

  return {
    canSend,
    draft,
    handleSubmit,
    inputProps,
    isFocused,
  };
};