agentic-ui-kit 0.2.1 → 0.4.0

package/dist/types/react/src/primitives/labels.d.ts

@@ -0,0 +1,193 @@
+import { type ReactNode } from "react";
+/**
+ * Every string the kit shows (visible text, aria-labels, placeholders, tooltips), so a host can reword or
+ * translate the UI. Set through `ChatTheme labels={{ copy: "Copier" }}`; keys left out keep the English
+ * default. Keys that take values are functions.
+ */
+export interface ChatLabels {
+    /** BCP 47 tag for dates and relative times ("fr", "de-CH"). Default: the browser's locale. */
+    locale?: string | undefined;
+    /** Row label while the model is thinking. */
+    thinking: string;
+    /** Row label for finished thinking without a duration. */
+    thought: string;
+    /** Row label for finished thinking; `duration` is already formatted by `duration`. */
+    thoughtFor: (duration: string) => string;
+    /** Appended to the heading of a group that waits for the user, including its separator. */
+    waitingForYou: string;
+    /** Heading phrase for a tool without a view of its own, lowercase. */
+    usedTool: (name: string) => string;
+    /** Joins the heading phrases of a finished group. Default joins with ", " and capitalizes the first letter. */
+    joinSummaries: (phrases: string[]) => string;
+    /** "9s", "1m 5s": a duration in whole seconds. */
+    duration: (seconds: number) => string;
+    /** Row label of the command tool. */
+    ranCommandLabel: string;
+    /** Heading phrase for command calls, lowercase: "ran a command", "ran 3 commands". */
+    ranCommands: (count: number) => string;
+    /** Row label of the web search tool. */
+    searchedWebLabel: string;
+    readPageLabel: string;
+    readPages: (count: number) => string;
+    /** Heading phrase for web searches, lowercase. */
+    searchedWeb: (count: number) => string;
+    /** Row label of the memory tool. */
+    recalledMemoryLabel: string;
+    /** Heading phrase for memory lookups, lowercase. */
+    recalledMemory: (count: number) => string;
+    /** Title of a command's output block. */
+    output: string;
+    /** Command output block when the command printed nothing. */
+    noOutput: string;
+    /** Web search detail without results. */
+    noResults: string;
+    /** Thinking detail when the model's reasoning is hidden. */
+    reasoningHidden: string;
+    /** Accessible name of the approval dialog. */
+    allowTool: (name: string) => string;
+    /** The approval question for a tool without its own `ask`; `label` is the tool's row label. */
+    allowAction: (label: ReactNode) => ReactNode;
+    /** Approve button. */
+    allow: string;
+    /** Decline button. */
+    deny: string;
+    /** Accessible name of the sidebar drawer. */
+    sidebar: string;
+    /** Sidebar toggle, drawer open. */
+    closeSidebar: string;
+    /** Sidebar toggle, drawer closed. */
+    openSidebar: string;
+    /** Sidebar toggle, rail. */
+    expandSidebar: string;
+    /** Sidebar toggle, full width. */
+    collapseSidebar: string;
+    /** Default title of the context panel. */
+    context: string;
+    /** Accessible name of the usage meter. */
+    contextUsed: string;
+    /** "42% used". */
+    percentUsed: (percent: number) => string;
+    /** Row for the unused part of the window. */
+    freeSpace: string;
+    /** "1.2k tokens"; `count` is already formatted. */
+    tokenCount: (count: string) => string;
+    /** Composer placeholder. */
+    replyPlaceholder: string;
+    /** Composer placeholder while a tool waits for approval. */
+    replyDirectly: string;
+    /** Accessible name of the composer text box. */
+    message: string;
+    /** Stop button. */
+    stop: string;
+    /** Send button. */
+    send: string;
+    /** The `+` button of the composer. */
+    addFiles: string;
+    /** Accessible name of an attachment list. */
+    attachments: string;
+    /** Button on a pasted-text card. */
+    editPastedText: string;
+    /** Overlay button on a read-only pasted-text card. */
+    viewPastedText: string;
+    /** Remove button of an attachment card. */
+    removeAttachment: (name: string) => string;
+    /** Dialog title, and the name given to pasted text. */
+    pastedText: string;
+    /** Badge on a pasted-text card. */
+    pasted: string;
+    /** Badge on a failed card. */
+    failed: string;
+    /** Badge on a card whose file has no extension. */
+    file: string;
+    /** Tooltip of a failed card without an error message. */
+    uploadFailed: string;
+    /** Dialog button. */
+    cancel: string;
+    /** Dialog button. */
+    close: string;
+    /** Dialog button. */
+    save: string;
+    /** Accessible name of the chat list. */
+    chats: string;
+    /** Marker on a running chat. */
+    running: string;
+    /** Marker on an unread chat. */
+    unread: string;
+    /** Row menu button of a chat. */
+    moreOptionsFor: (title: string) => string;
+    /** Badge on a collapsed project with new activity. */
+    new: string;
+    /** Button under a chat list section. */
+    viewAll: string;
+    /** Accessible name of the title menu. */
+    chatActions: string;
+    /** Menu item. */
+    pin: string;
+    /** Menu item. */
+    unpin: string;
+    /** Menu item. */
+    rename: string;
+    /** Menu item. */
+    addToProject: string;
+    /** Search box of the project submenu. */
+    searchProjects: string;
+    /** Accessible name of the project list. */
+    projects: string;
+    /** Menu item. */
+    newProject: string;
+    /** Menu item. */
+    shareChat: string;
+    /** Menu item. */
+    delete: string;
+    /** Relative time under a minute. */
+    justNow: string;
+    /** Copy button. */
+    copy: string;
+    /** Copy button right after copying. */
+    copied: string;
+    /** Retry button. */
+    retry: string;
+    /** Edit button. */
+    edit: string;
+    /** Read aloud button. */
+    readAloud: string;
+    /** Feedback button. */
+    goodResponse: string;
+    /** Feedback button. */
+    badResponse: string;
+    /** Shown under a failed message without an error text. */
+    somethingWentWrong: string;
+    /** Accessible name of the message log. */
+    conversation: string;
+    /** Button that jumps to the newest message. */
+    scrollToBottom: string;
+    /** Unfolds a long user message. */
+    showMore: string;
+    /** Folds it again. */
+    showLess: string;
+    /** Accessible name of the model menu. */
+    model: string;
+    /** Accessible name of the model button; `label` is the current model. */
+    modelButton: (label: string) => string;
+    /** Effort submenu item and list name. */
+    effort: string;
+    /** Note above the effort list. */
+    effortNote: string;
+    /** Badge on the recommended effort. */
+    recommended: string;
+    /** Submenu item and list name. */
+    moreModels: string;
+    /** Accessible name of a widget without a title. */
+    widget: string;
+    /** Loading line while a widget streams and the model gave none. */
+    drawingWidget: string;
+}
+/** The English strings. */
+export declare const defaultLabels: ChatLabels;
+/** Merges `labels` over the labels of the enclosing provider (or the defaults). */
+export declare function LabelsProvider({ labels, children }: {
+    labels: Partial<ChatLabels> | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The active UI strings: the enclosing `ChatTheme`'s `labels` over the English defaults. */
+export declare function useLabels(): ChatLabels;

package/dist/types/react/src/primitives/menu.d.ts

@@ -25,6 +25,8 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "className" | "ch
     icon?: ReactNode;
     /** Second line under the label ("For complex work and everyday tasks"). */
     description?: ReactNode;
+    /** "below" (default) puts the description under the label; "beside" puts it after it on one line. */
+    descriptionPlacement?: "below" | "beside";
     /** Right-aligned detail: the current value of a submenu ("Medium") or a badge. */
     detail?: ReactNode;
     /** Keyboard shortcut shown on the right ("⌘U", "P"). */
@@ -33,7 +35,7 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "className" | "ch
     tone?: "default" | "danger";
     className?: string;
 }
-export declare function MenuItem({ children, icon, description, detail, shortcut, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ children, icon, description, descriptionPlacement, detail, shortcut, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
 export interface MenuSectionProps {
     children: ReactNode;
     title?: ReactNode;

package/dist/types/react/src/primitives/segmented-control.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export interface SegmentedOption<T extends string = string> {
+    id: T;
+    label: string;
+    icon?: ReactNode;
+    /** Show only the icon; the label becomes its accessible name and tooltip. */
+    iconOnly?: boolean;
+}
+export interface SegmentedControlProps<T extends string = string> {
+    /** Accessible name of the group, e.g. "Mode". */
+    label: string;
+    options: readonly SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    className?: string;
+}
+/**
+ * One of a few options, side by side on a track, like claude.ai's Chat / Cowork switch. Themed with
+ * `--chat-segment-track` (default: a shade darker than the surface it sits on) and `--chat-segment-selected`
+ * (default `--chat-raised`).
+ */
+export declare function SegmentedControl<T extends string>({ label, options, value, onChange, className }: SegmentedControlProps<T>): import("react").JSX.Element;

package/dist/types/react/src/views/chat-transcript.d.ts

@@ -0,0 +1,27 @@
+import type { Message, Part } from "../../../core/src/index.js";
+import { type ReactNode } from "react";
+import { type WidgetHost } from "../components/widget-frame";
+import { type Density } from "./chat-view";
+export interface ChatTranscriptProps {
+    messages: Message[];
+    renderPart?: (part: Part) => ReactNode;
+    /** What widgets may load and how their links open. Widgets here cannot send messages or call tools. */
+    widgets?: Omit<WidgetHost, "onPrompt" | "onCallTool">;
+    /** Above the conversation, e.g. a ChatHeader with the title and who shared it. */
+    header?: ReactNode;
+    /** Atop the conversation, scrolling with it: who shared it and what it is. E.g. a ChatNotice. */
+    notice?: ReactNode;
+    /** Pinned under the last message, e.g. "Continue this chat" or "Shared snapshot, may be out of date". */
+    footer?: ReactNode;
+    /** Where reading starts. Default "top", the start of the conversation. */
+    start?: "top" | "bottom";
+    density?: Density;
+    contentWidth?: string;
+    contentPadding?: string;
+    className?: string;
+}
+/**
+ * A conversation to read, not to continue: a shared chat, an export, a log. Same messages as ChatView,
+ * with no composer, approvals, retry, edit or feedback. Copy stays.
+ */
+export declare function ChatTranscript({ messages, renderPart, widgets, header, notice, footer, start, density, contentWidth, contentPadding, className, }: ChatTranscriptProps): import("react").JSX.Element;

package/dist/types/react/src/views/chat-view.d.ts

@@ -1,9 +1,16 @@
 import type { Message, Part } from "../../../core/src/index.js";
-import { type ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 import type { PendingApproval } from "../hooks/use-chat";
 import { type ComposerProps } from "../components/composer";
-import type { Feedback } from "../components/messages";
+import type { Feedback, MessageActions } from "../components/messages";
+import { type WidgetHost } from "../components/widget-frame";
 export type Density = "full" | "panel" | "inline";
+/**
+ * Column defaults per density; `contentWidth` / `contentPadding` override them. Only the message size changes
+ * with density: UI text is the same in all three. A theme can set the other text-size variables per density
+ * with `[data-chat-density="panel"] { --chat-ui-font-size: … }`.
+ */
+export declare const densityVars: Record<Density, CSSProperties>;
 export interface ChatViewProps {
     messages: Message[];
     busy?: boolean;
@@ -15,7 +22,17 @@ export interface ChatViewProps {
     onRetry?: (assistantId: string) => void;
     onEdit?: (userId: string) => void;
     onFeedback?: (assistantId: string, feedback: Feedback) => void;
+    /** Read aloud button on assistant messages. */
+    onReadAloud?: (assistantId: string) => void;
+    /** Add your own buttons to each message's action row, or hide copy and the time. */
+    messageActions?: MessageActions;
     renderPart?: (part: Part) => ReactNode;
+    /**
+     * What widgets (sandboxed visuals) may do: the domains they may load, and their callbacks. A widget's
+     * sendPrompt sends through `onSend` and its links open in a new tab unless set here; set a callback to
+     * `undefined` to turn it off.
+     */
+    widgets?: WidgetHost;
     /** Usually a `<ChatHeader>`. */
     header?: ReactNode;
     /** Passed to the composer: toolbar slots, placeholder, controlled text. */
@@ -36,7 +53,7 @@ export interface ChatViewProps {
     className?: string;
 }
 /** A whole chat: header, the conversation, the docked composer. An empty chat shows `emptyState`. */
-export declare function ChatView({ messages, busy, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, renderPart, header, composer, emptyState, disclaimer, density, contentWidth, contentPadding, className, }: ChatViewProps): import("react").JSX.Element;
+export declare function ChatView({ messages, busy, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, density, contentWidth, contentPadding, className, }: ChatViewProps): import("react").JSX.Element;
 export interface EmptyStateProps {
     /** "Good evening, Alex". */
     greeting: ReactNode;