feat: add icons to logo context menu and make it work on Firefox (#1085)

components/LogoContextMenu.tsx

@@ -1,3 +1,4 @@
+import { DropdownMenuPortal } from "@radix-ui/react-dropdown-menu";
 import {
   DropdownMenuContent,
   DropdownMenuTrigger,
@@ -11,39 +12,62 @@ const LogoContextMenu: React.FC<{
   open: boolean;
   setOpen: (open: boolean) => void;
 }> = ({ open, setOpen }) => {
+  const handleAction = (
+    e: React.MouseEvent,
+    url: string,
+    isDownload: boolean
+  ) => {
+    e.preventDefault();
+
+    if (isDownload) {
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = url.split("/").pop() || ""; // Get filename from URL
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else {
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  };
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
       <DropdownMenuTrigger />
-      <DropdownMenuContent>
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            window.open("/", "_blank");
-          }}
-        >
-          <ExternalLink size={14} className="mr-2" />
-          Open in new tab
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            window.open("/langfuse_logo.png", "_blank");
-          }}
-        >
-          <Download size={14} className="mr-2" />
-          Logo (png)
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            window.open("/langfuse_logo.svg", "_blank");
-          }}
-        >
-          <Download size={14} className="mr-2" />
-          Logo (svg)
-        </DropdownMenuItem>
-      </DropdownMenuContent>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuItem onClick={(e) => handleAction(e, "/", false)}>
+            <ExternalLink size={14} className="mr-2" />
+            Open in new tab
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={(e) => handleAction(e, "/langfuse_logo.png", true)}
+          >
+            <Download size={14} className="mr-2" />
+            Logo (png)
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => handleAction(e, "/langfuse_logo.svg", true)}
+          >
+            <Download size={14} className="mr-2" />
+            Logo (svg)
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={(e) => handleAction(e, "/langfuse_icon.png", true)}
+          >
+            <Download size={14} className="mr-2" />
+            Icon (png)
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => handleAction(e, "/langfuse_icon.svg", true)}
+          >
+            <Download size={14} className="mr-2" />
+            Icon (svg)
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
     </DropdownMenu>
   );
 };