@datalayer/agent-runtimes 0.0.9 → 0.0.10

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

@@ -1,80 +0,0 @@
-/*
- * 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 { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible';
-import { cn } from '@/lib/utils';
-import { BrainIcon, ChevronDownIcon } from 'lucide-react';
-import { createContext, memo, useContext, useEffect, useState } from 'react';
-import { Streamdown } from 'streamdown';
-import { Shimmer } from './shimmer';
-const ReasoningContext = createContext(null);
-export const useReasoning = () => {
-    const context = useContext(ReasoningContext);
-    if (!context) {
-        throw new Error('Reasoning components must be used within Reasoning');
-    }
-    return context;
-};
-const AUTO_CLOSE_DELAY = 1000;
-const MS_IN_S = 1000;
-export const Reasoning = memo(({ className, isStreaming = false, open, defaultOpen = true, onOpenChange, duration: durationProp, children, ...props }) => {
-    const [isOpen, setIsOpen] = useControllableState({
-        prop: open,
-        defaultProp: defaultOpen,
-        onChange: onOpenChange,
-    });
-    const [duration, setDuration] = useControllableState({
-        prop: durationProp,
-        defaultProp: undefined,
-    });
-    const [hasAutoClosed, setHasAutoClosed] = useState(false);
-    const [startTime, setStartTime] = useState(null);
-    // Track duration when streaming starts and ends
-    useEffect(() => {
-        if (isStreaming) {
-            if (startTime === null) {
-                setStartTime(Date.now());
-            }
-        }
-        else if (startTime !== null) {
-            setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
-            setStartTime(null);
-        }
-    }, [isStreaming, startTime, setDuration]);
-    // Auto-open when streaming starts, auto-close when streaming ends (once only)
-    useEffect(() => {
-        if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
-            // Add a small delay before closing to allow user to see the content
-            const timer = setTimeout(() => {
-                setIsOpen(false);
-                setHasAutoClosed(true);
-            }, AUTO_CLOSE_DELAY);
-            return () => clearTimeout(timer);
-        }
-    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
-    const handleOpenChange = (newOpen) => {
-        setIsOpen(newOpen);
-    };
-    return (_jsx(ReasoningContext.Provider, { value: { isStreaming, isOpen, setIsOpen, duration }, children: _jsx(Collapsible, { className: cn('not-prose mb-4', className), onOpenChange: handleOpenChange, open: isOpen, ...props, children: children }) }));
-});
-const defaultGetThinkingMessage = (isStreaming, duration) => {
-    if (isStreaming || duration === 0) {
-        return _jsx(Shimmer, { duration: 1, children: "Thinking..." });
-    }
-    if (duration === undefined) {
-        return _jsx("p", { children: "Thought for a few seconds" });
-    }
-    return _jsxs("p", { children: ["Thought for ", duration, " seconds"] });
-};
-export const ReasoningTrigger = memo(({ className, children, getThinkingMessage = defaultGetThinkingMessage, ...props }) => {
-    const { isStreaming, isOpen, duration } = useReasoning();
-    return (_jsx(CollapsibleTrigger, { className: cn('flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground', className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(BrainIcon, { className: "size-4" }), getThinkingMessage(isStreaming, duration), _jsx(ChevronDownIcon, { className: cn('size-4 transition-transform', isOpen ? 'rotate-180' : 'rotate-0') })] })) }));
-});
-export const ReasoningContent = memo(({ className, children, ...props }) => (_jsx(CollapsibleContent, { className: cn('mt-4 text-sm', 'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in', className), ...props, children: _jsx(Streamdown, { ...props, children: children }) })));
-Reasoning.displayName = 'Reasoning';
-ReasoningTrigger.displayName = 'ReasoningTrigger';
-ReasoningContent.displayName = 'ReasoningContent';

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

@@ -1,9 +0,0 @@
-import { type ElementType } from 'react';
-export type TextShimmerProps = {
-    children: string;
-    as?: ElementType;
-    className?: string;
-    duration?: number;
-    spread?: number;
-};
-export declare const Shimmer: import("react").MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,22 +0,0 @@
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '@/lib/utils';
-import { motion } from 'motion/react';
-import { memo, useMemo, } from 'react';
-const ShimmerComponent = ({ children, as: Component = 'p', className, duration = 2, spread = 2, }) => {
-    const MotionComponent = motion.create(Component);
-    const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
-    return (_jsx(MotionComponent, { animate: { backgroundPosition: '0% center' }, className: cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent', '[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]', className), initial: { backgroundPosition: '100% center' }, style: {
-            '--spread': `${dynamicSpread}px`,
-            backgroundImage: 'var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))',
-        }, transition: {
-            repeat: Number.POSITIVE_INFINITY,
-            duration,
-            ease: 'linear',
-        }, children: children }));
-};
-export const Shimmer = memo(ShimmerComponent);

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

@@ -1,12 +0,0 @@
-import { CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import type { ComponentProps } from 'react';
-export type SourcesProps = ComponentProps<'div'>;
-export declare const Sources: ({ className, ...props }: SourcesProps) => import("react/jsx-runtime").JSX.Element;
-export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-    count: number;
-};
-export declare const SourcesTrigger: ({ className, count, children, ...props }: SourcesTriggerProps) => import("react/jsx-runtime").JSX.Element;
-export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
-export declare const SourcesContent: ({ className, ...props }: SourcesContentProps) => import("react/jsx-runtime").JSX.Element;
-export type SourceProps = ComponentProps<'a'>;
-export declare const Source: ({ href, title, children, ...props }: SourceProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +0,0 @@
-/*
- * 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 { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible';
-import { cn } from '@/lib/utils';
-import { BookIcon, ChevronDownIcon } from 'lucide-react';
-export const Sources = ({ className, ...props }) => (_jsx(Collapsible, { className: cn('not-prose mb-4 text-primary text-xs', className), ...props }));
-export const SourcesTrigger = ({ className, count, children, ...props }) => (_jsx(CollapsibleTrigger, { className: cn('flex items-center gap-2', className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "font-medium", children: ["Used ", count, " sources"] }), _jsx(ChevronDownIcon, { className: "h-4 w-4" })] })) }));
-export const SourcesContent = ({ className, ...props }) => (_jsx(CollapsibleContent, { className: cn('mt-3 flex w-fit flex-col gap-2', 'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in', className), ...props }));
-export const Source = ({ href, title, children, ...props }) => (_jsx("a", { className: "flex items-center gap-2", href: href, rel: "noreferrer", target: "_blank", ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(BookIcon, { className: "h-4 w-4" }), _jsx("span", { className: "block font-medium", children: title })] })) }));

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

@@ -1,10 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import type { ComponentProps } from 'react';
-export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
-export declare const Suggestions: ({ className, children, ...props }: SuggestionsProps) => import("react/jsx-runtime").JSX.Element;
-export type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
-    suggestion: string;
-    onClick?: (suggestion: string) => void;
-};
-export declare const Suggestion: ({ suggestion, onClick, className, variant, size, children, ...props }: SuggestionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,16 +0,0 @@
-/*
- * 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 { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
-import { cn } from '@/lib/utils';
-export const Suggestions = ({ className, children, ...props }) => (_jsxs(ScrollArea, { className: "w-full overflow-x-auto whitespace-nowrap", ...props, children: [_jsx("div", { className: cn('flex w-max flex-nowrap items-center gap-2', className), children: children }), _jsx(ScrollBar, { className: "hidden", orientation: "horizontal" })] }));
-export const Suggestion = ({ suggestion, onClick, className, variant = 'outline', size = 'sm', children, ...props }) => {
-    const handleClick = () => {
-        onClick?.(suggestion);
-    };
-    return (_jsx(Button, { className: cn('cursor-pointer rounded-full px-4', className), onClick: handleClick, size: size, type: "button", variant: variant, ...props, children: children || suggestion }));
-};

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

@@ -1,23 +0,0 @@
-import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
-import type { ToolUIPart } from 'ai';
-import type { ComponentProps } from 'react';
-export type ToolProps = ComponentProps<typeof Collapsible>;
-export declare const Tool: ({ className, ...props }: ToolProps) => import("react/jsx-runtime").JSX.Element;
-export type ToolHeaderProps = {
-    title?: string;
-    type: ToolUIPart['type'];
-    state: ToolUIPart['state'];
-    className?: string;
-};
-export declare const ToolHeader: ({ className, title, type, state, ...props }: ToolHeaderProps) => import("react/jsx-runtime").JSX.Element;
-export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
-export declare const ToolContent: ({ className, ...props }: ToolContentProps) => import("react/jsx-runtime").JSX.Element;
-export type ToolInputProps = ComponentProps<'div'> & {
-    input: ToolUIPart['input'];
-};
-export declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => import("react/jsx-runtime").JSX.Element;
-export type ToolOutputProps = ComponentProps<'div'> & {
-    output: ToolUIPart['output'];
-    errorText: ToolUIPart['errorText'];
-};
-export declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,52 +0,0 @@
-/*
- * 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 { Badge } from '@/components/ui/badge';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible';
-import { cn } from '@/lib/utils';
-import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from 'lucide-react';
-import { isValidElement } from 'react';
-import { CodeBlock } from './code-block';
-export const Tool = ({ className, ...props }) => (_jsx(Collapsible, { className: cn('not-prose mb-4 w-full rounded-md border', className), ...props }));
-const getStatusBadge = (status) => {
-    const labels = {
-        'input-streaming': 'Pending',
-        'input-available': 'Running',
-        'approval-requested': 'Awaiting Approval',
-        'approval-responded': 'Responded',
-        'output-available': 'Completed',
-        'output-error': 'Error',
-        'output-denied': 'Denied',
-    };
-    const icons = {
-        'input-streaming': _jsx(CircleIcon, { className: "size-4" }),
-        'input-available': _jsx(ClockIcon, { className: "size-4 animate-pulse" }),
-        'approval-requested': _jsx(ClockIcon, { className: "size-4 text-yellow-600" }),
-        'approval-responded': _jsx(CheckCircleIcon, { className: "size-4 text-blue-600" }),
-        'output-available': _jsx(CheckCircleIcon, { className: "size-4 text-green-600" }),
-        'output-error': _jsx(XCircleIcon, { className: "size-4 text-red-600" }),
-        'output-denied': _jsx(XCircleIcon, { className: "size-4 text-orange-600" }),
-    };
-    return (_jsxs(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [icons[status], labels[status]] }));
-};
-export const ToolHeader = ({ className, title, type, state, ...props }) => (_jsxs(CollapsibleTrigger, { className: cn('flex w-full items-center justify-between gap-4 p-3', className), ...props, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WrenchIcon, { className: "size-4 text-muted-foreground" }), _jsx("span", { className: "font-medium text-sm", children: title ?? type.split('-').slice(1).join('-') }), getStatusBadge(state)] }), _jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })] }));
-export const ToolContent = ({ className, ...props }) => (_jsx(CollapsibleContent, { className: cn('data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in', className), ...props }));
-export const ToolInput = ({ className, input, ...props }) => (_jsxs("div", { className: cn('space-y-2 overflow-hidden p-4', className), ...props, children: [_jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }), _jsx("div", { className: "rounded-md bg-muted/50", children: _jsx(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })] }));
-export const ToolOutput = ({ className, output, errorText, ...props }) => {
-    if (!(output || errorText)) {
-        return null;
-    }
-    let Output = _jsx("div", { children: output });
-    if (typeof output === 'object' && !isValidElement(output)) {
-        Output = (_jsx(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" }));
-    }
-    else if (typeof output === 'string') {
-        Output = _jsx(CodeBlock, { code: output, language: "json" });
-    }
-    return (_jsxs("div", { className: cn('space-y-2 p-4', className), ...props, children: [_jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? 'Error' : 'Result' }), _jsxs("div", { className: cn('overflow-x-auto rounded-md text-xs [&_table]:w-full', errorText
-                    ? 'bg-destructive/10 text-destructive'
-                    : 'bg-muted/50 text-foreground'), children: [errorText && _jsx("div", { children: errorText }), Output] })] }));
-};

package/lib/examples/components/MainContent.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { ServiceManager } from '@jupyterlab/services';
-interface MainContentProps {
-    showNotebook: boolean;
-    timeTravel: number;
-    onTimeTravelChange: (value: number) => void;
-    richEditor: boolean;
-    notebookFile?: string;
-    lexicalFile?: string;
-    isNewAgent?: boolean;
-    serviceManager?: ServiceManager.IManager;
-}
-/**
- * Main Content Component
- *
- * Displays the main content area with Simple notebook viewer or Lexical editor and time travel.
- */
-export declare const MainContent: React.FC<MainContentProps>;
-export {};

package/lib/examples/components/index.d.ts

@@ -1,10 +0,0 @@
-export { MockFileBrowser } from './MockFileBrowser';
-export { MainContent } from './MainContent';
-export { SessionTabs } from './SessionTabs';
-export { Header } from './Header';
-export { HeaderControls } from './HeaderControls';
-export { FooterMetrics } from './FooterMetrics';
-export { TimeTravel } from './TimeTravel';
-export { LexicalEditor } from './LexicalEditor';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';
-export type { AgentLibrary, Transport, Extension, MCPServerConfig, MCPServerTool, } from './AgentConfiguration';

package/lib/examples/components/index.js

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-export { MockFileBrowser } from './MockFileBrowser';
-export { MainContent } from './MainContent';
-export { SessionTabs } from './SessionTabs';
-export { Header } from './Header';
-export { HeaderControls } from './HeaderControls';
-export { FooterMetrics } from './FooterMetrics';
-export { TimeTravel } from './TimeTravel';
-export { LexicalEditor } from './LexicalEditor';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';

package/lib/examples/vercel-ai-elements/VercelAiElementsShowcase.d.ts

@@ -1,12 +0,0 @@
-import './showcase.css';
-import '../../../style/base.css';
-import '../../../style/showcase-vercel-ai.css';
-/**
- * Vercel AI Elements Showcase
- *
- * A comprehensive showcase of all available Vercel AI Elements components.
- * This page displays static examples of each component to demonstrate their
- * visual appearance and basic functionality.
- */
-export declare const VercelAiElementsShowcase: React.FC;
-export default VercelAiElementsShowcase;

package/lib/examples/vercel-ai-elements/VercelAiElementsShowcase.js

@@ -1,69 +0,0 @@
-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 { useState } from 'react';
-import { MessageShowcase } from './components/MessageShowcase';
-import { LoaderShowcase } from './components/LoaderShowcase';
-import { CodeBlockShowcase } from './components/CodeBlockShowcase';
-import { SuggestionShowcase } from './components/SuggestionShowcase';
-import { ShimmerShowcase } from './components/ShimmerShowcase';
-import { ArtifactShowcase } from './components/ArtifactShowcase';
-import { SourcesShowcase } from './components/SourcesShowcase';
-import { PromptInputShowcase } from './components/PromptInputShowcase';
-import { ConversationShowcase } from './components/ConversationShowcase';
-import { ModelSelectorShowcase } from './components/ModelSelectorShowcase';
-import { ReasoningShowcase } from './components/ReasoningShowcase';
-import { ToolShowcase } from './components/ToolShowcase';
-import './showcase.css';
-import '../../../style/base.css';
-import '../../../style/showcase-vercel-ai.css';
-/**
- * Vercel AI Elements Showcase
- *
- * A comprehensive showcase of all available Vercel AI Elements components.
- * This page displays static examples of each component to demonstrate their
- * visual appearance and basic functionality.
- */
-export const VercelAiElementsShowcase = () => {
-    const [activeTab, setActiveTab] = useState('message');
-    const components = [
-        { id: 'message', label: 'Message', component: _jsx(MessageShowcase, {}) },
-        {
-            id: 'conversation',
-            label: 'Conversation',
-            component: _jsx(ConversationShowcase, {}),
-        },
-        {
-            id: 'prompt-input',
-            label: 'Prompt Input',
-            component: _jsx(PromptInputShowcase, {}),
-        },
-        {
-            id: 'model-selector',
-            label: 'Model Selector',
-            component: _jsx(ModelSelectorShowcase, {}),
-        },
-        { id: 'artifact', label: 'Artifact', component: _jsx(ArtifactShowcase, {}) },
-        { id: 'code-block', label: 'Code Block', component: _jsx(CodeBlockShowcase, {}) },
-        {
-            id: 'suggestion',
-            label: 'Suggestions',
-            component: _jsx(SuggestionShowcase, {}),
-        },
-        { id: 'sources', label: 'Sources', component: _jsx(SourcesShowcase, {}) },
-        { id: 'reasoning', label: 'Reasoning', component: _jsx(ReasoningShowcase, {}) },
-        { id: 'tool', label: 'Tool', component: _jsx(ToolShowcase, {}) },
-        { id: 'loader', label: 'Loader', component: _jsx(LoaderShowcase, {}) },
-        { id: 'shimmer', label: 'Shimmer', component: _jsx(ShimmerShowcase, {}) },
-    ];
-    return (_jsxs("div", { className: "min-h-screen bg-background", children: [_jsx("header", { className: "border-b bg-card", children: _jsxs("div", { className: "container mx-auto py-6 px-4 md:px-6 lg:px-8", children: [_jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Vercel AI Elements Showcase" }), _jsx("p", { className: "text-muted-foreground mt-2", children: "A comprehensive collection of all available Vercel AI Elements components" })] }) }), _jsx("main", { className: "container mx-auto py-8 px-4 md:px-6 lg:px-8", children: _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "border-b border-border", children: _jsx("nav", { className: "flex gap-1 overflow-x-auto", "aria-label": "Component tabs", children: components.map(component => (_jsx("button", { onClick: () => setActiveTab(component.id), className: `
-                    px-4 py-2 text-sm font-medium whitespace-nowrap
-                    border-b-2 transition-colors
-                    ${activeTab === component.id
-                                        ? 'border-primary text-primary'
-                                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'}
-                  `, "aria-current": activeTab === component.id ? 'page' : undefined, children: component.label }, component.id))) }) }), _jsx("div", { className: "mt-6", children: components.map(component => (_jsx("div", { className: activeTab === component.id ? 'block' : 'hidden', role: "tabpanel", children: _jsxs("div", { className: "border rounded-lg bg-card", children: [_jsxs("div", { className: "border-b px-6 py-4", children: [_jsx("h2", { className: "text-2xl font-semibold text-foreground", children: component.label }), _jsxs("p", { className: "text-muted-foreground mt-1", children: ["Example implementations of the ", component.label, " component"] })] }), _jsx("div", { className: "p-6", children: _jsx("div", { className: "max-h-[calc(100vh-350px)] overflow-y-auto", children: component.component }) })] }) }, component.id))) })] }) })] }));
-};
-export default VercelAiElementsShowcase;

package/lib/examples/vercel-ai-elements/components/ArtifactShowcase.d.ts

@@ -1 +0,0 @@
-export declare const ArtifactShowcase: () => import("react/jsx-runtime").JSX.Element;

package/lib/examples/vercel-ai-elements/components/ArtifactShowcase.js

@@ -1,85 +0,0 @@
-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 { Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, } from '@/components/vercel-ai-elements/artifact';
-import { CodeBlock } from '@/components/vercel-ai-elements/code-block';
-import { CopyIcon, DownloadIcon, PlayIcon, RefreshCwIcon, ShareIcon, } from 'lucide-react';
-const pythonCode = `# Dijkstra's Algorithm implementation
-import heapq
-
-def dijkstra(graph, start):
-    distances = {node: float('inf') for node in graph}
-    distances[start] = 0
-    heap = [(0, start)]
-    visited = set()
-    
-    while heap:
-        current_distance, current_node = heapq.heappop(heap)
-        if current_node in visited:
-            continue
-        visited.add(current_node)
-        
-        for neighbor, weight in graph[current_node].items():
-            distance = current_distance + weight
-            if distance < distances[neighbor]:
-                distances[neighbor] = distance
-                heapq.heappush(heap, (distance, neighbor))
-    
-    return distances
-
-# Example graph
-graph = {
-    'A': {'B': 1, 'C': 4},
-    'B': {'A': 1, 'C': 2, 'D': 5},
-    'C': {'A': 4, 'B': 2, 'D': 1},
-    'D': {'B': 5, 'C': 1}
-}
-
-print(dijkstra(graph, 'A'))`;
-const reactCode = `import React, { useState } from 'react';
-
-function TodoApp() {
-  const [todos, setTodos] = useState([]);
-  const [input, setInput] = useState('');
-
-  const addTodo = () => {
-    if (input.trim()) {
-      setTodos([...todos, { id: Date.now(), text: input, done: false }]);
-      setInput('');
-    }
-  };
-
-  const toggleTodo = (id) => {
-    setTodos(todos.map(todo =>
-      todo.id === id ? { ...todo, done: !todo.done } : todo
-    ));
-  };
-
-  return (
-    <div>
-      <h1>Todo List</h1>
-      <input
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyPress={(e) => e.key === 'Enter' && addTodo()}
-      />
-      <button onClick={addTodo}>Add</button>
-      <ul>
-        {todos.map(todo => (
-          <li
-            key={todo.id}
-            onClick={() => toggleTodo(todo.id)}
-            style={{ textDecoration: todo.done ? 'line-through' : 'none' }}
-          >
-            {todo.text}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}`;
-export const ArtifactShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Code Artifact" }), _jsxs(Artifact, { children: [_jsxs(ArtifactHeader, { children: [_jsxs("div", { children: [_jsx(ArtifactTitle, { children: "Dijkstra's Algorithm Implementation" }), _jsx(ArtifactDescription, { children: "Updated 1 minute ago" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(ArtifactActions, { children: [_jsx(ArtifactAction, { icon: PlayIcon, label: "Run", onClick: () => console.log('Run'), tooltip: "Run code" }), _jsx(ArtifactAction, { icon: CopyIcon, label: "Copy", onClick: () => console.log('Copy'), tooltip: "Copy to clipboard" }), _jsx(ArtifactAction, { icon: RefreshCwIcon, label: "Regenerate", onClick: () => console.log('Regenerate'), tooltip: "Regenerate content" }), _jsx(ArtifactAction, { icon: DownloadIcon, label: "Download", onClick: () => console.log('Download'), tooltip: "Download file" }), _jsx(ArtifactAction, { icon: ShareIcon, label: "Share", onClick: () => console.log('Share'), tooltip: "Share artifact" })] }) })] }), _jsx(ArtifactContent, { className: "p-0", children: _jsx(CodeBlock, { className: "border-none", code: pythonCode, language: "python", showLineNumbers: true }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "React Component Artifact" }), _jsxs(Artifact, { children: [_jsxs(ArtifactHeader, { children: [_jsxs("div", { children: [_jsx(ArtifactTitle, { children: "Todo App Component" }), _jsx(ArtifactDescription, { children: "React component with hooks" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(ArtifactActions, { children: [_jsx(ArtifactAction, { icon: CopyIcon, label: "Copy", onClick: () => console.log('Copy'), tooltip: "Copy to clipboard" }), _jsx(ArtifactAction, { icon: DownloadIcon, label: "Download", onClick: () => console.log('Download'), tooltip: "Download file" })] }) })] }), _jsx(ArtifactContent, { className: "p-0", children: _jsx(CodeBlock, { className: "border-none", code: reactCode, language: "tsx", showLineNumbers: true }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Document Artifact" }), _jsxs(Artifact, { children: [_jsxs(ArtifactHeader, { children: [_jsxs("div", { children: [_jsx(ArtifactTitle, { children: "Project Documentation" }), _jsx(ArtifactDescription, { children: "Generated documentation" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(ArtifactActions, { children: [_jsx(ArtifactAction, { icon: CopyIcon, label: "Copy", onClick: () => console.log('Copy'), tooltip: "Copy to clipboard" }), _jsx(ArtifactAction, { icon: ShareIcon, label: "Share", onClick: () => console.log('Share'), tooltip: "Share artifact" })] }) })] }), _jsx(ArtifactContent, { children: _jsxs("div", { className: "prose prose-sm max-w-none", children: [_jsx("h1", { children: "Getting Started" }), _jsx("p", { children: "This guide will help you get started with the project." }), _jsx("h2", { children: "Installation" }), _jsx("p", { children: "Install the dependencies using npm:" }), _jsx("pre", { children: _jsx("code", { children: "npm install" }) }), _jsx("h2", { children: "Usage" }), _jsx("p", { children: "Run the development server:" }), _jsx("pre", { children: _jsx("code", { children: "npm run dev" }) })] }) })] })] })] }));
-};

package/lib/examples/vercel-ai-elements/components/CodeBlockShowcase.d.ts

@@ -1 +0,0 @@
-export declare const CodeBlockShowcase: () => import("react/jsx-runtime").JSX.Element;

package/lib/examples/vercel-ai-elements/components/CodeBlockShowcase.js

@@ -1,62 +0,0 @@
-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 { CodeBlock, CodeBlockCopyButton, } from '@/components/vercel-ai-elements/code-block';
-const jsCode = `function fibonacci(n) {
-  if (n <= 1) return n;
-  return fibonacci(n - 1) + fibonacci(n - 2);
-}
-
-console.log(fibonacci(10)); // 55`;
-const pythonCode = `def dijkstra(graph, start):
-    distances = {node: float('inf') for node in graph}
-    distances[start] = 0
-    heap = [(0, start)]
-    visited = set()
-    
-    while heap:
-        current_distance, current_node = heapq.heappop(heap)
-        if current_node in visited:
-            continue
-        visited.add(current_node)
-        
-        for neighbor, weight in graph[current_node].items():
-            distance = current_distance + weight
-            if distance < distances[neighbor]:
-                distances[neighbor] = distance
-                heapq.heappush(heap, (distance, neighbor))
-    
-    return distances`;
-const tsxCode = `import React, { useState } from 'react';
-
-const Counter: React.FC = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <h1>Count: {count}</h1>
-      <button onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
-    </div>
-  );
-};
-
-export default Counter;`;
-const sqlCode = `SELECT 
-  u.id,
-  u.name,
-  COUNT(o.id) as order_count,
-  SUM(o.total) as total_spent
-FROM users u
-LEFT JOIN orders o ON u.id = o.user_id
-WHERE u.active = true
-GROUP BY u.id, u.name
-HAVING COUNT(o.id) > 5
-ORDER BY total_spent DESC
-LIMIT 10;`;
-export const CodeBlockShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "JavaScript Code Block" }), _jsx(CodeBlock, { code: jsCode, language: "javascript", children: _jsx(CodeBlockCopyButton, { onCopy: () => console.log('Copied JavaScript code'), onError: () => console.error('Failed to copy') }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Python Code Block" }), _jsx(CodeBlock, { code: pythonCode, language: "python", children: _jsx(CodeBlockCopyButton, { onCopy: () => console.log('Copied Python code'), onError: () => console.error('Failed to copy') }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "TypeScript/React Code Block" }), _jsx(CodeBlock, { code: tsxCode, language: "tsx", showLineNumbers: true, children: _jsx(CodeBlockCopyButton, { onCopy: () => console.log('Copied TSX code'), onError: () => console.error('Failed to copy') }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "SQL Code Block with Line Numbers" }), _jsx(CodeBlock, { code: sqlCode, language: "sql", showLineNumbers: true, children: _jsx(CodeBlockCopyButton, { onCopy: () => console.log('Copied SQL code'), onError: () => console.error('Failed to copy') }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Inline Code" }), _jsx("div", { className: "p-4 border rounded-md", children: _jsxs("p", { className: "text-sm", children: ["Use the", ' ', _jsx("code", { className: "px-2 py-1 bg-muted rounded text-sm font-mono", children: "useState" }), ' ', "hook to manage state in React. For side effects, use", ' ', _jsx("code", { className: "px-2 py-1 bg-muted rounded text-sm font-mono", children: "useEffect" }), "."] }) })] })] }));
-};

package/lib/examples/vercel-ai-elements/components/ConversationShowcase.d.ts

@@ -1 +0,0 @@
-export declare const ConversationShowcase: () => import("react/jsx-runtime").JSX.Element;

package/lib/examples/vercel-ai-elements/components/ConversationShowcase.js

@@ -1,51 +0,0 @@
-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 { Conversation, ConversationContent, ConversationScrollButton, } from '@/components/vercel-ai-elements/conversation';
-import { Message, MessageContent, MessageResponse, } from '@/components/vercel-ai-elements/message';
-import { nanoid } from 'nanoid';
-const messages = [
-    {
-        id: nanoid(),
-        role: 'user',
-        content: 'What is React and why should I use it?',
-    },
-    {
-        id: nanoid(),
-        role: 'assistant',
-        content: `React is a JavaScript library for building user interfaces, particularly single-page applications. Here's why you should consider using it:
-
-## Key Benefits
-
-1. **Component-Based Architecture** - Build encapsulated components that manage their own state
-2. **Virtual DOM** - Efficient updates and rendering
-3. **Rich Ecosystem** - Large community and many third-party libraries
-4. **Learn Once, Write Anywhere** - Can be used for web, mobile (React Native), and more`,
-    },
-    {
-        id: nanoid(),
-        role: 'user',
-        content: 'Can you show me a simple example?',
-    },
-    {
-        id: nanoid(),
-        role: 'assistant',
-        content: `Here's a simple React component example:
-
-\`\`\`jsx
-function Welcome({ name }) {
-  return <h1>Hello, {name}!</h1>;
-}
-
-// Usage
-<Welcome name="Alice" />
-\`\`\`
-
-This component accepts a \`name\` prop and displays a greeting.`,
-    },
-];
-export const ConversationShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Conversation Container" }), _jsx("div", { className: "border rounded-lg", children: _jsxs(Conversation, { children: [_jsx(ConversationContent, { children: messages.map(message => (_jsx(Message, { from: message.role, children: _jsx(MessageContent, { children: _jsx(MessageResponse, { children: message.content }) }) }, message.id))) }), _jsx(ConversationScrollButton, {})] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Limited Height Conversation" }), _jsx("div", { className: "border rounded-lg", style: { height: '400px' }, children: _jsxs(Conversation, { children: [_jsx(ConversationContent, { children: [...messages, ...messages].map((message, index) => (_jsx(Message, { from: message.role, children: _jsx(MessageContent, { children: _jsx(MessageResponse, { children: message.content }) }) }, `${message.id}-${index}`))) }), _jsx(ConversationScrollButton, {})] }) })] })] }));
-};

package/lib/examples/vercel-ai-elements/components/LoaderShowcase.d.ts

@@ -1 +0,0 @@
-export declare const LoaderShowcase: () => import("react/jsx-runtime").JSX.Element;

package/lib/examples/vercel-ai-elements/components/LoaderShowcase.js

@@ -1,9 +0,0 @@
-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 { Loader } from '@/components/vercel-ai-elements/loader';
-export const LoaderShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Default Loader" }), _jsx("div", { className: "flex items-center justify-center p-8 border rounded-md bg-muted/50", children: _jsx(Loader, {}) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Loader Sizes" }), _jsxs("div", { className: "flex items-center justify-around p-8 border rounded-md gap-4 bg-muted/50", children: [_jsxs("div", { className: "text-center", children: [_jsx(Loader, { className: "h-4 w-4" }), _jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })] }), _jsxs("div", { className: "text-center", children: [_jsx(Loader, { className: "h-6 w-6" }), _jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "Medium" })] }), _jsxs("div", { className: "text-center", children: [_jsx(Loader, { className: "h-8 w-8" }), _jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })] }), _jsxs("div", { className: "text-center", children: [_jsx(Loader, { className: "h-12 w-12" }), _jsx("p", { className: "text-sm text-muted-foreground mt-2", children: "Extra Large" })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Loader in Context" }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "p-4 border rounded-md bg-muted/50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm", children: "Loading your data..." })] }) }), _jsx("div", { className: "p-4 border rounded-md bg-muted/50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm", children: "Generating response..." })] }) }), _jsx("div", { className: "p-4 border rounded-md bg-muted/50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm", children: "Processing request..." })] }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Centered Loader" }), _jsx("div", { className: "h-64 flex items-center justify-center border rounded-md bg-muted/50", children: _jsxs("div", { className: "text-center", children: [_jsx(Loader, { className: "h-8 w-8 mx-auto mb-4" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Loading content..." })] }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Inline Loaders" }), _jsxs("div", { className: "p-4 border rounded-md space-y-2 bg-muted/50", children: [_jsxs("div", { className: "text-sm flex items-center gap-2", children: [_jsx(Loader, { className: "h-3 w-3" }), _jsx("span", { children: "Analyzing data" })] }), _jsxs("div", { className: "text-sm flex items-center gap-2", children: [_jsx(Loader, { className: "h-3 w-3" }), _jsx("span", { children: "Running calculations" })] }), _jsxs("div", { className: "text-sm flex items-center gap-2", children: [_jsx(Loader, { className: "h-3 w-3" }), _jsx("span", { children: "Preparing results" })] })] })] })] }));
-};

package/lib/examples/vercel-ai-elements/components/MessageShowcase.d.ts

@@ -1 +0,0 @@
-export declare const MessageShowcase: () => import("react/jsx-runtime").JSX.Element;