Response

"use client";import { useEffect, useRef, useState } from "react";import { Button } from "@/components/vip-ui/button";import { CopyButton } from "@/components/vip-ui/copy-button";import {  Response,  ResponseActions,  ResponseContent,  ResponseNotice,  type ResponseStatus,} from "@/components/vip-ui/response";const TEXT =  "The migration touches three parts of the system. The schema change is additive, so old clients keep working, and the read path can stay on the current index while the new filter rolls out.";const WORDS = TEXT.split(" ");export function ResponseDemo() {  const [count, setCount] = useState(WORDS.length);  const [status, setStatus] = useState<ResponseStatus>("complete");  const countRef = useRef(count);  countRef.current = count;  useEffect(() => {    if (status !== "streaming") return;    const id = window.setInterval(() => {      if (countRef.current >= WORDS.length) {        setStatus("complete");        return;      }      setCount((current) => Math.min(WORDS.length, current + 1));    }, 90);    return () => window.clearInterval(id);  }, [status]);  const start = () => {    setCount(0);    setStatus("streaming");  };  return (    <Response status={status} className="w-full max-w-md">      <ResponseContent>{WORDS.slice(0, count).join(" ")}</ResponseContent>      <ResponseNotice />      <ResponseActions>        {status === "streaming" && (          <Button            type="button"            variant="outline"            size="sm"            onPress={() => setStatus("stopped")}          >            Stop          </Button>        )}        {status !== "streaming" && (          <CopyButton value={TEXT} variant="ghost" size="sm" />        )}        {status === "complete" && (          <Button type="button" variant="ghost" size="sm" onPress={start}>            Stream again          </Button>        )}        {status === "stopped" && (          <Button type="button" variant="ghost" size="sm" onPress={start}>            Continue          </Button>        )}      </ResponseActions>    </Response>  );}

import { Button } from "@/components/vip-ui/button";import { CopyButton } from "@/components/vip-ui/copy-button";import {  Response,  ResponseActions,  ResponseContent,} from "@/components/vip-ui/response";const TEXT =  "The migration is safe to run behind the current feature flag. Roll the reader out first, then the writer.";export function ResponseActionsDemo() {  return (    <Response status="complete" className="w-full max-w-md">      <ResponseContent>{TEXT}</ResponseContent>      <ResponseActions>        <CopyButton value={TEXT} variant="ghost" size="sm" />        <Button type="button" variant="ghost" size="sm">          Regenerate        </Button>      </ResponseActions>    </Response>  );}

"use client";import { useEffect, useRef, useState } from "react";import { Button } from "@/components/vip-ui/button";import { CopyButton } from "@/components/vip-ui/copy-button";import {  Response,  ResponseActions,  ResponseContent,  ResponseNotice,  type ResponseStatus,} from "@/components/vip-ui/response";const TEXT =  "I can keep going with the rollout plan, but the batch window on the read replica still needs a decision before the migration runs.";const WORDS = TEXT.split(" ");export function ResponseStoppedDemo() {  const [count, setCount] = useState(11);  const [status, setStatus] = useState<ResponseStatus>("stopped");  const countRef = useRef(count);  countRef.current = count;  useEffect(() => {    if (status !== "streaming") return;    const id = window.setInterval(() => {      if (countRef.current >= WORDS.length) {        setStatus("complete");        return;      }      setCount((current) => Math.min(WORDS.length, current + 1));    }, 90);    return () => window.clearInterval(id);  }, [status]);  return (    <Response status={status} className="w-full max-w-md">      <ResponseContent>{WORDS.slice(0, count).join(" ")}</ResponseContent>      <ResponseNotice />      <ResponseActions>        {status === "streaming" ? (          <Button            type="button"            variant="outline"            size="sm"            onPress={() => setStatus("stopped")}          >            Stop          </Button>        ) : (          <Button            type="button"            variant="ghost"            size="sm"            onPress={() => setStatus("streaming")}          >            Continue          </Button>        )}        {status === "stopped" && (          <CopyButton            value={WORDS.slice(0, count).join(" ")}            variant="ghost"            size="sm"          />        )}      </ResponseActions>    </Response>  );}

import { Button } from "@/components/vip-ui/button";import {  Response,  ResponseActions,  ResponseContent,  ResponseNotice,} from "@/components/vip-ui/response";export function ResponseErrorDemo() {  return (    <Response status="error" className="w-full max-w-md">      <ResponseContent>        The connection closed before the answer finished.      </ResponseContent>      <ResponseNotice />      <ResponseActions>        <Button type="button" variant="ghost" size="sm">          Retry        </Button>      </ResponseActions>    </Response>  );}

import {  Reasoning,  ReasoningPanel,  ReasoningTrigger,} from "@/components/vip-ui/reasoning";import {  Response,  ResponseContent,  ResponseFooter,} from "@/components/vip-ui/response";import { SourceLink } from "@/components/vip-ui/source-link";export function ResponseSourcesDemo() {  return (    <div className="grid w-full max-w-lg gap-2">      <Reasoning status="complete" duration={8} className="w-full">        <ReasoningTrigger />        <ReasoningPanel>          Checked the registry files before answering.        </ReasoningPanel>      </Reasoning>      <Response status="complete" className="w-full">        <ResponseContent>          The composer grows to maxRows, then scrolls. Install Attachment          separately to show the files in the composer.        </ResponseContent>        <ResponseFooter>          <SourceLink            href="https://vip-ui.dev/components/prompt-input"            label="Prompt input"            source="vip/ui"            index={1}          />          <SourceLink            href="https://vip-ui.dev/components/attachment"            label="Attachment"            source="vip/ui"            index={2}          />        </ResponseFooter>      </Response>    </div>  );}