feat(ui): add dismissible Chat UI announcement banner to Playground page

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

@@ -8,6 +8,7 @@ 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 { MessageOutlined, CloseOutlined } from "@ant-design/icons";
 
 interface ProxySettings {
   PROXY_BASE_URL?: string;
@@ -17,6 +18,7 @@ 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);
 
   useEffect(() => {
     const initializeProxySettings = async () => {
@@ -35,7 +37,66 @@ export default function PlaygroundPage() {
   }, [accessToken]);
 
   return (
-    <TabGroup className="h-full w-full">
+    <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="/chat"
+            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>
         <Tab>Compare</Tab>
@@ -72,5 +133,6 @@ export default function PlaygroundPage() {
         </TabPanel>
       </TabPanels>
     </TabGroup>
+    </div>
   );
 }