forked from phoenix-oss/llama-stack-mirror
feat: scaffolding for Llama Stack UI (#2149)
# What does this PR do? Introduces scaffolding for Llama Stack's UI. Created with next.js and https://ui.shadcn.com/. 1. Initialized directory with `npx shadcn@latest init` 2. Added sidebar component `npx shadcn@latest add sidebar` and added menu items for chat completions and responses. 3. Placeholder pages for each. ## Test Plan `npm run dev` <img width="1058" alt="image" src="https://github.com/user-attachments/assets/5695a53f-e22e-418e-80d1-5bf0ae9b6fe8" />
This commit is contained in:
parent
b42eb1ccbc
commit
ff247e35be
30 changed files with 8949 additions and 0 deletions
56
llama_stack/ui/components/app-sidebar.tsx
Normal file
56
llama_stack/ui/components/app-sidebar.tsx
Normal file
|
@ -0,0 +1,56 @@
|
|||
import { MessageSquareText, MessagesSquare } from "lucide-react"
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarHeader,
|
||||
} from "@/components/ui/sidebar"
|
||||
|
||||
|
||||
const logItems = [
|
||||
{
|
||||
title: "Chat Completions",
|
||||
url: "/logs/chat-completions",
|
||||
icon: MessageSquareText,
|
||||
},
|
||||
{
|
||||
title: "Responses",
|
||||
url: "/logs/responses",
|
||||
icon: MessagesSquare,
|
||||
},
|
||||
]
|
||||
|
||||
export function AppSidebar() {
|
||||
return (
|
||||
<Sidebar>
|
||||
<SidebarHeader>
|
||||
<a href="/">Llama Stack</a>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Logs</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{logItems.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue