Skip to content

Commit 7448a4a

Browse files
franciscojavierarceofranciscojavierarceo
authored
chore: Updating UI Sidebar (llamastack#3081)
# What does this PR do? This updates the sidebar to look a little more like other popular ones. <img width="1913" height="1352" alt="Screenshot 2025-08-08 at 11 25 31 PM" src="https://github.com/user-attachments/assets/00738412-1101-48ec-8864-cde4a8733ec1" /> ## Test Plan <!-- Describe the tests you ran to verify your changes with result summaries. *Provide clear instructions so the plan can be easily re-executed.* --> Signed-off-by: Francisco Javier Arceo <[email protected]>
1 parent 8faff92 commit 7448a4a

File tree

2 files changed

+96
-74
lines changed

2 files changed

+96
-74
lines changed

‎llama_stack/ui/app/chat-playground/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ const handleSubmitWithContent = async (content: string) => {
175175
return (
176176
<div className="flex flex-col h-full max-w-4xl mx-auto">
177177
<div className="mb-4 flex justify-between items-center">
178-
<h1 className="text-2xl font-bold">Chat Playground</h1>
178+
<h1 className="text-2xl font-bold">Chat Playground (Completions)</h1>
179179
<div className="flex gap-2">
180180
<Select value={selectedModel} onValueChange={setSelectedModel} disabled={isModelsLoading || isGenerating}>
181181
<SelectTrigger className="w-[180px]">

‎llama_stack/ui/components/layout/app-sidebar.tsx‎

Lines changed: 95 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
MoveUpRight,
77
Database,
88
MessageCircle,
9+
Settings2,
10+
Compass,
911
} from "lucide-react";
1012
import Link from "next/link";
1113
import { usePathname } from "next/navigation";
@@ -22,15 +24,16 @@ import {
2224
SidebarMenuItem,
2325
SidebarHeader,
2426
} from "@/components/ui/sidebar";
25-
// Extracted Chat Playground item
26-
const chatPlaygroundItem = {
27-
title: "Chat Playground",
28-
url: "/chat-playground",
29-
icon: MessageCircle,
30-
};
3127

32-
// Removed Chat Playground from log items
33-
const logItems = [
28+
const createItems = [
29+
{
30+
title: "Chat Playground",
31+
url: "/chat-playground",
32+
icon: MessageCircle,
33+
},
34+
];
35+
36+
const manageItems = [
3437
{
3538
title: "Chat Completions",
3639
url: "/logs/chat-completions",
@@ -53,77 +56,96 @@ const logItems = [
5356
},
5457
];
5558

59+
const optimizeItems: { title: string; url: string; icon: React.ElementType }[] = [
60+
{
61+
title: "Evaluations",
62+
url: "",
63+
icon: Compass,
64+
},
65+
{
66+
title: "Fine-tuning",
67+
url: "",
68+
icon: Settings2,
69+
},
70+
];
71+
72+
interface SidebarItem {
73+
title: string;
74+
url: string;
75+
icon: React.ElementType;
76+
}
77+
5678
export function AppSidebar() {
5779
const pathname = usePathname();
5880

59-
return (
60-
<Sidebar>
61-
<SidebarHeader>
62-
<Link href="/">Llama Stack</Link>
63-
</SidebarHeader>
64-
<SidebarContent>
65-
{/* Chat Playground as its own section */}
66-
<SidebarGroup>
67-
<SidebarGroupContent>
68-
<SidebarMenu>
69-
<SidebarMenuItem>
81+
const renderSidebarItems = (items: SidebarItem[]) => {
82+
return items.map((item) => {
83+
const isActive = pathname.startsWith(item.url);
84+
return (
85+
<SidebarMenuItem key={item.title}>
86+
<SidebarMenuButton
87+
asChild
88+
className={cn(
89+
"justify-start",
90+
isActive &&
91+
"bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100",
92+
)}
93+
>
94+
<Link href={item.url}>
95+
<item.icon
96+
className={cn(
97+
isActive && "text-gray-900 dark:text-gray-100",
98+
"mr-2 h-4 w-4",
99+
)}
100+
/>
101+
<span>{item.title}</span>
102+
</Link>
103+
</SidebarMenuButton>
104+
</SidebarMenuItem>
105+
);
106+
});
107+
};
108+
109+
return (
110+
<Sidebar>
111+
<SidebarHeader>
112+
<Link href="/">Llama Stack</Link>
113+
</SidebarHeader>
114+
<SidebarContent>
115+
<SidebarGroup>
116+
<SidebarGroupLabel>Create</SidebarGroupLabel>
117+
<SidebarGroupContent>
118+
<SidebarMenu>{renderSidebarItems(createItems)}</SidebarMenu>
119+
</SidebarGroupContent>
120+
</SidebarGroup>
121+
122+
<SidebarGroup>
123+
<SidebarGroupLabel>Manage</SidebarGroupLabel>
124+
<SidebarGroupContent>
125+
<SidebarMenu>{renderSidebarItems(manageItems)}</SidebarMenu>
126+
</SidebarGroupContent>
127+
</SidebarGroup>
128+
129+
<SidebarGroup>
130+
<SidebarGroupLabel>Optimize</SidebarGroupLabel>
131+
<SidebarGroupContent>
132+
<SidebarMenu>
133+
{optimizeItems.map((item) => (
134+
<SidebarMenuItem key={item.title}>
70135
<SidebarMenuButton
71-
asChild
72-
className={cn(
73-
"justify-start",
74-
pathname.startsWith(chatPlaygroundItem.url) &&
75-
"bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100",
76-
)}
136+
disabled
137+
className="justify-start opacity-60 cursor-not-allowed"
77138
>
78-
<Link href={chatPlaygroundItem.url}>
79-
<chatPlaygroundItem.icon
80-
className={cn(
81-
pathname.startsWith(chatPlaygroundItem.url) && "text-gray-900 dark:text-gray-100",
82-
"mr-2 h-4 w-4",
83-
)}
84-
/>
85-
<span>{chatPlaygroundItem.title}</span>
86-
</Link>
139+
<item.icon className="mr-2 h-4 w-4" />
140+
<span>{item.title}</span>
141+
<span className="ml-2 text-xs text-gray-500">(Coming Soon)</span>
87142
</SidebarMenuButton>
88143
</SidebarMenuItem>
89-
</SidebarMenu>
90-
</SidebarGroupContent>
91-
</SidebarGroup>
92-
93-
{/* Logs section */}
94-
<SidebarGroup>
95-
<SidebarGroupLabel>Logs</SidebarGroupLabel>
96-
<SidebarGroupContent>
97-
<SidebarMenu>
98-
{logItems.map((item) => {
99-
const isActive = pathname.startsWith(item.url);
100-
return (
101-
<SidebarMenuItem key={item.title}>
102-
<SidebarMenuButton
103-
asChild
104-
className={cn(
105-
"justify-start",
106-
isActive &&
107-
"bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100",
108-
)}
109-
>
110-
<Link href={item.url}>
111-
<item.icon
112-
className={cn(
113-
isActive && "text-gray-900 dark:text-gray-100",
114-
"mr-2 h-4 w-4",
115-
)}
116-
/>
117-
<span>{item.title}</span>
118-
</Link>
119-
</SidebarMenuButton>
120-
</SidebarMenuItem>
121-
);
122-
})}
123-
</SidebarMenu>
124-
</SidebarGroupContent>
125-
</SidebarGroup>
126-
</SidebarContent>
127-
</Sidebar>
144+
))}
145+
</SidebarMenu>
146+
</SidebarGroupContent>
147+
</SidebarGroup>
148+
</SidebarContent>
149+
</Sidebar>
128150
);
129151
}

0 commit comments

Comments
 (0)