Update frontend/src/components/ExportButtons.jsx

frontend/src/components/ExportButtons.jsx

@@ -20,7 +20,8 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import ShareModal from "@/components/ShareModal";
-import { shareExtraction } from "@/services/api";
+import ShareLinkModal from "@/components/ShareLinkModal";
+import { shareExtraction, createShareLink } from "@/services/api";
 
 // Helper functions from ExtractionOutput
 function prepareFieldsForOutput(fields, format = "json") {
@@ -177,6 +178,9 @@ export default function ExportButtons({ isComplete, extractionResult }) {
   const [downloading, setDownloading] = useState(null);
   const [copied, setCopied] = useState(false);
   const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+  const [isShareLinkModalOpen, setIsShareLinkModalOpen] = useState(false);
+  const [shareLink, setShareLink] = useState("");
+  const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 
   // Helper function to extract text from fields (same as in ExtractionOutput)
   const extractTextFromFields = (fields) => {
@@ -537,9 +541,27 @@ ${htmlContent}
     }
   };
 
-  const handleCopyLink = () => {
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  const handleCopyLink = async () => {
+    if (!extractionResult?.id) return;
+    
+    setIsGeneratingLink(true);
+    setIsShareLinkModalOpen(true);
+    setShareLink("");
+    
+    try {
+      const result = await createShareLink(extractionResult.id);
+      if (result.success && result.share_link) {
+        setShareLink(result.share_link);
+      } else {
+        throw new Error("Failed to generate share link");
+      }
+    } catch (err) {
+      console.error("Failed to create share link:", err);
+      setShareLink("");
+      // Still show modal but with error state
+    } finally {
+      setIsGeneratingLink(false);
+    }
   };
 
   const handleShare = async (extractionId, recipientEmail) => {
@@ -587,12 +609,8 @@ ${htmlContent}
             className="rounded-lg cursor-pointer"
             onClick={handleCopyLink}
           >
-            {copied ? (
-              <Check className="h-4 w-4 mr-2 text-emerald-500" />
-            ) : (
-              <Link2 className="h-4 w-4 mr-2" />
-            )}
-            {copied ? "Link copied!" : "Copy share link"}
+            <Link2 className="h-4 w-4 mr-2 text-indigo-600" />
+            Copy share link
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem
@@ -659,6 +677,17 @@ ${htmlContent}
         onShare={handleShare}
         extractionId={extractionResult?.id}
       />
+
+      {/* Share Link Modal */}
+      <ShareLinkModal
+        isOpen={isShareLinkModalOpen}
+        onClose={() => {
+          setIsShareLinkModalOpen(false);
+          setShareLink("");
+        }}
+        shareLink={shareLink}
+        isLoading={isGeneratingLink}
+      />
     </motion.div>
   );
 }