@datalayer/agent-runtimes 0.0.9 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/lib/{examples/components → components}/AgentConfiguration.d.ts +27 -12
- package/lib/{examples/components → components}/AgentConfiguration.js +170 -22
- package/lib/{examples/components → components}/FooterMetrics.d.ts +1 -2
- package/lib/{examples/components → components}/Header.d.ts +1 -6
- package/lib/{examples/components → components}/Header.js +5 -39
- package/lib/{examples/components → components}/HeaderControls.d.ts +1 -2
- package/lib/{examples/components → components}/HeaderControls.js +1 -1
- package/lib/{examples/components → components}/LexicalEditor.d.ts +2 -3
- package/lib/{examples/components → components}/LexicalEditor.js +2 -2
- package/lib/components/MainContent.d.ts +34 -0
- package/lib/{examples/components → components}/MainContent.js +18 -9
- package/lib/components/McpServerManager.d.ts +30 -0
- package/lib/components/McpServerManager.js +331 -0
- package/lib/{examples/components → components}/MockFileBrowser.d.ts +1 -2
- package/lib/{examples/components → components}/SessionTabs.d.ts +2 -3
- package/lib/{examples/components → components}/TimeTravel.d.ts +1 -2
- package/lib/components/chat/components/AgentDetails.d.ts +3 -1
- package/lib/components/chat/components/AgentDetails.js +323 -31
- package/lib/components/chat/components/Chat.d.ts +37 -3
- package/lib/components/chat/components/Chat.js +29 -10
- package/lib/components/chat/components/ChatFloating.d.ts +27 -2
- package/lib/components/chat/components/ChatFloating.js +17 -10
- package/lib/components/chat/components/ChatPopupStandalone.js +1 -1
- package/lib/components/chat/components/ChatSidebar.d.ts +1 -1
- package/lib/components/chat/components/ChatStandalone.d.ts +1 -1
- package/lib/components/chat/components/ChatStandalone.js +1 -1
- package/lib/components/chat/components/ContextDistribution.d.ts +70 -6
- package/lib/components/chat/components/ContextDistribution.js +11 -4
- package/lib/components/chat/components/ContextInspector.d.ts +81 -0
- package/lib/components/chat/components/ContextInspector.js +261 -0
- package/lib/components/chat/components/ContextPanel.d.ts +112 -0
- package/lib/components/chat/components/ContextPanel.js +373 -0
- package/lib/components/chat/components/base/ChatBase.d.ts +74 -19
- package/lib/components/chat/components/base/ChatBase.js +296 -37
- package/lib/components/chat/components/index.d.ts +3 -1
- package/lib/components/chat/components/index.js +2 -0
- package/lib/components/chat/extensions/ExtensionRegistry.d.ts +1 -1
- package/lib/components/chat/extensions/index.d.ts +1 -0
- package/lib/components/chat/index.d.ts +3 -3
- package/lib/components/chat/protocols/AGUIAdapter.js +24 -4
- package/lib/components/chat/protocols/VercelAIAdapter.js +35 -1
- package/lib/components/chat/store/chatStore.d.ts +2 -3
- package/lib/components/chat/store/conversationStore.d.ts +83 -0
- package/lib/components/chat/store/conversationStore.js +174 -0
- package/lib/components/chat/store/index.d.ts +2 -1
- package/lib/components/chat/store/index.js +1 -0
- package/lib/components/chat/types/inference.d.ts +17 -0
- package/lib/components/chat/types/protocol.d.ts +10 -0
- package/lib/components/index.d.ts +23 -0
- package/lib/components/index.js +11 -0
- package/lib/config/agents.d.ts +33 -0
- package/lib/config/agents.js +424 -0
- package/lib/config/index.d.ts +4 -0
- package/lib/config/index.js +8 -0
- package/lib/config/mcpServers.d.ts +18 -0
- package/lib/config/mcpServers.js +129 -0
- package/lib/config/skills.d.ts +25 -0
- package/lib/config/skills.js +54 -0
- package/lib/{lib → config}/utils.d.ts +1 -1
- package/lib/{lib → config}/utils.js +2 -2
- package/lib/examples/AgentRuntimeLexical2Example.d.ts +1 -0
- package/lib/examples/AgentRuntimeLexical2Example.js +3 -2
- package/lib/examples/AgentRuntimeLexicalExample.d.ts +1 -0
- package/lib/examples/AgentRuntimeLexicalExample.js +5 -3
- package/lib/examples/AgentRuntimeLexicalSidebarExample.d.ts +1 -0
- package/lib/examples/AgentRuntimeLexicalSidebarExample.js +3 -3
- package/lib/examples/AgentRuntimeNotebookExample.js +1 -1
- package/lib/examples/AgentSpaceFormExample.d.ts +2 -2
- package/lib/examples/AgentSpaceFormExample.js +167 -29
- package/lib/examples/CopilotKitLexicalExample.d.ts +1 -0
- package/lib/examples/CopilotKitLexicalExample.js +3 -2
- package/lib/examples/index.d.ts +1 -0
- package/lib/examples/stores/notebooks/NotebookExample2.ipynb.json +43 -43
- package/lib/hooks/useAGUI.d.ts +1 -1
- package/lib/hooks/useAGUI.js +1 -1
- package/lib/identity/types.d.ts +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +1 -0
- package/lib/runtime/index.d.ts +3 -0
- package/lib/runtime/runtimeStore.d.ts +3 -4
- package/lib/runtime/useAgentConnection.d.ts +2 -3
- package/lib/runtime/useAgentRuntime.d.ts +2 -3
- package/lib/stories/Cell.stories.js +1 -1
- package/lib/tools/adapters/agent-runtimes/notebookHooks.js +1 -0
- package/lib/tools/adapters/copilotkit/notebookHooks.js +1 -0
- package/lib/types.d.ts +150 -0
- package/package.json +4 -5
- package/scripts/apply-patches.sh +1 -1
- package/scripts/codegen/generate_agents.py +452 -0
- package/scripts/codegen/generate_mcp_servers.py +424 -0
- package/scripts/codegen/generate_skills.py +321 -0
- package/scripts/download-ai-elements.py +35 -20
- package/scripts/sync-jupyter.sh +6 -0
- package/lib/components/ui/accordion.d.ts +0 -7
- package/lib/components/ui/accordion.js +0 -22
- package/lib/components/ui/alert-dialog.d.ts +0 -14
- package/lib/components/ui/alert-dialog.js +0 -43
- package/lib/components/ui/alert.d.ts +0 -9
- package/lib/components/ui/alert.js +0 -24
- package/lib/components/ui/aspect-ratio.d.ts +0 -3
- package/lib/components/ui/aspect-ratio.js +0 -11
- package/lib/components/ui/avatar.d.ts +0 -6
- package/lib/components/ui/avatar.js +0 -18
- package/lib/components/ui/badge.d.ts +0 -9
- package/lib/components/ui/badge.js +0 -22
- package/lib/components/ui/breadcrumb.d.ts +0 -11
- package/lib/components/ui/breadcrumb.js +0 -27
- package/lib/components/ui/button-group.d.ts +0 -11
- package/lib/components/ui/button-group.js +0 -31
- package/lib/components/ui/button.d.ts +0 -13
- package/lib/components/ui/button.js +0 -39
- package/lib/components/ui/calendar.d.ts +0 -8
- package/lib/components/ui/calendar.js +0 -80
- package/lib/components/ui/card.d.ts +0 -9
- package/lib/components/ui/card.js +0 -24
- package/lib/components/ui/carousel.d.ts +0 -19
- package/lib/components/ui/carousel.js +0 -95
- package/lib/components/ui/chart.d.ts +0 -53
- package/lib/components/ui/chart.js +0 -136
- package/lib/components/ui/checkbox.d.ts +0 -4
- package/lib/components/ui/checkbox.js +0 -13
- package/lib/components/ui/collapsible.d.ts +0 -5
- package/lib/components/ui/collapsible.js +0 -17
- package/lib/components/ui/command.d.ts +0 -18
- package/lib/components/ui/command.js +0 -38
- package/lib/components/ui/context-menu.d.ts +0 -25
- package/lib/components/ui/context-menu.js +0 -55
- package/lib/components/ui/dialog.d.ts +0 -15
- package/lib/components/ui/dialog.js +0 -40
- package/lib/components/ui/drawer.d.ts +0 -13
- package/lib/components/ui/drawer.js +0 -39
- package/lib/components/ui/dropdown-menu.d.ts +0 -25
- package/lib/components/ui/dropdown-menu.js +0 -55
- package/lib/components/ui/empty.d.ts +0 -11
- package/lib/components/ui/empty.js +0 -37
- package/lib/components/ui/field.d.ts +0 -24
- package/lib/components/ui/field.js +0 -80
- package/lib/components/ui/form.d.ts +0 -24
- package/lib/components/ui/form.js +0 -63
- package/lib/components/ui/hover-card.d.ts +0 -6
- package/lib/components/ui/hover-card.js +0 -18
- package/lib/components/ui/input-group.d.ts +0 -19
- package/lib/components/ui/input-group.js +0 -69
- package/lib/components/ui/input-otp.d.ts +0 -11
- package/lib/components/ui/input-otp.js +0 -25
- package/lib/components/ui/input.d.ts +0 -3
- package/lib/components/ui/input.js +0 -6
- package/lib/components/ui/item.d.ts +0 -23
- package/lib/components/ui/item.js +0 -66
- package/lib/components/ui/kbd.d.ts +0 -3
- package/lib/components/ui/kbd.js +0 -13
- package/lib/components/ui/label.d.ts +0 -4
- package/lib/components/ui/label.js +0 -12
- package/lib/components/ui/menubar.d.ts +0 -26
- package/lib/components/ui/menubar.js +0 -58
- package/lib/components/ui/navigation-menu.d.ts +0 -14
- package/lib/components/ui/navigation-menu.js +0 -31
- package/lib/components/ui/pagination.d.ts +0 -13
- package/lib/components/ui/pagination.js +0 -29
- package/lib/components/ui/popover.d.ts +0 -7
- package/lib/components/ui/popover.js +0 -21
- package/lib/components/ui/progress.d.ts +0 -4
- package/lib/components/ui/progress.js +0 -12
- package/lib/components/ui/radio-group.d.ts +0 -5
- package/lib/components/ui/radio-group.js +0 -16
- package/lib/components/ui/resizable.d.ts +0 -8
- package/lib/components/ui/resizable.js +0 -19
- package/lib/components/ui/scroll-area.d.ts +0 -5
- package/lib/components/ui/scroll-area.js +0 -17
- package/lib/components/ui/select.d.ts +0 -15
- package/lib/components/ui/select.js +0 -42
- package/lib/components/ui/separator.d.ts +0 -4
- package/lib/components/ui/separator.js +0 -12
- package/lib/components/ui/sheet.d.ts +0 -13
- package/lib/components/ui/sheet.js +0 -44
- package/lib/components/ui/sidebar.d.ts +0 -69
- package/lib/components/ui/sidebar.js +0 -216
- package/lib/components/ui/skeleton.d.ts +0 -2
- package/lib/components/ui/skeleton.js +0 -10
- package/lib/components/ui/slider.d.ts +0 -4
- package/lib/components/ui/slider.js +0 -18
- package/lib/components/ui/sonner.d.ts +0 -3
- package/lib/components/ui/sonner.js +0 -25
- package/lib/components/ui/spinner.d.ts +0 -2
- package/lib/components/ui/spinner.js +0 -11
- package/lib/components/ui/switch.d.ts +0 -4
- package/lib/components/ui/switch.js +0 -12
- package/lib/components/ui/table.d.ts +0 -10
- package/lib/components/ui/table.js +0 -32
- package/lib/components/ui/tabs.d.ts +0 -7
- package/lib/components/ui/tabs.js +0 -21
- package/lib/components/ui/textarea.d.ts +0 -3
- package/lib/components/ui/textarea.js +0 -6
- package/lib/components/ui/toast.d.ts +0 -15
- package/lib/components/ui/toast.js +0 -38
- package/lib/components/ui/toaster.d.ts +0 -1
- package/lib/components/ui/toaster.js +0 -14
- package/lib/components/ui/toggle-group.d.ts +0 -9
- package/lib/components/ui/toggle-group.js +0 -26
- package/lib/components/ui/toggle.d.ts +0 -9
- package/lib/components/ui/toggle.js +0 -30
- package/lib/components/ui/tooltip.d.ts +0 -7
- package/lib/components/ui/tooltip.js +0 -21
- package/lib/components/vercel-ai-elements/artifact.d.ts +0 -23
- package/lib/components/vercel-ai-elements/artifact.js +0 -24
- package/lib/components/vercel-ai-elements/code-block.d.ts +0 -17
- package/lib/components/vercel-ai-elements/code-block.js +0 -94
- package/lib/components/vercel-ai-elements/conversation.d.ts +0 -15
- package/lib/components/vercel-ai-elements/conversation.js +0 -21
- package/lib/components/vercel-ai-elements/loader.d.ts +0 -5
- package/lib/components/vercel-ai-elements/loader.js +0 -8
- package/lib/components/vercel-ai-elements/message.d.ts +0 -46
- package/lib/components/vercel-ai-elements/message.js +0 -109
- package/lib/components/vercel-ai-elements/model-selector.d.ts +0 -35
- package/lib/components/vercel-ai-elements/model-selector.js +0 -22
- package/lib/components/vercel-ai-elements/prompt-input.d.ts +0 -195
- package/lib/components/vercel-ai-elements/prompt-input.js +0 -589
- package/lib/components/vercel-ai-elements/reasoning.d.ts +0 -26
- package/lib/components/vercel-ai-elements/reasoning.js +0 -80
- package/lib/components/vercel-ai-elements/shimmer.d.ts +0 -9
- package/lib/components/vercel-ai-elements/shimmer.js +0 -22
- package/lib/components/vercel-ai-elements/sources.d.ts +0 -12
- package/lib/components/vercel-ai-elements/sources.js +0 -13
- package/lib/components/vercel-ai-elements/suggestion.d.ts +0 -10
- package/lib/components/vercel-ai-elements/suggestion.js +0 -16
- package/lib/components/vercel-ai-elements/tool.d.ts +0 -23
- package/lib/components/vercel-ai-elements/tool.js +0 -52
- package/lib/examples/components/MainContent.d.ts +0 -19
- package/lib/examples/components/index.d.ts +0 -10
- package/lib/examples/components/index.js +0 -13
- package/lib/examples/vercel-ai-elements/VercelAiElementsShowcase.d.ts +0 -12
- package/lib/examples/vercel-ai-elements/VercelAiElementsShowcase.js +0 -69
- package/lib/examples/vercel-ai-elements/components/ArtifactShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/ArtifactShowcase.js +0 -85
- package/lib/examples/vercel-ai-elements/components/CodeBlockShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/CodeBlockShowcase.js +0 -62
- package/lib/examples/vercel-ai-elements/components/ConversationShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/ConversationShowcase.js +0 -51
- package/lib/examples/vercel-ai-elements/components/LoaderShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/LoaderShowcase.js +0 -9
- package/lib/examples/vercel-ai-elements/components/MessageShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/MessageShowcase.js +0 -56
- package/lib/examples/vercel-ai-elements/components/ModelSelectorShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/ModelSelectorShowcase.js +0 -50
- package/lib/examples/vercel-ai-elements/components/PromptInputShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/PromptInputShowcase.js +0 -16
- package/lib/examples/vercel-ai-elements/components/ReasoningShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/ReasoningShowcase.js +0 -72
- package/lib/examples/vercel-ai-elements/components/ShimmerShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/ShimmerShowcase.js +0 -9
- package/lib/examples/vercel-ai-elements/components/SourcesShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/SourcesShowcase.js +0 -43
- package/lib/examples/vercel-ai-elements/components/SuggestionShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/SuggestionShowcase.js +0 -31
- package/lib/examples/vercel-ai-elements/components/ToolShowcase.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/components/ToolShowcase.js +0 -54
- package/lib/examples/vercel-ai-elements/index.d.ts +0 -13
- package/lib/examples/vercel-ai-elements/index.js +0 -17
- package/lib/examples/vercel-ai-elements/main.d.ts +0 -1
- package/lib/examples/vercel-ai-elements/main.js +0 -9
- package/lib/examples/vercel-ai-elements/showcase.css +0 -128
- package/lib/hooks/useToast.d.ts +0 -44
- package/lib/hooks/useToast.js +0 -128
- package/patches/@datalayer+jupyter-lexical+1.0.8.patch +0 -11628
- package/patches/@datalayer+jupyter-react+2.0.2.patch +0 -5338
- package/style/showcase-vercel-ai.css +0 -137
- /package/lib/{examples/components → components}/FooterMetrics.js +0 -0
- /package/lib/{examples/components → components}/MockFileBrowser.js +0 -0
- /package/lib/{examples/components → components}/SessionTabs.js +0 -0
- /package/lib/{examples/components → components}/TimeTravel.js +0 -0
- /package/lib/{models → types}/AIAgent.d.ts +0 -0
- /package/lib/{models → types}/AIAgent.js +0 -0
- /package/lib/{models → types}/index.d.ts +0 -0
- /package/lib/{models → types}/index.js +0 -0
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { Message, MessageAction, MessageActions, MessageAttachment, MessageAttachments, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, } from '@/components/vercel-ai-elements/message';
|
|
7
|
-
import { CopyIcon, RefreshCcwIcon, ThumbsDownIcon, ThumbsUpIcon, } from 'lucide-react';
|
|
8
|
-
import { nanoid } from 'nanoid';
|
|
9
|
-
import { useState } from 'react';
|
|
10
|
-
export const MessageShowcase = () => {
|
|
11
|
-
const [currentVersion, setCurrentVersion] = useState(0);
|
|
12
|
-
const versions = [
|
|
13
|
-
{
|
|
14
|
-
id: nanoid(),
|
|
15
|
-
content: `# React Hooks Guide
|
|
16
|
-
|
|
17
|
-
React hooks are functions that let you "hook into" React state and lifecycle features from function components.
|
|
18
|
-
|
|
19
|
-
## Core Hooks
|
|
20
|
-
|
|
21
|
-
### useState
|
|
22
|
-
Adds state to functional components:
|
|
23
|
-
|
|
24
|
-
\`\`\`jsx
|
|
25
|
-
const [count, setCount] = useState(0);
|
|
26
|
-
\`\`\`
|
|
27
|
-
|
|
28
|
-
### useEffect
|
|
29
|
-
Handles side effects (data fetching, subscriptions, DOM updates).`,
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
id: nanoid(),
|
|
33
|
-
content: `# React Hooks - Comprehensive Guide
|
|
34
|
-
|
|
35
|
-
Hooks revolutionized React by allowing function components to use state and other React features.
|
|
36
|
-
|
|
37
|
-
## Essential Hooks
|
|
38
|
-
|
|
39
|
-
1. **useState** - State management
|
|
40
|
-
2. **useEffect** - Side effects
|
|
41
|
-
3. **useContext** - Context consumption
|
|
42
|
-
4. **useReducer** - Complex state logic`,
|
|
43
|
-
},
|
|
44
|
-
];
|
|
45
|
-
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: {
|
|
46
|
-
type: 'file',
|
|
47
|
-
url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
|
|
48
|
-
mediaType: 'image/jpeg',
|
|
49
|
-
filename: 'palace-of-fine-arts.jpg',
|
|
50
|
-
} }), _jsx(MessageAttachment, { data: {
|
|
51
|
-
type: 'file',
|
|
52
|
-
url: '',
|
|
53
|
-
mediaType: 'application/pdf',
|
|
54
|
-
filename: 'react-hooks-guide.pdf',
|
|
55
|
-
} })] })] })] })] }));
|
|
56
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const ModelSelectorShowcase: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorTrigger, } from '@/components/vercel-ai-elements/model-selector';
|
|
7
|
-
import { useState } from 'react';
|
|
8
|
-
const models = [
|
|
9
|
-
{ id: 'gpt-4', name: 'GPT-4', provider: 'OpenAI', logo: '🤖' },
|
|
10
|
-
{
|
|
11
|
-
id: 'gpt-3.5-turbo',
|
|
12
|
-
name: 'GPT-3.5 Turbo',
|
|
13
|
-
provider: 'OpenAI',
|
|
14
|
-
logo: '🤖',
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
id: 'claude-3-opus',
|
|
18
|
-
name: 'Claude 3 Opus',
|
|
19
|
-
provider: 'Anthropic',
|
|
20
|
-
logo: '🧠',
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
id: 'claude-3-sonnet',
|
|
24
|
-
name: 'Claude 3 Sonnet',
|
|
25
|
-
provider: 'Anthropic',
|
|
26
|
-
logo: '🧠',
|
|
27
|
-
},
|
|
28
|
-
{ id: 'gemini-pro', name: 'Gemini Pro', provider: 'Google', logo: '✨' },
|
|
29
|
-
{ id: 'llama-2-70b', name: 'Llama 2 70B', provider: 'Meta', logo: '🦙' },
|
|
30
|
-
];
|
|
31
|
-
export const ModelSelectorShowcase = () => {
|
|
32
|
-
const [selectedModel, setSelectedModel] = useState('gpt-4');
|
|
33
|
-
const [searchQuery, setSearchQuery] = useState('');
|
|
34
|
-
const [open, setOpen] = useState(false);
|
|
35
|
-
const filteredModels = models.filter(model => model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
36
|
-
model.provider.toLowerCase().includes(searchQuery.toLowerCase()));
|
|
37
|
-
const groupedModels = filteredModels.reduce((acc, model) => {
|
|
38
|
-
if (!acc[model.provider]) {
|
|
39
|
-
acc[model.provider] = [];
|
|
40
|
-
}
|
|
41
|
-
acc[model.provider].push(model);
|
|
42
|
-
return acc;
|
|
43
|
-
}, {});
|
|
44
|
-
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
|
|
45
|
-
.find(m => m.id === selectedModel)
|
|
46
|
-
?.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: () => {
|
|
47
|
-
setSelectedModel(model.id);
|
|
48
|
-
setOpen(false);
|
|
49
|
-
}, 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] })] })] })] }));
|
|
50
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const PromptInputShowcase: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { PromptInput, PromptInputActionAddAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputHeader, PromptInputSubmit, PromptInputTextarea, PromptInputTools, } from '@/components/vercel-ai-elements/prompt-input';
|
|
7
|
-
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu';
|
|
8
|
-
import { GlobeIcon, MicIcon, PlusIcon } from 'lucide-react';
|
|
9
|
-
import { useState } from 'react';
|
|
10
|
-
export const PromptInputShowcase = () => {
|
|
11
|
-
const [value, setValue] = useState('');
|
|
12
|
-
const handleSubmit = (message) => {
|
|
13
|
-
console.log('Submitted:', message);
|
|
14
|
-
};
|
|
15
|
-
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, {}) })] })] })] }));
|
|
16
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const ReasoningShowcase: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { Reasoning, ReasoningContent, ReasoningTrigger, } from '@/components/vercel-ai-elements/reasoning';
|
|
7
|
-
const reasoningSteps = `## Step 1: Understanding the Problem
|
|
8
|
-
First, I need to understand what the user is asking for. They want to know about React hooks.
|
|
9
|
-
|
|
10
|
-
## Step 2: Identifying Key Concepts
|
|
11
|
-
React hooks are functions that let you use state and lifecycle features in functional components.
|
|
12
|
-
|
|
13
|
-
## Step 3: Structuring the Response
|
|
14
|
-
I should explain:
|
|
15
|
-
- What hooks are
|
|
16
|
-
- Why they were introduced
|
|
17
|
-
- The most commonly used hooks
|
|
18
|
-
- Best practices
|
|
19
|
-
|
|
20
|
-
## Step 4: Providing Examples
|
|
21
|
-
Include code examples for useState and useEffect to make it concrete.
|
|
22
|
-
|
|
23
|
-
## Step 5: Final Review
|
|
24
|
-
Ensure the explanation is clear, concise, and helpful.`;
|
|
25
|
-
const complexReasoning = `## Analysis Phase
|
|
26
|
-
|
|
27
|
-
### 1. Problem Decomposition
|
|
28
|
-
Breaking down the complex algorithm into smaller, manageable steps:
|
|
29
|
-
- Input validation
|
|
30
|
-
- Data structure selection
|
|
31
|
-
- Core algorithm implementation
|
|
32
|
-
- Edge case handling
|
|
33
|
-
|
|
34
|
-
### 2. Complexity Consideration
|
|
35
|
-
Time complexity: O(n log n)
|
|
36
|
-
Space complexity: O(n)
|
|
37
|
-
|
|
38
|
-
### 3. Trade-offs
|
|
39
|
-
- Memory vs Speed: Chose to prioritize speed with additional memory
|
|
40
|
-
- Readability vs Performance: Optimized for readability first
|
|
41
|
-
|
|
42
|
-
## Implementation Phase
|
|
43
|
-
|
|
44
|
-
### 4. Algorithm Selection
|
|
45
|
-
Selected Dijkstra's algorithm because:
|
|
46
|
-
- Optimal for single-source shortest path
|
|
47
|
-
- Well-tested and reliable
|
|
48
|
-
- Efficient for sparse graphs
|
|
49
|
-
|
|
50
|
-
### 5. Optimization Opportunities
|
|
51
|
-
- Use of heap data structure for efficiency
|
|
52
|
-
- Early termination when target is reached
|
|
53
|
-
- Path reconstruction capabilities
|
|
54
|
-
|
|
55
|
-
## Validation Phase
|
|
56
|
-
|
|
57
|
-
### 6. Test Cases Considered
|
|
58
|
-
- Empty graph
|
|
59
|
-
- Single node
|
|
60
|
-
- Disconnected components
|
|
61
|
-
- Negative weights (not applicable)
|
|
62
|
-
|
|
63
|
-
### 7. Final Verification
|
|
64
|
-
Confirmed algorithm correctness through:
|
|
65
|
-
- Unit testing
|
|
66
|
-
- Edge case validation
|
|
67
|
-
- Performance benchmarking`;
|
|
68
|
-
export const ReasoningShowcase = () => {
|
|
69
|
-
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) {
|
|
70
|
-
return arr.sort((a, b) => a - b);
|
|
71
|
-
}` }) }) })] })] }), _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." })] })] })] }));
|
|
72
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const ShimmerShowcase: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { Shimmer } from '@/components/vercel-ai-elements/shimmer';
|
|
7
|
-
export const ShimmerShowcase = () => {
|
|
8
|
-
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..." })] })] })] }));
|
|
9
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const SourcesShowcase: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { Source, Sources, SourcesContent, SourcesTrigger, } from '@/components/vercel-ai-elements/sources';
|
|
7
|
-
const sources = [
|
|
8
|
-
{
|
|
9
|
-
href: 'https://react.dev/learn',
|
|
10
|
-
title: 'React Documentation - Learn React',
|
|
11
|
-
description: 'Official React documentation and tutorials',
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
href: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
|
|
15
|
-
title: 'MDN Web Docs - JavaScript',
|
|
16
|
-
description: 'Comprehensive JavaScript reference',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
href: 'https://www.typescriptlang.org/docs/',
|
|
20
|
-
title: 'TypeScript Documentation',
|
|
21
|
-
description: 'Official TypeScript handbook and reference',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
href: 'https://nodejs.org/docs/',
|
|
25
|
-
title: 'Node.js Documentation',
|
|
26
|
-
description: 'Node.js API and guides',
|
|
27
|
-
},
|
|
28
|
-
];
|
|
29
|
-
const articleSources = [
|
|
30
|
-
{
|
|
31
|
-
href: 'https://example.com/article1',
|
|
32
|
-
title: 'Understanding Async/Await in JavaScript',
|
|
33
|
-
description: 'A comprehensive guide to asynchronous programming',
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
href: 'https://example.com/article2',
|
|
37
|
-
title: 'React Hooks Best Practices',
|
|
38
|
-
description: 'Tips and tricks for using React hooks effectively',
|
|
39
|
-
},
|
|
40
|
-
];
|
|
41
|
-
export const SourcesShowcase = () => {
|
|
42
|
-
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))) })] })] })] })] }));
|
|
43
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const SuggestionShowcase: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { Suggestion, Suggestions, } from '@/components/vercel-ai-elements/suggestion';
|
|
7
|
-
import { useState } from 'react';
|
|
8
|
-
const suggestions = [
|
|
9
|
-
'What are the latest trends in AI?',
|
|
10
|
-
'How does machine learning work?',
|
|
11
|
-
'Explain quantum computing',
|
|
12
|
-
'Best practices for React development',
|
|
13
|
-
'Tell me about TypeScript benefits',
|
|
14
|
-
'How to optimize database queries?',
|
|
15
|
-
'What is the difference between SQL and NoSQL?',
|
|
16
|
-
'Explain cloud computing basics',
|
|
17
|
-
];
|
|
18
|
-
const codingSuggestions = [
|
|
19
|
-
'Show me a React component example',
|
|
20
|
-
'How to use async/await in JavaScript?',
|
|
21
|
-
'Explain Git branching strategies',
|
|
22
|
-
'What are design patterns?',
|
|
23
|
-
];
|
|
24
|
-
export const SuggestionShowcase = () => {
|
|
25
|
-
const [selectedSuggestion, setSelectedSuggestion] = useState(null);
|
|
26
|
-
const handleSuggestionClick = (suggestion) => {
|
|
27
|
-
setSelectedSuggestion(suggestion);
|
|
28
|
-
console.log('Selected suggestion:', suggestion);
|
|
29
|
-
};
|
|
30
|
-
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))) })] })] }));
|
|
31
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const ToolShowcase: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, } from '@/components/vercel-ai-elements/tool';
|
|
7
|
-
const searchParameters = {
|
|
8
|
-
query: 'React hooks tutorial',
|
|
9
|
-
maxResults: 10,
|
|
10
|
-
language: 'en',
|
|
11
|
-
};
|
|
12
|
-
const searchResults = [
|
|
13
|
-
{
|
|
14
|
-
title: 'React Hooks Documentation',
|
|
15
|
-
url: 'https://react.dev/reference/react',
|
|
16
|
-
},
|
|
17
|
-
{ title: 'Complete Guide to React Hooks', url: 'https://example.com/guide' },
|
|
18
|
-
{ title: 'React Hooks Tutorial', url: 'https://example.com/tutorial' },
|
|
19
|
-
];
|
|
20
|
-
const calculatorInput = {
|
|
21
|
-
operation: 'multiply',
|
|
22
|
-
a: 42,
|
|
23
|
-
b: 7,
|
|
24
|
-
};
|
|
25
|
-
const fileReadInput = {
|
|
26
|
-
path: '/home/user/data.json',
|
|
27
|
-
encoding: 'utf-8',
|
|
28
|
-
};
|
|
29
|
-
export const ToolShowcase = () => {
|
|
30
|
-
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: {
|
|
31
|
-
rows: 1523,
|
|
32
|
-
columns: 12,
|
|
33
|
-
summary: 'Dataset contains 1,523 sales records across 12 columns',
|
|
34
|
-
}, errorText: undefined })] })] }), _jsxs(Tool, { children: [_jsx(ToolHeader, { title: "Create Visualization", type: "tool-create-visualization", state: "output-available" }), _jsxs(ToolContent, { children: [_jsx(ToolInput, { input: {
|
|
35
|
-
type: 'bar_chart',
|
|
36
|
-
data: 'sales_by_region',
|
|
37
|
-
title: 'Sales by Region 2024',
|
|
38
|
-
} }), _jsx(ToolOutput, { output: {
|
|
39
|
-
image_url: 'https://example.com/chart.png',
|
|
40
|
-
format: 'PNG',
|
|
41
|
-
size: '1200x800',
|
|
42
|
-
}, 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: {
|
|
43
|
-
file: 'src/App.tsx',
|
|
44
|
-
checks: ['complexity', 'duplicates', 'security'],
|
|
45
|
-
} }), _jsx(ToolOutput, { output: {
|
|
46
|
-
complexity: 'Low (3.2)',
|
|
47
|
-
duplicates: 0,
|
|
48
|
-
security_issues: [],
|
|
49
|
-
suggestions: [
|
|
50
|
-
'Consider splitting large components',
|
|
51
|
-
'Add error boundaries',
|
|
52
|
-
],
|
|
53
|
-
}, errorText: undefined })] })] })] })] }));
|
|
54
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export * from './components/MessageShowcase';
|
|
2
|
-
export * from './components/ConversationShowcase';
|
|
3
|
-
export * from './components/PromptInputShowcase';
|
|
4
|
-
export * from './components/ModelSelectorShowcase';
|
|
5
|
-
export * from './components/ArtifactShowcase';
|
|
6
|
-
export * from './components/CodeBlockShowcase';
|
|
7
|
-
export * from './components/SuggestionShowcase';
|
|
8
|
-
export * from './components/SourcesShowcase';
|
|
9
|
-
export * from './components/ReasoningShowcase';
|
|
10
|
-
export * from './components/ToolShowcase';
|
|
11
|
-
export * from './components/LoaderShowcase';
|
|
12
|
-
export * from './components/ShimmerShowcase';
|
|
13
|
-
export { VercelAiElementsShowcase } from './VercelAiElementsShowcase';
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
3
|
-
* Distributed under the terms of the Modified BSD License.
|
|
4
|
-
*/
|
|
5
|
-
export * from './components/MessageShowcase';
|
|
6
|
-
export * from './components/ConversationShowcase';
|
|
7
|
-
export * from './components/PromptInputShowcase';
|
|
8
|
-
export * from './components/ModelSelectorShowcase';
|
|
9
|
-
export * from './components/ArtifactShowcase';
|
|
10
|
-
export * from './components/CodeBlockShowcase';
|
|
11
|
-
export * from './components/SuggestionShowcase';
|
|
12
|
-
export * from './components/SourcesShowcase';
|
|
13
|
-
export * from './components/ReasoningShowcase';
|
|
14
|
-
export * from './components/ToolShowcase';
|
|
15
|
-
export * from './components/LoaderShowcase';
|
|
16
|
-
export * from './components/ShimmerShowcase';
|
|
17
|
-
export { VercelAiElementsShowcase } from './VercelAiElementsShowcase';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/*
|
|
3
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
4
|
-
* Distributed under the terms of the Modified BSD License.
|
|
5
|
-
*/
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import ReactDOM from 'react-dom/client';
|
|
8
|
-
import { VercelAiElementsShowcase } from './VercelAiElementsShowcase';
|
|
9
|
-
ReactDOM.createRoot(document.getElementById('root')).render(_jsx(React.StrictMode, { children: _jsx(VercelAiElementsShowcase, {}) }));
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2025-2026 Datalayer, Inc.
|
|
3
|
-
* Distributed under the terms of the Modified BSD License.
|
|
4
|
-
*
|
|
5
|
-
* Showcase-specific styles for Vercel AI Elements
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
/* Additional showcase-specific styles */
|
|
9
|
-
:root {
|
|
10
|
-
--showcase-max-width: 1400px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.showcase-container {
|
|
14
|
-
max-width: var(--showcase-max-width);
|
|
15
|
-
margin: 0 auto;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* Ensure proper spacing in showcase examples */
|
|
19
|
-
.space-y-8 > * + * {
|
|
20
|
-
margin-top: 2rem;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.space-y-4 > * + * {
|
|
24
|
-
margin-top: 1rem;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.space-y-3 > * + * {
|
|
28
|
-
margin-top: 0.75rem;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.space-y-2 > * + * {
|
|
32
|
-
margin-top: 0.5rem;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* Prose styles for documentation content */
|
|
36
|
-
.prose {
|
|
37
|
-
color: var(--color-fg-default);
|
|
38
|
-
max-width: 65ch;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.prose h1 {
|
|
42
|
-
font-size: 2em;
|
|
43
|
-
margin-top: 0;
|
|
44
|
-
margin-bottom: 0.8em;
|
|
45
|
-
line-height: 1.1;
|
|
46
|
-
font-weight: 700;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.prose h2 {
|
|
50
|
-
font-size: 1.5em;
|
|
51
|
-
margin-top: 2em;
|
|
52
|
-
margin-bottom: 1em;
|
|
53
|
-
line-height: 1.3;
|
|
54
|
-
font-weight: 600;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.prose h3 {
|
|
58
|
-
font-size: 1.25em;
|
|
59
|
-
margin-top: 1.6em;
|
|
60
|
-
margin-bottom: 0.6em;
|
|
61
|
-
line-height: 1.4;
|
|
62
|
-
font-weight: 600;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.prose p {
|
|
66
|
-
margin-top: 1.25em;
|
|
67
|
-
margin-bottom: 1.25em;
|
|
68
|
-
line-height: 1.7;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.prose pre {
|
|
72
|
-
background-color: var(--color-canvas-subtle);
|
|
73
|
-
border-radius: 0.375rem;
|
|
74
|
-
padding: 1em;
|
|
75
|
-
overflow-x: auto;
|
|
76
|
-
margin-top: 1.7em;
|
|
77
|
-
margin-bottom: 1.7em;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.prose code {
|
|
81
|
-
background-color: var(--color-canvas-subtle);
|
|
82
|
-
border-radius: 0.25rem;
|
|
83
|
-
padding: 0.2em 0.4em;
|
|
84
|
-
font-size: 0.875em;
|
|
85
|
-
font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.prose pre code {
|
|
89
|
-
background-color: transparent;
|
|
90
|
-
padding: 0;
|
|
91
|
-
font-size: inherit;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.prose ul {
|
|
95
|
-
margin-top: 1.25em;
|
|
96
|
-
margin-bottom: 1.25em;
|
|
97
|
-
padding-left: 1.625em;
|
|
98
|
-
list-style-type: disc;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.prose li {
|
|
102
|
-
margin-top: 0.5em;
|
|
103
|
-
margin-bottom: 0.5em;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.prose strong {
|
|
107
|
-
font-weight: 600;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* Ensure code blocks in examples are visible */
|
|
111
|
-
.border {
|
|
112
|
-
border-width: 1px;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/* Dark mode adjustments */
|
|
116
|
-
@media (prefers-color-scheme: dark) {
|
|
117
|
-
.prose {
|
|
118
|
-
color: var(--color-fg-default);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.prose code {
|
|
122
|
-
background-color: rgba(110, 118, 129, 0.4);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.prose pre {
|
|
126
|
-
background-color: rgba(110, 118, 129, 0.2);
|
|
127
|
-
}
|
|
128
|
-
}
|
package/lib/hooks/useToast.d.ts
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
|
|
3
|
-
type ToasterToast = ToastProps & {
|
|
4
|
-
id: string;
|
|
5
|
-
title?: React.ReactNode;
|
|
6
|
-
description?: React.ReactNode;
|
|
7
|
-
action?: ToastActionElement;
|
|
8
|
-
};
|
|
9
|
-
declare const actionTypes: {
|
|
10
|
-
readonly ADD_TOAST: "ADD_TOAST";
|
|
11
|
-
readonly UPDATE_TOAST: "UPDATE_TOAST";
|
|
12
|
-
readonly DISMISS_TOAST: "DISMISS_TOAST";
|
|
13
|
-
readonly REMOVE_TOAST: "REMOVE_TOAST";
|
|
14
|
-
};
|
|
15
|
-
type ActionType = typeof actionTypes;
|
|
16
|
-
type Action = {
|
|
17
|
-
type: ActionType['ADD_TOAST'];
|
|
18
|
-
toast: ToasterToast;
|
|
19
|
-
} | {
|
|
20
|
-
type: ActionType['UPDATE_TOAST'];
|
|
21
|
-
toast: Partial<ToasterToast>;
|
|
22
|
-
} | {
|
|
23
|
-
type: ActionType['DISMISS_TOAST'];
|
|
24
|
-
toastId?: ToasterToast['id'];
|
|
25
|
-
} | {
|
|
26
|
-
type: ActionType['REMOVE_TOAST'];
|
|
27
|
-
toastId?: ToasterToast['id'];
|
|
28
|
-
};
|
|
29
|
-
interface State {
|
|
30
|
-
toasts: ToasterToast[];
|
|
31
|
-
}
|
|
32
|
-
export declare const reducer: (state: State, action: Action) => State;
|
|
33
|
-
type Toast = Omit<ToasterToast, 'id'>;
|
|
34
|
-
declare function toast({ ...props }: Toast): {
|
|
35
|
-
id: string;
|
|
36
|
-
dismiss: () => void;
|
|
37
|
-
update: (props: ToasterToast) => void;
|
|
38
|
-
};
|
|
39
|
-
declare function useToast(): {
|
|
40
|
-
toast: typeof toast;
|
|
41
|
-
dismiss: (toastId?: string) => void;
|
|
42
|
-
toasts: ToasterToast[];
|
|
43
|
-
};
|
|
44
|
-
export { useToast, toast };
|