{showSuggestions && suggestions.length > 0 && (
@@ -99,12 +107,7 @@ export function ChatComposer({
{
- if ((event.target as HTMLElement).closest("button")) {
- return;
- }
- event.currentTarget.parentElement?.querySelector("[data-slot=input-group-control]")?.focus();
- }}
+ onClick={handleToolbarClick}
>
+ ,
+ );
+
+ expect(screen.getByRole("heading", { name: "Chat content" })).toBeVisible();
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ await user.click(screen.getByRole("button", { name: "Switch workspace, current: Chat" }));
+ expect(await screen.findByRole("menuitem", { name: "Observability" })).toBeInTheDocument();
+ expect(localStorage.getItem("litellm_plugin_mode")).toBe(plugin.name);
+
+ await user.click(screen.getByRole("menuitem", { name: "AI Gateway", exact: true }));
+
+ expect(localStorage.getItem("litellm_plugin_mode")).toBe("ai-gateway");
+ expect(assign).toHaveBeenCalledWith(gateway);
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ },
+ );
+
+ it.each(["SecurityError", "QuotaExceededError"])(
+ "should still navigate to AI Gateway when browser storage throws %s",
+ async (errorName) => {
+ if (errorName === "SecurityError") {
+ vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+ throw new DOMException("Storage is unavailable", errorName);
+ });
+ vi.spyOn(Storage.prototype, "removeItem").mockImplementation(() => {
+ throw new DOMException("Storage is unavailable", errorName);
+ });
+ }
+ vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+ throw new DOMException("Storage is unavailable", errorName);
+ });
+ const user = userEvent.setup();
+ renderWithProviders(
+
+ ,
+ );
+
+ expect(screen.getByRole("heading", { name: "Chat content" })).toBeVisible();
+ await user.click(screen.getByRole("button", { name: "Switch workspace, current: Chat" }));
+ expect(await screen.findByRole("menuitem", { name: "Observability" })).toBeInTheDocument();
+ await user.click(screen.getByRole("menuitem", { name: "AI Gateway", exact: true }));
+
+ expect(assign).toHaveBeenCalledWith("/ui/");
+ if (errorName === "QuotaExceededError") {
+ expect(localStorage.getItem("litellm_plugin_mode")).toBeNull();
+ }
+ },
+ );
+});
diff --git a/ui/litellm-dashboard/src/app/chat/layout.test.tsx b/ui/litellm-dashboard/src/app/chat/layout.test.tsx
index d455b84afa3..0b0cb96ddc9 100644
--- a/ui/litellm-dashboard/src/app/chat/layout.test.tsx
+++ b/ui/litellm-dashboard/src/app/chat/layout.test.tsx
@@ -1,23 +1,25 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, screen } from "@testing-library/react";
import { renderWithProviders as render } from "@/../tests/test-utils";
import ChatLayout from "./layout";
-const { mockUseAuthorized, mockUseUISettings, mockReplace, mockUiHref, state } = vi.hoisted(() => {
+const { mockUseAuthorized, mockUseUISettings, mockReplace, mockUiHref, recordChatQuery, state } = vi.hoisted(() => {
const state = {
enableChatUI: false,
isUISettingsLoading: false,
isIdentityLoading: false,
isAuthorized: true,
+ userId: "user-1" as string | null,
};
return {
state,
mockReplace: vi.fn(),
+ recordChatQuery: vi.fn(async () => {}),
mockUiHref: vi.fn((segment: string) => `/mocked-ui/${segment}`),
mockUseAuthorized: vi.fn(() => ({
accessToken: "token-123",
userRole: "Internal User",
- userId: "user-1",
+ userId: state.userId,
userEmail: "user@example.com",
premiumUser: false,
isLoading: state.isIdentityLoading,
@@ -36,6 +38,7 @@ vi.mock("next/navigation", () => ({
vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: mockUseAuthorized }));
vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({ useUISettings: mockUseUISettings }));
vi.mock("@/utils/uiHref", () => ({ uiHref: mockUiHref }));
+vi.mock("@/lib/telemetry/chat", () => ({ recordChatQuery }));
vi.mock("@/components/navbar", () => ({ default: () => }));
vi.mock("@/contexts/ThemeContext", () => ({
ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children},
@@ -43,21 +46,32 @@ vi.mock("@/contexts/ThemeContext", () => ({
vi.mock("@/contexts/ChatShellContext", () => ({
ChatShellProvider: ({ children }: { children: React.ReactNode }) => <>{children},
}));
+vi.mock("@/contexts/PluginModeContext", () => ({
+ PluginModeProvider: ({ children }: { children: React.ReactNode }) => <>{children},
+}));
vi.mock("@/components/chat/ChatShell", () => ({
default: ({ children }: { children: React.ReactNode }) =>
@@ -67,9 +81,10 @@ describe("ChatLayout", () => {
expect(screen.getByTestId("chat-shell")).toBeInTheDocument();
expect(screen.getByTestId("page-content")).toBeInTheDocument();
expect(mockReplace).not.toHaveBeenCalled();
+ expect(recordChatQuery).not.toHaveBeenCalled();
});
- it("redirects to the dashboard when enable_chat_ui is off", () => {
+ it("should redirect without recording a query when enable_chat_ui is off", () => {
state.enableChatUI = false;
render(
@@ -78,9 +93,10 @@ describe("ChatLayout", () => {
);
expect(screen.queryByTestId("chat-shell")).not.toBeInTheDocument();
expect(mockReplace).toHaveBeenCalledWith("/mocked-ui/");
+ expect(recordChatQuery).not.toHaveBeenCalled();
});
- it("renders nothing while UI settings are still loading", () => {
+ it("should wait for UI settings without recording a query", () => {
state.isUISettingsLoading = true;
render(
@@ -89,9 +105,10 @@ describe("ChatLayout", () => {
);
expect(screen.queryByTestId("chat-shell")).not.toBeInTheDocument();
expect(mockReplace).not.toHaveBeenCalled();
+ expect(recordChatQuery).not.toHaveBeenCalled();
});
- it("renders nothing until the signed-in user's identity has loaded", () => {
+ it("should wait for the signed-in user's identity without recording a query", () => {
state.enableChatUI = true;
state.isIdentityLoading = true;
render(
@@ -101,9 +118,10 @@ describe("ChatLayout", () => {
);
expect(screen.queryByTestId("chat-shell")).not.toBeInTheDocument();
expect(screen.queryByTestId("page-content")).not.toBeInTheDocument();
+ expect(recordChatQuery).not.toHaveBeenCalled();
});
- it("renders nothing when the signed-in user's identity could not be confirmed", () => {
+ it("should hide Chat without recording a query when the signed-in user's identity cannot be confirmed", () => {
state.enableChatUI = true;
state.isAuthorized = false;
render(
@@ -113,5 +131,48 @@ describe("ChatLayout", () => {
);
expect(screen.queryByTestId("chat-shell")).not.toBeInTheDocument();
expect(screen.queryByTestId("page-content")).not.toBeInTheDocument();
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ });
+
+ it("should not record a query or fetch telemetry when opening, focusing, or revisiting Chat", () => {
+ state.enableChatUI = true;
+ const visibility = vi.spyOn(document, "visibilityState", "get").mockReturnValue("hidden");
+ const view = render(Chat content );
+
+ act(() => fireEvent.focus(window));
+ expect(recordChatQuery).not.toHaveBeenCalled();
+
+ visibility.mockReturnValue("visible");
+ act(() => fireEvent(document, new Event("visibilitychange")));
+ expect(recordChatQuery).not.toHaveBeenCalled();
+
+ view.rerender(Another Chat page );
+ act(() => fireEvent.focus(window));
+
+ view.unmount();
+ render(Chat revisited );
+ act(() => {
+ fireEvent.focus(window);
+ fireEvent(document, new Event("visibilitychange"));
+ });
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ expect(fetch).not.toHaveBeenCalled();
+ });
+
+ it("should not record a query or fetch telemetry when the signed-in account changes", () => {
+ state.enableChatUI = true;
+ const view = render(Chat content );
+ expect(recordChatQuery).not.toHaveBeenCalled();
+
+ state.userId = "user-2";
+ view.rerender(Chat content );
+ expect(screen.getByTestId("chat-shell")).toBeInTheDocument();
+
+ state.userId = null;
+ state.isAuthorized = false;
+ view.rerender(Chat content );
+ act(() => fireEvent.focus(window));
+ expect(recordChatQuery).not.toHaveBeenCalled();
+ expect(fetch).not.toHaveBeenCalled();
});
});
diff --git a/ui/litellm-dashboard/src/app/chat/layout.tsx b/ui/litellm-dashboard/src/app/chat/layout.tsx
index bfe494d2234..1da33d80ec5 100644
--- a/ui/litellm-dashboard/src/app/chat/layout.tsx
+++ b/ui/litellm-dashboard/src/app/chat/layout.tsx
@@ -4,11 +4,12 @@ import { Suspense, useEffect } from "react";
import { useRouter } from "next/navigation";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
-import Navbar from "@/components/navbar";
import { ThemeProvider } from "@/contexts/ThemeContext";
import { ChatShellProvider } from "@/contexts/ChatShellContext";
+import { PluginModeProvider } from "@/contexts/PluginModeContext";
import ChatShell from "@/components/chat/ChatShell";
import { uiHref } from "@/utils/uiHref";
+import "@/components/chat/moyai/moyai-chat.css";
// The nuqs Next adapter uses useSearchParams, so keep the chat tree behind Suspense.
function ChatLayoutContent({ children }: { children: React.ReactNode }) {
@@ -32,13 +33,16 @@ function ChatLayoutContent({ children }: { children: React.ReactNode }) {
}, [blocked, router]);
const identityReady = !isIdentityLoading && isAuthorized;
+ const chatReady = identityReady && !isUISettingsLoading && chatEnabled;
- if (!identityReady || isUISettingsLoading || blocked) return null;
+ if (!chatReady) return null;
return (
-
{tools}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.integration.test.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.integration.test.tsx
index 13958a26adf..d728f6473f5 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.integration.test.tsx
@@ -307,7 +307,14 @@ describe("ViewUserDashboard", () => {
expect(sortOrder).toBe("desc");
});
- it("sends the clicked column as sort_by and resets to the first page", async () => {
+ it.each([
+ ["user_alias", "asc"],
+ ["max_budget", "desc"],
+ ["updated_at", "asc"],
+ ["status", "asc"],
+ ["key_count", "desc"],
+ ["sso_user_id", "asc"],
+ ])("sorts %s through the API and resets pagination", async (field, direction) => {
const user = userEvent.setup();
renderDashboard();
@@ -315,12 +322,12 @@ describe("ViewUserDashboard", () => {
expect(screen.getByText("test@example.com")).toBeInTheDocument();
});
- await user.click(screen.getByTestId("sort-header-user_email"));
+ await user.click(screen.getByTestId(`sort-header-${field}`));
await waitFor(() => {
const latest = userListCall.mock.calls[userListCall.mock.calls.length - 1];
- expect(latest[8]).toBe("user_email");
- expect(latest[9]).toBe("asc");
+ expect(latest[8]).toBe(field);
+ expect(latest[9]).toBe(direction);
expect(latest[2]).toBe(1);
});
});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users/UsersTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users/UsersTable.integration.test.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users/UsersTable.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users/UsersTable.integration.test.tsx
index b9ed37a2152..85d9ef386a3 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users/UsersTable.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users/UsersTable.integration.test.tsx
@@ -132,10 +132,7 @@ describe("UsersTable", () => {
expect(screen.getByText("$98.85")).toBeInTheDocument();
});
- // Sorting is server-side and the backend only accepts these five keys, so a sort
- // control on any other column would send an invalid sort_by. Assert the exact set:
- // a missing control and an extra one both have to fail.
- it("exposes a sort control for exactly the five server-sortable columns", () => {
+ it("exposes sorting for every data column", () => {
render(Chat content
+Chat content
+{children}
,
}));
describe("ChatLayout", () => {
+ beforeEach(() => {
+ vi.stubGlobal("fetch", vi.fn());
+ });
+
afterEach(() => {
state.enableChatUI = false;
state.isUISettingsLoading = false;
state.isIdentityLoading = false;
state.isAuthorized = true;
+ state.userId = "user-1";
mockReplace.mockClear();
mockUiHref.mockClear();
+ recordChatQuery.mockClear();
+ vi.restoreAllMocks();
+ vi.unstubAllGlobals();
});
- it("renders the chat shell when enable_chat_ui is on", () => {
+ it("should render the chat shell without recording a query when enable_chat_ui is on", () => {
state.enableChatUI = true;
render(
-
- {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 files"), 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 files" })).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 upload a document as a file part, preserve it on edit, and keep contents out of metrics", async () => {
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await user.upload(
+ screen.getByLabelText("Upload files"),
+ new File(["private fixture"], "brief.docx", {
+ type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+ }),
+ );
+ expect(await screen.findByText("brief.docx")).toBeInTheDocument();
+ expect(screen.queryByRole("img", { name: "brief.docx" })).not.toBeInTheDocument();
+ await user.click(screen.getByRole("button", { name: "Send" }));
+ await screen.findByText("I can see the uploaded image.");
+ const filePart = {
+ type: "input_file",
+ filename: "brief.docx",
+ file_data:
+ "data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,cHJpdmF0ZSBmaXh0dXJl",
+ };
+ expect(requests[0].body).toMatchObject({ input: [{ role: "user", content: [filePart] }] });
+ expect(recordChatQuery).toHaveBeenCalledExactlyOnceWith("media-test-user");
+ await user.click(screen.getByRole("button", { name: "Edit message" }));
+ act(() =>
+ fireEvent.change(screen.getByRole("textbox", { name: "Edit message" }), {
+ target: { value: "Summarize the document" },
+ }),
+ );
+ 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: "Summarize the document" }, filePart] }],
+ });
+ expect(requests[1].body).not.toHaveProperty("previous_response_id");
+ });
+
+ it("should enforce the shared file limit and remove a document before submission", async () => {
+ const user = userEvent.setup();
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ const files = Array.from(
+ { length: 5 },
+ (_, index) => new File(["text"], `note-${index}.txt`, { type: "text/plain" }),
+ );
+ await user.upload(screen.getByLabelText("Upload files"), files);
+ expect(await screen.findByRole("alert")).toHaveTextContent("Attach up to 4 files per message.");
+ expect(screen.getByRole("button", { name: "Send" })).toBeDisabled();
+ await user.upload(screen.getByLabelText("Upload files"), files[0]);
+ await user.click(await screen.findByRole("button", { name: "Remove note-0.txt" }));
+ expect(screen.queryByText("note-0.txt")).not.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..6b333750b78 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([] = [];
+let providers: string[];
+const toolEvent: MCPEvent = {
+ type: "response.output_item.done",
+ item: {
+ type: "mcp_call",
+ id: "inventory-call",
+ name: "lookup_inventory",
+ arguments: '{"item":"widgets"}',
+ output: '{"quantity":12}',
+ },
+};
+const toolPair = [
+ { type: "function_call", call_id: "inventory-call", name: "lookup_inventory", arguments: '{"item":"widgets"}' },
+ { type: "function_call_output", call_id: "inventory-call", output: '{"quantity":12}' },
+];
+
+function renderChat(conversationId?: string) {
+ return renderWithProviders(
+
+ ,
+ { searchParams: conversationId ? { id: conversationId } : {} },
+ );
+}
+
+async function send(text: string) {
+ const count = requests.length;
+ act(() =>
+ fireEvent.change(screen.getByRole("textbox", { name: "Message", exact: true }), { target: { value: text } }),
+ );
+ act(() => fireEvent.click(screen.getByRole("button", { name: "Send", exact: true })));
+ await waitFor(() => expect(requests).toHaveLength(count + 1));
+ await waitFor(() => expect(screen.queryByRole("button", { name: "Stop request" })).not.toBeInTheDocument());
+}
+
+beforeEach(() => {
+ localStorage.clear();
+ testQueryClient.clear();
+ requests.length = 0;
+ providers = ["openai"];
+ 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: [
+ { model_group: "research-chat", providers, mode: "chat" },
+ { model_group: "second-chat", providers: ["openai"], mode: "chat" },
+ ],
+ });
+ if (pathname.endsWith("/responses")) {
+ requests.push(JSON.parse(await request.text()));
+ return new Response(
+ [
+ { type: "response.output_text.delta", delta: `Answer ${requests.length}` },
+ { 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" },
+ },
+ );
+ }
+ return Response.json({}, { status: 404 });
+ }),
+ );
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("chat conversation replay", () => {
+ it("should keep native response chaining for ordinary follow-up messages", async () => {
+ renderChat();
+ expect(await screen.findByRole("button", { name: "research-chat" })).toBeVisible();
+ await send("Remember papaya");
+ await send("What did I ask you to remember?");
+ expect(requests[1].previous_response_id).toBe("response-1");
+ expect(requests[1].input).toEqual([{ type: "message", role: "user", content: "What did I ask you to remember?" }]);
+ });
+
+ it("should preserve saved tool-only turns and image attachments when continuing and editing a conversation", async () => {
+ const conversation: Conversation = {
+ id: "saved-conversation",
+ title: "Inventory",
+ model: "research-chat",
+ createdAt: 1,
+ updatedAt: 1,
+ mcpServerNames: [],
+ messages: [
+ {
+ id: "image-message",
+ role: "user",
+ content: "Find this item",
+ timestamp: 1,
+ attachments: [
+ { id: "saved-image", name: "item.png", url: "https://example.com/item.png", mimeType: "image/png" },
+ ],
+ },
+ { id: "tool-message", role: "assistant", content: "", timestamp: 2, mcpEvents: [toolEvent] },
+ ],
+ };
+ localStorage.setItem(storageKey, JSON.stringify([conversation]));
+ renderChat(conversation.id);
+ await screen.findByRole("button", { name: "research-chat" });
+ expect(screen.getByRole("button", { name: "lookup_inventory" })).toHaveAttribute("aria-expanded", "true");
+ await send("What was the quantity?");
+ const imageMessage = {
+ type: "message",
+ role: "user",
+ content: [
+ { type: "input_text", text: "Find this item" },
+ { type: "input_image", image_url: "https://example.com/item.png", detail: "auto" },
+ ],
+ };
+ expect(requests[0].input).toEqual([
+ imageMessage,
+ ...toolPair,
+ { type: "message", role: "user", content: "What was the quantity?" },
+ ]);
+ expect(requests[0]).not.toHaveProperty("tools");
+ const user = userEvent.setup();
+ await user.hover(screen.getByText("What was the quantity?"));
+ await user.click(screen.getAllByRole("button", { name: "Edit message" }).at(-1)!);
+ act(() =>
+ fireEvent.change(screen.getByRole("textbox", { name: "Edit message" }), {
+ target: { value: "Repeat that quantity" },
+ }),
+ );
+ await user.click(screen.getByRole("button", { name: "Save & Send" }));
+ await waitFor(() => expect(requests).toHaveLength(2));
+ expect(requests[1]).not.toHaveProperty("previous_response_id");
+ expect(requests[1].input).toEqual([
+ imageMessage,
+ ...toolPair,
+ { type: "message", role: "user", content: "Repeat that quantity" },
+ ]);
+ });
+
+ it("should replay history rather than reuse another model's response session after changing models", async () => {
+ renderChat();
+ await screen.findByRole("button", { name: "research-chat" });
+ await send("Remember papaya");
+ const user = userEvent.setup();
+ await user.click(screen.getByRole("button", { name: "research-chat" }));
+ await user.click(await screen.findByRole("button", { name: /^second-chat/ }));
+ await send("What did I ask you to remember?");
+ expect(requests[1]).not.toHaveProperty("previous_response_id");
+ expect(requests[1]).toMatchObject({
+ model: "second-chat",
+ input: [
+ { role: "user", content: "Remember papaya" },
+ { role: "assistant", content: "Answer 1" },
+ { role: "user", content: "What did I ask you to remember?" },
+ ],
+ });
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/chat/page.tsx b/ui/litellm-dashboard/src/app/chat/page.tsx
index fdf6a1e02a3..9b8f0275a07 100644
--- a/ui/litellm-dashboard/src/app/chat/page.tsx
+++ b/ui/litellm-dashboard/src/app/chat/page.tsx
@@ -1,11 +1,8 @@
"use client";
import React, { useCallback, useEffect, useRef, useState, useLayoutEffect } from "react";
-import { Plus, ChevronDown, Check, X } from "lucide-react";
+import { Plus, ChevronDown, Paperclip, ImageIcon, X } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Skeleton } from "@/components/ui/skeleton";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { toast } from "@/lib/toast";
import { useRouter } from "next/navigation";
@@ -13,41 +10,64 @@ import { useChatShell } from "@/contexts/ChatShellContext";
import { getChatRoutes } from "@/components/chat/ChatShell";
import ChatMessages from "@/components/chat/ChatMessages";
import MCPConnectPicker from "@/components/chat/MCPConnectPicker";
-import { fetchAvailableModels } from "@/components/llm_calls/fetch_models";
-import { makeOpenAIResponsesRequest } from "@/components/llm_calls/responses_api";
-import type { TokenUsage } from "@/components/chat_ui/ResponseMetrics";
-import type { MCPEvent } from "@/components/chat/types";
-import { getProviderLogoAndName } from "@/components/provider_info_helpers";
+import { fetchAvailableModels, type ModelGroup } from "@/components/llm_calls/fetch_models";
+import type { AssistantMessageUpdate, ChatAttachment, ChatMessage } from "@/components/chat/types";
+import ChatModelPicker, { isChatModel, modelChatMode, type ChatMode } from "@/components/chat/ChatModelPicker";
+import MoyaiChatComposer from "@/components/chat/moyai/MoyaiChatComposer";
+import MoyaiChatHome from "@/components/chat/moyai/MoyaiChatHome";
+import { runChatRequest } from "@/components/chat/runChatRequest";
+import { readChatAttachment, MAX_CHAT_ATTACHMENTS, CHAT_ATTACHMENT_ACCEPT } from "@/components/chat/attachmentHelpers";
+import ChatFileChip from "@/components/chat/ChatFileChip";
import { useQueryState } from "nuqs";
+import { recordChatQuery } from "@/lib/telemetry/chat";
-const SUGGESTIONS = ["Write", "Learn", "Code", "Brainstorm"];
const LOCALSTORAGE_MODEL_KEY = "litellm_chat_selected_model";
-function getGreeting(): string {
- const h = new Date().getHours();
- if (h >= 5 && h < 12) return "Good morning";
- if (h >= 12 && h < 17) return "Good afternoon";
- return "Good evening";
+type ReplayMessage = Pick;
+
+function hasMessageContent(text: string, images: ChatAttachment[], mode: ChatMode): boolean {
+ return Boolean(text.trim()) || (mode === "chat" && images.length > 0);
}
-// 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 AttachmentPreview({
+ attachments,
+ disabled,
+ onRemove,
+}: {
+ attachments: ChatAttachment[];
+ disabled: boolean;
+ onRemove: (id: string) => void;
+}) {
+ if (!attachments.length) return null;
+ return (
+ (null);
- const [models, setModels] = useState([]);
+ const [models, setModels] = useState([]);
+ const [mode, setMode] = useState("chat");
+ const [attachments, setAttachments] = useState([]);
+ const [attachmentError, setAttachmentError] = useState(null);
+ const [isReadingAttachments, setIsReadingAttachments] = useState(false);
+ const attachmentInputRef = useRef(null);
+ const readAttachmentsRef = 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 responsesSessionGenerationRef = useRef(0);
+ const previousResponsesConversationRef = useRef(activeConversationId);
const [prevConversationIdForSessionReset, setPrevConversationIdForSessionReset] = useState(activeConversationId);
const [isStreaming, setIsStreaming] = useState(false);
const [inputText, setInputText] = useState("");
@@ -83,7 +110,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 +124,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,32 +139,111 @@ 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"))
.finally(() => setIsLoadingModels(false));
}, [accessToken]);
+ useLayoutEffect(() => {
+ if (
+ previousResponsesConversationRef.current !== null &&
+ previousResponsesConversationRef.current !== activeConversationId
+ ) {
+ responsesSessionGenerationRef.current += 1;
+ }
+ previousResponsesConversationRef.current = activeConversationId;
+ }, [activeConversationId]);
+
// Reset the responses session when switching between conversations so that
// previous_response_id from conversation A is never sent for conversation B.
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 files before switching to image generation.");
+ return;
+ }
+ responsesSessionGenerationRef.current += 1;
+ 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 addAttachments = async (files: File[]) => {
+ if (mode !== "chat" || files.length === 0) return;
+ if (isStreaming || readAttachmentsRef.current) return;
+ if (attachments.length + files.length > MAX_CHAT_ATTACHMENTS) {
+ setAttachmentError(`Attach up to ${MAX_CHAT_ATTACHMENTS} files per message.`);
+ return;
+ }
+ const draftVersion = draftVersionRef.current;
+ readAttachmentsRef.current = true;
+ setIsReadingAttachments(true);
+ setAttachmentError(null);
+ try {
+ const images = await Promise.all(files.map(readChatAttachment));
+ if (draftVersion === draftVersionRef.current) setAttachments((current) => [...current, ...images]);
+ } catch (error) {
+ if (draftVersion === draftVersionRef.current)
+ setAttachmentError(error instanceof Error ? error.message : "Could not read these files.");
+ } finally {
+ readAttachmentsRef.current = false;
+ setIsReadingAttachments(false);
+ }
+ };
+
+ const handleAttachmentInput = (event: React.ChangeEvent) => {
+ const files = Array.from(event.target.files ?? []);
+ event.target.value = "";
+ void addAttachments(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?: ChatAttachment[],
+ 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 || readAttachmentsRef.current) return;
+ const sessionGeneration = responsesSessionGenerationRef.current;
setInputText("");
let convId = activeConversationId;
@@ -145,11 +253,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 +285,35 @@ 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: (id: string | null) => {
+ if (responsesSessionGenerationRef.current === sessionGeneration) setResponsesSessionId(id);
+ },
+ 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 +321,10 @@ export default function ChatConversationPage() {
activeConversation,
selectedModel,
selectedMCPServers,
+ mode,
+ attachments,
accessToken,
+ userId,
createConversation,
appendMessage,
updateLastAssistantMessage,
@@ -271,34 +341,25 @@ export default function ChatConversationPage() {
const handleEditAndResend = useCallback(
(messageId: string, newContent: string) => {
if (!activeConversationId || isStreaming) return;
+ if (abortControllerRef.current || readAttachmentsRef.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 +406,152 @@ 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 || isReadingAttachments;
+ 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..f7bbf59c0cb
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/chat/page.images.integration.test.tsx
@@ -0,0 +1,409 @@
+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. +
+
+ {attachments.map((attachment) => (
+
+ );
}
export default function ChatConversationPage() {
@@ -56,7 +76,7 @@ export default function ChatConversationPage() {
const {
accessToken,
userId,
- userEmail,
+ conversations,
selectedMCPServers,
setSelectedMCPServers,
activeConversationId,
@@ -70,12 +90,19 @@ export default function ChatConversationPage() {
} = useChatShell();
const [selectedModel, setSelectedModel] = useState
+ {attachment.kind === "file" ? (
+ 
+
+ ))}
+ {attachment.name}
+ + )} + +
-
- {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 addAttachments(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 addAttachments(images);
+ }
+ }}
+ attachmentPreview={
+ setAttachments((current) => current.filter((item) => item.id !== id))}
+ />
+ }
+ modelPicker={
+ 
{
- (e.currentTarget as HTMLImageElement).style.display = "none";
- }}
+
+
+
+
+
+
+
) : (
- Select model
- )}
-
- {modelSelectorContent}
-
-
- );
-
- const inputBar = (inConversation: boolean) => (
-
-