@yourgpt/copilot-sdk 0.1.0

package/dist/ui/index.d.cts

@@ -0,0 +1,1143 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default from 'react';
+import { Components } from 'react-markdown';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as use_stick_to_bottom from 'use-stick-to-bottom';
+import { ClassValue } from 'clsx';
+
+interface LoaderProps {
+    variant?: "circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots";
+    size?: "sm" | "md" | "lg";
+    text?: string;
+    className?: string;
+}
+declare function Loader({ variant, size, text, className, }: LoaderProps): react_jsx_runtime.JSX.Element;
+
+type MarkdownProps = {
+    children: string;
+    id?: string;
+    className?: string;
+    components?: Partial<Components>;
+};
+declare function MarkdownComponent({ children, id, className, components, }: MarkdownProps): react_jsx_runtime.JSX.Element;
+declare const Markdown: React$1.MemoExoticComponent<typeof MarkdownComponent>;
+
+type CodeBlockProps = {
+    children?: React__default.ReactNode;
+    className?: string;
+} & React__default.HTMLProps<HTMLDivElement>;
+declare function CodeBlock({ children, className, ...props }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type FeedbackBarProps = {
+    className?: string;
+    title?: string;
+    icon?: React.ReactNode;
+    onHelpful?: () => void;
+    onNotHelpful?: () => void;
+    onClose?: () => void;
+};
+declare function FeedbackBar({ className, title, icon, onHelpful, onNotHelpful, onClose, }: FeedbackBarProps): react_jsx_runtime.JSX.Element;
+
+type ScrollButtonProps = {
+    className?: string;
+    variant?: VariantProps<typeof buttonVariants>["variant"];
+    size?: VariantProps<typeof buttonVariants>["size"];
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare function ScrollButton({ className, variant, size, ...props }: ScrollButtonProps): react_jsx_runtime.JSX.Element;
+
+type TooltipProviderProps = {
+    children: React__default.ReactNode;
+    delayDuration?: number;
+};
+declare function TooltipProvider({ children, delayDuration, }: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+type TooltipProps = {
+    children: React__default.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function Tooltip({ children, open, defaultOpen, onOpenChange }: TooltipProps): react_jsx_runtime.JSX.Element;
+type TooltipTriggerProps = {
+    children: React__default.ReactNode;
+    asChild?: boolean;
+    disabled?: boolean;
+} & React__default.ComponentPropsWithoutRef<"button">;
+declare function TooltipTrigger({ children, asChild, disabled, ...props }: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
+type TooltipContentProps = {
+    children: React__default.ReactNode;
+    className?: string;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    showArrow?: boolean;
+};
+declare function TooltipContent({ children, className, side, align, sideOffset, showArrow, }: TooltipContentProps): react_jsx_runtime.JSX.Element;
+
+type MessageProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLProps<HTMLDivElement>;
+declare const Message: ({ children, className, ...props }: MessageProps) => react_jsx_runtime.JSX.Element;
+type MessageAvatarProps = {
+    src: string;
+    alt: string;
+    fallback?: string;
+    delayMs?: number;
+    className?: string;
+};
+declare const MessageAvatar: ({ src, alt, fallback, delayMs, className, }: MessageAvatarProps) => react_jsx_runtime.JSX.Element;
+type MessageContentProps = {
+    children: React.ReactNode;
+    markdown?: boolean;
+    className?: string;
+    /** Font size variant: 'sm' (14px), 'base' (16px), 'lg' (18px) */
+    size?: "sm" | "base" | "lg";
+} & React.ComponentProps<typeof Markdown> & Omit<React.HTMLProps<HTMLDivElement>, "size">;
+declare const MessageContent: ({ children, markdown, className, size, ...props }: MessageContentProps) => react_jsx_runtime.JSX.Element;
+
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+type PromptInputProps = {
+    isLoading?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    maxHeight?: number | string;
+    onSubmit?: () => void;
+    children: React__default.ReactNode;
+    className?: string;
+    disabled?: boolean;
+} & React__default.ComponentProps<"div">;
+declare function PromptInput({ className, isLoading, maxHeight, value, onValueChange, onSubmit, children, disabled, onClick, ...props }: PromptInputProps): react_jsx_runtime.JSX.Element;
+type PromptInputTextareaProps = {
+    disableAutosize?: boolean;
+} & React__default.ComponentProps<typeof Textarea>;
+declare function PromptInputTextarea({ className, onKeyDown, disableAutosize, ...props }: PromptInputTextareaProps): react_jsx_runtime.JSX.Element;
+type PromptInputActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
+declare function PromptInputActions({ children, className, ...props }: PromptInputActionsProps): react_jsx_runtime.JSX.Element;
+type PromptInputActionProps = {
+    className?: string;
+    tooltip: React__default.ReactNode;
+    children: React__default.ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+};
+declare function PromptInputAction({ tooltip, children, className, side, }: PromptInputActionProps): react_jsx_runtime.JSX.Element;
+
+declare function useChatContainer(): {
+    isAtBottom: boolean;
+    scrollToBottom: use_stick_to_bottom.ScrollToBottom;
+};
+type ChatContainerRootProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+type ChatContainerContentProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+type ChatContainerScrollAnchorProps = {
+    className?: string;
+    ref?: React.RefObject<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function ChatContainerRoot({ children, className, ...props }: ChatContainerRootProps): react_jsx_runtime.JSX.Element;
+declare function ChatContainerContent({ children, className, ...props }: ChatContainerContentProps): react_jsx_runtime.JSX.Element;
+declare function ChatContainerScrollAnchor({ className, ...props }: ChatContainerScrollAnchorProps): react_jsx_runtime.JSX.Element;
+
+type SourceProps = {
+    href: string;
+    children: React.ReactNode;
+};
+declare function Source({ href, children }: SourceProps): react_jsx_runtime.JSX.Element;
+type SourceTriggerProps = {
+    label?: string | number;
+    showFavicon?: boolean;
+    className?: string;
+};
+declare function SourceTrigger({ label, showFavicon, className, }: SourceTriggerProps): react_jsx_runtime.JSX.Element;
+type SourceContentProps = {
+    title: string;
+    description: string;
+    className?: string;
+};
+declare function SourceContent({ title, description, className, }: SourceContentProps): react_jsx_runtime.JSX.Element;
+
+interface ReasoningProps {
+    children: React$1.ReactNode;
+    /** Whether content is currently streaming */
+    isStreaming?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Class name for the container */
+    className?: string;
+}
+/**
+ * Reasoning component - Collapsible container for AI thinking/reasoning content
+ *
+ * Auto-expands during streaming and collapses when complete.
+ *
+ * @example
+ * ```tsx
+ * <Reasoning isStreaming={isStreaming}>
+ *   <ReasoningTrigger>Thinking...</ReasoningTrigger>
+ *   <ReasoningContent>{thinkingText}</ReasoningContent>
+ * </Reasoning>
+ * ```
+ */
+declare function Reasoning({ children, isStreaming, open: controlledOpen, onOpenChange, defaultOpen, className, }: ReasoningProps): react_jsx_runtime.JSX.Element;
+interface ReasoningTriggerProps {
+    children: React$1.ReactNode;
+    className?: string;
+}
+/**
+ * Clickable trigger to expand/collapse reasoning content
+ */
+declare function ReasoningTrigger({ children, className, }: ReasoningTriggerProps): react_jsx_runtime.JSX.Element;
+interface ReasoningContentProps {
+    children: React$1.ReactNode;
+    /** Render content as markdown */
+    markdown?: boolean;
+    /** Class name for the content */
+    className?: string;
+}
+/**
+ * Collapsible content area for reasoning text
+ */
+declare function ReasoningContent({ children, markdown, className, }: ReasoningContentProps): react_jsx_runtime.JSX.Element;
+interface SimpleReasoningProps {
+    /** The reasoning/thinking content */
+    content: string;
+    /** Whether content is streaming */
+    isStreaming?: boolean;
+    /** Label when streaming */
+    streamingLabel?: string;
+    /** Label when collapsed */
+    collapsedLabel?: string;
+    /** Render as markdown */
+    markdown?: boolean;
+    /** Class name */
+    className?: string;
+}
+/**
+ * Simple reasoning display with default trigger labels
+ *
+ * @example
+ * ```tsx
+ * <SimpleReasoning
+ *   content={message.thinking}
+ *   isStreaming={isLoading}
+ * />
+ * ```
+ */
+declare function SimpleReasoning({ content, isStreaming, streamingLabel, collapsedLabel, markdown, className, }: SimpleReasoningProps): react_jsx_runtime.JSX.Element | null;
+
+type ToolStepStatus = "pending" | "executing" | "completed" | "error" | "failed" | "rejected";
+interface ToolStepData {
+    id: string;
+    name: string;
+    args?: Record<string, unknown>;
+    status: ToolStepStatus;
+    result?: {
+        success: boolean;
+        message?: string;
+        error?: string;
+        data?: unknown;
+    };
+    error?: string;
+    /** Human-readable title (resolved from tool definition) */
+    title?: string;
+    /** Title shown while executing */
+    executingTitle?: string;
+    /** Title shown after completion */
+    completedTitle?: string;
+}
+interface ToolStepProps {
+    step: ToolStepData;
+    /** Show connecting line to next step */
+    showLine?: boolean;
+    /** Override debug mode from context */
+    debug?: boolean;
+    /** Expanded by default (for debug mode) */
+    defaultExpanded?: boolean;
+    className?: string;
+}
+/**
+ * Individual tool step with shimmer loading, status icons, and debug mode
+ */
+declare function ToolStep({ step, showLine, debug: debugProp, defaultExpanded, className, }: ToolStepProps): react_jsx_runtime.JSX.Element;
+interface ToolStepsProps {
+    steps: ToolStepData[];
+    /** Override debug mode from context */
+    debug?: boolean;
+    /** Expand all by default (in debug mode) */
+    defaultExpanded?: boolean;
+    /** Class name */
+    className?: string;
+}
+/**
+ * Compact tool steps display with shimmer loading and debug mode
+ *
+ * @example
+ * ```tsx
+ * <ToolSteps
+ *   steps={[
+ *     { id: "1", name: "get_weather", status: "completed", title: "Get weather" },
+ *     { id: "2", name: "navigate", status: "executing", executingTitle: "Navigating..." },
+ *   ]}
+ *   debug={true}
+ * />
+ * ```
+ */
+declare function ToolSteps({ steps, debug, defaultExpanded, className, }: ToolStepsProps): react_jsx_runtime.JSX.Element | null;
+interface InlineToolStepsProps {
+    steps: ToolStepData[];
+    /** Max steps to show before collapsing */
+    maxVisible?: number;
+    className?: string;
+}
+/**
+ * Ultra-compact inline display showing just status icons
+ *
+ * @example
+ * ```tsx
+ * <InlineToolSteps steps={toolExecutions} />
+ * // Shows: ✓ ✓ ⟳ ○
+ * ```
+ */
+declare function InlineToolSteps({ steps, maxVisible, className, }: InlineToolStepsProps): react_jsx_runtime.JSX.Element | null;
+
+type ConfirmationState$1 = "pending" | "approved" | "rejected";
+interface ConfirmationProps {
+    children?: React$1.ReactNode;
+    /** Current approval state */
+    state?: ConfirmationState$1;
+    /** Message to display */
+    message?: string;
+    /** Called when user approves */
+    onApprove?: () => void;
+    /** Called when user rejects */
+    onReject?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Confirmation component - Tool approval/rejection UI
+ *
+ * Similar to Vercel AI SDK's Confirmation component for human-in-the-loop patterns.
+ *
+ * @example
+ * ```tsx
+ * <Confirmation
+ *   state={execution.approvalStatus}
+ *   message="This tool wants to delete a file."
+ *   onApprove={() => approveToolExecution(execution.id)}
+ *   onReject={() => rejectToolExecution(execution.id)}
+ * >
+ *   <ConfirmationPending>
+ *     <ConfirmationMessage />
+ *     <ConfirmationActions />
+ *   </ConfirmationPending>
+ *   <ConfirmationApproved />
+ *   <ConfirmationRejected />
+ * </Confirmation>
+ * ```
+ */
+declare function Confirmation({ children, state, message, onApprove, onReject, className, }: ConfirmationProps): react_jsx_runtime.JSX.Element;
+interface ConfirmationPendingProps {
+    children: React$1.ReactNode;
+    className?: string;
+}
+/**
+ * Renders children only when state is "pending"
+ */
+declare function ConfirmationPending({ children, className, }: ConfirmationPendingProps): react_jsx_runtime.JSX.Element | null;
+interface ConfirmationApprovedProps {
+    children?: React$1.ReactNode;
+    className?: string;
+}
+/**
+ * Renders children (or default approved message) when state is "approved"
+ */
+declare function ConfirmationApproved({ children, className, }: ConfirmationApprovedProps): react_jsx_runtime.JSX.Element | null;
+interface ConfirmationRejectedProps {
+    children?: React$1.ReactNode;
+    className?: string;
+}
+/**
+ * Renders children (or default rejected message) when state is "rejected"
+ */
+declare function ConfirmationRejected({ children, className, }: ConfirmationRejectedProps): react_jsx_runtime.JSX.Element | null;
+interface ConfirmationMessageProps {
+    children?: React$1.ReactNode;
+    className?: string;
+}
+/**
+ * Displays the approval message
+ */
+declare function ConfirmationMessage({ children, className, }: ConfirmationMessageProps): react_jsx_runtime.JSX.Element;
+interface ConfirmationActionsProps {
+    children?: React$1.ReactNode;
+    className?: string;
+    /** Label for reject button */
+    rejectLabel?: string;
+    /** Label for approve button */
+    approveLabel?: string;
+}
+/**
+ * Renders approval/rejection action buttons
+ */
+declare function ConfirmationActions({ children, className, rejectLabel, approveLabel, }: ConfirmationActionsProps): react_jsx_runtime.JSX.Element;
+interface SimpleConfirmationProps {
+    /** Current approval state */
+    state: ConfirmationState$1;
+    /** Message to display */
+    message?: string;
+    /** Called when user approves */
+    onApprove?: () => void;
+    /** Called when user rejects */
+    onReject?: () => void;
+    /** Label for reject button */
+    rejectLabel?: string;
+    /** Label for approve button */
+    approveLabel?: string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * SimpleConfirmation - Convenience wrapper with all states built-in
+ *
+ * @example
+ * ```tsx
+ * <SimpleConfirmation
+ *   state={execution.approvalStatus === "required" ? "pending" : execution.approvalStatus}
+ *   message="Delete file /tmp/example.txt?"
+ *   onApprove={() => approveToolExecution(execution.id)}
+ *   onReject={() => rejectToolExecution(execution.id)}
+ * />
+ * ```
+ */
+declare function SimpleConfirmation({ state, message, onApprove, onReject, rejectLabel, approveLabel, className, }: SimpleConfirmationProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Permission level for tool execution
+ */
+type PermissionLevel = "ask" | "allow_always" | "deny_always" | "session";
+/**
+ * Permission option for dropdown/selection
+ */
+interface PermissionOption {
+    value: PermissionLevel;
+    label: string;
+    description?: string;
+}
+/**
+ * Default permission options
+ */
+declare const DEFAULT_PERMISSION_OPTIONS: PermissionOption[];
+type ConfirmationState = "pending" | "approved" | "rejected";
+interface PermissionConfirmationProps {
+    /** Current state: pending, approved, or rejected */
+    state: ConfirmationState;
+    /** Tool name */
+    toolName?: string;
+    /** Message to display */
+    message?: string;
+    /** Called when user approves with permission level */
+    onApprove?: (permissionLevel: PermissionLevel) => void;
+    /** Called when user rejects with permission level */
+    onReject?: (permissionLevel?: PermissionLevel) => void;
+    /** Show permission options (default: true) */
+    showPermissionOptions?: boolean;
+    /** Available permission options */
+    permissionOptions?: PermissionOption[];
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * PermissionConfirmation - Enhanced confirmation with permission level selection
+ *
+ * Shows a confirmation dialog for tool approval with options to remember the choice.
+ *
+ * @example
+ * ```tsx
+ * <PermissionConfirmation
+ *   state="pending"
+ *   toolName="capture_screenshot"
+ *   message="Take a screenshot of the current screen?"
+ *   onApprove={(level) => approveToolExecution(tool.id, level)}
+ *   onReject={(level) => rejectToolExecution(tool.id, undefined, level)}
+ * />
+ * ```
+ */
+declare function PermissionConfirmation({ state, toolName, message, onApprove, onReject, showPermissionOptions, permissionOptions, className, }: PermissionConfirmationProps): react_jsx_runtime.JSX.Element;
+interface CompactPermissionConfirmationProps {
+    /** Current state: pending, approved, or rejected */
+    state: ConfirmationState;
+    /** Message to display */
+    message?: string;
+    /** Called when user approves */
+    onApprove?: (permissionLevel: PermissionLevel) => void;
+    /** Called when user rejects */
+    onReject?: (permissionLevel?: PermissionLevel) => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * CompactPermissionConfirmation - Simpler version with "Don't ask again" checkbox
+ *
+ * @example
+ * ```tsx
+ * <CompactPermissionConfirmation
+ *   state="pending"
+ *   message="Take a screenshot?"
+ *   onApprove={(level) => approveToolExecution(tool.id, level)}
+ *   onReject={(level) => rejectToolExecution(tool.id, undefined, level)}
+ * />
+ * ```
+ */
+declare function CompactPermissionConfirmation({ state, message, onApprove, onReject, className, }: CompactPermissionConfirmationProps): react_jsx_runtime.JSX.Element;
+
+type FollowUpProps = {
+    /** Follow-up questions to display */
+    questions: string[];
+    /** Called when a follow-up is clicked */
+    onSelect: (question: string) => void;
+    /** Custom class for container */
+    className?: string;
+    /** Custom class for buttons */
+    buttonClassName?: string;
+};
+/**
+ * Parse follow-up questions from message content
+ * Format: [FOLLOWUP: question1 | question2 | question3]
+ */
+declare function parseFollowUps(content: string): {
+    cleanContent: string;
+    followUps: string[];
+};
+/**
+ * Follow-up questions component
+ * Displays clickable chips for suggested follow-up actions
+ */
+declare function FollowUpQuestions({ questions, onSelect, className, buttonClassName, }: FollowUpProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * SDK State for DevLogger
+ */
+interface DevLoggerState {
+    chat: {
+        isLoading: boolean;
+        messageCount: number;
+        threadId: string;
+        error: string | null;
+    };
+    tools: {
+        isEnabled: boolean;
+        isCapturing: boolean;
+        pendingConsent: boolean;
+    };
+    agentLoop: {
+        toolExecutions: Array<{
+            id: string;
+            name: string;
+            status: string;
+            approvalStatus: string;
+        }>;
+        pendingApprovals: number;
+        iteration: number;
+        maxIterations: number;
+    };
+    registered: {
+        tools: Array<{
+            name: string;
+            location: string;
+        }>;
+        actions: Array<{
+            name: string;
+        }>;
+        contextCount: number;
+    };
+    permissions: {
+        stored: Array<{
+            toolName: string;
+            level: string;
+        }>;
+        loaded: boolean;
+    };
+    config: {
+        provider: string;
+        model: string;
+        runtimeUrl: string;
+    };
+}
+interface DevLoggerProps {
+    /** SDK state to display */
+    state: DevLoggerState;
+    /** Position of the floating button */
+    position?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * DevLogger - Floating debug panel for SDK development
+ *
+ * Shows a floating button that opens a modal with all SDK state
+ * for debugging purposes.
+ */
+declare function DevLogger({ state, position, className, }: DevLoggerProps): react_jsx_runtime.JSX.Element;
+
+type CapabilityType = "vision" | "tools" | "thinking" | "streaming" | "pdf" | "audio" | "video" | "json";
+interface CapabilityBadgeProps {
+    /** Capability type to display */
+    type: CapabilityType;
+    /** Whether the capability is supported */
+    supported?: boolean;
+    /** Show label text next to icon */
+    showLabel?: boolean;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Badge showing a model capability with icon
+ *
+ * @example
+ * ```tsx
+ * <CapabilityBadge type="vision" supported />
+ * <CapabilityBadge type="audio" supported={false} />
+ * ```
+ */
+declare function CapabilityBadge({ type, supported, showLabel, size, className, }: CapabilityBadgeProps): react_jsx_runtime.JSX.Element;
+interface CapabilityListProps {
+    /** Capabilities object */
+    capabilities: {
+        supportsVision?: boolean;
+        supportsTools?: boolean;
+        supportsThinking?: boolean;
+        supportsStreaming?: boolean;
+        supportsPDF?: boolean;
+        supportsAudio?: boolean;
+        supportsVideo?: boolean;
+        supportsJsonMode?: boolean;
+    };
+    /** Show labels */
+    showLabels?: boolean;
+    /** Only show supported capabilities */
+    onlySupported?: boolean;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Display a list of capability badges
+ *
+ * @example
+ * ```tsx
+ * const { capabilities } = useCapabilities();
+ * <CapabilityList capabilities={capabilities} />
+ * ```
+ */
+declare function CapabilityList({ capabilities, showLabels, onlySupported, size, className, }: CapabilityListProps): react_jsx_runtime.JSX.Element | null;
+
+interface ModelOption {
+    /** Model ID */
+    id: string;
+    /** Display name */
+    name?: string;
+    /** Provider name */
+    provider?: string;
+    /** Model capabilities (optional, for showing badges) */
+    capabilities?: {
+        supportsVision?: boolean;
+        supportsTools?: boolean;
+        supportsThinking?: boolean;
+        supportsStreaming?: boolean;
+        supportsPDF?: boolean;
+        supportsAudio?: boolean;
+        supportsVideo?: boolean;
+        supportsJsonMode?: boolean;
+    };
+}
+interface ProviderGroup {
+    /** Provider name */
+    name: string;
+    /** Provider display label */
+    label?: string;
+    /** Models in this provider */
+    models: ModelOption[];
+}
+interface ModelSelectorProps {
+    /** Currently selected model ID */
+    value?: string;
+    /** Called when selection changes */
+    onChange?: (modelId: string, provider?: string) => void;
+    /** Models grouped by provider */
+    providers?: ProviderGroup[];
+    /** Flat list of models (alternative to providers) */
+    models?: ModelOption[];
+    /** Current capabilities (for showing in header) */
+    currentCapabilities?: ModelOption["capabilities"];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Show capability badges */
+    showCapabilities?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Model selector dropdown with provider grouping
+ *
+ * @example
+ * ```tsx
+ * const { provider, model, supportedModels } = useCapabilities();
+ *
+ * <ModelSelector
+ *   value={model}
+ *   onChange={(modelId) => console.log('Selected:', modelId)}
+ *   providers={[
+ *     {
+ *       name: 'openai',
+ *       label: 'OpenAI',
+ *       models: [
+ *         { id: 'gpt-4o', name: 'GPT-4o' },
+ *         { id: 'gpt-4o-mini', name: 'GPT-4o Mini' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function ModelSelector({ value, onChange, providers, models, currentCapabilities, placeholder, disabled, size, showCapabilities, className, }: ModelSelectorProps): react_jsx_runtime.JSX.Element;
+interface SimpleModelSelectorProps {
+    /** Currently selected model ID */
+    value?: string;
+    /** Called when selection changes */
+    onChange?: (modelId: string) => void;
+    /** List of model IDs */
+    models: string[];
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Simple native select for model selection
+ *
+ * @example
+ * ```tsx
+ * const { model, supportedModels } = useCapabilities();
+ *
+ * <SimpleModelSelector
+ *   value={model}
+ *   onChange={(id) => console.log('Selected:', id)}
+ *   models={supportedModels}
+ * />
+ * ```
+ */
+declare function SimpleModelSelector({ value, onChange, models, disabled, className, }: SimpleModelSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface CopilotUIConfig {
+    /**
+     * Debug mode - shows JSON args/results in collapsible sections
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Default expanded state for debug content
+     * @default false
+     */
+    defaultDebugExpanded?: boolean;
+}
+interface CopilotUIContextValue extends CopilotUIConfig {
+    /** Computed: whether debug mode is active */
+    isDebug: boolean;
+}
+/**
+ * Hook to access CopilotUI configuration
+ *
+ * Returns defaults if no provider is present (allows standalone component usage)
+ */
+declare function useCopilotUI(): CopilotUIContextValue;
+interface CopilotUIProviderProps extends CopilotUIConfig {
+    children: React$1.ReactNode;
+}
+/**
+ * Provider for global UI configuration (debug mode, etc.)
+ *
+ * @example
+ * ```tsx
+ * <CopilotUIProvider debug={process.env.NODE_ENV === "development"}>
+ *   <Chat messages={messages} />
+ * </CopilotUIProvider>
+ * ```
+ */
+declare function CopilotUIProvider({ children, debug, defaultDebugExpanded, }: CopilotUIProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Tool execution status
+ */
+type ToolExecutionStatus = "pending" | "executing" | "completed" | "error" | "failed" | "rejected";
+/**
+ * Tool approval status (for human-in-the-loop)
+ */
+type ToolApprovalStatus = "none" | "required" | "approved" | "rejected";
+/**
+ * Tool execution data
+ */
+interface ToolExecutionData {
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+    status: ToolExecutionStatus;
+    result?: {
+        success: boolean;
+        message?: string;
+        error?: string;
+        data?: unknown;
+    };
+    error?: string;
+    timestamp: number;
+    duration?: number;
+    /** Approval status for human-in-the-loop tools */
+    approvalStatus?: ToolApprovalStatus;
+    /** Message shown in approval UI */
+    approvalMessage?: string;
+}
+
+/**
+ * Message attachment (images, files, etc.)
+ *
+ * Attachments can be stored as:
+ * - Base64 data (free tier, embedded in message)
+ * - URL (premium cloud storage, lighter payload)
+ */
+type MessageAttachment = {
+    /** Type of attachment */
+    type: "image" | "file" | "audio" | "video";
+    /** Base64 data (for embedded attachments) */
+    data?: string;
+    /** URL for cloud-stored attachments */
+    url?: string;
+    /** MIME type */
+    mimeType: string;
+    /** Optional filename */
+    filename?: string;
+};
+type ChatMessage = {
+    id: string;
+    role: "user" | "assistant" | "system" | "tool";
+    content: string;
+    /** Thinking/reasoning content (for models with extended thinking) */
+    thinking?: string;
+    /** Tool executions associated with this message */
+    toolExecutions?: ToolExecutionData[];
+    /** Attachments (images, files) */
+    attachments?: MessageAttachment[];
+    /** Tool call ID - for tool result messages (links to assistant's tool_calls) */
+    tool_call_id?: string;
+    /** Tool calls made by assistant */
+    tool_calls?: Array<{
+        id: string;
+        type: "function";
+        function: {
+            name: string;
+            arguments: string;
+        };
+    }>;
+};
+
+/**
+ * Props passed to custom tool renderer components
+ *
+ * @example
+ * ```tsx
+ * import type { ToolRendererProps } from '@yourgpt/copilot-sdk-ui';
+ *
+ * function WeatherCard({ execution }: ToolRendererProps) {
+ *   if (execution.status !== 'completed') {
+ *     return <div>Loading...</div>;
+ *   }
+ *   const { city, temperature } = execution.result;
+ *   return <div>{city}: {temperature}°</div>;
+ * }
+ * ```
+ */
+interface ToolRendererProps {
+    execution: {
+        /** Unique execution ID */
+        id: string;
+        /** Tool name (matches key in toolRenderers) */
+        name: string;
+        /** Arguments passed to the tool */
+        args: Record<string, unknown>;
+        /** Current execution status */
+        status: "pending" | "executing" | "completed" | "error" | "failed" | "rejected";
+        /** Tool result (available when status is 'completed') */
+        result?: unknown;
+        /** Error message (available when status is 'error' or 'failed') */
+        error?: string;
+        /** Approval status for tools requiring confirmation */
+        approvalStatus?: ToolApprovalStatus;
+    };
+}
+/**
+ * Map of tool names to their custom renderer components
+ *
+ * @example
+ * ```tsx
+ * const toolRenderers: ToolRenderers = {
+ *   get_weather: WeatherCard,
+ *   get_chart: ChartCard,
+ * };
+ * ```
+ */
+type ToolRenderers = Record<string, React__default.ComponentType<ToolRendererProps>>;
+type ChatProps = {
+    /** Messages to display */
+    messages?: ChatMessage[];
+    /** Called when user sends a message (with optional attachments) */
+    onSendMessage?: (message: string, attachments?: MessageAttachment[]) => void;
+    /** Called when user stops generation */
+    onStop?: () => void;
+    /** Whether AI is currently generating */
+    isLoading?: boolean;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Custom welcome message when no messages */
+    welcomeMessage?: React__default.ReactNode;
+    /** Title shown in header (if showHeader is true) */
+    title?: string;
+    /** Show header bar with title and close button */
+    showHeader?: boolean;
+    /** Called when close button is clicked */
+    onClose?: () => void;
+    /** Show powered by footer (free tier) */
+    showPoweredBy?: boolean;
+    /** Show user avatar (default: false) */
+    showUserAvatar?: boolean;
+    /** User avatar config */
+    userAvatar?: {
+        src?: string;
+        fallback?: string;
+    };
+    /** Assistant avatar config */
+    assistantAvatar?: {
+        src?: string;
+        fallback?: string;
+    };
+    /** Loader variant for typing indicator */
+    loaderVariant?: "circular" | "classic" | "dots" | "pulse" | "typing";
+    /** Font size for messages: 'sm' (14px), 'base' (16px), 'lg' (18px) */
+    fontSize?: "sm" | "base" | "lg";
+    /** Maximum file size in bytes (default: 5MB) */
+    maxFileSize?: number;
+    /** Allowed file types (MIME types or wildcards like "image/*") */
+    allowedFileTypes?: string[];
+    /** Whether attachments are supported (shows/hides attach button) */
+    attachmentsEnabled?: boolean;
+    /** Tooltip text when attachments are disabled */
+    attachmentsDisabledTooltip?: string;
+    /**
+     * Custom attachment processor (e.g., for cloud storage upload)
+     * If provided, uses this instead of default base64 conversion.
+     * @param file - The file to process
+     * @returns Promise<MessageAttachment> - The processed attachment (URL-based or base64)
+     */
+    processAttachment?: (file: File) => Promise<MessageAttachment>;
+    /** Quick reply suggestions */
+    suggestions?: string[];
+    /** Called when a suggestion is clicked */
+    onSuggestionClick?: (suggestion: string) => void;
+    /**
+     * Show AI-generated follow-up questions below the last message
+     * AI should include them in format: [FOLLOWUP: Q1? | Q2? | Q3?]
+     * @default true
+     */
+    showFollowUps?: boolean;
+    /** Custom class for follow-up container */
+    followUpClassName?: string;
+    /** Custom class for follow-up buttons */
+    followUpButtonClassName?: string;
+    /** Whether waiting for server after tool completion (shows "Continuing..." loader) */
+    isProcessing?: boolean;
+    /**
+     * Custom renderers for tool results (Generative UI)
+     *
+     * Map tool names to React components that render their results.
+     * When a tool execution matches a key, the custom component is rendered
+     * instead of the default ToolSteps display.
+     *
+     * @example
+     * ```tsx
+     * <Chat
+     *   toolRenderers={{
+     *     get_weather: WeatherCard,
+     *     get_chart: ChartCard,
+     *   }}
+     * />
+     * ```
+     */
+    toolRenderers?: ToolRenderers;
+    /** Called when user approves a tool execution */
+    onApproveToolExecution?: (executionId: string, permissionLevel?: PermissionLevel) => void;
+    /** Called when user rejects a tool execution */
+    onRejectToolExecution?: (executionId: string, reason?: string, permissionLevel?: PermissionLevel) => void;
+    /** Custom message renderer */
+    renderMessage?: (message: ChatMessage, index: number) => React__default.ReactNode;
+    /** Custom input renderer (replaces entire input area) */
+    renderInput?: () => React__default.ReactNode;
+    /** Custom header renderer (replaces entire header) */
+    renderHeader?: () => React__default.ReactNode;
+    /** Class name for root container (use for sizing) */
+    className?: string;
+    /** Granular class names for sub-components */
+    classNames?: {
+        root?: string;
+        header?: string;
+        container?: string;
+        messageList?: string;
+        userMessage?: string;
+        assistantMessage?: string;
+        input?: string;
+        suggestions?: string;
+        footer?: string;
+    };
+};
+
+declare function Chat({ messages, onSendMessage, onStop, isLoading, placeholder, welcomeMessage, title, showHeader, onClose, showPoweredBy, showUserAvatar, userAvatar, assistantAvatar, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, processAttachment: processAttachmentProp, suggestions, onSuggestionClick, isProcessing, toolRenderers, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, renderMessage, renderInput, renderHeader, className, classNames, }: ChatProps): react_jsx_runtime.JSX.Element;
+
+interface ToolExecutionMessageProps {
+    executions: ToolExecutionData[];
+    assistantAvatar?: {
+        src?: string;
+        fallback?: string;
+    };
+    onApprove?: (executionId: string, permissionLevel?: PermissionLevel) => void;
+    onReject?: (executionId: string, reason?: string, permissionLevel?: PermissionLevel) => void;
+    className?: string;
+}
+/**
+ * Standalone tool execution message shown during agentic loop
+ * Displays tool calls with status, progress, and approval UI
+ */
+declare function ToolExecutionMessage({ executions, assistantAvatar, onApprove, onReject, className, }: ToolExecutionMessageProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Props for CopilotChat - auto-connects to CopilotProvider context
+ * No need to pass messages, sendMessage, etc. - handled internally
+ */
+type CopilotChatProps = Omit<ChatProps, "messages" | "onSendMessage" | "onStop" | "isLoading" | "isProcessing" | "onApproveToolExecution" | "onRejectToolExecution" | "processAttachment">;
+/**
+ * CopilotChat - Auto-connected chat component
+ *
+ * Automatically connects to CopilotProvider context.
+ * No need to use hooks or pass messages - everything is handled internally.
+ *
+ * @example
+ * ```tsx
+ * import { CopilotProvider } from '../../react';
+ * import { CopilotChat } from '@yourgpt/copilot-sdk-ui';
+ *
+ * function App() {
+ *   return (
+ *     <CopilotProvider runtimeUrl="/api/chat">
+ *       <CopilotChat
+ *         title="AI Assistant"
+ *         placeholder="Ask anything..."
+ *       />
+ *     </CopilotProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Generative UI with custom tool renderers
+ * ```tsx
+ * import { CopilotChat, type ToolRendererProps } from '@yourgpt/copilot-sdk-ui';
+ *
+ * function WeatherCard({ execution }: ToolRendererProps) {
+ *   if (execution.status !== 'completed') return <div>Loading...</div>;
+ *   return <div>{execution.result.city}: {execution.result.temperature}°</div>;
+ * }
+ *
+ * <CopilotChat
+ *   toolRenderers={{
+ *     get_weather: WeatherCard,
+ *   }}
+ * />
+ * ```
+ */
+declare function CopilotChat(props: CopilotChatProps): react_jsx_runtime.JSX.Element;
+declare const ConnectedChat: typeof CopilotChat;
+type ConnectedChatProps = CopilotChatProps;
+
+type PoweredByProps = {
+    className?: string;
+    showLogo?: boolean;
+};
+declare function PoweredBy({ className, showLogo }: PoweredByProps): react_jsx_runtime.JSX.Element;
+
+declare function SendIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function StopIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CloseIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ChevronDownIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ChevronUpIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CopyIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CheckIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ThumbsUpIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ThumbsDownIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function RefreshIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function UserIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function BotIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function XIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function AlertTriangleIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, type CapabilityBadgeProps, CapabilityList, type CapabilityListProps, type CapabilityType, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, type ChatMessage, type ChatProps, CheckIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon, CodeBlock, CompactPermissionConfirmation, type CompactPermissionConfirmationProps, Confirmation, ConfirmationActions, type ConfirmationActionsProps, ConfirmationApproved, type ConfirmationApprovedProps, ConfirmationMessage, type ConfirmationMessageProps, ConfirmationPending, type ConfirmationPendingProps, type ConfirmationProps, ConfirmationRejected, type ConfirmationRejectedProps, type ConfirmationState$1 as ConfirmationState, ConnectedChat, type ConnectedChatProps, CopilotChat, type CopilotChatProps, type CopilotUIConfig, type CopilotUIContextValue, CopilotUIProvider, type CopilotUIProviderProps, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, type DevLoggerProps, type DevLoggerState, FeedbackBar, type FollowUpProps, FollowUpQuestions, InlineToolSteps, type InlineToolStepsProps, Loader, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, type ModelOption, ModelSelector, type ModelSelectorProps, PermissionConfirmation, type PermissionConfirmationProps, type PermissionLevel, type PermissionOption, PoweredBy, type PoweredByProps, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, type ProviderGroup, Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, RefreshIcon, ScrollButton, SendIcon, SimpleConfirmation, type SimpleConfirmationProps, SimpleModelSelector, type SimpleModelSelectorProps, SimpleReasoning, type SimpleReasoningProps, Source, SourceContent, SourceTrigger, StopIcon, ThumbsDownIcon, ThumbsUpIcon, ToolExecutionMessage, type ToolRendererProps, type ToolRenderers, ToolStep, type ToolStepData, type ToolStepProps, type ToolStepStatus, ToolSteps, type ToolStepsProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, UserIcon, XIcon, cn, parseFollowUps, useChatContainer, useCopilotUI };