Jyotisha/frontend/src/components/chat-composer.tsx

"use client";

import { useSyncExternalStore } from "react";
import type { ChangeEvent, FormEvent, KeyboardEvent, ReactNode, RefObject } from "react";
import { ArrowUp, Square } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { CharacterRemaining } from "@/components/character-remaining";
import { characterRemainingVisible } from "@/lib/character-remaining";
import {
  composerDraftSnapshot,
  serverComposerDraftSnapshot,
  subscribeComposerDraft,
} from "@/lib/composer-draft";
import { COMPOSER_QUEUE_LABEL, COMPOSER_QUEUE_RECALL_LABEL } from "@/lib/queued-draft";

export const composerRemainingId = "composer-character-remaining";

export function useComposerDraft(): string {
  return useSyncExternalStore(
    subscribeComposerDraft,
    composerDraftSnapshot,
    serverComposerDraftSnapshot,
  );
}

type ChatComposerProps = {
  readonly inputRef: RefObject<HTMLTextAreaElement | null>;
  /**
   * A surface that owns its own draft (the rectification session) passes it here;
   * the main chat leaves it undefined and the composer reads the draft store.
   */
  readonly value?: string;
  readonly remainingId?: string;
  /** Extra description (a question stem shown above the field) merged with the count id. */
  readonly describedBy?: string;
  readonly inputLabel: string;
  readonly placeholder: string;
  readonly maxLength: number;
  readonly inputDisabled: boolean;
  readonly submitLabel: string;
  readonly submitBlocked: boolean;
  readonly stopVisible: boolean;
  readonly stopLabel: string;
  readonly stopTitle: string;
  readonly queued?: { text: string; onRecall: () => void };
  /**
   * Controls that belong to the composer itself (model picker, chart subject).
   * They render on the composer's own bottom row; there is no longer a strip
   * below the composer holding a permanent 44px of chrome.
   */
  readonly toolbar?: ReactNode;
  readonly onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  readonly onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
  readonly onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
  readonly onStop: () => void;
};

export function ChatComposer({
  inputRef,
  value,
  remainingId = composerRemainingId,
  describedBy,
  inputLabel,
  placeholder,
  maxLength,
  inputDisabled,
  submitLabel,
  submitBlocked,
  stopVisible,
  stopLabel,
  stopTitle,
  queued,
  toolbar,
  onSubmit,
  onChange,
  onKeyDown,
  onStop,
}: ChatComposerProps) {
  const storeDraft = useComposerDraft();
  const draft = value ?? storeDraft;
  const showRemaining = characterRemainingVisible(draft.length, maxLength);
  const describedByIds = [describedBy, showRemaining ? remainingId : undefined].filter(Boolean).join(" ") || undefined;

  return (
    <>
      {queued ? (
        <div className="composer-queue" role="status">
          <div className="composer-queue__body">
            <p className="composer-queue__label">{COMPOSER_QUEUE_LABEL}</p>
            <p className="composer-queue__text">{queued.text}</p>
          </div>
          <button className="composer-queue__recall" type="button" onClick={queued.onRecall}>
            {COMPOSER_QUEUE_RECALL_LABEL}
          </button>
        </div>
      ) : null}
      <form className="composer" onSubmit={onSubmit}>
        <Textarea
          ref={inputRef}
          aria-label={inputLabel}
          aria-describedby={describedByIds}
          placeholder={placeholder}
          rows={1}
          maxLength={maxLength}
          disabled={inputDisabled}
          value={draft}
          onChange={onChange}
          onKeyDown={onKeyDown}
        />
        <div className="composer-row">
          {toolbar ? <div className="composer-tools">{toolbar}</div> : null}
          <div className="composer-row-end">
            {showRemaining ? (
              <CharacterRemaining id={remainingId} length={draft.length} maxLength={maxLength} />
            ) : null}
            {stopVisible ? (
              <Button
                className="composer-stop"
                aria-label={stopLabel}
                title={stopTitle}
                size="icon"
                type="button"
                onClick={onStop}
              >
                <Square aria-hidden="true" />
              </Button>
            ) : (
              <Button aria-label={submitLabel} disabled={!draft.trim() || submitBlocked} size="icon" type="submit">
                <ArrowUp aria-hidden="true" />
              </Button>
            )}
          </div>
        </div>
      </form>
    </>
  );
}