@sampleapp.ai/sdk 1.0.28 → 1.0.30

package/dist/components/sandbox/index.js

@@ -0,0 +1,4 @@
+export { default as Sandbox } from "./Sandbox";
+export { SandboxHome, SandboxCard } from "./sandbox-home";
+// Re-export guardian components for advanced usage
+export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, createSandboxUrlConfigs, } from "./guardian";

package/dist/components/sandbox/sandbox-control-bar.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { ExternalLinkIcon, RefreshCwIcon, LoaderIcon } from "../icons";
+/**
+ * Control bar for the sandbox with refresh and external link buttons.
+ */
+export function SandboxControlBar({ src, themeColor, onRefresh, onOpenExternal, isLoading, }) {
+    return (React.createElement("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "8px 12px",
+            borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            backdropFilter: "blur(8px)",
+        } },
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                flex: 1,
+                minWidth: 0,
+            } },
+            React.createElement("div", { style: {
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: isLoading ? "#f59e0b" : "#22c55e",
+                    flexShrink: 0,
+                } }),
+            React.createElement("span", { style: {
+                    fontSize: "12px",
+                    color: "rgba(255, 255, 255, 0.6)",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    fontFamily: "monospace",
+                } }, src)),
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+            } },
+            React.createElement("button", { onClick: onRefresh, disabled: isLoading, style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "28px",
+                    height: "28px",
+                    borderRadius: "6px",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    color: "rgba(255, 255, 255, 0.7)",
+                    cursor: isLoading ? "not-allowed" : "pointer",
+                    opacity: isLoading ? 0.5 : 1,
+                    transition: "all 0.15s ease",
+                }, onMouseEnter: (e) => {
+                    if (!isLoading) {
+                        e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
+                        e.currentTarget.style.color = themeColor;
+                    }
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = "rgba(255, 255, 255, 0.7)";
+                }, title: "Refresh" }, isLoading ? (React.createElement(LoaderIcon, { size: 14, style: { animation: "spin 1s linear infinite" } })) : (React.createElement(RefreshCwIcon, { size: 14 }))),
+            React.createElement("button", { onClick: onOpenExternal, style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "28px",
+                    height: "28px",
+                    borderRadius: "6px",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    color: "rgba(255, 255, 255, 0.7)",
+                    cursor: "pointer",
+                    transition: "all 0.15s ease",
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
+                    e.currentTarget.style.color = themeColor;
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = "rgba(255, 255, 255, 0.7)";
+                }, title: "Open in new tab" },
+                React.createElement(ExternalLinkIcon, { size: 14 }))),
+        React.createElement("style", null, `
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `)));
+}

package/dist/components/sandbox/sandbox-header.js

@@ -0,0 +1,52 @@
+import React from "react";
+/**
+ * Header component for the Sandbox
+ */
+export function SandboxHeader({ title, description, logo, themeColor, }) {
+    return (React.createElement("header", { style: {
+            display: "flex",
+            height: "64px",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0 24px",
+            borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            backdropFilter: "blur(8px)",
+            flexShrink: 0,
+        } },
+        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, logo),
+        title && (React.createElement("div", { style: { textAlign: "center" } },
+            React.createElement("h1", { style: {
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    color: "rgba(255, 255, 255, 0.9)",
+                    margin: 0,
+                } }, title),
+            description && (React.createElement("p", { style: {
+                    fontSize: "12px",
+                    color: "rgba(255, 255, 255, 0.5)",
+                    margin: 0,
+                    marginTop: "2px",
+                } }, description)))),
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                padding: "6px 12px",
+                borderRadius: "9999px",
+                border: `1px solid ${themeColor}30`,
+                backgroundColor: `${themeColor}10`,
+            } },
+            React.createElement("span", { style: {
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: themeColor,
+                    boxShadow: `0 0 0 3px ${themeColor}25`,
+                } }),
+            React.createElement("span", { style: {
+                    fontSize: "12px",
+                    fontWeight: 500,
+                    color: themeColor,
+                } }, "Sandbox"))));
+}

package/dist/components/sandbox/sandbox-home/SandboxCard.js

@@ -0,0 +1,59 @@
+"use client";
+import React from "react";
+// Generate a deterministic gradient based on the title
+function getGradientColors(title) {
+    // Defensive check - ensure we have a valid string
+    if (title === undefined || title === null || typeof title !== "string") {
+        return "from-slate-700 to-slate-900";
+    }
+    const safeTitle = String(title); // Convert to string as final safety
+    if (safeTitle.length === 0) {
+        return "from-slate-700 to-slate-900";
+    }
+    try {
+        const hash = safeTitle
+            .split("")
+            .reduce((acc, char) => char.charCodeAt(0) + acc, 0);
+        const gradients = [
+            "from-slate-700 to-slate-900",
+            "from-zinc-700 to-zinc-900",
+            "from-gray-700 to-gray-900",
+            "from-neutral-700 to-neutral-900",
+            "from-stone-700 to-stone-900",
+            "from-slate-600 to-slate-800",
+            "from-zinc-600 to-zinc-800",
+            "from-gray-600 to-gray-800",
+        ];
+        return gradients[Math.abs(hash) % gradients.length];
+    }
+    catch (e) {
+        return "from-slate-700 to-slate-900";
+    }
+}
+/**
+ * SandboxCard component - displays an individual template card
+ */
+export const SandboxCard = ({ title, description, sandboxId, }) => {
+    // Ensure title is always a string
+    const safeTitle = title || "";
+    const safeDescription = description || "";
+    const gradient = getGradientColors(safeTitle);
+    const handleClick = () => {
+        if (sandboxId) {
+            window.location.href = `/sample/${sandboxId}`;
+        }
+    };
+    return (React.createElement("div", { onClick: handleClick, className: "group relative block min-w-[240px] w-full h-[200px] border border-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out hover:border-[#444] focus-visible:outline-none cursor-pointer" },
+        React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
+            React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
+                React.createElement("h3", { className: "text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 text-white" }, safeTitle),
+                React.createElement("svg", { className: "rotate-[-45deg] translate-x-[-2px] opacity-0 transition-all duration-100 ease-out origin-center group-hover:opacity-100 group-hover:translate-x-[4px] ml-1", height: "16", strokeLinejoin: "round", style: { width: 12, height: 12, color: "currentColor" }, viewBox: "0 0 16 16", width: "16" },
+                    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z", fill: "currentColor" }))),
+            React.createElement("p", { className: "text-[14px] text-gray-400 m-0 line-clamp-2" }, safeDescription)),
+        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" },
+            React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
+                React.createElement("div", { className: "w-full px-6 space-y-2" },
+                    React.createElement("div", { className: "h-2 bg-white/20 rounded w-1/2 mx-auto" }),
+                    React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-3/4 mx-auto" }),
+                    React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-2/3 mx-auto" }))))));
+};

package/dist/components/sandbox/sandbox-home/SandboxHome.js

@@ -0,0 +1,174 @@
+"use client";
+import React, { useState, useMemo, useEffect } from "react";
+import { SandboxCard } from "./SandboxCard";
+import { SearchBar } from "./SearchBar";
+import { createApiClient } from "../../../lib/api-client";
+// Default sandboxes array - will be replaced with API call in the future
+const DEFAULT_SANDBOXES = [
+    {
+        id: "1",
+        title: "Next.js AI Chatbot",
+        description: "A full-featured, hackable Next.js AI chatbot built by Vercel",
+        sandboxId: "nextjs-ai-chatbot",
+    },
+    {
+        id: "2",
+        title: "Hume AI - Empathic Voice Interface",
+        description: "This template creates a voice chat using Hume AI's Empathic Voice Interface.",
+        sandboxId: "hume-ai-voice",
+    },
+    {
+        id: "3",
+        title: "Lead Agent",
+        description: "An inbound lead qualification and research agent built with Next.js, AI SDK, Workflow...",
+        sandboxId: "lead-agent",
+    },
+    {
+        id: "4",
+        title: "Slack Agent Template",
+        description: "This is a Slack Agent template built with Bolt for JavaScript (TypeScript) and the Nitro server...",
+        sandboxId: "slack-agent",
+    },
+    {
+        id: "5",
+        title: "Customer Reviews AI Summary",
+        description: "Use a Large Language Model to summarize customer feedback.",
+        sandboxId: "customer-reviews-ai",
+    },
+    {
+        id: "6",
+        title: "Nuxt AI Chatbot",
+        description: "An AI chatbot template to build your own chatbot powered by Nuxt MDC and Vercel AI...",
+        sandboxId: "nuxt-ai-chatbot",
+    },
+    {
+        id: "7",
+        title: "Morphic: AI-powered answer engine",
+        description: "AI answer engine with Generative UI.",
+        sandboxId: "morphic-ai",
+    },
+    {
+        id: "8",
+        title: "Pinecone - Vercel AI SDK Starter",
+        description: "A Next.js starter chatbot using Vercel's AI SDK and implements the Retrieval-Augmented...",
+        sandboxId: "pinecone-ai-sdk",
+    },
+    {
+        id: "9",
+        title: "qrGPT - AI QR Code Generator",
+        description: "QrGPT is an AI tool for you to generate beautiful QR codes using AI with one click. Powered by...",
+        sandboxId: "qrgpt-ai",
+    },
+];
+/**
+ * Get the base URL for API requests
+ */
+function getBaseUrl(customBaseUrl) {
+    if (customBaseUrl) {
+        return customBaseUrl;
+    }
+    return "http://127.0.0.1:8000";
+}
+/**
+ * Transform SandboxContent to SandboxItem
+ */
+function transformSandboxContent(content) {
+    // Extract title from markdown (first heading) or use uid as fallback
+    let title = content.uid;
+    let description = "No description available";
+    if (content.markdown) {
+        // Try to extract title from markdown (first # heading or first line)
+        const lines = content.markdown.split("\n");
+        const titleMatch = lines.find((line) => line.trim().startsWith("#"));
+        if (titleMatch) {
+            title = titleMatch.replace(/^#+\s*/, "").trim();
+        }
+        else if (lines[0]) {
+            title = lines[0].trim();
+        }
+        // Extract description (first paragraph or first few lines after title)
+        const descriptionLines = lines
+            .slice(titleMatch ? lines.indexOf(titleMatch) + 1 : 1)
+            .filter((line) => line.trim() && !line.trim().startsWith("#"))
+            .slice(0, 3);
+        if (descriptionLines.length > 0) {
+            description = descriptionLines.join(" ").trim().substring(0, 200);
+        }
+    }
+    return {
+        id: content.uid || content.id.toString(),
+        title,
+        description,
+        sandboxId: content.uid,
+    };
+}
+export const SandboxHome = ({ apiKey, orgid, baseUrl, sandboxes, }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [fetchedSandboxes, setFetchedSandboxes] = useState([]);
+    // Fetch sandboxes from API if not provided
+    useEffect(() => {
+        if (sandboxes) {
+            // If sandboxes are provided as prop, use them
+            setFetchedSandboxes([]);
+            return;
+        }
+        const fetchSandboxes = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const client = createApiClient({
+                    baseUrl: getBaseUrl(baseUrl),
+                    apiKey,
+                });
+                const sandboxContents = await client.sandboxContent.getByPlayground(orgid);
+                const transformed = sandboxContents.map(transformSandboxContent);
+                setFetchedSandboxes(transformed);
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : "Failed to fetch sandboxes";
+                setError(errorMessage);
+                console.error("Error fetching sandboxes:", err);
+                // Fall back to default sandboxes on error
+                setFetchedSandboxes(DEFAULT_SANDBOXES);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchSandboxes();
+    }, [apiKey, orgid, baseUrl, sandboxes]);
+    // Use provided sandboxes, fetched sandboxes, or default array
+    const allSandboxes = sandboxes ||
+        (fetchedSandboxes.length > 0 ? fetchedSandboxes : DEFAULT_SANDBOXES);
+    // Filter sandboxes based on search query
+    const filteredSandboxes = useMemo(() => {
+        if (!searchQuery.trim()) {
+            return allSandboxes;
+        }
+        const query = searchQuery.toLowerCase();
+        return allSandboxes.filter((sandbox) => {
+            var _a, _b;
+            const matchesTitle = ((_a = sandbox.title) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query)) || false;
+            const matchesDescription = ((_b = sandbox.description) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(query)) || false;
+            return matchesTitle || matchesDescription;
+        });
+    }, [allSandboxes, searchQuery]);
+    return (React.createElement("div", { className: "min-h-screen bg-black" },
+        React.createElement("div", { className: "pt-16 pb-12 px-4 md:px-6" },
+            React.createElement("div", { className: "max-w-[1400px] mx-auto" },
+                React.createElement(SearchBar, { value: searchQuery, onChange: setSearchQuery }))),
+        React.createElement("div", { className: "px-4 md:px-6 pb-16" },
+            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "col-span-full text-center py-16" },
+                React.createElement("p", { className: "text-gray-500 text-lg" }, "Loading sandboxes..."))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
+                React.createElement("p", { className: "text-red-500 text-lg" },
+                    "Error: ",
+                    error),
+                React.createElement("p", { className: "text-gray-500 text-sm mt-2" }, "Falling back to default sandboxes."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
+                .filter((sandbox) => sandbox && sandbox.title && sandbox.description)
+                .map((sandbox) => (React.createElement(SandboxCard, { key: sandbox.id, title: sandbox.title || "", description: sandbox.description || "", sandboxId: sandbox.sandboxId })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
+                React.createElement("p", { className: "text-gray-500 text-lg" }, searchQuery
+                    ? `No sandboxes found matching "${searchQuery}".`
+                    : "No sandboxes available. Provide sandboxes prop to display cards.")))))))));
+};

package/dist/components/sandbox/sandbox-home/SearchBar.js

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+/**
+ * SearchBar component - provides search input for filtering sandboxes
+ */
+export const SearchBar = ({ value, onChange, placeholder = "Search templates...", }) => {
+    return (React.createElement("div", { className: "relative max-w-md mx-auto" },
+        React.createElement("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none" },
+            React.createElement("svg", { className: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }))),
+        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "w-full bg-[#0a0a0a] border border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-gray-600 transition-colors" })));
+};

package/dist/components/sandbox/sandbox-home/index.js

@@ -0,0 +1,3 @@
+export { SandboxHome } from "./SandboxHome";
+export { SandboxCard } from "./SandboxCard";
+export { SearchBar } from "./SearchBar";

package/dist/components/sandbox/sandbox-left-panel.js

@@ -0,0 +1,248 @@
+"use client";
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { LoaderIcon, ArrowUpIcon } from "../icons";
+/**
+ * Left panel with Guide and Ask AI tabs
+ */
+export function SandboxLeftPanel({ mdx, GuideComponent, playgroundUid, themeColor, apiKey, apiBaseUrl = "https://api.sampleapp.ai", files, }) {
+    const [activeTab, setActiveTab] = useState("guide");
+    return (React.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            backgroundColor: "#18181b",
+            borderRight: "1px solid rgba(255, 255, 255, 0.1)",
+        } },
+        React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                padding: "12px 16px",
+                borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+            } },
+            React.createElement("div", { style: {
+                    display: "flex",
+                    gap: "4px",
+                    padding: "4px",
+                    backgroundColor: "rgba(255, 255, 255, 0.05)",
+                    borderRadius: "8px",
+                } },
+                React.createElement(TabButton, { active: activeTab === "guide", onClick: () => setActiveTab("guide"), themeColor: themeColor }, "Guide"),
+                React.createElement(TabButton, { active: activeTab === "chat", onClick: () => setActiveTab("chat"), themeColor: themeColor }, "Ask AI"))),
+        React.createElement("div", { style: { flex: 1, overflow: "hidden", minHeight: 0 } },
+            activeTab === "guide" && (React.createElement(GuideTab, { mdx: mdx, GuideComponent: GuideComponent, themeColor: themeColor })),
+            activeTab === "chat" && (React.createElement(ChatTab, { playgroundUid: playgroundUid, themeColor: themeColor, apiKey: apiKey, apiBaseUrl: apiBaseUrl, files: files })))));
+}
+function TabButton({ children, active, onClick, themeColor, }) {
+    return (React.createElement("button", { onClick: onClick, style: {
+            padding: "8px 16px",
+            fontSize: "13px",
+            fontWeight: 500,
+            borderRadius: "6px",
+            border: "none",
+            cursor: "pointer",
+            transition: "all 0.15s ease",
+            backgroundColor: active ? themeColor : "transparent",
+            color: active ? "white" : "rgba(255, 255, 255, 0.6)",
+        } }, children));
+}
+function GuideTab({ mdx, GuideComponent, themeColor, }) {
+    if (GuideComponent) {
+        return (React.createElement("div", { style: { height: "100%", overflow: "auto", padding: "24px" } },
+            React.createElement(GuideComponent, null)));
+    }
+    if (mdx) {
+        return (React.createElement("div", { style: {
+                height: "100%",
+                overflow: "auto",
+                padding: "24px",
+            } },
+            React.createElement("div", { style: {
+                    fontSize: "14px",
+                    lineHeight: 1.7,
+                    color: "rgba(255, 255, 255, 0.8)",
+                }, dangerouslySetInnerHTML: { __html: mdx } })));
+    }
+    return (React.createElement("div", { style: {
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "24px",
+        } },
+        React.createElement("div", { style: { textAlign: "center" } },
+            React.createElement("p", { style: {
+                    fontSize: "14px",
+                    color: "rgba(255, 255, 255, 0.5)",
+                } }, "No guide content provided."),
+            React.createElement("p", { style: {
+                    fontSize: "12px",
+                    color: "rgba(255, 255, 255, 0.3)",
+                    marginTop: "8px",
+                } },
+                "Pass ",
+                React.createElement("code", { style: { color: themeColor } }, "mdx"),
+                " or",
+                " ",
+                React.createElement("code", { style: { color: themeColor } }, "GuideComponent"),
+                " prop to display content."))));
+}
+function ChatTab({ playgroundUid, themeColor, apiKey, apiBaseUrl, files, }) {
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const messagesEndRef = useRef(null);
+    const textareaRef = useRef(null);
+    // Scroll to bottom when messages change
+    useEffect(() => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        if (!input.trim() || isLoading)
+            return;
+        const userMessage = input.trim();
+        setInput("");
+        setMessages((prev) => [...prev, { role: "user", content: userMessage }]);
+        setIsLoading(true);
+        try {
+            // Build context from files if available
+            const codeContext = files
+                ? files.map((f) => `--- ${f.path} ---\n${f.content}`).join("\n\n")
+                : "";
+            const response = await fetch(`${apiBaseUrl}/v1/chat`, {
+                method: "POST",
+                headers: Object.assign({ "Content-Type": "application/json" }, (apiKey && { Authorization: `Bearer ${apiKey}` })),
+                body: JSON.stringify({
+                    playgroundUid,
+                    messages: [
+                        ...messages,
+                        { role: "user", content: userMessage },
+                    ],
+                    context: codeContext,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`API error: ${response.status}`);
+            }
+            const data = await response.json();
+            setMessages((prev) => [
+                ...prev,
+                { role: "assistant", content: data.message || data.content },
+            ]);
+        }
+        catch (error) {
+            console.error("Chat error:", error);
+            setMessages((prev) => [
+                ...prev,
+                {
+                    role: "assistant",
+                    content: "Sorry, I encountered an error. Please check your API key and try again.",
+                },
+            ]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [input, isLoading, messages, playgroundUid, apiKey, apiBaseUrl, files]);
+    return (React.createElement("div", { style: {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+        } },
+        React.createElement("div", { style: {
+                flex: 1,
+                overflow: "auto",
+                padding: "16px",
+            } }, messages.length === 0 ? (React.createElement("div", { style: {
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            } },
+            React.createElement("div", { style: { textAlign: "center", maxWidth: "280px" } },
+                React.createElement("div", { style: {
+                        width: "48px",
+                        height: "48px",
+                        borderRadius: "12px",
+                        backgroundColor: `${themeColor}20`,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        margin: "0 auto 16px",
+                    } },
+                    React.createElement("span", { style: { fontSize: "24px" } }, "\uD83D\uDCAC")),
+                React.createElement("p", { style: {
+                        fontSize: "14px",
+                        fontWeight: 500,
+                        color: "rgba(255, 255, 255, 0.8)",
+                        marginBottom: "8px",
+                    } }, "Ask AI about this code"),
+                React.createElement("p", { style: {
+                        fontSize: "12px",
+                        color: "rgba(255, 255, 255, 0.4)",
+                    } }, "Get help understanding the code, debugging issues, or extending functionality.")))) : (React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
+            messages.map((msg, i) => (React.createElement("div", { key: i, style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: msg.role === "user" ? "flex-end" : "flex-start",
+                } },
+                React.createElement("div", { style: {
+                        maxWidth: "85%",
+                        padding: "12px 16px",
+                        borderRadius: "12px",
+                        backgroundColor: msg.role === "user" ? themeColor : "rgba(255, 255, 255, 0.1)",
+                        color: "rgba(255, 255, 255, 0.9)",
+                        fontSize: "13px",
+                        lineHeight: 1.5,
+                    } }, msg.content)))),
+            isLoading && (React.createElement("div", { style: { display: "flex", alignItems: "flex-start" } },
+                React.createElement("div", { style: {
+                        padding: "12px 16px",
+                        borderRadius: "12px",
+                        backgroundColor: "rgba(255, 255, 255, 0.1)",
+                    } },
+                    React.createElement(LoaderIcon, { size: 16, style: { color: themeColor } })))),
+            React.createElement("div", { ref: messagesEndRef })))),
+        React.createElement("div", { style: {
+                padding: "16px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+            } },
+            React.createElement("form", { onSubmit: handleSubmit },
+                React.createElement("div", { style: {
+                        display: "flex",
+                        gap: "8px",
+                        alignItems: "flex-end",
+                    } },
+                    React.createElement("textarea", { ref: textareaRef, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter" && !e.shiftKey) {
+                                e.preventDefault();
+                                handleSubmit(e);
+                            }
+                        }, placeholder: "Ask a question...", rows: 1, style: {
+                            flex: 1,
+                            padding: "12px",
+                            borderRadius: "8px",
+                            border: "1px solid rgba(255, 255, 255, 0.1)",
+                            backgroundColor: "rgba(255, 255, 255, 0.05)",
+                            color: "rgba(255, 255, 255, 0.9)",
+                            fontSize: "13px",
+                            resize: "none",
+                            outline: "none",
+                            fontFamily: "inherit",
+                        } }),
+                    React.createElement("button", { type: "submit", disabled: !input.trim() || isLoading, style: {
+                            width: "40px",
+                            height: "40px",
+                            borderRadius: "8px",
+                            border: "none",
+                            backgroundColor: input.trim() ? themeColor : "rgba(255, 255, 255, 0.1)",
+                            color: "white",
+                            cursor: input.trim() && !isLoading ? "pointer" : "not-allowed",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            transition: "all 0.15s ease",
+                            opacity: isLoading ? 0.5 : 1,
+                        } }, isLoading ? (React.createElement(LoaderIcon, { size: 18 })) : (React.createElement(ArrowUpIcon, { size: 18 }))))))));
+}