feat(ui): remove Chat UI page link and banner from sidebar and playground (#23908)

ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx

@@ -20,7 +20,6 @@ import {
   ToolOutlined,
   TagsOutlined,
   AuditOutlined,
-  MessageOutlined,
 } from "@ant-design/icons";
 // import {
 //   all_admin_roles,
@@ -466,41 +465,6 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
         </ConfigProvider>
         {isAdminRole(userRole) && !collapsed && <UsageIndicator accessToken={accessToken} width={220} />}
 
-        {/* Pinned "Open Chat" button at bottom */}
-        <div style={{
-          padding: collapsed ? "10px 8px" : "10px 12px",
-          borderTop: "1px solid #f0f0f0",
-          flexShrink: 0,
-        }}>
-          <a
-            href={toHref("chat")}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: collapsed ? "center" : "flex-start",
-              gap: 8,
-              padding: collapsed ? "8px 0" : "8px 10px",
-              borderRadius: 8,
-              background: "#1677ff",
-              color: "#fff",
-              textDecoration: "none",
-              fontSize: 13,
-              fontWeight: 600,
-              transition: "background 0.15s",
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLAnchorElement).style.background = "#0958d9";
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLAnchorElement).style.background = "#1677ff";
-            }}
-          >
-            <MessageOutlined style={{ fontSize: 16, flexShrink: 0 }} />
-            {!collapsed && <span>Open Chat</span>}
-          </a>
-        </div>
       </Sider>
     </Layout>
   );

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

@@ -8,8 +8,6 @@ import ComplianceUI from "@/components/playground/complianceUI/ComplianceUI";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { fetchProxySettings } from "@/utils/proxyUtils";
-import { useUIConfig } from "@/app/(dashboard)/hooks/uiConfig/useUIConfig";
-import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
 
 interface ProxySettings {
   PROXY_BASE_URL?: string;
@@ -19,12 +17,6 @@ interface ProxySettings {
 export default function PlaygroundPage() {
   const { accessToken, userRole, userId, disabledPersonalKeyCreation, token } = useAuthorized();
   const [proxySettings, setProxySettings] = useState<ProxySettings | undefined>(undefined);
-  const [chatBannerDismissed, setChatBannerDismissed] = useState(false);
-  const { data: uiConfig } = useUIConfig();
-  const uiRoot = uiConfig?.server_root_path && uiConfig.server_root_path !== "/"
-    ? uiConfig.server_root_path.replace(/\/+$/, "")
-    : "";
-  const chatHref = `${uiRoot}/ui/chat`;
 
   useEffect(() => {
     const initializeProxySettings = async () => {
@@ -44,64 +36,6 @@ export default function PlaygroundPage() {
 
   return (
     <div className="h-full w-full flex flex-col">
-      {!chatBannerDismissed && (
-        <div style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 16,
-          padding: "10px 20px",
-          background: "#f0f9ff",
-          borderBottom: "1px solid #bae6fd",
-          flexShrink: 0,
-        }}>
-          <span style={{
-            fontSize: 10,
-            fontWeight: 700,
-            color: "#fff",
-            background: "#0ea5e9",
-            borderRadius: 4,
-            padding: "2px 7px",
-            letterSpacing: "0.08em",
-            textTransform: "uppercase",
-            flexShrink: 0,
-            lineHeight: "18px",
-          }}>
-            New
-          </span>
-          <span style={{ flex: 1, color: "#0c4a6e", fontSize: 13.5, lineHeight: 1.5 }}>
-            <strong>Chat UI</strong>
-            {" "}— a ChatGPT-like interface for your users to chat with AI models and MCP tools. Share it with your team.
-          </span>
-          <a
-            href={chatHref}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 5,
-              padding: "5px 14px",
-              borderRadius: 6,
-              background: "#0ea5e9",
-              color: "#fff",
-              fontSize: 12.5,
-              fontWeight: 600,
-              textDecoration: "none",
-              whiteSpace: "nowrap",
-              flexShrink: 0,
-            }}
-          >
-            Open Chat UI →
-          </a>
-          <button
-            onClick={() => setChatBannerDismissed(true)}
-            style={{ background: "none", border: "none", cursor: "pointer", color: "#64748b", padding: 4, flexShrink: 0, lineHeight: 1 }}
-            aria-label="Dismiss"
-          >
-            <CloseOutlined style={{ fontSize: 13 }} />
-          </button>
-        </div>
-      )}
     <TabGroup className="w-full" style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
       <TabList className="mb-0">
         <Tab>Chat</Tab>