Tool call

"use client";import {  ToolCall,  ToolCallCode,  ToolCallPanel,  ToolCallSection,  ToolCallTrigger,} from "@/components/vip-ui/tool-call";export function ToolCallDemo() {  return (    <ToolCall defaultExpanded className="w-full max-w-lg">      <ToolCallTrigger        name="search_docs"        status="complete"        summary="Found the disclosure guide"      />      <ToolCallPanel>        <ToolCallSection label="Input">          <ToolCallCode>{`{ "query": "disclosure expansion" }`}</ToolCallCode>        </ToolCallSection>        <ToolCallSection label="Output">          <p>Disclosure supports controlled and default expanded state.</p>        </ToolCallSection>      </ToolCallPanel>    </ToolCall>  );}

"use client";import { useState } from "react";import { ToggleButton } from "@/components/vip-ui/toggle-button";import { ToggleButtonGroup } from "@/components/vip-ui/toggle-button-group";import {  ToolCall,  ToolCallPanel,  type ToolCallStatus,  ToolCallTrigger,} from "@/components/vip-ui/tool-call";const statuses: Record<  ToolCallStatus,  { name: string; summary: string; output: string }> = {  running: {    name: "Running",    summary: "Loading the page",    output: "Waiting for a response.",  },  complete: {    name: "Complete",    summary: "Read 1 page",    output: "The page has 4 sections and 2 code examples.",  },  error: {    name: "Error",    summary: "The page did not load",    output: "The server did not respond. Try again.",  },};function isStatus(key: unknown): key is ToolCallStatus {  return typeof key === "string" && key in statuses;}export function ToolCallStatesDemo() {  const [status, setStatus] = useState<ToolCallStatus>("running");  const { summary, output } = statuses[status];  return (    <div className="grid w-full max-w-lg gap-3">      <ToolCall defaultExpanded>        <ToolCallTrigger name="read_page" status={status} summary={summary} />        <ToolCallPanel>{output}</ToolCallPanel>      </ToolCall>      <ToggleButtonGroup        aria-label="Status"        selectionMode="single"        disallowEmptySelection        selectedKeys={[status]}        onSelectionChange={(keys) => {          const [key] = keys;          if (isStatus(key)) setStatus(key);        }}      >        {Object.entries(statuses).map(([id, { name }]) => (          <ToggleButton key={id} id={id} variant="segmented">            {name}          </ToggleButton>        ))}      </ToggleButtonGroup>    </div>  );}

"use client";import { ArrowCounterClockwiseIcon } from "@phosphor-icons/react";import { useEffect, useState } from "react";import { Button } from "@/components/vip-ui/button";import {  ToolCall,  ToolCallCode,  ToolCallPanel,  ToolCallSection,  type ToolCallStatus,  ToolCallTrigger,} from "@/components/vip-ui/tool-call";const steps = [  {    name: "list_files",    summary: "src/components",    output: "42 files",  },  {    name: "read_file",    summary: "button.tsx",    output: "68 lines",  },  {    name: "run_tests",    summary: "button.test.tsx",    output: "12 passed",  },];export function ToolCallSequenceDemo() {  const [done, setDone] = useState(0);  const [run, setRun] = useState(0);  useEffect(() => {    if (done >= steps.length) return;    const timer = window.setTimeout(() => setDone((count) => count + 1), 1400);    return () => window.clearTimeout(timer);  }, [done]);  return (    <div className="grid w-full max-w-lg gap-2">      {steps.map((step, index) => {        if (index > done) return null;        const status: ToolCallStatus = index < done ? "complete" : "running";        return (          <ToolCall            key={`${run}-${step.name}`}            className="transition-[opacity,translate] duration-300 ease-out-quint starting:opacity-0 motion-safe:starting:translate-y-1"          >            <ToolCallTrigger              name={step.name}              status={status}              summary={step.summary}            />            <ToolCallPanel>              <ToolCallSection label="Output">                <ToolCallCode>                  {status === "complete" ? step.output : "Waiting"}                </ToolCallCode>              </ToolCallSection>            </ToolCallPanel>          </ToolCall>        );      })}      <div className="mt-1">        <Button          variant="ghost"          size="sm"          onPress={() => {            setDone(0);            setRun((count) => count + 1);          }}        >          <ArrowCounterClockwiseIcon aria-hidden="true" />          Replay        </Button>      </div>    </div>  );}