From 9ff0daa24defccc9a6aa049e8a4c6f4a98b0f846 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Mon, 26 Jan 2026 16:58:38 -0800 Subject: [PATCH 1/2] Add dont ask me again option in nudges --- .../hooks/useDisableShowPrompts.ts | 35 +++++++++ .../src/components/navbar.tsx | 24 +++++- .../src/components/survey/NudgePrompt.tsx | 73 +++++++++++++++++-- 3 files changed, 123 insertions(+), 9 deletions(-) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableShowPrompts.ts diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableShowPrompts.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableShowPrompts.ts new file mode 100644 index 00000000000..801fbdbb99d --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableShowPrompts.ts @@ -0,0 +1,35 @@ +// hooks/useDisableShowPrompts.ts +import { useSyncExternalStore } from "react"; +import { getLocalStorageItem } from "@/utils/localStorageUtils"; +import { LOCAL_STORAGE_EVENT } from "@/utils/localStorageUtils"; + +function subscribe(callback: () => void) { + const onStorage = (e: StorageEvent) => { + if (e.key === "disableShowPrompts") { + callback(); + } + }; + + const onCustom = (e: Event) => { + const { key } = (e as CustomEvent).detail; + if (key === "disableShowPrompts") { + callback(); + } + }; + + window.addEventListener("storage", onStorage); + window.addEventListener(LOCAL_STORAGE_EVENT, onCustom); + + return () => { + window.removeEventListener("storage", onStorage); + window.removeEventListener(LOCAL_STORAGE_EVENT, onCustom); + }; +} + +function getSnapshot() { + return getLocalStorageItem("disableShowPrompts") === "true"; +} + +export function useDisableShowPrompts() { + return useSyncExternalStore(subscribe, getSnapshot); +} diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx index 6dac073b3a6..8179bb8a533 100644 --- a/ui/litellm-dashboard/src/components/navbar.tsx +++ b/ui/litellm-dashboard/src/components/navbar.tsx @@ -1,4 +1,5 @@ import { useHealthReadiness } from "@/app/(dashboard)/hooks/healthReadiness/useHealthReadiness"; +import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts"; import { getProxyBaseUrl } from "@/components/networking"; import { useTheme } from "@/contexts/ThemeContext"; import { clearTokenCookies } from "@/utils/cookieUtils"; @@ -51,9 +52,9 @@ const Navbar: React.FC = ({ onToggleSidebar, }) => { const baseUrl = getProxyBaseUrl(); - console.log("baseUrl", baseUrl); const [logoutUrl, setLogoutUrl] = useState(""); const [disableShowNewBadge, setDisableShowNewBadge] = useState(false); + const disableShowPrompts = useDisableShowPrompts(); const { logoUrl } = useTheme(); const { data: healthData } = useHealthReadiness(); const version = healthData?.litellm_version; @@ -152,6 +153,27 @@ const Navbar: React.FC = ({ aria-label="Toggle hide new feature indicators" /> +
e.stopPropagation()} + > + Hide All Prompts + { + if (checked) { + setLocalStorageItem("disableShowPrompts", "true"); + emitLocalStorageChange("disableShowPrompts"); + } else { + removeLocalStorageItem("disableShowPrompts"); + emitLocalStorageChange("disableShowPrompts"); + } + }} + aria-label="Toggle hide all prompts" + /> +
), diff --git a/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx b/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx index 9095c6c21c5..ef72144b89f 100644 --- a/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx +++ b/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from "react"; -import { X, LucideIcon } from "lucide-react"; +import { X, LucideIcon, Check } from "lucide-react"; import { Button } from "antd"; +import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts"; +import { setLocalStorageItem, emitLocalStorageChange } from "@/utils/localStorageUtils"; interface NudgePromptProps { onOpen: () => void; @@ -15,6 +17,7 @@ interface NudgePromptProps { } const DISMISS_DURATION = 15000; // 15 seconds +const CONFIRMATION_DURATION = 5000; // 5 seconds export function NudgePrompt({ onOpen, @@ -27,11 +30,14 @@ export function NudgePrompt({ accentColor, buttonStyle, }: NudgePromptProps) { + const disableShowPrompts = useDisableShowPrompts(); const [progress, setProgress] = useState(100); + const [showConfirmation, setShowConfirmation] = useState(false); useEffect(() => { if (!isVisible) { setProgress(100); + setShowConfirmation(false); return; } @@ -49,13 +55,53 @@ export function NudgePrompt({ return () => clearInterval(interval); }, [isVisible]); - if (!isVisible) return null; + useEffect(() => { + if (showConfirmation) { + const timer = setTimeout(() => { + setShowConfirmation(false); + onDismiss(); + }, CONFIRMATION_DURATION); + + return () => clearTimeout(timer); + } + }, [showConfirmation, onDismiss]); + + const handleDontAskAgain = () => { + setLocalStorageItem("disableShowPrompts", "true"); + emitLocalStorageChange("disableShowPrompts"); + setShowConfirmation(true); + }; + + // Show confirmation even if disableShowPrompts is true (since we just set it) + if (showConfirmation) { + return ( +
+
+
+
+ +
+
+

+ Got it, we will not ask again. Reactivate this at any time in the User Menu. +

+
+
+
+
+ ); + } + + // Don't show the prompt if disabled (unless we're showing confirmation) + if (!isVisible || disableShowPrompts) return null; return (
{/* Progress bar at top showing time remaining */}
@@ -81,9 +127,20 @@ export function NudgePrompt({

{description}

- +
+ + +
); From aa4b3ba87addedf3f7869909e13a63e8d9687f82 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Mon, 26 Jan 2026 17:53:01 -0800 Subject: [PATCH 2/2] Adding tests: --- .../src/components/navbar.test.tsx | 6 ++ .../components/survey/NudgePrompt.test.tsx | 101 ++++++++++++++++++ .../src/components/survey/NudgePrompt.tsx | 2 +- 3 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx diff --git a/ui/litellm-dashboard/src/components/navbar.test.tsx b/ui/litellm-dashboard/src/components/navbar.test.tsx index 5d3c7254ff9..4db814d8977 100644 --- a/ui/litellm-dashboard/src/components/navbar.test.tsx +++ b/ui/litellm-dashboard/src/components/navbar.test.tsx @@ -16,6 +16,7 @@ vi.mock("@/utils/proxyUtils", () => ({ let mockUseThemeImpl = () => ({ logoUrl: null as string | null }); let mockUseHealthReadinessImpl = () => ({ data: null as any }); let mockGetLocalStorageItemImpl = () => null as string | null; +let mockUseDisableShowPromptsImpl = () => false; vi.mock("@/contexts/ThemeContext", () => ({ useTheme: () => mockUseThemeImpl(), @@ -25,7 +26,12 @@ vi.mock("@/app/(dashboard)/hooks/healthReadiness/useHealthReadiness", () => ({ useHealthReadiness: () => mockUseHealthReadinessImpl(), })); +vi.mock("@/app/(dashboard)/hooks/useDisableShowPrompts", () => ({ + useDisableShowPrompts: () => mockUseDisableShowPromptsImpl(), +})); + vi.mock("@/utils/localStorageUtils", () => ({ + LOCAL_STORAGE_EVENT: "local-storage-change", getLocalStorageItem: () => mockGetLocalStorageItemImpl(), setLocalStorageItem: vi.fn(), removeLocalStorageItem: vi.fn(), diff --git a/ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx b/ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx new file mode 100644 index 00000000000..26db8a680c5 --- /dev/null +++ b/ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx @@ -0,0 +1,101 @@ +import { render, screen } from "@testing-library/react"; +import { MessageSquare } from "lucide-react"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { NudgePrompt } from "./NudgePrompt"; + +vi.mock("@/app/(dashboard)/hooks/useDisableShowPrompts", () => ({ + useDisableShowPrompts: vi.fn(), +})); + +vi.mock("@/utils/localStorageUtils", () => ({ + setLocalStorageItem: vi.fn(), + emitLocalStorageChange: vi.fn(), + LOCAL_STORAGE_EVENT: "local-storage-change", +})); + +import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts"; +import { emitLocalStorageChange, setLocalStorageItem } from "@/utils/localStorageUtils"; + +const mockUseDisableShowPrompts = vi.mocked(useDisableShowPrompts); +const mockSetLocalStorageItem = vi.mocked(setLocalStorageItem); +const mockEmitLocalStorageChange = vi.mocked(emitLocalStorageChange); + +const defaultProps = { + onOpen: vi.fn(), + onDismiss: vi.fn(), + isVisible: true, + title: "Test Title", + description: "Test Description", + buttonText: "Open Modal", + icon: MessageSquare, + accentColor: "#3b82f6", +}; + +describe("NudgePrompt", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockUseDisableShowPrompts.mockReturnValue(false); + vi.useFakeTimers(); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + it("should render", () => { + render(); + + expect(screen.getByText("Test Title")).toBeInTheDocument(); + }); + + it("should render with all provided props", () => { + const { container } = render(); + + expect(screen.getByText("Test Title")).toBeInTheDocument(); + expect(screen.getByText("Test Description")).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Open Modal" })).toBeInTheDocument(); + expect(container.querySelector("svg")).toBeInTheDocument(); + }); + + it("should not render when isVisible is false", () => { + render(); + + expect(screen.queryByText("Test Title")).not.toBeInTheDocument(); + }); + + it("should not render when disableShowPrompts is true", () => { + mockUseDisableShowPrompts.mockReturnValue(true); + + render(); + + expect(screen.queryByText("Test Title")).not.toBeInTheDocument(); + }); + + it("should display progress bar with correct accent color", () => { + const { container } = render(); + + const progressBar = container.querySelector("div[style*='width']"); + expect(progressBar).toHaveStyle({ backgroundColor: "#ff0000" }); + }); + + it("should reset progress when isVisible becomes false", () => { + const { rerender, container } = render(); + + vi.advanceTimersByTime(5000); + + rerender(); + + rerender(); + + const progressBar = container.querySelector("div[style*='width']"); + expect(progressBar?.getAttribute("style")).toContain("width: 100%"); + }); + + it("should apply custom button style when provided", () => { + const buttonStyle = { backgroundColor: "#custom-color" }; + render(); + + const openButton = screen.getByRole("button", { name: "Open Modal" }); + expect(openButton).toHaveStyle(buttonStyle); + }); +}); diff --git a/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx b/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx index ef72144b89f..3c7f10af74c 100644 --- a/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx +++ b/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx @@ -138,7 +138,7 @@ export function NudgePrompt({ onClick={handleDontAskAgain} className="text-xs" > - Don't ask me again + Don't ask me again