AI message

import { UserMessage } from "@oration/canon/components/ai/message";import { Button } from "@oration/canon/components/button";import { toast } from "@oration/canon/components/toast";import { Tooltip, TooltipContent, TooltipTrigger } from "@oration/canon/components/tooltip";import { AtSignIcon, PencilIcon, SlashIcon } from "lucide-react";export function UserMessages() {    return (        <div className="flex w-full max-w-xl flex-col gap-6 text-left">            <UserMessage>                Which suppliers are in Friday's payment run?            </UserMessage>            <UserMessage                attachments={                    <div className="flex max-w-[85%] flex-wrap justify-end gap-1">                        <span className="inline-flex h-6 items-center gap-1 rounded-md bg-muted/70 px-1.5 text-xs text-muted-foreground">                            <SlashIcon aria-hidden="true" className="size-3" />                            summarize                        </span>                        <span className="inline-flex h-6 items-center gap-1 rounded-md bg-muted/70 px-1.5 text-xs text-muted-foreground">                            <AtSignIcon aria-hidden="true" className="size-3" />                            Northwind Freight                        </span>                    </div>                }            >                Open invoices and anything on hold            </UserMessage>            <UserMessage                actions={                    <Tooltip>                        <TooltipTrigger                            render={                                <Button                                    type="button"                                    variant="ghost"                                    size="icon-xs"                                    aria-label="Edit message"                                    className="text-muted-foreground hover:text-foreground"                                    onClick={() =>                                        toast.add({                                            title: "Message moved to the composer",                                            description:                                                "Edit it and send again.",                                        })                                    }                                />                            }                        >                            <PencilIcon aria-hidden="true" />                        </TooltipTrigger>                        <TooltipContent>Edit message</TooltipContent>                    </Tooltip>                }            >                {                    "Draft a note to Aisha at Halcyon:\n- the $760.00 is the 2% discount\n- remittance attached"                }            </UserMessage>        </div>    );}

import { AgentAvatar } from "@oration/canon/components/agent-avatar";import { AssistantMessage } from "@oration/canon/components/ai/message";export function Avatars() {    return (        <div className="flex w-full max-w-xl flex-col gap-6 text-left">            <AssistantMessage>                Copilot's default mark: a neutral tile, never an indigo one.            </AssistantMessage>            <AssistantMessage                avatar={                    <AgentAvatar                        agent={{ id: "ag_payment_status", name: "Nora" }}                        size={24}                    />                }                name="Nora"            >                Thanks for calling Cedarline accounts payable. I can see invoice                INV-20931 is scheduled for Tuesday's ACH run.            </AssistantMessage>            <div className="w-72 rounded-xl bg-muted/70 p-3">                <AssistantMessage avatar={null}>                    In a narrow assist panel, drop the avatar column and let the                    answer use the full width.                </AssistantMessage>            </div>        </div>    );}

import { AssistantMessage, BranchPicker, MessageActions, UserMessage } from "@oration/canon/components/ai/message";import * as React from "react";export function Versions() {    const drafts = [        "Hi Tomás, OS-4471 was paid by ACH on Friday, September 25. The trace number is 091000019284113 and the remittance is attached.",        "Hi Tomás, good news: Orchard Street's invoice OS-4471 went out Friday by ACH. You should see it today; the trace is 091000019284113 if your bank asks.",        "Tomás, OS-4471 was paid Friday, September 25, by ACH (trace 091000019284113). Remittance attached. Reply here if it hasn't landed by Wednesday.",    ];    const [count, setCount] = React.useState(1);    const [index, setIndex] = React.useState(0);    const [streaming, setStreaming] = React.useState(false);    React.useEffect(() => {        if (!streaming) return;        const id = window.setTimeout(() => setStreaming(false), 1200);        return () => window.clearTimeout(id);    }, [streaming]);    const text = drafts[index % drafts.length] ?? "";    return (        <div className="flex w-full max-w-xl flex-col gap-6 text-left">            <UserMessage>                Draft a reply to Orchard Street about OS-4471.            </UserMessage>            <AssistantMessage                status={streaming ? "streaming" : "done"}                actionsVisibility="always"                actions={                    <MessageActions                        content={text}                        onRegenerate={() => {                            setIndex(count);                            setCount((n) => n + 1);                            setStreaming(true);                        }}                    >                        <BranchPicker                            index={index}                            count={count}                            onPrev={() => setIndex((i) => i - 1)}                            onNext={() => setIndex((i) => i + 1)}                        />                    </MessageActions>                }            >                {streaming ? (                    <span className="text-muted-foreground text-shimmer">                        Writing another version                    </span>                ) : (                    text                )}            </AssistantMessage>        </div>    );}

import { AssistantMessage, MessageActions, type MessageFeedback } from "@oration/canon/components/ai/message";import * as React from "react";export function Feedback() {    const [feedback, setFeedback] = React.useState<MessageFeedback>(null);    const answer =        "Northwind Freight's remit-to email changed on September 22, so the remittance for PMT-58213 went to the old inbox. I resent it to ap@northwindfreight.example.";    return (        <div className="flex w-full max-w-xl flex-col gap-3 text-left">            <AssistantMessage                actionsVisibility="always"                actions={                    <MessageActions                        content={answer}                        feedback={feedback}                        onFeedback={setFeedback}                    />                }            >                {answer}            </AssistantMessage>            <p className="pl-8 text-xs text-muted-foreground">                {feedback === "up"                    ? "Saved as helpful."                    : feedback === "down"                      ? "Sent to review."                      : "Not rated yet."}            </p>        </div>    );}

import { AssistantMessage, MessageActions, MessageError, UserMessage } from "@oration/canon/components/ai/message";import { Button } from "@oration/canon/components/button";import * as React from "react";export function Errors() {    const [status, setStatus] = React.useState<"error" | "streaming" | "done">(        "error",    );    React.useEffect(() => {        if (status !== "streaming") return;        const id = window.setTimeout(() => setStatus("done"), 1200);        return () => window.clearTimeout(id);    }, [status]);    return (        <div className="flex w-full max-w-xl flex-col gap-6 text-left">            <UserMessage>Has Halcyon's payment cleared?</UserMessage>            <AssistantMessage                status={status}                actions={                    status === "done" ? (                        <MessageActions content="PMT-58190 cleared on Monday, September 28." />                    ) : undefined                }                actionsVisibility="always"                error={                    <MessageError                        title="Couldn't reach the ERP"                        description="The payment lookup timed out after 2 seconds. Nothing was changed."                        onRetry={() => setStatus("streaming")}                    />                }            >                {status === "streaming" ? (                    <span className="text-muted-foreground text-shimmer">                        Checking PMT-58190                    </span>                ) : status === "done" ? (                    "PMT-58190 cleared on Monday, September 28. Halcyon's bank shows it as received."                ) : null}            </AssistantMessage>            {status === "done" ? (                <Button                    type="button"                    variant="ghost"                    size="sm"                    className="self-start"                    onClick={() => setStatus("error")}                >                    Show the error again                </Button>            ) : null}        </div>    );}

import { AssistantMessage, MessageActions } from "@oration/canon/components/ai/message";export function HoverActions() {    return (        <div className="flex w-full max-w-xl flex-col gap-6 text-left">            <AssistantMessage                actions={                    <MessageActions content="Wen Zhou Consulting's W-9 expired in August." />                }            >                Wen Zhou Consulting's W-9 expired in August. Hover or Tab into                this earlier answer to see its actions.            </AssistantMessage>            <AssistantMessage                actionsVisibility="always"                actions={                    <MessageActions content="I sent Wen Zhou Consulting a W-9 request." />                }            >                I sent Wen Zhou Consulting a W-9 request. The latest answer                keeps its actions visible.            </AssistantMessage>        </div>    );}

import { AssistantMessage, MessageActions, MessageError } from "@oration/canon/components/ai/message";import { Button } from "@oration/canon/components/button";import { cn } from "@oration/canon/lib/utils";import {  CheckIcon,  ChevronLeftIcon,  CopyIcon,  RefreshCwIcon,  ThumbsUpIcon,} from "lucide-react";export function StatesMatrix() {    const ghost =        "pointer-events-none text-muted-foreground hover:text-foreground aria-pressed:text-foreground";    const columns = [        {            label: "Rest",            node: (                <Button                    type="button"                    variant="ghost"                    size="icon-xs"                    tabIndex={-1}                    aria-label="Copy"                    className={ghost}                >                    <CopyIcon aria-hidden="true" />                </Button>            ),        },        {            label: "Hover",            node: (                <Button                    type="button"                    variant="ghost"                    size="icon-xs"                    tabIndex={-1}                    aria-label="Copy"                    className={cn(ghost, "bg-muted text-foreground")}                >                    <CopyIcon aria-hidden="true" />                </Button>            ),        },        {            label: "Focus",            node: (                <Button                    type="button"                    variant="ghost"                    size="icon-xs"                    tabIndex={-1}                    aria-label="Regenerate"                    className={cn(ghost, "border-ring ring-3 ring-ring/40")}                >                    <RefreshCwIcon aria-hidden="true" />                </Button>            ),        },        {            label: "Pressed",            node: (                <Button                    type="button"                    variant="ghost"                    size="icon-xs"                    tabIndex={-1}                    aria-label="Helpful"                    aria-pressed                    className={ghost}                >                    <ThumbsUpIcon aria-hidden="true" className="fill-current" />                </Button>            ),        },        {            label: "Copied",            node: (                <Button                    type="button"                    variant="ghost"                    size="icon-xs"                    tabIndex={-1}                    aria-label="Copied"                    className={ghost}                >                    <CheckIcon aria-hidden="true" className="text-success" />                </Button>            ),        },        {            label: "Disabled",            node: (                <Button                    type="button"                    variant="ghost"                    size="icon-xs"                    tabIndex={-1}                    aria-label="Previous version"                    disabled                    className={ghost}                >                    <ChevronLeftIcon aria-hidden="true" />                </Button>            ),        },    ];    return (        <div className="flex w-full flex-col gap-6 text-left">            <div className="grid grid-cols-3 gap-3 sm:grid-cols-6">                {columns.map((column) => (                    <div                        key={column.label}                        className="flex flex-col items-center gap-2"                    >                        {column.node}                        <span className="text-xs text-muted-foreground">                            {column.label}                        </span>                    </div>                ))}            </div>            <div className="grid gap-4 md:grid-cols-3">                <div className="flex min-w-0 flex-col gap-2">                    <span className="text-xs text-muted-foreground">                        Streaming                    </span>                    <AssistantMessage                        status="streaming"                        actions={<MessageActions content="" />}                    >                        INV-20931 is approved and                    </AssistantMessage>                </div>                <div className="flex min-w-0 flex-col gap-2">                    <span className="text-xs text-muted-foreground">Done</span>                    <AssistantMessage                        actionsVisibility="always"                        actions={                            <MessageActions content="INV-20931 is approved." />                        }                    >                        INV-20931 is approved.                    </AssistantMessage>                </div>                <div className="flex min-w-0 flex-col gap-2">                    <span className="text-xs text-muted-foreground">Error</span>                    <AssistantMessage status="error" error={<MessageError />} />                </div>            </div>        </div>    );}