Streaming text

import { StreamingText } from "@oration/canon/components/ai/streaming-text";import { SegmentedControl } from "@oration/canon/components/segmented-control";import * as React from "react";export function Speed() {    const [speed, setSpeed] = React.useState<"40" | "180" | "420">("180");    return (        <div className="flex w-full max-w-lg flex-col gap-4">            <SegmentedControl                label="Speed"                value={speed}                onValueChange={setSpeed}                options={[                    { value: "40", label: "40 chars/s" },                    { value: "180", label: "180" },                    { value: "420", label: "420" },                ]}                className="self-start"            />            <StreamingText                key={speed}                speed={Number(speed)}                text="Orchard Street asked why invoice OS-4471 hasn't been paid. It was approved on September 22 and paid by ACH on Friday, September 25. The agent sent the trace number and resent the remittance to their AP inbox."            />        </div>    );}

import { StreamingText } from "@oration/canon/components/ai/streaming-text";export function Formatting() {    return (        <div className="w-full max-w-lg">            <StreamingText                speed={260}                text={                    'Two instructions in the **Payments desk agent** prompt cause most failed calls:\n\n- It insists on the full invoice number, so callers who read the last four digits get asked again.\n- It says "processing" for scheduled payments instead of reading `{{payment_run_date}}`.\n\n## What the edit changes\n\n1. Accept the last four digits with the supplier name.\n2. Read the run date for scheduled payments.'                }            />        </div>    );}

import { type Source } from "@oration/canon/components/ai/source-cards";import { StreamingText } from "@oration/canon/components/ai/streaming-text";import { SegmentedControl } from "@oration/canon/components/segmented-control";import * as React from "react";export function SourcesLayout() {    const [mode, setMode] = React.useState<"row" | "list" | "hidden">("list");    const sources: Source[] = [        {            id: "kb-bank",            kind: "doc",            title: "Bank change verification",            snippet:                "Bank changes need a verified callback to the number on file before the change is applied.",            meta: "Payment security",            score: 0.95,        },        {            id: "kb-portal",            kind: "doc",            title: "Updating details in the supplier portal",            snippet:                "Suppliers can submit new bank details in the portal; they apply after verification.",            meta: "Portal",            score: 0.83,        },    ];    return (        <div className="flex w-full max-w-md flex-col gap-4">            <SegmentedControl                label="Sources"                value={mode}                onValueChange={setMode}                options={[                    { value: "row", label: "Row" },                    { value: "list", label: "List" },                    { value: "hidden", label: "Hidden" },                ]}                className="self-start"            />            <StreamingText                key={mode}                speed={220}                className="text-13"                citations={sources}                showSources={mode !== "hidden"}                sourcesLayout={mode === "row" ? "row" : "list"}                text="No. Bank changes need a verified callback to the number already on file [1]. Point the supplier to the portal, where new details apply after that callback [2]."            />        </div>    );}

import { StreamingText } from "@oration/canon/components/ai/streaming-text";import { toast } from "@oration/canon/components/toast";import { SparklesIcon } from "lucide-react";export function FollowUps() {    return (        <section className="flex w-full max-w-xl flex-col gap-2 rounded-xl bg-card p-4 text-left shadow-border">            <h3 className="flex items-center gap-1.5 text-13 font-medium text-foreground">                <SparklesIcon                    aria-hidden="true"                    className="size-3.5 text-muted-foreground"                />                Summary            </h3>            <StreamingText                speed={220}                className="text-sm"                text="Northwind Freight called to confirm Friday's payment run. The agent confirmed 14 invoices totaling $186,420.00 are scheduled for Friday, October 2, and emailed the remittance preview to their AR inbox."                followUps={[                    "What should the agent have said differently?",                    "Draft a follow-up email to Northwind Freight",                    "Turn this call into an evaluation case",                ]}                onFollowUp={(text) =>                    toast.add({ title: "Sent to Copilot", description: text })                }            />        </section>    );}

import { StreamingText } from "@oration/canon/components/ai/streaming-text";import { Button } from "@oration/canon/components/button";import * as React from "react";export function StartAndDone() {    const [start, setStart] = React.useState(false);    const [done, setDone] = React.useState(false);    return (        <section            aria-label="AI handoff summary"            className="flex w-full max-w-lg flex-col gap-3 rounded-xl bg-card p-4 text-left shadow-border"        >            <div className="flex items-center justify-between gap-2">                <div className="flex flex-col">                    <h3 className="text-13 font-medium text-foreground">                        Handoff from Payments desk agent                    </h3>                    <span className="text-xs text-muted-foreground">                        after 3:42 on the line                    </span>                </div>                {start ? null : (                    <Button                        type="button"                        variant="outline"                        size="sm"                        onClick={() => setStart(true)}                    >                        Summarize call                    </Button>                )}            </div>            <StreamingText                start={start}                speed={140}                className="text-sm"                onDone={() => setDone(true)}                text="Jordan from Orchard Street wants to switch remittances to a new AP inbox. The agent verified the vendor ID but couldn't confirm the caller, so it transferred instead of changing the address."            />            {done ? (                <p className="text-xs text-muted-foreground">                    Written from 14 turns. Review before you reply.                </p>            ) : null}        </section>    );}

import { SimpleMarkdown } from "@oration/canon/components/ai/markdown";import { StreamCaret } from "@oration/canon/components/ai/streaming-text";import { Button } from "@oration/canon/components/button";import { useSimulatedStream } from "@oration/canon/hooks/use-simulated-stream";import { RotateCcwIcon } from "lucide-react";import * as React from "react";export function OwnStream() {    const text =        "Containment for the **Remittance questions** agent fell from 78% to 64% on Thursday. The `lookup_remittance` tool started timing out after the ERP maintenance window, and with retries set to 1 the agent transferred on the first failure.";    const stream = useSimulatedStream({ text, speed: 90 });    const [frozen, setFrozen] = React.useState<string | null>(null);    const output = frozen ?? stream.output;    const streaming = frozen === null && !stream.done;    return (        <div className="flex w-full max-w-lg flex-col gap-3">            <SimpleMarkdown                text={output}                streaming={streaming}                trailing={streaming ? <StreamCaret /> : null}            />            <div className="flex items-center gap-2">                {streaming ? (                    <>                        <Button                            type="button"                            variant="outline"                            size="sm"                            onClick={() => setFrozen(stream.output)}                        >                            Stop                        </Button>                        <Button                            type="button"                            variant="ghost"                            size="sm"                            onClick={stream.skip}                        >                            Show all                        </Button>                    </>                ) : (                    <>                        {frozen !== null ? (                            <span className="text-xs text-muted-foreground">                                Stopped                            </span>                        ) : null}                        <Button                            type="button"                            variant="ghost"                            size="sm"                            onClick={() => {                                setFrozen(null);                                stream.restart();                            }}                        >                            <RotateCcwIcon                                data-icon="inline-start"                                aria-hidden="true"                            />                            Regenerate                        </Button>                    </>                )}            </div>        </div>    );}