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();
+
+ 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();
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, "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
;
}
+ const source = describeImageSource(src);
return (
);