@itechchoice/prime-chatkit 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/types/components/app-shell.d.ts

@@ -0,0 +1,478 @@
+import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from "react";
+import { type IconSvgElement } from "@hugeicons/react";
+import { type FilterGroup, type FilterValue } from "@/components/ui/filter-menu-clean";
+import { type SetupGroup } from "@/components/ui/setup-guide-clean";
+/** Hugeicons, stroke + rounded with a slightly heavier stroke */
+export declare const Icon: ({ icon, size, stroke, color }: {
+    icon: IconSvgElement;
+    size?: number;
+    stroke?: number;
+    color?: string;
+}) => import("react").JSX.Element;
+/** Small flags as drawings – the same on every system, also where flag emoji don't show */
+/** Small flags for the language menus – drawn, since flag emoji look different on every system */
+export declare const Flag: ({ code }: {
+    code: "gb" | "de" | "fr" | "es";
+}) => import("react").JSX.Element;
+export type ShellNavItem = {
+    label: string;
+    icon: IconSvgElement; /** Small number at the end, e.g. unread items */
+    count?: number;
+};
+/** A labelled list under the menu – replaces Projects when given */
+export type ShellGroup = {
+    label: string;
+    items: ShellNavItem[]; /** Text shown while the list is empty */
+    empty?: string;
+};
+export declare const defaultNav: ShellNavItem[];
+export declare const defaultProjects: string[];
+/** Onboarding behind "Getting started" – shown in the library's Setup Guide */
+export declare const defaultSetup: SetupGroup[];
+/** A chat in the sidebar – `folder` puts it inside one of the projects, which then open and close like folders */
+export type ShellChat = {
+    id: string;
+    title: string;
+    pinned?: boolean;
+    unread?: boolean;
+    folder?: string;
+};
+/** With both chrome regions disabled and a supplied header, all text belongs to the caller; no shell labels remain. */
+export type ShellLabels = Record<string, never>;
+export type AppShellProps = {
+    children: ReactNode;
+    /** Omit to keep both upstream chrome regions; false removes the region and its controls. */
+    chrome?: {
+        sidebar?: boolean;
+        workArea?: boolean;
+    };
+    /** Labels for the shell without sidebar/work area; currently empty because header and children own their text. */
+    shellLabels?: Partial<ShellLabels>;
+    /** Label of the menu item or project that is open */
+    active?: string;
+    /** Called with the label of a menu item or project when it is clicked */
+    onNavigate?: (label: string) => void;
+    workspace?: string;
+    /** Line under the workspace's name in its menu */
+    workspaceMeta?: string;
+    /** The account at the bottom – its menu shows the email under the name (made up from the name when left out) */
+    user?: {
+        name: string;
+        avatar?: string;
+        email?: string;
+    };
+    nav?: ShellNavItem[];
+    projects?: string[];
+    /** Lists under the menu instead of Projects, e.g. Tools or Pipelines */
+    groups?: ShellGroup[];
+    /**
+     * Chats in the sidebar: the projects turn into folders that open and close and hold their chats; the other chats
+     * follow under Pinned and Chats. Pin, rename, mark as unread, move, copy or archive them from their ⋯ menu,
+     * and drag them into another order or into a folder
+     */
+    chats?: ShellChat[];
+    /** Called when a chat is clicked (default: onNavigate with its title) */
+    onOpenChat?: (chat: ShellChat) => void;
+    /** Tasks behind "Getting started" */
+    setup?: SetupGroup[];
+    /** Sidebar width in px – drag its edge between min and max; double-click the edge for the default again */
+    sidebarWidth?: {
+        default?: number;
+        min?: number;
+        max?: number;
+    };
+    /**
+     * The work area on the right of the main area, with tabs like Codex: the screen's own tabs, artifacts in the shared
+     * viewers and New tabs with the start options – resizable and collapsible. Pass the options, or the result of
+     * useWorkArea when the page opens artifacts itself
+     */
+    workArea?: WorkArea | WorkAreaOptions;
+    /** Plain content for the work area – shown as its one tab, named by panelTitle (use `workspace` for more) */
+    panel?: ReactNode;
+    /**
+     * A header across the whole app, like Claude's: the workspace and the sidebar toggle over the sidebar, the page's title and
+     * actions over the page, and the work area's title over the work area – one bar, one line under it
+     */
+    header?: {
+        title: ReactNode;
+        actions?: ReactNode;
+    } | false;
+    /** The cards at the bottom of the sidebar – what's new and Getting started (default: shown) */
+    sideCards?: boolean;
+    /** Heading of the right work area */
+    panelTitle?: string;
+    /** What the tab of a plain `panel` shows instead of panelTitle, e.g. "Brief / Summer launch" */
+    panelHeading?: ReactNode;
+    /**
+     * Turns the sidebar into a settings sidebar: a back link with this title ("‹ Settings") in place of the workspace,
+     * and no news or setup cards at the bottom. Clicking it calls onNavigate with `label` (default "Back to app").
+     */
+    back?: {
+        title: string;
+        label?: string;
+    };
+    /** Start with the work area folded away – its icon waits in the top right corner (default: open) */
+    defaultPanelOpen?: boolean;
+    /** Width of the right work area in px, like sidebarWidth – on screens wider than 1440px the default and max grow in proportion */
+    panelWidth?: {
+        default?: number;
+        min?: number;
+        max?: number;
+    };
+    /** "inset": the page as a rounded panel on the gray page; "flat": edge to edge, split by a hairline. Without it,
+     *  data-shell="flat" on an ancestor makes it flat */
+    layout?: "inset" | "flat";
+    /**
+     * A double sidebar, like Codex and ChatGPT: a column of icons on the gray page that always stays (the workspace on
+     * top, these items, the account at the bottom), and the chats inside the main area – in a light gray column of their
+     * own, split from the page by a line; it stays open and can be dragged wider or narrower. With it, the column's head
+     * is a project switcher – "All projects" or one of `projects`, which narrows the chats to that project
+     */
+    rail?: {
+        items: ShellNavItem[]; /** Items at the bottom, above the account */
+        bottom?: ShellNavItem[]; /** The rail item that is open */
+        active?: string;
+    };
+    className?: string;
+};
+export declare function AppShell({ children, active, onNavigate, workspace: workspaceName, workspaceMeta, user, nav, projects, groups, chats, onOpenChat, setup, sidebarWidth, workArea, panel, panelTitle, panelHeading, back, defaultPanelOpen, panelWidth, header, sideCards, className, layout, rail: railOptions, chrome, }: AppShellProps): import("react").JSX.Element;
+/**
+ * Tabs and radio groups are one stop for Tab: the arrow keys (and Home, End) move between their options and pick
+ * the one they land on – focus follows, inside the group's own buttons
+ */
+export declare function rove<T extends string>(e: ReactKeyboardEvent<HTMLElement>, items: readonly T[], current: T, pick: (item: T) => void): void;
+/** Segmented tabs: a soft gray pill slides to the active tab */
+export declare function Tabs({ items, value, defaultValue, onChange, controls, }: {
+    items: string[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** The id of the panel a tab shows, for aria-controls – leave out when there is none */
+    controls?: (item: string) => string | undefined;
+}): import("react").JSX.Element;
+/** The page's title in the header, with a chevron – a button, so it can open a menu (rename, move, delete…) */
+export declare function BarTitle({ children, onClick }: {
+    children: ReactNode;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+export declare function IconButton({ icon, label, onClick, pressed }: {
+    icon: IconSvgElement;
+    label: string;
+    onClick?: () => void;
+    pressed?: boolean;
+}): import("react").JSX.Element;
+export type SortDir = "asc" | "desc";
+/** Flips between A–Z and Z–A; the icon turns with it */
+export declare function SortButton({ value, onChange }: {
+    value?: SortDir;
+    onChange?: (dir: SortDir) => void;
+}): import("react").JSX.Element;
+export type ViewMode = "grid" | "list";
+export declare function ViewToggle({ value, onChange }: {
+    value?: ViewMode;
+    onChange?: (view: ViewMode) => void;
+}): import("react").JSX.Element;
+export declare function SearchField({ placeholder, width, value, onChange, }: {
+    placeholder: string;
+    width?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+}): import("react").JSX.Element;
+/**
+ * Small floating panel attached to its trigger. Opens on the preferred side and flips to the other side
+ * (or edge) when it would stick out of the screen or its scroll area – it is always fully reachable.
+ * Closes on a click outside or Escape; fades and scales in from the side it is attached to.
+ */
+export declare function Popover({ open, onClose, children, align, side, className, }: {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    align?: "start" | "end";
+    side?: "bottom" | "top" | "right";
+    className?: string;
+}): import("react").JSX.Element | null;
+export type MenuItem = {
+    label: string;
+    /** Second line in a lighter color */
+    description?: string;
+    icon?: IconSvgElement;
+    /** A brand mark (Gmail, Slack …) in place of the icon, at 16px */
+    logo?: ReactNode;
+    /** Shows a check – for choices like a model or a period */
+    checked?: boolean;
+    /** Red text, e.g. Delete */
+    danger?: boolean;
+    /** A keyboard shortcut on the right, e.g. "⌥⌘R" */
+    shortcut?: string;
+    /** A line above this item, to group the ones after it */
+    divider?: boolean;
+    /** More choices that open to the side on hover or focus */
+    submenu?: MenuItem[];
+    onSelect?: () => void;
+};
+/** List of actions or choices inside a popover */
+export declare function MenuList({ items, onPick }: {
+    items: MenuItem[];
+    onPick: () => void;
+}): import("react").JSX.Element;
+/** Any trigger with a menu: the trigger gets the open state and a toggle */
+export declare function Dropdown({ trigger, items, align, side, title, header, className, }: {
+    trigger: (props: {
+        open: boolean;
+        toggle: () => void;
+    }) => ReactNode;
+    items: MenuItem[];
+    align?: "start" | "end";
+    side?: "bottom" | "top";
+    /** Small heading above the items */
+    title?: string;
+    /** Anything above the items, e.g. who is signed in */
+    header?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Opens the library's Filter Menu in a popover; the button shows how many filters are on */
+export declare function FilterButton({ label, groups, value, onChange, align, }: {
+    label: string;
+    groups: FilterGroup[];
+    value: FilterValue;
+    onChange: (value: FilterValue) => void;
+    align?: "start" | "end";
+}): import("react").JSX.Element;
+/** Plain menu of choices in a popover, e.g. a period picker */
+export declare function MenuButton<T extends string>({ value, options, onChange, icon, align, className, }: {
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange: (value: T) => void;
+    icon?: IconSvgElement;
+    align?: "start" | "end";
+    className?: string;
+}): import("react").JSX.Element;
+/** Short confirmation at the bottom of the main area – "Saved to Reports" */
+export declare function useToast(): readonly [import("react").JSX.Element | null, (text: string) => void];
+/** A section's head: a small uppercase title (with an optional count), then its tabs and tools */
+export declare function SectionHead({ title, count, left, right }: {
+    title: string;
+    count?: number;
+    left?: ReactNode;
+    right?: ReactNode;
+}): import("react").JSX.Element;
+/** `bare`: without the dashed frame – the page's only content, e.g. inside .ui-as-center */
+export declare function EmptyState({ title, text, action, tall, bare }: {
+    title: string;
+    text: string;
+    action?: ReactNode;
+    tall?: boolean;
+    bare?: boolean;
+}): import("react").JSX.Element;
+export type FileType = "DOC" | "PDF" | "XLS";
+export type FileItem = {
+    name: string;
+    type: FileType;
+    edited?: string;
+};
+export declare const fileKind: Record<FileType, string>;
+/** A file as a card: preview on a gray stage, name and one line of details below */
+export declare function FileCard({ file, meta, onOpen }: {
+    file: FileItem;
+    meta: ReactNode; /** Called when the card is clicked or pressed */
+    onOpen?: (file: FileItem) => void;
+}): import("react").JSX.Element;
+/**
+ * A tab in the work area. Either the screen's own content – a task, a brief, a run's details – or an artifact by its
+ * file name, shown in the shared viewers (document, sheet, folder, code, image) with its content from `artifacts`
+ */
+export type WorkAreaTab = {
+    id: string;
+    /** Its name – the tab shows it, × and screen readers say it */
+    title: string;
+    /** What the tab shows instead of the plain title (the title still names it) */
+    label?: ReactNode;
+    icon?: IconSvgElement;
+    /** A small number after the name, e.g. what waits on you */
+    count?: number;
+    content: ReactNode;
+    artifact?: undefined;
+} | {
+    /** Defaults to the file name */
+    id?: string;
+    /** The file name – its content comes from `artifacts` */
+    artifact: string;
+    /** Where it's from, the line under its name – e.g. the task or the run */
+    from?: string;
+};
+export type WorkAreaOptions = {
+    /** The screen's own tabs and the artifacts it starts with – in this order */
+    tabs?: WorkAreaTab[];
+    /**
+     * The ids of the tabs that are open when the screen starts – and again when the work area opens after its last tab
+     * was closed. "new" adds a New tab. Default: every tab in `tabs`, or one New tab when there are none
+     */
+    defaultTabs?: string[];
+    /** The tabs open when the screen starts, if they differ from defaultTabs – e.g. the task and two artifacts, while only the task comes back */
+    initialTabs?: string[];
+    /** What each artifact shows when it's opened, by file name */
+    artifacts?: Record<string, ShellArtifact>;
+    /** Called when an artifact is opened – it opens in its own tab, or its tab comes to the front */
+    onOpenArtifact?: (name: string, from?: string) => void;
+    /**
+     * Called when you change an artifact in its tab – a cell of a sheet, its widths or styles, the text of a document,
+     * a folder's files – with the whole artifact as it is now. The workspace keeps the change itself while the screen
+     * lives; save it here
+     */
+    onArtifactChange?: (name: string, artifact: ShellArtifact) => void;
+    /**
+     * What a New tab (the + at the end of the tabs) shows: the start options – an address field, Tools and Suggested.
+     * A suggestion with an `artifact` opens it in that tab. false: no + and no New tabs
+     */
+    newTab?: Pick<WorkspacePanelProps, "tools" | "sources" | "onOpen"> | false;
+};
+/** One open tab */
+type OpenTab = {
+    key: string;
+    page?: string;
+    artifact?: string;
+    from?: string;
+};
+type PageTab = Extract<WorkAreaTab, {
+    content: ReactNode;
+}>;
+type WorkAreaState = {
+    uid: string;
+    tabs: OpenTab[];
+    active: string | null;
+    /** Counts up whenever something asks to be seen – the shell opens the work area for it */
+    reveal: number;
+    page: (id: string) => PageTab | undefined;
+    newTab: WorkAreaOptions["newTab"];
+    select: (key: string) => void;
+    close: (key: string) => void;
+    /** The tabs the screen starts with, again */
+    reset: () => void;
+    openNew: () => string;
+    /** A New tab turns into an artifact – or hands over to the artifact's tab when it's open already */
+    openIn: (key: string, name: string, from?: string) => void;
+    edited: (name: string) => boolean;
+    memo: (name: string) => unknown;
+    setMemo: (name: string, memo: unknown) => void;
+    change: (name: string, next: ShellArtifact) => void;
+    seed: (name: string, artifact: ShellArtifact) => void;
+};
+/** The work area's tabs, from useWorkArea – pass it to AppShell as `workspace` */
+export type WorkArea = {
+    /** Opens an artifact in its own tab (or brings its tab to the front) and opens the work area if it's folded away */
+    open: (name: string, from?: string) => void;
+    /** Brings one of the screen's own tabs back and to the front */
+    show: (id: string) => void;
+    /** Opens a New tab */
+    openNew: () => void;
+    /** An artifact as it is now – with your changes */
+    artifact: (name: string) => ShellArtifact | undefined;
+    /** For the App Shell */
+    readonly state: WorkAreaState;
+};
+/**
+ * The work area's tabs and everything in them: which tabs are open, which one is in front, and what you changed in
+ * each artifact – kept by file name while the screen lives, so it outlives its tab. Call it in your screen and pass
+ * it to AppShell as `workspace`; open artifacts from anywhere in the page with `open(name)`
+ */
+export declare function useWorkArea(options?: WorkAreaOptions): WorkArea;
+/** The work area's tabs from inside the page – e.g. to open an artifact from a chip deep in a message: useShellWorkArea()?.open(name) */
+export declare const useShellWorkArea: () => WorkArea | null;
+/** Artifacts as soft gray file chips – a small two-gray glyph by type; each opens its artifact in the work area */
+export declare function ArtifactChips({ names, onOpen }: {
+    names: string[];
+    onOpen: (name: string) => void;
+}): import("react").JSX.Element;
+/** One gray block of an image drawn as a wireframe, on a 120 × 80 grid */
+export type ShellBlock = {
+    x: number;
+    y: number;
+    w: number;
+    h: number; /** Corner radius (default 2) */
+    r?: number;
+    tone?: "ink" | "mid" | "soft";
+};
+/** One entry of a folder: just its name, or with what Finder shows about it */
+export type ShellFolderEntry = string | {
+    name: string;
+    /** In bytes – or in words, e.g. "12 KB" */
+    size?: number | string;
+    /** When it last changed – an ISO date or a timestamp in ms */
+    modified?: string | number;
+    /** e.g. "YAML" – made up from the extension when left out; "Folder" makes it a folder */
+    kind?: string;
+    /** A subfolder's own entries – or give the subfolder an artifact of its own, by its name */
+    files?: ShellFolderEntry[];
+};
+/** How a sheet's cell shows a number */
+export type ShellNumberFormat = "general" | "number" | "percent" | "currency";
+export type ShellCellStyle = {
+    bold?: boolean;
+    format?: ShellNumberFormat;
+};
+/** What an opened artifact shows in its own tab of the Task panel – one of these, by the file's kind */
+export type ShellArtifact = {
+    /** e.g. "Updated 2h ago" */
+    updated?: string;
+    /**
+     * A document: a title, a few paragraphs and points – points that start with "[ ] " or "[x] " make a checklist.
+     * It opens as a page you write in; what you wrote comes back as `html`, which then replaces the rest
+     */
+    doc?: {
+        title: string;
+        paragraphs?: string[];
+        bullets?: string[];
+        html?: string;
+    };
+    /** A sheet: the first row is the header; a cell that starts with = is a formula */
+    table?: string[][];
+    /** The sheet's column widths in px and its cell styles by "row:column" (from 0) – set as you work in it */
+    sheet?: {
+        widths?: number[];
+        styles?: Record<string, ShellCellStyle>;
+    };
+    /** Code or data, shown as is */
+    code?: string;
+    /** An image, as gray blocks on a 120 × 80 grid – or pass `preview` */
+    image?: ShellBlock[];
+    /** A folder: what's in it – a name without an extension is a subfolder */
+    files?: ShellFolderEntry[];
+    /** Your own preview – replaces all of the above */
+    preview?: ReactNode;
+};
+export declare const fileGlyph: (name: string) => import("react").JSX.Element;
+export declare function Wireframe({ blocks }: {
+    blocks: ShellBlock[];
+}): import("react").JSX.Element;
+export type WorkspaceTool = {
+    id: string;
+    label: string;
+    icon: Parameters<typeof Icon>[0]["icon"];
+    shortcut?: string;
+};
+export type WorkspaceSource = {
+    id: string;
+    title: string;
+    source: string;
+    mark?: ReactNode;
+    /** In a New tab of the workspace: opens this artifact (by file name) in that tab */
+    artifact?: string;
+};
+export declare const defaultTools: WorkspaceTool[];
+export declare const defaultSources: WorkspaceSource[];
+/** Sample artifacts for the work area – what the suggestions in sampleSources open in a New tab */
+export declare const sampleArtifacts: Record<string, ShellArtifact>;
+/** Suggestions for a New tab: the first opens a web page (onOpen), the others open sampleArtifacts in the tab */
+export declare const sampleSources: WorkspaceSource[];
+export type WorkspacePanelProps = {
+    tools?: WorkspaceTool[];
+    sources?: WorkspaceSource[];
+    /** A tool or a suggestion was opened */
+    onOpen?: (id: string) => void;
+};
+/** The pane's content: an address field, the tools, and suggested sources – each row opens its item */
+export declare function WorkspacePanel({ tools, sources, onOpen }: WorkspacePanelProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/chat-composer-clean.d.ts

@@ -50,6 +50,7 @@ export declare const defaultChatComposerLabels: {
     message: string;
     voiceInput: string;
     sendMessage: string;
+    stop: string;
     discardRecording: string;
     useRecording: string;
     connectApps: string;
@@ -66,6 +67,8 @@ export declare const defaultChatComposerLabels: {
 };
 export type ChatComposerLabels = typeof defaultChatComposerLabels;
 export type ChatComposerProps = {
+    running?: boolean;
+    onStop?: () => void;
     sendDisabled?: boolean;
     labels?: Partial<ChatComposerLabels>;
     placeholder?: string;
@@ -112,4 +115,4 @@ export type ChatComposerProps = {
 export declare const defaultFolders: string[];
 export declare const defaultApps: ChatApp[];
 export declare const defaultModels: ChatModel[];
-export declare function ChatComposer({ sendDisabled, placeholder, disabled, labels: labelProp, models, dictation, onSend, onModelChange, onAttach, addItems, voice, approval: firstApproval, onApprovalChange, onLearnMore, folders, folder: firstFolder, onFolderChange, apps, connectedApps, onAppsChange, foot, tray, }: ChatComposerProps): import("react").JSX.Element;
+export declare function ChatComposer({ running, onStop, sendDisabled, placeholder, disabled, labels: labelProp, models, dictation, onSend, onModelChange, onAttach, addItems, voice, approval: firstApproval, onApprovalChange, onLearnMore, folders, folder: firstFolder, onFolderChange, apps, connectedApps, onAppsChange, foot, tray, }: ChatComposerProps): import("react").JSX.Element;

package/dist/types/components/ui/command-menu-clean.d.ts

@@ -51,7 +51,9 @@ export type CommandMenuProps = {
     ask?: boolean;
     hotkey?: boolean;
     labels?: Partial<CommandMenuLabels>;
+    /** Fill the parent height and scroll results within the remaining space. */
+    fill?: boolean;
 };
 /** Sample commands – replace with your own */
 export declare const defaultGroups: CommandGroup[];
-export declare function CommandMenu({ groups, placeholder, onAction, onEditSubmit, onEditCancel, ask, hotkey, labels: labelOverrides, onRun, onClose, autoFocus, className, }: CommandMenuProps): import("react").JSX.Element;
+export declare function CommandMenu({ groups, placeholder, onAction, onEditSubmit, onEditCancel, ask, hotkey, labels: labelOverrides, fill, onRun, onClose, autoFocus, className, }: CommandMenuProps): import("react").JSX.Element;

package/dist/types/components/ui/filter-menu-clean.d.ts

@@ -0,0 +1,28 @@
+export type FilterOption = {
+    id: string;
+    label: string;
+};
+export type FilterGroup = {
+    id: string;
+    label: string;
+    options: FilterOption[];
+    /** Put in front of the option on its chip, e.g. "Score: " → "Score: 80–90" */
+    chipPrefix?: string;
+};
+/** Picked option ids per group id */
+export type FilterValue = Record<string, string[]>;
+export type FilterMenuProps = {
+    groups: FilterGroup[];
+    /** Controlled value */
+    value?: FilterValue;
+    /** Starting value when uncontrolled */
+    defaultValue?: FilterValue;
+    onChange?: (value: FilterValue) => void;
+    /** Groups that start open – by default the first one */
+    defaultOpen?: string[];
+    title?: string;
+    /** Show the keyboard hints as the last row of the card */
+    hints?: boolean;
+    className?: string;
+};
+export declare function FilterMenu({ groups: rawGroups, value, defaultValue, onChange, defaultOpen, title, hints, className, }: FilterMenuProps): import("react").JSX.Element;

package/dist/types/components/ui/message-actions-clean.d.ts

@@ -0,0 +1,85 @@
+import { type ReactNode } from "react";
+export type MessageActionKey = "copy" | "regenerate" | "feedback" | "speak";
+export type FeedbackKind = "up" | "down";
+export declare const defaultMessageActionsLabels: {
+    label: string;
+    copy: string;
+    copied: string;
+    copyMessage: string;
+    regenerate: string;
+    regenerating: string;
+    writing: string;
+    regenerateResponse: string;
+    goodResponse: string;
+    badResponse: string;
+    thanks: string;
+    markedGood: string;
+    markedBad: string;
+    thanksFeedback: string;
+    finishedReading: string;
+    readingAloud: string;
+    stoppedReading: string;
+    stop: string;
+    stopReading: string;
+    readAloud: string;
+    versions: string;
+    previousVersion: string;
+    nextVersion: string;
+    version: (index: number, count: number) => string;
+    whatWentWrong: string;
+    closeFeedback: string;
+    send: string;
+    morePlaceholder: string;
+    moreLabel: string;
+    notAccurate: string;
+    tooLong: string;
+    didNotFollow: string;
+    other: string;
+};
+export type MessageActionsLabels = typeof defaultMessageActionsLabels;
+export type MessageActionsProps = {
+    labels?: Partial<MessageActionsLabels>;
+    /** The message text – copied to the clipboard by Copy and used to time Read aloud */
+    text?: string;
+    /** Which actions to show, in this order */
+    actions?: MessageActionKey[];
+    /** All versions of the message, or just how many there are. From 2 on the version switcher shows */
+    versions?: number | string[];
+    /** Controlled version (0-based index) */
+    version?: number;
+    /** Starting version when uncontrolled – defaults to the newest */
+    defaultVersion?: number;
+    /** Called with the version index picked in the switcher */
+    onVersionChange?: (index: number) => void;
+    /** Called after Copy, with `text` */
+    onCopy?: (text?: string) => void;
+    /** Called when Regenerate is pressed – add a version and the switcher jumps to it */
+    onRegenerate?: () => void;
+    /** Keeps the regenerate arrow spinning while a new version is written */
+    regenerating?: boolean;
+    /** "up" or "down" when a thumb is pressed, null when it is taken back, and "down" with a reason when the feedback row is sent */
+    onFeedback?: (kind: FeedbackKind | null, reason?: string) => void;
+    /** Quick reasons in the feedback row. "Other" opens a small text field */
+    reasons?: string[];
+    /** Called with true when Read aloud starts and false when it stops */
+    onSpeak?: (playing: boolean) => void;
+    /** Controlled playing state, e.g. tied to your speech player */
+    speaking?: boolean;
+    /** How long an uncontrolled read aloud plays, in ms – defaults to an estimate from `text` */
+    speakDuration?: number;
+    /** Faded until the message is hovered (default true). Put data-ui-message on the message wrapper */
+    quiet?: boolean;
+    /** Accessible name of the bar */
+    label?: string;
+    className?: string;
+};
+/**
+ * The message itself, crossfading when `version` changes: the old text fades out underneath while the new one fades in,
+ * and the block eases to its new height.
+ */
+export declare function MessageText({ version, children, className }: {
+    version: string | number;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function MessageActions({ text, actions: actionsProp, versions, version, defaultVersion, onVersionChange, onCopy, onRegenerate, regenerating, onFeedback, reasons: reasonsProp, onSpeak, speaking, speakDuration, quiet, label, labels: labelProp, className, }: MessageActionsProps): import("react").JSX.Element;

package/dist/types/components/ui/setup-guide-clean.d.ts

@@ -0,0 +1,22 @@
+export type SetupTask = {
+    id: string;
+    label: string;
+    done?: boolean;
+};
+export type SetupGroup = {
+    id: string;
+    title: string;
+    tasks: SetupTask[];
+};
+export type SetupGuideProps = {
+    title?: string;
+    groups: SetupGroup[];
+    /** Shows an "Edit" link in the header */
+    onEdit?: () => void;
+    /** Shows a close button in the header */
+    onClose?: () => void;
+    /** Called with the ids of all finished tasks */
+    onChange?: (done: string[]) => void;
+    className?: string;
+};
+export declare function SetupGuide({ title, groups, onEdit, onClose, onChange, className }: SetupGuideProps): import("react").JSX.Element;

package/dist/types/components/ui/text-field-clean.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+export type TextFieldProps = Omit<ComponentPropsWithRef<"input">, "size" | "prefix"> & {
+    /** Shown above the field and tied to it */
+    label?: ReactNode;
+    /** A quiet line under the field – the error takes its place while there is one */
+    hint?: ReactNode;
+    /** Marks the field invalid and shows this under it, in place of the hint */
+    error?: ReactNode;
+    /** Text or an icon inside the field, before the value – e.g. "https://" or a search icon */
+    prefix?: ReactNode;
+    /** Text or an icon inside the field, after the value – e.g. ".acme.app" or "USD" */
+    suffix?: ReactNode;
+    /** sm 28 · md 32 · lg 36 high */
+    size?: "sm" | "md" | "lg";
+    /** "Optional" next to the label */
+    optional?: boolean;
+    /** A small × that empties the field while it has a value */
+    clearable?: boolean;
+    /** A copy button – for API keys, links and IDs, usually with readOnly */
+    copyable?: boolean;
+    /** Shows "12/40" under the field; needs maxLength */
+    counter?: boolean;
+    /** Called after the × emptied the field (onChange fires too) */
+    onClear?: () => void;
+    /** Extra class on the input itself; className goes on the wrapper */
+    inputClassName?: string;
+};
+export declare function TextField({ label, hint, error, prefix, suffix, size, optional, clearable, copyable, counter, onClear, onKeyDown, className, inputClassName, id, type, value, defaultValue, onChange, disabled, readOnly, maxLength, ref, "aria-describedby": describedBy, ...rest }: TextFieldProps): import("react").JSX.Element;