feat(ui): remove Chat UI page link and banner

[ishaan-jaff]

Relevant issues

Pre-Submission checklist

• I have Added testing in the tests/test_litellm/ directory, Adding at least 1 test is a hard requirement - see details
• My PR passes all unit tests on make test-unit
• My PR's scope is as isolated as possible, it only solves 1 specific problem
• I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

CI (LiteLLM team)

• Branch creation CI run
  Link:

• CI run for the last commit
  Link:

• Merge / cherry-pick CI run
  Links:

Type

🧹 Refactoring

Changes

• Removed the "Open Chat" pinned button from the sidebar bottom (Sidebar2.tsx)
• Removed the "New / Chat UI" announcement banner from the playground page (playground/page.tsx)
• Cleaned up now-unused imports (MessageOutlined, CloseOutlined, useUIConfig) and state vars (chatBannerDismissed, uiRoot, chatHref)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Mar 17, 2026 10:17pm

[greptile-apps]

Greptile Summary

This PR removes two Chat UI promotional UI elements — the pinned "Open Chat" button from the sidebar bottom and the "New / Chat UI" announcement banner from the playground page — along with all their now-unused imports and state variables.

Key changes:

• Sidebar2.tsx: Removed the bottom-pinned <a> button that linked to /ui/chat and its MessageOutlined icon import. A now-dead "chat" case in routeFor was not cleaned up.
• playground/page.tsx: Removed the dismissible banner referencing the Chat UI, and cleaned up all related state (chatBannerDismissed, uiRoot, chatHref) and imports (useUIConfig, MessageOutlined, CloseOutlined). A minor indentation misalignment was left on the <TabGroup> after the banner removal.

Confidence Score: 5/5

• This PR is safe to merge — it is a pure UI removal with no functional regressions.
• Changes are isolated to two frontend files and only delete UI elements and their associated state/imports. No logic, API calls, or shared utilities are affected. The only findings are cosmetic (indentation) and minor dead-code cleanup.
• No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx	Removed the "Open Chat" pinned button and its MessageOutlined import. A now-orphaned "chat" case remains in the routeFor helper (dead code), but no functional issues.
ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx	Cleanly removes the "Chat UI" announcement banner and all related imports/state (useUIConfig, MessageOutlined, CloseOutlined, chatBannerDismissed, uiRoot, chatHref). Minor indentation misalignment left after banner removal.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Sidebar2.tsx] -->|Before| B["Pinned 'Open Chat' button\n(MessageOutlined + toHref('chat'))"]
    A -->|After| C["Button removed\n(dead 'chat' case remains in routeFor)"]

    D[playground/page.tsx] -->|Before| E["Chat UI banner\n(useUIConfig, chatBannerDismissed,\nuiRoot, chatHref, CloseOutlined)"]
    D -->|After| F["Banner removed\nAll related state & imports cleaned up"]

Loading

Comments Outside Diff (1)

1. ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx, line 109-110 (link)

   Dead "chat" route in routeFor

   The "chat" case in routeFor was only used by the now-removed "Open Chat" button (toHref("chat")). No menu item in menuItems references page: "chat", so this branch is now unreachable dead code. Consider removing it to keep the routing table clean.

_{Last reviewed commit: f7aec09}

[greptile-apps]

Indentation misalignment after banner removal

With the banner removed, the <TabGroup> is now at the same indentation level as its parent <div>, which is slightly inconsistent. This is cosmetic, but worth fixing for readability.

Suggested change

	<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" }}>
	<div className="h-full w-full flex flex-col">
	<TabGroup className="w-full" style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[codspeed-hq]

Merging this PR will not alter performance

✅ 16 untouched benchmarks

---

_{Comparing litellm_remove_chat_ui_nav (f7aec09) with main (ef9cc33)}