Selection actions

import { SelectionActions } from "@oration/canon/components/ai/selection-actions";import { toast } from "@oration/canon/components/toast";import * as React from "react";export function ReadOnlyText() {    const [summary, setSummary] = React.useState(        "Aisha Bello from Halcyon called about INV-20877, which was paid $760.00 short. Nora explained that the difference is the 2% early-payment discount in Halcyon's terms, and resent the remittance advice with the discount itemized. Aisha said she would update their ledger and didn't need a callback.",    );    return (        <div className="w-full max-w-xl rounded-xl bg-card p-4 text-left shadow-border">            <h3 className="mb-1.5 text-sm font-semibold">Call summary</h3>            <SelectionActions                tones={[]}                languages={[]}                onAction={(actionId, text) => {                    const words = text.trim().split(/\s+/);                    if (actionId === "shorten") {                        return `${words                            .slice(                                0,                                Math.max(3, Math.ceil(words.length * 0.55)),                            )                            .join(" ")                            .replace(/[,.;:]$/, "")}.`;                    }                    if (actionId === "expand") {                        return `${text.trim()} The call lasted 2 minutes 14 seconds and ended without a transfer.`;                    }                    return text                        .trim()                        .replace(                            "didn't need a callback",                            "no callback is needed",                        );                }}                onApply={(next, range) => {                    setSummary((current) => current.replace(range.text, next));                    toast.add({ type: "success", title: "Summary updated" });                }}            >                <p className="text-sm leading-relaxed text-pretty text-foreground">                    {summary}                </p>            </SelectionActions>        </div>    );}

import { SelectionActions } from "@oration/canon/components/ai/selection-actions";import { Label } from "@oration/canon/components/label";import { Textarea } from "@oration/canon/components/textarea";import { BriefcaseIcon, SpellCheckIcon } from "lucide-react";import * as React from "react";export function CustomActions() {    const id = React.useId();    const [value, setValue] = React.useState(        "Hi Tomás, we dont have a current W-9 for Orchard Street so OS-4502 is on hold. Can you upload one before friday so it goes in the payment run.",    );    return (        <div className="w-full max-w-xl text-left">            <SelectionActions                actions={[                    {                        id: "fix",                        label: "Fix grammar",                        pendingLabel: "Fixing grammar…",                        icon: <SpellCheckIcon />,                        diff: true,                    },                    {                        id: "formal",                        label: "Make formal",                        pendingLabel: "Rewriting…",                        icon: <BriefcaseIcon />,                        diff: true,                    },                ]}                tones={[]}                languages={["Spanish", "Portuguese"]}                allowAsk={false}                onAction={(actionId, text, options) => {                    if (actionId === "fix") {                        return text                            .replace("dont", "don't")                            .replace("Street so", "Street, so")                            .replace("friday", "Friday")                            .replace(/run\.$/, "run?");                    }                    if (actionId === "formal") {                        return text                            .replace(/^Hi Tomás, /, "Dear Tomás, ")                            .replace("Can you", "Could you please");                    }                    return `[${options.language}] ${text}`;                }}            >                <div className="flex flex-col gap-1.5">                    <Label htmlFor={id}>Ticket reply</Label>                    <Textarea                        id={id}                        rows={4}                        value={value}                        onChange={(event) => setValue(event.target.value)}                        className="text-[13px] leading-relaxed"                    />                </div>            </SelectionActions>        </div>    );}

import { SelectionActions } from "@oration/canon/components/ai/selection-actions";import { Label } from "@oration/canon/components/label";import { Textarea } from "@oration/canon/components/textarea";import * as React from "react";export function AsyncAndErrors() {    const id = React.useId();    const scope = React.useRef<HTMLDivElement>(null);    const [value, setValue] = React.useState(        "Your payment for invoice INV-20931 is scheduled for Tuesday's ACH run on September 29. The remittance will be emailed the same day.",    );    return (        <div className="w-full max-w-xl text-left">            <div ref={scope} className="flex flex-col gap-1.5">                <Label htmlFor={id}>Message to Northwind Freight</Label>                <Textarea                    id={id}                    rows={3}                    value={value}                    onChange={(event) => setValue(event.target.value)}                    className="text-[13px] leading-relaxed"                />                <p className="text-xs text-muted-foreground">                    Expand always fails here, to show the error state.                </p>            </div>            <SelectionActions                containerRef={scope}                tones={[]}                languages={[]}                allowAsk={false}                onAction={(actionId, text) =>                    new Promise<string>((resolve, reject) => {                        window.setTimeout(() => {                            if (actionId === "expand")                                reject(new Error("Model timeout"));                            else if (actionId === "shorten")                                resolve(                                    "INV-20931 pays Tuesday, September 29, by ACH.",                                );                            else                                resolve(                                    text.replace(                                        "Your payment for invoice",                                        "Payment for",                                    ),                                );                        }, 1200);                    })                }            />        </div>    );}

import {  makeRequest,  SelectionError,  SelectionPending,  SelectionResult,} from "@oration/canon/components/ai/selection-panels";import { toast } from "@oration/canon/components/toast";export function StatesPreview() {    return (        <div className="grid w-full gap-6 text-left md:grid-cols-[auto_1fr]">            <div className="flex flex-col items-start gap-6">                <div className="flex flex-col gap-2">                    <span className="text-xs text-muted-foreground">                        Pending                    </span>                    <div className="w-fit rounded-xl bg-popover p-1 shadow-popover">                        <SelectionPending                            label="Rewriting…"                            onCancel={() =>                                toast.add({ title: "Edit cancelled" })                            }                        />                    </div>                </div>                <div className="flex flex-col gap-2">                    <span className="text-xs text-muted-foreground">Error</span>                    <div className="w-fit rounded-xl bg-popover p-1 shadow-popover">                        <SelectionError                            onRetry={() => toast.add({ title: "Trying again" })}                            onDiscard={() =>                                toast.add({ title: "Edit discarded" })                            }                        />                    </div>                </div>            </div>            <div className="flex flex-col gap-2">                <span className="text-xs text-muted-foreground">                    Result with a diff                </span>                <div className="w-fit rounded-xl bg-popover p-1 shadow-popover">                    <SelectionResult                        request={makeRequest({                            id: "rewrite",                            label: "Rewrite",                            diff: true,                        })}                        before="We paid it by ACH on Friday for $18,240.00."                        after="It went out by ACH on Friday, September 25, for $18,240.00."                        acceptLabel="Accept"                        onRetry={() => toast.add({ title: "Trying again" })}                        onDiscard={() => toast.add({ title: "Edit discarded" })}                        onAccept={() =>                            toast.add({ title: "Selection replaced" })                        }                    />                </div>            </div>        </div>    );}