Chat Composer

"use client";

import { useId, useState, type FormEvent, type KeyboardEvent } from "react";
import { ArrowUp, Plus, Square } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ChatComposerProps {
  placeholder?: string;
  /** Small print under the composer. Pass "" to hide it. */
  disclaimer?: string;
  /** While true, the send button becomes a stop button. */
  generating?: boolean;
  onSend?: (message: string) => void;
  onStop?: () => void;
  onAttach?: () => void;
  /** Paint the Nocturne glow above the composer. */
  glow?: boolean;
  label?: string;
  className?: string;
}

/**
 * Chat composer: auto-growing textarea in a rounded graphite panel, attach button, and a round light send
 * button that turns into a stop square while the assistant answers. Enter sends, Shift+Enter adds a line.
 */
export function ChatComposer({
  placeholder = "Write to Nova…",
  disclaimer = "Nova can make mistakes. Check important information.",
  generating = false,
  onSend,
  onStop,
  onAttach,
  glow = true,
  label = "Message",
  className,
}: ChatComposerProps) {
  const [value, setValue] = useState("");
  const id = useId();
  const canSend = value.trim().length > 0 && !generating;

  const send = () => {
    if (!canSend) return;
    onSend?.(value.trim());
    setValue("");
  };

  const onSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (generating) onStop?.();
    else send();
  };

  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
      e.preventDefault();
      send();
    }
  };

  return (
    <div className={cn("relative isolate w-full", className)}>
      {glow && <div aria-hidden className="pointer-events-none absolute inset-x-[10%] -top-24 -z-10 h-40 bg-(image:--nocturne-glow)" />}
      <form onSubmit={onSubmit} className="da-stroke da-transition rounded-da-lg bg-da-surface p-3 shadow-da-md focus-within:border-da-border-strong">
        <label htmlFor={id} className="sr-only">
          {label}
        </label>
        <textarea
          id={id}
          rows={2}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={onKeyDown}
          placeholder={placeholder}
          className="block max-h-48 min-h-12 w-full resize-none bg-transparent px-2 pt-1 text-[15px] leading-relaxed text-da-fg outline-none [field-sizing:content] placeholder:text-da-muted-fg"
        />
        <div className="mt-1 flex items-center justify-end gap-1.5">
          <button
            type="button"
            onClick={onAttach}
            aria-label="Add files or context"
            className="da-focus da-transition grid size-9 place-items-center rounded-full text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
          >
            <Plus aria-hidden className="size-5" />
          </button>
          <button
            type="submit"
            disabled={!generating && !canSend}
            aria-label={generating ? "Stop generating" : "Send message"}
            className="da-focus da-transition grid size-9 place-items-center rounded-full bg-da-fg text-da-bg hover:bg-da-fg/90 disabled:bg-da-muted disabled:text-da-muted-fg"
          >
            {generating ? <Square aria-hidden className="size-3.5 fill-current" /> : <ArrowUp aria-hidden className="size-4" />}
          </button>
        </div>
      </form>
      {disclaimer && <p className="mt-2 text-center text-xs text-da-muted-fg">{disclaimer}</p>}
    </div>
  );
}

export default ChatComposer;