scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-07 02:59:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

fix(ui): render the load image placeholder with the shared Button

Browse source
This commit is contained in:
mateo-berri 2026-09-25 20:53:15 -07:00
parent 8fc135daad
commit 4e4f174cdb
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/litellm-dashboard/src/components/chat_ui/MarkdownImage.tsx
View file

@ -1,6 +1,8 @@
import { ImageIcon } from "lucide-react"; import { ImageIcon } from "lucide-react";
import React, { useState } from "react"; import React, { useState } from "react";
import { Button } from "@/components/ui/button";
type MarkdownImageProps = Pick<React.ComponentPropsWithoutRef<"img">, "src" | "alt" | "title">; type MarkdownImageProps = Pick<React.ComponentPropsWithoutRef<"img">, "src" | "alt" | "title">;
type ImageSource = { readonly label: string; readonly tooltip: string | undefined }; type ImageSource = { readonly label: string; readonly tooltip: string | undefined };
@ -27,19 +29,21 @@ export function MarkdownImage({ src, alt, title }: MarkdownImageProps) {
const source = describeImageSource(src); const source = describeImageSource(src);
return ( return (
<button <Button
type="button" type="button"
variant="outline"
size="sm"
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
setLoaded(true); setLoaded(true);
}} }}
title={source.tooltip} 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" className="max-w-full font-normal"
> >
<ImageIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" /> <ImageIcon className="text-muted-foreground" aria-hidden="true" />
<span className="truncate">{alt || "Image"}</span>{" "} <span className="truncate">{alt || "Image"}</span>{" "}
<span className="truncate text-muted-foreground">{source.label}</span>{" "} <span className="truncate text-muted-foreground">{source.label}</span>{" "}
<span className="shrink-0 font-medium">Load image</span> <span className="shrink-0 font-medium">Load image</span>
</button> </Button>
); );
} }