scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-08-28 05:25:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

feat(ui): add Chat button to top navbar

Browse source
This commit is contained in:
Ishaan Jaffer 2026-03-05 16:57:02 -08:00
parent be586681a7
commit 1812119d37
1 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
ui/litellm-dashboard/src/components/navbar.tsx
View file

@ -4,7 +4,7 @@ import { getProxyBaseUrl } from "@/components/networking";
import { useTheme } from "@/contexts/ThemeContext";
import { clearTokenCookies } from "@/utils/cookieUtils";
import { fetchProxySettings } from "@/utils/proxyUtils";
import { MenuFoldOutlined, MenuUnfoldOutlined, MoonOutlined, SunOutlined } from "@ant-design/icons";
import { MenuFoldOutlined, MenuUnfoldOutlined, MessageOutlined, MoonOutlined, SunOutlined } from "@ant-design/icons";
import { Button, Switch, Tag } from "antd";
import Link from "next/link";
import React, { useEffect, useState } from "react";
@ -128,6 +128,41 @@ const Navbar: React.FC<NavbarProps> = ({
</div>
{/* Right side nav items */}
<div className="flex items-center space-x-5 ml-auto">
{/* Chat CTA — always visible, opens in new tab */}
<a
href="/chat"
target="_blank"
rel="noopener noreferrer"
style={{
display: "inline-flex",
alignItems: "center",
gap: 6,
padding: "6px 14px",
borderRadius: 8,
background: "#1677ff",
color: "#fff",
fontSize: 13,
fontWeight: 600,
textDecoration: "none",
whiteSpace: "nowrap",
}}
onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = "#0958d9"; }}
onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = "#1677ff"; }}
>
<MessageOutlined style={{ fontSize: 14 }} />
Chat
<span style={{
fontSize: 9,
fontWeight: 700,
background: "#fff",
color: "#1677ff",
borderRadius: 3,
padding: "1px 4px",
letterSpacing: "0.05em",
}}>
NEW
</span>
</a>
<CommunityEngagementButtons />
{/* Dark mode is currently a work in progress. To test, you can change 'false' to 'true' below.
Do not set this to true by default until all components are confirmed to support dark mode styles. */}