Prompt composer

"use client";

import {
  useCallback,
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type FormEvent,
  type KeyboardEvent,
  type ReactNode,
  type Ref,
} from "react";
import { Button } from "./button";
import "./prompt-composer.css";

export type PromptComposerProps = Omit<ComponentProps<"form">, "onSubmit" | "defaultValue"> & {
  /** Controlled text. Pair with onValueChange. */
  value?: string;
  /** Starting text when uncontrolled. Cleared after each send. */
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Called with the text when the person sends. Empty or whitespace-only text never sends. */
  onSubmit?: (value: string) => void;
  /** Called when the person presses stop or Escape while busy. */
  onStop?: () => void;
  /** A response is streaming: the send button becomes a stop button. */
  busy?: boolean;
  placeholder?: string;
  /** Accessible name of the text box. */
  label?: string;
  /** Lines the box grows to before it scrolls. */
  maxRows?: number;
  attachments?: { id: string; name: string }[];
  onRemoveAttachment?: (id: string) => void;
  /** Buttons for attachments or tools, placed left of the send button. */
  tools?: ReactNode;
  /** Short help under the box, e.g. "Enter to send, Shift+Enter for a new line". */
  hint?: ReactNode;
  disabled?: boolean;
  /** Ref to the text box, for focusing it from outside. The root ref still goes to the form. */
  inputRef?: Ref<HTMLTextAreaElement>;
};

function setRefs<T>(node: T, ...refs: (Ref<T> | undefined)[]) {
  for (const ref of refs) {
    if (typeof ref === "function") ref(node);
    else if (ref) ref.current = node;
  }
}

export function PromptComposer({
  value,
  defaultValue = "",
  onValueChange,
  onSubmit,
  onStop,
  busy = false,
  placeholder,
  label = "Message",
  maxRows = 8,
  attachments = [],
  onRemoveAttachment,
  tools,
  hint,
  disabled = false,
  inputRef,
  className,
  style,
  onKeyDown,
  ...rest
}: PromptComposerProps) {
  const [inner, setInner] = useState(defaultValue);
  const text = value ?? inner;
  const empty = text.trim() === "";
  const boxRef = useRef<HTMLTextAreaElement | null>(null);
  const mergedInputRef = useCallback((node: HTMLTextAreaElement | null) => setRefs(node, boxRef, inputRef), [inputRef]);
  const hintId = useId();

  const setText = (next: string) => {
    if (value === undefined) setInner(next);
    onValueChange?.(next);
  };

  // Browsers without field-sizing: content grow the box by measuring it.
  useEffect(() => {
    const el = boxRef.current;
    if (!el || CSS.supports("field-sizing", "content")) return;
    const css = getComputedStyle(el);
    const line = parseFloat(css.lineHeight) || parseFloat(css.fontSize) * 1.5;
    const chrome = parseFloat(css.paddingTop) + parseFloat(css.paddingBottom);
    const max = line * maxRows + chrome;
    el.style.height = "auto";
    el.style.height = `${Math.min(el.scrollHeight, max)}px`;
    el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
  }, [text, maxRows]);

  const send = () => {
    if (busy || disabled || empty) return;
    onSubmit?.(text);
    if (value === undefined) setInner("");
    boxRef.current?.focus();
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    send();
  };

  const handleInputKey = (event: KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.key !== "Enter" || event.shiftKey) return;
    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
    event.preventDefault();
    send();
  };

  const handleFormKey = (event: KeyboardEvent<HTMLFormElement>) => {
    onKeyDown?.(event);
    if (event.key === "Escape" && busy) {
      event.preventDefault();
      event.stopPropagation();
      onStop?.();
    }
  };

  return (
    <form
      {...rest}
      className={["eq-prompt-composer", className].filter(Boolean).join(" ")}
      style={{ "--_max-rows": maxRows, ...style } as CSSProperties}
      data-busy={busy || undefined}
      data-disabled={disabled || undefined}
      onSubmit={handleSubmit}
      onKeyDown={handleFormKey}
    >
      {attachments.length > 0 && (
        <ul className="eq-prompt-composer-attachments" aria-label="Attachments">
          {attachments.map((file) => (
            <li key={file.id} className="eq-prompt-composer-chip">
              <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true">
                <path
                  d="M9 1.75H4.5a1 1 0 0 0-1 1v10.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8M9 1.75l3.5 3.5M9 1.75v3.5h3.5"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span className="eq-prompt-composer-chip-name">{file.name}</span>
              {onRemoveAttachment && (
                <button
                  type="button"
                  className="eq-prompt-composer-chip-remove"
                  aria-label={`Remove ${file.name}`}
                  disabled={disabled}
                  onClick={() => {
                    onRemoveAttachment(file.id);
                    boxRef.current?.focus();
                  }}
                >
                  <svg viewBox="0 0 16 16" width="10" height="10" fill="none" aria-hidden="true">
                    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                  </svg>
                </button>
              )}
            </li>
          ))}
        </ul>
      )}
      <textarea
        ref={mergedInputRef}
        className="eq-prompt-composer-input"
        rows={1}
        value={text}
        placeholder={placeholder}
        aria-label={label}
        aria-describedby={hint != null ? hintId : undefined}
        disabled={disabled}
        onChange={(event) => setText(event.target.value)}
        onKeyDown={handleInputKey}
      />
      <div className="eq-prompt-composer-bar">
        {tools != null && <div className="eq-prompt-composer-tools">{tools}</div>}
        {hint != null && (
          <p className="eq-prompt-composer-hint" id={hintId}>
            {hint}
          </p>
        )}
        <Button
          variant="accent"
          className="eq-prompt-composer-send"
          type={busy ? "button" : "submit"}
          aria-label={busy ? "Stop response" : "Send message"}
          disabled={disabled || (!busy && empty)}
          onClick={
            busy
              ? () => {
                  onStop?.();
                  boxRef.current?.focus();
                }
              : undefined
          }
          lead={
            <span className="eq-prompt-composer-icon" aria-hidden="true">
              <svg className="eq-prompt-composer-icon-send" viewBox="0 0 16 16" fill="none">
                <path
                  d="M8 13V3.5M3.75 7.5 8 3.25l4.25 4.25"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <svg className="eq-prompt-composer-icon-stop" viewBox="0 0 16 16" fill="none">
                <rect x="4.25" y="4.25" width="7.5" height="7.5" rx="1.5" fill="currentColor" />
              </svg>
            </span>
          }
        />
      </div>
    </form>
  );
}