@sampleapp.ai/sdk 1.0.36 → 1.0.38

package/dist/components/guardian/right-view/code-view.js

@@ -1,56 +0,0 @@
-"use client";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-// FileExplorer and Editor components are not yet implemented in SDK
-// These imports are commented out until those components are added
-// import FileExplorer, {
-//   FileTreeNode,
-// } from "../ide/file-explorer";
-// import Editor from "../ide/Editor";
-import React, { useEffect } from "react";
-import { useGuardianContext } from "../context/guardian-context";
-import { zipPathToFileTree } from "../zip-to-filetree";
-import { zipPathToCodebase } from "../zip-to-codebase";
-// Stub components until FileExplorer and Editor are implemented
-const FileExplorer = ({ isGenerating }) => (React.createElement("div", { className: "h-full flex items-center justify-center text-muted-foreground text-sm" }, "File Explorer - Coming Soon"));
-const Editor = () => (React.createElement("div", { className: "h-full flex items-center justify-center text-muted-foreground text-sm" }, "Code Editor - Coming Soon"));
-// ORIGINAL URL: https://launchdarkly.sampleapp.ai/chat/mgl0vkr1IPwCIR
-export default function CodeView({ codeZipFile }) {
-    const { setFileTree, setGeneratedCode } = useGuardianContext();
-    useEffect(() => {
-        let isMounted = true;
-        zipPathToFileTree(codeZipFile)
-            .then((fileTree) => {
-            if (isMounted) {
-                setFileTree(fileTree);
-            }
-        })
-            .catch((error) => {
-            console.error("Failed to load zip file:", error);
-        });
-        zipPathToCodebase(codeZipFile)
-            .then((codebase) => {
-            if (isMounted) {
-                setGeneratedCode(codebase);
-            }
-        })
-            .catch((error) => {
-            console.error("Failed to load codebase:", error);
-        });
-        return () => {
-            isMounted = false;
-        };
-    }, [codeZipFile, setFileTree, setGeneratedCode]);
-    return (React.createElement("div", { className: "h-[calc(100vh-12.9rem)] w-full" },
-        React.createElement(PanelGroup, { direction: "horizontal", className: "relative h-full" },
-            React.createElement(Panel, { defaultSize: 25, minSize: 15, maxSize: 50, order: 1 },
-                React.createElement("div", { className: "h-full" },
-                    React.createElement(FileExplorer, { isGenerating: false }))),
-            React.createElement(PanelResizeHandle, { className: "w-0 relative group flex-shrink-0" },
-                React.createElement("div", { className: "absolute inset-y-0 left-1/2 -translate-x-1/2 w-2 -ml-1 transition-colors flex justify-center items-center bg-transparent" },
-                    React.createElement("div", { className: "absolute inset-y-0 left-0 w-1/2 group-hover:bg-blue-400/20 transition-colors" }),
-                    React.createElement("div", { className: "absolute inset-y-0 right-0 w-1/2 group-hover:bg-blue-400/20 transition-colors" }),
-                    React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))),
-            React.createElement(Panel, { defaultSize: 75, order: 2 },
-                React.createElement("div", { className: "h-full" },
-                    React.createElement(Editor, null))))));
-}

package/dist/components/guardian/right-view/pill-file-selector.js

@@ -1,233 +0,0 @@
-"use client";
-import React from "react";
-import { useGuardianContext } from "../context/guardian-context";
-import { cn } from "../../../lib/utils";
-import { useFrameParams } from "../hooks/use-frame-params";
-import { FileCode, FileJson, FileText, Settings, Layout, Database, Image, Terminal, } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
-const FILE_ICONS = {
-    // JavaScript/React
-    js: { icon: FileCode, color: "text-yellow-600" },
-    jsx: { icon: FileCode, color: "text-blue-500" },
-    ts: { icon: FileCode, color: "text-blue-600" },
-    tsx: { icon: FileCode, color: "text-blue-500" },
-    json: { icon: FileJson, color: "text-yellow-500" },
-    html: { icon: Layout, color: "text-orange-500" },
-    css: { icon: FileText, color: "text-blue-400" },
-    scss: { icon: FileText, color: "text-pink-500" },
-    less: { icon: FileText, color: "text-indigo-500" },
-    // Python
-    py: { icon: FileCode, color: "text-green-500" },
-    pyc: { icon: FileCode, color: "text-green-400" },
-    pyw: { icon: FileCode, color: "text-green-500" },
-    ipynb: { icon: Terminal, color: "text-red-500" },
-    // Config files
-    env: { icon: Settings, color: "text-zinc-500" },
-    gitignore: { icon: Settings, color: "text-zinc-500" },
-    yml: { icon: Settings, color: "text-purple-500" },
-    yaml: { icon: Settings, color: "text-purple-500" },
-    toml: { icon: Settings, color: "text-purple-500" },
-    ini: { icon: Settings, color: "text-zinc-500" },
-    cfg: { icon: Settings, color: "text-zinc-500" },
-    config: { icon: Settings, color: "text-zinc-500" },
-    // Database
-    sql: { icon: Database, color: "text-blue-500" },
-    sqlite: { icon: Database, color: "text-blue-500" },
-    sqlite3: { icon: Database, color: "text-blue-500" },
-    // Images
-    png: { icon: Image, color: "text-green-500" },
-    jpg: { icon: Image, color: "text-green-500" },
-    jpeg: { icon: Image, color: "text-green-500" },
-    gif: { icon: Image, color: "text-green-500" },
-    svg: { icon: Image, color: "text-green-500" },
-    ico: { icon: Image, color: "text-green-500" },
-    // Default
-    default: { icon: FileText, color: "text-zinc-500" },
-};
-export default function PillFileSelector({ themeColor }) {
-    const containerRef = React.useRef(null);
-    const fileRefs = React.useRef({});
-    const lastInitializedFilePath = React.useRef(null);
-    const { generatedCode, updateCode, setLanguage, activeFilePath: contextActiveFilePath, setActiveFileName, setActiveFilePath, setActiveDependenciesToInstall, setActiveLineRange, filesEdited, } = useGuardianContext();
-    // Read frame params - these override context when isFrame=true
-    const frameParams = useFrameParams();
-    // Use frame param overrides when in frame mode
-    const activeFilePath = frameParams.isFrame && frameParams.activeFilePath
-        ? frameParams.activeFilePath
-        : contextActiveFilePath;
-    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
-    // Get file entries and sort them
-    const fileEntries = Object.entries(generatedCode).sort(([a], [b]) => {
-        const aName = a.split("/").pop() || a;
-        const bName = b.split("/").pop() || b;
-        return aName.localeCompare(bName);
-    });
-    const handleFileClick = (filePath, fileData) => {
-        // In frame mode, replace all frame params with activeFilePath and isFrame only
-        if (frameParams.isFrame) {
-            const url = new URL(window.location.href);
-            url.search = "";
-            url.searchParams.set("activeFilePath", filePath);
-            url.searchParams.set("isFrame", "true");
-            url.searchParams.set("theme", effectiveThemeColor);
-            window.history.replaceState({}, "", url.toString());
-        }
-        const fileName = filePath.split("/").pop() || filePath;
-        setActiveFileName(fileName);
-        setActiveFilePath(filePath);
-        setLanguage(fileData.code_language);
-        updateCode(filePath in filesEdited
-            ? filesEdited[filePath].full_code
-            : fileData.full_code);
-        setActiveDependenciesToInstall(fileData.dependencies_to_install);
-    };
-    const getFileIcon = (fileName) => {
-        var _a;
-        const ext = ((_a = fileName.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
-        return FILE_ICONS[ext] || FILE_ICONS.default;
-    };
-    // Exclude certain files from display
-    const excludedFiles = [
-        ".env",
-        "vite-plugin-react-instrumentation.ts",
-        "instrumentation-client.ts",
-    ];
-    const filteredFiles = fileEntries.filter(([filePath]) => {
-        const fileName = filePath.split("/").pop() || filePath;
-        return !excludedFiles.includes(fileName);
-    });
-    // Scroll a pill into view whenever the active file changes
-    const scrollActivePillIntoView = React.useCallback((filePath) => {
-        const targetPath = filePath !== null && filePath !== void 0 ? filePath : activeFilePath;
-        if (!targetPath)
-            return;
-        const container = containerRef.current;
-        const activeButton = fileRefs.current[targetPath];
-        if (!container || !activeButton)
-            return;
-        // Small delay to ensure DOM has updated
-        setTimeout(() => {
-            const containerRect = container.getBoundingClientRect();
-            const activeRect = activeButton.getBoundingClientRect();
-            const isOutOfView = activeRect.left < containerRect.left ||
-                activeRect.right > containerRect.right;
-            if (isOutOfView) {
-                activeButton.scrollIntoView({
-                    behavior: "instant",
-                    block: "nearest",
-                    inline: "center",
-                });
-            }
-        }, 50);
-    }, [activeFilePath]);
-    // Ensure the active file pill is always visible in the scroll area
-    React.useEffect(() => {
-        scrollActivePillIntoView();
-    }, [scrollActivePillIntoView, filteredFiles.length]);
-    // Listen for frame param updates from postMessage
-    React.useEffect(() => {
-        if (!frameParams.isFrame)
-            return;
-        const handleFrameParamsUpdate = (event) => {
-            var _a;
-            try {
-                const customEvent = event;
-                const nextPath = (_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.activeFilePath;
-                scrollActivePillIntoView(nextPath);
-            }
-            catch (_b) {
-                // Fallback to current activeFilePath if parsing fails
-                scrollActivePillIntoView();
-            }
-        };
-        window.addEventListener("frameParamsUpdated", handleFrameParamsUpdate);
-        return () => window.removeEventListener("frameParamsUpdated", handleFrameParamsUpdate);
-    }, [frameParams.isFrame, scrollActivePillIntoView]);
-    // Load file from frame params when they change
-    React.useEffect(() => {
-        // Skip if not in frame mode or no file path specified
-        if (!frameParams.isFrame || !frameParams.activeFilePath) {
-            return;
-        }
-        // Skip if we've already initialized this exact file path
-        if (lastInitializedFilePath.current === frameParams.activeFilePath) {
-            return;
-        }
-        // Skip if generatedCode isn't loaded yet
-        if (!generatedCode || Object.keys(generatedCode).length === 0) {
-            return;
-        }
-        // Search by file_path property first (source of truth), then fallback to key lookup
-        let fileData;
-        let resolvedFilePath;
-        // First, search through all code outputs to find one matching file_path
-        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === frameParams.activeFilePath);
-        if (matchingCodeOutput) {
-            fileData = matchingCodeOutput;
-            resolvedFilePath = matchingCodeOutput.file_path;
-        }
-        else {
-            // Fallback: try to get from generatedCode by key
-            if (generatedCode[frameParams.activeFilePath]) {
-                fileData = generatedCode[frameParams.activeFilePath];
-                resolvedFilePath = fileData.file_path || frameParams.activeFilePath;
-            }
-        }
-        if (fileData && resolvedFilePath) {
-            lastInitializedFilePath.current = frameParams.activeFilePath; // Track initialized path
-            const fileName = fileData.code_file_name ||
-                resolvedFilePath.split("/").pop() ||
-                resolvedFilePath;
-            setActiveFileName(fileName);
-            setActiveFilePath(resolvedFilePath);
-            setLanguage(fileData.code_language);
-            updateCode(resolvedFilePath in filesEdited
-                ? filesEdited[resolvedFilePath].full_code
-                : fileData.full_code);
-            setActiveDependenciesToInstall(fileData.dependencies_to_install);
-            // Set line range if provided in frame params
-            if (frameParams.linesStart !== undefined) {
-                setActiveLineRange({
-                    start: frameParams.linesStart,
-                    end: frameParams.linesEnd,
-                });
-            }
-            else {
-                setActiveLineRange(undefined);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [frameParams.isFrame, frameParams.activeFilePath, generatedCode]);
-    if (filteredFiles.length === 0) {
-        return null;
-    }
-    return (React.createElement(TooltipProvider, null,
-        React.createElement("div", { ref: containerRef, className: "flex items-center gap-1 px-2 py-1.5 overflow-x-auto no-scrollbar [-ms-overflow-style:none] [scrollbar-width:none] flex-1" }, filteredFiles.map(([filePath, fileData]) => {
-            const fileName = filePath.split("/").pop() || filePath;
-            const isActive = filePath === activeFilePath;
-            const isEdited = filePath in filesEdited;
-            const fileIcon = getFileIcon(fileName);
-            const IconComponent = fileIcon.icon;
-            return (React.createElement(Tooltip, { key: filePath },
-                React.createElement(TooltipTrigger, { asChild: true },
-                    React.createElement("button", { ref: (el) => {
-                            if (el) {
-                                fileRefs.current[filePath] = el;
-                            }
-                            else {
-                                delete fileRefs.current[filePath];
-                            }
-                        }, onClick: () => handleFileClick(filePath, fileData), className: cn("flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-normal transition-colors whitespace-nowrap", isActive
-                            ? "rounded-2xl text-zinc-100"
-                            : "text-zinc-400 hover:text-zinc-200", isEdited && "ring-1 ring-yellow-500/50"), style: isActive
-                            ? {
-                                backgroundColor: `${effectiveThemeColor}33`, // ~20% opacity
-                                color: effectiveThemeColor,
-                            }
-                            : undefined },
-                        React.createElement(IconComponent, { size: 12, className: cn("flex-shrink-0", !isActive && "text-zinc-500"), style: isActive ? { color: effectiveThemeColor } : undefined }),
-                        React.createElement("span", { className: "truncate max-w-[180px]" }, fileName),
-                        isEdited && (React.createElement("span", { className: "h-1 w-1 rounded-full bg-yellow-400 flex-shrink-0" })))),
-                React.createElement(TooltipContent, { side: "top", className: "bg-zinc-900 text-zinc-200 text-[11px] px-2 py-1 rounded shadow border border-zinc-700 whitespace-pre font-mono" }, filePath)));
-        }))));
-}

package/dist/components/guardian/right-view/preview-control-bar.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { useFrameParams } from "../hooks/use-frame-params";
-import { useGuardianContext } from "../context/guardian-context";
-import { ChevronDown, RefreshCw, Maximize2, Minimize2, ExternalLink, } from "lucide-react";
-export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, themeColor, externalUrl, // <-- NEW PROP
- }) {
-    const { isBrowserMaximized, setIsBrowserMaximized } = useGuardianContext();
-    const frameParams = useFrameParams();
-    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
-    return (React.createElement("div", { className: "w-full flex items-center justify-between px-4 py-[0.32rem] border-b" },
-        React.createElement("button", { onClick: onToggle, className: "flex items-center gap-2 transition-colors", title: isMinimized ? "Show preview" : "Hide preview" },
-            React.createElement("div", { className: "transition-transform duration-300 ease-in-out", style: {
-                    transform: isMinimized ? "rotate(0deg)" : "rotate(180deg)",
-                    color: effectiveThemeColor,
-                } },
-                React.createElement(ChevronDown, { className: "w-4 h-4" })),
-            React.createElement("span", { className: "text-sm font-medium", style: { color: effectiveThemeColor } }, "Preview")),
-        React.createElement("div", { className: "flex items-center gap-2" },
-            externalUrl && (React.createElement("a", { href: externalUrl, target: "_blank", rel: "noopener noreferrer", title: "Open in new tab", style: { color: effectiveThemeColor }, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800" },
-                React.createElement(ExternalLink, { className: "w-4 h-4" }),
-                React.createElement("span", { className: "sr-only" }, "Open external link"))),
-            React.createElement("button", { onClick: onRefresh, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800", title: "Refresh preview", style: { color: effectiveThemeColor } },
-                React.createElement(RefreshCw, { className: "w-4 h-4" })),
-            React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800", title: isBrowserMaximized ? "Exit fullscreen" : "Fullscreen preview", style: { color: effectiveThemeColor } }, isBrowserMaximized ? (React.createElement(Minimize2, { className: "w-4 h-4" })) : (React.createElement(Maximize2, { className: "w-4 h-4" }))))));
-}

package/dist/components/guardian/right-view/right-panel-view.js

@@ -1,38 +0,0 @@
-"use client";
-import React from "react";
-import SlidingEditPreviewToggle from "../demo/left-view/toggle";
-import Browser from "../ide/browser";
-import CodeView from "./code-view";
-import { useGuardianContext } from "../context/guardian-context";
-import { Component as AiLoader } from "../ui/ai-loader";
-export default function RightPanelView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, }) {
-    const { setCurrentView, currentView } = useGuardianContext();
-    return (React.createElement("div", null,
-        React.createElement("div", { className: "flex justify-center border-b" },
-            React.createElement(SlidingEditPreviewToggle, { playgroundUid: "guardian", currentView: currentView, setCurrentView: (view) => setCurrentView(view), variant: "pill", buttonClassName: "text-sm px-4 py-1 h-auto", tabs: [
-                    { id: "editor", label: "Code" },
-                    { id: "preview", label: "Preview" },
-                ] })),
-        React.createElement("div", { style: {
-                display: currentView === "preview" ? "block" : "none",
-            } }, !browserUrl ? (React.createElement("div", { className: "h-[calc(100vh-12.2rem)] w-full relative overflow-hidden rounded-b-none" },
-            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: useVm
-                ? "h-[calc(100vh-9.6rem)] w-full border-none rounded-b-none"
-                : "h-[calc(100vh-12.2rem)] w-full border-none rounded-b-none", reloadSignal: reloadCounter, useVm: useVm }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
-            overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
-                React.createElement("div", { className: "text-center" },
-                    React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
-                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Elevated error rates detected. Initiating rollback...")))),
-            overlayStage === "rebuilding" && (React.createElement("div", { className: "w-full h-full bg-amber-900 text-amber-100 flex items-center justify-center" },
-                React.createElement("div", { className: "text-center" },
-                    React.createElement("div", { className: "text-2xl font-semibold" }, "Rebuilding preview\u2026"),
-                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Applying safe configuration"),
-                    React.createElement("div", { className: "mt-4 inline-flex items-center gap-2" },
-                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
-                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
-                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" })))))))))),
-        React.createElement("div", { style: {
-                display: currentView === "editor" ? "block" : "none",
-            } },
-            React.createElement(CodeView, { codeZipFile: codeZipFile }))));
-}