@agent-native/core 0.149.1 → 0.149.3

package/corpus/templates/slides/app/components/editor/ExportMenu.tsx

@@ -13,7 +13,7 @@ import {
   IconBrandGoogle,
   IconPlugConnected,
 } from "@tabler/icons-react";
-import { useRef, useState } from "react";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -48,282 +48,319 @@ interface ExportMenuProps {
   onExportGoogleSlides?: () => Promise<GoogleSlidesExportResult>;
   onShareLink?: () => void;
   onShareTeam?: () => void;
+  /** Render the export actions inside an existing dropdown menu. */
+  inline?: boolean;
 }
 
-export function ExportMenu({
-  deckId,
-  deckTitle,
-  onDuplicate,
-  onExportPdf,
-  onExportPptx,
-  onExportGoogleSlides,
-  onShareLink,
-  onShareTeam,
-}: ExportMenuProps) {
-  const t = useT();
-  const [googleSlidesImportOpen, setGoogleSlidesImportOpen] = useState(false);
-  const googleSlidesImportTarget = useRef<Window | null>(null);
-  const triggerBlobDownload = (blob: Blob, filename: string) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    a.rel = "noopener";
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
-  };
+export interface ExportMenuHandle {
+  connectGoogle: () => Promise<void>;
+  exportGoogleSlides: () => Promise<void>;
+  exportHtml: () => Promise<void>;
+  exportPptx: () => Promise<void>;
+}
 
-  const filenameFromDisposition = (
-    value: string | null,
-    fallbackExt: string,
-  ) => {
-    const match = value?.match(/filename="?([^"]+)"?/i);
-    const fallback = deckTitle.replace(/[^a-zA-Z0-9_-]/g, "-") || "deck";
-    return match?.[1] ?? `${fallback}${fallbackExt}`;
-  };
+export const ExportMenu = forwardRef<ExportMenuHandle, ExportMenuProps>(
+  function ExportMenu(
+    {
+      deckId,
+      deckTitle,
+      onDuplicate,
+      onExportPdf,
+      onExportPptx,
+      onExportGoogleSlides,
+      onShareLink,
+      onShareTeam,
+      inline = false,
+    },
+    ref,
+  ) {
+    const t = useT();
+    const [googleSlidesImportOpen, setGoogleSlidesImportOpen] = useState(false);
+    const googleSlidesImportTarget = useRef<Window | null>(null);
+    const triggerBlobDownload = (blob: Blob, filename: string) => {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.rel = "noopener";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    };
 
-  const readErrorMessage = async (res: Response, fallback: string) => {
-    try {
-      const data = await res.json();
-      return data.error || data.message || fallback;
-    } catch {
-      return fallback;
-    }
-  };
+    const filenameFromDisposition = (
+      value: string | null,
+      fallbackExt: string,
+    ) => {
+      const match = value?.match(/filename="?([^"]+)"?/i);
+      const fallback = deckTitle.replace(/[^a-zA-Z0-9_-]/g, "-") || "deck";
+      return match?.[1] ?? `${fallback}${fallbackExt}`;
+    };
 
-  const handleExportPptx = async () => {
-    try {
-      await onExportPptx();
-    } catch (err) {
-      console.error("Export failed:", err);
-      toast.error(t("editorExport.exportFailed"), {
-        description:
-          err instanceof Error
-            ? err.message
-            : t("editorExport.exportPptxError"),
-      });
-    }
-  };
+    const readErrorMessage = async (res: Response, fallback: string) => {
+      try {
+        const data = await res.json();
+        return data.error || data.message || fallback;
+      } catch {
+        return fallback;
+      }
+    };
 
-  const handleExportGoogleSlides = async () => {
-    if (!onExportGoogleSlides) return;
-    // Opened up-front: browsers only honour window.open() inside the click
-    // gesture, and building the PPTX is async.
-    const target = window.open("", "_blank");
-    googleSlidesImportTarget.current = target;
-    try {
-      const result = await onExportGoogleSlides();
-      if (result.url !== null) {
-        googleSlidesImportTarget.current = null;
-        if (target) target.location.href = result.url;
-        toast.success(t("editorExport.googleSlidesCreated"), {
-          description: t("editorExport.googleSlidesCreatedHint"),
+    const handleExportPptx = async () => {
+      try {
+        await onExportPptx();
+      } catch (err) {
+        console.error("Export failed:", err);
+        toast.error(t("editorExport.exportFailed"), {
+          description:
+            err instanceof Error
+              ? err.message
+              : t("editorExport.exportPptxError"),
         });
-        return;
       }
-      if (target) target.location.href = GOOGLE_SLIDES_IMPORT_URL;
-      setGoogleSlidesImportOpen(true);
-      // The deck did not reach Drive. Saying "success" here is why users read
-      // the .pptx download as the intended result and never learn that their
-      // Google account is unconnected or that Drive rejected the upload.
-      toast.warning(t("editorExport.googleSlidesDownloaded"), {
-        description: `${result.reason} ${t("editorExport.googleSlidesImportHint")}`,
-      });
-    } catch (err) {
-      googleSlidesImportTarget.current = null;
-      target?.close();
-      console.error("Export failed:", err);
-      toast.error(t("editorExport.exportFailed"), {
-        description:
-          err instanceof Error
-            ? err.message
-            : t("editorExport.exportGoogleSlidesError"),
-      });
-    }
-  };
+    };
 
-  const handleConnectGoogle = async () => {
-    const authUrl = new URL(
-      agentNativePath("/_agent-native/google-docs/auth-url"),
-      window.location.origin,
-    );
-    authUrl.searchParams.set(
-      "return",
-      window.location.pathname + window.location.search,
-    );
+    const handleExportGoogleSlides = async () => {
+      if (!onExportGoogleSlides) return;
+      // Opened up-front: browsers only honour window.open() inside the click
+      // gesture, and building the PPTX is async.
+      const target = window.open("", "_blank");
+      googleSlidesImportTarget.current = target;
+      try {
+        const result = await onExportGoogleSlides();
+        if (result.url !== null) {
+          googleSlidesImportTarget.current = null;
+          if (target) target.location.href = result.url;
+          toast.success(t("editorExport.googleSlidesCreated"), {
+            description: t("editorExport.googleSlidesCreatedHint"),
+          });
+          return;
+        }
+        if (target) target.location.href = GOOGLE_SLIDES_IMPORT_URL;
+        setGoogleSlidesImportOpen(true);
+        // The deck did not reach Drive. Saying "success" here is why users read
+        // the .pptx download as the intended result and never learn that their
+        // Google account is unconnected or that Drive rejected the upload.
+        toast.warning(t("editorExport.googleSlidesDownloaded"), {
+          description: `${result.reason} ${t("editorExport.googleSlidesImportHint")}`,
+        });
+      } catch (err) {
+        googleSlidesImportTarget.current = null;
+        target?.close();
+        console.error("Export failed:", err);
+        toast.error(t("editorExport.exportFailed"), {
+          description:
+            err instanceof Error
+              ? err.message
+              : t("editorExport.exportGoogleSlidesError"),
+        });
+      }
+    };
 
-    const popup = window.open(
-      "",
-      "google-docs-oauth",
-      "popup,width=520,height=720",
-    );
-    if (!popup) {
-      toast.error(t("editorExport.exportFailed"), {
-        description: t("editorExport.exportGoogleSlidesError"),
-      });
-      return;
-    }
+    const handleConnectGoogle = async () => {
+      const authUrl = new URL(
+        agentNativePath("/_agent-native/google-docs/auth-url"),
+        window.location.origin,
+      );
+      authUrl.searchParams.set(
+        "return",
+        window.location.pathname + window.location.search,
+      );
 
-    try {
-      const response = await fetch(authUrl.toString(), {
-        credentials: "same-origin",
-      });
-      if (!response.ok) {
-        throw new Error(
-          await readErrorMessage(
-            response,
-            t("editorExport.exportGoogleSlidesError"),
-          ),
-        );
+      const popup = window.open(
+        "",
+        "google-docs-oauth",
+        "popup,width=520,height=720",
+      );
+      if (!popup) {
+        toast.error(t("editorExport.exportFailed"), {
+          description: t("editorExport.exportGoogleSlidesError"),
+        });
+        return;
       }
-      const data = (await response.json()) as { url?: unknown };
-      if (typeof data.url !== "string") {
-        throw new Error(t("editorExport.exportGoogleSlidesError"));
+
+      try {
+        const response = await fetch(authUrl.toString(), {
+          credentials: "same-origin",
+        });
+        if (!response.ok) {
+          throw new Error(
+            await readErrorMessage(
+              response,
+              t("editorExport.exportGoogleSlidesError"),
+            ),
+          );
+        }
+        const data = (await response.json()) as { url?: unknown };
+        if (typeof data.url !== "string") {
+          throw new Error(t("editorExport.exportGoogleSlidesError"));
+        }
+        popup.location.href = data.url;
+      } catch (err) {
+        popup?.close();
+        console.error("Google connection failed:", err);
+        toast.error(t("editorExport.exportFailed"), {
+          description:
+            err instanceof Error
+              ? err.message
+              : t("editorExport.exportGoogleSlidesError"),
+        });
       }
-      popup.location.href = data.url;
-    } catch (err) {
-      popup?.close();
-      console.error("Google connection failed:", err);
-      toast.error(t("editorExport.exportFailed"), {
-        description:
-          err instanceof Error
-            ? err.message
-            : t("editorExport.exportGoogleSlidesError"),
-      });
-    }
-  };
+    };
 
-  const handleExportHtml = async () => {
-    try {
-      const res = await fetch(`${appBasePath()}/api/exports/html`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ deckId }),
-      });
-      if (!res.ok) {
-        throw new Error(
-          await readErrorMessage(res, t("editorExport.htmlFailed")),
+    const handleExportHtml = async () => {
+      try {
+        const res = await fetch(`${appBasePath()}/api/exports/html`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ deckId }),
+        });
+        if (!res.ok) {
+          throw new Error(
+            await readErrorMessage(res, t("editorExport.htmlFailed")),
+          );
+        }
+        const blob = await res.blob();
+        const filename = filenameFromDisposition(
+          res.headers.get("content-disposition"),
+          ".html",
         );
+        triggerBlobDownload(blob, filename);
+      } catch (err) {
+        console.error("Export failed:", err);
+        toast.error(t("editorExport.exportFailed"), {
+          description:
+            err instanceof Error
+              ? err.message
+              : t("editorExport.exportHtmlError"),
+        });
       }
-      const blob = await res.blob();
-      const filename = filenameFromDisposition(
-        res.headers.get("content-disposition"),
-        ".html",
-      );
-      triggerBlobDownload(blob, filename);
-    } catch (err) {
-      console.error("Export failed:", err);
-      toast.error(t("editorExport.exportFailed"), {
-        description:
-          err instanceof Error
-            ? err.message
-            : t("editorExport.exportHtmlError"),
-      });
-    }
-  };
+    };
 
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent text-xs cursor-pointer whitespace-nowrap">
-            <IconUpload className="w-3.5 h-3.5" />
-            <span className="hidden md:inline">{t("editorExport.export")}</span>
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-52">
-          <DropdownMenuLabel className="text-[11px] text-muted-foreground">
-            {t("editorExport.exportAndDuplicate")}
-          </DropdownMenuLabel>
-          {onShareTeam && (
-            <DropdownMenuItem onClick={onShareTeam} className="cursor-pointer">
-              <IconShare2 className="w-4 h-4 mr-2" />
-              {t("editorExport.shareWithTeam")}
-            </DropdownMenuItem>
-          )}
-          {onShareLink && (
-            <DropdownMenuItem onClick={onShareLink} className="cursor-pointer">
-              <IconShare2 className="w-4 h-4 mr-2" />
-              {t("editorExport.publicShareLink")}
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={handleExportHtml}
-            className="cursor-pointer"
-          >
-            <IconCode className="w-4 h-4 mr-2" />
-            {t("editorExport.downloadHtml")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={onExportPdf} className="cursor-pointer">
-            <IconFileTypePdf className="w-4 h-4 mr-2" />
-            {t("editorExport.exportPdf")}
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={handleExportPptx}
-            className="cursor-pointer"
-          >
-            <IconDownload className="w-4 h-4 mr-2" />
-            {t("editorExport.exportPptx")}
+    useImperativeHandle(
+      ref,
+      () => ({
+        connectGoogle: handleConnectGoogle,
+        exportGoogleSlides: handleExportGoogleSlides,
+        exportHtml: handleExportHtml,
+        exportPptx: handleExportPptx,
+      }),
+      [
+        handleConnectGoogle,
+        handleExportGoogleSlides,
+        handleExportHtml,
+        handleExportPptx,
+      ],
+    );
+
+    const menuContent = (
+      <>
+        <DropdownMenuLabel className="text-[11px] text-muted-foreground">
+          {t("editorExport.exportAndDuplicate")}
+        </DropdownMenuLabel>
+        {onShareTeam && (
+          <DropdownMenuItem onClick={onShareTeam} className="cursor-pointer">
+            <IconShare2 className="w-4 h-4 mr-2" />
+            {t("editorExport.shareWithTeam")}
           </DropdownMenuItem>
-          {onExportGoogleSlides && (
-            <>
-              <DropdownMenuItem
-                onClick={handleConnectGoogle}
-                className="cursor-pointer"
-              >
-                <IconPlugConnected className="w-4 h-4 mr-2" />
-                {t("editorExport.connectGoogle")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={handleExportGoogleSlides}
-                className="cursor-pointer"
-              >
-                <IconBrandGoogle className="w-4 h-4 mr-2" />
-                {t("editorExport.openInGoogleSlides")}
-              </DropdownMenuItem>
-            </>
-          )}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
-            <IconCopy className="w-4 h-4 mr-2" />
-            {t("editorExport.duplicateDeck")}
+        )}
+        {onShareLink && (
+          <DropdownMenuItem onClick={onShareLink} className="cursor-pointer">
+            <IconShare2 className="w-4 h-4 mr-2" />
+            {t("editorExport.publicShareLink")}
           </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <Dialog
-        open={googleSlidesImportOpen}
-        onOpenChange={setGoogleSlidesImportOpen}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {t("editorExport.googleSlidesDownloaded")}
-            </DialogTitle>
-            <DialogDescription>
-              {t("editorExport.googleSlidesImportHint")}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              type="button"
-              onClick={() => {
-                const target = googleSlidesImportTarget.current;
-                if (target && !target.closed) {
-                  target.focus?.();
-                } else {
-                  window.open(GOOGLE_SLIDES_IMPORT_URL, "_blank");
-                }
-                setGoogleSlidesImportOpen(false);
-              }}
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleExportHtml} className="cursor-pointer">
+          <IconCode className="w-4 h-4 mr-2" />
+          {t("editorExport.downloadHtml")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onExportPdf} className="cursor-pointer">
+          <IconFileTypePdf className="w-4 h-4 mr-2" />
+          {t("editorExport.exportPdf")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleExportPptx} className="cursor-pointer">
+          <IconDownload className="w-4 h-4 mr-2" />
+          {t("editorExport.exportPptx")}
+        </DropdownMenuItem>
+        {onExportGoogleSlides && (
+          <>
+            <DropdownMenuItem
+              onClick={handleConnectGoogle}
+              className="cursor-pointer"
+            >
+              <IconPlugConnected className="w-4 h-4 mr-2" />
+              {t("editorExport.connectGoogle")}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={handleExportGoogleSlides}
+              className="cursor-pointer"
             >
+              <IconBrandGoogle className="w-4 h-4 mr-2" />
               {t("editorExport.openInGoogleSlides")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
+            </DropdownMenuItem>
+          </>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
+          <IconCopy className="w-4 h-4 mr-2" />
+          {t("editorExport.duplicateDeck")}
+        </DropdownMenuItem>
+      </>
+    );
+
+    return (
+      <>
+        {inline ? (
+          menuContent
+        ) : (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent text-xs cursor-pointer whitespace-nowrap">
+                <IconUpload className="w-3.5 h-3.5" />
+                <span className="hidden md:inline">
+                  {t("editorExport.export")}
+                </span>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-52">
+              {menuContent}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        <Dialog
+          open={googleSlidesImportOpen}
+          onOpenChange={setGoogleSlidesImportOpen}
+        >
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>
+                {t("editorExport.googleSlidesDownloaded")}
+              </DialogTitle>
+              <DialogDescription>
+                {t("editorExport.googleSlidesImportHint")}
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button
+                type="button"
+                onClick={() => {
+                  const target = googleSlidesImportTarget.current;
+                  if (target && !target.closed) {
+                    target.focus?.();
+                  } else {
+                    window.open(GOOGLE_SLIDES_IMPORT_URL, "_blank");
+                  }
+                  setGoogleSlidesImportOpen(false);
+                }}
+              >
+                {t("editorExport.openInGoogleSlides")}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+);

package/corpus/templates/slides/app/components/editor/GeneratingSlidePreview.tsx

@@ -69,7 +69,7 @@ export default function GeneratingSlidePreview({
         <span className="size-1.5 rounded-full bg-primary" aria-hidden="true" />
         {t("raw.aiEditing")}
       </div>
-      <div className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur">
+      <div className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5 text-muted-foreground shadow-sm">
         <IconLoader2 className="size-3.5 animate-spin" aria-hidden="true" />
       </div>
     </div>

package/corpus/templates/slides/app/components/editor/GoogleDriveConnectionCta.tsx

@@ -5,6 +5,7 @@ import {
   IconBrandGoogleDrive,
   IconLoader2,
   IconPlugConnected,
+  IconX,
 } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 
@@ -65,6 +66,7 @@ export function GoogleDriveConnectionCta({
   const [loading, setLoading] = useState(true);
   const [connecting, setConnecting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [dismissed, setDismissed] = useState(false);
 
   const refreshStatus =
     useCallback(async (): Promise<GoogleDocsStatus | null> => {
@@ -165,7 +167,9 @@ export function GoogleDriveConnectionCta({
     }
   }, [connecting, onConnected, refreshStatus, requiresUrlImportAccess]);
 
-  if (loading || (status?.connected && !needsReconnect)) return null;
+  if (dismissed || loading || (status?.connected && !needsReconnect)) {
+    return null;
+  }
 
   const displayStatus = status ?? { configured: false, connected: false };
 
@@ -208,6 +212,14 @@ export function GoogleDriveConnectionCta({
             : t("editorExport.connectGoogle")}
         </Button>
       )}
+      <button
+        type="button"
+        onClick={() => setDismissed(true)}
+        className="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label={t("comments.close")}
+      >
+        <IconX className="size-3.5" />
+      </button>
     </div>
   );
 }