-
- {children}
+
+ {children}
+
diff --git a/ui/litellm-dashboard/src/app/chat/models/page.integration.test.tsx b/ui/litellm-dashboard/src/app/chat/models/page.integration.test.tsx
new file mode 100644
index 00000000000..d1868558626
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/chat/models/page.integration.test.tsx
@@ -0,0 +1,172 @@
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders, screen, testQueryClient, waitFor, within } from "@/../tests/test-utils";
+import type { ModelHubData } from "@/components/AIHub/ModelHubTableColumns";
+
+import ChatModelsPage from "./page";
+
+const { apiGetMock, modelHubCallMock, shellState } = vi.hoisted(() => ({
+ apiGetMock: vi.fn(),
+ modelHubCallMock: vi.fn(),
+ shellState: { accessToken: "chat-session-token", userRole: "proxy_admin", premiumUser: false },
+}));
+
+vi.mock("@/contexts/ChatShellContext", () => ({
+ useChatShell: () => shellState,
+}));
+
+vi.mock("next/navigation", () => ({
+ useRouter: () => ({ push: vi.fn(), replace: vi.fn(), refresh: vi.fn() }),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({
+ useUISettings: () => ({ data: { values: {} }, isLoading: false }),
+}));
+
+vi.mock("@/components/networking", async (importOriginal) => {
+ const actual = await importOriginal();
+ const hubInfo = {
+ docs_title: "Gateway models",
+ custom_docs_description: null,
+ litellm_version: "1.0.0",
+ useful_links: {},
+ };
+ return {
+ ...actual,
+ apiClient: { ...actual.apiClient, get: apiGetMock },
+ modelHubCall: modelHubCallMock,
+ getConfigFieldSetting: vi.fn().mockResolvedValue({ field_value: true }),
+ getUiConfig: vi.fn().mockResolvedValue({}),
+ getProxyBaseUrl: () => "https://gateway.example.com",
+ getGatewayBaseUrl: () => "https://gateway.example.com",
+ getPublicModelHubInfo: vi.fn().mockResolvedValue(hubInfo),
+ getAgentsList: vi.fn().mockResolvedValue({ agents: [] }),
+ fetchMCPServers: vi.fn().mockResolvedValue([]),
+ getClaudeCodePluginsList: vi.fn().mockResolvedValue({ plugins: [] }),
+ agentHubPublicModelsCall: vi.fn().mockResolvedValue([]),
+ mcpHubPublicServersCall: vi.fn().mockResolvedValue([]),
+ skillHubPublicCall: vi.fn().mockResolvedValue({ plugins: [] }),
+ };
+});
+
+const PRIVATE_MODEL = {
+ model_group: "research-private",
+ description: "An internal model for reviewing research reports.",
+ providers: ["openai"],
+ mode: "chat",
+ max_input_tokens: 128_000,
+ max_output_tokens: 4_096,
+ input_cost_per_token: 0.000002,
+ output_cost_per_token: 0.000008,
+ supports_function_calling: true,
+ supports_parallel_function_calling: false,
+ supports_vision: true,
+ is_public_model_group: false,
+} satisfies ModelHubData;
+
+const IMAGE_MODEL: ModelHubData = {
+ ...PRIVATE_MODEL,
+ model_group: "image-studio",
+ description: "Create illustrations for presentations.",
+ mode: "image_generation",
+};
+
+const PUBLISHED_MODEL = {
+ ...PRIVATE_MODEL,
+ model_group: "published-chat",
+ description: "The shared model published for gateway users.",
+ is_public_model_group: true,
+} satisfies ModelHubData;
+
+const PUBLIC_MODELS_PATH = "/public/v1/model_hub";
+const FACETS: Record = {
+ [`${PUBLIC_MODELS_PATH}/providers`]: ["openai"],
+ [`${PUBLIC_MODELS_PATH}/modes`]: ["chat"],
+ [`${PUBLIC_MODELS_PATH}/features`]: ["function_calling", "vision"],
+};
+
+describe("Chat Models page", () => {
+ beforeEach(() => {
+ shellState.userRole = "proxy_admin";
+ modelHubCallMock.mockResolvedValue({ data: [PRIVATE_MODEL, IMAGE_MODEL] });
+ apiGetMock.mockImplementation(async (path: string) => {
+ if (path in FACETS) {
+ return {
+ data: FACETS[path],
+ meta: { page: 1, page_size: 100, has_more: false },
+ links: { self: path, prev: null, next: null },
+ };
+ }
+ if (path === PUBLIC_MODELS_PATH) {
+ return {
+ data: [PUBLISHED_MODEL],
+ meta: { total_count: 1, page: 1, page_size: 50, total_pages: 1 },
+ links: {
+ self: path,
+ first: path,
+ prev: null,
+ next: null,
+ last: path,
+ },
+ };
+ }
+ throw new Error(`Unexpected catalog request: ${path}`);
+ });
+ vi.stubGlobal(
+ "fetch",
+ vi.fn(async (input: RequestInfo | URL) => {
+ if (String(input) !== "https://gateway.example.com/get/ui_theme_settings") {
+ throw new Error(`Unexpected fetch: ${String(input)}`);
+ }
+ return new Response(JSON.stringify({ values: {} }), {
+ status: 200,
+ headers: { "Content-Type": "application/json" },
+ });
+ }),
+ );
+ });
+
+ afterEach(() => {
+ testQueryClient.clear();
+ vi.clearAllMocks();
+ vi.unstubAllGlobals();
+ });
+
+ it("should render gateway models for admins and let them search and inspect model details", async () => {
+ const user = userEvent.setup();
+ renderWithProviders( };
+const requests: RecordedRequest[] = [];
+const pixel = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+aRZQAAAAASUVORK5CYII=";
+let models: { model_group: string; mode: string; providers: string[] }[];
+let imageResponse: () => Response;
+let pendingGeneration: boolean;
+let generationSignal: AbortSignal | null;
+let includeMCPEvents: boolean;
+
+function responseStream() {
+ return new Response(
+ [
+ { type: "response.output_text.delta", delta: "I can see " },
+ ...(includeMCPEvents
+ ? ["search_notes", "read_note"].map((name) => ({
+ type: "response.output_item.done",
+ item: { id: name, type: "mcp_call", name, server_label: "research-tools", output: "Found a note" },
+ }))
+ : []),
+ { type: "response.output_text.delta", delta: "the uploaded image." },
+ { type: "response.completed", response: { id: `response-${requests.length}`, output: [] } },
+ ]
+ .map((event) => `event: ${event.type}\ndata: ${JSON.stringify(event)}\n\n`)
+ .join(""),
+ { headers: { "Content-Type": "text/event-stream" } },
+ );
+}
+
+function renderChat() {
+ return renderWithProviders(
+
+ ,
+ );
+}
+
+async function uploadImage(user: ReturnType, name = "diagram.png") {
+ const bytes = Uint8Array.from(atob(pixel), (character) => character.charCodeAt(0));
+ await user.upload(screen.getByLabelText("Upload images"), new File([bytes], name, { type: "image/png" }));
+ await screen.findByRole("img", { name });
+}
+
+async function chooseModel(user: ReturnType, current: string, next: string) {
+ await user.click(screen.getByRole("button", { name: current, exact: true }));
+ await user.click(await screen.findByRole("button", { name: new RegExp(`^${next}`) }));
+ await waitFor(() => expect(screen.queryByRole("button", { name: "All", exact: true })).not.toBeInTheDocument());
+}
+
+beforeEach(() => {
+ localStorage.clear();
+ testQueryClient.clear();
+ requests.length = 0;
+ vi.mocked(recordChatQuery).mockClear();
+ models = [
+ { model_group: "research-chat", mode: "chat", providers: ["openai"] },
+ { model_group: "studio-image", mode: "image_generation", providers: ["openai"] },
+ ];
+ imageResponse = () => Response.json({ created: 1, data: [{ b64_json: pixel }] });
+ pendingGeneration = false;
+ generationSignal = null;
+ includeMCPEvents = false;
+ vi.stubGlobal(
+ "fetch",
+ vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+ const request =
+ input instanceof Request ? input : new Request(new URL(String(input), window.location.origin), init);
+ const pathname = new URL(request.url).pathname;
+ if (pathname.endsWith("/model_group/info")) return Response.json({ data: models });
+ if (pathname.endsWith("/v1/mcp/server")) {
+ return Response.json([{ server_id: "research-tools", server_name: "research-tools" }]);
+ }
+ if (pathname.endsWith("/mcp-rest/tools/list")) return Response.json({ tools: [] });
+ if (pathname.endsWith("/responses") || pathname.endsWith("/images/generations")) {
+ requests.push({ pathname, body: JSON.parse(await request.text()) });
+ if (pathname.endsWith("/responses")) return responseStream();
+ if (pendingGeneration) {
+ generationSignal = request.signal;
+ return new Promise((_resolve, reject) => {
+ request.signal.addEventListener("abort", () => reject(new DOMException("Stopped", "AbortError")), {
+ once: true,
+ });
+ });
+ }
+ return imageResponse();
+ }
+ return Response.json({}, { status: 404 });
+ }),
+ );
+});
+
+afterEach(() => {
+ vi.unstubAllGlobals();
+ localStorage.clear();
+});
+
+describe("chat image workflows", () => {
+ it("should render the permitted models and image controls for a research team member", async () => {
+ renderChat();
+ expect(await screen.findByRole("button", { name: "research-chat" })).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: "Attach images" })).toBeInTheDocument();
+ await userEvent.setup().click(screen.getByRole("button", { name: "research-chat", exact: true }));
+ expect(await screen.findByRole("button", { name: /^studio-image/ })).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ });
+
+ it("should restore the selected chat model after switching modes and reopening the page", async () => {
+ const user = userEvent.setup();
+ const view = renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await chooseModel(user, "research-chat", "studio-image");
+ expect(screen.getByRole("button", { name: "studio-image" })).toBeInTheDocument();
+ await chooseModel(user, "studio-image", "research-chat");
+ view.unmount();
+ renderChat();
+ expect(await screen.findByRole("button", { name: "research-chat" })).toBeInTheDocument();
+ expect(screen.getByRole("textbox", { name: "Message", exact: true })).toBeInTheDocument();
+ });
+
+ it("should preview and remove an uploaded image before sending", async () => {
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await uploadImage(user);
+ expect(screen.getByRole("button", { name: "Send" })).toBeEnabled();
+ await user.click(screen.getByRole("button", { name: "Remove diagram.png" }));
+ expect(screen.queryByRole("img", { name: "diagram.png" })).not.toBeInTheDocument();
+ expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+ expect(requests).toHaveLength(0);
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ });
+
+ it("should send the image and preserve it when editing and resending the message", async () => {
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await uploadImage(user);
+ await user.type(screen.getByRole("textbox", { name: "Message", exact: true }), "Explain this diagram");
+ await user.click(screen.getByRole("button", { name: "Send" }));
+ await screen.findByText("I can see the uploaded image.");
+ expect(recordChatQuery).toHaveBeenCalledExactlyOnceWith("media-test-user");
+ expect(requests[0].body).toMatchObject({
+ model: "research-chat",
+ input: [
+ {
+ role: "user",
+ content: [
+ { type: "input_text", text: "Explain this diagram" },
+ { type: "input_image", image_url: `data:image/png;base64,${pixel}` },
+ ],
+ },
+ ],
+ });
+ expect(screen.getByRole("img", { name: "diagram.png" })).toBeInTheDocument();
+ await user.hover(screen.getAllByText("Explain this diagram").at(-1)!);
+ const editButton = await screen.findByRole("button", { name: "Edit message" });
+ act(() => fireEvent.click(editButton));
+ await user.clear(screen.getByRole("textbox", { name: "Edit message" }));
+ await user.type(screen.getByRole("textbox", { name: "Edit message" }), "Explain the arrows");
+ await user.click(screen.getByRole("button", { name: "Save & Send" }));
+ await waitFor(() => expect(requests).toHaveLength(2));
+ expect(requests[1].body).toMatchObject({
+ input: [
+ {
+ role: "user",
+ content: [
+ { type: "input_text", text: "Explain the arrows" },
+ { type: "input_image", image_url: `data:image/png;base64,${pixel}` },
+ ],
+ },
+ ],
+ });
+ expect(requests[1].body).not.toHaveProperty("previous_response_id");
+ expect(screen.queryByText("Explain this diagram", { selector: "p" })).not.toBeInTheDocument();
+ expect(recordChatQuery).toHaveBeenCalledTimes(2);
+ });
+
+ it("should preserve a chat turn when editing it while an image model is selected", async () => {
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await user.type(screen.getByRole("textbox", { name: "Message", exact: true }), "Explain the experiment");
+ await user.click(screen.getByRole("button", { name: "Send" }));
+ await screen.findByText("I can see the uploaded image.");
+ await chooseModel(user, "research-chat", "studio-image");
+ await user.hover(screen.getAllByText("Explain the experiment").at(-1)!);
+ const editButton = await screen.findByRole("button", { name: "Edit message" });
+ act(() => fireEvent.click(editButton));
+ await user.clear(screen.getByRole("textbox", { name: "Edit message" }));
+ await user.type(screen.getByRole("textbox", { name: "Edit message" }), "Explain the findings");
+ await user.click(screen.getByRole("button", { name: "Save & Send" }));
+ expect(await screen.findByRole("alert")).toHaveTextContent("Choose a chat model before resending this message.");
+ expect(screen.getByRole("heading", { name: "Explain the experiment" })).toBeInTheDocument();
+ expect(screen.getByText("I can see the uploaded image.")).toBeInTheDocument();
+ expect(requests).toHaveLength(1);
+ expect(recordChatQuery).toHaveBeenCalledExactlyOnceWith("media-test-user");
+ });
+
+ it("should continue an image conversation using the completed response context", async () => {
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await uploadImage(user);
+ await user.click(screen.getByRole("button", { name: "Send" }));
+ await screen.findByText("I can see the uploaded image.");
+ await user.type(screen.getByRole("textbox", { name: "Message", exact: true }), "What is the main color?");
+ await user.click(screen.getByRole("button", { name: "Send" }));
+ await waitFor(() => expect(requests).toHaveLength(2));
+ expect(requests[1].body).toMatchObject({
+ previous_response_id: "response-1",
+ input: [{ role: "user", content: "What is the main color?" }],
+ });
+ expect(screen.getByRole("img", { name: "diagram.png" })).toBeInTheDocument();
+ });
+
+ it("should generate and render an image through the selected Model Hub model", async () => {
+ vi.mocked(recordChatQuery).mockReturnValueOnce(new Promise(() => {}));
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await chooseModel(user, "research-chat", "studio-image");
+ expect(screen.getByRole("button", { name: "studio-image" })).toBeInTheDocument();
+ await user.type(screen.getByRole("textbox", { name: "Message", exact: true }), "A blue research lab");
+ await user.click(screen.getByRole("button", { name: "Generate image" }));
+ const result = await screen.findByRole("img", { name: "Generated image 1" });
+ expect(result).toHaveAttribute("src", `data:image/png;base64,${pixel}`);
+ expect(requests).toEqual([
+ { pathname: "/images/generations", body: { model: "studio-image", prompt: "A blue research lab" } },
+ ]);
+ expect(recordChatQuery).toHaveBeenCalledExactlyOnceWith("media-test-user");
+ });
+
+ it("should list no image models when the account has none permitted", async () => {
+ models = models.filter((model) => model.mode === "chat");
+ const user = userEvent.setup();
+ renderChat();
+ await user.click(await screen.findByRole("button", { name: "research-chat" }));
+ await user.click(screen.getByRole("button", { name: "Images", exact: true }));
+ expect(screen.getByText("No models found.")).toBeInTheDocument();
+ expect(screen.queryByRole("button", { name: /^studio-image/ })).not.toBeInTheDocument();
+ expect(screen.queryByRole("button", { name: "Generate image" })).not.toBeInTheDocument();
+ expect(requests).toHaveLength(0);
+ });
+
+ it("should show the provider error when image generation fails", async () => {
+ imageResponse = () =>
+ Response.json({ error: { message: "Image access is disabled for this key" } }, { status: 403 });
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await chooseModel(user, "research-chat", "studio-image");
+ await user.type(screen.getByRole("textbox", { name: "Message", exact: true }), "A blue lab");
+ await user.click(screen.getByRole("button", { name: "Generate image" }));
+ expect(await screen.findByText(/Image access is disabled for this key/)).toBeInTheDocument();
+ expect(screen.queryByRole("img", { name: "Generated image 1" })).not.toBeInTheDocument();
+ expect(recordChatQuery).toHaveBeenCalledExactlyOnceWith("media-test-user");
+ });
+
+ it("should abort image generation when the user stops the request", async () => {
+ pendingGeneration = true;
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await chooseModel(user, "research-chat", "studio-image");
+ await user.type(screen.getByRole("textbox", { name: "Message", exact: true }), "A blue lab");
+ await user.click(screen.getByRole("button", { name: "Generate image" }));
+ await waitFor(() => expect(generationSignal).not.toBeNull());
+ act(() => {
+ fireEvent.change(screen.getByRole("textbox", { name: "Message", exact: true }), {
+ target: { value: "Another image" },
+ });
+ fireEvent.keyDown(screen.getByRole("textbox", { name: "Message", exact: true }), { key: "Enter" });
+ });
+ expect(requests).toHaveLength(1);
+ expect(recordChatQuery).toHaveBeenCalledExactlyOnceWith("media-test-user");
+ await user.click(screen.getByRole("button", { name: "Stop request" }));
+ expect(generationSignal?.aborted).toBe(true);
+ expect(await screen.findByText("[stopped]")).toBeInTheDocument();
+ expect(screen.queryByRole("img", { name: "Generated image 1" })).not.toBeInTheDocument();
+ expect(recordChatQuery).toHaveBeenCalledTimes(1);
+ });
+
+ it("should reject unsupported pasted files without issuing a request", async () => {
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ act(() => {
+ fireEvent.paste(screen.getByRole("textbox", { name: "Message", exact: true }), {
+ clipboardData: { files: [new File(["svg"], "diagram.svg", { type: "image/svg+xml" })] },
+ });
+ });
+ expect(await screen.findByRole("alert")).toHaveTextContent("Choose a PNG, JPEG, WebP, or GIF image.");
+ expect(requests).toHaveLength(0);
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ });
+
+ it("should not count a blank submission as a query", async () => {
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ act(() => {
+ fireEvent.change(screen.getByRole("textbox", { name: "Message", exact: true }), {
+ target: { value: " " },
+ });
+ fireEvent.keyDown(screen.getByRole("textbox", { name: "Message", exact: true }), { key: "Enter" });
+ });
+ expect(requests).toHaveLength(0);
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ });
+
+ it("should count one query for a message that streams text and executes multiple MCP tools", async () => {
+ includeMCPEvents = true;
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await user.click(screen.getByRole("button", { name: "Connect tools" }));
+ const serverSwitch = await screen.findByRole("switch");
+ await user.click(serverSwitch);
+ await waitFor(() => expect(screen.getByRole("switch")).toBeChecked());
+ await user.click(screen.getByRole("button", { name: "Connect tools" }));
+ expect(recordChatQuery).not.toHaveBeenCalled();
+
+ act(() => {
+ fireEvent.change(screen.getByRole("textbox", { name: "Message", exact: true }), {
+ target: { value: "Search the research notes" },
+ });
+ });
+ await user.click(screen.getByRole("button", { name: "Send" }));
+ await screen.findByText("I can see the uploaded image.");
+
+ expect(requests).toHaveLength(1);
+ expect(requests[0].body).toMatchObject({
+ tools: [{ type: "mcp", server_label: "research-tools", require_approval: "never" }],
+ });
+ expect(recordChatQuery).toHaveBeenCalledExactlyOnceWith("media-test-user");
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/chat/page.integration.test.tsx b/ui/litellm-dashboard/src/app/chat/page.integration.test.tsx
index 2020a66bd1c..e49f3a17094 100644
--- a/ui/litellm-dashboard/src/app/chat/page.integration.test.tsx
+++ b/ui/litellm-dashboard/src/app/chat/page.integration.test.tsx
@@ -72,7 +72,7 @@ const ON_TOTAL_LATENCY_INDEX = 24;
async function sendOneMessage(onUrlUpdate?: OnUrlUpdateFunction): Promise {
renderWithProviders(;
-// Extract provider from model name for logo lookup.
-// Handles prefixed models ("groq/llama-3"), and detects well-known providers by keyword.
-function getProviderFromModelName(modelName: string): string {
- if (!modelName) return "";
- const lower = modelName.toLowerCase();
- const slash = lower.indexOf("/");
- if (slash > 0) return lower.slice(0, slash);
- // Keyword matching — order matters (more specific first)
- if (lower.includes("claude")) return "anthropic";
- if (lower.includes("gemini")) return "gemini";
- if (lower.includes("gpt") || lower.includes("chatgpt") || /^o[0-9]/.test(lower)) return "openai";
- if (lower.includes("mistral") || lower.includes("codestral")) return "mistral";
- if (lower.includes("llama")) return "meta_llama";
- if (lower.includes("deepseek")) return "deepseek";
- if (lower.includes("grok")) return "xai";
- if (lower.includes("command")) return "cohere";
- if (lower.includes("nova") || lower.includes("titan")) return "bedrock";
- return "";
+function hasMessageContent(text: string, images: ChatImageAttachment[], mode: ChatMode): boolean {
+ return Boolean(text.trim()) || (mode === "chat" && images.length > 0);
}
export default function ChatConversationPage() {
@@ -56,7 +34,7 @@ export default function ChatConversationPage() {
const {
accessToken,
userId,
- userEmail,
+ conversations,
selectedMCPServers,
setSelectedMCPServers,
activeConversationId,
@@ -70,10 +48,15 @@ export default function ChatConversationPage() {
} = useChatShell();
const [selectedModel, setSelectedModel] = useState(null);
- const [models, setModels] = useState([]);
+ const [models, setModels] = useState([]);
+ const [mode, setMode] = useState("chat");
+ const [attachments, setAttachments] = useState([]);
+ const [attachmentError, setAttachmentError] = useState(null);
+ const [isReadingImages, setIsReadingImages] = useState(false);
+ const imageInputRef = useRef(null);
+ const readImagesRef = useRef(false);
+ const draftVersionRef = useRef(0);
const [isLoadingModels, setIsLoadingModels] = useState(true);
- const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
- const [modelSearchText, setModelSearchText] = useState("");
const [responsesSessionId, setResponsesSessionId] = useState(null);
const [prevConversationIdForSessionReset, setPrevConversationIdForSessionReset] = useState(activeConversationId);
@@ -83,7 +66,7 @@ export default function ChatConversationPage() {
const [storageBannerDismissed, setStorageBannerDismissed] = useState(false);
const abortControllerRef = useRef(null);
- const textareaRef = useRef(null);
+ const requestConversationRef = useRef(null);
const messagesScrollRef = useRef(null);
const [showScrollButton, setShowScrollButton] = useState(false);
const streamScrollLock = useRef(null);
@@ -97,12 +80,14 @@ export default function ChatConversationPage() {
if (!accessToken) return;
fetchAvailableModels(accessToken)
.then((data) => {
- const names = (data || []).map((m: { model_group?: string }) => m.model_group ?? "").filter(Boolean);
- setModels(names);
+ const available = (data || []).filter(isChatModel);
+ const names = available.map((model) => model.model_group);
+ setModels(available);
try {
const saved = localStorage.getItem(LOCALSTORAGE_MODEL_KEY);
if (saved && names.includes(saved)) {
setSelectedModel(saved);
+ setMode(modelChatMode(available.find((model) => model.model_group === saved)!));
return;
}
} catch {
@@ -110,7 +95,7 @@ export default function ChatConversationPage() {
}
if (names.length > 0) {
setSelectedModel(names[0]);
- localStorage.setItem(LOCALSTORAGE_MODEL_KEY, names[0]);
+ setMode(modelChatMode(available[0]));
}
})
.catch(() => toast.error("Could not load models"))
@@ -122,20 +107,87 @@ export default function ChatConversationPage() {
if (activeConversationId !== prevConversationIdForSessionReset) {
setPrevConversationIdForSessionReset(activeConversationId);
setResponsesSessionId(null);
+ setAttachments([]);
+ setAttachmentError(null);
+ setInputText("");
}
- const selectModel = useCallback((model: string) => {
- setSelectedModel(model);
- localStorage.setItem(LOCALSTORAGE_MODEL_KEY, model);
- setModelSelectorOpen(false);
- setModelSearchText("");
- }, []);
+ useEffect(() => {
+ draftVersionRef.current += 1;
+ if (abortControllerRef.current && requestConversationRef.current !== activeConversationId) {
+ abortControllerRef.current.abort();
+ }
+ }, [activeConversationId]);
+
+ const selectModel = useCallback(
+ (model: ModelGroup) => {
+ if (modelChatMode(model) === "image" && attachments.length > 0) {
+ setAttachmentError("Remove the attached images before switching to image generation.");
+ return;
+ }
+ setSelectedModel(model.model_group);
+ setMode(modelChatMode(model));
+ setResponsesSessionId(null);
+ setAttachmentError(null);
+ try {
+ localStorage.setItem(LOCALSTORAGE_MODEL_KEY, model.model_group);
+ } catch {
+ return;
+ }
+ },
+ [attachments.length],
+ );
+
+ const addImages = async (files: File[]) => {
+ if (mode !== "chat" || files.length === 0) return;
+ if (isStreaming || readImagesRef.current) return;
+ if (attachments.length + files.length > MAX_CHAT_IMAGES) {
+ setAttachmentError(`Attach up to ${MAX_CHAT_IMAGES} images per message.`);
+ return;
+ }
+ const draftVersion = draftVersionRef.current;
+ readImagesRef.current = true;
+ setIsReadingImages(true);
+ setAttachmentError(null);
+ try {
+ const images = await Promise.all(files.map(readChatImage));
+ if (draftVersion === draftVersionRef.current) setAttachments((current) => [...current, ...images]);
+ } catch (error) {
+ if (draftVersion === draftVersionRef.current)
+ setAttachmentError(error instanceof Error ? error.message : "Could not read these images.");
+ } finally {
+ readImagesRef.current = false;
+ setIsReadingImages(false);
+ }
+ };
+
+ const handleImageInput = (event: React.ChangeEvent) => {
+ const files = Array.from(event.target.files ?? []);
+ event.target.value = "";
+ void addImages(files);
+ };
+
+ useEffect(
+ () => () => {
+ abortControllerRef.current?.abort();
+ draftVersionRef.current += 1;
+ },
+ [],
+ );
const handleSend = useCallback(
- async (text: string, historyOverride?: Array<{ role: "user" | "assistant"; content: string }>) => {
+ async (
+ text: string,
+ historyOverride?: ReplayMessage[],
+ attachmentOverride?: ChatImageAttachment[],
+ generationModel?: string,
+ ) => {
const trimmed = text.trim();
- if (!trimmed || !selectedModel || isStreaming) return;
- const model = selectedModel;
+ const images = attachmentOverride ?? attachments;
+ const requestMode = generationModel ? "image" : mode;
+ const model = generationModel ?? selectedModel;
+ if (!hasMessageContent(trimmed, images, requestMode) || !model) return;
+ if (isStreaming || abortControllerRef.current || readImagesRef.current) return;
setInputText("");
let convId = activeConversationId;
@@ -145,11 +197,21 @@ export default function ChatConversationPage() {
setConversationIdInUrl(convId);
}
- appendMessage(convId, { role: "user", content: trimmed });
- appendMessage(convId, { role: "assistant", content: "" });
+ const imageGeneration = requestMode === "image" ? { model, prompt: trimmed } : undefined;
+ const userMessage = {
+ role: "user" as const,
+ content: trimmed,
+ attachments: images.length > 0 ? images : undefined,
+ imageGeneration,
+ };
+ appendMessage(convId, userMessage);
+ appendMessage(convId, { role: "assistant", content: "", imageGeneration });
+ setAttachments([]);
+ setAttachmentError(null);
setIsStreaming(true);
abortControllerRef.current = new AbortController();
+ requestConversationRef.current = convId;
// When historyOverride is set (edit / retry), the existing server-side
// session chain covers messages that were just truncated and is no longer
@@ -167,86 +229,33 @@ export default function ChatConversationPage() {
// On the very first turn (no session yet), we send the full history.
const previousResponseId = historyOverride ? null : responsesSessionId;
- const history: Array<{ role: "user" | "assistant"; content: string }> = historyOverride
- ? [...historyOverride, { role: "user" as const, content: trimmed }]
- : previousResponseId
- ? [{ role: "user" as const, content: trimmed }]
- : [
- // Explicitly filter to only user/assistant roles — tool messages
- // lack a required tool_call_id and would cause API errors.
- ...(activeConversation?.messages ?? [])
- .filter(
- (m): m is typeof m & { role: "user" | "assistant" } => m.role === "user" || m.role === "assistant",
- )
- .map((m) => ({ role: m.role, content: m.content })),
- { role: "user" as const, content: trimmed },
- ];
-
- let accumulatedContent = "";
- let accumulatedReasoning = "";
- // MCP events accumulated locally so we can persist them to the message
- // without relying on component state (which would cause stale closures).
- const accumulatedMCPEvents: MCPEvent[] = [];
- // Track clean completion so partial events are not shown on error/abort.
- let streamCompletedCleanly = false;
+ const history: ReplayMessage[] = [
+ ...(historyOverride ?? (previousResponseId ? [] : activeConversation?.messages ?? [])),
+ userMessage,
+ ];
+ const requestController = abortControllerRef.current;
+ const request = {
+ model,
+ mode: requestMode,
+ prompt: trimmed,
+ accessToken,
+ signal: requestController.signal,
+ messages: history,
+ previousResponseId,
+ mcpServers: selectedMCPServers,
+ onResponseId: setResponsesSessionId,
+ onUpdate: (updates: AssistantMessageUpdate) => updateLastAssistantMessage(convId, updates),
+ };
try {
- await makeOpenAIResponsesRequest(
- history,
- (_role: string, chunk: string) => {
- accumulatedContent += chunk;
- updateLastAssistantMessage(convId!, { content: accumulatedContent });
- },
- model,
- accessToken,
- undefined, // tags
- abortControllerRef.current.signal,
- (rc: string) => {
- accumulatedReasoning += rc;
- updateLastAssistantMessage(convId!, { reasoningContent: accumulatedReasoning });
- },
- (timeToFirstToken: number) => updateLastAssistantMessage(convId!, { timeToFirstToken }),
- (usage: TokenUsage) => updateLastAssistantMessage(convId!, { usage }),
- undefined,
- undefined,
- undefined,
- undefined,
- selectedMCPServers.length > 0 ? selectedMCPServers : undefined,
- previousResponseId,
- (id: string) => setResponsesSessionId(id),
- (event: MCPEvent) => {
- // Accumulate locally only — persisted once in finally to avoid
- // one full localStorage write per MCP event during streaming.
- accumulatedMCPEvents.push(event);
- },
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- true,
- (totalLatency: number) => updateLastAssistantMessage(convId!, { totalLatency }),
- );
- streamCompletedCleanly = true;
- } catch (err: unknown) {
- if (err instanceof Error && err.name === "AbortError") {
- updateLastAssistantMessage(convId!, {
- content: accumulatedContent + " [stopped]",
- });
- } else {
- updateLastAssistantMessage(convId!, {
- content: "[Something went wrong. The partial response has been saved.]",
- });
- }
+ void recordChatQuery(userId);
+ await runChatRequest(request);
} finally {
- // Only persist MCP events on clean completion — partial events from an
- // aborted or errored turn would show incomplete tool calls to the user.
- if (accumulatedMCPEvents.length > 0 && streamCompletedCleanly) {
- updateLastAssistantMessage(convId!, { mcpEvents: accumulatedMCPEvents });
+ if (abortControllerRef.current === requestController) {
+ setIsStreaming(false);
+ abortControllerRef.current = null;
+ requestConversationRef.current = null;
}
- setIsStreaming(false);
- abortControllerRef.current = null;
}
},
[
@@ -254,7 +263,10 @@ export default function ChatConversationPage() {
activeConversation,
selectedModel,
selectedMCPServers,
+ mode,
+ attachments,
accessToken,
+ userId,
createConversation,
appendMessage,
updateLastAssistantMessage,
@@ -271,34 +283,25 @@ export default function ChatConversationPage() {
const handleEditAndResend = useCallback(
(messageId: string, newContent: string) => {
if (!activeConversationId || isStreaming) return;
+ if (abortControllerRef.current || readImagesRef.current) return;
// Compute the truncated history synchronously before the async state update lands,
// so handleSend receives the correct pre-edit context rather than the stale closure value.
const msgs = activeConversation?.messages ?? [];
const idx = msgs.findIndex((m) => m.id === messageId);
- const priorMessages = (idx === -1 ? msgs : msgs.slice(0, idx))
- .filter((m) => m.role === "user" || m.role === "assistant")
- .map((m) => ({ role: m.role as "user" | "assistant", content: m.content }));
+ if (idx < 0) return;
+ const original = msgs[idx];
+ if (!original.imageGeneration && (mode !== "chat" || !selectedModel)) {
+ setAttachmentError("Choose a chat model before resending this message.");
+ return;
+ }
+ if (!newContent.trim() && !original.attachments?.length) return;
+ const priorMessages = msgs.slice(0, idx);
truncateFromMessage(activeConversationId, messageId);
- handleSend(newContent, priorMessages);
+ handleSend(newContent, priorMessages, original.attachments ?? [], original.imageGeneration?.model);
},
- [activeConversationId, isStreaming, activeConversation, truncateFromMessage, handleSend],
+ [activeConversationId, isStreaming, activeConversation, truncateFromMessage, handleSend, mode, selectedModel],
);
- const handleKeyDown = (e: React.KeyboardEvent) => {
- if (e.key === "Enter" && !e.shiftKey) {
- e.preventDefault();
- handleSend(inputText);
- }
- };
-
- // Auto-resize textarea
- useEffect(() => {
- const ta = textareaRef.current;
- if (!ta) return;
- ta.style.height = "auto";
- ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`;
- }, [inputText]);
-
// Track scroll position to show/hide scroll-to-bottom button
useEffect(() => {
const el = messagesScrollRef.current;
@@ -345,178 +348,165 @@ export default function ChatConversationPage() {
}, [activeConversation?.messages]);
const showBlankState = !activeConversation || activeConversation.messages.length === 0;
- const displayName = userEmail?.split("@")[0] ?? userId ?? "";
- const greeting = displayName ? `${getGreeting()}, ${displayName}` : getGreeting();
- // Filtered models: selected one floats to the top, then alphabetical
- const filteredModels = (
- modelSearchText ? models.filter((m) => m.toLowerCase().includes(modelSearchText.toLowerCase())) : models
- ).sort((a, b) => {
- if (a === selectedModel) return -1;
- if (b === selectedModel) return 1;
- return 0;
- });
-
- const modelSelectorContent = (
- {
- setModelSelectorOpen(open);
- if (!open) setModelSearchText("");
- }}
- >
-
- {selectedModel ? (
+ const inputBar = (inConversation: boolean) => {
+ const preparing = isLoadingModels || isReadingImages;
+ const submitDisabled = !hasMessageContent(inputText, attachments, mode) || !selectedModel || preparing;
+ return (
+
+
+ );
+}
diff --git a/ui/litellm-dashboard/src/app/chat/page.images.integration.test.tsx b/ui/litellm-dashboard/src/app/chat/page.images.integration.test.tsx
new file mode 100644
index 00000000000..4f34fe22e58
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/chat/page.images.integration.test.tsx
@@ -0,0 +1,355 @@
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders, testQueryClient } from "@/../tests/test-utils";
+import { ChatShellProvider } from "@/contexts/ChatShellContext";
+import { recordChatQuery } from "@/lib/telemetry/chat";
+import ChatConversationPage from "./page";
+
+vi.mock("@/lib/telemetry/chat", () => ({ recordChatQuery: vi.fn(async () => {}) }));
+
+vi.mock("next/navigation", () => ({
+ useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+}));
+
+type RecordedRequest = { pathname: string; body: Record
+
+
+ {isAdminRole(userRole) ? (
+
+ Model Hub
+Models
++ Find the right model. Explore providers, compare pricing, and see what each model can do. +
+
-
- {filteredModels.map((m) => {
- const checked = m === selectedModel;
- const provider = getProviderFromModelName(m);
- const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
- return (
-
- );
- })}
-
-
- );
-
- const modelSelectorTrigger = isLoadingModels ? (
-
- setModelSearchText(e.target.value)}
- placeholder="Search models..."
- className="h-8 text-[13px]"
- />
-
- {
+ if (mode === "chat" && event.dataTransfer.types.includes("Files")) event.preventDefault();
+ }}
+ onDrop={(event) => {
+ if (mode === "chat" && event.dataTransfer.files.length) {
+ event.preventDefault();
+ void addImages(Array.from(event.dataTransfer.files));
+ }
+ }}
+ >
+ void handleSend(inputText)}
+ onCancel={handleStop}
+ placeholder={
+ mode === "image"
+ ? "Describe the image you want to create…"
+ : inConversation
+ ? "Send a message..."
+ : "Describe a change, paste an error, or ask a question…"
+ }
+ isLoading={isStreaming}
+ submitLabel={mode === "image" ? "Generate image" : "Send"}
+ submitDisabled={submitDisabled}
+ onPaste={(event) => {
+ const images = Array.from(event.clipboardData.files).filter((file) => file.type.startsWith("image/"));
+ if (mode === "chat" && images.length > 0) {
+ event.preventDefault();
+ void addImages(images);
+ }
+ }}
+ attachmentPreview={
+ attachments.length > 0 ? (
+ 
{
- (e.currentTarget as HTMLImageElement).style.display = "none";
- }}
+
+
+
+
+
+
+
) : (
- Select model
- )}
-
- {modelSelectorContent}
-
-
- );
-
- const inputBar = (inConversation: boolean) => (
-
+ {attachments.map((image) => (
+
+ ) : undefined
+ }
+ modelPicker={
+
+ 
+
+
+ ))}
+ {image.name}
+
-