Prompt input

"use client";
import * as React from "react";
import { PromptInput, type Dictation } from "@/components/ui/notchset/prompt-input";

/* the sample "hears" these words; the template's voice adapter listens for real */
const HEARD = ["Draft", "a short", "note to", "the beta list", "about Tuesday"];

export default function PromptInputDemo() {
  const [value, setValue] = React.useState("");
  const [sent, setSent] = React.useState<string[]>([]);
  const [running, setRunning] = React.useState(false);
  const [queued, setQueued] = React.useState<string | null>(null);
  const [dict, setDict] = React.useState<{ on: boolean; heard: number }>({ on: false, heard: 0 });

  /* a sample reply runs for three seconds, then a waiting message goes */
  React.useEffect(() => {
    if (!running) return;
    const t = setTimeout(() => {
      setRunning(false);
      if (queued) {
        setSent((s) => [...s, queued]);
        setQueued(null);
        setRunning(true);
      }
    }, 3000);
    return () => clearTimeout(t);
  }, [running, queued]);
  React.useEffect(() => {
    if (!dict.on) return;
    const t = setTimeout(() => {
      if (dict.heard < HEARD.length) return setDict({ on: true, heard: dict.heard + 1 });
      /* the phrase ends: the words land in the box, nothing is sent */
      setValue((v) => `${v}${v ? " " : ""}${HEARD.join(" ")}.`);
      setDict({ on: false, heard: 0 });
    }, 420);
    return () => clearTimeout(t);
  }, [dict]);

  const dictation: Dictation = { state: dict.on ? "listening" : "off", interim: dict.heard ? HEARD.slice(0, dict.heard).join(" ") : undefined, onToggle: () => setDict((d) => ({ on: !d.on, heard: 0 })) };
  return (
    <div className="flex max-w-[640px] flex-col gap-3">
      {sent.length > 0 && (
        <ul className="m-0 flex list-none flex-col gap-1 p-0 text-[length:var(--ns-text-small)] text-[var(--ns-ink-2)]">
          {sent.map((s, i) => (
            <li key={i}>Sent: {s}</li>
          ))}
        </ul>
      )}
      <PromptInput
        value={value}
        onValueChange={setValue}
        onSubmit={(t) => {
          if (running) setQueued(t);
          else {
            setSent((s) => [...s, t]);
            setRunning(true);
          }
          setValue("");
        }}
        running={running}
        onStop={() => setRunning(false)}
        queued={queued ? { text: queued, onSendNow: () => (setRunning(false), setSent((s) => [...s, queued]), setQueued(null), setRunning(true)), onCancel: () => (setValue(queued), setQueued(null)) } : undefined}
        dictation={dictation}
        attach={{ onFiles: () => {} }}
        placeholder="Ask anything"
      />
    </div>
  );
}