From 8fc135daadf4342a5f7b0820d1446b45f25cab9d Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Fri, 25 Sep 2026 20:41:16 -0700
Subject: [PATCH] fix(ui): label inline data images without showing their
 payload

---
 .../src/components/chat_ui/MarkdownImage.test.tsx  | 13 +++++++++++++
 .../src/components/chat_ui/MarkdownImage.tsx       | 14 ++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.test.tsx b/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.test.tsx
index e6d3134adca..5166767d3f5 100644
--- a/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.test.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.test.tsx
@@ -41,6 +41,19 @@ describe("MarkdownImage", () => {
     expect(screen.getByRole("button", { name: "Image mailto:ops@example.com Load image" })).toBeInTheDocument();
   });
 
+  it("labels an inline data image without showing its payload", () => {
+    const payload = `data:image/png;base64,${"A".repeat(4096)}`;
+    render(<MarkdownImage src={payload} alt="Weekly chart" />);
+
+    const load = screen.getByRole("button", { name: "Weekly chart inline image Load image" });
+    expect(load).not.toHaveAttribute("title");
+    expect(load).not.toHaveTextContent("base64");
+
+    fireEvent.click(load);
+
+    expect(screen.getByRole("img", { name: "Weekly chart" })).toHaveAttribute("src", payload);
+  });
+
   it("renders only the alt text when there is no source", () => {
     render(<MarkdownImage alt="Weekly chart" />);
 
diff --git a/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx b/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx
index 64876dfa95d..fdc22535995 100644
--- a/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx
@@ -3,9 +3,14 @@ import React, { useState } from "react";
 
 type MarkdownImageProps = Pick<React.ComponentPropsWithoutRef<"img">, "src" | "alt" | "title">;
 
-function describeImageSource(src: string): string {
+type ImageSource = { readonly label: string; readonly tooltip: string | undefined };
+
+function describeImageSource(src: string): ImageSource {
+  if (src.startsWith("data:")) {
+    return { label: "inline image", tooltip: undefined };
+  }
   const host = URL.canParse(src) ? new URL(src).host : "";
-  return host || src;
+  return { label: host || src, tooltip: src };
 }
 
 export function MarkdownImage({ src, alt, title }: MarkdownImageProps) {
@@ -20,6 +25,7 @@ export function MarkdownImage({ src, alt, title }: MarkdownImageProps) {
     return <img src={src} alt={alt ?? ""} title={title} className="max-w-full rounded-md border border-border" />;
   }
 
+  const source = describeImageSource(src);
   return (
     <button
       type="button"
@@ -27,12 +33,12 @@ export function MarkdownImage({ src, alt, title }: MarkdownImageProps) {
         event.preventDefault();
         setLoaded(true);
       }}
-      title={src}
+      title={source.tooltip}
       className="inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted px-3 py-1.5 text-sm text-foreground hover:bg-accent"
     >
       <ImageIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
       <span className="truncate">{alt || "Image"}</span>{" "}
-      <span className="truncate text-muted-foreground">{describeImageSource(src)}</span>{" "}
+      <span className="truncate text-muted-foreground">{source.label}</span>{" "}
       <span className="shrink-0 font-medium">Load image</span>
     </button>
   );