AI chat

"use client"
import * as React from "react"import { MailIcon, ReceiptTextIcon, SquarePenIcon } from "lucide-react"
import { AiChat } from "@/components/ui/ai-chat"import { AiMark } from "@/components/ui/ai-mark"import type { AiToolConfig } from "@/components/ui/ai-message-parts"import { Button } from "@/components/ui/button"import type { ModelOption } from "@/components/ui/model-picker"
const models: ModelOption[] = [  {    id: "claude-opus-5-5",    name: "Claude Opus 5.5",    provider: "Anthropic",    description: "Best for analysis and multi step work",    capabilities: ["reasoning", "tools", "vision", "files", "web"],    contextWindow: 1_000_000,    tag: "Default",  },  {    id: "claude-sonnet-5-5",    name: "Claude Sonnet 5.5",    provider: "Anthropic",    description: "Fast and capable for everyday questions",    capabilities: ["reasoning", "tools", "vision", "files", "web"],    contextWindow: 1_000_000,  },  {    id: "claude-haiku-5-5",    name: "Claude Haiku 5.5",    provider: "Anthropic",    description: "Quick answers at the lowest cost",    capabilities: ["reasoning", "tools", "vision", "files"],    contextWindow: 1_000_000,  },]
type ReminderInput = { customer?: string; to?: string; invoices?: string[]; message?: string }
const tools: Record<string, AiToolConfig> = {  lookupInvoices: {    title: "Look up invoices",    icon: <ReceiptTextIcon />,    summary: (input) => {      const { status, customer } = input as { status?: string; customer?: string }      return [customer, status === "all" ? "all invoices" : status && `${status} invoices`].filter(Boolean).join(", ")    },  },  sendReminder: {    title: "Send payment reminder",    icon: <MailIcon />,    summary: (input) => {      const { to, invoices } = input as ReminderInput      return [to, invoices && `${invoices.length} invoices`].filter(Boolean).join(", ")    },    approval: {      title: (input) => `Email a payment reminder to ${(input as ReminderInput).customer ?? "the customer"}`,      actionLabel: "Send reminder",      risk: "medium",      params: (input) => {        const { to, invoices, message } = input as ReminderInput        return [          { label: "To", value: to },          { label: "Invoices", value: invoices?.join(", "), mono: true },          { label: "Message", value: message },        ]      },    },  },}
export default function AiChatCopilot() {  const [thread, setThread] = React.useState(0)
  return (    <div className="flex h-160 w-full min-w-0 flex-col overflow-hidden rounded-xl border bg-background">      <div className="flex h-12 shrink-0 items-center gap-2 border-b px-4">        <AiMark />        <span className="text-sm font-medium">Relay Copilot</span>        <span className="truncate text-[13px] text-muted-foreground">Receivables</span>        <Button variant="ghost" size="sm" className="ms-auto" onClick={() => setThread((t) => t + 1)}>          <SquarePenIcon data-icon="inline-start" />          New chat        </Button>      </div>      <AiChat        key={thread}        // The docs stream a scripted answer. Remove api to use app/api/chat/route.ts with Claude.        api="/api/demo-chat"        assistantName="Relay Copilot"        models={models}        tools={tools}        emptyTitle="Ask about receivables"        emptyDescription="Relay Copilot reads your invoices and customers, and asks before it emails anyone."        suggestions={[          "Which overdue invoices should I chase first?",          "Who owes us the most right now?",          "Remind Kestrel Health about their invoices",        ]}        placeholder="Ask about invoices, customers or cash"        disclaimer="Copilot can make mistakes. Check figures before you share them."        className="min-h-0 flex-1"      />    </div>  )}

import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockTitle,} from "@/components/ui/code-block"
const steps = [  {    title: "Install the component and the route",    body: "Adds AiChat and AiMessageParts, the route handler at app/api/chat/route.ts, example tools in lib/ai/tools.ts, and the ai, @ai-sdk/react, @ai-sdk/anthropic and zod packages.",    file: "Terminal",    code: "npx prodular-ui add ai-chat",  },  {    title: "Add your Anthropic key",    body: "Create a key in the Claude Console. The route reads it on the server, it never reaches the browser. TOOL_APPROVAL_SECRET is optional and signs approvals in production.",    file: ".env.local",    code: "ANTHROPIC_API_KEY=sk-ant-...\nTOOL_APPROVAL_SECRET=a-long-random-string",  },  {    title: "Render the chat",    body: "Without api, AiChat posts to /api/chat, which streams Claude Opus 5.5 with reasoning, tools, approvals and web sources. The demo above passes api=\"/api/demo-chat\", a docs only route that replays a scripted answer with the AI SDK's simulated stream so it runs without a key. Drop that prop and the same UI talks to Claude.",    file: "app/assistant/page.tsx",    code: `import { AiChat } from "@/components/ui/ai-chat"
export default function AssistantPage() {  return (    <div className="h-dvh">      <AiChat        assistantName="Relay Copilot"        suggestions={["Which overdue invoices should I chase first?"]}      />    </div>  )}`,  },  {    title: "Make the tools yours",    body: "Swap the sample ledger in lib/ai/tools.ts for your database. Anything that writes, sends or pays goes in toolApproval as \"user-approval\" in the route, and the chat asks a person before it runs.",    file: "app/api/chat/route.ts",    code: `toolApproval: {  sendReminder: { type: "user-approval", reason: "Emails a customer on behalf of Halcyon Labs." },},`,  },]
export default function AiChatSetup() {  return (    <ol className="flex w-full max-w-2xl flex-col divide-y">      {steps.map((step, i) => (        <li key={step.title} className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2 py-5 first:pt-0 last:pb-0">          <span className="row-span-3 flex size-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground tabular-nums">            {i + 1}          </span>          <h4 className="text-sm font-medium text-foreground">{step.title}</h4>          <p className="text-[13px] leading-relaxed text-pretty text-muted-foreground">{step.body}</p>          <CodeBlock size="sm" className="mt-1">            <CodeBlockHeader>              <CodeBlockTitle className="font-normal text-muted-foreground">{step.file}</CodeBlockTitle>              <CodeBlockActions>                <CodeBlockCopyButton value={step.code} />              </CodeBlockActions>            </CodeBlockHeader>            <CodeBlockContent>{step.code}</CodeBlockContent>          </CodeBlock>        </li>      ))}    </ol>  )}