Prompt input

import { useEffect, useRef, useState } from "react"
import { PromptInput } from "@/components/ui/prompt-input"

type Turn = { id: string; role: "user" | "assistant"; text: string; status?: "pending" | "complete" };

const answers = [
  "Here is a short answer. Start with the smallest change, check it with the keyboard, then add polish.",
  "Good question. I would keep one source of truth and let the components stay controlled.",
  "That depends on the screen. If you tell me where it lives, I can be more specific.",
];

function useScriptedChat(initial: Turn[]) {
  const [turns, setTurns] = useState(initial);
  const n = useRef(0);
  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
  useEffect(() => () => timers.current.forEach(clearTimeout), []);
  const send = (text: string) => {
    const id = n.current++;
    setTurns((t) => [...t, { id: `u${id}-${t.length}`, role: "user", text }, { id: `a${id}-${t.length}`, role: "assistant", text: "", status: "pending" }]);
    timers.current.push(
      setTimeout(() => setTurns((t) => t.map((x, i) => (i === t.length - 1 && x.status === "pending" ? { ...x, text: answers[id % answers.length], status: "complete" } : x))), 1100),
    );
  };
  return [turns, send, setTurns] as const;
}

export function PromptInputDemo() {
  const [, send] = useScriptedChat([{ id: "s0", role: "assistant", text: "Ask me about your projects, like which one needs attention first.", status: "complete" }]);
  return (
    <PromptInput allowFiles={false} placeholder="Ask about this workspace" onSubmit={({ text }) => send(text)} />
  );
}