Function HomePage

apps/app/src/app/page.tsx:13–176

()

import { CopilotChat, useAgent, useCopilotKit } from "@copilotkit/react-core/v2";

export default function HomePage() {
  useGenerativeUIExamples();
  useExampleSuggestions();

  const [demoDrawerOpen, setDemoDrawerOpen] = useState(false);
  const [qrOpen, setQrOpen] = useState(false);
  const [qrSessionId, setQrSessionId] = useState("");
  const [scanStatus, setScanStatus] = useState<"waiting" | "scanned" | "picked">("waiting");
  const { agent } = useAgent();
  const { copilotkit } = useCopilotKit();

  // Ref to always have the latest agent/copilotkit for async callbacks
  const agentRef = useRef(agent);
  const copilotkitRef = useRef(copilotkit);
  useEffect(() => { agentRef.current = agent; }, [agent]);
  useEffect(() => { copilotkitRef.current = copilotkit; }, [copilotkit]);

  // Guard: prevent duplicate prompt dispatch across re-renders
  const pickedRef = useRef(false);

  const sendPrompt = useCallback((prompt: string) => {
    const a = agentRef.current;
    const ck = copilotkitRef.current;
    a.addMessage({ id: crypto.randomUUID(), content: prompt, role: "user" });
    ck.runAgent({ agent: a });
  }, []);

  const handleTryDemo = (demo: DemoItem) => {
    setDemoDrawerOpen(false);
    sendPrompt(demo.prompt);
  };

  const openQrModal = () => {
    pickedRef.current = false;
    setScanStatus("waiting");
    setQrSessionId(crypto.randomUUID().slice(0, 12));
    setQrOpen(true);
  };

  // Poll for QR pick status
  useEffect(() => {
    if (!qrOpen || !qrSessionId) return;
    const interval = setInterval(async () => {
      if (pickedRef.current) return;
      try {
        const res = await fetch(`/api/pick?sessionId=${qrSessionId}`);
        const data = await res.json();
        if (data.status === "scanned") {
          setScanStatus("scanned");
        } else if (data.status === "picked" && data.prompt && !pickedRef.current) {
          pickedRef.current = true;
          clearInterval(interval);
          setScanStatus("picked");
          setTimeout(() => {
            setQrOpen(false);
            sendPrompt(data.prompt);
          }, 800);
        }