@timbal-ai/timbal-react 0.2.2 → 0.4.0

package/dist/index.d.ts

@@ -1,16 +1,180 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { ReactNode, FC, ComponentType, ComponentPropsWithRef, ElementType } from 'react';
-import { ToolCallMessagePartComponent } from '@assistant-ui/react';
-export { ActionBarPrimitive, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, useComposerRuntime, useMessageRuntime, useThread, useThreadRuntime } from '@assistant-ui/react';
+import React__default, { ReactNode, FC, ComponentType, Dispatch, CSSProperties, ElementType } from 'react';
+import { AttachmentAdapter, ToolCallMessagePartComponent } from '@assistant-ui/react';
+export { ActionBarMorePrimitive, ActionBarPrimitive, AssistantRuntimeProvider, AttachmentAdapter, AuiIf, ComposerPrimitive, ErrorPrimitive, MessagePartPrimitive, MessagePrimitive, ThreadPrimitive, ToolCallMessagePartComponent, useAuiState, useComposerRuntime, useMessageRuntime, useThread, useThreadRuntime } from '@assistant-ui/react';
+import { WorkforceItem, Session } from '@timbal-ai/timbal-sdk';
+export { parseSSELine } from '@timbal-ai/timbal-sdk';
+import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
-import { Session } from '@timbal-ai/timbal-sdk';
 import { Tooltip as Tooltip$1, Avatar as Avatar$1, Dialog as Dialog$1 } from 'radix-ui';
 import { ClassValue } from 'clsx';
 
-type FetchFn = (url: string, options?: RequestInit) => Promise<Response>;
+type UploadFetchFn = (url: string, options?: RequestInit) => Promise<Response>;
+interface CreateDefaultAttachmentAdapterOptions {
+    /**
+     * API base path used to derive the upload URL when {@link uploadUrl} is
+     * omitted. Trailing slashes are stripped. Defaults to `""` (relative
+     * `/files/upload`).
+     */
+    baseUrl?: string;
+    /**
+     * Absolute or relative URL the adapter `POST`s the multipart upload to.
+     * Defaults to `${baseUrl}/files/upload`.
+     */
+    uploadUrl?: string;
+    /**
+     * Custom fetch used for the upload. Defaults to {@link authFetch}. Do not
+     * set `Content-Type` on multipart uploads — the boundary must be automatic.
+     */
+    fetch?: UploadFetchFn;
+    /**
+     * MIME / extension `accept` string for the file picker.
+     */
+    accept?: string;
+}
+/** @deprecated Use {@link CreateDefaultAttachmentAdapterOptions}. */
+type CreateUploadAttachmentAdapterOptions = CreateDefaultAttachmentAdapterOptions;
+declare const DEFAULT_UPLOAD_ACCEPT = "image/*,application/pdf,text/*,.md,.json,.csv,.tsv,.xlsx,.docx";
+/**
+ * Build an `AttachmentAdapter` that uploads each file to a Timbal-style
+ * `/files/upload` endpoint and returns a `CompleteAttachment` whose
+ * `content[]` references the returned URL.
+ */
+declare function createDefaultAttachmentAdapter({ baseUrl, uploadUrl, fetch: fetchFn, accept, }?: CreateDefaultAttachmentAdapterOptions): AttachmentAdapter;
+/** @deprecated Alias of {@link createDefaultAttachmentAdapter}. */
+declare const createUploadAttachmentAdapter: typeof createDefaultAttachmentAdapter;
+
+/** Tweaks for the built-in upload adapter (see {@link createDefaultAttachmentAdapter}). */
+type TimbalAttachmentsConfig = {
+    uploadUrl?: string;
+    accept?: string;
+};
+/**
+ * Enable or customise composer attachments.
+ *
+ * - `true` — built-in adapter posting to `${baseUrl}/files/upload`
+ * - `{ uploadUrl?, accept? }` — same adapter with overrides
+ * - `AttachmentAdapter` — fully custom (e.g. presigned S3)
+ * - `null` — disable attachments (no `+` button / dropzone wiring)
+ * - `undefined` — off unless legacy `attachmentsUploadUrl` / `attachmentsAccept` are set
+ */
+type TimbalAttachmentsProp = boolean | TimbalAttachmentsConfig | AttachmentAdapter | null;
+interface ResolveAttachmentAdapterOptions {
+    baseUrl?: string;
+    fetch?: CreateDefaultAttachmentAdapterOptions["fetch"];
+    /** @deprecated Prefer `attachments={{ uploadUrl }}` */
+    uploadUrl?: string;
+    /** @deprecated Prefer `attachments={{ accept }}` */
+    accept?: string;
+}
+/**
+ * Resolve the `AttachmentAdapter` (if any) for {@link TimbalRuntimeProvider}.
+ */
+declare function resolveAttachmentAdapter(attachments: TimbalAttachmentsProp | undefined, options?: ResolveAttachmentAdapterOptions): AttachmentAdapter | undefined;
+
+interface TextContentPart {
+    type: "text";
+    text: string;
+}
+interface ThinkingContentPart {
+    type: "thinking";
+    text: string;
+}
+/**
+ * A tool invocation. `argsText` accumulates from streaming `tool_use_delta`
+ * events; `result` is set once the matching `tool_result` arrives in the
+ * `OUTPUT` event.
+ *
+ * `result` is always a JSON-serializable value (string, number, object, array)
+ * — the runtime preserves whatever the agent returns. `resultText` is the
+ * text representation of the result blocks from `tool_result.content`, useful
+ * as a quick fallback when callers don't want to walk the structured result.
+ */
+interface ToolCallContentPart {
+    type: "tool-call";
+    toolCallId: string;
+    toolName: string;
+    argsText: string;
+    result?: unknown;
+    resultText?: string;
+    status?: "running" | "complete" | "error";
+}
+type ContentPart = TextContentPart | ThinkingContentPart | ToolCallContentPart;
+type MessageRole = "user" | "assistant";
+/**
+ * A file attached to a user message. We carry a single `dataUrl` field
+ * (despite the name, it may be either a `data:<mime>;base64,<bytes>` URL
+ * or a real `https://...` URL returned by an upload adapter) and project
+ * it both onto the wire (`{type:"file", file: dataUrl}`) and onto the
+ * assistant-ui display layer (`ImageMessagePart` / `FileMessagePart`
+ * inside `attachments[].content`).
+ *
+ * Both forms are accepted by Timbal's `FileContent` factory, so the same
+ * field works whether the attachment was inlined as base64 or uploaded
+ * to object storage.
+ */
+interface ChatAttachment {
+    id: string;
+    type: "image" | "document" | "file";
+    name?: string;
+    contentType?: string;
+    /**
+     * Either a `data:<mime>;base64,<bytes>` URL (inline) or a remote
+     * `https://...` URL produced by an upload-style {@link AttachmentAdapter}.
+     */
+    dataUrl: string;
+}
+interface ChatMessage {
+    id: string;
+    role: MessageRole;
+    content: ContentPart[];
+    /** Files attached to a user message. Empty/undefined for assistant messages. */
+    attachments?: ChatAttachment[];
+    /** Run id stamped from the top-level `START` SSE event. */
+    runId?: string;
+}
+
+type FetchFn$1 = (url: string, options?: RequestInit) => Promise<Response>;
+interface UseTimbalStreamOptions {
+    workforceId: string;
+    baseUrl?: string;
+    fetch?: FetchFn$1;
+    /**
+     * When true, every parsed SSE event is `console.debug`-ed with a
+     * `[timbal]` prefix. Useful for diagnosing tool/artifact rendering issues
+     * without screen-sharing. Default: `false`.
+     */
+    debug?: boolean;
+}
+interface SendOptions {
+    attachments?: ChatAttachment[];
+    /** Override the parent run id resolution. Pass `null` to start a new thread. */
+    parentId?: string | null;
+}
+interface TimbalStreamApi {
+    messages: ChatMessage[];
+    isRunning: boolean;
+    send: (input: string, options?: SendOptions) => Promise<void>;
+    reload: (messageId?: string | null) => Promise<void>;
+    cancel: () => void;
+    clear: () => void;
+}
+/**
+ * Lower-level streaming hook for callers that don't want the full `<Thread>`
+ * UI. Exposes the internal message state plus `send`, `reload`, `cancel`, and
+ * `clear` actions. Use this to build custom chat surfaces while reusing the
+ * Timbal SSE wire format and auth-aware fetching.
+ */
+declare function useTimbalStream({ workforceId, baseUrl, fetch: fetchFn, debug, }: UseTimbalStreamOptions): TimbalStreamApi;
+/**
+ * Access the underlying `useTimbalStream` API from inside a component tree
+ * wrapped by `<TimbalRuntimeProvider>` (or `<TimbalChat>`). Useful for custom
+ * UIs that need direct access to messages, send, or cancel without going
+ * through the assistant-ui runtime.
+ */
+declare function useTimbalRuntime(): TimbalStreamApi;
 interface TimbalRuntimeProviderProps {
     workforceId: string;
     children: ReactNode;
@@ -23,81 +187,819 @@ interface TimbalRuntimeProviderProps {
      * Custom fetch function for API calls. Defaults to `authFetch` which
      * attaches Bearer tokens from localStorage and auto-refreshes on 401.
      */
-    fetch?: FetchFn;
+    fetch?: FetchFn$1;
+    /**
+     * Enable composer attachments. `true` or `{ uploadUrl?, accept? }` uses
+     * the built-in upload adapter (`POST` to `${baseUrl}/files/upload` by
+     * default). Pass a custom {@link AttachmentAdapter} for full control, or
+     * `null` to disable. Omitted = off (back-compat with pre-attachment chats).
+     */
+    attachments?: TimbalAttachmentsProp;
+    /**
+     * Shorthand to enable the default upload adapter with a custom endpoint.
+     * Equivalent to `attachments={{ uploadUrl }}` when `attachments` is omitted.
+     */
+    attachmentsUploadUrl?: string;
+    /**
+     * Shorthand MIME `accept` for the default upload adapter when `attachments`
+     * is omitted or `true`.
+     */
+    attachmentsAccept?: string;
+    /**
+     * Forwarded to {@link useTimbalStream}. When `true`, every parsed SSE
+     * event is logged via `console.debug` with a `[timbal]` prefix.
+     */
+    debug?: boolean;
+}
+declare function TimbalRuntimeProvider({ workforceId, children, baseUrl, fetch: fetchFn, attachments, attachmentsUploadUrl, attachmentsAccept, debug, }: TimbalRuntimeProviderProps): react_jsx_runtime.JSX.Element;
+
+interface ComposerProps {
+    /** Placeholder shown in the textarea. Default: "Send a message..." */
+    placeholder?: string;
+    /**
+     * Show the file-attach button. Default: true. Disable when the agent has no
+     * use for attachments to keep the toolbar clean.
+     */
+    showAttachments?: boolean;
+    /** Extra content rendered inside the toolbar, left of the send button. */
+    toolbar?: ReactNode;
+    /** Tooltip shown on the send button. Default: "Send message". */
+    sendTooltip?: string;
+    /** Disable autofocus on mount. Default: false. */
+    noAutoFocus?: boolean;
+    /** Extra className applied to the outer composer wrapper. */
+    className?: string;
 }
-declare function TimbalRuntimeProvider({ workforceId, children, baseUrl, fetch: fetchFn, }: TimbalRuntimeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Default chat composer — auto-resizing textarea with Enter-to-send,
+ * Shift+Enter for newline, attach pill on the left, and a circular send /
+ * cancel button on the right. Wraps `ComposerPrimitive` so consumers can
+ * override individual slots without losing the Studio chrome.
+ */
+declare const Composer: FC<ComposerProps>;
 
 interface ThreadSuggestion {
+    /** Title shown on the row. Also sent verbatim as the user message. */
     title: string;
+    /** Optional secondary line. */
     description?: string;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /**
+     * Override the prompt sent when the row is clicked. Useful when the row
+     * label is short ("Weekly recap") but the prompt should be longer.
+     */
+    prompt?: string;
+}
+/**
+ * Suggestions can be passed as a static array, a thunk that returns an
+ * array, or an async function for dynamic / per-user suggestions.
+ */
+type SuggestionsSource = ThreadSuggestion[] | (() => ThreadSuggestion[] | Promise<ThreadSuggestion[]>);
+interface ThreadSuggestionsProps {
+    suggestions?: SuggestionsSource;
+    className?: string;
+}
+/**
+ * Render suggestions as a stacked column of full-width rows. Each row reads
+ * like a list item rather than a chip, matching the Studio playground.
+ *
+ * On click the row's `prompt` (or `title` if no prompt) is appended as a
+ * user message via the thread runtime.
+ */
+declare const Suggestions: FC<ThreadSuggestionsProps>;
+/**
+ * Resolve a `SuggestionsSource` to an array. Re-runs when the source
+ * identity changes. Sync arrays / sync functions resolve immediately;
+ * async functions stream in once the promise settles.
+ */
+declare function useResolvedSuggestions(source?: SuggestionsSource): ThreadSuggestion[] | undefined;
+interface SuggestionsSlotProps {
+    suggestions?: SuggestionsSource;
+    className?: string;
+}
+type SuggestionsComponent = ComponentType<SuggestionsSlotProps>;
+
+/** A value that is either a literal or a binding into local state. */
+type UiBindable<T> = T | {
+    $bind: string;
+};
+interface UiArtifact {
+    type: "ui";
+    title?: string;
+    /** Initial values for `$bind` references. */
+    initialState?: Record<string, unknown>;
+    /** Root of the node tree. */
+    root: UiNode;
+}
+interface UiNodeBase {
+    id?: string;
+    className?: string;
+}
+interface UiBoxNode extends UiNodeBase {
+    kind: "box";
+    /** Flex direction. Default: "col". */
+    direction?: "row" | "col";
+    /** Tailwind spacing units (gap = `gap * 0.25rem`). */
+    gap?: number;
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "between" | "around";
+    wrap?: boolean;
+    padding?: number;
+    children?: UiNode[];
+}
+interface UiTextNode extends UiNodeBase {
+    kind: "text";
+    value: UiBindable<string | number>;
+    muted?: boolean;
+    size?: "xs" | "sm" | "base" | "lg";
+    weight?: "normal" | "medium" | "semibold" | "bold";
+}
+interface UiHeadingNode extends UiNodeBase {
+    kind: "heading";
+    value: UiBindable<string>;
+    level?: 1 | 2 | 3 | 4;
+}
+interface UiBadgeNode extends UiNodeBase {
+    kind: "badge";
+    value: UiBindable<string>;
+    tone?: "default" | "primary" | "success" | "warn" | "danger";
+}
+interface UiButtonNode extends UiNodeBase {
+    kind: "button";
+    label: UiBindable<string>;
+    variant?: "default" | "outline" | "ghost" | "secondary" | "destructive" | "link";
+    size?: "sm" | "default" | "lg";
+    disabled?: UiBindable<boolean>;
+    onClick?: UiAction | UiAction[];
+}
+/**
+ * Two-state toggle. `binding` is a dotted state path; clicking flips the
+ * stored boolean. Optional `onChange` fires *after* the state flip.
+ */
+interface UiToggleNode extends UiNodeBase {
+    kind: "toggle";
+    label?: UiBindable<string>;
+    binding: string;
+    onChange?: UiAction | UiAction[];
+}
+/**
+ * Numeric range input. `binding` is a dotted state path; the slider reads and
+ * writes the stored number. Optional `onChange` fires after each commit.
+ */
+interface UiSliderNode extends UiNodeBase {
+    kind: "slider";
+    binding: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: UiBindable<string>;
+    /** Show the current value next to the slider. Default: true. */
+    showValue?: boolean;
+    onChange?: UiAction | UiAction[];
+}
+interface UiTooltipNode extends UiNodeBase {
+    kind: "tooltip";
+    content: UiBindable<string>;
+    side?: "top" | "bottom" | "left" | "right";
+    child: UiNode;
+}
+/**
+ * Wrap any node to make it draggable. Drag is purely visual — release fires
+ * `onDragEnd`. If `snapBack` (default) the child returns to its origin.
+ */
+interface UiDraggableNode extends UiNodeBase {
+    kind: "draggable";
+    child: UiNode;
+    axis?: "x" | "y" | "both";
+    snapBack?: boolean;
+    onDragEnd?: UiAction | UiAction[];
+}
+/**
+ * Escape hatch: a host-app-registered component. The host registers a
+ * renderer by name via `UiCustomNodeRegistryProvider`; props are passed
+ * through after binding resolution and children render recursively.
+ */
+interface UiCustomNode extends UiNodeBase {
+    kind: "custom";
+    name: string;
+    props?: Record<string, unknown>;
+    children?: UiNode[];
+}
+type UiNode = UiBoxNode | UiTextNode | UiHeadingNode | UiBadgeNode | UiButtonNode | UiToggleNode | UiSliderNode | UiTooltipNode | UiDraggableNode | UiCustomNode;
+type UiAction = 
+/** Append a user message to the active thread. */
+{
+    kind: "message";
+    text: UiBindable<string>;
+}
+/** Set a path in local state to a (possibly bound) value. */
+ | {
+    kind: "set";
+    path: string;
+    value: UiBindable<unknown>;
+}
+/** Flip a boolean at the given local-state path. */
+ | {
+    kind: "toggle";
+    path: string;
+}
+/** Bubble a named event to the host app via `UiEventProvider`. */
+ | {
+    kind: "emit";
+    name: string;
+    payload?: unknown;
+};
+declare function isUiBinding(value: unknown): value is {
+    $bind: string;
+};
+
+interface ChartArtifact {
+    type: "chart";
+    /** Chart kind. Renderer maps these to the underlying lib (e.g. recharts). */
+    chartType?: "bar" | "line" | "area" | "pie";
+    /** Optional title rendered above the chart. */
+    title?: string;
+    /** Array of data points. Keys map to series via `dataKey` / `xKey`. */
+    data: Array<Record<string, unknown>>;
+    /** Field name on each data point used for the X axis / category. */
+    xKey?: string;
+    /** Field name(s) used for series. Defaults to all keys except `xKey`. */
+    dataKey?: string | string[];
+    /** Optional unit label appended to numeric axis ticks. */
+    unit?: string;
+}
+interface QuestionOption {
+    id: string;
+    label: string;
+    description?: string;
+}
+/**
+ * Question artifact — renders an in-thread choice widget. When the user picks
+ * an option, the renderer calls back into the runtime with the selected
+ * label as a new user message. Agents should treat the user response as the
+ * answer.
+ */
+interface QuestionArtifact {
+    type: "question";
+    /** Optional prompt shown above the options. Falls back to the message text. */
+    prompt?: string;
+    options: QuestionOption[];
+    /** Allow selecting more than one option. Default: false. */
+    multi?: boolean;
+}
+/** HTML/CSS/JS rendered in an iframe. See {@link HtmlArtifactView}. */
+interface HtmlArtifact {
+    type: "html";
+    content: string;
+    /**
+     * When true (default) the HTML renders inside a sandboxed iframe. The
+     * sandbox allows scripts, forms, and modals but still isolates the
+     * document from the host page. Set to `false` for fully unrestricted
+     * inline HTML (scripts, external CDN assets, etc.) — trusted content only.
+     */
+    sandboxed?: boolean;
+    /** Optional title rendered above the iframe. */
+    title?: string;
+    /** Iframe height in CSS pixels or any valid CSS length. Default: "320px". */
+    height?: string;
+}
+interface JsonArtifact {
+    type: "json";
+    title?: string;
+    data: unknown;
+}
+interface TableArtifact {
+    type: "table";
+    title?: string;
+    columns?: Array<{
+        key: string;
+        label?: string;
+    }>;
+    rows: Array<Record<string, unknown>>;
+}
+
+type TimbalArtifact = ChartArtifact | QuestionArtifact | HtmlArtifact | JsonArtifact | TableArtifact | UiArtifact;
+type AnyArtifact = TimbalArtifact | {
+    type: string;
+    [key: string]: unknown;
+};
+/**
+ * Type guard for artifact-shaped objects. Anything with a string `type` field
+ * is considered a candidate; specific renderers narrow further.
+ */
+declare function isArtifact(value: unknown): value is AnyArtifact;
+
+interface ArtifactRendererProps<T extends AnyArtifact = AnyArtifact> {
+    artifact: T;
 }
+type ArtifactRenderer<T extends AnyArtifact = AnyArtifact> = ComponentType<ArtifactRendererProps<T>>;
+type ArtifactRegistry = Record<string, ArtifactRenderer<AnyArtifact>>;
+declare const defaultArtifactRenderers: ArtifactRegistry;
+/**
+ * Provide a custom artifact registry to the subtree. Custom renderers are
+ * merged on top of the defaults — pass `override: true` to replace.
+ */
+declare const ArtifactRegistryProvider: FC<{
+    renderers?: ArtifactRegistry;
+    override?: boolean;
+    children: ReactNode;
+}>;
+declare function useArtifactRegistry(): ArtifactRegistry;
+/**
+ * Render an artifact using the closest registry. Falls back to the JSON
+ * renderer when no entry matches the artifact's `type`.
+ */
+declare const ArtifactView: FC<{
+    artifact: AnyArtifact;
+}>;
+
+type UiState = Record<string, unknown>;
+type UiStateAction = {
+    type: "set";
+    path: string;
+    value: unknown;
+} | {
+    type: "toggle";
+    path: string;
+} | {
+    type: "replace";
+    state: UiState;
+};
+/** Read a dotted path from a state object. Returns undefined when missing. */
+declare function getPath(state: UiState, path: string): unknown;
+/**
+ * Set a dotted path on a state object, returning a new object. Intermediate
+ * objects are cloned (or created when missing) so the result is safe to use
+ * directly with React state without further copying.
+ */
+declare function setPath(state: UiState, path: string, value: unknown): UiState;
+/** Resolve a UiBindable into its concrete value against the given state. */
+declare function resolveBindable<T>(value: UiBindable<T>, state: UiState): T;
+
+declare function useUiState(): UiState;
+declare function useUiDispatch(): Dispatch<UiStateAction>;
+interface UiEventEnvelope {
+    name: string;
+    payload?: unknown;
+}
+/**
+ * Subscribe the host app to `emit`-kind actions fired from any UiArtifact in
+ * the subtree. Wrap your runtime / chat root once.
+ */
+declare const UiEventProvider: FC<{
+    onEvent: (event: UiEventEnvelope) => void;
+    children: ReactNode;
+}>;
+declare function useUiEventEmitter(): ((event: UiEventEnvelope) => void) | null;
+interface UiCustomNodeProps {
+    /** Already binding-resolved props from the artifact. */
+    props: Record<string, unknown>;
+    /** Recursively rendered children. */
+    children?: ReactNode;
+}
+type UiCustomNodeRenderer = ComponentType<UiCustomNodeProps>;
+/**
+ * Register named renderers for `{ kind: "custom", name: "..." }` nodes. Lets
+ * host apps extend the palette without forking the package.
+ */
+declare const UiCustomNodeRegistryProvider: FC<{
+    renderers: Record<string, UiCustomNodeRenderer>;
+    children: ReactNode;
+}>;
+declare function useUiCustomNodeRegistry(): Record<string, UiCustomNodeRenderer>;
+
 interface ThreadWelcomeConfig {
     heading?: string;
     subheading?: string;
+    /**
+     * Optional brand icon rendered above the heading. Pass any ReactNode — the
+     * SDK no longer ships a default sparkle icon so apps can drop in their
+     * own logo or stay minimal.
+     */
+    icon?: ReactNode;
 }
 interface ThreadWelcomeProps {
     config?: ThreadWelcomeConfig;
-    suggestions?: ThreadSuggestion[];
+    suggestions?: SuggestionsSource;
+    /**
+     * The resolved `Suggestions` component (default or user-overridden via
+     * `components.Suggestions`). Custom Welcome implementations should render
+     * this and pass their `suggestions` source through.
+     */
+    Suggestions?: SuggestionsComponent;
 }
 interface ThreadComponents {
-    /** Replace the user message bubble. Access message content via `MessagePrimitive.Parts`. */
+    /** Replace the user message bubble. Access content via `MessagePrimitive.Parts`. */
     UserMessage?: ComponentType;
-    /** Replace the assistant message bubble. Access message content via `MessagePrimitive.Parts`. */
+    /** Replace the assistant message bubble. Access content via `MessagePrimitive.Parts`. */
     AssistantMessage?: ComponentType;
     /** Replace the inline edit composer. */
     EditComposer?: ComponentType;
-    /** Replace the composer (input bar). Receives `placeholder` from `composerPlaceholder`. */
-    Composer?: ComponentType<{
-        placeholder?: string;
-    }>;
-    /** Replace the welcome / empty state. Receives `config` and `suggestions` props. Controls its own visibility — use `useThread(s => s.isEmpty)` to replicate the default behaviour. */
+    /** Replace the composer (input bar). Receives all `ComposerProps` from the parent. */
+    Composer?: ComponentType<ComposerProps>;
+    /** Replace the welcome / empty state. Renders only while the thread is empty. */
     Welcome?: ComponentType<ThreadWelcomeProps>;
+    /** Replace the suggestion list (rendered inside Welcome). */
+    Suggestions?: SuggestionsComponent;
     /** Replace the scroll-to-bottom button. */
     ScrollToBottom?: ComponentType;
 }
+interface ThreadArtifactsConfig {
+    /** Custom artifact renderers, merged on top of the built-in defaults. */
+    renderers?: ArtifactRegistry;
+    /** Replace the built-in renderers entirely instead of merging. */
+    override?: boolean;
+}
+
 interface ThreadProps {
     className?: string;
-    /** Max width of the message column. Default: "44rem" */
+    /** Max width of the message column. Default: "44rem". */
     maxWidth?: string;
-    /** Welcome screen text */
+    /** Welcome screen text + optional brand icon. */
     welcome?: ThreadWelcomeConfig;
-    /** Suggestion chips shown on the welcome screen */
-    suggestions?: ThreadSuggestion[];
-    /** Composer input placeholder. Default: "Send a message..." */
+    /**
+     * Welcome-screen suggestion rows. Accepts a static array, a thunk, or an
+     * async function for per-user suggestions.
+     */
+    suggestions?: SuggestionsSource;
+    /** Composer input placeholder. Default: "Send a message...". */
     composerPlaceholder?: string;
     /** Override individual UI slots while keeping the rest as defaults. */
     components?: ThreadComponents;
+    /**
+     * Configure how rich tool/artifact results render. Pass `renderers` to add
+     * support for custom artifact `type` values. Built-in types (`chart`,
+     * `question`, `html`, `json`, `table`, `ui`) are always available unless
+     * `override: true` is set.
+     */
+    artifacts?: ThreadArtifactsConfig;
+    /**
+     * Called when a `ui` artifact fires an `{ kind: "emit" }` action. Use this
+     * to react to slider commits, drag gestures, or other host-side logic
+     * beyond the built-in `message` action (which already appends a user
+     * message).
+     */
+    onArtifactEvent?: (event: UiEventEnvelope) => void;
 }
 declare const Thread: FC<ThreadProps>;
 
 interface TimbalChatProps extends Omit<TimbalRuntimeProviderProps, "children">, ThreadProps {
 }
-declare function TimbalChat({ workforceId, baseUrl, fetch, ...threadProps }: TimbalChatProps): react_jsx_runtime.JSX.Element;
+declare function TimbalChat({ workforceId, baseUrl, fetch, attachments, attachmentsUploadUrl, attachmentsAccept, debug, ...threadProps }: TimbalChatProps): react_jsx_runtime.JSX.Element;
 
 declare const MarkdownText: React.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
 
+interface ToolStatus {
+    type: string;
+    reason?: string;
+}
+declare function useToolRunning(props: {
+    status?: ToolStatus;
+    result?: unknown;
+}): boolean;
 declare const ToolFallback: ToolCallMessagePartComponent;
 
+/**
+ * Tool-row presence motion shared across the chat surface.
+ *
+ * Mirrors `timbal-platform` `StudioToolMotion.js` — a soft "luxury" ease in
+ * with optional blur, fast exit, and a grid-row collapsible body. Exit
+ * durations stay short so the layout doesn't feel sticky when tools resolve
+ * quickly.
+ */
+declare const luxuryEase: readonly [0.16, 1, 0.3, 1];
+declare function toolPresenceTransition(reduced: boolean): {
+    enter: {
+        duration: number;
+        ease: readonly [0.16, 1, 0.3, 1];
+    };
+    exit: {
+        duration: number;
+        ease: readonly [0.4, 0, 1, 1];
+    };
+};
+type ToolMotionVariant = "executing" | "settled";
+interface ToolMotionProps {
+    children: ReactNode;
+    className?: string;
+    /** Stable key for AnimatePresence swaps (e.g. `running` → `complete`). */
+    motionKey: string;
+}
+/** Single-shot rise-from-below for tool / artifact rows. */
+declare function ToolMotion({ children, className, motionKey }: ToolMotionProps): react_jsx_runtime.JSX.Element;
+interface ToolPresenceProps {
+    presenceKey: string;
+    children: ReactNode;
+    className?: string;
+    /** Executing rows skip blur so the shimmer stays readable. */
+    variant?: ToolMotionVariant;
+}
+/** Wraps running ↔ complete (or other) tool states with a short crossfade. */
+declare function ToolPresence({ presenceKey, children, className, variant, }: ToolPresenceProps): react_jsx_runtime.JSX.Element;
+interface ToolBodyPresenceProps {
+    open: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Expanded tool trace — CSS grid row collapse for smooth contract + opacity.
+ * Avoids `AnimatePresence` exit lag when the body closes.
+ */
+declare function ToolBodyPresence({ open, children, className, }: ToolBodyPresenceProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Copy-paste this into a workforce agent system prompt (or append it to your
+ * blueprint's tool-result instructions) so the model knows which artifact
+ * payloads the chat UI can render.
+ *
+ * @example
+ * ```ts
+ * import { ARTIFACT_AGENT_INSTRUCTIONS } from "@timbal-ai/timbal-react";
+ *
+ * const systemPrompt = `${basePrompt}\n\n${ARTIFACT_AGENT_INSTRUCTIONS}`;
+ * ```
+ */
+declare const ARTIFACT_AGENT_INSTRUCTIONS: string;
+
+/**
+ * Render a `ui` artifact. Each instance gets its own local state seeded from
+ * `artifact.initialState`. Toggles, sliders, and `set` actions mutate this
+ * state via the reducer; bindings (`{ $bind: "path" }`) read from it.
+ *
+ * Host apps subscribe to `emit` actions via `<UiEventProvider>` from the
+ * registry module and extend the node palette via
+ * `<UiCustomNodeRegistryProvider>`.
+ */
+declare const UiArtifactView: FC<{
+    artifact: UiArtifact;
+}>;
+
+declare const UiNodeView: FC<{
+    node: UiNode;
+}>;
+
+/**
+ * Markdown fence languages we treat as artifact payloads. `timbal-artifact`
+ * is the canonical form; `timbal` is accepted as an alias because most
+ * frontier models drop the suffix when generating fenced blocks.
+ */
+declare const ARTIFACT_FENCE_LANGUAGES: ReadonlySet<string>;
+/**
+ * Returns true if the given fenced-code-block language should be rendered
+ * as an artifact instead of as a code block.
+ */
+declare function isArtifactFenceLanguage(language: string | undefined | null): boolean;
+/**
+ * Parse a tool result into an artifact, if possible. Strings are tried as
+ * JSON first. Timbal often wraps tool return values as
+ * `{ type: "text", text: "<json>" }` — we unwrap those before checking
+ * `type`. Returns `null` for results that don't look like artifacts.
+ */
+declare function parseArtifactFromToolResult(result: unknown): AnyArtifact | null;
+interface MarkdownArtifactMatch {
+    /** The artifact payload. */
+    artifact: AnyArtifact;
+    /** The raw fenced block, including its ``` fences. */
+    raw: string;
+    /** Start offset in the source string. */
+    start: number;
+    /** End offset (exclusive). */
+    end: number;
+}
+/**
+ * Find every `timbal-artifact` fenced block in a markdown string and return
+ * each parsed payload along with its source offset. Use the offsets to splice
+ * a renderer in place of the fence — see `splitMarkdownByArtifacts`.
+ */
+declare function findMarkdownArtifacts(markdown: string): MarkdownArtifactMatch[];
+type MarkdownSegment = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "artifact";
+    artifact: AnyArtifact;
+};
+/**
+ * Split a markdown string into alternating text/artifact segments, preserving
+ * order. Useful when rendering markdown with inline artifact placeholders —
+ * render each segment with the appropriate component.
+ */
+declare function splitMarkdownByArtifacts(markdown: string): MarkdownSegment[];
+
+/**
+ * Default `tools.Override` for assistant messages.
+ *
+ * Renders the tool result as a registered artifact when possible; otherwise
+ * falls back to the timeline `ToolFallback`. Wraps the artifact in
+ * `ToolMotion` so it shares the same rise-from-below polish as the rest of
+ * the chat surface.
+ */
+declare const ToolArtifactFallback: ToolCallMessagePartComponent;
+
+/**
+ * Shared chrome for built-in artifact renderers. Custom renderers don't have
+ * to use this — it's just a small visual baseline so charts, tables, and
+ * question widgets feel like a coherent set.
+ */
+declare const ArtifactCard: FC<{
+    title?: string;
+    kind?: string;
+    className?: string;
+    bodyClassName?: string;
+    toolbar?: ReactNode;
+    children: ReactNode;
+}>;
+
+/**
+ * Lightweight SVG chart for the four basic chart types. We deliberately don't
+ * pull in `recharts` or similar — most artifact charts are small and these
+ * render fine at the cost of a few hundred lines of SVG. Apps that need
+ * production-grade charting can register a custom renderer that wraps their
+ * preferred lib.
+ */
+declare const ChartArtifactView: FC<{
+    artifact: ChartArtifact;
+}>;
+
+/**
+ * In-thread choice widget. Single-select submits immediately on click;
+ * multi-select shows a confirm button. The answer is sent as a regular
+ * user message via the assistant-ui runtime so the agent treats it like
+ * any other reply.
+ */
+declare const QuestionArtifactView: FC<{
+    artifact: QuestionArtifact;
+}>;
+
+/**
+ * Renders HTML inside an iframe. When `sandboxed` is true (default), scripts
+ * and forms run in an isolated sandbox. Set `sandboxed: false` for fully
+ * unrestricted inline HTML — trusted content only.
+ */
+declare const HtmlArtifactView: FC<{
+    artifact: HtmlArtifact;
+}>;
+
+/**
+ * Default renderer used both for `{ type: "json" }` artifacts and as the
+ * fallback when no renderer is registered for a given type. Pretty-prints
+ * any JSON-serializable value.
+ */
+declare const JsonArtifactView: FC<{
+    artifact: JsonArtifact | AnyArtifact;
+}>;
+
+declare const TableArtifactView: FC<{
+    artifact: TableArtifact;
+}>;
+
 declare const UserMessageAttachments: FC;
 declare const ComposerAttachments: FC;
 declare const ComposerAddAttachment: FC;
 
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+/**
+ * Timbal V2 button design tokens.
+ *
+ * Mirrors the `timbal-platform` design language (`TimbalV2Button`) so chat
+ * surfaces built with the SDK feel identical to the Timbal Studio. Each record
+ * is keyed by variant or size and ships only Tailwind utility classes — no
+ * runtime JS — so consumers can compose them with `cn(...)` and add their own
+ * overrides without ejecting.
+ */
+type TimbalV2Variant = "primary" | "secondary" | "ghost" | "informative" | "destructive" | "link";
+type TimbalV2Size = "xs" | "sm" | "md" | "lg";
+declare const TIMBAL_V2_SIZE_HEIGHT: Record<TimbalV2Size, string>;
+declare const TIMBAL_V2_SIZE_ICON: Record<TimbalV2Size, string>;
+declare const TIMBAL_V2_SIZE_LABEL_PX: Record<TimbalV2Size, string>;
+/**
+ * Absolute gradient fill layer — scoped to the `group/tbv2` group so the
+ * hover/active states can be triggered without wrapping each button in
+ * dedicated state classes.
+ */
+declare const TIMBAL_V2_FILL: Record<TimbalV2Variant, string>;
+declare const TIMBAL_V2_LABEL: Record<TimbalV2Variant, string>;
+declare const TIMBAL_V2_BORDER: Record<TimbalV2Variant, string>;
+declare const TIMBAL_V2_SHADOW: Record<TimbalV2Variant, string>;
+/** Static pill surface — sidebars, badges, anywhere a button shape is needed without interaction. */
+declare const TIMBAL_V2_PILL_SURFACE = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
+/** Interactive secondary chrome for native controls beside v2 buttons (selects, search inputs). */
+declare const TIMBAL_V2_SECONDARY_CHROME = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] transition-[background-color,box-shadow,border-color] duration-200 ease-in-out hover:from-neutral-50/40 hover:to-neutral-100/60 active:from-neutral-100/65 active:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)] dark:hover:from-white/[0.07] dark:hover:to-white/[0.045] dark:active:from-white/[0.10] dark:active:to-white/[0.07]";
+
+interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
+    variant?: TimbalV2Variant;
+    size?: TimbalV2Size;
+    isIconOnly?: boolean;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+    /** When true, renders children as the underlying element (Radix Slot pattern). */
     asChild?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}
+/**
+ * Canonical Timbal pill button — layered absolute-fill span + relative label
+ * row scoped to `group/tbv2`. Mirrors `timbal-platform` `TimbalV2Button` so
+ * chat UIs built with the SDK feel identical to the Studio.
+ */
+declare const TimbalV2Button: React.ForwardRefExoticComponent<Omit<TimbalV2ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+interface TooltipIconButtonProps extends Omit<TimbalV2ButtonProps, "isIconOnly"> {
+    /** Visible tooltip + accessible label. Always required. */
     tooltip: string;
+    /** Tooltip placement. Default: "bottom". */
     side?: "top" | "bottom" | "left" | "right";
-};
+}
+/**
+ * Icon-only Timbal pill button with a tooltip. Used by every chat-surface
+ * toolbar (composer send/cancel, message action bar, scroll-to-bottom).
+ *
+ * Defaults to a soft `secondary` variant so it sits cleanly inside composers,
+ * message bubbles, and the action bar. Override via `variant`.
+ */
 declare const TooltipIconButton: React.ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 declare const ShikiSyntaxHighlighter: FC<SyntaxHighlighterProps>;
 
+type FetchFn = (url: string, options?: RequestInit) => Promise<Response>;
+interface UseWorkforcesOptions {
+    /** Base URL for API calls. Default: `/api`. */
+    baseUrl?: string;
+    /** Custom fetch (defaults to `authFetch` for token-auth flows). */
+    fetch?: FetchFn;
+    /**
+     * Pick the initial selected workforce. By default we prefer the first
+     * `type === "agent"` entry, falling back to the first item. Pass a custom
+     * resolver to override (e.g. remember the user's last choice).
+     */
+    pickInitial?: (items: WorkforceItem[]) => WorkforceItem | undefined;
+}
+interface UseWorkforcesResult {
+    workforces: WorkforceItem[];
+    /** Currently selected workforce identifier (id ?? uid ?? name). */
+    selectedId: string;
+    setSelectedId: (id: string) => void;
+    /** The full `WorkforceItem` for `selectedId`, if any. */
+    selected: WorkforceItem | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    /** Re-fetch the list. Resets `error`. */
+    refresh: () => Promise<void>;
+}
+/**
+ * Fetch the list of workforces exposed by the blueprint API and track a
+ * selection. Used to power `<WorkforceSelector />` but exported separately
+ * so apps can drive their own UI (e.g. a sidebar tree).
+ */
+declare function useWorkforces(options?: UseWorkforcesOptions): UseWorkforcesResult;
+
+interface WorkforceSelectorProps {
+    /** List of workforces to choose from. */
+    workforces: WorkforceItem[];
+    /** Currently selected workforce id. */
+    value: string;
+    /** Called when the user picks a different workforce. */
+    onChange: (id: string) => void;
+    /** Hide the selector when there's only one option. Default: true. */
+    hideWhenSingle?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+/**
+ * Minimal headless workforce picker. Wraps a styled native `<select>` so
+ * the SDK doesn't need to depend on `@radix-ui/react-select`, while still
+ * matching the Studio chrome (gradient pill, soft border, chevron).
+ *
+ * Apps that want a richer UI (search, descriptions, agent icons) can build
+ * their own using `useWorkforces()`.
+ */
+declare const WorkforceSelector: FC<WorkforceSelectorProps>;
+
+interface TimbalChatShellProps extends Omit<TimbalChatProps, "workforceId"> {
+    /**
+     * Pre-selected workforce id. When omitted, the shell fetches the workforce
+     * list from `{baseUrl}/workforce` and picks the first agent automatically.
+     */
+    workforceId?: string;
+    /** Branding rendered at the start of the header (logo, etc). */
+    brand?: ReactNode;
+    /** Extra content rendered at the end of the header (theme toggle, logout). */
+    headerActions?: ReactNode;
+    /** Hide the built-in workforce selector. Default: false. */
+    hideWorkforceSelector?: boolean;
+    /** Class for the outer flex container. */
+    className?: string;
+    /** Class for the header bar. */
+    headerClassName?: string;
+}
+/**
+ * Drop-in shell that wraps `TimbalChat` with the Studio playground chrome:
+ * floating topbar with brand + workforce selector + actions, soft gradient
+ * background, and the chat thread filling the remaining vertical space.
+ *
+ * Falls back to picking the first available workforce when `workforceId`
+ * isn't supplied.
+ */
+declare const TimbalChatShell: FC<TimbalChatShellProps>;
+
 interface SessionContextType {
     user: Session | null;
     loading: boolean;
@@ -130,6 +1032,73 @@ declare const refreshAccessToken: () => Promise<boolean>;
 declare const authFetch: (url: string, options?: RequestInit) => Promise<Response>;
 declare const fetchCurrentUser: () => Promise<Session | null>;
 
+/**
+ * Shared chrome class names + CSS variables for Timbal chat surfaces.
+ *
+ * These mirror `timbal-platform` `studioChrome.js` so the SDK ships the same
+ * design language out of the box. Class consts are pure strings (no runtime
+ * cost) and can be composed with `cn(...)` from `../utils`.
+ */
+
+declare const STUDIO_TOPBAR_GAP = "0.5rem";
+declare const STUDIO_TOPBAR_HEIGHT = "3rem";
+declare const STUDIO_PILL_HEIGHT = "2.5rem";
+declare const STUDIO_SIDEBAR_GAP = "0.5rem";
+declare const STUDIO_SIDEBAR_WIDTH = "3rem";
+declare const STUDIO_INSET_LEFT = "calc(0.5rem + 3rem)";
+/**
+ * Style object to spread on the chat shell root. Exposes the CSS variables
+ * referenced by topbar/sidebar helper classes so layouts stay self-contained.
+ */
+declare const studioChromeShellStyle: CSSProperties;
+declare const studioTopbarPillHeightClass = "h-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)]";
+declare const studioTopbarIconPillClass = "shrink-0 flex-none size-[var(--studio-chrome-pill-height)] min-h-[var(--studio-chrome-pill-height)] min-w-[var(--studio-chrome-pill-height)]";
+/** Soft playground gradient behind the message column. */
+declare const studioPlaygroundGradientClass = "bg-gradient-to-b from-neutral-200/60 via-neutral-100/30 to-background dark:from-zinc-800 dark:via-zinc-900 dark:to-zinc-950";
+/** Composer outer shell — rounded surface with focus-within affordances. */
+declare const studioComposeInputShellClass = "flex w-full flex-col rounded-2xl border border-neutral-200/60 bg-background shadow-lg shadow-black/5 outline-none transition-[box-shadow,border-color] focus-within:border-neutral-400/80 focus-within:ring-2 focus-within:ring-foreground/5 focus-within:shadow-xl focus-within:shadow-black/10 dark:border-white/12 dark:bg-zinc-900 dark:shadow-black/20 dark:focus-within:border-white/22 dark:focus-within:ring-0";
+/** Resting pill surface — sidebars, badges. */
+declare const studioPillSurfaceClass = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
+/** Interactive secondary chrome — select triggers, search shells. */
+declare const studioSecondaryChromeClass = "bg-gradient-to-b from-white to-neutral-50/70 border border-neutral-200/80 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] transition-[background-color,box-shadow,border-color] duration-200 ease-in-out hover:from-neutral-50/40 hover:to-neutral-100/60 active:from-neutral-100/65 active:to-neutral-200/65 dark:from-white/[0.05] dark:to-white/[0.025] dark:border-white/[0.08] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)] dark:hover:from-white/[0.07] dark:hover:to-white/[0.045] dark:active:from-white/[0.10] dark:active:to-white/[0.07]";
+/**
+ * Solid integration-card surface — used for in-thread tool / artifact cards
+ * so they read on the playground gradient.
+ */
+declare const studioIntegrationSurfaceSolid = "bg-white bg-gradient-to-b from-white to-neutral-50/70 shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.05)] dark:bg-zinc-900 dark:from-white/[0.05] dark:to-white/[0.025] dark:shadow-[0_1px_3px_rgba(0,0,0,0.22)]";
+declare const studioIntegrationBorder = "border border-neutral-200/80 dark:border-white/[0.08]";
+declare const studioIntegrationCardClass: string;
+declare const studioIntegrationIconTileClass: string;
+/**
+ * Full-width selectable row — used by `Suggestions` and any settings-style
+ * list cards. Mirrors `roleListRowSurfaceClass` in timbal-platform.
+ */
+declare const studioListRowButtonClass: string;
+/** Compose tool drawer / trace payload well — opaque so JSON reads on the gradient. */
+declare const studioComposerIoWellClass: string;
+/** Collapsible tool-call card shell. */
+declare const studioToolCardShellClass: string;
+declare const studioTimelineRowButtonClass = "group flex w-full min-w-0 cursor-pointer items-center justify-start rounded-md border-0 bg-transparent py-1 text-left shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+declare const studioTimelineTextClass = "text-xs font-normal leading-snug";
+declare const studioTimelineActionClass: string;
+/** Shimmer action word — text-transparent inherits its colour from the bg clip. */
+declare const studioTimelineShimmerActionClass: string;
+declare const studioTimelineDetailClass: string;
+declare function studioTimelineChevronClass(expanded: boolean): string;
+/** Padding for the expanded payload under a timeline toggle. */
+declare const studioTimelineBodyPadClass = "flex flex-col gap-2 pt-0.5 pb-0.5";
+declare const studioArtifactShellClass: string;
+declare const studioQuestionOptionClass = "flex w-full items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 text-left text-sm transition-[background-color,border-color,box-shadow] duration-200 hover:bg-neutral-100/80 dark:hover:bg-white/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2";
+declare const studioQuestionOptionSelectedClass: string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | "secondary" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime.JSX.Element;
 declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime.JSX.Element;
@@ -162,4 +1131,4 @@ declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, cla
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadWelcomeConfig, type ThreadWelcomeProps, TimbalChat, type TimbalChatProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, setAccessToken, setRefreshToken, useSession };
+export { ARTIFACT_AGENT_INSTRUCTIONS, ARTIFACT_FENCE_LANGUAGES, type AnyArtifact, ArtifactCard, type ArtifactRegistry, ArtifactRegistryProvider, type ArtifactRenderer, type ArtifactRendererProps, ArtifactView, AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, type ChartArtifact, ChartArtifactView, type ChatAttachment, type ChatMessage, Composer, ComposerAddAttachment, ComposerAttachments, type ComposerProps, type ContentPart, type CreateDefaultAttachmentAdapterOptions, type CreateUploadAttachmentAdapterOptions, DEFAULT_UPLOAD_ACCEPT, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type HtmlArtifact, HtmlArtifactView, type JsonArtifact, JsonArtifactView, type MarkdownArtifactMatch, type MarkdownSegment, MarkdownText, type QuestionArtifact, QuestionArtifactView, type QuestionOption, type ResolveAttachmentAdapterOptions, STUDIO_INSET_LEFT, STUDIO_PILL_HEIGHT, STUDIO_SIDEBAR_GAP, STUDIO_SIDEBAR_WIDTH, STUDIO_TOPBAR_GAP, STUDIO_TOPBAR_HEIGHT, type SendOptions, SessionProvider, Shimmer, Suggestions, type SuggestionsComponent, type SuggestionsSlotProps, type SuggestionsSource, ShikiSyntaxHighlighter as SyntaxHighlighter, TIMBAL_V2_BORDER, TIMBAL_V2_FILL, TIMBAL_V2_LABEL, TIMBAL_V2_PILL_SURFACE, TIMBAL_V2_SECONDARY_CHROME, TIMBAL_V2_SHADOW, TIMBAL_V2_SIZE_HEIGHT, TIMBAL_V2_SIZE_ICON, TIMBAL_V2_SIZE_LABEL_PX, type TableArtifact, TableArtifactView, type TextContentPart, type TextShimmerProps, type ThinkingContentPart, Thread, type ThreadArtifactsConfig, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadSuggestionsProps, type ThreadWelcomeConfig, type ThreadWelcomeProps, type TimbalArtifact, type TimbalAttachmentsConfig, type TimbalAttachmentsProp, TimbalChat, type TimbalChatProps, TimbalChatShell, type TimbalChatShellProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, type TimbalStreamApi, TimbalV2Button, type TimbalV2ButtonProps, type TimbalV2Size, type TimbalV2Variant, ToolArtifactFallback, ToolBodyPresence, type ToolCallContentPart, ToolFallback, ToolMotion, type ToolMotionVariant, ToolPresence, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, type UiAction, type UiArtifact, UiArtifactView, UiCustomNodeRegistryProvider, type UiEventEnvelope, UiEventProvider, type UiNode, UiNodeView, type UploadFetchFn, type UseTimbalStreamOptions, type UseWorkforcesOptions, type UseWorkforcesResult, UserMessageAttachments, WorkforceSelector, type WorkforceSelectorProps, authFetch, buttonVariants, clearTokens, cn, createDefaultAttachmentAdapter, createUploadAttachmentAdapter, defaultArtifactRenderers, fetchCurrentUser, findMarkdownArtifacts, getAccessToken, getPath, getRefreshToken, isArtifact, isArtifactFenceLanguage, isUiBinding, luxuryEase, parseArtifactFromToolResult, refreshAccessToken, resolveAttachmentAdapter, resolveBindable, setAccessToken, setPath, setRefreshToken, splitMarkdownByArtifacts, studioArtifactShellClass, studioChromeShellStyle, studioComposeInputShellClass, studioComposerIoWellClass, studioIntegrationBorder, studioIntegrationCardClass, studioIntegrationIconTileClass, studioIntegrationSurfaceSolid, studioListRowButtonClass, studioPillSurfaceClass, studioPlaygroundGradientClass, studioQuestionOptionClass, studioQuestionOptionSelectedClass, studioSecondaryChromeClass, studioTimelineActionClass, studioTimelineBodyPadClass, studioTimelineChevronClass, studioTimelineDetailClass, studioTimelineRowButtonClass, studioTimelineShimmerActionClass, studioTimelineTextClass, studioToolCardShellClass, studioTopbarIconPillClass, studioTopbarPillHeightClass, toolPresenceTransition, useArtifactRegistry, useResolvedSuggestions, useSession, useTimbalRuntime, useTimbalStream, useToolRunning, useUiCustomNodeRegistry, useUiDispatch, useUiEventEmitter, useUiState, useWorkforces };