@agent-native/core 0.141.6 → 0.144.0

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

@@ -0,0 +1,202 @@
+import { agentNativePath } from "@agent-native/core/client/api-path";
+import { oauthRedirectUri } from "@agent-native/core/client/host";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconBrandGoogleDrive,
+  IconLoader2,
+  IconPlugConnected,
+} from "@tabler/icons-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "../ui/button";
+
+interface GoogleDocsStatus {
+  configured: boolean;
+  connected: boolean;
+  error?: string;
+  message?: string;
+}
+
+interface GoogleDocsAuthResponse {
+  url?: string;
+  error?: string;
+  message?: string;
+}
+
+type JsonReadResult<T> = { ok: true; data: T } | { ok: false; error: Error };
+
+function endpoint(path: string): string {
+  return new URL(agentNativePath(path), window.location.origin).toString();
+}
+
+async function readJson<T>(response: Response): Promise<JsonReadResult<T>> {
+  try {
+    return { ok: true, data: (await response.json()) as T };
+  } catch (caught) {
+    return {
+      ok: false,
+      error: new Error("The server returned an unreadable response.", {
+        cause: caught,
+      }),
+    };
+  }
+}
+
+function responseError(
+  response: Response,
+  data: { error?: string; message?: string },
+  fallback: string,
+): Error {
+  return new Error(
+    data.message || data.error || `${fallback} (${response.status})`,
+  );
+}
+
+export interface GoogleDriveConnectionCtaProps {
+  onConnected?: () => void;
+}
+
+export function GoogleDriveConnectionCta({
+  onConnected,
+}: GoogleDriveConnectionCtaProps) {
+  const t = useT();
+  const [status, setStatus] = useState<GoogleDocsStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [connecting, setConnecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const refreshStatus =
+    useCallback(async (): Promise<GoogleDocsStatus | null> => {
+      try {
+        const response = await fetch(
+          endpoint("/_agent-native/google-docs/status"),
+          { credentials: "same-origin" },
+        );
+        const result = await readJson<GoogleDocsStatus>(response);
+        if (!result.ok) throw result.error;
+        if (!response.ok) {
+          throw responseError(
+            response,
+            result.data,
+            "Could not check Google Drive",
+          );
+        }
+        setStatus(result.data);
+        setError(null);
+        return result.data;
+      } catch (caught) {
+        setStatus(null);
+        setError(caught instanceof Error ? caught.message : String(caught));
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    }, []);
+
+  useEffect(() => {
+    void refreshStatus();
+  }, [refreshStatus]);
+
+  const connect = useCallback(async () => {
+    if (connecting) return;
+    setConnecting(true);
+    setError(null);
+    const popup = window.open(
+      "about:blank",
+      "google-docs-oauth",
+      "popup,width=520,height=720",
+    );
+    try {
+      const authUrl = new URL(endpoint("/_agent-native/google-docs/auth-url"));
+      authUrl.searchParams.set(
+        "redirect_uri",
+        oauthRedirectUri("/_agent-native/google-docs/callback"),
+      );
+      authUrl.searchParams.set(
+        "return",
+        window.location.pathname + window.location.search,
+      );
+      const response = await fetch(authUrl.toString(), {
+        credentials: "same-origin",
+      });
+      const result = await readJson<GoogleDocsAuthResponse>(response);
+      if (!result.ok) throw result.error;
+      if (!response.ok || !result.data.url) {
+        throw responseError(
+          response,
+          result.data,
+          "Could not start Google OAuth",
+        );
+      }
+      if (!popup) {
+        window.location.href = result.data.url;
+        return;
+      }
+      popup.location.href = result.data.url;
+
+      const deadline = Date.now() + 90_000;
+      while (Date.now() < deadline && !popup.closed) {
+        await new Promise((resolve) => window.setTimeout(resolve, 1_200));
+        const next = await refreshStatus();
+        if (next?.connected) {
+          popup.close();
+          onConnected?.();
+          return;
+        }
+      }
+      const next = await refreshStatus();
+      if (next?.connected) onConnected?.();
+    } catch (caught) {
+      popup?.close();
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setConnecting(false);
+    }
+  }, [connecting, onConnected, refreshStatus]);
+
+  if (loading || status?.connected) return null;
+
+  const displayStatus = status ?? { configured: false, connected: false };
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-border/70 bg-muted/35 px-3 py-2 text-xs">
+      <div className="flex size-6 shrink-0 items-center justify-center rounded-md border border-border/70 bg-background">
+        {connecting ? (
+          <IconLoader2 className="size-3.5 animate-spin text-muted-foreground" />
+        ) : (
+          <IconBrandGoogleDrive className="size-3.5 text-primary" />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="font-medium text-foreground">
+          Google Drive {/* i18n-ignore stable provider label */}
+        </p>
+        <p className="mt-0.5 text-[11px] leading-relaxed text-muted-foreground">
+          {displayStatus.configured
+            ? t("home.googleSlidesReferenceConnect")
+            : t("raw.googleOAuthNotConfigured")}
+        </p>
+        {error && <p className="mt-1 text-[11px] text-destructive">{error}</p>}
+      </div>
+      {displayStatus.configured && (
+        <Button
+          type="button"
+          size="sm"
+          onClick={() => void connect()}
+          disabled={connecting}
+          aria-busy={connecting}
+          className="h-7 shrink-0 gap-1.5 rounded-md px-2.5 text-[11px] disabled:cursor-wait"
+        >
+          {connecting ? (
+            <IconLoader2 className="size-3.5 animate-spin" />
+          ) : (
+            <IconPlugConnected className="size-3.5" />
+          )}
+          {connecting
+            ? t("home.googleSlidesReferencePicking")
+            : t("editorExport.connectGoogle")}
+        </Button>
+      )}
+    </div>
+  );
+}

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

@@ -121,23 +121,35 @@ export function GoogleSlidesReferenceImport({
 
   const refreshStatus =
     useCallback(async (): Promise<GoogleDocsStatus | null> => {
-      const response = await fetch(
-        endpoint("/_agent-native/google-docs/status"),
-        {
-          credentials: "same-origin",
-        },
-      );
-      const result = await readJson<GoogleDocsStatus>(response);
-      if (!result.ok) {
-        setStatus(null);
-        return null;
-      }
-      if (response.ok && result.data) {
+      try {
+        const response = await fetch(
+          endpoint("/_agent-native/google-docs/status"),
+          {
+            credentials: "same-origin",
+          },
+        );
+        const result = await readJson<GoogleDocsStatus>(response);
+        if (!result.ok) throw result.error;
+        if (!response.ok) {
+          throw new Error(
+            errorFromResponse(
+              response,
+              result.data,
+              "Could not check Google Drive",
+            ),
+          );
+        }
+        if (!result.data) {
+          throw new Error("Google Drive status was empty.");
+        }
+        setError(null);
         setStatus(result.data);
         return result.data;
+      } catch (caught) {
+        setStatus(null);
+        setError(caught instanceof Error ? caught.message : String(caught));
+        return null;
       }
-      setStatus(null);
-      return null;
     }, []);
 
   useEffect(() => {

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

@@ -1,11 +1,21 @@
 import { appBasePath } from "@agent-native/core/client/api-path";
 import { PromptComposer } from "@agent-native/core/client/composer";
+import { ensureEmbedAuthFetchInterceptor } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconBrandGoogle,
+  IconFileTypePdf,
+  IconPresentation,
+} from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
+import { MAX_REFERENCE_FILE_BYTES } from "../../../shared/upload-types";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
 import { GoogleDocImportHint } from "./GoogleDocImportHint";
+import { GoogleDriveConnectionCta } from "./GoogleDriveConnectionCta";
 
 export interface UploadedFile {
   path: string;
@@ -22,9 +32,11 @@ export async function uploadPromptFiles(
   if (files.length === 0) return [];
   const formData = new FormData();
   files.forEach((file) => formData.append("files", file));
+  ensureEmbedAuthFetchInterceptor();
   const response = await fetch(`${appBasePath()}/api/uploads`, {
     method: "POST",
     body: formData,
+    credentials: "include",
   });
   if (!response.ok) {
     let message = "Upload failed";
@@ -61,6 +73,12 @@ export function isInsidePortaledLayer(target: EventTarget | null): boolean {
   );
 }
 
+export type PromptImportSource = "pdf" | "pptx" | "google-slides";
+
+export type PromptImportSelection =
+  | { kind: "pdf" | "pptx"; files: File[] }
+  | { kind: "google-slides"; url: string };
+
 interface PromptPopoverProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -77,6 +95,11 @@ interface PromptPopoverProps {
   initialText?: string;
   initialTextKey?: string | number;
   onBeforeUpload?: (prompt: string, files: File[]) => boolean | void;
+  onImport?: (
+    selection: PromptImportSelection,
+  ) => Promise<boolean | void> | boolean | void;
+  importFromLabel?: string;
+  importingLabel?: string;
   children?: React.ReactNode;
 }
 
@@ -95,12 +118,21 @@ export default function PromptPopover({
   initialText,
   initialTextKey,
   onBeforeUpload,
+  onImport,
+  importFromLabel,
+  importingLabel = "Importing...",
   children,
 }: PromptPopoverProps) {
   const t = useT();
   const [uploading, setUploading] = useState(false);
   const [promptText, setPromptText] = useState("");
   const [googleDocContext, setGoogleDocContext] = useState("");
+  const [googleSlidesUrl, setGoogleSlidesUrl] = useState("");
+  const [googleSlidesInputOpen, setGoogleSlidesInputOpen] = useState(false);
+  const [importingSource, setImportingSource] =
+    useState<PromptImportSource | null>(null);
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const pptxInputRef = useRef<HTMLInputElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
 
   // Position the popover after render so we can measure its actual size
@@ -199,10 +231,48 @@ export default function PromptPopover({
     [googleDocContext, onBeforeUpload, onSubmit, uploadFiles, t],
   );
 
+  const runImport = useCallback(
+    async (selection: PromptImportSelection) => {
+      if (!onImport) return;
+      setImportingSource(selection.kind);
+      try {
+        const shouldClose = await onImport(selection);
+        if (shouldClose !== false) onOpenChange(false);
+      } catch (error) {
+        toast.error(t("raw.uploadFailed"), {
+          description:
+            error instanceof Error
+              ? error.message
+              : t("raw.uploadAttachedFailed"),
+        });
+      } finally {
+        setImportingSource(null);
+      }
+    },
+    [onImport, onOpenChange, t],
+  );
+
+  const handleFileImport = useCallback(
+    (kind: "pdf" | "pptx", file: File | undefined) => {
+      if (!file) return;
+      void runImport({ kind, files: [file] });
+    },
+    [runImport],
+  );
+
+  const handleGoogleSlidesImport = useCallback(() => {
+    const url = googleSlidesUrl.trim();
+    if (!url) return;
+    void runImport({ kind: "google-slides", url });
+  }, [googleSlidesUrl, runImport]);
+
   useEffect(() => {
     if (!open) {
       setPromptText("");
       setGoogleDocContext("");
+      setGoogleSlidesUrl("");
+      setGoogleSlidesInputOpen(false);
+      setImportingSource(null);
     }
   }, [open]);
 
@@ -244,6 +314,8 @@ export default function PromptPopover({
           <PromptComposer
             autoFocus
             attachmentsEnabled
+            maxDocumentAttachmentBytes={MAX_REFERENCE_FILE_BYTES}
+            documentAttachmentLimitLabel="Slides reference files"
             disabled={loading || uploading}
             placeholder={placeholder}
             onSubmit={handleSubmit}
@@ -254,6 +326,110 @@ export default function PromptPopover({
           />
         </div>
 
+        {onImport && importFromLabel && (
+          <div className="border-t border-border/60 px-4 pb-3 pt-2.5">
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="mr-1 text-xs text-muted-foreground">
+                {importFromLabel}
+              </span>
+              <input
+                ref={pdfInputRef}
+                type="file"
+                accept=".pdf,application/pdf"
+                className="sr-only"
+                aria-label={t("editorToolbar.importFile")}
+                onChange={(event) => {
+                  handleFileImport("pdf", event.target.files?.[0]);
+                  event.target.value = "";
+                }}
+              />
+              <input
+                ref={pptxInputRef}
+                type="file"
+                accept=".pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation"
+                className="sr-only"
+                aria-label={t("editorToolbar.importFile")}
+                onChange={(event) => {
+                  handleFileImport("pptx", event.target.files?.[0]);
+                  event.target.value = "";
+                }}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
+                disabled={importingSource !== null || loading || uploading}
+                onClick={() => pdfInputRef.current?.click()}
+              >
+                <IconFileTypePdf className="size-3.5" />
+                PDF
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
+                disabled={importingSource !== null || loading || uploading}
+                onClick={() => setGoogleSlidesInputOpen((current) => !current)}
+              >
+                <IconBrandGoogle className="size-3.5" />
+                {t("home.googleSlidesReferenceTitle")}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
+                disabled={importingSource !== null || loading || uploading}
+                onClick={() => pptxInputRef.current?.click()}
+              >
+                <IconPresentation className="size-3.5" />
+                PPT
+              </Button>
+              {importingSource && (
+                <span className="ml-auto text-xs text-muted-foreground">
+                  {importingLabel}
+                </span>
+              )}
+            </div>
+            {googleSlidesInputOpen && (
+              <div className="mt-2 space-y-2">
+                <GoogleDriveConnectionCta />
+                <div className="flex gap-2">
+                  <Input
+                    autoFocus
+                    type="url"
+                    value={googleSlidesUrl}
+                    placeholder={t("home.googleSlidesReferenceUrl")}
+                    aria-label={t("home.googleSlidesReferenceUrl")}
+                    className="h-8 text-xs"
+                    disabled={importingSource !== null || loading || uploading}
+                    onChange={(event) => setGoogleSlidesUrl(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") handleGoogleSlidesImport();
+                    }}
+                  />
+                  <Button
+                    type="button"
+                    size="sm"
+                    className="h-8 shrink-0 px-3 text-xs"
+                    disabled={
+                      !googleSlidesUrl.trim() ||
+                      importingSource !== null ||
+                      loading ||
+                      uploading
+                    }
+                    onClick={handleGoogleSlidesImport}
+                  >
+                    Import
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
         {children}
 
         <GoogleDocImportHint