ui

# What does this PR do? ## Test Plan # What does this PR do? ## Test Plan # What does this PR do? ## Test Plan
2025-06-30 03:44:20 +00:00 · 2025-06-25 20:10:45 -07:00 · 2025-06-25 20:10:45 -07:00 · a4d84f7805
commit a4d84f7805
parent 114946ae88
22 changed files with 821 additions and 38 deletions
--- a/llama_stack/ui/components/auth/user-menu.tsx
+++ b/llama_stack/ui/components/auth/user-menu.tsx
@ -0,0 +1,156 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@/contexts/auth-context";
+import { useAuthConfig } from "@/hooks/use-auth-config";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { User, LogOut, Key, Clock } from "lucide-react";
+import { getAuthToken, isTokenExpired } from "@/lib/auth";
+import { toast } from "sonner";
+
+export function UserMenu() {
+  const { user, logout, isAuthenticated } = useAuth();
+  const { isAuthConfigured } = useAuthConfig();
+
+  const handleCopyToken = async () => {
+    const token = getAuthToken();
+    if (!token) {
+      toast.error("No authentication token found");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(token);
+      toast.success("API token copied to clipboard");
+    } catch (error) {
+      toast.error("Failed to copy token to clipboard");
+    }
+  };
+
+  const getTokenExpiryInfo = () => {
+    const token = getAuthToken();
+    if (!token) return null;
+
+    try {
+      const payload = JSON.parse(atob(token.split(".")[1]));
+      const exp = payload.exp;
+      if (!exp) return null;
+
+      const expiryDate = new Date(exp * 1000);
+      const now = new Date();
+      const hoursRemaining = Math.max(
+        0,
+        (expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60),
+      );
+
+      if (hoursRemaining < 1) {
+        return `Expires in ${Math.round(hoursRemaining * 60)} minutes`;
+      } else if (hoursRemaining < 24) {
+        return `Expires in ${Math.round(hoursRemaining)} hours`;
+      } else {
+        return `Expires in ${Math.round(hoursRemaining / 24)} days`;
+      }
+    } catch {
+      return null;
+    }
+  };
+
+  if (!isAuthenticated || !user) {
+    if (!isAuthConfigured) {
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-block">
+              <Button variant="outline" size="sm" disabled>
+                Sign In
+              </Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Authentication is not configured on this server</p>
+          </TooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Button variant="outline" size="sm" asChild>
+        <a href="/login">Sign In</a>
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className="rounded-full">
+          {user.avatar_url ? (
+            <img
+              src={user.avatar_url}
+              alt={user.name || user.username}
+              className="h-8 w-8 rounded-full"
+            />
+          ) : (
+            <User className="h-4 w-4" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {user.name || user.username}
+            </p>
+            {user.email && (
+              <p className="text-xs leading-none text-muted-foreground">
+                {user.email}
+              </p>
+            )}
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleCopyToken} className="cursor-pointer">
+          <Key className="mr-2 h-4 w-4" />
+          <span>Copy API Token</span>
+        </DropdownMenuItem>
+        {getTokenExpiryInfo() && (
+          <DropdownMenuItem disabled className="text-xs text-muted-foreground">
+            <Clock className="mr-2 h-3 w-3" />
+            <span>{getTokenExpiryInfo()}</span>
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        {user.organizations && user.organizations.length > 0 && (
+          <>
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Organizations
+            </DropdownMenuLabel>
+            {user.organizations.map((org) => (
+              <DropdownMenuItem key={org} className="text-sm">
+                {org}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem onClick={logout} className="cursor-pointer">
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}