@sampleapp.ai/sdk 1.0.29 → 1.0.30

package/dist/components/sandbox/Sandbox.js

@@ -0,0 +1,87 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { fetchSandboxConfig } from "./api";
+import GuardianPlayground from "./guardian/guardian-playground";
+import { GuardianProvider } from "./guardian/context/guardian-context";
+import { VmProvider } from "./guardian/context/vm-context";
+import { buildGuardianConfig } from "./guardian/utils";
+/**
+ * Sandbox component - simplified API for embedding sandboxes
+ *
+ * @example
+ * ```tsx
+ * <Sandbox
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   sandboxId="launchdarkly-feature-flags"
+ *   env={{
+ *     LAUNCHDARKLY_SDK_KEY: "sdk-xxx",
+ *   }}
+ * />
+ * ```
+ */
+export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
+    var _a;
+    const [config, setConfig] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        async function loadConfig() {
+            try {
+                setLoading(true);
+                setError(null);
+                const fetchedConfig = await fetchSandboxConfig(apiKey, sandboxId);
+                if (!cancelled) {
+                    // Override theme color if provided
+                    if (themeColor) {
+                        fetchedConfig.themeColor = themeColor;
+                        fetchedConfig.useCases = fetchedConfig.useCases.map((uc) => (Object.assign(Object.assign({}, uc), { themeColor: themeColor, frameworks: uc.frameworks.map((fw) => (Object.assign(Object.assign({}, fw), { themeColor: themeColor }))) })));
+                    }
+                    setConfig(fetchedConfig);
+                    setLoading(false);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : "Failed to load sandbox");
+                    setLoading(false);
+                }
+            }
+        }
+        loadConfig();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiKey, sandboxId, themeColor]);
+    if (loading) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },
+            React.createElement("div", { className: "text-white" }, "Loading sandbox...")));
+    }
+    if (error) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },
+            React.createElement("div", { className: "text-red-500" },
+                "Error: ",
+                error)));
+    }
+    if (!config) {
+        return null;
+    }
+    // Build the nested config from use cases
+    const nestedConfig = buildGuardianConfig(config.useCases, {
+        playgroundUid: sandboxId,
+        playgroundLogo: config.playgroundLogo || (React.createElement("div", { className: "text-white font-bold text-xl" }, config.name)),
+    });
+    // Get the first use case and framework as defaults
+    const firstUseCase = config.useCases[0];
+    const firstFramework = (_a = firstUseCase === null || firstUseCase === void 0 ? void 0 : firstUseCase.frameworks[0]) === null || _a === void 0 ? void 0 : _a.key;
+    if (!firstUseCase || !firstFramework) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },
+            React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
+    }
+    // TODO: Pass env variables to the container runtime
+    // This will be implemented when integrating with the container technology
+    return (React.createElement(GuardianProvider, null,
+        React.createElement(VmProvider, null,
+            React.createElement("div", { className: "h-screen w-screen bg-black" },
+                React.createElement(GuardianPlayground, { nestedConfig: nestedConfig, useCase: firstUseCase.id, framework: firstFramework, isFrame: false, apiKey: apiKey, env: env, chatUid: config.chatUid })))));
+}

package/dist/components/sandbox/SandboxHome.js

@@ -0,0 +1,141 @@
+"use client";
+import React, { useState } from "react";
+// 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",
+    },
+];
+// 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";
+    }
+}
+// Individual Sandbox Card Component
+function SandboxCard({ title, description, sandboxId, }) {
+    // Ensure title is always a string
+    const safeTitle = title || "";
+    const safeDescription = description || "";
+    const gradient = getGradientColors(safeTitle);
+    return (React.createElement("div", { 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" },
+        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" }))))));
+}
+/**
+ * SandboxHome component - displays a grid of template cards for sandbox applications
+ *
+ * @example
+ * ```tsx
+ * <SandboxHome
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   orgid="org-123"
+ *   sandboxes={[
+ *     {
+ *       id: "1",
+ *       title: "Next.js AI Chatbot",
+ *       description: "A full-featured, hackable Next.js AI chatbot built by Vercel",
+ *       sandboxId: "nextjs-ai-chatbot"
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+export const SandboxHome = ({ apiKey, orgid, sandboxes, }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Use provided sandboxes or default array
+    // TODO: Replace DEFAULT_SANDBOXES with API call using apiKey and orgid
+    // const displaySandboxes = await fetchSandboxes(apiKey, orgid);
+    const displaySandboxes = sandboxes || DEFAULT_SANDBOXES;
+    return (React.createElement("div", { className: "min-h-screen bg-black" },
+        React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, displaySandboxes && displaySandboxes.length > 0 ? (displaySandboxes
+            .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" }, "No sandboxes available. Provide sandboxes prop to display cards."))))));
+};

package/dist/components/sandbox/api.js

@@ -0,0 +1,108 @@
+import { Framework, } from "./guardian/types/ide-types";
+import { createApiClient } from "../../lib/api-client";
+/**
+ * Get the base URL for API requests
+ * In browser, use relative URL or environment variable
+ * In Node.js, use environment variable or default
+ */
+function getBaseUrl() {
+    return "https://api.sampleapp.ai";
+    // return "http://127.0.0.1:8000";
+    // if (typeof window !== "undefined") {
+    //   // Browser: try to get from environment or use relative URL
+    //   return (
+    //     (window as any).__SAMPLEAPP_API_BASE_URL__ ||f
+    //     process.env.NEXT_PUBLIC_FASTAPI_APP_URL ||
+    //     process.env.FASTAPI_APP_URL ||
+    //     "http://127.0.0.1:8000"
+    //   );
+    // }
+    // // Node.js: use environment variable or default
+    // return (
+    //   process.env.FASTAPI_APP_URL ||
+    //   process.env.NEXT_PUBLIC_FASTAPI_APP_URL ||
+    //   "http://127.0.0.1:8000"
+    // );
+}
+/**
+ * Helper function to download a file from a URL
+ */
+function createDownloadLink(downloadEndpoint) {
+    if (typeof window === "undefined") {
+        return; // Server-side, skip
+    }
+    const link = document.createElement("a");
+    link.href = downloadEndpoint;
+    link.download = "project.zip";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+/**
+ * Fetches sandbox configuration from the API
+ * @param apiKey - API key from SandboxProps
+ * @param sandboxId - Sandbox content UID (maps to sandbox_content_uid)
+ * @returns Sandbox configuration
+ */
+export async function fetchSandboxConfig(apiKey, sandboxId) {
+    const baseUrl = getBaseUrl();
+    const client = createApiClient({
+        baseUrl,
+        apiKey,
+    });
+    // Fetch sandbox content from API
+    const sandboxContent = await client.sandboxContent.getPublic(sandboxId);
+    // Get framework from sandbox content (default to nextjs if not specified)
+    const frameworkKey = sandboxContent.framework || Framework.NEXTJS;
+    // Get generated_code from sandbox content
+    // The generated_code is already in the correct UpdateContainerCodebaseType format
+    const generatedCode = sandboxContent.generated_code || {};
+    // Build completeCodeZipFile download endpoint
+    // Note: containerId would come from starting the sandbox via sdk.startSandbox()
+    // For now, we'll create a placeholder that can be updated when the sandbox is started
+    // The download endpoint format: `${baseUrl}/fileshare?container_id=${containerId}`
+    // When this URL is accessed, it should trigger a download with the logic:
+    // const link = document.createElement("a");
+    // link.href = downloadEndpoint;
+    // link.download = "project.zip";
+    // document.body.appendChild(link);
+    // link.click();
+    // document.body.removeChild(link);
+    const containerId = ""; // Will be populated when sandbox is started via sdk.startSandbox()
+    const completeCodeZipFile = containerId
+        ? `${baseUrl}/fileshare?container_id=${containerId}`
+        : `${baseUrl}/fileshare?container_id=placeholder`; // Placeholder until sandbox is started
+    // Transform SandboxContent to SandboxConfig
+    const config = {
+        id: sandboxContent.uid,
+        name: sandboxContent.uid, // Use UID as name if no name field exists
+        description: sandboxContent.markdown || "", // Use markdown as description
+        themeColor: "#3b82f6", // Default theme color
+        hasPreview: true,
+        chatUid: sandboxContent.chat_uid || "", // Include chatUid for startSandbox
+        useCases: [
+            {
+                id: sandboxContent.uid,
+                name: sandboxContent.uid,
+                description: sandboxContent.markdown || "",
+                themeColor: "#3b82f6",
+                hasPreview: true,
+                frameworks: [
+                    {
+                        key: frameworkKey,
+                        browserUrl: "", // Will be set when sandbox is started
+                        sandboxUid: sandboxContent.uid,
+                        // Use generated_code if available, otherwise fallback to empty object
+                        codeZipFile: Object.keys(generatedCode).length > 0 ? generatedCode : "", // Backward compatible: empty string if no generated_code
+                        completeCodeZipFile,
+                        useVm: false,
+                        // CustomConsole is now sandboxContent.markdown
+                        CustomConsole: sandboxContent.markdown || "",
+                        GuideView: "Default Guide",
+                    },
+                ],
+            },
+        ],
+    };
+    return config;
+}

package/dist/components/sandbox/guardian/app-layout-no-sidebar.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { cn } from "../../../lib/utils";
+export default function AppLayoutNoSidebar({ header, hasBodyPadding = true, children, bodyHeight = "h-[calc(100vh-6rem)]", }) {
+    return (React.createElement("div", null,
+        header && (React.createElement("header", { className: "flex h-24 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 w-full" },
+            React.createElement("div", { className: "flex items-center gap-2 px-4 w-full" }, header))),
+        React.createElement("div", { className: cn("flex flex-1 flex-col pt-0", hasBodyPadding && "gap-4 p-4", bodyHeight) }, children)));
+}

package/dist/components/sandbox/guardian/ask-ai-view.js

@@ -0,0 +1,249 @@
+"use client";
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { useChat } from "@ai-sdk/react";
+import { cn } from "../../../lib/utils";
+import { Markdown } from "./ui/markdown";
+import { codeZipFileToCodebase } from "./zip-to-codebase";
+// Loading animation component - matching mcp-chat-view exactly
+function MessageLoading() {
+    return (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: "text-foreground" },
+        React.createElement("circle", { cx: "4", cy: "12", r: "2", fill: "currentColor" },
+            React.createElement("animate", { id: "spinner_qFRN", begin: "0;spinner_OcgL.end+0.25s", attributeName: "cy", calcMode: "spline", dur: "0.6s", values: "12;6;12", keySplines: ".33,.66,.66,1;.33,0,.66,.33" })),
+        React.createElement("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" },
+            React.createElement("animate", { begin: "spinner_qFRN.begin+0.1s", attributeName: "cy", calcMode: "spline", dur: "0.6s", values: "12;6;12", keySplines: ".33,.66,.66,1;.33,0,.66,.33" })),
+        React.createElement("circle", { cx: "20", cy: "12", r: "2", fill: "currentColor" },
+            React.createElement("animate", { id: "spinner_OcgL", begin: "spinner_qFRN.begin+0.2s", attributeName: "cy", calcMode: "spline", dur: "0.6s", values: "12;6;12", keySplines: ".33,.66,.66,1;.33,0,.66,.33" }))));
+}
+export default function AskAiView({ codeZipFile, playgroundUid, themeColor, }) {
+    const [input, setInput] = useState("");
+    const messagesEndRef = useRef(null);
+    // Track current message ID from stream
+    const currentMessageIdRef = useRef(null);
+    const [generatedCode, setGeneratedCode] = useState(null);
+    useEffect(() => {
+        codeZipFileToCodebase(codeZipFile).then((generatedCode) => {
+            setGeneratedCode(generatedCode);
+        });
+    }, [codeZipFile]);
+    // Custom fetch to intercept stream and process events (matching mcp-chat-view pattern)
+    const customFetch = useCallback(async (input, init) => {
+        const response = await fetch(input, init);
+        if (!response.body)
+            return response;
+        // Create a new readable stream that processes the original stream
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        const stream = new ReadableStream({
+            async start(controller) {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        // Process any remaining buffer
+                        if (buffer.trim()) {
+                            controller.enqueue(new TextEncoder().encode(buffer));
+                        }
+                        controller.close();
+                        break;
+                    }
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split("\n");
+                    // Keep the last incomplete line in buffer
+                    buffer = lines.pop() || "";
+                    for (const line of lines) {
+                        if (line.trim() === "")
+                            continue;
+                        if (line.startsWith("data: ")) {
+                            const dataStr = line.slice(6).trim();
+                            if (dataStr === "[DONE]") {
+                                controller.enqueue(new TextEncoder().encode(`data: ${dataStr}\n\n`));
+                                continue;
+                            }
+                            try {
+                                const data = JSON.parse(dataStr);
+                                const dataType = data.type;
+                                // Track message ID from start event
+                                if (dataType === "start" && data.messageId) {
+                                    currentMessageIdRef.current = data.messageId;
+                                }
+                            }
+                            catch (_a) {
+                                // Not JSON, pass through
+                            }
+                        }
+                        // Pass through the original line
+                        controller.enqueue(new TextEncoder().encode(line + "\n"));
+                    }
+                }
+            },
+        });
+        return new Response(stream, {
+            headers: response.headers,
+            status: response.status,
+            statusText: response.statusText,
+        });
+    }, []);
+    const initialMessages = [
+        {
+            id: "welcome",
+            role: "assistant",
+            content: "Hi! Ask me anything about feature flags or this demo. Try: 'How do I enable the sample-feature for beta users?'",
+            parts: [
+                {
+                    type: "text",
+                    text: "Hi! Ask me anything about feature flags or this demo. Try: 'How do I enable the sample-feature for beta users?'",
+                },
+            ],
+        },
+    ];
+    // const {messages, sendMessage, status, setMessages} = useChat({
+    const { messages, sendMessage, status } = useChat({
+        // @ts-expect-error - api property exists in ChatInit but types may not be properly inferred
+        api: "/api/chat",
+        fetch: customFetch,
+        initialMessages,
+    });
+    // Auto-scroll to bottom when new messages arrive
+    useEffect(() => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    // Format generatedCode into a readable string for the system prompt, skipping any .env files
+    const codebaseContext = useMemo(() => {
+        if (!generatedCode || Object.keys(generatedCode).length === 0) {
+            return "";
+        }
+        const codebaseLines = [];
+        codebaseLines.push("Here is the codebase context:\n");
+        // Sort files by path for consistent ordering
+        const sortedFiles = Object.entries(generatedCode)
+            .filter(([filePath]) => !filePath.endsWith(".env")) // skip .env files
+            .sort(([a], [b]) => a.localeCompare(b));
+        for (const [filePath, codeOutput] of sortedFiles) {
+            codebaseLines.push(`\nFile: ${filePath}`);
+            if (codeOutput.code_language) {
+                codebaseLines.push(`Language: ${codeOutput.code_language}`);
+            }
+            if (codeOutput.full_code) {
+                codebaseLines.push("Code:");
+                codebaseLines.push("```");
+                codebaseLines.push(codeOutput.full_code);
+                codebaseLines.push("```");
+            }
+            codebaseLines.push(""); // Empty line between files
+        }
+        return codebaseLines.join("\n");
+    }, [generatedCode]);
+    const handleSend = () => {
+        const trimmed = input.trim();
+        if (!trimmed || status === "submitted" || status === "streaming")
+            return;
+        // Build system prompt with codebase context
+        const baseSystemPrompt = `You are a helpful AI assistant. You help users understand the codebase and the project and how things are being used, specifically focused on the ${playgroundUid} or related APIs and SDKs and why they are designed in a certain way.
+
+    Response style:
+    - VERY VERY IMPORTANT: Be concise, like 50% of the usual response length.
+    - Be concise: Answer directly without unnecessary preamble or repetition
+    - Use code examples when they clarify better than words
+    - For complex topics, break down into key points rather than lengthy prose
+    - Prioritize relevance over completeness`;
+        const systemPrompt = codebaseContext
+            ? `${baseSystemPrompt}\n\n${codebaseContext}\n\nWhen answering questions, you can reference the codebase above to provide accurate and context-aware responses.`
+            : baseSystemPrompt;
+        // Send message without mcpUrl to use simple AI chat
+        // Include system prompt with codebase context
+        sendMessage({ text: trimmed }, {
+            body: {
+                system: systemPrompt,
+                model: "Claude Haiku 4.5",
+            },
+        });
+        setInput("");
+    };
+    const isLoading = status === "submitted" || status === "streaming";
+    // Filter out system messages (only show user and assistant)
+    const visibleMessages = messages.filter((m) => m.role === "user" || m.role === "assistant");
+    // const handleClearChat = () => {
+    //   // Clear all messages and reset to initial state
+    //   // Use the initialMessages directly since they now match the UIMessage structure
+    //   setMessages(initialMessages as unknown as typeof messages);
+    //   setInput("");
+    // };
+    return (React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" },
+        React.createElement("div", { className: "flex-1 overflow-y-auto min-w-0 w-full px-4 py-4" },
+            visibleMessages.length > 0 ? (React.createElement("div", { className: "space-y-4 max-w-4xl mx-auto" },
+                visibleMessages.map((message) => {
+                    return (React.createElement("div", { key: message.id }, message.role === "user" ? (React.createElement(UserMessage, { message: message, themeColor: themeColor })) : (React.createElement(AssistantMessage, { message: message }))));
+                }),
+                status === "submitted" && (React.createElement("div", { className: "flex justify-start" },
+                    React.createElement("div", { className: "flex items-center gap-2 px-2" },
+                        React.createElement(MessageLoading, null),
+                        React.createElement("span", { className: "text-muted-foreground text-sm" }, "Thinking...")))))) : (React.createElement("div", { className: "flex h-full items-center justify-center" },
+                React.createElement("div", { className: "flex flex-col items-start space-y-4 px-4 max-w-4xl" },
+                    React.createElement("div", { className: "text-start" },
+                        React.createElement("h2", { className: "mb-2 text-2xl font-semibold tracking-tight text-gray-200" }, "Hi! Ask me anything"),
+                        React.createElement("p", { className: "text-muted-foreground text-base" }, "Try: \u201CHow does this sample app work?\u201D"))))),
+            React.createElement("div", { ref: messagesEndRef })),
+        React.createElement("div", { className: "shrink-0 border-t border-gray-800/50 bg-[#0a0b0f]/95 backdrop-blur-sm" },
+            React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-4" },
+                React.createElement("div", { className: "flex items-end gap-3 bg-[#1a1b23] rounded-2xl border border-gray-800/50 px-4 py-3 transition-all", style: {
+                        boxShadow: `0 0 0 1px transparent`,
+                    } },
+                    React.createElement("div", { className: "flex-1 min-w-0" },
+                        React.createElement("textarea", { value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => {
+                                if (e.key === "Enter" && !e.shiftKey) {
+                                    e.preventDefault();
+                                    handleSend();
+                                }
+                            }, placeholder: "Type your message...", disabled: isLoading, rows: 1, className: "w-full bg-transparent border-0 resize-none text-base text-gray-200 placeholder:text-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed max-h-40 overflow-y-auto leading-relaxed", style: {
+                                height: "auto",
+                                minHeight: "32px",
+                            }, onInput: (e) => {
+                                const target = e.target;
+                                target.style.height = "auto";
+                                target.style.height = `${Math.min(target.scrollHeight, 160)}px`;
+                            } })),
+                    React.createElement("button", { onClick: handleSend, disabled: isLoading || input.trim().length === 0, className: cn("shrink-0 w-10 h-10 rounded-full flex items-center justify-center transition-all", isLoading || input.trim().length === 0
+                            ? "bg-gray-800 text-gray-500 cursor-not-allowed"
+                            : "text-white hover:scale-105 active:scale-95"), style: isLoading || input.trim().length === 0
+                            ? undefined
+                            : {
+                                backgroundColor: themeColor,
+                                boxShadow: `0 10px 25px -10px ${themeColor}4d`,
+                            }, title: "Send message" }, isLoading ? (React.createElement(MessageLoading, null)) : (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-current" },
+                        React.createElement("path", { d: "M22 2L11 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                        React.createElement("path", { d: "M22 2L15 22L11 13L2 9L22 2Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })))))))));
+}
+function UserMessage({ message, themeColor, }) {
+    var _a;
+    return (React.createElement("div", { className: "flex justify-end" },
+        React.createElement("div", { className: "max-w-[70%] rounded-2xl px-4 py-3 text-sm text-white shadow-lg", style: { backgroundColor: themeColor } }, (_a = message.parts) === null || _a === void 0 ? void 0 :
+            _a.map((part, i) => (React.createElement("div", { key: `${message.id}-${i}`, className: "leading-relaxed" }, part.type === "text" && part.text))),
+            (!message.parts || message.parts.length === 0) && message.content && (React.createElement("div", { className: "leading-relaxed" }, message.content)))));
+}
+function AssistantMessage({ message }) {
+    var _a;
+    const getMessageContent = () => {
+        var _a;
+        // First try to get content from parts (custom format)
+        const partsContent = (_a = message.parts) === null || _a === void 0 ? void 0 : _a.filter((part) => part.type === "text").map((part) => part.text).join("");
+        // Fall back to direct content property (useChat format)
+        return partsContent || message.content || "";
+    };
+    const content = getMessageContent();
+    // Only render if there's actual content
+    if (!content || content.trim() === "") {
+        return null;
+    }
+    return (React.createElement("div", { className: "flex justify-start" },
+        React.createElement("div", { className: "max-w-[70%] rounded-2xl px-4 py-3 text-sm bg-muted border border-border" }, (_a = message.parts) === null || _a === void 0 ? void 0 :
+            _a.map((part, i) => {
+                switch (part.type) {
+                    case "text":
+                        return (React.createElement(Markdown, { key: `${message.id}-${i}` }, part.text || ""));
+                    default:
+                        return null;
+                }
+            }),
+            (!message.parts || message.parts.length === 0) && content && (React.createElement(Markdown, null, content)))));
+}