@sampleapp.ai/sdk 1.0.48 → 1.0.49

package/dist/components/sandbox/guardian/ui/download-and-open-buttons.js

@@ -1,9 +1,10 @@
 "use client";
 import React from "react";
-import { DownloadIcon, Check, Copy } from "lucide-react";
+import { DownloadIcon, Check, Copy, Loader2 } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "./dialog";
 import vscodeLogo from "../../../../assets/vscode.png";
 import { handleSandboxDownload } from "../utils";
+import { createApiClient } from "../../../../lib/api-client";
 // VSCode logo component using imported asset
 function VSCodeLogo({ className }) {
     return (React.createElement("img", { src: vscodeLogo, alt: "VSCode", width: 20, height: 20, className: className }));
@@ -11,16 +12,19 @@ function VSCodeLogo({ className }) {
 export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browserUrl, sandboxId, apiKey, }) => {
     const [isModalOpen, setIsModalOpen] = React.useState(false);
     const [hasCopied, setHasCopied] = React.useState(false);
+    const [isCloning, setIsCloning] = React.useState(false);
     // Build the npx command using the SDK download endpoint
     // Use default MAIN_APP_URL for SDK (can be overridden via env)
-    const MAIN_APP_URL = typeof window !== "undefined" && window.SAMPLEAPP_MAIN_URL
+    const MAIN_APP_URL = typeof window !== "undefined" &&
+        window.SAMPLEAPP_MAIN_URL
         ? window.SAMPLEAPP_MAIN_URL
         : "https://sampleapp.ai";
     const npxCommand = React.useMemo(() => {
         if (!sandboxId) {
             return "";
         }
-        const apiBaseUrl = typeof window !== "undefined" && window.SAMPLEAPP_API_URL
+        const apiBaseUrl = typeof window !== "undefined" &&
+            window.SAMPLEAPP_API_URL
             ? window.SAMPLEAPP_API_URL
             : MAIN_APP_URL.replace("sampleapp.ai", "api.sampleapp.ai");
         return `npx sampleappai add "${apiBaseUrl}/api/v1/sdk/download-code?sandbox_id=${sandboxId}"`;
@@ -28,10 +32,32 @@ export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browse
     const handleDownload = async () => {
         await handleSandboxDownload(sandboxId, apiKey, () => setIsModalOpen(true));
     };
-    const handleOpenInVSCode = () => {
-        if (gitUrl) {
+    const handleOpenInVSCode = async () => {
+        // If we have a sandboxId and apiKey, fetch an authenticated clone URL from the backend
+        if (sandboxId && apiKey) {
+            setIsCloning(true);
             try {
-                window.location.href = `vscode://vscode.git/clone?url=${gitUrl}`;
+                const client = createApiClient({ apiKey });
+                const { clone_url } = await client.sdk.getCloneUrl(sandboxId);
+                window.location.href = `vscode://vscode.git/clone?url=${encodeURIComponent(clone_url)}`;
+            }
+            catch (err) {
+                console.error("Failed to get clone URL:", err);
+                // Fall back to direct gitUrl or modal
+                if (gitUrl) {
+                    window.location.href = `vscode://vscode.git/clone?url=${encodeURIComponent(gitUrl)}`;
+                }
+                else {
+                    setIsModalOpen(true);
+                }
+            }
+            finally {
+                setIsCloning(false);
+            }
+        }
+        else if (gitUrl) {
+            try {
+                window.location.href = `vscode://vscode.git/clone?url=${encodeURIComponent(gitUrl)}`;
             }
             catch (_a) {
                 // Silently fail if vscode:// protocol isn't registered
@@ -59,9 +85,9 @@ export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browse
             React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md !text-white transition-all hover:opacity-90 active:scale-[0.98]", style: { backgroundColor: themeColor }, onClick: handleDownload },
                 React.createElement(DownloadIcon, { className: "w-3.5 h-3.5 !text-white" }),
                 "Download example"),
-            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-100 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white", onClick: handleOpenInVSCode },
-                React.createElement(VSCodeLogo, { className: "w-3.5 h-3.5" }),
-                "Integrate in VS Code")),
+            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-100 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white disabled:opacity-50", onClick: handleOpenInVSCode, disabled: isCloning },
+                isCloning ? (React.createElement(Loader2, { className: "w-3.5 h-3.5 animate-spin" })) : (React.createElement(VSCodeLogo, { className: "w-3.5 h-3.5" })),
+                isCloning ? "Opening..." : "Integrate in VS Code")),
         React.createElement(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen },
             React.createElement(DialogContent, { className: "max-w-[90vw] sm:max-w-md w-full" },
                 React.createElement(DialogHeader, null,

package/dist/index.d.ts

@@ -120,6 +120,15 @@ declare class ApiClient {
          * @returns Promise that resolves when download is initiated
          */
         downloadCode: (sandboxId: string) => Promise<void>;
+        /**
+         * Get an authenticated clone URL for a private GitHub repository.
+         * Returns an HTTPS URL with a short-lived token (expires in 1 hour)
+         * that can be used with vscode://vscode.git/clone or git clone directly.
+         *
+         * @param sandboxId - The sandbox content UID
+         * @returns Clone URL response with authenticated URL
+         */
+        getCloneUrl: (sandboxId: string) => Promise<CloneUrlResponse>;
         /**
          * Start VM endpoint that starts a desktop sandbox, launches Chrome,
          * navigates to the target URL, and returns a VNC viewer URL
@@ -216,6 +225,10 @@ declare interface ChatButtonProps {
     onClick?: () => void;
 }
 
+declare interface CloneUrlResponse {
+    clone_url: string;
+}
+
 declare enum CodeLanguage {
     JAVASCRIPT = "javascript",
     TYPESCRIPT = "typescript",