@datalayer/agent-runtimes 0.0.9 → 0.0.11

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;

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

@@ -1,56 +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 { Message, MessageAction, MessageActions, MessageAttachment, MessageAttachments, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, } from '@/components/vercel-ai-elements/message';
-import { CopyIcon, RefreshCcwIcon, ThumbsDownIcon, ThumbsUpIcon, } from 'lucide-react';
-import { nanoid } from 'nanoid';
-import { useState } from 'react';
-export const MessageShowcase = () => {
-    const [currentVersion, setCurrentVersion] = useState(0);
-    const versions = [
-        {
-            id: nanoid(),
-            content: `# React Hooks Guide
-
-React hooks are functions that let you "hook into" React state and lifecycle features from function components.
-
-## Core Hooks
-
-### useState
-Adds state to functional components:
-
-\`\`\`jsx
-const [count, setCount] = useState(0);
-\`\`\`
-
-### useEffect
-Handles side effects (data fetching, subscriptions, DOM updates).`,
-        },
-        {
-            id: nanoid(),
-            content: `# React Hooks - Comprehensive Guide
-
-Hooks revolutionized React by allowing function components to use state and other React features.
-
-## Essential Hooks
-
-1. **useState** - State management
-2. **useEffect** - Side effects
-3. **useContext** - Context consumption
-4. **useReducer** - Complex state logic`,
-        },
-    ];
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "User Message" }), _jsx(Message, { from: "user", children: _jsx(MessageContent, { children: "How do React hooks work and when should I use them?" }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Assistant Message with Actions" }), _jsxs(Message, { from: "assistant", children: [_jsx(MessageContent, { children: _jsx(MessageResponse, { children: versions[currentVersion].content }) }), _jsx(MessageToolbar, { children: _jsxs(MessageActions, { children: [_jsx(MessageAction, { label: "Copy", onClick: () => console.log('Copy clicked'), children: _jsx(CopyIcon, {}) }), _jsx(MessageAction, { label: "Regenerate", onClick: () => console.log('Regenerate clicked'), children: _jsx(RefreshCcwIcon, {}) }), _jsx(MessageAction, { label: "Good response", onClick: () => console.log('Thumbs up clicked'), children: _jsx(ThumbsUpIcon, {}) }), _jsx(MessageAction, { label: "Bad response", onClick: () => console.log('Thumbs down clicked'), children: _jsx(ThumbsDownIcon, {}) })] }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Message with Branches (Multiple Versions)" }), _jsx(Message, { from: "assistant", children: _jsx(MessageContent, { children: _jsxs(MessageBranch, { defaultBranch: currentVersion, onBranchChange: setCurrentVersion, children: [_jsx(MessageBranchContent, { children: _jsx(MessageResponse, { children: versions[currentVersion].content }) }), _jsxs(MessageBranchSelector, { from: "assistant", children: [_jsx(MessageBranchPrevious, {}), _jsx(MessageBranchPage, {}), _jsx(MessageBranchNext, {})] })] }) }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "User Message with Attachments" }), _jsxs(Message, { from: "user", children: [_jsx(MessageContent, { children: "Can you analyze this image and document?" }), _jsxs(MessageAttachments, { children: [_jsx(MessageAttachment, { data: {
-                                            type: 'file',
-                                            url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
-                                            mediaType: 'image/jpeg',
-                                            filename: 'palace-of-fine-arts.jpg',
-                                        } }), _jsx(MessageAttachment, { data: {
-                                            type: 'file',
-                                            url: '',
-                                            mediaType: 'application/pdf',
-                                            filename: 'react-hooks-guide.pdf',
-                                        } })] })] })] })] }));
-};

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

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

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

@@ -1,50 +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 { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorTrigger, } from '@/components/vercel-ai-elements/model-selector';
-import { useState } from 'react';
-const models = [
-    { id: 'gpt-4', name: 'GPT-4', provider: 'OpenAI', logo: '🤖' },
-    {
-        id: 'gpt-3.5-turbo',
-        name: 'GPT-3.5 Turbo',
-        provider: 'OpenAI',
-        logo: '🤖',
-    },
-    {
-        id: 'claude-3-opus',
-        name: 'Claude 3 Opus',
-        provider: 'Anthropic',
-        logo: '🧠',
-    },
-    {
-        id: 'claude-3-sonnet',
-        name: 'Claude 3 Sonnet',
-        provider: 'Anthropic',
-        logo: '🧠',
-    },
-    { id: 'gemini-pro', name: 'Gemini Pro', provider: 'Google', logo: '✨' },
-    { id: 'llama-2-70b', name: 'Llama 2 70B', provider: 'Meta', logo: '🦙' },
-];
-export const ModelSelectorShowcase = () => {
-    const [selectedModel, setSelectedModel] = useState('gpt-4');
-    const [searchQuery, setSearchQuery] = useState('');
-    const [open, setOpen] = useState(false);
-    const filteredModels = models.filter(model => model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        model.provider.toLowerCase().includes(searchQuery.toLowerCase()));
-    const groupedModels = filteredModels.reduce((acc, model) => {
-        if (!acc[model.provider]) {
-            acc[model.provider] = [];
-        }
-        acc[model.provider].push(model);
-        return acc;
-    }, {});
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Model Selector" }), _jsxs(ModelSelector, { open: open, onOpenChange: setOpen, children: [_jsxs(ModelSelectorTrigger, { children: [_jsx(ModelSelectorLogo, { provider: models
-                                            .find(m => m.id === selectedModel)
-                                            ?.provider.toLowerCase() || 'openai' }), _jsx(ModelSelectorName, { children: models.find(m => m.id === selectedModel)?.name })] }), _jsxs(ModelSelectorContent, { children: [_jsx(ModelSelectorInput, { value: searchQuery, onValueChange: setSearchQuery, placeholder: "Search models..." }), _jsx(ModelSelectorList, { children: Object.keys(groupedModels).length === 0 ? (_jsx(ModelSelectorEmpty, { children: "No models found" })) : (Object.entries(groupedModels).map(([provider, providerModels]) => (_jsx(ModelSelectorGroup, { heading: provider, children: providerModels.map(model => (_jsx(ModelSelectorItem, { value: model.id, onSelect: () => {
-                                                    setSelectedModel(model.id);
-                                                    setOpen(false);
-                                                }, children: _jsxs(ModelSelectorLogoGroup, { children: [_jsx(ModelSelectorLogo, { provider: model.provider.toLowerCase() }), _jsx(ModelSelectorName, { children: model.name })] }) }, model.id))) }, provider)))) })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Selected Model" }), _jsxs("div", { className: "p-4 border rounded-md bg-muted", children: [_jsxs("p", { className: "text-sm", children: [_jsx("strong", { children: "Model ID:" }), " ", selectedModel] }), _jsxs("p", { className: "text-sm", children: [_jsx("strong", { children: "Name:" }), ' ', models.find(m => m.id === selectedModel)?.name] }), _jsxs("p", { className: "text-sm", children: [_jsx("strong", { children: "Provider:" }), ' ', models.find(m => m.id === selectedModel)?.provider] })] })] })] }));
-};

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

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

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

@@ -1,16 +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 { PromptInput, PromptInputActionAddAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputHeader, PromptInputSubmit, PromptInputTextarea, PromptInputTools, } from '@/components/vercel-ai-elements/prompt-input';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu';
-import { GlobeIcon, MicIcon, PlusIcon } from 'lucide-react';
-import { useState } from 'react';
-export const PromptInputShowcase = () => {
-    const [value, setValue] = useState('');
-    const handleSubmit = (message) => {
-        console.log('Submitted:', message);
-    };
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Basic Prompt Input" }), _jsxs(PromptInput, { onSubmit: handleSubmit, children: [_jsx(PromptInputBody, { children: _jsx(PromptInputTextarea, { value: value, onChange: e => setValue(e.target.value), placeholder: "Ask me anything..." }) }), _jsx(PromptInputFooter, { children: _jsx(PromptInputSubmit, {}) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Prompt Input with Actions" }), _jsxs(PromptInput, { onSubmit: handleSubmit, children: [_jsx(PromptInputBody, { children: _jsx(PromptInputTextarea, { value: value, onChange: e => setValue(e.target.value), placeholder: "Ask me anything..." }) }), _jsxs(PromptInputFooter, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(PromptInputButton, { children: _jsx(PlusIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsxs(DropdownMenuItem, { onClick: () => console.log('Voice'), children: [_jsx(MicIcon, {}), "Voice Input"] }), _jsxs(DropdownMenuItem, { onClick: () => console.log('Search'), children: [_jsx(GlobeIcon, {}), "Web Search"] })] })] }), _jsx(PromptInputActionAddAttachments, { onClick: () => console.log('Add attachment') }), _jsx(PromptInputSubmit, {})] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Prompt Input with Tools" }), _jsxs(PromptInput, { onSubmit: handleSubmit, children: [_jsx(PromptInputHeader, { children: _jsxs(PromptInputTools, { children: [_jsx(PromptInputButton, { onClick: () => console.log('Search'), children: _jsx(GlobeIcon, {}) }), _jsx(PromptInputButton, { onClick: () => console.log('Voice'), children: _jsx(MicIcon, {}) })] }) }), _jsx(PromptInputBody, { children: _jsx(PromptInputTextarea, { value: value, onChange: e => setValue(e.target.value), placeholder: "Ask me anything..." }) }), _jsx(PromptInputFooter, { children: _jsx(PromptInputSubmit, {}) })] })] })] }));
-};

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

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

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

@@ -1,72 +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 { Reasoning, ReasoningContent, ReasoningTrigger, } from '@/components/vercel-ai-elements/reasoning';
-const reasoningSteps = `## Step 1: Understanding the Problem
-First, I need to understand what the user is asking for. They want to know about React hooks.
-
-## Step 2: Identifying Key Concepts
-React hooks are functions that let you use state and lifecycle features in functional components.
-
-## Step 3: Structuring the Response
-I should explain:
-- What hooks are
-- Why they were introduced
-- The most commonly used hooks
-- Best practices
-
-## Step 4: Providing Examples
-Include code examples for useState and useEffect to make it concrete.
-
-## Step 5: Final Review
-Ensure the explanation is clear, concise, and helpful.`;
-const complexReasoning = `## Analysis Phase
-
-### 1. Problem Decomposition
-Breaking down the complex algorithm into smaller, manageable steps:
-- Input validation
-- Data structure selection
-- Core algorithm implementation
-- Edge case handling
-
-### 2. Complexity Consideration
-Time complexity: O(n log n)
-Space complexity: O(n)
-
-### 3. Trade-offs
-- Memory vs Speed: Chose to prioritize speed with additional memory
-- Readability vs Performance: Optimized for readability first
-
-## Implementation Phase
-
-### 4. Algorithm Selection
-Selected Dijkstra's algorithm because:
-- Optimal for single-source shortest path
-- Well-tested and reliable
-- Efficient for sparse graphs
-
-### 5. Optimization Opportunities
-- Use of heap data structure for efficiency
-- Early termination when target is reached
-- Path reconstruction capabilities
-
-## Validation Phase
-
-### 6. Test Cases Considered
-- Empty graph
-- Single node
-- Disconnected components
-- Negative weights (not applicable)
-
-### 7. Final Verification
-Confirmed algorithm correctness through:
-- Unit testing
-- Edge case validation
-- Performance benchmarking`;
-export const ReasoningShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Basic Reasoning Display" }), _jsxs(Reasoning, { children: [_jsx(ReasoningTrigger, { children: "Show reasoning (5 steps, 2.3s)" }), _jsx(ReasoningContent, { children: reasoningSteps })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Complex Reasoning Process" }), _jsxs(Reasoning, { children: [_jsx(ReasoningTrigger, { children: "Show detailed reasoning (7 steps, 4.1s)" }), _jsx(ReasoningContent, { children: complexReasoning })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Reasoning in Message Context" }), _jsxs("div", { className: "p-4 border rounded-md space-y-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Here's the solution to your algorithm problem:" }), _jsxs(Reasoning, { children: [_jsx(ReasoningTrigger, { children: "View my reasoning process" }), _jsx(ReasoningContent, { children: reasoningSteps })] }), _jsx("div", { className: "mt-4", children: _jsx("pre", { className: "bg-muted p-4 rounded text-sm overflow-x-auto", children: _jsx("code", { children: `function solution(arr) {
-  return arr.sort((a, b) => a - b);
-}` }) }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Quick Reasoning" }), _jsxs(Reasoning, { children: [_jsx(ReasoningTrigger, { children: "Show reasoning (2 steps, 0.8s)" }), _jsx(ReasoningContent, { children: "Step 1: Analyzed the input requirements. Step 2: Generated the optimal solution." })] })] })] }));
-};

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

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

package/lib/examples/vercel-ai-elements/components/ShimmerShowcase.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 { Shimmer } from '@/components/vercel-ai-elements/shimmer';
-export const ShimmerShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Default Shimmer" }), _jsx("div", { className: "p-8 border rounded-md bg-background flex items-center justify-center", children: _jsx(Shimmer, { children: "This text has a shimmer effect" }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Shimmer Heading" }), _jsx("div", { className: "p-8 border rounded-md bg-background flex items-center justify-center", children: _jsx(Shimmer, { as: "h1", className: "font-bold text-4xl", children: "Large Heading with Shimmer" }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Different Shimmer Speeds" }), _jsxs("div", { className: "p-8 border rounded-md bg-background space-y-4", children: [_jsx(Shimmer, { duration: 1, children: "Fast shimmer (1 second)" }), _jsx(Shimmer, { duration: 2, children: "Normal shimmer (2 seconds)" }), _jsx(Shimmer, { duration: 4, children: "Slow shimmer (4 seconds)" }), _jsx(Shimmer, { duration: 6, children: "Very slow shimmer (6 seconds)" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Different Shimmer Spreads" }), _jsxs("div", { className: "p-8 border rounded-md bg-background space-y-4", children: [_jsx(Shimmer, { spread: 1, children: "Narrow spread (1)" }), _jsx(Shimmer, { spread: 2, children: "Medium spread (2)" }), _jsx(Shimmer, { spread: 4, children: "Wide spread (4)" }), _jsx(Shimmer, { spread: 6, children: "Very wide spread (6)" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Combined Effects" }), _jsx("div", { className: "p-8 border rounded-md bg-background flex items-center justify-center", children: _jsx(Shimmer, { duration: 3, spread: 3, className: "text-2xl font-bold", children: "Slower shimmer with wider spread" }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Shimmer in Different Contexts" }), _jsxs("div", { className: "p-8 border rounded-md bg-background space-y-6", children: [_jsxs("div", { children: [_jsx(Shimmer, { as: "h2", className: "text-2xl font-bold mb-2", children: "Section Title" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Regular text beneath a shimmering heading" })] }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Shimmer, { className: "px-4 py-2 bg-primary text-primary-foreground rounded", children: "Button Text" }), _jsx(Shimmer, { className: "px-4 py-2 border rounded", children: "Outlined Button" })] }), _jsx("div", { className: "bg-muted p-4 rounded", children: _jsx(Shimmer, { className: "text-sm", children: "This is a shimmer effect inside a card component" }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Loading States with Shimmer" }), _jsxs("div", { className: "p-8 border rounded-md bg-background space-y-3", children: [_jsx(Shimmer, { className: "h-4 w-full bg-muted rounded", children: "Loading..." }), _jsx(Shimmer, { className: "h-4 w-3/4 bg-muted rounded", children: "Loading..." }), _jsx(Shimmer, { className: "h-4 w-5/6 bg-muted rounded", children: "Loading..." }), _jsx(Shimmer, { className: "h-4 w-2/3 bg-muted rounded", children: "Loading..." })] })] })] }));
-};

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

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

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

@@ -1,43 +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 { Source, Sources, SourcesContent, SourcesTrigger, } from '@/components/vercel-ai-elements/sources';
-const sources = [
-    {
-        href: 'https://react.dev/learn',
-        title: 'React Documentation - Learn React',
-        description: 'Official React documentation and tutorials',
-    },
-    {
-        href: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
-        title: 'MDN Web Docs - JavaScript',
-        description: 'Comprehensive JavaScript reference',
-    },
-    {
-        href: 'https://www.typescriptlang.org/docs/',
-        title: 'TypeScript Documentation',
-        description: 'Official TypeScript handbook and reference',
-    },
-    {
-        href: 'https://nodejs.org/docs/',
-        title: 'Node.js Documentation',
-        description: 'Node.js API and guides',
-    },
-];
-const articleSources = [
-    {
-        href: 'https://example.com/article1',
-        title: 'Understanding Async/Await in JavaScript',
-        description: 'A comprehensive guide to asynchronous programming',
-    },
-    {
-        href: 'https://example.com/article2',
-        title: 'React Hooks Best Practices',
-        description: 'Tips and tricks for using React hooks effectively',
-    },
-];
-export const SourcesShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Multiple Sources" }), _jsxs(Sources, { children: [_jsx(SourcesTrigger, { count: sources.length }), _jsx(SourcesContent, { children: sources.map((source, index) => (_jsx(Source, { href: source.href, title: source.title }, index))) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Fewer Sources" }), _jsxs(Sources, { children: [_jsx(SourcesTrigger, { count: articleSources.length }), _jsx(SourcesContent, { children: articleSources.map((source, index) => (_jsx(Source, { href: source.href, title: source.title }, index))) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Single Source" }), _jsxs(Sources, { children: [_jsx(SourcesTrigger, { count: 1 }), _jsx(SourcesContent, { children: _jsx(Source, { href: sources[0].href, title: sources[0].title }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Sources in Context" }), _jsxs("div", { className: "p-4 border rounded-md space-y-4", children: [_jsx("p", { className: "text-sm", children: "React hooks are a powerful feature introduced in React 16.8 that allow you to use state and other React features without writing a class." }), _jsxs(Sources, { children: [_jsxs(SourcesTrigger, { count: sources.length, children: ["View ", sources.length, " sources"] }), _jsx(SourcesContent, { children: sources.map((source, index) => (_jsx(Source, { href: source.href, title: source.title }, index))) })] })] })] })] }));
-};

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

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

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

@@ -1,31 +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 { Suggestion, Suggestions, } from '@/components/vercel-ai-elements/suggestion';
-import { useState } from 'react';
-const suggestions = [
-    'What are the latest trends in AI?',
-    'How does machine learning work?',
-    'Explain quantum computing',
-    'Best practices for React development',
-    'Tell me about TypeScript benefits',
-    'How to optimize database queries?',
-    'What is the difference between SQL and NoSQL?',
-    'Explain cloud computing basics',
-];
-const codingSuggestions = [
-    'Show me a React component example',
-    'How to use async/await in JavaScript?',
-    'Explain Git branching strategies',
-    'What are design patterns?',
-];
-export const SuggestionShowcase = () => {
-    const [selectedSuggestion, setSelectedSuggestion] = useState(null);
-    const handleSuggestionClick = (suggestion) => {
-        setSelectedSuggestion(suggestion);
-        console.log('Selected suggestion:', suggestion);
-    };
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Full Suggestion Grid" }), _jsx(Suggestions, { children: suggestions.map(suggestion => (_jsx(Suggestion, { onClick: handleSuggestionClick, suggestion: suggestion }, suggestion))) })] }), selectedSuggestion && (_jsx("div", { className: "p-4 border rounded-md bg-muted", children: _jsxs("p", { className: "text-sm", children: [_jsx("strong", { children: "Selected:" }), " ", selectedSuggestion] }) })), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Fewer Suggestions" }), _jsx(Suggestions, { children: suggestions.slice(0, 4).map(suggestion => (_jsx(Suggestion, { onClick: handleSuggestionClick, suggestion: suggestion }, suggestion))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Single Row of Suggestions" }), _jsx(Suggestions, { children: suggestions.slice(0, 3).map(suggestion => (_jsx(Suggestion, { onClick: handleSuggestionClick, suggestion: suggestion }, suggestion))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Coding-Specific Suggestions" }), _jsx(Suggestions, { children: codingSuggestions.map(suggestion => (_jsx(Suggestion, { onClick: handleSuggestionClick, suggestion: suggestion }, suggestion))) })] })] }));
-};

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

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

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

@@ -1,54 +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 { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, } from '@/components/vercel-ai-elements/tool';
-const searchParameters = {
-    query: 'React hooks tutorial',
-    maxResults: 10,
-    language: 'en',
-};
-const searchResults = [
-    {
-        title: 'React Hooks Documentation',
-        url: 'https://react.dev/reference/react',
-    },
-    { title: 'Complete Guide to React Hooks', url: 'https://example.com/guide' },
-    { title: 'React Hooks Tutorial', url: 'https://example.com/tutorial' },
-];
-const calculatorInput = {
-    operation: 'multiply',
-    a: 42,
-    b: 7,
-};
-const fileReadInput = {
-    path: '/home/user/data.json',
-    encoding: 'utf-8',
-};
-export const ToolShowcase = () => {
-    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Tool with Completed Output" }), _jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Web Search", type: "tool-web-search", state: "output-available" }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: searchParameters }), _jsx(ToolOutput, { output: searchResults, errorText: undefined })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Tool with Pending State" }), _jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Generate Text", type: "tool-generate-text", state: "input-streaming" }), _jsx(ToolContent, { children: _jsx(ToolInput, { input: { prompt: 'Write a poem about coding' } }) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Tool with Error" }), _jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Read File", type: "tool-read-file", state: "output-error" }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: fileReadInput }), _jsx(ToolOutput, { output: undefined, errorText: "File not found: /home/user/data.json" })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Simple Calculator Tool" }), _jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Calculator", type: "tool-calculator", state: "output-available" }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: calculatorInput }), _jsx(ToolOutput, { output: { result: 294 }, errorText: undefined })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Tool Execution Sequence" }), _jsxs("div", { className: "space-y-4", children: [_jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Analyze Data", type: "tool-analyze-data", state: "output-available" }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: { dataset: 'sales_2024.csv' } }), _jsx(ToolOutput, { output: {
-                                                    rows: 1523,
-                                                    columns: 12,
-                                                    summary: 'Dataset contains 1,523 sales records across 12 columns',
-                                                }, errorText: undefined })] })] }), _jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Create Visualization", type: "tool-create-visualization", state: "output-available" }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: {
-                                                    type: 'bar_chart',
-                                                    data: 'sales_by_region',
-                                                    title: 'Sales by Region 2024',
-                                                } }), _jsx(ToolOutput, { output: {
-                                                    image_url: 'https://example.com/chart.png',
-                                                    format: 'PNG',
-                                                    size: '1200x800',
-                                                }, errorText: undefined })] })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Tool with Complex Output" }), _jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Code Analysis", type: "tool-code-analysis", state: "output-available" }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: {
-                                            file: 'src/App.tsx',
-                                            checks: ['complexity', 'duplicates', 'security'],
-                                        } }), _jsx(ToolOutput, { output: {
-                                            complexity: 'Low (3.2)',
-                                            duplicates: 0,
-                                            security_issues: [],
-                                            suggestions: [
-                                                'Consider splitting large components',
-                                                'Add error boundaries',
-                                            ],
-                                        }, errorText: undefined })] })] })] })] }));
-};

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

@@ -1,13 +0,0 @@
-export * from './components/MessageShowcase';
-export * from './components/ConversationShowcase';
-export * from './components/PromptInputShowcase';
-export * from './components/ModelSelectorShowcase';
-export * from './components/ArtifactShowcase';
-export * from './components/CodeBlockShowcase';
-export * from './components/SuggestionShowcase';
-export * from './components/SourcesShowcase';
-export * from './components/ReasoningShowcase';
-export * from './components/ToolShowcase';
-export * from './components/LoaderShowcase';
-export * from './components/ShimmerShowcase';
-export { VercelAiElementsShowcase } from './VercelAiElementsShowcase';

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

@@ -1,17 +0,0 @@
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-export * from './components/MessageShowcase';
-export * from './components/ConversationShowcase';
-export * from './components/PromptInputShowcase';
-export * from './components/ModelSelectorShowcase';
-export * from './components/ArtifactShowcase';
-export * from './components/CodeBlockShowcase';
-export * from './components/SuggestionShowcase';
-export * from './components/SourcesShowcase';
-export * from './components/ReasoningShowcase';
-export * from './components/ToolShowcase';
-export * from './components/LoaderShowcase';
-export * from './components/ShimmerShowcase';
-export { VercelAiElementsShowcase } from './VercelAiElementsShowcase';

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { VercelAiElementsShowcase } from './VercelAiElementsShowcase';
-ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(VercelAiElementsShowcase, {}) }));