ResponseAI

"use client"
import * as React from "react"import { RotateCcwIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import { Response } from "@/components/ui/response"import type { SourceData } from "@/components/ui/sources"
const ANSWER = `Days sales outstanding rose from **38 to 46 days** in Q3. Most of the change comes from two enterprise accounts that moved to net 60 terms in July [1].
| Customer | Terms | Open balance | Days late || --- | --- | ---: | ---: || Halcyon Health | Net 60 | $412,800 | 18 || Brightline Freight | Net 60 | $268,350 | 11 || Orbis Retail | Net 30 | $96,120 | 4 |
Excluding those two accounts, DSO is **39 days**, in line with Q2. The collections policy still assumes net 30 for every invoice, so reminders go out a month early [2].
- Update the reminder schedule for accounts on net 60.- Ask Sales to flag term changes in the deal desk form.`
const SOURCES: SourceData[] = [  {    title: "Halcyon Health order form, July 2026",    url: "https://app.ledgerline.com/contracts/halcyon-2026",    siteName: "Ledgerline Contracts",    snippet: "Payment terms: net 60 from invoice date, effective July 1, 2026.",  },  {    title: "Collections policy v3",    url: "https://www.notion.so/ledgerline/collections-policy",    siteName: "Notion",    snippet: "First reminder 7 days after due date. Due date is calculated as invoice date plus 30 days.",  },]
const TOKENS = ANSWER.match(/\S+\s*/g) ?? []
export default function ResponseStreaming() {  const [count, setCount] = React.useState(0)  const [run, setRun] = React.useState(0)
  React.useEffect(() => {    let n = 0    const id = setInterval(() => {      n = Math.min(TOKENS.length, n + 2)      setCount(n)      if (n >= TOKENS.length) clearInterval(id)    }, 50)    return () => clearInterval(id)  }, [run])
  const streaming = count < TOKENS.length
  return (    <div className="flex w-full max-w-2xl flex-col gap-4">      <Response streaming={streaming} sources={SOURCES} className="min-h-80">        {TOKENS.slice(0, count).join("")}      </Response>      <Button variant="outline" size="sm" className="self-start" onClick={() => {          setCount(0)          setRun((r) => r + 1)        }}      >        <RotateCcwIcon data-icon="inline-start" />        Stream again      </Button>    </div>  )}

import { Response } from "@/components/ui/response"
const MARKDOWN = `## Close checklist for October
Accruals are posted for **14 of 16** vendors. The two open ones are below, followed by the journal entry to book once the invoices arrive.
### Still open
1. **Northbeam Logistics**: invoice expected on October 28, estimate $38,200.2. **Kestrel Analytics**: usage true up, estimate $6,450. See the [usage report](https://app.ledgerline.com/reports/kestrel-usage).
> Accrue at the estimate if the invoice is not in by day 3 of close, then reverse in November.
\`\`\`csvdate,account,debit,credit,memo2026-10-31,6120 Freight,38200,,Northbeam October accrual2026-10-31,2110 Accrued liabilities,,38200,Northbeam October accrual\`\`\`
Run \`close status --period 2026-10\` to see what is left.`
export default function ResponseMarkdown() {  return (    <div className="w-full max-w-2xl">      <Response>{MARKDOWN}</Response>    </div>  )}