Response

import { useEffect, useState } from "react";
import { Button, Response } from "@rdloom/react";

const reply = "Checking the numbers now. **Sales rose in March**, and the biggest gain came from the new annual plan:\n\n- Annual plans: up 18%\n- Monthly plans: flat\n\n```sql\nSELECT month, SUM(total) FROM orders GROUP BY month;\n```";

// The text arrives a few characters at a time. Pass isStreaming while it does: the caret shows, and
// a screen reader waits for the finished text instead of reading every fragment.
export default function ResponseStreamingExample() {
  const [shown, setShown] = useState(0);
  const [run, setRun] = useState(0);
  const done = shown >= reply.length;

  useEffect(() => {
    setShown(0);
    const id = setInterval(() => setShown((n) => (n >= reply.length ? n : n + 3)), 40);
    return () => clearInterval(id);
  }, [run]);

  return (
    <div className="flex w-[34rem] max-w-full flex-col items-center gap-3">
      <Response className="w-full" isStreaming={!done}>{reply.slice(0, shown)}</Response>
      <Button variant="secondary" size="sm" onPress={() => setRun((n) => n + 1)}>
        Replay
      </Button>
    </div>
  );
}

import { Response, Sources, type CitationPart } from "@rdloom/react";

const sources: CitationPart[] = [
  { type: "citation", id: "ops", title: "Operations handbook", url: "https://example.com/handbook", snippet: "Refunds are issued within 5 business days." },
  { type: "citation", id: "policy", title: "Refund policy", url: "https://example.com/policy" },
];

// [1] and [2] in the text become markers that jump to the matching entry in Sources.
export default function ResponseWithCitationsExample() {
  return (
    <div className="flex w-[34rem] max-w-full flex-col gap-4">
      <Response citations={sources}>
        Refunds go out within 5 business days [1], and only for orders placed in the last 30 days [2].
      </Response>
      <Sources sources={sources} />
    </div>
  );
}