@datalayer/agent-runtimes 0.0.2

package/lib/components/ui/tooltip.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@/lib/utils';
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/lib/components/vercel-ai-elements/artifact.d.ts

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/button';
+import { type LucideIcon } from 'lucide-react';
+import type { ComponentProps, HTMLAttributes } from 'react';
+export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+export declare const Artifact: ({ className, ...props }: ArtifactProps) => import("react/jsx-runtime").JSX.Element;
+export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+export declare const ArtifactHeader: ({ className, ...props }: ArtifactHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type ArtifactCloseProps = ComponentProps<typeof Button>;
+export declare const ArtifactClose: ({ className, children, size, variant, ...props }: ArtifactCloseProps) => import("react/jsx-runtime").JSX.Element;
+export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+export declare const ArtifactTitle: ({ className, ...props }: ArtifactTitleProps) => import("react/jsx-runtime").JSX.Element;
+export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+export declare const ArtifactDescription: ({ className, ...props }: ArtifactDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+export declare const ArtifactActions: ({ className, ...props }: ArtifactActionsProps) => import("react/jsx-runtime").JSX.Element;
+export type ArtifactActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+    icon?: LucideIcon;
+};
+export declare const ArtifactAction: ({ tooltip, label, icon: Icon, children, className, size, variant, ...props }: ArtifactActionProps) => import("react/jsx-runtime").JSX.Element;
+export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const ArtifactContent: ({ className, ...props }: ArtifactContentProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/vercel-ai-elements/artifact.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { XIcon } from 'lucide-react';
+export const Artifact = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm', className), ...props }));
+export const ArtifactHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex items-center justify-between border-b bg-muted/50 px-4 py-3', className), ...props }));
+export const ArtifactClose = ({ className, children, size = 'sm', variant = 'ghost', ...props }) => (_jsxs(Button, { className: cn('size-8 p-0 text-muted-foreground hover:text-foreground', className), size: size, type: "button", variant: variant, ...props, children: [children ?? _jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }));
+export const ArtifactTitle = ({ className, ...props }) => (_jsx("p", { className: cn('font-medium text-foreground text-sm', className), ...props }));
+export const ArtifactDescription = ({ className, ...props }) => (_jsx("p", { className: cn('text-muted-foreground text-sm', className), ...props }));
+export const ArtifactActions = ({ className, ...props }) => (_jsx("div", { className: cn('flex items-center gap-1', className), ...props }));
+export const ArtifactAction = ({ tooltip, label, icon: Icon, children, className, size = 'sm', variant = 'ghost', ...props }) => {
+    const button = (_jsxs(Button, { className: cn('size-8 p-0 text-muted-foreground hover:text-foreground', className), size: size, type: "button", variant: variant, ...props, children: [Icon ? _jsx(Icon, { className: "size-4" }) : children, _jsx("span", { className: "sr-only", children: label || tooltip })] }));
+    if (tooltip) {
+        return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
+    }
+    return button;
+};
+export const ArtifactContent = ({ className, ...props }) => (_jsx("div", { className: cn('flex-1 overflow-auto p-4', className), ...props }));

package/lib/components/vercel-ai-elements/code-block.d.ts

@@ -0,0 +1,17 @@
+import { Button } from '@/components/ui/button';
+import { type ComponentProps, type HTMLAttributes } from 'react';
+import { type BundledLanguage } from 'shiki';
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+};
+export declare function highlightCode(code: string, language: BundledLanguage, showLineNumbers?: boolean): Promise<[string, string]>;
+export declare const CodeBlock: ({ code, language, showLineNumbers, className, children, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+export declare const CodeBlockCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: CodeBlockCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/vercel-ai-elements/code-block.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+import { codeToHtml } from 'shiki';
+const CodeBlockContext = createContext({
+    code: '',
+});
+const lineNumberTransformer = {
+    name: 'line-numbers',
+    line(node, line) {
+        node.children.unshift({
+            type: 'element',
+            tagName: 'span',
+            properties: {
+                className: [
+                    'inline-block',
+                    'min-w-10',
+                    'mr-4',
+                    'text-right',
+                    'select-none',
+                    'text-muted-foreground',
+                ],
+            },
+            children: [{ type: 'text', value: String(line) }],
+        });
+    },
+};
+export async function highlightCode(code, language, showLineNumbers = false) {
+    const transformers = showLineNumbers
+        ? [lineNumberTransformer]
+        : [];
+    return await Promise.all([
+        codeToHtml(code, {
+            lang: language,
+            theme: 'one-light',
+            transformers,
+        }),
+        codeToHtml(code, {
+            lang: language,
+            theme: 'one-dark-pro',
+            transformers,
+        }),
+    ]);
+}
+export const CodeBlock = ({ code, language, showLineNumbers = false, className, children, ...props }) => {
+    const [html, setHtml] = useState('');
+    const [darkHtml, setDarkHtml] = useState('');
+    const mounted = useRef(false);
+    useEffect(() => {
+        highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+            if (!mounted.current) {
+                setHtml(light);
+                setDarkHtml(dark);
+                mounted.current = true;
+            }
+        });
+        return () => {
+            mounted.current = false;
+        };
+    }, [code, language, showLineNumbers]);
+    return (_jsx(CodeBlockContext.Provider, { value: { code }, children: _jsx("div", { className: cn('group relative w-full overflow-hidden rounded-md border bg-background text-foreground', className), ...props, children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "overflow-auto dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm", 
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+                        dangerouslySetInnerHTML: { __html: html } }), _jsx("div", { className: "hidden overflow-auto dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm", 
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+                        dangerouslySetInnerHTML: { __html: darkHtml } }), children && (_jsx("div", { className: "absolute top-2 right-2 flex items-center gap-2", children: children }))] }) }) }));
+};
+export const CodeBlockCopyButton = ({ onCopy, onError, timeout = 2000, children, className, ...props }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const { code } = useContext(CodeBlockContext);
+    const copyToClipboard = async () => {
+        if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
+            onError?.(new Error('Clipboard API not available'));
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(code);
+            setIsCopied(true);
+            onCopy?.();
+            setTimeout(() => setIsCopied(false), timeout);
+        }
+        catch (error) {
+            onError?.(error);
+        }
+    };
+    const Icon = isCopied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { className: cn('shrink-0', className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 14 }) }));
+};

package/lib/components/vercel-ai-elements/conversation.d.ts

@@ -0,0 +1,15 @@
+import { Button } from '@/components/ui/button';
+import type { ComponentProps } from 'react';
+import { StickToBottom } from 'use-stick-to-bottom';
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+export declare const Conversation: ({ className, ...props }: ConversationProps) => import("react/jsx-runtime").JSX.Element;
+export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+export declare const ConversationContent: ({ className, ...props }: ConversationContentProps) => import("react/jsx-runtime").JSX.Element;
+export type ConversationEmptyStateProps = ComponentProps<'div'> & {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+};
+export declare const ConversationEmptyState: ({ className, title, description, icon, children, ...props }: ConversationEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+export declare const ConversationScrollButton: ({ className, ...props }: ConversationScrollButtonProps) => false | import("react/jsx-runtime").JSX.Element;

package/lib/components/vercel-ai-elements/conversation.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { ArrowDownIcon } from 'lucide-react';
+import { useCallback } from 'react';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
+export const Conversation = ({ className, ...props }) => (_jsx(StickToBottom, { className: cn('relative flex-1 overflow-y-hidden', className), initial: "smooth", resize: "smooth", role: "log", ...props }));
+export const ConversationContent = ({ className, ...props }) => (_jsx(StickToBottom.Content, { className: cn('flex flex-col gap-8 p-4', className), ...props }));
+export const ConversationEmptyState = ({ className, title = 'No messages yet', description = 'Start a conversation to see messages here', icon, children, ...props }) => (_jsx("div", { className: cn('flex size-full flex-col items-center justify-center gap-3 p-8 text-center', className), ...props, children: children ?? (_jsxs(_Fragment, { children: [icon && _jsx("div", { className: "text-muted-foreground", children: icon }), _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "font-medium text-sm", children: title }), description && (_jsx("p", { className: "text-muted-foreground text-sm", children: description }))] })] })) }));
+export const ConversationScrollButton = ({ className, ...props }) => {
+    const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+    const handleScrollToBottom = useCallback(() => {
+        scrollToBottom();
+    }, [scrollToBottom]);
+    return (!isAtBottom && (_jsx(Button, { className: cn('absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full', className), onClick: handleScrollToBottom, size: "icon", type: "button", variant: "outline", ...props, children: _jsx(ArrowDownIcon, { className: "size-4" }) })));
+};

package/lib/components/vercel-ai-elements/loader.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+};
+export declare const Loader: ({ className, size, ...props }: LoaderProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/vercel-ai-elements/loader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { cn } from '@/lib/utils';
+const LoaderIcon = ({ size = 16 }) => (_jsxs("svg", { height: size, strokeLinejoin: "round", style: { color: 'currentcolor' }, viewBox: "0 0 16 16", width: size, children: [_jsx("title", { children: "Loader" }), _jsxs("g", { clipPath: "url(#clip0_2393_1490)", children: [_jsx("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 16V12", opacity: "0.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 1.52783L5.64887 4.7639", opacity: "0.9", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 1.52783L10.3511 4.7639", opacity: "0.1", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 14.472L10.3511 11.236", opacity: "0.4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 14.472L5.64887 11.236", opacity: "0.6", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 5.52783L11.8043 6.7639", opacity: "0.2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 10.472L4.19583 9.23598", opacity: "0.7", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 10.4722L11.8043 9.2361", opacity: "0.3", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 5.52783L4.19583 6.7639", opacity: "0.8", stroke: "currentColor", strokeWidth: "1.5" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_2393_1490", children: _jsx("rect", { fill: "white", height: "16", width: "16" }) }) })] }));
+export const Loader = ({ className, size = 16, ...props }) => (_jsx("div", { className: cn('inline-flex animate-spin items-center justify-center', className), ...props, children: _jsx(LoaderIcon, { size: size }) }));

package/lib/components/vercel-ai-elements/message.d.ts

@@ -0,0 +1,46 @@
+import { Button } from '@/components/ui/button';
+import type { FileUIPart, UIMessage } from 'ai';
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { Streamdown } from 'streamdown';
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    from: UIMessage['role'];
+};
+export declare const Message: ({ className, from, ...props }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const MessageContent: ({ children, className, ...props }: MessageContentProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageActionsProps = ComponentProps<'div'>;
+export declare const MessageActions: ({ className, children, ...props }: MessageActionsProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+};
+export declare const MessageAction: ({ tooltip, children, label, variant, size, ...props }: MessageActionProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+    defaultBranch?: number;
+    onBranchChange?: (branchIndex: number) => void;
+};
+export declare const MessageBranch: ({ defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => import("react/jsx-runtime").JSX.Element[];
+export type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
+    from: UIMessage['role'];
+};
+export declare const MessageBranchSelector: ({ className, from, ...props }: MessageBranchSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+export declare const MessageBranchPrevious: ({ children, ...props }: MessageBranchPreviousProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
+export declare const MessageBranchNext: ({ children, className, ...props }: MessageBranchNextProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+export declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => import("react/jsx-runtime").JSX.Element;
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+export declare const MessageResponse: import("react").MemoExoticComponent<({ className, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
+export type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
+    data: FileUIPart;
+    className?: string;
+    onRemove?: () => void;
+};
+export declare function MessageAttachment({ data, className, onRemove, ...props }: MessageAttachmentProps): import("react/jsx-runtime").JSX.Element;
+export type MessageAttachmentsProps = ComponentProps<'div'>;
+export declare function MessageAttachments({ children, className, ...props }: MessageAttachmentsProps): import("react/jsx-runtime").JSX.Element | null;
+export type MessageToolbarProps = ComponentProps<'div'>;
+export declare const MessageToolbar: ({ className, children, ...props }: MessageToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/vercel-ai-elements/message.js

@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@/components/ui/button';
+import { ButtonGroup, ButtonGroupText } from '@/components/ui/button-group';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { ChevronLeftIcon, ChevronRightIcon, PaperclipIcon, XIcon, } from 'lucide-react';
+import { createContext, memo, useContext, useEffect, useState } from 'react';
+import { Streamdown } from 'streamdown';
+export const Message = ({ className, from, ...props }) => (_jsx("div", { className: cn('group flex w-full max-w-[95%] flex-col gap-2', from === 'user' ? 'is-user ml-auto justify-end' : 'is-assistant', className), ...props }));
+export const MessageContent = ({ children, className, ...props }) => (_jsx("div", { className: cn('is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm', 'group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground', 'group-[.is-assistant]:text-foreground', className), ...props, children: children }));
+export const MessageActions = ({ className, children, ...props }) => (_jsx("div", { className: cn('flex items-center gap-1', className), ...props, children: children }));
+export const MessageAction = ({ tooltip, children, label, variant = 'ghost', size = 'icon-sm', ...props }) => {
+    const button = (_jsxs(Button, { size: size, type: "button", variant: variant, ...props, children: [children, _jsx("span", { className: "sr-only", children: label || tooltip })] }));
+    if (tooltip) {
+        return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
+    }
+    return button;
+};
+const MessageBranchContext = createContext(null);
+const useMessageBranch = () => {
+    const context = useContext(MessageBranchContext);
+    if (!context) {
+        throw new Error('MessageBranch components must be used within MessageBranch');
+    }
+    return context;
+};
+export const MessageBranch = ({ defaultBranch = 0, onBranchChange, className, ...props }) => {
+    const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+    const [branches, setBranches] = useState([]);
+    const handleBranchChange = (newBranch) => {
+        setCurrentBranch(newBranch);
+        onBranchChange?.(newBranch);
+    };
+    const goToPrevious = () => {
+        const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+        handleBranchChange(newBranch);
+    };
+    const goToNext = () => {
+        const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+        handleBranchChange(newBranch);
+    };
+    const contextValue = {
+        currentBranch,
+        totalBranches: branches.length,
+        goToPrevious,
+        goToNext,
+        branches,
+        setBranches,
+    };
+    return (_jsx(MessageBranchContext.Provider, { value: contextValue, children: _jsx("div", { className: cn('grid w-full gap-2 [&>div]:pb-0', className), ...props }) }));
+};
+export const MessageBranchContent = ({ children, ...props }) => {
+    const { currentBranch, setBranches, branches } = useMessageBranch();
+    const childrenArray = Array.isArray(children) ? children : [children];
+    // Use useEffect to update branches when they change
+    useEffect(() => {
+        if (branches.length !== childrenArray.length) {
+            setBranches(childrenArray);
+        }
+    }, [childrenArray, branches, setBranches]);
+    return childrenArray.map((branch, index) => (_jsx("div", { className: cn('grid gap-2 overflow-hidden [&>div]:pb-0', index === currentBranch ? 'block' : 'hidden'), ...props, children: branch }, branch.key)));
+};
+export const MessageBranchSelector = ({ className, from, ...props }) => {
+    const { totalBranches } = useMessageBranch();
+    // Don't render if there's only one branch
+    if (totalBranches <= 1) {
+        return null;
+    }
+    return (_jsx(ButtonGroup, { className: "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md", orientation: "horizontal", ...props }));
+};
+export const MessageBranchPrevious = ({ children, ...props }) => {
+    const { goToPrevious, totalBranches } = useMessageBranch();
+    return (_jsx(Button, { "aria-label": "Previous branch", disabled: totalBranches <= 1, onClick: goToPrevious, size: "icon-sm", type: "button", variant: "ghost", ...props, children: children ?? _jsx(ChevronLeftIcon, { size: 14 }) }));
+};
+export const MessageBranchNext = ({ children, className, ...props }) => {
+    const { goToNext, totalBranches } = useMessageBranch();
+    return (_jsx(Button, { "aria-label": "Next branch", disabled: totalBranches <= 1, onClick: goToNext, size: "icon-sm", type: "button", variant: "ghost", ...props, children: children ?? _jsx(ChevronRightIcon, { size: 14 }) }));
+};
+export const MessageBranchPage = ({ className, ...props }) => {
+    const { currentBranch, totalBranches } = useMessageBranch();
+    return (_jsxs(ButtonGroupText, { className: cn('border-none bg-transparent text-muted-foreground shadow-none', className), ...props, children: [currentBranch + 1, " of ", totalBranches] }));
+};
+export const MessageResponse = memo(({ className, ...props }) => (_jsx(Streamdown, { className: cn('size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0', className), ...props })), (prevProps, nextProps) => prevProps.children === nextProps.children);
+MessageResponse.displayName = 'MessageResponse';
+export function MessageAttachment({ data, className, onRemove, ...props }) {
+    const filename = data.filename || '';
+    const mediaType = data.mediaType?.startsWith('image/') && data.url ? 'image' : 'file';
+    const isImage = mediaType === 'image';
+    const attachmentLabel = filename || (isImage ? 'Image' : 'Attachment');
+    return (_jsx("div", { className: cn('group relative size-24 overflow-hidden rounded-lg', className), ...props, children: isImage ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: filename || 'attachment', className: "size-full object-cover", height: 100, src: data.url, width: 100 }), onRemove && (_jsxs(Button, { "aria-label": "Remove attachment", className: "absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3", onClick: e => {
+                        e.stopPropagation();
+                        onRemove();
+                    }, type: "button", variant: "ghost", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Remove" })] }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "flex size-full shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: _jsx(PaperclipIcon, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: attachmentLabel }) })] }), onRemove && (_jsxs(Button, { "aria-label": "Remove attachment", className: "size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100 [&>svg]:size-3", onClick: e => {
+                        e.stopPropagation();
+                        onRemove();
+                    }, type: "button", variant: "ghost", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Remove" })] }))] })) }));
+}
+export function MessageAttachments({ children, className, ...props }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('ml-auto flex w-fit flex-wrap items-start gap-2', className), ...props, children: children }));
+}
+export const MessageToolbar = ({ className, children, ...props }) => (_jsx("div", { className: cn('mt-4 flex w-full items-center justify-between gap-4', className), ...props, children: children }));

package/lib/components/vercel-ai-elements/model-selector.d.ts

@@ -0,0 +1,35 @@
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@/components/ui/command';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import type { ComponentProps, ReactNode } from 'react';
+export type ModelSelectorProps = ComponentProps<typeof Dialog>;
+export declare const ModelSelector: (props: ModelSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+export declare const ModelSelectorTrigger: (props: ModelSelectorTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+    title?: ReactNode;
+};
+export declare const ModelSelectorContent: ({ className, children, title, ...props }: ModelSelectorContentProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+export declare const ModelSelectorDialog: (props: ModelSelectorDialogProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+export declare const ModelSelectorInput: ({ className, ...props }: ModelSelectorInputProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+export declare const ModelSelectorList: (props: ModelSelectorListProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+export declare const ModelSelectorEmpty: (props: ModelSelectorEmptyProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+export declare const ModelSelectorGroup: (props: ModelSelectorGroupProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+export declare const ModelSelectorItem: (props: ModelSelectorItemProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+export declare const ModelSelectorShortcut: (props: ModelSelectorShortcutProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
+export declare const ModelSelectorSeparator: (props: ModelSelectorSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorLogoProps = Omit<ComponentProps<'img'>, 'src' | 'alt'> & {
+    provider: 'moonshotai-cn' | 'lucidquery' | 'moonshotai' | 'zai-coding-plan' | 'alibaba' | 'xai' | 'vultr' | 'nvidia' | 'upstage' | 'groq' | 'github-copilot' | 'mistral' | 'vercel' | 'nebius' | 'deepseek' | 'alibaba-cn' | 'google-vertex-anthropic' | 'venice' | 'chutes' | 'cortecs' | 'github-models' | 'togetherai' | 'azure' | 'baseten' | 'huggingface' | 'opencode' | 'fastrouter' | 'google' | 'google-vertex' | 'cloudflare-workers-ai' | 'inception' | 'wandb' | 'openai' | 'zhipuai-coding-plan' | 'perplexity' | 'openrouter' | 'zenmux' | 'v0' | 'iflowcn' | 'synthetic' | 'deepinfra' | 'zhipuai' | 'submodel' | 'zai' | 'inference' | 'requesty' | 'morph' | 'lmstudio' | 'anthropic' | 'aihubmix' | 'fireworks-ai' | 'modelscope' | 'llama' | 'scaleway' | 'amazon-bedrock' | 'cerebras' | (string & {});
+};
+export declare const ModelSelectorLogo: ({ provider, className, ...props }: ModelSelectorLogoProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorLogoGroupProps = ComponentProps<'div'>;
+export declare const ModelSelectorLogoGroup: ({ className, ...props }: ModelSelectorLogoGroupProps) => import("react/jsx-runtime").JSX.Element;
+export type ModelSelectorNameProps = ComponentProps<'span'>;
+export declare const ModelSelectorName: ({ className, ...props }: ModelSelectorNameProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/vercel-ai-elements/model-selector.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from '@/components/ui/command';
+import { Dialog, DialogContent, DialogTitle, DialogTrigger, } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+export const ModelSelector = (props) => (_jsx(Dialog, { ...props }));
+export const ModelSelectorTrigger = (props) => (_jsx(DialogTrigger, { ...props }));
+export const ModelSelectorContent = ({ className, children, title = 'Model Selector', ...props }) => (_jsxs(DialogContent, { className: cn('p-0', className), ...props, children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children: children })] }));
+export const ModelSelectorDialog = (props) => (_jsx(CommandDialog, { ...props }));
+export const ModelSelectorInput = ({ className, ...props }) => (_jsx(CommandInput, { className: cn('h-auto py-3.5', className), ...props }));
+export const ModelSelectorList = (props) => (_jsx(CommandList, { ...props }));
+export const ModelSelectorEmpty = (props) => (_jsx(CommandEmpty, { ...props }));
+export const ModelSelectorGroup = (props) => (_jsx(CommandGroup, { ...props }));
+export const ModelSelectorItem = (props) => (_jsx(CommandItem, { ...props }));
+export const ModelSelectorShortcut = (props) => (_jsx(CommandShortcut, { ...props }));
+export const ModelSelectorSeparator = (props) => (_jsx(CommandSeparator, { ...props }));
+export const ModelSelectorLogo = ({ provider, className, ...props }) => (_jsx("img", { ...props, alt: `${provider} logo`, className: cn('size-3 dark:invert', className), height: 12, src: `https://models.dev/logos/${provider}.svg`, width: 12 }));
+export const ModelSelectorLogoGroup = ({ className, ...props }) => (_jsx("div", { className: cn('-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground', className), ...props }));
+export const ModelSelectorName = ({ className, ...props }) => (_jsx("span", { className: cn('flex-1 truncate text-left', className), ...props }));