Prompt editor

import {  extractVariables,  PromptEditor,  type PromptEditorHandle,  type PromptVariable,  VariablesPanel,} from "@oration/canon/components/prompt-editor/prompt-editor";import { toast } from "@oration/canon/components/toast";import * as React from "react";export function WithVariablesPanel() {    const editorRef = React.useRef<PromptEditorHandle>(null);    const [variables, setVariables] = React.useState<PromptVariable[]>([        {            name: "supplier_name",            description: "The supplier's name from the vendor record.",            example: "Northwind Freight",        },        {            name: "invoice_number",            description: "The invoice the caller is asking about.",            example: "INV-20931",        },        {            name: "payment_date",            description: "When that invoice is scheduled to be paid.",            example: "Friday, October 2",        },        {            name: "agent_name",            kind: "system",            description: "The name the agent introduces itself with.",            example: "Nora",        },    ]);    const [value, setValue] = React.useState(        [            "Greet {{supplier_name}} and confirm the invoice number, {{invoice_number}}.",            "",            "Tell them it's scheduled for {{payment_date}}. If they ask for remittance details, offer to email them to {{remittance_email}}.",        ].join("\n"),    );    return (        <div className="grid w-full gap-4 md:grid-cols-[minmax(0,1fr)_16rem]">            <PromptEditor                ref={editorRef}                value={value}                onChange={setValue}                variables={variables}                onCreateVariable={(name) =>                    setVariables((current) => [...current, { name }])                }                minHeight={200}                aria-label="Nora prompt"            />            <div className="self-start rounded-xl bg-card p-3 shadow-border">                <VariablesPanel                    title="Dynamic variables"                    variables={variables}                    usedNames={extractVariables(value)}                    onInsert={(name) => editorRef.current?.insertVariable(name)}                    onCreate={(name) => {                        if (!name) {                            editorRef.current?.openVariableMenu();                            return;                        }                        setVariables((current) => [                            ...current,                            {                                name,                                description: "Where to send remittance advice.",                                example: "ar@northwindfreight.com",                            },                        ]);                        toast.add({                            type: "success",                            title: `Defined {{${name}}}`,                            description: "It will be filled in on every call.",                        });                    }}                    onEdit={(variable) =>                        toast.add({                            title: `Edit {{${variable.name}}}`,                            description: variable.description,                        })                    }                />            </div>        </div>    );}

import { PromptEditor } from "@oration/canon/components/prompt-editor/prompt-editor";import * as React from "react";export function AIActions() {    const [value, setValue] = React.useState(        [            "# How you sound",            "Be nice to callers and try to help them with whatever they need about their payments.",            "",            "# What you do",            "Look up the invoice and tell them when it gets paid.",            "",        ].join("\n"),    );    return (        <div className="flex w-full flex-col gap-2">            <PromptEditor                value={value}                onChange={setValue}                variables={[]}                minHeight={200}                aria-label="Nora prompt"                onAIAction={async (request) => {                    // Call your model here. The editor streams the answer in for review.                    await new Promise((resolve) =>                        window.setTimeout(resolve, 500),                    );                    if (request.kind === "guardrails")                        return [                            "## Guardrails",                            "- Never read out full bank account or routing numbers.",                            "- If the caller disputes an amount, transfer them to Priya Raman's team.",                        ].join("\n");                    if (request.selection?.includes("Be nice"))                        return "Stay warm, unhurried and exact with every caller. Read amounts and dates back slowly, and never guess.";                    return request.selection ?? request.document;                }}            />            <p className="text-13 text-pretty text-muted-foreground">                Select the sentence under How you sound and choose Rewrite, or                type / on the empty last line and choose Add guardrails.            </p>        </div>    );}

import { PromptEditor } from "@oration/canon/components/prompt-editor/prompt-editor";import * as React from "react";export function FirstMessage() {    const labelId = React.useId();    const [value, setValue] = React.useState(        "Hi, this is {{agent_name}} from Cedarline supplier support. Am I speaking with someone from {{supplier_name}}?",    );    return (        <div className="flex w-full max-w-xl flex-col gap-2">            <div className="flex flex-col gap-0.5">                <p id={labelId} className="text-13 font-medium text-foreground">                    First message                </p>                <p className="text-13 text-muted-foreground">                    What Nora says when the supplier picks up.                </p>            </div>            <PromptEditor                value={value}                onChange={setValue}                variables={[                    {                        name: "supplier_name",                        description:                            "The supplier's name from the vendor record.",                        example: "Northwind Freight",                    },                    {                        name: "agent_name",                        kind: "system",                        description:                            "The name the agent introduces itself with.",                        example: "Nora",                    },                ]}                toolbar={false}                minHeight={72}                placeholder="What should the agent say first?"                aria-labelledby={labelId}            />        </div>    );}

import { CodeBlock } from "@oration/canon/components/code-block";import { extractVariables, PromptEditor } from "@oration/canon/components/prompt-editor/prompt-editor";import { VariableChip } from "@oration/canon/components/variable-chip";import * as React from "react";export function PlainText() {    const [value, setValue] = React.useState(        [            "Confirm **{{invoice_number}}** with {{supplier_name}}, then say it's paid on {{payment_date}}.",            "- Never read out bank details.",            "- Repeat {{invoice_number}} back before you look it up.",        ].join("\n"),    );    const names = [...new Set(extractVariables(value))];    return (        <div className="grid w-full gap-4 md:grid-cols-2">            <PromptEditor                value={value}                onChange={setValue}                variables={[                    { name: "supplier_name", example: "Northwind Freight" },                    { name: "invoice_number", example: "INV-20931" },                    { name: "payment_date", example: "Friday, October 2" },                ]}                toolbar={false}                minHeight={120}                aria-label="Payment status instructions"            />            <div className="flex min-w-0 flex-col gap-3">                <CodeBlock code={value} title="value" />                <div className="flex flex-wrap items-center gap-1.5">                    <span className="font-mono text-xs text-muted-foreground">                        extractVariables(value)                    </span>                    {names.map((name) => (                        <VariableChip key={name} name={name} size="sm" />                    ))}                </div>            </div>        </div>    );}

import { Button } from "@oration/canon/components/button";import { PromptEditor, PromptEditorSkeleton } from "@oration/canon/components/prompt-editor/prompt-editor";import { SkeletonReveal } from "@oration/canon/components/skeleton-reveal";import { RotateCcwIcon } from "lucide-react";import * as React from "react";export function Loading() {    const [loading, setLoading] = React.useState(false);    const [value, setValue] = React.useState(        "# Guardrails\n- Never read out full bank account or routing numbers.\n- Don't promise a payment date that isn't in the system.",    );    React.useEffect(() => {        if (!loading) return;        const id = window.setTimeout(() => setLoading(false), 1200);        return () => window.clearTimeout(id);    }, [loading]);    return (        <div className="flex w-full flex-col items-start gap-3">            <Button                type="button"                variant="outline"                size="sm"                disabled={loading}                onClick={() => setLoading(true)}            >                <RotateCcwIcon data-icon="inline-start" aria-hidden="true" />                Reload prompt            </Button>            <SkeletonReveal                loading={loading}                label="Loading prompt"                className="w-full"                skeleton={                    <PromptEditorSkeleton minHeight={140} className="w-full" />                }            >                <PromptEditor                    value={value}                    onChange={setValue}                    variables={[]}                    minHeight={140}                    aria-label="Nora guardrails"                    className="w-full"                />            </SkeletonReveal>        </div>    );}

import { PromptEditor } from "@oration/canon/components/prompt-editor/prompt-editor";import * as React from "react";export function ReadOnly() {    const [value, setValue] = React.useState(        "Greet {{supplier_name}} by name, confirm {{invoice_number}} and tell them it's scheduled for {{payment_date}}.",    );    return (        <div className="flex w-full flex-col gap-2">            <PromptEditor                value={value}                onChange={setValue}                baseline={value}                baselineLabel="published version 4"                variables={[                    { name: "supplier_name" },                    { name: "invoice_number" },                    { name: "payment_date" },                ]}                minHeight={96}                disabled                aria-label="Nora prompt"            />            <p className="text-13 text-muted-foreground">                Only admins can edit Nora's prompt. Ask Maya Okafor for access.            </p>        </div>    );}