feat(ui): migrate playground tabs and message icons to shadcn

Replace Tremor playground page tabs with Base UI tabs and swap remaining
message bubble and attachment renderer icons to Lucide

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageRenderer.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import Image from "next/image";
+import { FileText } from "lucide-react";
 import { MessageType } from "@/components/chat_ui/types";
 import { shouldShowChatAttachedImage } from "./ChatImageUtils";
-import { FilePdfOutlined } from "@ant-design/icons";
 
 interface ChatImageRendererProps {
   message: MessageType;
@@ -18,8 +18,8 @@ const ChatImageRenderer: React.FC<ChatImageRendererProps> = ({ message }) => {
   return (
     <div className="mb-2">
       {isPdf ? (
-        <div className="w-64 h-32 rounded-md border border-gray-200 bg-red-50 flex items-center justify-center">
-          <FilePdfOutlined style={{ fontSize: "48px", color: "#dc2626" }} />
+        <div className="flex h-32 w-64 items-center justify-center rounded-md border border-gray-200 bg-red-50">
+          <FileText className="size-12 text-red-600" aria-label="PDF attachment" />
         </div>
       ) : (
         <Image

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.tsx

@@ -1,4 +1,4 @@
-import { RobotOutlined, UserOutlined } from "@ant-design/icons";
+import { Bot, User } from "lucide-react";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -59,9 +59,9 @@ function ChatMessageBubble({
             }}
           >
             {isUser ? (
-              <UserOutlined style={{ fontSize: "12px", color: "#2563eb" }} />
+              <User className="size-3 text-blue-600" aria-hidden="true" />
             ) : (
-              <RobotOutlined style={{ fontSize: "12px", color: "#4b5563" }} />
+              <Bot className="size-3 text-gray-600" aria-hidden="true" />
             )}
           </div>
           <strong className="text-sm capitalize">{message.role}</strong>

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageRenderer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import { FileText } from "lucide-react";
 import { MessageType } from "@/components/chat_ui/types";
 import { shouldShowAttachedImage } from "./ResponsesImageUtils";
-import { FilePdfOutlined } from "@ant-design/icons";
 
 interface ResponsesImageRendererProps {
   message: MessageType;
@@ -17,15 +17,14 @@ const ResponsesImageRenderer: React.FC<ResponsesImageRendererProps> = ({ message
   return (
     <div className="mb-2">
       {isPdf ? (
-        <div className="w-64 h-32 rounded-md border border-gray-200 bg-red-50 flex items-center justify-center">
-          <FilePdfOutlined style={{ fontSize: "48px", color: "#dc2626" }} />
+        <div className="flex h-32 w-64 items-center justify-center rounded-md border border-gray-200 bg-red-50">
+          <FileText className="size-12 text-red-600" aria-label="PDF attachment" />
         </div>
       ) : (
         <img
           src={message.imagePreviewUrl}
           alt="User uploaded image"
-          className="max-w-64 rounded-md border border-gray-200 shadow-xs"
-          style={{ maxHeight: "200px" }}
+          className="max-h-[200px] max-w-64 rounded-md border border-gray-200 shadow-xs"
         />
       )}
     </div>

ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx

@@ -5,10 +5,10 @@ import AgentBuilderView from "@/app/(dashboard)/playground/components/chat_ui/Ag
 import ChatUI from "@/app/(dashboard)/playground/components/chat_ui/ChatUI";
 import CompareUI from "@/app/(dashboard)/playground/components/compareUI/CompareUI";
 import ComplianceUI from "@/app/(dashboard)/playground/components/complianceUI/ComplianceUI";
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
 import { DeprecationBanner } from "@/components/DeprecationBanner";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { fetchProxySettings } from "@/utils/proxyUtils";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface ProxySettings {
   PROXY_BASE_URL?: string;
@@ -48,44 +48,53 @@ export default function PlaygroundPage() {
 
   return (
     <div className="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden">
-      <TabGroup className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-        <TabList className="mb-0 shrink-0 overflow-x-auto">
-          <Tab>Chat</Tab>
-          <Tab>Compare</Tab>
-          <Tab>Compliance</Tab>
-          <Tab>Agent Builder (Experimental)</Tab>
-        </TabList>
-        <TabPanels className="min-h-0 min-w-0 flex-1 overflow-hidden">
-          <TabPanel className="h-full min-h-0 min-w-0 overflow-hidden">
-            <ChatUI
-              accessToken={accessToken}
-              token={token}
-              userRole={userRole}
-              userID={userId}
-              disabledPersonalKeyCreation={disabledPersonalKeyCreation}
-              proxySettings={proxySettings}
-            />
-          </TabPanel>
-          <TabPanel className="h-full">
-            <CompareUI accessToken={accessToken} disabledPersonalKeyCreation={disabledPersonalKeyCreation} />
-          </TabPanel>
-          <TabPanel className="h-full">
-            <ComplianceUI accessToken={accessToken} disabledPersonalKeyCreation={disabledPersonalKeyCreation} />
-          </TabPanel>
-          <TabPanel className="h-full">
-            <DeprecationBanner featureName="The Playground's Agent Builder" />
-            <AgentBuilderView
-              accessToken={accessToken}
-              token={token}
-              userID={userId}
-              userRole={userRole}
-              disabledPersonalKeyCreation={disabledPersonalKeyCreation}
-              proxySettings={proxySettings}
-              customProxyBaseUrl={proxySettings?.LITELLM_UI_API_DOC_BASE_URL ?? proxySettings?.PROXY_BASE_URL}
-            />
-          </TabPanel>
-        </TabPanels>
-      </TabGroup>
+      <Tabs defaultValue="chat" className="flex min-h-0 min-w-0 flex-1 flex-col gap-0 overflow-hidden">
+        <TabsList
+          variant="line"
+          className="mb-0 h-auto w-full shrink-0 justify-start overflow-x-auto rounded-none border-b border-border bg-transparent p-0"
+        >
+          <TabsTrigger value="chat" className="flex-none rounded-none px-4 py-2">
+            Chat
+          </TabsTrigger>
+          <TabsTrigger value="compare" className="flex-none rounded-none px-4 py-2">
+            Compare
+          </TabsTrigger>
+          <TabsTrigger value="compliance" className="flex-none rounded-none px-4 py-2">
+            Compliance
+          </TabsTrigger>
+          <TabsTrigger value="agent-builder" className="flex-none rounded-none px-4 py-2">
+            Agent Builder (Experimental)
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="chat" className="mt-0 h-full min-h-0 min-w-0 overflow-hidden data-hidden:hidden">
+          <ChatUI
+            accessToken={accessToken}
+            token={token}
+            userRole={userRole}
+            userID={userId}
+            disabledPersonalKeyCreation={disabledPersonalKeyCreation}
+            proxySettings={proxySettings}
+          />
+        </TabsContent>
+        <TabsContent value="compare" className="mt-0 h-full data-hidden:hidden">
+          <CompareUI accessToken={accessToken} disabledPersonalKeyCreation={disabledPersonalKeyCreation} />
+        </TabsContent>
+        <TabsContent value="compliance" className="mt-0 h-full data-hidden:hidden">
+          <ComplianceUI accessToken={accessToken} disabledPersonalKeyCreation={disabledPersonalKeyCreation} />
+        </TabsContent>
+        <TabsContent value="agent-builder" className="mt-0 h-full data-hidden:hidden">
+          <DeprecationBanner featureName="The Playground's Agent Builder" />
+          <AgentBuilderView
+            accessToken={accessToken}
+            token={token}
+            userID={userId}
+            userRole={userRole}
+            disabledPersonalKeyCreation={disabledPersonalKeyCreation}
+            proxySettings={proxySettings}
+            customProxyBaseUrl={proxySettings?.LITELLM_UI_API_DOC_BASE_URL ?? proxySettings?.PROXY_BASE_URL}
+          />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }