+ {/* MCPConnectPicker - LIT-2170 */}
+
+ );
+
+ return (
+
+
+ }>
+ {mcpButtonLabel}
+
+
+
+
+ } disabled />
+
+
+ setText(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder="Message..."
+ autoSize={{ minRows: 1, maxRows: 5 }}
+ style={{ flex: 1 }}
+ />
+
+ {isStreaming ? (
+ }
+ onClick={onStop}
+ type="primary"
+ danger
+ />
+ ) : (
+ }
+ onClick={handleSend}
+ type="primary"
+ disabled={isStreaming || isLoadingModels || text.trim() === ""}
+ />
+ )}
+
+ );
+};
+
+export default ChatInputBar;
diff --git a/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
new file mode 100644
index 00000000000..b3114564000
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
@@ -0,0 +1,407 @@
+"use client";
+
+import { ToolOutlined } from "@ant-design/icons";
+import { Collapse } from "antd";
+import React, { useEffect, useRef } from "react";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
+import ReasoningContent from "../playground/chat_ui/ReasoningContent";
+import { ChatMessage } from "./types";
+
+const { Panel } = Collapse;
+
+// Keys whose values must be redacted in tool args display
+const REDACTED_KEY_PATTERNS = /token|key|secret|password|auth/i;
+
+function redactSensitiveValues(obj: Record
+ {children}
+
+ );
+}
+
+// ------- Sub-components -------
+
+interface UserBubbleProps {
+ message: ChatMessage;
+}
+
+function UserBubble({ message }: UserBubbleProps) {
+ return (
+
+
+ );
+}
+
+interface AssistantBubbleProps {
+ message: ChatMessage;
+ isLastMessage: boolean;
+ isStreaming: boolean;
+ isTypingIndicator: boolean;
+}
+
+function AssistantBubble({
+ message,
+ isLastMessage,
+ isStreaming,
+ isTypingIndicator,
+}: AssistantBubbleProps) {
+ // Ref to control ReasoningContent collapse on streaming end.
+ // ReasoningContent manages its own expanded state; we use a key to
+ // remount it (collapsed by default) when streaming finishes.
+ const reasoningKeyRef = useRef
+ {message.content}
+
+
+ {formatTimestamp(message.timestamp)}
+
+
+
+ );
+ }
+
+ // Split content at trailing "[stopped]"
+ let mainContent = message.content;
+ let stoppedSuffix = false;
+ if (mainContent.endsWith("[stopped]")) {
+ mainContent = mainContent.slice(0, -"[stopped]".length);
+ stoppedSuffix = true;
+ }
+
+ return (
+
+
+
+ {showReasoning && (
+ showReasoningPlaceholder ? (
+
+ );
+}
+
+function ThinkingPlaceholder() {
+ return (
+ <>
+
+
+ >,
+ }}
+ >
+ {mainContent}
+
+ {stoppedSuffix && (
+ [stopped]
+ )}
+
+
+
+ {formatTimestamp(message.timestamp)}
+
+
+ Thinking...
+
+
+ );
+}
+
+function TypingDots() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+interface ToolCardProps {
+ message: ChatMessage;
+}
+
+function ToolCard({ message }: ToolCardProps) {
+ const redactedArgs =
+ message.toolArgs ? redactSensitiveValues(message.toolArgs) : undefined;
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+// ------- Main component -------
+
+interface Props {
+ messages: ChatMessage[];
+ isStreaming: boolean;
+}
+
+const ChatMessages: React.FC
+
+ )}
+
+ {message.toolResult && (
+
+ Arguments
+
+
+ {JSON.stringify(redactedArgs, null, 2)}
+
+
+
+ )}
+
+ Result
+
+
+ {message.toolResult}
+
+
+ {formatTimestamp(message.timestamp)}
+
+
+ {messages.map((msg, idx) => {
+ const isLastMessage = idx === lastIndex;
+
+ if (msg.role === "user") {
+ return
+ );
+};
+
+export default ChatMessages;
diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
new file mode 100644
index 00000000000..8aabb0a62da
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -0,0 +1,562 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Select, Tooltip, Skeleton, Popover, message } from "antd";
+import { SettingOutlined, PlusOutlined, BorderOutlined } from "@ant-design/icons";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useChatHistory } from "./useChatHistory";
+import ConversationList from "./ConversationList";
+import ChatMessages from "./ChatMessages";
+import MCPConnectPicker from "./MCPConnectPicker";
+import { fetchAvailableModels } from "../playground/llm_calls/fetch_models";
+import { makeOpenAIChatCompletionRequest } from "../playground/llm_calls/chat_completion";
+
+interface ChatPageProps {
+ accessToken: string;
+ userRole: string;
+ userId: string;
+ userEmail?: string;
+}
+
+const SUGGESTIONS = [
+ { label: "Write", icon: "βοΈ" },
+ { label: "Learn", icon: "π" },
+ { label: "Code", icon: "" },
+ { label: "Brainstorm", icon: "π‘" },
+];
+
+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";
+}
+
+const LOCALSTORAGE_MODEL_KEY = "litellm_chat_selected_model";
+
+const ChatPage: React.FC
+
+ {/* Conversation sidebar β slides in */}
+ {sidebarOpen && (
+
+ router.push(`/chat?id=${id}`)}
+ onDelete={deleteConversation}
+ onNewChat={() => router.push("/chat")}
+ onRename={renameConversation}
+ />
+
+ )}
+
+ {/* Main area */}
+
+
+ {/* Top bar */}
+
+ {/* Left: sidebar toggle + model selector */}
+
+
+
+
+
+ {storageUnavailable && !storageBannerDismissed && (
+
+
+ {isLoadingModels ? (
+
+
+ {/* Center: LiteLLM logo */}
+
+ 
+
+ LiteLLM Chat
+
+
+
+ {/* Right: settings */}
+
+
+ LiteLLM Chat
+
+
+ Chat history won't be saved in this browser session.
+
+
+ )}
+
+ {/* Content area */}
+
+ {showBlankState ? (
+ /* ---- Blank state ---- */
+
+ {/* Greeting */}
+
+
+
+
+ {/* Input card */}
+
+ + {greeting} +
+
+