)}
-
-
+
+
+
{formatTimestamp(message.timestamp)}
diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
index 8a21d0d92ae..1ecd40bf729 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -1,9 +1,20 @@
"use client";
import React, { useCallback, useEffect, useRef, useState, useLayoutEffect } from "react";
-import { Tooltip, Skeleton, Popover } from "antd";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
import MessageManager from "@/components/molecules/message_manager";
-import { Settings as SettingOutlined, Plus as PlusOutlined, Pencil as EditOutlined, PanelLeftClose as MenuFoldOutlined, PanelLeft as MenuUnfoldOutlined, Search as SearchOutlined, MessageSquare as MessageOutlined, LayoutGrid as AppstoreOutlined, Key as KeyOutlined, ArrowLeft as ArrowLeftOutlined, ChevronDown as DownOutlined, X as CloseOutlined, Check as CheckOutlined } from "lucide-react";
+import { Settings as SettingOutlined, Plus as PlusOutlined, Pencil as EditOutlined, PanelLeftClose as MenuFoldOutlined, PanelLeft as MenuUnfoldOutlined, Search as SearchOutlined, MessageSquare as MessageOutlined, LayoutGrid as AppstoreOutlined, Key as KeyOutlined, ArrowLeft as ArrowLeftOutlined, ChevronDown as DownOutlined, Check as CheckOutlined } from "lucide-react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { useRouter, useSearchParams } from "next/navigation";
@@ -583,7 +594,9 @@ const ChatPage: React.FC
= ({ accessToken, userRole, userId, user
active = false,
kbd?: string,
) => (
-
+
+
+
-
+
+ {sidebarCollapsed && (
+ {label}
+ )}
+
+
);
// ---- Model selector trigger button ----
const modelSelectorTrigger = isLoadingModels ? (
-
+
) : (
{ setModelSelectorOpen(open); if (!open) setModelSearchText(""); }}
- content={modelSelectorContent}
- trigger="click"
- placement="bottomLeft"
>
+
+
+
+ {modelSelectorContent}
+
);
@@ -722,32 +742,29 @@ const ChatPage: React.FC = ({ accessToken, userRole, userId, user
padding: inConversation ? "4px 12px 10px" : "8px 12px 12px",
borderTop: "1px solid #f3f4f6",
}}>
-
+
+
+
+
- }
- trigger="click"
- placement="topLeft"
- >
-
+
@@ -834,18 +851,26 @@ const ChatPage: React.FC = ({ accessToken, userRole, userId, user
)}
-
-
-
+
+
+
+
+
+
+ {sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+
+
+
{/* Sidebar nav buttons */}
@@ -861,35 +886,44 @@ const ChatPage: React.FC