phoenix-oss/llama-stack-mirror
0
0
Fork 1
mirror of https://github.com/meta-llama/llama-stack.git synced 2025-12-03 09:53:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: move src/llama_stack/ui to src/llama_stack_ui (#4068)

Browse source 
# What does this PR do?
This better separates UI from backend code, which was a point of
confusion often for our beloved AI friends.


## Test Plan
CI
This commit is contained in:
ehhuang 2025-11-04 15:21:49 -08:00 • committed by GitHub
parent 5850e3473f
commit 95b0493fae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
156 changed files with 20 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/llama_stack/cli/stack/run.py
View file

@ -253,7 +253,7 @@ class StackRun(Subcommand):
)
return
ui_dir = REPO_ROOT / "llama_stack" / "ui"
ui_dir = REPO_ROOT / "llama_stack_ui"
logs_dir = Path("~/.llama/ui/logs").expanduser()
try:
# Create logs directory if it doesn't exist

44
src/llama_stack/ui/.gitignore vendored
View file

@ -1,44 +0,0 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# playwright
.last-run.json

1
src/llama_stack/ui/.nvmrc
View file

@ -1 +0,0 @@
22.5.1

12
src/llama_stack/ui/.prettierignore
View file

@ -1,12 +0,0 @@
# Ignore artifacts:
build
coverage
.next
node_modules
dist
*.lock
*.log
# Generated files
*.min.js
*.min.css

10
src/llama_stack/ui/.prettierrc
View file

@ -1,10 +0,0 @@
{
"semi": true,
"trailingComma": "es5",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid"
}

25
src/llama_stack/ui/README.md
View file

@ -1,25 +0,0 @@
## This is WIP.
We use shadcdn/ui [Shadcn UI](https://ui.shadcn.com/) for the UI components.
## Getting Started
First, install dependencies:
```bash
npm install
```
Then, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:8322](http://localhost:8322) with your browser to see the result.

6
src/llama_stack/ui/app/api/auth/[...nextauth]/route.ts
View file

@ -1,6 +0,0 @@
import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

109
src/llama_stack/ui/app/api/v1/[...path]/route.ts
View file

@ -1,109 +0,0 @@
import { NextRequest, NextResponse } from "next/server";
// Get backend URL from environment variable or default to localhost for development
const BACKEND_URL =
process.env.LLAMA_STACK_BACKEND_URL ||
`http://localhost:${process.env.LLAMA_STACK_PORT || 8321}`;
async function proxyRequest(request: NextRequest, method: string) {
try {
// Extract the path from the request URL
const url = new URL(request.url);
const pathSegments = url.pathname.split("/");
// Remove /api from the path to get the actual API path
// /api/v1/models/list -> /v1/models/list
const apiPath = pathSegments.slice(2).join("/"); // Remove 'api' segment
const targetUrl = `${BACKEND_URL}/${apiPath}${url.search}`;
console.log(`Proxying ${method} ${url.pathname} -> ${targetUrl}`);
// Prepare headers (exclude host and other problematic headers)
const headers = new Headers();
request.headers.forEach((value, key) => {
// Skip headers that might cause issues in proxy
if (
!["host", "connection", "content-length"].includes(key.toLowerCase())
) {
headers.set(key, value);
}
});
// Prepare the request options
const requestOptions: RequestInit = {
method,
headers,
};
// Add body for methods that support it
if (["POST", "PUT", "PATCH"].includes(method) && request.body) {
requestOptions.body = await request.text();
}
// Make the request to FastAPI backend
const response = await fetch(targetUrl, requestOptions);
// Get response data
const responseText = await response.text();
console.log(
`Response from FastAPI: ${response.status} ${response.statusText}`
);
// Create response with same status and headers
// Handle 204 No Content responses specially
const proxyResponse =
response.status === 204
? new NextResponse(null, { status: 204 })
: new NextResponse(responseText, {
status: response.status,
statusText: response.statusText,
});
// Copy response headers (except problematic ones)
response.headers.forEach((value, key) => {
if (!["connection", "transfer-encoding"].includes(key.toLowerCase())) {
proxyResponse.headers.set(key, value);
}
});
return proxyResponse;
} catch (error) {
console.error("Proxy request failed:", error);
return NextResponse.json(
{
error: "Proxy request failed",
message: error instanceof Error ? error.message : "Unknown error",
backend_url: BACKEND_URL,
timestamp: new Date().toISOString(),
},
{ status: 500 }
);
}
}
// HTTP method handlers
export async function GET(request: NextRequest) {
return proxyRequest(request, "GET");
}
export async function POST(request: NextRequest) {
return proxyRequest(request, "POST");
}
export async function PUT(request: NextRequest) {
return proxyRequest(request, "PUT");
}
export async function DELETE(request: NextRequest) {
return proxyRequest(request, "DELETE");
}
export async function PATCH(request: NextRequest) {
return proxyRequest(request, "PATCH");
}
export async function OPTIONS(request: NextRequest) {
return proxyRequest(request, "OPTIONS");
}

118
src/llama_stack/ui/app/auth/signin/page.tsx
View file

@ -1,118 +0,0 @@
"use client";
import { signIn, signOut, useSession } from "next-auth/react";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Copy, Check, Home, Github } from "lucide-react";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function SignInPage() {
const { data: session, status } = useSession();
const [copied, setCopied] = useState(false);
const router = useRouter();
const handleCopyToken = async () => {
if (session?.accessToken) {
await navigator.clipboard.writeText(session.accessToken);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
};
if (status === "loading") {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="text-muted-foreground">Loading...</div>
</div>
);
}
return (
<div className="flex items-center justify-center min-h-screen">
<Card className="w-[400px]">
<CardHeader>
<CardTitle>Authentication</CardTitle>
<CardDescription>
{session
? "You are successfully authenticated!"
: "Sign in with GitHub to use your access token as an API key"}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{!session ? (
<Button
onClick={() => {
console.log("Signing in with GitHub...");
signIn("github", { callbackUrl: "/auth/signin" }).catch(
error => {
console.error("Sign in error:", error);
}
);
}}
className="w-full"
variant="default"
>
<Github className="mr-2 h-4 w-4" />
Sign in with GitHub
</Button>
) : (
<div className="space-y-4">
<div className="text-sm text-muted-foreground">
Signed in as {session.user?.email}
</div>
{session.accessToken && (
<div className="space-y-2">
<div className="text-sm font-medium">
GitHub Access Token:
</div>
<div className="flex gap-2">
<code className="flex-1 p-2 bg-muted rounded text-xs break-all">
{session.accessToken}
</code>
<Button
size="sm"
variant="outline"
onClick={handleCopyToken}
>
{copied ? (
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
</div>
<div className="text-xs text-muted-foreground">
This GitHub token will be used as your API key for
authenticated Llama Stack requests.
</div>
</div>
)}
<div className="flex gap-2">
<Button onClick={() => router.push("/")} className="flex-1">
<Home className="mr-2 h-4 w-4" />
Go to Dashboard
</Button>
<Button
onClick={() => signOut()}
variant="outline"
className="flex-1"
>
Sign out
</Button>
</div>
</div>
)}
</CardContent>
</Card>
</div>
);
}

610
src/llama_stack/ui/app/chat-playground/chunk-processor.test.tsx
View file

@ -1,610 +0,0 @@
import { describe, test, expect } from "@jest/globals";
// Extract the exact processChunk function implementation for testing
function createProcessChunk() {
return (chunk: unknown): { text: string | null; isToolCall: boolean } => {
const chunkObj = chunk as Record<string, unknown>;
// Helper function to check if content contains function call JSON
const containsToolCall = (content: string): boolean => {
return (
content.includes('"type": "function"') ||
content.includes('"name": "knowledge_search"') ||
content.includes('"parameters":') ||
!!content.match(/\{"type":\s*"function".*?\}/)
);
};
// Check if this chunk contains a tool call (function call)
let isToolCall = false;
// Check direct chunk content if it's a string
if (typeof chunk === "string") {
isToolCall = containsToolCall(chunk);
}
// Check delta structures
if (
chunkObj?.delta &&
typeof chunkObj.delta === "object" &&
chunkObj.delta !== null
) {
const delta = chunkObj.delta as Record<string, unknown>;
if ("tool_calls" in delta) {
isToolCall = true;
}
if (typeof delta.text === "string") {
if (containsToolCall(delta.text)) {
isToolCall = true;
}
}
}
// Check event structures
if (
chunkObj?.event &&
typeof chunkObj.event === "object" &&
chunkObj.event !== null
) {
const event = chunkObj.event as Record<string, unknown>;
// Check event payload
if (
event?.payload &&
typeof event.payload === "object" &&
event.payload !== null
) {
const payload = event.payload as Record<string, unknown>;
if (typeof payload.content === "string") {
if (containsToolCall(payload.content)) {
isToolCall = true;
}
}
// Check payload delta
if (
payload?.delta &&
typeof payload.delta === "object" &&
payload.delta !== null
) {
const delta = payload.delta as Record<string, unknown>;
if (typeof delta.text === "string") {
if (containsToolCall(delta.text)) {
isToolCall = true;
}
}
}
}
// Check event delta
if (
event?.delta &&
typeof event.delta === "object" &&
event.delta !== null
) {
const delta = event.delta as Record<string, unknown>;
if (typeof delta.text === "string") {
if (containsToolCall(delta.text)) {
isToolCall = true;
}
}
if (typeof delta.content === "string") {
if (containsToolCall(delta.content)) {
isToolCall = true;
}
}
}
}
// if it's a tool call, skip it (don't display in chat)
if (isToolCall) {
return { text: null, isToolCall: true };
}
// Extract text content from various chunk formats
let text: string | null = null;
// Helper function to extract clean text content, filtering out function calls
const extractCleanText = (content: string): string | null => {
if (containsToolCall(content)) {
try {
// Try to parse and extract non-function call parts
const jsonMatch = content.match(
/\{"type":\s*"function"[^}]*\}[^}]*\}/
);
if (jsonMatch) {
const jsonPart = jsonMatch[0];
const parsedJson = JSON.parse(jsonPart);
// If it's a function call, extract text after JSON
if (parsedJson.type === "function") {
const textAfterJson = content
.substring(content.indexOf(jsonPart) + jsonPart.length)
.trim();
return textAfterJson || null;
}
}
// If we can't parse it properly, skip the whole thing
return null;
} catch {
return null;
}
}
return content;
};
// Try direct delta text
if (
chunkObj?.delta &&
typeof chunkObj.delta === "object" &&
chunkObj.delta !== null
) {
const delta = chunkObj.delta as Record<string, unknown>;
if (typeof delta.text === "string") {
text = extractCleanText(delta.text);
}
}
// Try event structures
if (
!text &&
chunkObj?.event &&
typeof chunkObj.event === "object" &&
chunkObj.event !== null
) {
const event = chunkObj.event as Record<string, unknown>;
// Try event payload content
if (
event?.payload &&
typeof event.payload === "object" &&
event.payload !== null
) {
const payload = event.payload as Record<string, unknown>;
// Try direct payload content
if (typeof payload.content === "string") {
text = extractCleanText(payload.content);
}
// Try turn_complete event structure: payload.turn.output_message.content
if (
!text &&
payload?.turn &&
typeof payload.turn === "object" &&
payload.turn !== null
) {
const turn = payload.turn as Record<string, unknown>;
if (
turn?.output_message &&
typeof turn.output_message === "object" &&
turn.output_message !== null
) {
const outputMessage = turn.output_message as Record<
string,
unknown
>;
if (typeof outputMessage.content === "string") {
text = extractCleanText(outputMessage.content);
}
}
// Fallback to model_response in steps if no output_message
if (
!text &&
turn?.steps &&
Array.isArray(turn.steps) &&
turn.steps.length > 0
) {
for (const step of turn.steps) {
if (step && typeof step === "object" && step !== null) {
const stepObj = step as Record<string, unknown>;
if (
stepObj?.model_response &&
typeof stepObj.model_response === "object" &&
stepObj.model_response !== null
) {
const modelResponse = stepObj.model_response as Record<
string,
unknown
>;
if (typeof modelResponse.content === "string") {
text = extractCleanText(modelResponse.content);
break;
}
}
}
}
}
}
// Try payload delta
if (
!text &&
payload?.delta &&
typeof payload.delta === "object" &&
payload.delta !== null
) {
const delta = payload.delta as Record<string, unknown>;
if (typeof delta.text === "string") {
text = extractCleanText(delta.text);
}
}
}
// Try event delta
if (
!text &&
event?.delta &&
typeof event.delta === "object" &&
event.delta !== null
) {
const delta = event.delta as Record<string, unknown>;
if (typeof delta.text === "string") {
text = extractCleanText(delta.text);
}
if (!text && typeof delta.content === "string") {
text = extractCleanText(delta.content);
}
}
}
// Try choices structure (ChatML format)
if (
!text &&
chunkObj?.choices &&
Array.isArray(chunkObj.choices) &&
chunkObj.choices.length > 0
) {
const choice = chunkObj.choices[0] as Record<string, unknown>;
if (
choice?.delta &&
typeof choice.delta === "object" &&
choice.delta !== null
) {
const delta = choice.delta as Record<string, unknown>;
if (typeof delta.content === "string") {
text = extractCleanText(delta.content);
}
}
}
// Try direct string content
if (!text && typeof chunk === "string") {
text = extractCleanText(chunk);
}
return { text, isToolCall: false };
};
}
describe("Chunk Processor", () => {
const processChunk = createProcessChunk();
describe("Real Event Structures", () => {
test("handles turn_complete event with cancellation policy response", () => {
const chunk = {
event: {
payload: {
event_type: "turn_complete",
turn: {
turn_id: "50a2d6b7-49ed-4d1e-b1c2-6d68b3f726db",
session_id: "e7f62b8e-518c-4450-82df-e65fe49f27a3",
input_messages: [
{
role: "user",
content: "nice, what's the cancellation policy?",
context: null,
},
],
steps: [
{
turn_id: "50a2d6b7-49ed-4d1e-b1c2-6d68b3f726db",
step_id: "54074310-af42-414c-9ffe-fba5b2ead0ad",
started_at: "2025-08-27T18:15:25.870703Z",
completed_at: "2025-08-27T18:15:51.288993Z",
step_type: "inference",
model_response: {
role: "assistant",
content:
"According to the search results, the cancellation policy for Red Hat Summit is as follows:\n\n* Cancellations must be received by 5 PM EDT on April 18, 2025 for a 50% refund of the registration fee.\n* No refunds will be given for cancellations received after 5 PM EDT on April 18, 2025.\n* Cancellation of travel reservations and hotel reservations are the responsibility of the registrant.",
stop_reason: "end_of_turn",
tool_calls: [],
},
},
],
output_message: {
role: "assistant",
content:
"According to the search results, the cancellation policy for Red Hat Summit is as follows:\n\n* Cancellations must be received by 5 PM EDT on April 18, 2025 for a 50% refund of the registration fee.\n* No refunds will be given for cancellations received after 5 PM EDT on April 18, 2025.\n* Cancellation of travel reservations and hotel reservations are the responsibility of the registrant.",
stop_reason: "end_of_turn",
tool_calls: [],
},
output_attachments: [],
started_at: "2025-08-27T18:15:25.868548Z",
completed_at: "2025-08-27T18:15:51.289262Z",
},
},
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toContain(
"According to the search results, the cancellation policy for Red Hat Summit is as follows:"
);
expect(result.text).toContain("5 PM EDT on April 18, 2025");
});
test("handles turn_complete event with address response", () => {
const chunk = {
event: {
payload: {
event_type: "turn_complete",
turn: {
turn_id: "2f4a1520-8ecc-4cb7-bb7b-886939e042b0",
session_id: "e7f62b8e-518c-4450-82df-e65fe49f27a3",
input_messages: [
{
role: "user",
content: "what's francisco's address",
context: null,
},
],
steps: [
{
turn_id: "2f4a1520-8ecc-4cb7-bb7b-886939e042b0",
step_id: "c13dd277-1acb-4419-8fbf-d5e2f45392ea",
started_at: "2025-08-27T18:14:52.558761Z",
completed_at: "2025-08-27T18:15:11.306032Z",
step_type: "inference",
model_response: {
role: "assistant",
content:
"Francisco Arceo's address is:\n\nRed Hat\nUnited States\n17 Primrose Ln \nBasking Ridge New Jersey 07920",
stop_reason: "end_of_turn",
tool_calls: [],
},
},
],
output_message: {
role: "assistant",
content:
"Francisco Arceo's address is:\n\nRed Hat\nUnited States\n17 Primrose Ln \nBasking Ridge New Jersey 07920",
stop_reason: "end_of_turn",
tool_calls: [],
},
output_attachments: [],
started_at: "2025-08-27T18:14:52.553707Z",
completed_at: "2025-08-27T18:15:11.306729Z",
},
},
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toContain("Francisco Arceo's address is:");
expect(result.text).toContain("17 Primrose Ln");
expect(result.text).toContain("Basking Ridge New Jersey 07920");
});
test("handles turn_complete event with ticket cost response", () => {
const chunk = {
event: {
payload: {
event_type: "turn_complete",
turn: {
turn_id: "7ef244a3-efee-42ca-a9c8-942865251002",
session_id: "e7f62b8e-518c-4450-82df-e65fe49f27a3",
input_messages: [
{
role: "user",
content: "what was the ticket cost for summit?",
context: null,
},
],
steps: [
{
turn_id: "7ef244a3-efee-42ca-a9c8-942865251002",
step_id: "7651dda0-315a-472d-b1c1-3c2725f55bc5",
started_at: "2025-08-27T18:14:21.710611Z",
completed_at: "2025-08-27T18:14:39.706452Z",
step_type: "inference",
model_response: {
role: "assistant",
content:
"The ticket cost for the Red Hat Summit was $999.00 for a conference pass.",
stop_reason: "end_of_turn",
tool_calls: [],
},
},
],
output_message: {
role: "assistant",
content:
"The ticket cost for the Red Hat Summit was $999.00 for a conference pass.",
stop_reason: "end_of_turn",
tool_calls: [],
},
output_attachments: [],
started_at: "2025-08-27T18:14:21.705289Z",
completed_at: "2025-08-27T18:14:39.706752Z",
},
},
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe(
"The ticket cost for the Red Hat Summit was $999.00 for a conference pass."
);
});
});
describe("Function Call Detection", () => {
test("detects function calls in direct string chunks", () => {
const chunk =
'{"type": "function", "name": "knowledge_search", "parameters": {"query": "test"}}';
const result = processChunk(chunk);
expect(result.isToolCall).toBe(true);
expect(result.text).toBe(null);
});
test("detects function calls in event payload content", () => {
const chunk = {
event: {
payload: {
content:
'{"type": "function", "name": "knowledge_search", "parameters": {"query": "test"}}',
},
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(true);
expect(result.text).toBe(null);
});
test("detects tool_calls in delta structure", () => {
const chunk = {
delta: {
tool_calls: [{ function: { name: "knowledge_search" } }],
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(true);
expect(result.text).toBe(null);
});
test("detects function call in mixed content but skips it", () => {
const chunk =
'{"type": "function", "name": "knowledge_search", "parameters": {"query": "test"}} Based on the search results, here is your answer.';
const result = processChunk(chunk);
// This is detected as a tool call and skipped entirely - the implementation prioritizes safety
expect(result.isToolCall).toBe(true);
expect(result.text).toBe(null);
});
});
describe("Text Extraction", () => {
test("extracts text from direct string chunks", () => {
const chunk = "Hello, this is a normal response.";
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe("Hello, this is a normal response.");
});
test("extracts text from delta structure", () => {
const chunk = {
delta: {
text: "Hello, this is a normal response.",
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe("Hello, this is a normal response.");
});
test("extracts text from choices structure", () => {
const chunk = {
choices: [
{
delta: {
content: "Hello, this is a normal response.",
},
},
],
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe("Hello, this is a normal response.");
});
test("prioritizes output_message over model_response in turn structure", () => {
const chunk = {
event: {
payload: {
turn: {
steps: [
{
model_response: {
content: "Model response content.",
},
},
],
output_message: {
content: "Final output message content.",
},
},
},
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe("Final output message content.");
});
test("falls back to model_response when no output_message", () => {
const chunk = {
event: {
payload: {
turn: {
steps: [
{
model_response: {
content: "This is from the model response.",
},
},
],
},
},
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe("This is from the model response.");
});
});
describe("Edge Cases", () => {
test("handles empty chunks", () => {
const result = processChunk("");
expect(result.isToolCall).toBe(false);
expect(result.text).toBe("");
});
test("handles null chunks", () => {
const result = processChunk(null);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe(null);
});
test("handles undefined chunks", () => {
const result = processChunk(undefined);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe(null);
});
test("handles chunks with no text content", () => {
const chunk = {
event: {
metadata: {
timestamp: "2024-01-01",
},
},
};
const result = processChunk(chunk);
expect(result.isToolCall).toBe(false);
expect(result.text).toBe(null);
});
test("handles malformed JSON in function calls gracefully", () => {
const chunk =
'{"type": "function", "name": "knowledge_search"} incomplete json';
const result = processChunk(chunk);
expect(result.isToolCall).toBe(true);
expect(result.text).toBe(null);
});
});
});

790
src/llama_stack/ui/app/chat-playground/page.test.tsx
View file

@ -1,790 +0,0 @@
import React from "react";
import {
render,
screen,
fireEvent,
waitFor,
act,
} from "@testing-library/react";
import "@testing-library/jest-dom";
import ChatPlaygroundPage from "./page";
const mockClient = {
agents: {
list: jest.fn(),
create: jest.fn(),
retrieve: jest.fn(),
delete: jest.fn(),
session: {
list: jest.fn(),
create: jest.fn(),
delete: jest.fn(),
retrieve: jest.fn(),
},
turn: {
create: jest.fn(),
},
},
models: {
list: jest.fn(),
},
toolgroups: {
list: jest.fn(),
},
vectorDBs: {
list: jest.fn(),
},
};
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: jest.fn(() => mockClient),
}));
jest.mock("@/components/chat-playground/chat", () => ({
Chat: jest.fn(
({
className,
messages,
handleSubmit,
input,
handleInputChange,
isGenerating,
append,
suggestions,
}) => (
<div data-testid="chat-component" className={className}>
<div data-testid="messages-count">{messages.length}</div>
<input
data-testid="chat-input"
value={input}
onChange={handleInputChange}
disabled={isGenerating}
/>
<button data-testid="submit-button" onClick={handleSubmit}>
Submit
</button>
{suggestions?.map((suggestion: string, index: number) => (
<button
key={index}
data-testid={`suggestion-${index}`}
onClick={() => append({ role: "user", content: suggestion })}
>
{suggestion}
</button>
))}
</div>
)
),
}));
jest.mock("@/components/chat-playground/conversations", () => ({
SessionManager: jest.fn(({ selectedAgentId, onNewSession }) => (
<div data-testid="session-manager">
{selectedAgentId && (
<>
<div data-testid="selected-agent">{selectedAgentId}</div>
<button data-testid="new-session-button" onClick={onNewSession}>
New Session
</button>
</>
)}
</div>
)),
SessionUtils: {
saveCurrentSessionId: jest.fn(),
loadCurrentSessionId: jest.fn(),
loadCurrentAgentId: jest.fn(),
saveCurrentAgentId: jest.fn(),
clearCurrentSession: jest.fn(),
saveSessionData: jest.fn(),
loadSessionData: jest.fn(),
saveAgentConfig: jest.fn(),
loadAgentConfig: jest.fn(),
clearAgentCache: jest.fn(),
createDefaultSession: jest.fn(() => ({
id: "test-session-123",
name: "Default Session",
messages: [],
selectedModel: "",
systemMessage: "You are a helpful assistant.",
agentId: "test-agent-123",
createdAt: Date.now(),
updatedAt: Date.now(),
})),
},
}));
const mockAgents = [
{
agent_id: "agent_123",
agent_config: {
name: "Test Agent",
instructions: "You are a test assistant.",
},
},
{
agent_id: "agent_456",
agent_config: {
agent_name: "Another Agent",
instructions: "You are another assistant.",
},
},
];
const mockModels = [
{
identifier: "test-model-1",
model_type: "llm",
},
{
identifier: "test-model-2",
model_type: "llm",
},
];
const mockToolgroups = [
{
identifier: "builtin::rag",
provider_id: "test-provider",
type: "tool_group",
provider_resource_id: "test-resource",
},
];
describe("ChatPlaygroundPage", () => {
beforeEach(() => {
jest.clearAllMocks();
Element.prototype.scrollIntoView = jest.fn();
mockClient.agents.list.mockResolvedValue({ data: mockAgents });
mockClient.models.list.mockResolvedValue(mockModels);
mockClient.toolgroups.list.mockResolvedValue(mockToolgroups);
mockClient.agents.session.create.mockResolvedValue({
session_id: "new-session-123",
});
mockClient.agents.session.list.mockResolvedValue({ data: [] });
mockClient.agents.session.retrieve.mockResolvedValue({
session_id: "test-session",
session_name: "Test Session",
started_at: new Date().toISOString(),
turns: [],
});
mockClient.agents.retrieve.mockResolvedValue({
agent_id: "test-agent",
agent_config: {
toolgroups: ["builtin::rag"],
instructions: "Test instructions",
model: "test-model",
},
});
mockClient.agents.delete.mockResolvedValue(undefined);
});
describe("Agent Selector Rendering", () => {
test("shows agent selector when agents are available", async () => {
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.getByText("Agent Session:")).toBeInTheDocument();
expect(screen.getAllByRole("combobox")).toHaveLength(2);
expect(screen.getByText("+ New Agent")).toBeInTheDocument();
expect(screen.getByText("Clear Chat")).toBeInTheDocument();
});
});
test("does not show agent selector when no agents are available", async () => {
mockClient.agents.list.mockResolvedValue({ data: [] });
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.queryByText("Agent Session:")).not.toBeInTheDocument();
expect(screen.getAllByRole("combobox")).toHaveLength(1);
expect(screen.getByText("+ New Agent")).toBeInTheDocument();
expect(screen.queryByText("Clear Chat")).not.toBeInTheDocument();
});
});
test("does not show agent selector while loading", async () => {
mockClient.agents.list.mockImplementation(() => new Promise(() => {}));
await act(async () => {
render(<ChatPlaygroundPage />);
});
expect(screen.queryByText("Agent Session:")).not.toBeInTheDocument();
expect(screen.getAllByRole("combobox")).toHaveLength(1);
expect(screen.getByText("+ New Agent")).toBeInTheDocument();
expect(screen.queryByText("Clear Chat")).not.toBeInTheDocument();
});
test("shows agent options in selector", async () => {
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
const agentCombobox = screen.getAllByRole("combobox").find(element => {
return (
element.textContent?.includes("Test Agent") ||
element.textContent?.includes("Select Agent")
);
});
expect(agentCombobox).toBeDefined();
fireEvent.click(agentCombobox!);
});
await waitFor(() => {
expect(screen.getAllByText("Test Agent")).toHaveLength(2);
expect(screen.getByText("Another Agent")).toBeInTheDocument();
});
});
test("displays agent ID when no name is available", async () => {
const agentWithoutName = {
agent_id: "agent_789",
agent_config: {
instructions: "You are an agent without a name.",
},
};
mockClient.agents.list.mockResolvedValue({ data: [agentWithoutName] });
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
const agentCombobox = screen.getAllByRole("combobox").find(element => {
return (
element.textContent?.includes("Agent agent_78") ||
element.textContent?.includes("Select Agent")
);
});
expect(agentCombobox).toBeDefined();
fireEvent.click(agentCombobox!);
});
await waitFor(() => {
expect(screen.getAllByText("Agent agent_78...")).toHaveLength(2);
});
});
});
describe("Agent Creation Modal", () => {
test("opens agent creation modal when + New Agent is clicked", async () => {
await act(async () => {
render(<ChatPlaygroundPage />);
});
const newAgentButton = screen.getByText("+ New Agent");
fireEvent.click(newAgentButton);
expect(screen.getByText("Create New Agent")).toBeInTheDocument();
expect(screen.getByText("Agent Name (optional)")).toBeInTheDocument();
expect(screen.getAllByText("Model")).toHaveLength(2);
expect(screen.getByText("System Instructions")).toBeInTheDocument();
expect(screen.getByText("Tools (optional)")).toBeInTheDocument();
});
test("closes modal when Cancel is clicked", async () => {
await act(async () => {
render(<ChatPlaygroundPage />);
});
const newAgentButton = screen.getByText("+ New Agent");
fireEvent.click(newAgentButton);
const cancelButton = screen.getByText("Cancel");
fireEvent.click(cancelButton);
expect(screen.queryByText("Create New Agent")).not.toBeInTheDocument();
});
test("creates agent when Create Agent is clicked", async () => {
mockClient.agents.create.mockResolvedValue({ agent_id: "new-agent-123" });
mockClient.agents.list
.mockResolvedValueOnce({ data: mockAgents })
.mockResolvedValueOnce({
data: [
...mockAgents,
{ agent_id: "new-agent-123", agent_config: { name: "New Agent" } },
],
});
await act(async () => {
render(<ChatPlaygroundPage />);
});
const newAgentButton = screen.getByText("+ New Agent");
await act(async () => {
fireEvent.click(newAgentButton);
});
await waitFor(() => {
expect(screen.getByText("Create New Agent")).toBeInTheDocument();
});
const nameInput = screen.getByPlaceholderText("My Custom Agent");
await act(async () => {
fireEvent.change(nameInput, { target: { value: "Test Agent Name" } });
});
const instructionsTextarea = screen.getByDisplayValue(
"You are a helpful assistant."
);
await act(async () => {
fireEvent.change(instructionsTextarea, {
target: { value: "Custom instructions" },
});
});
await waitFor(() => {
const modalModelSelectors = screen
.getAllByRole("combobox")
.filter(el => {
return (
el.textContent?.includes("Select Model") ||
el.closest('[class*="modal"]') ||
el.closest('[class*="card"]')
);
});
expect(modalModelSelectors.length).toBeGreaterThan(0);
});
const modalModelSelectors = screen.getAllByRole("combobox").filter(el => {
return (
el.textContent?.includes("Select Model") ||
el.closest('[class*="modal"]') ||
el.closest('[class*="card"]')
);
});
await act(async () => {
fireEvent.click(modalModelSelectors[0]);
});
await waitFor(() => {
const modelOptions = screen.getAllByText("test-model-1");
expect(modelOptions.length).toBeGreaterThan(0);
});
const modelOptions = screen.getAllByText("test-model-1");
const dropdownOption = modelOptions.find(
option =>
option.closest('[role="option"]') ||
option.id?.includes("radix") ||
option.getAttribute("aria-selected") !== null
);
await act(async () => {
fireEvent.click(
dropdownOption || modelOptions[modelOptions.length - 1]
);
});
await waitFor(() => {
const createButton = screen.getByText("Create Agent");
expect(createButton).not.toBeDisabled();
});
const createButton = screen.getByText("Create Agent");
await act(async () => {
fireEvent.click(createButton);
});
await waitFor(() => {
expect(mockClient.agents.create).toHaveBeenCalledWith({
agent_config: {
model: expect.any(String),
instructions: "Custom instructions",
name: "Test Agent Name",
enable_session_persistence: true,
},
});
});
await waitFor(() => {
expect(screen.queryByText("Create New Agent")).not.toBeInTheDocument();
});
});
});
describe("Agent Selection", () => {
test("creates default session when agent is selected", async () => {
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(mockClient.agents.session.create).toHaveBeenCalledWith(
"agent_123",
{ session_name: "Default Session" }
);
});
});
test("switches agent when different agent is selected", async () => {
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
const agentCombobox = screen.getAllByRole("combobox").find(element => {
return (
element.textContent?.includes("Test Agent") ||
element.textContent?.includes("Select Agent")
);
});
expect(agentCombobox).toBeDefined();
fireEvent.click(agentCombobox!);
});
await waitFor(() => {
const anotherAgentOption = screen.getByText("Another Agent");
fireEvent.click(anotherAgentOption);
});
expect(mockClient.agents.session.create).toHaveBeenCalledWith(
"agent_456",
{ session_name: "Default Session" }
);
});
});
describe("Agent Deletion", () => {
test("shows delete button when multiple agents exist", async () => {
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.getByTitle("Delete current agent")).toBeInTheDocument();
});
});
test("shows delete button even when only one agent exists", async () => {
mockClient.agents.list.mockResolvedValue({
data: [mockAgents[0]],
});
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.getByTitle("Delete current agent")).toBeInTheDocument();
});
});
test("deletes agent and switches to another when confirmed", async () => {
global.confirm = jest.fn(() => true);
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.getByTitle("Delete current agent")).toBeInTheDocument();
});
mockClient.agents.delete.mockResolvedValue(undefined);
mockClient.agents.list.mockResolvedValueOnce({ data: mockAgents });
mockClient.agents.list.mockResolvedValueOnce({
data: [mockAgents[1]],
});
const deleteButton = screen.getByTitle("Delete current agent");
await act(async () => {
deleteButton.click();
});
await waitFor(() => {
expect(mockClient.agents.delete).toHaveBeenCalledWith("agent_123");
expect(global.confirm).toHaveBeenCalledWith(
"Are you sure you want to delete this agent? This action cannot be undone and will delete the agent and all its sessions."
);
});
(global.confirm as jest.Mock).mockRestore();
});
test("does not delete agent when cancelled", async () => {
global.confirm = jest.fn(() => false);
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.getByTitle("Delete current agent")).toBeInTheDocument();
});
const deleteButton = screen.getByTitle("Delete current agent");
await act(async () => {
deleteButton.click();
});
await waitFor(() => {
expect(global.confirm).toHaveBeenCalled();
expect(mockClient.agents.delete).not.toHaveBeenCalled();
});
(global.confirm as jest.Mock).mockRestore();
});
});
describe("Error Handling", () => {
test("handles agent loading errors gracefully", async () => {
mockClient.agents.list.mockRejectedValue(
new Error("Failed to load agents")
);
const consoleSpy = jest
.spyOn(console, "error")
.mockImplementation(() => {});
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(consoleSpy).toHaveBeenCalledWith(
"Error fetching agents:",
expect.any(Error)
);
});
expect(screen.getByText("+ New Agent")).toBeInTheDocument();
consoleSpy.mockRestore();
});
test("handles model loading errors gracefully", async () => {
mockClient.models.list.mockRejectedValue(
new Error("Failed to load models")
);
const consoleSpy = jest
.spyOn(console, "error")
.mockImplementation(() => {});
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(consoleSpy).toHaveBeenCalledWith(
"Error fetching models:",
expect.any(Error)
);
});
consoleSpy.mockRestore();
});
});
describe("RAG File Upload", () => {
let mockFileReader: {
readAsDataURL: jest.Mock;
readAsText: jest.Mock;
result: string | null;
onload: (() => void) | null;
onerror: (() => void) | null;
};
let mockRAGTool: {
insert: jest.Mock;
};
beforeEach(() => {
mockFileReader = {
readAsDataURL: jest.fn(),
readAsText: jest.fn(),
result: null,
onload: null,
onerror: null,
};
global.FileReader = jest.fn(() => mockFileReader);
mockRAGTool = {
insert: jest.fn().mockResolvedValue({}),
};
mockClient.toolRuntime = {
ragTool: mockRAGTool,
};
});
afterEach(() => {
jest.clearAllMocks();
});
test("handles text file upload", async () => {
new File(["Hello, world!"], "test.txt", {
type: "text/plain",
});
mockClient.agents.retrieve.mockResolvedValue({
agent_id: "test-agent",
agent_config: {
toolgroups: [
{
name: "builtin::rag/knowledge_search",
args: { vector_db_ids: ["test-vector-db"] },
},
],
},
});
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.getByTestId("chat-component")).toBeInTheDocument();
});
const chatComponent = screen.getByTestId("chat-component");
chatComponent.getAttribute("data-onragfileupload");
// this is a simplified test
expect(mockRAGTool.insert).not.toHaveBeenCalled();
});
test("handles PDF file upload with FileReader", async () => {
new File([new ArrayBuffer(1000)], "test.pdf", {
type: "application/pdf",
});
const mockDataURL = "data:application/pdf;base64,JVBERi0xLjQK";
mockFileReader.result = mockDataURL;
mockClient.agents.retrieve.mockResolvedValue({
agent_id: "test-agent",
agent_config: {
toolgroups: [
{
name: "builtin::rag/knowledge_search",
args: { vector_db_ids: ["test-vector-db"] },
},
],
},
});
await act(async () => {
render(<ChatPlaygroundPage />);
});
await waitFor(() => {
expect(screen.getByTestId("chat-component")).toBeInTheDocument();
});
expect(global.FileReader).toBeDefined();
});
test("handles different file types correctly", () => {
const getContentType = (filename: string): string => {
const ext = filename.toLowerCase().split(".").pop();
switch (ext) {
case "pdf":
return "application/pdf";
case "txt":
return "text/plain";
case "md":
return "text/markdown";
case "html":
return "text/html";
case "csv":
return "text/csv";
case "json":
return "application/json";
case "docx":
return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
case "doc":
return "application/msword";
default:
return "application/octet-stream";
}
};
expect(getContentType("test.pdf")).toBe("application/pdf");
expect(getContentType("test.txt")).toBe("text/plain");
expect(getContentType("test.md")).toBe("text/markdown");
expect(getContentType("test.html")).toBe("text/html");
expect(getContentType("test.csv")).toBe("text/csv");
expect(getContentType("test.json")).toBe("application/json");
expect(getContentType("test.docx")).toBe(
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
);
expect(getContentType("test.doc")).toBe("application/msword");
expect(getContentType("test.unknown")).toBe("application/octet-stream");
});
test("determines text vs binary file types correctly", () => {
const isTextFile = (mimeType: string): boolean => {
return (
mimeType.startsWith("text/") ||
mimeType === "application/json" ||
mimeType === "text/markdown" ||
mimeType === "text/html" ||
mimeType === "text/csv"
);
};
expect(isTextFile("text/plain")).toBe(true);
expect(isTextFile("text/markdown")).toBe(true);
expect(isTextFile("text/html")).toBe(true);
expect(isTextFile("text/csv")).toBe(true);
expect(isTextFile("application/json")).toBe(true);
expect(isTextFile("application/pdf")).toBe(false);
expect(isTextFile("application/msword")).toBe(false);
expect(
isTextFile(
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
)
).toBe(false);
expect(isTextFile("application/octet-stream")).toBe(false);
});
test("handles FileReader error gracefully", async () => {
const pdfFile = new File([new ArrayBuffer(1000)], "test.pdf", {
type: "application/pdf",
});
mockFileReader.onerror = jest.fn();
const mockError = new Error("FileReader failed");
const fileReaderPromise = new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result as string);
reader.onerror = () => reject(reader.error || mockError);
reader.readAsDataURL(pdfFile);
setTimeout(() => {
reader.onerror?.(new ProgressEvent("error"));
}, 0);
});
await expect(fileReaderPromise).rejects.toBeDefined();
});
test("handles large file upload with FileReader approach", () => {
// create a large file
const largeFile = new File(
[new ArrayBuffer(10 * 1024 * 1024)],
"large.pdf",
{
type: "application/pdf",
}
);
expect(largeFile.size).toBe(10 * 1024 * 1024); // 10MB
expect(global.FileReader).toBeDefined();
const reader = new FileReader();
expect(reader.readAsDataURL).toBeDefined();
});
});
});

1893
src/llama_stack/ui/app/chat-playground/page.tsx
View file

File diff suppressed because it is too large Load diff

163
src/llama_stack/ui/app/globals.css
View file

@ -1,163 +0,0 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
@layer utilities {
.animate-typing-dot-1 {
animation: typing-dot-bounce-1 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-typing-dot-2 {
animation: typing-dot-bounce-2 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-typing-dot-3 {
animation: typing-dot-bounce-3 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes typing-dot-bounce-1 {
0%, 15%, 85%, 100% {
transform: translateY(0);
}
7.5% {
transform: translateY(-6px);
}
}
@keyframes typing-dot-bounce-2 {
0%, 15%, 35%, 85%, 100% {
transform: translateY(0);
}
25% {
transform: translateY(-6px);
}
}
@keyframes typing-dot-bounce-3 {
0%, 35%, 55%, 85%, 100% {
transform: translateY(0);
}
45% {
transform: translateY(-6px);
}
}
}

63
src/llama_stack/ui/app/layout.tsx
View file

@ -1,63 +0,0 @@
import type { Metadata } from "next";
import { ThemeProvider } from "@/components/ui/theme-provider";
import { SessionProvider } from "@/components/providers/session-provider";
import { Geist, Geist_Mono } from "next/font/google";
import { ModeToggle } from "@/components/ui/mode-toggle";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Llama Stack",
description: "Llama Stack UI",
icons: {
icon: "/favicon.ico",
},
};
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/layout/app-sidebar";
import { SignInButton } from "@/components/ui/sign-in-button";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${geistSans.variable} ${geistMono.variable} font-sans`}>
<SessionProvider>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<SidebarProvider>
<AppSidebar />
<main className="flex flex-col flex-1">
{/* Header with aligned elements */}
<div className="flex items-center p-4 border-b">
<div className="flex-none">
<SidebarTrigger />
</div>
<div className="flex-1 text-center"></div>
<div className="flex-none flex items-center gap-2">
<SignInButton />
<ModeToggle />
</div>
</div>
<div className="flex flex-col flex-1 p-4">{children}</div>
</main>
</SidebarProvider>
</ThemeProvider>
</SessionProvider>
</body>
</html>
);
}

59
src/llama_stack/ui/app/logs/chat-completions/[id]/page.tsx
View file

@ -1,59 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { ChatCompletion } from "@/lib/types";
import { ChatCompletionDetailView } from "@/components/chat-completions/chat-completion-detail";
import { useAuthClient } from "@/hooks/use-auth-client";
export default function ChatCompletionDetailPage() {
const params = useParams();
const id = params.id as string;
const client = useAuthClient();
const [completionDetail, setCompletionDetail] =
useState<ChatCompletion | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
if (!id) {
setError(new Error("Completion ID is missing."));
setIsLoading(false);
return;
}
const fetchCompletionDetail = async () => {
setIsLoading(true);
setError(null);
setCompletionDetail(null);
try {
const response = await client.chat.completions.retrieve(id);
setCompletionDetail(response as ChatCompletion);
} catch (err) {
console.error(
`Error fetching chat completion detail for ID ${id}:`,
err
);
setError(
err instanceof Error
? err
: new Error("Failed to fetch completion detail")
);
} finally {
setIsLoading(false);
}
};
fetchCompletionDetail();
}, [id, client]);
return (
<ChatCompletionDetailView
completion={completionDetail}
isLoading={isLoading}
error={error}
id={id}
/>
);
}

19
src/llama_stack/ui/app/logs/chat-completions/layout.tsx
View file

@ -1,19 +0,0 @@
"use client";
import React from "react";
import LogsLayout from "@/components/layout/logs-layout";
export default function ChatCompletionsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<LogsLayout
sectionLabel="Chat Completions"
basePath="/logs/chat-completions"
>
{children}
</LogsLayout>
);
}

7
src/llama_stack/ui/app/logs/chat-completions/page.tsx
View file

@ -1,7 +0,0 @@
"use client";
import { ChatCompletionsTable } from "@/components/chat-completions/chat-completions-table";
export default function ChatCompletionsPage() {
return <ChatCompletionsTable paginationOptions={{ limit: 20 }} />;
}

125
src/llama_stack/ui/app/logs/responses/[id]/page.tsx
View file

@ -1,125 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import type { ResponseObject } from "llama-stack-client/resources/responses/responses";
import { OpenAIResponse, InputItemListResponse } from "@/lib/types";
import { ResponseDetailView } from "@/components/responses/responses-detail";
import { useAuthClient } from "@/hooks/use-auth-client";
export default function ResponseDetailPage() {
const params = useParams();
const id = params.id as string;
const client = useAuthClient();
const [responseDetail, setResponseDetail] = useState<OpenAIResponse | null>(
null
);
const [inputItems, setInputItems] = useState<InputItemListResponse | null>(
null
);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [isLoadingInputItems, setIsLoadingInputItems] = useState<boolean>(true);
const [error, setError] = useState<Error | null>(null);
const [inputItemsError, setInputItemsError] = useState<Error | null>(null);
// Helper function to convert ResponseObject to OpenAIResponse
const convertResponseObject = (
responseData: ResponseObject
): OpenAIResponse => {
return {
id: responseData.id,
created_at: responseData.created_at,
model: responseData.model,
object: responseData.object,
status: responseData.status,
output: responseData.output as OpenAIResponse["output"],
input: [], // ResponseObject doesn't include input; component uses inputItems prop instead
error: responseData.error,
parallel_tool_calls: responseData.parallel_tool_calls,
previous_response_id: responseData.previous_response_id,
temperature: responseData.temperature,
top_p: responseData.top_p,
truncation: responseData.truncation,
};
};
useEffect(() => {
if (!id) {
setError(new Error("Response ID is missing."));
setIsLoading(false);
return;
}
const fetchResponseDetail = async () => {
setIsLoading(true);
setIsLoadingInputItems(true);
setError(null);
setInputItemsError(null);
setResponseDetail(null);
setInputItems(null);
try {
const [responseResult, inputItemsResult] = await Promise.allSettled([
client.responses.retrieve(id),
client.responses.inputItems.list(id, { order: "asc" }),
]);
// Handle response detail result
if (responseResult.status === "fulfilled") {
const convertedResponse = convertResponseObject(responseResult.value);
setResponseDetail(convertedResponse);
} else {
console.error(
`Error fetching response detail for ID ${id}:`,
responseResult.reason
);
setError(
responseResult.reason instanceof Error
? responseResult.reason
: new Error("Failed to fetch response detail")
);
}
// Handle input items result
if (inputItemsResult.status === "fulfilled") {
const inputItemsData =
inputItemsResult.value as unknown as InputItemListResponse;
setInputItems(inputItemsData);
} else {
console.error(
`Error fetching input items for response ID ${id}:`,
inputItemsResult.reason
);
setInputItemsError(
inputItemsResult.reason instanceof Error
? inputItemsResult.reason
: new Error("Failed to fetch input items")
);
}
} catch (err) {
console.error(`Unexpected error fetching data for ID ${id}:`, err);
setError(
err instanceof Error ? err : new Error("Unexpected error occurred")
);
} finally {
setIsLoading(false);
setIsLoadingInputItems(false);
}
};
fetchResponseDetail();
}, [id, client]);
return (
<ResponseDetailView
response={responseDetail}
inputItems={inputItems}
isLoading={isLoading}
isLoadingInputItems={isLoadingInputItems}
error={error}
inputItemsError={inputItemsError}
id={id}
/>
);
}

16
src/llama_stack/ui/app/logs/responses/layout.tsx
View file

@ -1,16 +0,0 @@
"use client";
import React from "react";
import LogsLayout from "@/components/layout/logs-layout";
export default function ResponsesLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<LogsLayout sectionLabel="Responses" basePath="/logs/responses">
{children}
</LogsLayout>
);
}

7
src/llama_stack/ui/app/logs/responses/page.tsx
View file

@ -1,7 +0,0 @@
"use client";
import { ResponsesTable } from "@/components/responses/responses-table";
export default function ResponsesPage() {
return <ResponsesTable paginationOptions={{ limit: 20 }} />;
}

425
src/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/[contentId]/page.test.tsx
View file

@ -1,425 +0,0 @@
import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import ContentDetailPage from "./page";
import { VectorStoreContentItem } from "@/lib/contents-api";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
const mockPush = jest.fn();
const mockParams = {
id: "vs_123",
fileId: "file_456",
contentId: "content_789",
};
jest.mock("next/navigation", () => ({
useParams: () => mockParams,
useRouter: () => ({
push: mockPush,
}),
}));
const mockClient = {
vectorStores: {
retrieve: jest.fn(),
files: {
retrieve: jest.fn(),
},
},
};
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: () => mockClient,
}));
const mockContentsAPI = {
listContents: jest.fn(),
updateContent: jest.fn(),
deleteContent: jest.fn(),
};
jest.mock("@/lib/contents-api", () => ({
ContentsAPI: jest.fn(() => mockContentsAPI),
}));
const originalConfirm = window.confirm;
describe("ContentDetailPage", () => {
const mockStore: VectorStore = {
id: "vs_123",
name: "Test Vector Store",
created_at: 1710000000,
status: "ready",
file_counts: { total: 5 },
usage_bytes: 1024,
metadata: {
provider_id: "test_provider",
},
};
const mockFile: VectorStoreFile = {
id: "file_456",
status: "completed",
created_at: 1710001000,
usage_bytes: 512,
chunking_strategy: { type: "fixed_size" },
};
const mockContent: VectorStoreContentItem = {
id: "content_789",
object: "vector_store.content",
content: "This is test content for the vector store.",
embedding: [0.1, 0.2, 0.3, 0.4, 0.5],
metadata: {
chunk_window: "0-45",
content_length: 45,
custom_field: "custom_value",
},
created_timestamp: 1710002000,
};
beforeEach(() => {
jest.clearAllMocks();
window.confirm = jest.fn();
mockClient.vectorStores.retrieve.mockResolvedValue(mockStore);
mockClient.vectorStores.files.retrieve.mockResolvedValue(mockFile);
mockContentsAPI.listContents.mockResolvedValue({
data: [mockContent],
});
});
afterEach(() => {
window.confirm = originalConfirm;
});
describe("Loading and Error States", () => {
test("renders loading skeleton while fetching data", () => {
mockClient.vectorStores.retrieve.mockImplementation(
() => new Promise(() => {})
);
const { container } = render(<ContentDetailPage />);
const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
test("renders error message when API calls fail", async () => {
const error = new Error("Network error");
mockClient.vectorStores.retrieve.mockRejectedValue(error);
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText(/Error loading details for ID content_789/)
).toBeInTheDocument();
expect(screen.getByText(/Network error/)).toBeInTheDocument();
});
});
test("renders not found when content doesn't exist", async () => {
mockContentsAPI.listContents.mockResolvedValue({
data: [],
});
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText(/Content content_789 not found/)
).toBeInTheDocument();
});
});
});
describe("Content Display", () => {
test("renders content details correctly", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
expect(screen.getByText("Content: content_789")).toBeInTheDocument();
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
});
const contentIdTexts = screen.getAllByText("content_789");
expect(contentIdTexts.length).toBeGreaterThan(0);
const fileIdTexts = screen.getAllByText("file_456");
expect(fileIdTexts.length).toBeGreaterThan(0);
const storeIdTexts = screen.getAllByText("vs_123");
expect(storeIdTexts.length).toBeGreaterThan(0);
expect(screen.getByText("vector_store.content")).toBeInTheDocument();
const positionTexts = screen.getAllByText("0-45");
expect(positionTexts.length).toBeGreaterThan(0);
});
test("renders embedding information when available", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText(/0.100000, 0.200000, 0.300000/)
).toBeInTheDocument();
});
});
test("handles content without embedding", async () => {
const contentWithoutEmbedding = {
...mockContent,
embedding: undefined,
};
mockContentsAPI.listContents.mockResolvedValue({
data: [contentWithoutEmbedding],
});
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText("No embedding available for this content.")
).toBeInTheDocument();
});
});
test("renders metadata correctly", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
expect(screen.getByText("chunk_window:")).toBeInTheDocument();
const positionTexts = screen.getAllByText("0-45");
expect(positionTexts.length).toBeGreaterThan(0);
expect(screen.getByText("content_length:")).toBeInTheDocument();
expect(screen.getByText("custom_field:")).toBeInTheDocument();
expect(screen.getByText("custom_value")).toBeInTheDocument();
});
});
});
describe("Edit Functionality", () => {
test("enables edit mode when edit button is clicked", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
});
const editButtons = screen.getAllByRole("button", { name: /Edit/ });
const editButton = editButtons[0];
fireEvent.click(editButton);
expect(
screen.getByDisplayValue("This is test content for the vector store.")
).toBeInTheDocument();
expect(screen.getByRole("button", { name: /Save/ })).toBeInTheDocument();
expect(
screen.getByRole("button", { name: /Cancel/ })
).toBeInTheDocument();
});
test("cancels edit mode and resets content", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
});
const editButtons = screen.getAllByRole("button", { name: /Edit/ });
const editButton = editButtons[0];
fireEvent.click(editButton);
const textarea = screen.getByDisplayValue(
"This is test content for the vector store."
);
fireEvent.change(textarea, { target: { value: "Modified content" } });
const cancelButton = screen.getByRole("button", { name: /Cancel/ });
fireEvent.click(cancelButton);
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
expect(
screen.queryByDisplayValue("Modified content")
).not.toBeInTheDocument();
});
test("saves content changes", async () => {
const updatedContent = { ...mockContent, content: "Updated content" };
mockContentsAPI.updateContent.mockResolvedValue(updatedContent);
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
});
const editButtons = screen.getAllByRole("button", { name: /Edit/ });
const editButton = editButtons[0];
fireEvent.click(editButton);
const textarea = screen.getByDisplayValue(
"This is test content for the vector store."
);
fireEvent.change(textarea, { target: { value: "Updated content" } });
const saveButton = screen.getByRole("button", { name: /Save/ });
fireEvent.click(saveButton);
await waitFor(() => {
expect(mockContentsAPI.updateContent).toHaveBeenCalledWith(
"vs_123",
"file_456",
"content_789",
{ content: "Updated content" }
);
});
});
});
describe("Delete Functionality", () => {
test("shows confirmation dialog before deleting", async () => {
window.confirm = jest.fn().mockReturnValue(false);
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
});
const deleteButton = screen.getByRole("button", { name: /Delete/ });
fireEvent.click(deleteButton);
expect(window.confirm).toHaveBeenCalledWith(
"Are you sure you want to delete this content?"
);
expect(mockContentsAPI.deleteContent).not.toHaveBeenCalled();
});
test("deletes content when confirmed", async () => {
window.confirm = jest.fn().mockReturnValue(true);
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
});
const deleteButton = screen.getByRole("button", { name: /Delete/ });
fireEvent.click(deleteButton);
await waitFor(() => {
expect(mockContentsAPI.deleteContent).toHaveBeenCalledWith(
"vs_123",
"file_456",
"content_789"
);
expect(mockPush).toHaveBeenCalledWith(
"/logs/vector-stores/vs_123/files/file_456/contents"
);
});
});
});
describe("Embedding Edit Functionality", () => {
test("enables embedding edit mode", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
expect(
screen.getByText("This is test content for the vector store.")
).toBeInTheDocument();
});
const embeddingEditButtons = screen.getAllByRole("button", {
name: /Edit/,
});
expect(embeddingEditButtons.length).toBeGreaterThanOrEqual(1);
});
test.skip("cancels embedding edit mode", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
// skip vector text check, just verify test completes
});
const embeddingEditButtons = screen.getAllByRole("button", {
name: /Edit/,
});
const embeddingEditButton = embeddingEditButtons[1];
fireEvent.click(embeddingEditButton);
const cancelButtons = screen.getAllByRole("button", { name: /Cancel/ });
expect(cancelButtons.length).toBeGreaterThan(0);
expect(
screen.queryByDisplayValue(/0.1,0.2,0.3,0.4,0.5/)
).not.toBeInTheDocument();
});
});
describe("Breadcrumb Navigation", () => {
test("renders correct breadcrumb structure", async () => {
render(<ContentDetailPage />);
await waitFor(() => {
const vectorStoreTexts = screen.getAllByText("Vector Stores");
expect(vectorStoreTexts.length).toBeGreaterThan(0);
const storeNameTexts = screen.getAllByText("Test Vector Store");
expect(storeNameTexts.length).toBeGreaterThan(0);
const contentsTexts = screen.getAllByText("Contents");
expect(contentsTexts.length).toBeGreaterThan(0);
});
});
});
describe("Content Utilities", () => {
test("handles different content types correctly", async () => {
const contentWithObjectType = {
...mockContent,
content: { type: "text", text: "Text object content" },
};
mockContentsAPI.listContents.mockResolvedValue({
data: [contentWithObjectType],
});
render(<ContentDetailPage />);
await waitFor(() => {
expect(screen.getByText("Text object content")).toBeInTheDocument();
});
});
test("handles string content type", async () => {
const contentWithStringType = {
...mockContent,
content: "Simple string content",
};
mockContentsAPI.listContents.mockResolvedValue({
data: [contentWithStringType],
});
render(<ContentDetailPage />);
await waitFor(() => {
expect(screen.getByText("Simple string content")).toBeInTheDocument();
});
});
});
});

430
src/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/[contentId]/page.tsx
View file

@ -1,430 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useAuthClient } from "@/hooks/use-auth-client";
import { ContentsAPI, VectorStoreContentItem } from "@/lib/contents-api";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Edit, Save, X, Trash2 } from "lucide-react";
import {
DetailLoadingView,
DetailErrorView,
DetailNotFoundView,
DetailLayout,
PropertiesCard,
PropertyItem,
} from "@/components/layout/detail-layout";
import {
PageBreadcrumb,
BreadcrumbSegment,
} from "@/components/layout/page-breadcrumb";
export default function ContentDetailPage() {
const params = useParams();
const router = useRouter();
const vectorStoreId = params.id as string;
const fileId = params.fileId as string;
const contentId = params.contentId as string;
const client = useAuthClient();
const getTextFromContent = (content: unknown): string => {
if (typeof content === "string") {
return content;
} else if (content && content.type === "text") {
return content.text;
}
return "";
};
const [store, setStore] = useState<VectorStore | null>(null);
const [file, setFile] = useState<VectorStoreFile | null>(null);
const [content, setContent] = useState<VectorStoreContentItem | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
const [isEditing, setIsEditing] = useState(false);
const [editedContent, setEditedContent] = useState("");
const [editedMetadata, setEditedMetadata] = useState<Record<string, unknown>>(
{}
);
const [isEditingEmbedding, setIsEditingEmbedding] = useState(false);
const [editedEmbedding, setEditedEmbedding] = useState<number[]>([]);
useEffect(() => {
if (!vectorStoreId || !fileId || !contentId) return;
const fetchData = async () => {
setIsLoading(true);
setError(null);
try {
const [storeResponse, fileResponse] = await Promise.all([
client.vectorStores.retrieve(vectorStoreId),
client.vectorStores.files.retrieve(vectorStoreId, fileId),
]);
setStore(storeResponse as VectorStore);
setFile(fileResponse as VectorStoreFile);
const contentsAPI = new ContentsAPI(client);
const contentsResponse = await contentsAPI.listContents(
vectorStoreId,
fileId
);
const targetContent = contentsResponse.data.find(
c => c.id === contentId
);
if (targetContent) {
setContent(targetContent);
setEditedContent(getTextFromContent(targetContent.content));
setEditedMetadata({ ...targetContent.metadata });
setEditedEmbedding(targetContent.embedding || []);
} else {
throw new Error(`Content ${contentId} not found`);
}
} catch (err) {
setError(
err instanceof Error ? err : new Error("Failed to load content.")
);
} finally {
setIsLoading(false);
}
};
fetchData();
}, [vectorStoreId, fileId, contentId, client]);
const handleSave = async () => {
if (!content) return;
try {
const updates: { content?: string; metadata?: Record<string, unknown> } =
{};
if (editedContent !== getTextFromContent(content.content)) {
updates.content = editedContent;
}
if (JSON.stringify(editedMetadata) !== JSON.stringify(content.metadata)) {
updates.metadata = editedMetadata;
}
if (Object.keys(updates).length > 0) {
const contentsAPI = new ContentsAPI(client);
const updatedContent = await contentsAPI.updateContent(
vectorStoreId,
fileId,
contentId,
updates
);
setContent(updatedContent);
}
setIsEditing(false);
} catch (err) {
console.error("Failed to update content:", err);
}
};
const handleDelete = async () => {
if (!confirm("Are you sure you want to delete this content?")) return;
try {
const contentsAPI = new ContentsAPI(client);
await contentsAPI.deleteContent(vectorStoreId, fileId, contentId);
router.push(
`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`
);
} catch (err) {
console.error("Failed to delete content:", err);
}
};
const handleCancel = () => {
setEditedContent(content ? getTextFromContent(content.content) : "");
setEditedMetadata({ ...content?.metadata });
setEditedEmbedding(content?.embedding || []);
setIsEditing(false);
setIsEditingEmbedding(false);
};
const title = `Content: ${contentId}`;
const breadcrumbSegments: BreadcrumbSegment[] = [
{ label: "Vector Stores", href: "/logs/vector-stores" },
{
label: store?.name || vectorStoreId,
href: `/logs/vector-stores/${vectorStoreId}`,
},
{ label: "Files", href: `/logs/vector-stores/${vectorStoreId}` },
{
label: fileId,
href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}`,
},
{
label: "Contents",
href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`,
},
{ label: contentId },
];
if (error) {
return <DetailErrorView title={title} id={contentId} error={error} />;
}
if (isLoading) {
return <DetailLoadingView title={title} />;
}
if (!content) {
return <DetailNotFoundView title={title} id={contentId} />;
}
const mainContent = (
<>
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>Content</CardTitle>
<div className="flex gap-2">
{isEditing ? (
<>
<Button size="sm" onClick={handleSave}>
<Save className="h-4 w-4 mr-1" />
Save
</Button>
<Button size="sm" variant="outline" onClick={handleCancel}>
<X className="h-4 w-4 mr-1" />
Cancel
</Button>
</>
) : (
<>
<Button size="sm" onClick={() => setIsEditing(true)}>
<Edit className="h-4 w-4 mr-1" />
Edit
</Button>
<Button size="sm" variant="destructive" onClick={handleDelete}>
<Trash2 className="h-4 w-4 mr-1" />
Delete
</Button>
</>
)}
</div>
</CardHeader>
<CardContent>
{isEditing ? (
<textarea
value={editedContent}
onChange={e => setEditedContent(e.target.value)}
className="w-full h-64 p-3 border rounded-md resize-none font-mono text-sm"
placeholder="Enter content..."
/>
) : (
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
<pre className="whitespace-pre-wrap font-mono text-sm text-gray-900 dark:text-gray-100">
{getTextFromContent(content.content)}
</pre>
</div>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>Content Embedding</CardTitle>
<div className="flex gap-2">
{isEditingEmbedding ? (
<>
<Button
size="sm"
onClick={() => {
setIsEditingEmbedding(false);
}}
>
<Save className="h-4 w-4 mr-1" />
Save
</Button>
<Button
size="sm"
variant="outline"
onClick={() => {
setEditedEmbedding(content?.embedding || []);
setIsEditingEmbedding(false);
}}
>
<X className="h-4 w-4 mr-1" />
Cancel
</Button>
</>
) : (
<Button size="sm" onClick={() => setIsEditingEmbedding(true)}>
<Edit className="h-4 w-4 mr-1" />
Edit
</Button>
)}
</div>
</CardHeader>
<CardContent>
{content?.embedding && content.embedding.length > 0 ? (
isEditingEmbedding ? (
<div className="space-y-2">
<p className="text-sm text-gray-600 dark:text-gray-400">
Embedding ({editedEmbedding.length}D vector):
</p>
<textarea
value={JSON.stringify(editedEmbedding, null, 2)}
onChange={e => {
try {
const parsed = JSON.parse(e.target.value);
if (
Array.isArray(parsed) &&
parsed.every(v => typeof v === "number")
) {
setEditedEmbedding(parsed);
}
} catch {}
}}
className="w-full h-32 p-3 border rounded-md resize-none font-mono text-xs"
placeholder="Enter embedding as JSON array..."
/>
</div>
) : (
<div className="space-y-2">
<div className="flex items-center gap-2">
<span className="font-mono text-xs bg-gray-100 dark:bg-gray-800 rounded px-2 py-1">
{content.embedding.length}D vector
</span>
</div>
<div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-md max-h-32 overflow-y-auto">
<pre className="whitespace-pre-wrap font-mono text-xs text-gray-900 dark:text-gray-100">
[
{content.embedding
.slice(0, 20)
.map(v => v.toFixed(6))
.join(", ")}
{content.embedding.length > 20
? `\n... and ${content.embedding.length - 20} more values`
: ""}
]
</pre>
</div>
</div>
)
) : (
<p className="text-gray-500 italic text-sm">
No embedding available for this content.
</p>
)}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Metadata</CardTitle>
</CardHeader>
<CardContent>
{isEditing ? (
<div className="space-y-2">
{Object.entries(editedMetadata).map(([key, value]) => (
<div key={key} className="flex gap-2">
<Input
value={key}
onChange={e => {
const newMetadata = { ...editedMetadata };
delete newMetadata[key];
newMetadata[e.target.value] = value;
setEditedMetadata(newMetadata);
}}
placeholder="Key"
className="flex-1"
/>
<Input
value={
typeof value === "string" ? value : JSON.stringify(value)
}
onChange={e => {
setEditedMetadata({
...editedMetadata,
[key]: e.target.value,
});
}}
placeholder="Value"
className="flex-1"
/>
</div>
))}
<Button
size="sm"
variant="outline"
onClick={() => {
setEditedMetadata({
...editedMetadata,
[""]: "",
});
}}
>
Add Field
</Button>
</div>
) : (
<div className="space-y-2">
{Object.entries(content.metadata).map(([key, value]) => (
<div key={key} className="flex justify-between py-1">
<span className="font-medium text-gray-600">{key}:</span>
<span className="font-mono text-sm">
{typeof value === "string" ? value : JSON.stringify(value)}
</span>
</div>
))}
</div>
)}
</CardContent>
</Card>
</>
);
const sidebar = (
<PropertiesCard>
<PropertyItem label="Content ID" value={contentId} />
<PropertyItem label="File ID" value={fileId} />
<PropertyItem label="Vector Store ID" value={vectorStoreId} />
<PropertyItem label="Object Type" value={content.object} />
<PropertyItem
label="Created"
value={new Date(content.created_timestamp * 1000).toLocaleString()}
/>
<PropertyItem
label="Content Length"
value={`${getTextFromContent(content.content).length} chars`}
/>
{content.metadata.chunk_window && (
<PropertyItem label="Position" value={content.metadata.chunk_window} />
)}
{file && (
<>
<PropertyItem label="File Status" value={file.status} />
<PropertyItem
label="File Usage"
value={`${file.usage_bytes} bytes`}
/>
</>
)}
{store && (
<>
<PropertyItem label="Store Name" value={store.name || ""} />
<PropertyItem
label="Provider ID"
value={(store.metadata.provider_id as string) || ""}
/>
</>
)}
</PropertiesCard>
);
return (
<>
<PageBreadcrumb segments={breadcrumbSegments} />
<DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
</>
);
}

481
src/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/page.test.tsx
View file

@ -1,481 +0,0 @@
import React from "react";
import {
render,
screen,
fireEvent,
waitFor,
act,
} from "@testing-library/react";
import "@testing-library/jest-dom";
import ContentsListPage from "./page";
import { VectorStoreContentItem } from "@/lib/contents-api";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
const mockPush = jest.fn();
const mockParams = {
id: "vs_123",
fileId: "file_456",
};
jest.mock("next/navigation", () => ({
useParams: () => mockParams,
useRouter: () => ({
push: mockPush,
}),
}));
const mockClient = {
vectorStores: {
retrieve: jest.fn(),
files: {
retrieve: jest.fn(),
},
},
};
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: () => mockClient,
}));
const mockContentsAPI = {
listContents: jest.fn(),
deleteContent: jest.fn(),
};
jest.mock("@/lib/contents-api", () => ({
ContentsAPI: jest.fn(() => mockContentsAPI),
}));
describe("ContentsListPage", () => {
const mockStore: VectorStore = {
id: "vs_123",
name: "Test Vector Store",
created_at: 1710000000,
status: "ready",
file_counts: { total: 5 },
usage_bytes: 1024,
metadata: {
provider_id: "test_provider",
},
};
const mockFile: VectorStoreFile = {
id: "file_456",
status: "completed",
created_at: 1710001000,
usage_bytes: 512,
chunking_strategy: { type: "fixed_size" },
};
const mockContents: VectorStoreContentItem[] = [
{
id: "content_1",
object: "vector_store.content",
content: "First piece of content for testing.",
embedding: [0.1, 0.2, 0.3, 0.4, 0.5],
metadata: {
chunk_window: "0-35",
content_length: 35,
},
created_timestamp: 1710002000,
},
{
id: "content_2",
object: "vector_store.content",
content:
"Second piece of content with longer text for testing truncation and display.",
embedding: [0.6, 0.7, 0.8],
metadata: {
chunk_window: "36-95",
content_length: 85,
},
created_timestamp: 1710003000,
},
{
id: "content_3",
object: "vector_store.content",
content: "Third content without embedding.",
embedding: undefined,
metadata: {
content_length: 33,
},
created_timestamp: 1710004000,
},
];
beforeEach(() => {
jest.clearAllMocks();
mockClient.vectorStores.retrieve.mockResolvedValue(mockStore);
mockClient.vectorStores.files.retrieve.mockResolvedValue(mockFile);
mockContentsAPI.listContents.mockResolvedValue({
data: mockContents,
});
});
describe("Loading and Error States", () => {
test("renders loading skeleton while fetching store data", async () => {
mockClient.vectorStores.retrieve.mockImplementation(
() => new Promise(() => {})
);
await act(async () => {
render(<ContentsListPage />);
});
const skeletons = document.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
test("renders error message when store API call fails", async () => {
const error = new Error("Failed to load store");
mockClient.vectorStores.retrieve.mockRejectedValue(error);
await act(async () => {
render(<ContentsListPage />);
});
await waitFor(() => {
expect(
screen.getByText(/Error loading details for ID vs_123/)
).toBeInTheDocument();
expect(screen.getByText(/Failed to load store/)).toBeInTheDocument();
});
});
test("renders not found when store doesn't exist", async () => {
mockClient.vectorStores.retrieve.mockResolvedValue(null);
await act(async () => {
render(<ContentsListPage />);
});
await waitFor(() => {
expect(
screen.getByText(/No details found for ID: vs_123/)
).toBeInTheDocument();
});
});
test("renders contents loading skeleton", async () => {
mockContentsAPI.listContents.mockImplementation(
() => new Promise(() => {})
);
const { container } = render(<ContentsListPage />);
await waitFor(() => {
expect(
screen.getByText("Contents in File: file_456")
).toBeInTheDocument();
});
const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
test("renders contents error message", async () => {
const error = new Error("Failed to load contents");
mockContentsAPI.listContents.mockRejectedValue(error);
render(<ContentsListPage />);
await waitFor(() => {
expect(
screen.getByText("Error loading contents: Failed to load contents")
).toBeInTheDocument();
});
});
});
describe("Contents Table Display", () => {
test("renders contents table with correct headers", async () => {
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Content Chunks (3)")).toBeInTheDocument();
expect(screen.getByText("Contents in this file")).toBeInTheDocument();
});
// Check table headers
expect(screen.getByText("Content ID")).toBeInTheDocument();
expect(screen.getByText("Content Preview")).toBeInTheDocument();
expect(screen.getByText("Embedding")).toBeInTheDocument();
expect(screen.getByText("Position")).toBeInTheDocument();
expect(screen.getByText("Created")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
test("renders content data correctly", async () => {
render(<ContentsListPage />);
await waitFor(() => {
// Check first content row
expect(screen.getByText("content_1...")).toBeInTheDocument();
expect(
screen.getByText("First piece of content for testing.")
).toBeInTheDocument();
expect(
screen.getByText("[0.100, 0.200, 0.300...] (5D)")
).toBeInTheDocument();
expect(screen.getByText("0-35")).toBeInTheDocument();
expect(
screen.getByText(new Date(1710002000 * 1000).toLocaleString())
).toBeInTheDocument();
expect(screen.getByText("content_2...")).toBeInTheDocument();
expect(
screen.getByText(/Second piece of content with longer text/)
).toBeInTheDocument();
expect(
screen.getByText("[0.600, 0.700, 0.800...] (3D)")
).toBeInTheDocument();
expect(screen.getByText("36-95")).toBeInTheDocument();
expect(screen.getByText("content_3...")).toBeInTheDocument();
expect(
screen.getByText("Third content without embedding.")
).toBeInTheDocument();
expect(screen.getByText("No embedding")).toBeInTheDocument();
expect(screen.getByText("33 chars")).toBeInTheDocument();
});
});
test("handles empty contents list", async () => {
mockContentsAPI.listContents.mockResolvedValue({
data: [],
});
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Content Chunks (0)")).toBeInTheDocument();
expect(
screen.getByText("No contents found for this file.")
).toBeInTheDocument();
});
});
test("truncates long content IDs", async () => {
const longIdContent = {
...mockContents[0],
id: "very_long_content_id_that_should_be_truncated_123456789",
};
mockContentsAPI.listContents.mockResolvedValue({
data: [longIdContent],
});
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("very_long_...")).toBeInTheDocument();
});
});
});
describe("Content Navigation", () => {
test("navigates to content detail when content ID is clicked", async () => {
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("content_1...")).toBeInTheDocument();
});
const contentLink = screen.getByRole("button", { name: "content_1..." });
fireEvent.click(contentLink);
expect(mockPush).toHaveBeenCalledWith(
"/logs/vector-stores/vs_123/files/file_456/contents/content_1"
);
});
test("navigates to content detail when view button is clicked", async () => {
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Content Chunks (3)")).toBeInTheDocument();
});
const viewButtons = screen.getAllByTitle("View content details");
fireEvent.click(viewButtons[0]);
expect(mockPush).toHaveBeenCalledWith(
"/logs/vector-stores/vs_123/files/file_456/contents/content_1"
);
});
test("navigates to content detail when edit button is clicked", async () => {
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Content Chunks (3)")).toBeInTheDocument();
});
const editButtons = screen.getAllByTitle("Edit content");
fireEvent.click(editButtons[0]);
expect(mockPush).toHaveBeenCalledWith(
"/logs/vector-stores/vs_123/files/file_456/contents/content_1"
);
});
});
describe("Content Deletion", () => {
test("deletes content when delete button is clicked", async () => {
mockContentsAPI.deleteContent.mockResolvedValue(undefined);
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Content Chunks (3)")).toBeInTheDocument();
});
const deleteButtons = screen.getAllByTitle("Delete content");
fireEvent.click(deleteButtons[0]);
await waitFor(() => {
expect(mockContentsAPI.deleteContent).toHaveBeenCalledWith(
"vs_123",
"file_456",
"content_1"
);
});
await waitFor(() => {
expect(screen.getByText("Content Chunks (2)")).toBeInTheDocument();
});
expect(screen.queryByText("content_1...")).not.toBeInTheDocument();
});
test("handles delete error gracefully", async () => {
const consoleError = jest
.spyOn(console, "error")
.mockImplementation(() => {});
mockContentsAPI.deleteContent.mockRejectedValue(
new Error("Delete failed")
);
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Content Chunks (3)")).toBeInTheDocument();
});
const deleteButtons = screen.getAllByTitle("Delete content");
fireEvent.click(deleteButtons[0]);
await waitFor(() => {
expect(consoleError).toHaveBeenCalledWith(
"Failed to delete content:",
expect.any(Error)
);
});
expect(screen.getByText("Content Chunks (3)")).toBeInTheDocument();
expect(screen.getByText("content_1...")).toBeInTheDocument();
consoleError.mockRestore();
});
});
describe("Breadcrumb Navigation", () => {
test("renders correct breadcrumb structure", async () => {
render(<ContentsListPage />);
await waitFor(() => {
const vectorStoreTexts = screen.getAllByText("Vector Stores");
expect(vectorStoreTexts.length).toBeGreaterThan(0);
const storeNameTexts = screen.getAllByText("Test Vector Store");
expect(storeNameTexts.length).toBeGreaterThan(0);
const filesTexts = screen.getAllByText("Files");
expect(filesTexts.length).toBeGreaterThan(0);
const fileIdTexts = screen.getAllByText("file_456");
expect(fileIdTexts.length).toBeGreaterThan(0);
const contentsTexts = screen.getAllByText("Contents");
expect(contentsTexts.length).toBeGreaterThan(0);
});
});
});
describe("Sidebar Properties", () => {
test("renders file and store properties", async () => {
render(<ContentsListPage />);
await waitFor(() => {
const fileIdTexts = screen.getAllByText("file_456");
expect(fileIdTexts.length).toBeGreaterThan(0);
const storeIdTexts = screen.getAllByText("vs_123");
expect(storeIdTexts.length).toBeGreaterThan(0);
const storeNameTexts = screen.getAllByText("Test Vector Store");
expect(storeNameTexts.length).toBeGreaterThan(0);
expect(screen.getByText("completed")).toBeInTheDocument();
expect(screen.getByText("512")).toBeInTheDocument();
expect(screen.getByText("fixed_size")).toBeInTheDocument();
expect(screen.getByText("test_provider")).toBeInTheDocument();
});
});
});
describe("Content Text Utilities", () => {
test("handles different content formats correctly", async () => {
const contentWithObject = {
...mockContents[0],
content: { type: "text", text: "Object format content" },
};
mockContentsAPI.listContents.mockResolvedValue({
data: [contentWithObject],
});
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Object format content")).toBeInTheDocument();
});
});
test("handles string content format", async () => {
const contentWithString = {
...mockContents[0],
content: "String format content",
};
mockContentsAPI.listContents.mockResolvedValue({
data: [contentWithString],
});
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("String format content")).toBeInTheDocument();
});
});
test("handles unknown content format", async () => {
const contentWithUnknown = {
...mockContents[0],
content: { unknown: "format" },
};
mockContentsAPI.listContents.mockResolvedValue({
data: [contentWithUnknown],
});
render(<ContentsListPage />);
await waitFor(() => {
expect(screen.getByText("Content Chunks (1)")).toBeInTheDocument();
});
const contentCells = screen.getAllByRole("cell");
const contentPreviewCell = contentCells.find(cell =>
cell.querySelector("p[title]")
);
expect(contentPreviewCell?.querySelector("p")?.textContent).toBe("");
});
});
});

347
src/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/contents/page.tsx
View file

@ -1,347 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useAuthClient } from "@/hooks/use-auth-client";
import { ContentsAPI, VectorStoreContentItem } from "@/lib/contents-api";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Edit, Trash2, Eye } from "lucide-react";
import {
DetailLoadingView,
DetailErrorView,
DetailNotFoundView,
DetailLayout,
PropertiesCard,
PropertyItem,
} from "@/components/layout/detail-layout";
import {
PageBreadcrumb,
BreadcrumbSegment,
} from "@/components/layout/page-breadcrumb";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function ContentsListPage() {
const params = useParams();
const router = useRouter();
const vectorStoreId = params.id as string;
const fileId = params.fileId as string;
const client = useAuthClient();
const getTextFromContent = (content: unknown): string => {
if (typeof content === "string") {
return content;
} else if (content && content.type === "text") {
return content.text;
}
return "";
};
const [store, setStore] = useState<VectorStore | null>(null);
const [file, setFile] = useState<VectorStoreFile | null>(null);
const [contents, setContents] = useState<VectorStoreContentItem[]>([]);
const [isLoadingStore, setIsLoadingStore] = useState(true);
const [isLoadingFile, setIsLoadingFile] = useState(true);
const [isLoadingContents, setIsLoadingContents] = useState(true);
const [errorStore, setErrorStore] = useState<Error | null>(null);
const [errorFile, setErrorFile] = useState<Error | null>(null);
const [errorContents, setErrorContents] = useState<Error | null>(null);
useEffect(() => {
if (!vectorStoreId) return;
const fetchStore = async () => {
setIsLoadingStore(true);
setErrorStore(null);
try {
const response = await client.vectorStores.retrieve(vectorStoreId);
setStore(response as VectorStore);
} catch (err) {
setErrorStore(
err instanceof Error ? err : new Error("Failed to load vector store.")
);
} finally {
setIsLoadingStore(false);
}
};
fetchStore();
}, [vectorStoreId, client]);
useEffect(() => {
if (!vectorStoreId || !fileId) return;
const fetchFile = async () => {
setIsLoadingFile(true);
setErrorFile(null);
try {
const response = await client.vectorStores.files.retrieve(
vectorStoreId,
fileId
);
setFile(response as VectorStoreFile);
} catch (err) {
setErrorFile(
err instanceof Error ? err : new Error("Failed to load file.")
);
} finally {
setIsLoadingFile(false);
}
};
fetchFile();
}, [vectorStoreId, fileId, client]);
useEffect(() => {
if (!vectorStoreId || !fileId) return;
const fetchContents = async () => {
setIsLoadingContents(true);
setErrorContents(null);
try {
const contentsAPI = new ContentsAPI(client);
const contentsResponse = await contentsAPI.listContents(
vectorStoreId,
fileId,
{ limit: 100 }
);
setContents(contentsResponse.data);
} catch (err) {
setErrorContents(
err instanceof Error ? err : new Error("Failed to load contents.")
);
} finally {
setIsLoadingContents(false);
}
};
fetchContents();
}, [vectorStoreId, fileId, client]);
const handleDeleteContent = async (contentId: string) => {
try {
const contentsAPI = new ContentsAPI(client);
await contentsAPI.deleteContent(vectorStoreId, fileId, contentId);
setContents(contents.filter(content => content.id !== contentId));
} catch (err) {
console.error("Failed to delete content:", err);
}
};
const handleViewContent = (contentId: string) => {
router.push(
`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents/${contentId}`
);
};
const title = `Contents in File: ${fileId}`;
const breadcrumbSegments: BreadcrumbSegment[] = [
{ label: "Vector Stores", href: "/logs/vector-stores" },
{
label: store?.name || vectorStoreId,
href: `/logs/vector-stores/${vectorStoreId}`,
},
{ label: "Files", href: `/logs/vector-stores/${vectorStoreId}` },
{
label: fileId,
href: `/logs/vector-stores/${vectorStoreId}/files/${fileId}`,
},
{ label: "Contents" },
];
if (errorStore) {
return (
<DetailErrorView title={title} id={vectorStoreId} error={errorStore} />
);
}
if (isLoadingStore) {
return <DetailLoadingView title={title} />;
}
if (!store) {
return <DetailNotFoundView title={title} id={vectorStoreId} />;
}
const mainContent = (
<>
<Card>
<CardHeader>
<CardTitle>Content Chunks ({contents.length})</CardTitle>
</CardHeader>
<CardContent>
{isLoadingFile ? (
<Skeleton className="h-4 w-full" />
) : errorFile ? (
<div className="text-destructive text-sm">
Error loading file: {errorFile.message}
</div>
) : isLoadingContents ? (
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
) : errorContents ? (
<div className="text-destructive text-sm">
Error loading contents: {errorContents.message}
</div>
) : contents.length > 0 ? (
<Table>
<TableCaption>Contents in this file</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Content ID</TableHead>
<TableHead>Content Preview</TableHead>
<TableHead>Embedding</TableHead>
<TableHead>Position</TableHead>
<TableHead>Created</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{contents.map(content => (
<TableRow key={content.id}>
<TableCell className="font-mono text-xs">
<Button
variant="link"
className="p-0 h-auto font-mono text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
onClick={() => handleViewContent(content.id)}
title={content.id}
>
{content.id.substring(0, 10)}...
</Button>
</TableCell>
<TableCell>
<div className="max-w-md">
<p
className="text-sm truncate"
title={getTextFromContent(content.content)}
>
{getTextFromContent(content.content)}
</p>
</div>
</TableCell>
<TableCell className="text-xs text-gray-500">
{content.embedding && content.embedding.length > 0 ? (
<div className="max-w-xs">
<span
className="font-mono text-xs bg-gray-100 dark:bg-gray-800 rounded px-1 py-0.5"
title={`${content.embedding.length}D vector: [${content.embedding
.slice(0, 3)
.map(v => v.toFixed(3))
.join(", ")}...]`}
>
[
{content.embedding
.slice(0, 3)
.map(v => v.toFixed(3))
.join(", ")}
...] ({content.embedding.length}D)
</span>
</div>
) : (
<span className="text-gray-400 dark:text-gray-500 italic">
No embedding
</span>
)}
</TableCell>
<TableCell className="text-xs text-gray-500">
{content.metadata.chunk_window
? content.metadata.chunk_window
: `${content.metadata.content_length || 0} chars`}
</TableCell>
<TableCell className="text-xs">
{new Date(
content.created_timestamp * 1000
).toLocaleString()}
</TableCell>
<TableCell>
<div className="flex gap-1">
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
title="View content details"
onClick={() => handleViewContent(content.id)}
>
<Eye className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
title="Edit content"
onClick={() => handleViewContent(content.id)}
>
<Edit className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-destructive hover:text-destructive"
title="Delete content"
onClick={() => handleDeleteContent(content.id)}
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<p className="text-gray-500 italic text-sm">
No contents found for this file.
</p>
)}
</CardContent>
</Card>
</>
);
const sidebar = (
<PropertiesCard>
<PropertyItem label="File ID" value={fileId} />
<PropertyItem label="Vector Store ID" value={vectorStoreId} />
{file && (
<>
<PropertyItem label="Status" value={file.status} />
<PropertyItem
label="Created"
value={new Date(file.created_at * 1000).toLocaleString()}
/>
<PropertyItem label="Usage Bytes" value={file.usage_bytes} />
<PropertyItem
label="Chunking Strategy"
value={file.chunking_strategy.type}
/>
</>
)}
{store && (
<>
<PropertyItem label="Store Name" value={store.name || ""} />
<PropertyItem
label="Provider ID"
value={(store.metadata.provider_id as string) || ""}
/>
</>
)}
</PropertiesCard>
);
return (
<>
<PageBreadcrumb segments={breadcrumbSegments} />
<DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
</>
);
}

458
src/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/page.test.tsx
View file

@ -1,458 +0,0 @@
import React from "react";
import {
render,
screen,
fireEvent,
waitFor,
act,
} from "@testing-library/react";
import "@testing-library/jest-dom";
import FileDetailPage from "./page";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type {
VectorStoreFile,
FileContentResponse,
} from "llama-stack-client/resources/vector-stores/files";
const mockPush = jest.fn();
const mockParams = {
id: "vs_123",
fileId: "file_456",
};
jest.mock("next/navigation", () => ({
useParams: () => mockParams,
useRouter: () => ({
push: mockPush,
}),
}));
const mockClient = {
vectorStores: {
retrieve: jest.fn(),
files: {
retrieve: jest.fn(),
content: jest.fn(),
},
},
};
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: () => mockClient,
}));
describe("FileDetailPage", () => {
const mockStore: VectorStore = {
id: "vs_123",
name: "Test Vector Store",
created_at: 1710000000,
status: "ready",
file_counts: { total: 5 },
usage_bytes: 1024,
metadata: {
provider_id: "test_provider",
},
};
const mockFile: VectorStoreFile = {
id: "file_456",
status: "completed",
created_at: 1710001000,
usage_bytes: 2048,
chunking_strategy: { type: "fixed_size" },
};
const mockFileContent: FileContentResponse = {
content: [
{ text: "First chunk of file content." },
{
text: "Second chunk with more detailed information about the content.",
},
{ text: "Third and final chunk of the file." },
],
};
beforeEach(() => {
jest.clearAllMocks();
mockClient.vectorStores.retrieve.mockResolvedValue(mockStore);
mockClient.vectorStores.files.retrieve.mockResolvedValue(mockFile);
mockClient.vectorStores.files.content.mockResolvedValue(mockFileContent);
});
describe("Loading and Error States", () => {
test("renders loading skeleton while fetching store data", async () => {
mockClient.vectorStores.retrieve.mockImplementation(
() => new Promise(() => {})
);
await act(async () => {
await act(async () => {
render(<FileDetailPage />);
});
});
const skeletons = document.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
test("renders error message when store API call fails", async () => {
const error = new Error("Failed to load store");
mockClient.vectorStores.retrieve.mockRejectedValue(error);
await act(async () => {
await act(async () => {
render(<FileDetailPage />);
});
});
await waitFor(() => {
expect(
screen.getByText(/Error loading details for ID vs_123/)
).toBeInTheDocument();
expect(screen.getByText(/Failed to load store/)).toBeInTheDocument();
});
});
test("renders not found when store doesn't exist", async () => {
mockClient.vectorStores.retrieve.mockResolvedValue(null);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(
screen.getByText(/No details found for ID: vs_123/)
).toBeInTheDocument();
});
});
test("renders file loading skeleton", async () => {
mockClient.vectorStores.files.retrieve.mockImplementation(
() => new Promise(() => {})
);
const { container } = render(<FileDetailPage />);
await waitFor(() => {
expect(screen.getByText("File: file_456")).toBeInTheDocument();
});
const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
test("renders file error message", async () => {
const error = new Error("Failed to load file");
mockClient.vectorStores.files.retrieve.mockRejectedValue(error);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(
screen.getByText("Error loading file: Failed to load file")
).toBeInTheDocument();
});
});
test("renders content error message", async () => {
const error = new Error("Failed to load contents");
mockClient.vectorStores.files.content.mockRejectedValue(error);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(
screen.getByText(
"Error loading content summary: Failed to load contents"
)
).toBeInTheDocument();
});
});
});
describe("File Information Display", () => {
test("renders file details correctly", async () => {
await act(async () => {
await act(async () => {
render(<FileDetailPage />);
});
});
await waitFor(() => {
expect(screen.getByText("File: file_456")).toBeInTheDocument();
expect(screen.getByText("File Information")).toBeInTheDocument();
expect(screen.getByText("File Details")).toBeInTheDocument();
});
const statusTexts = screen.getAllByText("Status:");
expect(statusTexts.length).toBeGreaterThan(0);
const completedTexts = screen.getAllByText("completed");
expect(completedTexts.length).toBeGreaterThan(0);
expect(screen.getByText("Size:")).toBeInTheDocument();
expect(screen.getByText("2048 bytes")).toBeInTheDocument();
const createdTexts = screen.getAllByText("Created:");
expect(createdTexts.length).toBeGreaterThan(0);
const dateTexts = screen.getAllByText(
new Date(1710001000 * 1000).toLocaleString()
);
expect(dateTexts.length).toBeGreaterThan(0);
const strategyTexts = screen.getAllByText("Content Strategy:");
expect(strategyTexts.length).toBeGreaterThan(0);
const fixedSizeTexts = screen.getAllByText("fixed_size");
expect(fixedSizeTexts.length).toBeGreaterThan(0);
});
test("handles missing file data", async () => {
mockClient.vectorStores.files.retrieve.mockResolvedValue(null);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(screen.getByText("File not found.")).toBeInTheDocument();
});
});
});
describe("Content Summary Display", () => {
test("renders content summary correctly", async () => {
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(screen.getByText("Content Summary")).toBeInTheDocument();
expect(screen.getByText("Content Items:")).toBeInTheDocument();
expect(screen.getByText("3")).toBeInTheDocument();
expect(screen.getByText("Total Characters:")).toBeInTheDocument();
const totalChars = mockFileContent.content.reduce(
(total, item) => total + item.text.length,
0
);
expect(screen.getByText(totalChars.toString())).toBeInTheDocument();
expect(screen.getByText("Preview:")).toBeInTheDocument();
expect(
screen.getByText(/First chunk of file content\./)
).toBeInTheDocument();
});
});
test("handles empty content", async () => {
mockClient.vectorStores.files.content.mockResolvedValue({
content: [],
});
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(
screen.getByText("No contents found for this file.")
).toBeInTheDocument();
});
});
test("truncates long content preview", async () => {
const longContent = {
content: [
{
text: "This is a very long piece of content that should be truncated after 200 characters to ensure the preview doesn't take up too much space in the UI and remains readable and manageable for users viewing the file details page.",
},
],
};
mockClient.vectorStores.files.content.mockResolvedValue(longContent);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(
screen.getByText(/This is a very long piece of content/)
).toBeInTheDocument();
expect(screen.getByText(/\.\.\.$/)).toBeInTheDocument();
});
});
});
describe("Navigation and Actions", () => {
test("navigates to contents list when View Contents button is clicked", async () => {
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(screen.getByText("Actions")).toBeInTheDocument();
});
const viewContentsButton = screen.getByRole("button", {
name: /View Contents/,
});
fireEvent.click(viewContentsButton);
expect(mockPush).toHaveBeenCalledWith(
"/logs/vector-stores/vs_123/files/file_456/contents"
);
});
test("View Contents button is styled correctly", async () => {
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
const button = screen.getByRole("button", { name: /View Contents/ });
expect(button).toHaveClass("flex", "items-center", "gap-2");
});
});
});
describe("Breadcrumb Navigation", () => {
test("renders correct breadcrumb structure", async () => {
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
const vectorStoresTexts = screen.getAllByText("Vector Stores");
expect(vectorStoresTexts.length).toBeGreaterThan(0);
const storeNameTexts = screen.getAllByText("Test Vector Store");
expect(storeNameTexts.length).toBeGreaterThan(0);
const filesTexts = screen.getAllByText("Files");
expect(filesTexts.length).toBeGreaterThan(0);
const fileIdTexts = screen.getAllByText("file_456");
expect(fileIdTexts.length).toBeGreaterThan(0);
});
});
test("uses store ID when store name is not available", async () => {
const storeWithoutName = { ...mockStore, name: "" };
mockClient.vectorStores.retrieve.mockResolvedValue(storeWithoutName);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
const storeIdTexts = screen.getAllByText("vs_123");
expect(storeIdTexts.length).toBeGreaterThan(0);
});
});
});
describe("Sidebar Properties", () => {
test.skip("renders file and store properties correctly", async () => {
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(screen.getByText("File ID")).toBeInTheDocument();
const fileIdTexts = screen.getAllByText("file_456");
expect(fileIdTexts.length).toBeGreaterThan(0);
expect(screen.getByText("Vector Store ID")).toBeInTheDocument();
const storeIdTexts = screen.getAllByText("vs_123");
expect(storeIdTexts.length).toBeGreaterThan(0);
expect(screen.getByText("Status")).toBeInTheDocument();
const completedTexts = screen.getAllByText("completed");
expect(completedTexts.length).toBeGreaterThan(0);
expect(screen.getByText("Usage Bytes")).toBeInTheDocument();
const usageTexts = screen.getAllByText("2048");
expect(usageTexts.length).toBeGreaterThan(0);
expect(screen.getByText("Content Strategy")).toBeInTheDocument();
const fixedSizeTexts = screen.getAllByText("fixed_size");
expect(fixedSizeTexts.length).toBeGreaterThan(0);
expect(screen.getByText("Store Name")).toBeInTheDocument();
const storeNameTexts = screen.getAllByText("Test Vector Store");
expect(storeNameTexts.length).toBeGreaterThan(0);
expect(screen.getByText("Provider ID")).toBeInTheDocument();
expect(screen.getByText("test_provider")).toBeInTheDocument();
});
});
test("handles missing optional properties", async () => {
const minimalFile = {
id: "file_456",
status: "completed",
created_at: 1710001000,
usage_bytes: 2048,
chunking_strategy: { type: "fixed_size" },
};
const minimalStore = {
...mockStore,
name: "",
metadata: {},
};
mockClient.vectorStores.files.retrieve.mockResolvedValue(minimalFile);
mockClient.vectorStores.retrieve.mockResolvedValue(minimalStore);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
const fileIdTexts = screen.getAllByText("file_456");
expect(fileIdTexts.length).toBeGreaterThan(0);
const storeIdTexts = screen.getAllByText("vs_123");
expect(storeIdTexts.length).toBeGreaterThan(0);
});
expect(screen.getByText("File: file_456")).toBeInTheDocument();
});
});
describe("Loading States for Individual Sections", () => {
test("shows loading skeleton for content while file loads", async () => {
mockClient.vectorStores.files.content.mockImplementation(
() => new Promise(() => {})
);
const { container } = render(<FileDetailPage />);
await waitFor(() => {
expect(screen.getByText("Content Summary")).toBeInTheDocument();
});
const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
});
describe("Error Handling", () => {
test("handles multiple simultaneous errors gracefully", async () => {
mockClient.vectorStores.files.retrieve.mockRejectedValue(
new Error("File error")
);
mockClient.vectorStores.files.content.mockRejectedValue(
new Error("Content error")
);
await act(async () => {
render(<FileDetailPage />);
});
await waitFor(() => {
expect(
screen.getByText("Error loading file: File error")
).toBeInTheDocument();
expect(
screen.getByText("Error loading content summary: Content error")
).toBeInTheDocument();
});
});
});
});

302
src/llama_stack/ui/app/logs/vector-stores/[id]/files/[fileId]/page.tsx
View file

@ -1,302 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useAuthClient } from "@/hooks/use-auth-client";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type {
VectorStoreFile,
FileContentResponse,
} from "llama-stack-client/resources/vector-stores/files";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { List } from "lucide-react";
import {
DetailLoadingView,
DetailErrorView,
DetailNotFoundView,
DetailLayout,
PropertiesCard,
PropertyItem,
} from "@/components/layout/detail-layout";
import {
PageBreadcrumb,
BreadcrumbSegment,
} from "@/components/layout/page-breadcrumb";
export default function FileDetailPage() {
const params = useParams();
const router = useRouter();
const vectorStoreId = params.id as string;
const fileId = params.fileId as string;
const client = useAuthClient();
const [store, setStore] = useState<VectorStore | null>(null);
const [file, setFile] = useState<VectorStoreFile | null>(null);
const [contents, setContents] = useState<FileContentResponse | null>(null);
const [isLoadingStore, setIsLoadingStore] = useState(true);
const [isLoadingFile, setIsLoadingFile] = useState(true);
const [isLoadingContents, setIsLoadingContents] = useState(true);
const [errorStore, setErrorStore] = useState<Error | null>(null);
const [errorFile, setErrorFile] = useState<Error | null>(null);
const [errorContents, setErrorContents] = useState<Error | null>(null);
useEffect(() => {
if (!vectorStoreId) return;
const fetchStore = async () => {
setIsLoadingStore(true);
setErrorStore(null);
try {
const response = await client.vectorStores.retrieve(vectorStoreId);
setStore(response as VectorStore);
} catch (err) {
setErrorStore(
err instanceof Error ? err : new Error("Failed to load vector store.")
);
} finally {
setIsLoadingStore(false);
}
};
fetchStore();
}, [vectorStoreId, client]);
useEffect(() => {
if (!vectorStoreId || !fileId) return;
const fetchFile = async () => {
setIsLoadingFile(true);
setErrorFile(null);
try {
const response = await client.vectorStores.files.retrieve(
vectorStoreId,
fileId
);
setFile(response as VectorStoreFile);
} catch (err) {
setErrorFile(
err instanceof Error ? err : new Error("Failed to load file.")
);
} finally {
setIsLoadingFile(false);
}
};
fetchFile();
}, [vectorStoreId, fileId, client]);
useEffect(() => {
if (!vectorStoreId || !fileId) return;
const fetchContents = async () => {
setIsLoadingContents(true);
setErrorContents(null);
try {
const response = await client.vectorStores.files.content(
vectorStoreId,
fileId
);
setContents(response);
} catch (err) {
setErrorContents(
err instanceof Error ? err : new Error("Failed to load contents.")
);
} finally {
setIsLoadingContents(false);
}
};
fetchContents();
}, [vectorStoreId, fileId, client]);
const handleViewContents = () => {
router.push(
`/logs/vector-stores/${vectorStoreId}/files/${fileId}/contents`
);
};
const title = `File: ${fileId}`;
const breadcrumbSegments: BreadcrumbSegment[] = [
{ label: "Vector Stores", href: "/logs/vector-stores" },
{
label: store?.name || vectorStoreId,
href: `/logs/vector-stores/${vectorStoreId}`,
},
{ label: "Files", href: `/logs/vector-stores/${vectorStoreId}` },
{ label: fileId },
];
if (errorStore) {
return (
<DetailErrorView title={title} id={vectorStoreId} error={errorStore} />
);
}
if (isLoadingStore) {
return <DetailLoadingView title={title} />;
}
if (!store) {
return <DetailNotFoundView title={title} id={vectorStoreId} />;
}
const mainContent = (
<>
<Card>
<CardHeader>
<CardTitle>File Information</CardTitle>
</CardHeader>
<CardContent>
{isLoadingFile ? (
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
) : errorFile ? (
<div className="text-destructive text-sm">
Error loading file: {errorFile.message}
</div>
) : file ? (
<div className="space-y-4">
<div>
<h3 className="text-lg font-medium mb-2">File Details</h3>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="font-medium text-gray-600 dark:text-gray-400">
Status:
</span>
<span className="ml-2">{file.status}</span>
</div>
<div>
<span className="font-medium text-gray-600 dark:text-gray-400">
Size:
</span>
<span className="ml-2">{file.usage_bytes} bytes</span>
</div>
<div>
<span className="font-medium text-gray-600 dark:text-gray-400">
Created:
</span>
<span className="ml-2">
{new Date(file.created_at * 1000).toLocaleString()}
</span>
</div>
<div>
<span className="font-medium text-gray-600 dark:text-gray-400">
Content Strategy:
</span>
<span className="ml-2">{file.chunking_strategy.type}</span>
</div>
</div>
</div>
<div className="border-t pt-4">
<h3 className="text-lg font-medium mb-3">Actions</h3>
<Button
onClick={handleViewContents}
className="flex items-center gap-2 hover:bg-primary/90 dark:hover:bg-primary/80 hover:scale-105 transition-all duration-200"
>
<List className="h-4 w-4" />
View Contents
</Button>
</div>
</div>
) : (
<p className="text-gray-500 italic text-sm">File not found.</p>
)}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Content Summary</CardTitle>
</CardHeader>
<CardContent>
{isLoadingContents ? (
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
) : errorContents ? (
<div className="text-destructive text-sm">
Error loading content summary: {errorContents.message}
</div>
) : contents && contents.content.length > 0 ? (
<div className="space-y-3">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="font-medium text-gray-600 dark:text-gray-400">
Content Items:
</span>
<span className="ml-2">{contents.content.length}</span>
</div>
<div>
<span className="font-medium text-gray-600 dark:text-gray-400">
Total Characters:
</span>
<span className="ml-2">
{contents.content.reduce(
(total, item) => total + item.text.length,
0
)}
</span>
</div>
</div>
<div className="pt-2">
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">
Preview:
</span>
<div className="mt-1 bg-gray-50 dark:bg-gray-800 rounded-md p-3">
<p className="text-sm text-gray-900 dark:text-gray-100 line-clamp-3">
{contents.content[0]?.text.substring(0, 200)}...
</p>
</div>
</div>
</div>
) : (
<p className="text-gray-500 italic text-sm">
No contents found for this file.
</p>
)}
</CardContent>
</Card>
</>
);
const sidebar = (
<PropertiesCard>
<PropertyItem label="File ID" value={fileId} />
<PropertyItem label="Vector Store ID" value={vectorStoreId} />
{file && (
<>
<PropertyItem label="Status" value={file.status} />
<PropertyItem
label="Created"
value={new Date(file.created_at * 1000).toLocaleString()}
/>
<PropertyItem label="Usage Bytes" value={file.usage_bytes} />
<PropertyItem
label="Content Strategy"
value={file.chunking_strategy.type}
/>
</>
)}
{store && (
<>
<PropertyItem label="Store Name" value={store.name || ""} />
<PropertyItem
label="Provider ID"
value={(store.metadata.provider_id as string) || ""}
/>
</>
)}
</PropertiesCard>
);
return (
<>
<PageBreadcrumb segments={breadcrumbSegments} />
<DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
</>
);
}

79
src/llama_stack/ui/app/logs/vector-stores/[id]/page.tsx
View file

@ -1,79 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { useAuthClient } from "@/hooks/use-auth-client";
import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
import { VectorStoreDetailView } from "@/components/vector-stores/vector-store-detail";
export default function VectorStoreDetailPage() {
const params = useParams();
const id = params.id as string;
const client = useAuthClient();
const [store, setStore] = useState<VectorStore | null>(null);
const [files, setFiles] = useState<VectorStoreFile[]>([]);
const [isLoadingStore, setIsLoadingStore] = useState(true);
const [isLoadingFiles, setIsLoadingFiles] = useState(true);
const [errorStore, setErrorStore] = useState<Error | null>(null);
const [errorFiles, setErrorFiles] = useState<Error | null>(null);
useEffect(() => {
if (!id) {
setErrorStore(new Error("Vector Store ID is missing."));
setIsLoadingStore(false);
return;
}
const fetchStore = async () => {
setIsLoadingStore(true);
setErrorStore(null);
try {
const response = await client.vectorStores.retrieve(id);
setStore(response as VectorStore);
} catch (err) {
setErrorStore(
err instanceof Error ? err : new Error("Failed to load vector store.")
);
} finally {
setIsLoadingStore(false);
}
};
fetchStore();
}, [id, client]);
useEffect(() => {
if (!id) {
setErrorFiles(new Error("Vector Store ID is missing."));
setIsLoadingFiles(false);
return;
}
const fetchFiles = async () => {
setIsLoadingFiles(true);
setErrorFiles(null);
try {
const result = await client.vectorStores.files.list(id);
setFiles((result as { data: VectorStoreFile[] }).data);
} catch (err) {
setErrorFiles(
err instanceof Error ? err : new Error("Failed to load files.")
);
} finally {
setIsLoadingFiles(false);
}
};
fetchFiles();
}, [id, client.vectorStores.files]);
return (
<VectorStoreDetailView
store={store}
files={files}
isLoadingStore={isLoadingStore}
isLoadingFiles={isLoadingFiles}
errorStore={errorStore}
errorFiles={errorFiles}
id={id}
/>
);
}

31
src/llama_stack/ui/app/logs/vector-stores/layout.tsx
View file

@ -1,31 +0,0 @@
"use client";
import { useParams, usePathname } from "next/navigation";
import {
PageBreadcrumb,
BreadcrumbSegment,
} from "@/components/layout/page-breadcrumb";
export default function VectorStoreDetailLayout({
children,
}: {
children: React.ReactNode;
}) {
const params = useParams();
const pathname = usePathname();
const vectorStoreId = params.id as string;
const breadcrumbSegments: BreadcrumbSegment[] = [
{ label: "Vector Stores", href: "/logs/vector-stores" },
{ label: `Details (${vectorStoreId})` },
];
const isBaseDetailPage = pathname === `/logs/vector-stores/${vectorStoreId}`;
return (
<div className="space-y-4">
{isBaseDetailPage && <PageBreadcrumb segments={breadcrumbSegments} />}
{children}
</div>
);
}

138
src/llama_stack/ui/app/logs/vector-stores/page.tsx
View file

@ -1,138 +0,0 @@
"use client";
import React from "react";
import type {
ListVectorStoresResponse,
VectorStore,
} from "llama-stack-client/resources/vector-stores/vector-stores";
import { useRouter } from "next/navigation";
import { usePagination } from "@/hooks/use-pagination";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
export default function VectorStoresPage() {
const router = useRouter();
const {
data: stores,
status,
hasMore,
error,
loadMore,
} = usePagination<VectorStore>({
limit: 20,
order: "desc",
fetchFunction: async (client, params) => {
const response = await client.vectorStores.list({
after: params.after,
limit: params.limit,
order: params.order,
} as Parameters<typeof client.vectorStores.list>[0]);
return response as ListVectorStoresResponse;
},
errorMessagePrefix: "vector stores",
});
// Auto-load all pages for infinite scroll behavior (like Responses)
React.useEffect(() => {
if (status === "idle" && hasMore) {
loadMore();
}
}, [status, hasMore, loadMore]);
const renderContent = () => {
if (status === "loading") {
return (
<div className="space-y-2">
<Skeleton className="h-8 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
</div>
);
}
if (status === "error") {
return <div className="text-destructive">Error: {error?.message}</div>;
}
if (!stores || stores.length === 0) {
return <p>No vector stores found.</p>;
}
return (
<div className="overflow-auto flex-1 min-h-0">
<Table>
<TableHeader>
<TableRow>
<TableHead>ID</TableHead>
<TableHead>Name</TableHead>
<TableHead>Created</TableHead>
<TableHead>Completed</TableHead>
<TableHead>Cancelled</TableHead>
<TableHead>Failed</TableHead>
<TableHead>In Progress</TableHead>
<TableHead>Total</TableHead>
<TableHead>Usage Bytes</TableHead>
<TableHead>Provider ID</TableHead>
<TableHead>Provider Vector DB ID</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{stores.map(store => {
const fileCounts = store.file_counts;
const metadata = store.metadata || {};
const providerId = metadata.provider_id ?? "";
const providerDbId = metadata.provider_vector_db_id ?? "";
return (
<TableRow
key={store.id}
onClick={() => router.push(`/logs/vector-stores/${store.id}`)}
className="cursor-pointer hover:bg-muted/50"
>
<TableCell>
<Button
variant="link"
className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
onClick={() =>
router.push(`/logs/vector-stores/${store.id}`)
}
>
{store.id}
</Button>
</TableCell>
<TableCell>{store.name}</TableCell>
<TableCell>
{new Date(store.created_at * 1000).toLocaleString()}
</TableCell>
<TableCell>{fileCounts.completed}</TableCell>
<TableCell>{fileCounts.cancelled}</TableCell>
<TableCell>{fileCounts.failed}</TableCell>
<TableCell>{fileCounts.in_progress}</TableCell>
<TableCell>{fileCounts.total}</TableCell>
<TableCell>{store.usage_bytes}</TableCell>
<TableCell>{providerId}</TableCell>
<TableCell>{providerDbId}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
);
};
return (
<div className="space-y-4">
<h1 className="text-2xl font-semibold">Vector Stores</h1>
{renderContent()}
</div>
);
}

7
src/llama_stack/ui/app/page.tsx
View file

@ -1,7 +0,0 @@
export default function Home() {
return (
<div className="mt-8">
<h1>Welcome to Llama Stack!</h1>
</div>
);
}

5
src/llama_stack/ui/app/prompts/page.tsx
View file

@ -1,5 +0,0 @@
import { PromptManagement } from "@/components/prompts";
export default function PromptsPage() {
return <PromptManagement />;
}

21
src/llama_stack/ui/components.json
View file

@ -1,21 +0,0 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"chat": "@/components/chat",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}

193
src/llama_stack/ui/components/chat-completions/chat-completion-detail.test.tsx
View file

@ -1,193 +0,0 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { ChatCompletionDetailView } from "./chat-completion-detail";
import { ChatCompletion } from "@/lib/types";
// Initial test file setup for ChatCompletionDetailView
describe("ChatCompletionDetailView", () => {
test("renders skeleton UI when isLoading is true", () => {
const { container } = render(
<ChatCompletionDetailView
completion={null}
isLoading={true}
error={null}
id="test-id"
/>
);
// Use the data-slot attribute for Skeletons
const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
test("renders error message when error prop is provided", () => {
render(
<ChatCompletionDetailView
completion={null}
isLoading={false}
error={{ name: "Error", message: "Network Error" }}
id="err-id"
/>
);
expect(
screen.getByText(/Error loading details for ID err-id: Network Error/)
).toBeInTheDocument();
});
test("renders default error message when error.message is empty", () => {
render(
<ChatCompletionDetailView
completion={null}
isLoading={false}
error={{ name: "Error", message: "" }}
id="err-id"
/>
);
// Use regex to match the error message regardless of whitespace
expect(
screen.getByText(/Error loading details for ID\s*err-id\s*:/)
).toBeInTheDocument();
});
test("renders error message when error prop is an object without message", () => {
render(
<ChatCompletionDetailView
completion={null}
isLoading={false}
error={{} as Error}
id="err-id"
/>
);
// Use regex to match the error message regardless of whitespace
expect(
screen.getByText(/Error loading details for ID\s*err-id\s*:/)
).toBeInTheDocument();
});
test("renders not found message when completion is null and not loading/error", () => {
render(
<ChatCompletionDetailView
completion={null}
isLoading={false}
error={null}
id="notfound-id"
/>
);
expect(
screen.getByText("No details found for ID: notfound-id.")
).toBeInTheDocument();
});
test("renders input, output, and properties for valid completion", () => {
const mockCompletion: ChatCompletion = {
id: "comp_123",
object: "chat.completion",
created: 1710000000,
model: "llama-test-model",
choices: [
{
index: 0,
message: { role: "assistant", content: "Test output" },
finish_reason: "stop",
},
],
input_messages: [{ role: "user", content: "Test input" }],
};
render(
<ChatCompletionDetailView
completion={mockCompletion}
isLoading={false}
error={null}
id={mockCompletion.id}
/>
);
// Input
expect(screen.getByText("Input")).toBeInTheDocument();
expect(screen.getByText("Test input")).toBeInTheDocument();
// Output
expect(screen.getByText("Output")).toBeInTheDocument();
expect(screen.getByText("Test output")).toBeInTheDocument();
// Properties
expect(screen.getByText("Properties")).toBeInTheDocument();
expect(screen.getByText("Created:")).toBeInTheDocument();
expect(
screen.getByText(new Date(1710000000 * 1000).toLocaleString())
).toBeInTheDocument();
expect(screen.getByText("ID:")).toBeInTheDocument();
expect(screen.getByText("comp_123")).toBeInTheDocument();
expect(screen.getByText("Model:")).toBeInTheDocument();
expect(screen.getByText("llama-test-model")).toBeInTheDocument();
expect(screen.getByText("Finish Reason:")).toBeInTheDocument();
expect(screen.getByText("stop")).toBeInTheDocument();
});
test("renders tool call in output and properties when present", () => {
const toolCall = {
function: { name: "search", arguments: '{"query":"llama"}' },
};
const mockCompletion: ChatCompletion = {
id: "comp_tool",
object: "chat.completion",
created: 1710001000,
model: "llama-tool-model",
choices: [
{
index: 0,
message: {
role: "assistant",
content: "Tool output",
tool_calls: [toolCall],
},
finish_reason: "stop",
},
],
input_messages: [{ role: "user", content: "Tool input" }],
};
render(
<ChatCompletionDetailView
completion={mockCompletion}
isLoading={false}
error={null}
id={mockCompletion.id}
/>
);
// Output should include the tool call block (should be present twice: input and output)
const toolCallLabels = screen.getAllByText("Tool Call");
expect(toolCallLabels.length).toBeGreaterThanOrEqual(1); // At least one, but could be two
// The tool call block should contain the formatted tool call string in both input and output
const toolCallBlocks = screen.getAllByText('search({"query":"llama"})');
expect(toolCallBlocks.length).toBe(2);
// Properties should include the tool call name
expect(screen.getByText("Functions/Tools Called:")).toBeInTheDocument();
expect(screen.getByText("search")).toBeInTheDocument();
});
test("handles missing/empty fields gracefully", () => {
const mockCompletion: ChatCompletion = {
id: "comp_edge",
object: "chat.completion",
created: 1710002000,
model: "llama-edge-model",
choices: [], // No choices
input_messages: [], // No input messages
};
render(
<ChatCompletionDetailView
completion={mockCompletion}
isLoading={false}
error={null}
id={mockCompletion.id}
/>
);
// Input section should be present but empty
expect(screen.getByText("Input")).toBeInTheDocument();
// Output section should show fallback message
expect(
screen.getByText("No message found in assistant's choice.")
).toBeInTheDocument();
// Properties should show N/A for finish reason
expect(screen.getByText("Finish Reason:")).toBeInTheDocument();
expect(screen.getByText("N/A")).toBeInTheDocument();
});
});

150
src/llama_stack/ui/components/chat-completions/chat-completion-detail.tsx
View file

@ -1,150 +0,0 @@
"use client";
import { ChatMessage, ChatCompletion } from "@/lib/types";
import { ChatMessageItem } from "@/components/chat-completions/chat-messasge-item";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
DetailLoadingView,
DetailErrorView,
DetailNotFoundView,
DetailLayout,
PropertiesCard,
PropertyItem,
} from "@/components/layout/detail-layout";
interface ChatCompletionDetailViewProps {
completion: ChatCompletion | null;
isLoading: boolean;
error: Error | null;
id: string;
}
export function ChatCompletionDetailView({
completion,
isLoading,
error,
id,
}: ChatCompletionDetailViewProps) {
const title = "Chat Completion Details";
if (error) {
return <DetailErrorView title={title} id={id} error={error} />;
}
if (isLoading) {
return <DetailLoadingView title={title} />;
}
if (!completion) {
return <DetailNotFoundView title={title} id={id} />;
}
// Main content cards
const mainContent = (
<>
<Card>
<CardHeader>
<CardTitle>Input</CardTitle>
</CardHeader>
<CardContent>
{completion.input_messages?.map((msg, index) => (
<ChatMessageItem key={`input-msg-${index}`} message={msg} />
))}
{completion.choices?.[0]?.message?.tool_calls &&
Array.isArray(completion.choices[0].message.tool_calls) &&
!completion.input_messages?.some(
im =>
im.role === "assistant" &&
im.tool_calls &&
Array.isArray(im.tool_calls) &&
im.tool_calls.length > 0
)
? completion.choices[0].message.tool_calls.map(
(toolCall: { function?: { name?: string } }, index: number) => {
const assistantToolCallMessage: ChatMessage = {
role: "assistant",
tool_calls: [toolCall],
content: "", // Ensure content is defined, even if empty
};
return (
<ChatMessageItem
key={`choice-tool-call-${index}`}
message={assistantToolCallMessage}
/>
);
}
)
: null}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Output</CardTitle>
</CardHeader>
<CardContent>
{completion.choices?.[0]?.message ? (
<ChatMessageItem
message={completion.choices[0].message as ChatMessage}
/>
) : (
<p className="text-gray-500 italic text-sm">
No message found in assistant&apos;s choice.
</p>
)}
</CardContent>
</Card>
</>
);
// Properties sidebar
const sidebar = (
<PropertiesCard>
<PropertyItem
label="Created"
value={new Date(completion.created * 1000).toLocaleString()}
/>
<PropertyItem label="ID" value={completion.id} />
<PropertyItem label="Model" value={completion.model} />
<PropertyItem
label="Finish Reason"
value={completion.choices?.[0]?.finish_reason || "N/A"}
hasBorder
/>
{(() => {
const toolCalls = completion.choices?.[0]?.message?.tool_calls;
if (toolCalls && Array.isArray(toolCalls) && toolCalls.length > 0) {
return (
<PropertyItem
label="Functions/Tools Called"
value={
<div>
<ul className="list-disc list-inside pl-4 mt-1">
{toolCalls.map(
(
toolCall: { function?: { name?: string } },
index: number
) => (
<li key={index}>
<span className="text-gray-900 font-medium">
{toolCall.function?.name || "N/A"}
</span>
</li>
)
)}
</ul>
</div>
}
hasBorder
/>
);
}
return null;
})()}
</PropertiesCard>
);
return (
<DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
);
}

427
src/llama_stack/ui/components/chat-completions/chat-completion-table.test.tsx
View file

@ -1,427 +0,0 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { ChatCompletionsTable } from "./chat-completions-table";
import { ChatCompletion } from "@/lib/types";
// Mock next/navigation
const mockPush = jest.fn();
jest.mock("next/navigation", () => ({
useRouter: () => ({
push: mockPush,
}),
}));
// Mock next-auth
jest.mock("next-auth/react", () => ({
useSession: () => ({
status: "authenticated",
data: { accessToken: "mock-token" },
}),
}));
// Mock helper functions
jest.mock("@/lib/truncate-text");
jest.mock("@/lib/format-message-content");
// Mock the auth client hook
const mockClient = {
chat: {
completions: {
list: jest.fn(),
},
},
};
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: () => mockClient,
}));
// Mock the usePagination hook
const mockLoadMore = jest.fn();
jest.mock("@/hooks/use-pagination", () => ({
usePagination: jest.fn(() => ({
data: [],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
})),
}));
// Import the mocked functions to set up default or specific implementations
import { truncateText as originalTruncateText } from "@/lib/truncate-text";
import {
extractTextFromContentPart as originalExtractTextFromContentPart,
extractDisplayableText as originalExtractDisplayableText,
} from "@/lib/format-message-content";
// Import the mocked hook
import { usePagination } from "@/hooks/use-pagination";
const mockedUsePagination = usePagination as jest.MockedFunction<
typeof usePagination
>;
// Cast to jest.Mock for typings
const truncateText = originalTruncateText as jest.Mock;
const extractTextFromContentPart =
originalExtractTextFromContentPart as jest.Mock;
const extractDisplayableText = originalExtractDisplayableText as jest.Mock;
describe("ChatCompletionsTable", () => {
const defaultProps = {};
beforeEach(() => {
// Reset all mocks before each test
mockPush.mockClear();
truncateText.mockClear();
extractTextFromContentPart.mockClear();
extractDisplayableText.mockClear();
mockLoadMore.mockClear();
jest.clearAllMocks();
// Default pass-through implementations
truncateText.mockImplementation((text: string | undefined) => text);
extractTextFromContentPart.mockImplementation((content: unknown) =>
typeof content === "string" ? content : "extracted text"
);
extractDisplayableText.mockImplementation((message: unknown) => {
const msg = message as { content?: string };
return msg?.content || "extracted output";
});
// Default hook return value
mockedUsePagination.mockReturnValue({
data: [],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
});
test("renders without crashing with default props", () => {
render(<ChatCompletionsTable {...defaultProps} />);
expect(screen.getByText("No chat completions found.")).toBeInTheDocument();
});
test("click on a row navigates to the correct URL", () => {
const mockData: ChatCompletion[] = [
{
id: "completion_123",
choices: [
{
message: { role: "assistant", content: "Test response" },
finish_reason: "stop",
index: 0,
},
],
object: "chat.completion",
created: 1234567890,
model: "test-model",
input_messages: [{ role: "user", content: "Test prompt" }],
},
];
// Configure the mock to return our test data
mockedUsePagination.mockReturnValue({
data: mockData,
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ChatCompletionsTable {...defaultProps} />);
const row = screen.getByText("Test prompt").closest("tr");
if (row) {
fireEvent.click(row);
expect(mockPush).toHaveBeenCalledWith(
"/logs/chat-completions/completion_123"
);
} else {
throw new Error('Row with "Test prompt" not found for router mock test.');
}
});
describe("Loading State", () => {
test("renders skeleton UI when isLoading is true", () => {
mockedUsePagination.mockReturnValue({
data: [],
status: "loading",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
const { container } = render(<ChatCompletionsTable {...defaultProps} />);
// Check for skeleton in the table caption
const tableCaption = container.querySelector("caption");
expect(tableCaption).toBeInTheDocument();
if (tableCaption) {
const captionSkeleton = tableCaption.querySelector(
'[data-slot="skeleton"]'
);
expect(captionSkeleton).toBeInTheDocument();
}
// Check for skeletons in the table body cells
const tableBody = container.querySelector("tbody");
expect(tableBody).toBeInTheDocument();
if (tableBody) {
const bodySkeletons = tableBody.querySelectorAll(
'[data-slot="skeleton"]'
);
expect(bodySkeletons.length).toBeGreaterThan(0);
}
});
});
describe("Error State", () => {
test("renders error message when error prop is provided", () => {
const errorMessage = "Network Error";
mockedUsePagination.mockReturnValue({
data: [],
status: "error",
hasMore: false,
error: { name: "Error", message: errorMessage } as Error,
loadMore: mockLoadMore,
});
render(<ChatCompletionsTable {...defaultProps} />);
expect(
screen.getByText("Unable to load chat completions")
).toBeInTheDocument();
expect(screen.getByText(errorMessage)).toBeInTheDocument();
});
test.each([{ name: "Error", message: "" }, {}])(
"renders default error message when error has no message",
errorObject => {
mockedUsePagination.mockReturnValue({
data: [],
status: "error",
hasMore: false,
error: errorObject as Error,
loadMore: mockLoadMore,
});
render(<ChatCompletionsTable {...defaultProps} />);
expect(
screen.getByText("Unable to load chat completions")
).toBeInTheDocument();
expect(
screen.getByText(
"An unexpected error occurred while loading the data."
)
).toBeInTheDocument();
}
);
});
describe("Empty State", () => {
test('renders "No chat completions found." and no table when data array is empty', () => {
render(<ChatCompletionsTable {...defaultProps} />);
expect(
screen.getByText("No chat completions found.")
).toBeInTheDocument();
// Ensure that the table structure is NOT rendered in the empty state
const table = screen.queryByRole("table");
expect(table).not.toBeInTheDocument();
});
});
describe("Data Rendering", () => {
test("renders table caption, headers, and completion data correctly", () => {
const mockCompletions: ChatCompletion[] = [
{
id: "comp_1",
object: "chat.completion",
created: 1710000000,
model: "llama-test-model",
choices: [
{
index: 0,
message: { role: "assistant", content: "Test output" },
finish_reason: "stop",
},
],
input_messages: [{ role: "user", content: "Test input" }],
},
{
id: "comp_2",
object: "chat.completion",
created: 1710001000,
model: "llama-another-model",
choices: [
{
index: 0,
message: { role: "assistant", content: "Another output" },
finish_reason: "stop",
},
],
input_messages: [{ role: "user", content: "Another input" }],
},
];
// Set up mocks to return expected values
extractTextFromContentPart.mockImplementation((content: unknown) => {
if (content === "Test input") return "Test input";
if (content === "Another input") return "Another input";
return "extracted text";
});
extractDisplayableText.mockImplementation((message: unknown) => {
const msg = message as { content?: string };
if (msg?.content === "Test output") return "Test output";
if (msg?.content === "Another output") return "Another output";
return "extracted output";
});
mockedUsePagination.mockReturnValue({
data: mockCompletions,
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ChatCompletionsTable {...defaultProps} />);
// Table caption
expect(
screen.getByText("A list of your recent chat completions.")
).toBeInTheDocument();
// Table headers
expect(screen.getByText("Input")).toBeInTheDocument();
expect(screen.getByText("Output")).toBeInTheDocument();
expect(screen.getByText("Model")).toBeInTheDocument();
expect(screen.getByText("Created")).toBeInTheDocument();
// Data rows
expect(screen.getByText("Test input")).toBeInTheDocument();
expect(screen.getByText("Test output")).toBeInTheDocument();
expect(screen.getByText("llama-test-model")).toBeInTheDocument();
expect(
screen.getByText(new Date(1710000000 * 1000).toLocaleString())
).toBeInTheDocument();
expect(screen.getByText("Another input")).toBeInTheDocument();
expect(screen.getByText("Another output")).toBeInTheDocument();
expect(screen.getByText("llama-another-model")).toBeInTheDocument();
expect(
screen.getByText(new Date(1710001000 * 1000).toLocaleString())
).toBeInTheDocument();
});
});
describe("Text Truncation and Content Extraction", () => {
test("truncates long input and output text", () => {
// Specific mock implementation for this test
truncateText.mockImplementation(
(text: string | undefined, maxLength?: number) => {
const defaultTestMaxLength = 10;
const effectiveMaxLength = maxLength ?? defaultTestMaxLength;
return typeof text === "string" && text.length > effectiveMaxLength
? text.slice(0, effectiveMaxLength) + "..."
: text;
}
);
const longInput =
"This is a very long input message that should be truncated.";
const longOutput =
"This is a very long output message that should also be truncated.";
extractTextFromContentPart.mockReturnValue(longInput);
extractDisplayableText.mockReturnValue(longOutput);
const mockCompletions: ChatCompletion[] = [
{
id: "comp_trunc",
object: "chat.completion",
created: 1710002000,
model: "llama-trunc-model",
choices: [
{
index: 0,
message: { role: "assistant", content: longOutput },
finish_reason: "stop",
},
],
input_messages: [{ role: "user", content: longInput }],
},
];
mockedUsePagination.mockReturnValue({
data: mockCompletions,
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ChatCompletionsTable {...defaultProps} />);
// The truncated text should be present for both input and output
const truncatedTexts = screen.getAllByText(
longInput.slice(0, 10) + "..."
);
expect(truncatedTexts.length).toBe(2); // one for input, one for output
});
test("uses content extraction functions correctly", () => {
const complexMessage = [
{ type: "text", text: "Extracted input" },
{ type: "image", url: "http://example.com/image.png" },
];
const assistantMessage = {
role: "assistant",
content: "Extracted output from assistant",
};
const mockCompletions: ChatCompletion[] = [
{
id: "comp_extract",
object: "chat.completion",
created: 1710003000,
model: "llama-extract-model",
choices: [
{
index: 0,
message: assistantMessage,
finish_reason: "stop",
},
],
input_messages: [{ role: "user", content: complexMessage }],
},
];
extractTextFromContentPart.mockReturnValue("Extracted input");
extractDisplayableText.mockReturnValue("Extracted output from assistant");
mockedUsePagination.mockReturnValue({
data: mockCompletions,
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ChatCompletionsTable {...defaultProps} />);
// Verify the extraction functions were called
expect(extractTextFromContentPart).toHaveBeenCalledWith(complexMessage);
expect(extractDisplayableText).toHaveBeenCalledWith(assistantMessage);
// Verify the extracted text appears in the table
expect(screen.getByText("Extracted input")).toBeInTheDocument();
expect(
screen.getByText("Extracted output from assistant")
).toBeInTheDocument();
});
});
});

73
src/llama_stack/ui/components/chat-completions/chat-completions-table.tsx
View file

@ -1,73 +0,0 @@
"use client";
import {
ChatCompletion,
UsePaginationOptions,
ListChatCompletionsResponse,
} from "@/lib/types";
import { ListChatCompletionsParams } from "@/lib/llama-stack-client";
import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
import {
extractTextFromContentPart,
extractDisplayableText,
} from "@/lib/format-message-content";
import { usePagination } from "@/hooks/use-pagination";
interface ChatCompletionsTableProps {
/** Optional pagination configuration */
paginationOptions?: UsePaginationOptions;
}
function formatChatCompletionToRow(completion: ChatCompletion): LogTableRow {
return {
id: completion.id,
input: extractTextFromContentPart(completion.input_messages?.[0]?.content),
output: extractDisplayableText(completion.choices?.[0]?.message),
model: completion.model,
createdTime: new Date(completion.created * 1000).toLocaleString(),
detailPath: `/logs/chat-completions/${completion.id}`,
};
}
export function ChatCompletionsTable({
paginationOptions,
}: ChatCompletionsTableProps) {
const fetchFunction = async (
client: ReturnType<typeof import("@/hooks/use-auth-client").useAuthClient>,
params: {
after?: string;
limit: number;
model?: string;
order?: string;
}
) => {
const response = await client.chat.completions.list({
after: params.after,
limit: params.limit,
...(params.model && { model: params.model }),
...(params.order && { order: params.order }),
} as ListChatCompletionsParams);
return response as ListChatCompletionsResponse;
};
const { data, status, hasMore, error, loadMore } = usePagination({
...paginationOptions,
fetchFunction,
errorMessagePrefix: "chat completions",
});
const formattedData = data.map(formatChatCompletionToRow);
return (
<LogsTable
data={formattedData}
status={status}
hasMore={hasMore}
error={error}
onLoadMore={loadMore}
caption="A list of your recent chat completions."
emptyMessage="No chat completions found."
/>
);
}

81
src/llama_stack/ui/components/chat-completions/chat-messasge-item.tsx
View file

@ -1,81 +0,0 @@
"use client";
import { ChatMessage } from "@/lib/types";
import React from "react";
import { formatToolCallToString } from "@/lib/format-tool-call";
import { extractTextFromContentPart } from "@/lib/format-message-content";
import {
MessageBlock,
ToolCallBlock,
} from "@/components/chat-playground/message-components";
interface ChatMessageItemProps {
message: ChatMessage;
}
export function ChatMessageItem({ message }: ChatMessageItemProps) {
switch (message.role) {
case "system":
return (
<MessageBlock
label="System"
content={extractTextFromContentPart(message.content)}
/>
);
case "user":
return (
<MessageBlock
label="User"
content={extractTextFromContentPart(message.content)}
/>
);
case "assistant":
if (
message.tool_calls &&
Array.isArray(message.tool_calls) &&
message.tool_calls.length > 0
) {
return (
<>
{message.tool_calls.map(
(
toolCall: { function?: { name?: string; arguments?: unknown } },
index: number
) => {
const formattedToolCall = formatToolCallToString(toolCall);
const toolCallContent = (
<ToolCallBlock>
{formattedToolCall || "Error: Could not display tool call"}
</ToolCallBlock>
);
return (
<MessageBlock
key={index}
label="Tool Call"
content={toolCallContent}
/>
);
}
)}
</>
);
} else {
return (
<MessageBlock
label="Assistant"
content={extractTextFromContentPart(message.content)}
/>
);
}
case "tool":
const toolOutputContent = (
<ToolCallBlock>
{extractTextFromContentPart(message.content)}
</ToolCallBlock>
);
return (
<MessageBlock label="Tool Call Output" content={toolOutputContent} />
);
}
return null;
}

407
src/llama_stack/ui/components/chat-playground/chat-message.tsx
View file

@ -1,407 +0,0 @@
"use client";
import React, { useMemo, useState } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { motion } from "framer-motion";
import { Ban, ChevronRight, Code2, Loader2, Terminal } from "lucide-react";
import { cn } from "@/lib/utils";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { FilePreview } from "@/components/ui/file-preview";
import { MarkdownRenderer } from "@/components/chat-playground/markdown-renderer";
const chatBubbleVariants = cva(
"group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]",
{
variants: {
isUser: {
true: "bg-primary text-primary-foreground",
false: "bg-muted text-foreground",
},
animation: {
none: "",
slide: "duration-300 animate-in fade-in-0",
scale: "duration-300 animate-in fade-in-0 zoom-in-75",
fade: "duration-500 animate-in fade-in-0",
},
},
compoundVariants: [
{
isUser: true,
animation: "slide",
class: "slide-in-from-right",
},
{
isUser: false,
animation: "slide",
class: "slide-in-from-left",
},
{
isUser: true,
animation: "scale",
class: "origin-bottom-right",
},
{
isUser: false,
animation: "scale",
class: "origin-bottom-left",
},
],
}
);
type Animation = VariantProps<typeof chatBubbleVariants>["animation"];
interface Attachment {
name?: string;
contentType?: string;
url: string;
}
interface PartialToolCall {
state: "partial-call";
toolName: string;
}
interface ToolCall {
state: "call";
toolName: string;
}
interface ToolResult {
state: "result";
toolName: string;
result: {
__cancelled?: boolean;
[key: string]: unknown;
};
}
type ToolInvocation = PartialToolCall | ToolCall | ToolResult;
interface ReasoningPart {
type: "reasoning";
reasoning: string;
}
interface ToolInvocationPart {
type: "tool-invocation";
toolInvocation: ToolInvocation;
}
interface TextPart {
type: "text";
text: string;
}
// For compatibility with AI SDK types, not used
interface SourcePart {
type: "source";
source?: unknown;
}
interface FilePart {
type: "file";
mimeType: string;
data: string;
}
interface StepStartPart {
type: "step-start";
}
type MessagePart =
| TextPart
| ReasoningPart
| ToolInvocationPart
| SourcePart
| FilePart
| StepStartPart;
export interface Message {
id: string;
role: "user" | "assistant" | (string & {});
content: string;
createdAt?: Date;
experimental_attachments?: Attachment[];
toolInvocations?: ToolInvocation[];
parts?: MessagePart[];
}
export interface ChatMessageProps extends Message {
showTimeStamp?: boolean;
animation?: Animation;
actions?: React.ReactNode;
}
export const ChatMessage: React.FC<ChatMessageProps> = ({
role,
content,
createdAt,
showTimeStamp = false,
animation = "scale",
actions,
experimental_attachments,
toolInvocations,
parts,
}) => {
const files = useMemo(() => {
return experimental_attachments?.map(attachment => {
const dataArray = dataUrlToUint8Array(attachment.url);
const file = new File([dataArray], attachment.name ?? "Unknown", {
type: attachment.contentType,
});
return file;
});
}, [experimental_attachments]);
const isUser = role === "user";
const formattedTime = createdAt
? new Date(createdAt).toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})
: undefined;
if (isUser) {
return (
<div
className={cn("flex flex-col", isUser ? "items-end" : "items-start")}
>
{files ? (
<div className="mb-1 flex flex-wrap gap-2">
{files.map((file, index) => {
return <FilePreview file={file} key={index} />;
})}
</div>
) : null}
<div className={cn(chatBubbleVariants({ isUser, animation }))}>
<MarkdownRenderer>{content}</MarkdownRenderer>
</div>
{showTimeStamp && createdAt ? (
<time
dateTime={new Date(createdAt).toISOString()}
className={cn(
"mt-1 block px-1 text-xs opacity-50",
animation !== "none" && "duration-500 animate-in fade-in-0"
)}
>
{formattedTime}
</time>
) : null}
</div>
);
}
if (parts && parts.length > 0) {
return parts.map((part, index) => {
if (part.type === "text") {
return (
<div
className={cn(
"flex flex-col",
isUser ? "items-end" : "items-start"
)}
key={`text-${index}`}
>
<div className={cn(chatBubbleVariants({ isUser, animation }))}>
<MarkdownRenderer>{part.text}</MarkdownRenderer>
{actions ? (
<div className="absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 text-foreground opacity-0 transition-opacity group-hover/message:opacity-100">
{actions}
</div>
) : null}
</div>
{showTimeStamp && createdAt ? (
<time
dateTime={new Date(createdAt).toISOString()}
className={cn(
"mt-1 block px-1 text-xs opacity-50",
animation !== "none" && "duration-500 animate-in fade-in-0"
)}
>
{formattedTime}
</time>
) : null}
</div>
);
} else if (part.type === "reasoning") {
return <ReasoningBlock key={`reasoning-${index}`} part={part} />;
} else if (part.type === "tool-invocation") {
return (
<ToolCall
key={`tool-${index}`}
toolInvocations={[part.toolInvocation]}
/>
);
}
return null;
});
}
if (toolInvocations && toolInvocations.length > 0) {
return <ToolCall toolInvocations={toolInvocations} />;
}
return (
<div className={cn("flex flex-col", isUser ? "items-end" : "items-start")}>
<div className={cn(chatBubbleVariants({ isUser, animation }))}>
<MarkdownRenderer>{content}</MarkdownRenderer>
{actions ? (
<div className="absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 text-foreground opacity-0 transition-opacity group-hover/message:opacity-100">
{actions}
</div>
) : null}
</div>
{showTimeStamp && createdAt ? (
<time
dateTime={new Date(createdAt).toISOString()}
className={cn(
"mt-1 block px-1 text-xs opacity-50",
animation !== "none" && "duration-500 animate-in fade-in-0"
)}
>
{formattedTime}
</time>
) : null}
</div>
);
};
function dataUrlToUint8Array(data: string) {
const base64 = data.split(",")[1];
const buf = Buffer.from(base64, "base64");
return new Uint8Array(buf);
}
const ReasoningBlock = ({ part }: { part: ReasoningPart }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="mb-2 flex flex-col items-start sm:max-w-[70%]">
<Collapsible
open={isOpen}
onOpenChange={setIsOpen}
className="group w-full overflow-hidden rounded-lg border bg-muted/50"
>
<div className="flex items-center p-2">
<CollapsibleTrigger asChild>
<button className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
<ChevronRight className="h-4 w-4 transition-transform group-data-[state=open]:rotate-90" />
<span>Thinking</span>
</button>
</CollapsibleTrigger>
</div>
<CollapsibleContent forceMount>
<motion.div
initial={false}
animate={isOpen ? "open" : "closed"}
variants={{
open: { height: "auto", opacity: 1 },
closed: { height: 0, opacity: 0 },
}}
transition={{ duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }}
className="border-t"
>
<div className="p-2">
<div className="whitespace-pre-wrap text-xs">
{part.reasoning}
</div>
</div>
</motion.div>
</CollapsibleContent>
</Collapsible>
</div>
);
};
function ToolCall({
toolInvocations,
}: Pick<ChatMessageProps, "toolInvocations">) {
if (!toolInvocations?.length) return null;
return (
<div className="flex flex-col items-start gap-2">
{toolInvocations.map((invocation, index) => {
const isCancelled =
invocation.state === "result" &&
invocation.result.__cancelled === true;
if (isCancelled) {
return (
<div
key={index}
className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm text-muted-foreground"
>
<Ban className="h-4 w-4" />
<span>
Cancelled{" "}
<span className="font-mono">
{"`"}
{invocation.toolName}
{"`"}
</span>
</span>
</div>
);
}
switch (invocation.state) {
case "partial-call":
case "call":
return (
<div
key={index}
className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm text-muted-foreground"
>
<Terminal className="h-4 w-4" />
<span>
Calling{" "}
<span className="font-mono">
{"`"}
{invocation.toolName}
{"`"}
</span>
...
</span>
<Loader2 className="h-3 w-3 animate-spin" />
</div>
);
case "result":
return (
<div
key={index}
className="flex flex-col gap-1.5 rounded-lg border bg-muted/50 px-3 py-2 text-sm"
>
<div className="flex items-center gap-2 text-muted-foreground">
<Code2 className="h-4 w-4" />
<span>
Result from{" "}
<span className="font-mono">
{"`"}
{invocation.toolName}
{"`"}
</span>
</span>
</div>
<pre className="overflow-x-auto whitespace-pre-wrap text-foreground">
{JSON.stringify(invocation.result, null, 2)}
</pre>
</div>
);
default:
return null;
}
})}
</div>
);
}

357
src/llama_stack/ui/components/chat-playground/chat.tsx
View file

@ -1,357 +0,0 @@
"use client";
import {
forwardRef,
useCallback,
useRef,
useState,
type ReactElement,
} from "react";
import { ArrowDown, ThumbsDown, ThumbsUp } from "lucide-react";
import { cn } from "@/lib/utils";
import { useAutoScroll } from "@/hooks/use-auto-scroll";
import { Button } from "@/components/ui/button";
import { type Message } from "@/components/chat-playground/chat-message";
import { CopyButton } from "@/components/ui/copy-button";
import { MessageInput } from "@/components/chat-playground/message-input";
import { MessageList } from "@/components/chat-playground/message-list";
import { PromptSuggestions } from "@/components/chat-playground/prompt-suggestions";
interface ChatPropsBase {
handleSubmit: (
event?: { preventDefault?: () => void },
options?: { experimental_attachments?: FileList }
) => void;
messages: Array<Message>;
input: string;
className?: string;
handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement>;
isGenerating: boolean;
stop?: () => void;
onRateResponse?: (
messageId: string,
rating: "thumbs-up" | "thumbs-down"
) => void;
setMessages?: (messages: Message[]) => void;
transcribeAudio?: (blob: Blob) => Promise<string>;
onRAGFileUpload?: (file: File) => Promise<void>;
}
interface ChatPropsWithoutSuggestions extends ChatPropsBase {
append?: never;
suggestions?: never;
}
interface ChatPropsWithSuggestions extends ChatPropsBase {
append: (message: { role: "user"; content: string }) => void;
suggestions: string[];
}
type ChatProps = ChatPropsWithoutSuggestions | ChatPropsWithSuggestions;
export function Chat({
messages,
handleSubmit,
input,
handleInputChange,
stop,
isGenerating,
append,
suggestions,
className,
onRateResponse,
setMessages,
transcribeAudio,
onRAGFileUpload,
}: ChatProps) {
const lastMessage = messages.at(-1);
const isEmpty = messages.length === 0;
const isTyping = lastMessage?.role === "user";
const messagesRef = useRef(messages);
messagesRef.current = messages;
// Enhanced stop function that marks pending tool calls as cancelled
const handleStop = useCallback(() => {
stop?.();
if (!setMessages) return;
const latestMessages = [...messagesRef.current];
const lastAssistantMessage = latestMessages.findLast(
m => m.role === "assistant"
);
if (!lastAssistantMessage) return;
let needsUpdate = false;
let updatedMessage = { ...lastAssistantMessage };
if (lastAssistantMessage.toolInvocations) {
const updatedToolInvocations = lastAssistantMessage.toolInvocations.map(
toolInvocation => {
if (toolInvocation.state === "call") {
needsUpdate = true;
return {
...toolInvocation,
state: "result",
result: {
content: "Tool execution was cancelled",
__cancelled: true, // Special marker to indicate cancellation
},
} as const;
}
return toolInvocation;
}
);
if (needsUpdate) {
updatedMessage = {
...updatedMessage,
toolInvocations: updatedToolInvocations,
};
}
}
if (lastAssistantMessage.parts && lastAssistantMessage.parts.length > 0) {
const updatedParts = lastAssistantMessage.parts.map(
(part: {
type: string;
toolInvocation?: { state: string; toolName: string };
}) => {
if (
part.type === "tool-invocation" &&
part.toolInvocation &&
part.toolInvocation.state === "call"
) {
needsUpdate = true;
return {
...part,
toolInvocation: {
...part.toolInvocation,
state: "result",
result: {
content: "Tool execution was cancelled",
__cancelled: true,
},
},
};
}
return part;
}
);
if (needsUpdate) {
updatedMessage = {
...updatedMessage,
parts: updatedParts,
};
}
}
if (needsUpdate) {
const messageIndex = latestMessages.findIndex(
m => m.id === lastAssistantMessage.id
);
if (messageIndex !== -1) {
latestMessages[messageIndex] = updatedMessage;
setMessages(latestMessages);
}
}
}, [stop, setMessages, messagesRef]);
const messageOptions = useCallback(
(message: Message) => ({
actions: onRateResponse ? (
<>
<div className="border-r pr-1">
<CopyButton
content={message.content}
copyMessage="Copied response to clipboard!"
/>
</div>
<Button
size="icon"
variant="ghost"
className="h-6 w-6"
onClick={() => onRateResponse(message.id, "thumbs-up")}
>
<ThumbsUp className="h-4 w-4" />
</Button>
<Button
size="icon"
variant="ghost"
className="h-6 w-6"
onClick={() => onRateResponse(message.id, "thumbs-down")}
>
<ThumbsDown className="h-4 w-4" />
</Button>
</>
) : (
<CopyButton
content={message.content}
copyMessage="Copied response to clipboard!"
/>
),
}),
[onRateResponse]
);
return (
<ChatContainer className={className}>
<div className="flex-1 flex flex-col">
{isEmpty && append && suggestions ? (
<div className="flex-1 flex items-center justify-center">
<PromptSuggestions
label="Try these prompts ✨"
append={append}
suggestions={suggestions}
/>
</div>
) : null}
{messages.length > 0 ? (
<ChatMessages messages={messages}>
<MessageList
messages={messages}
isTyping={isTyping}
messageOptions={messageOptions}
/>
</ChatMessages>
) : null}
</div>
<div className="mt-auto border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container max-w-4xl py-4">
<ChatForm
isPending={isGenerating || isTyping}
handleSubmit={handleSubmit}
>
{() => (
<MessageInput
value={input}
onChange={handleInputChange}
allowAttachments={true}
files={null}
setFiles={() => {}}
stop={handleStop}
isGenerating={isGenerating}
transcribeAudio={transcribeAudio}
onRAGFileUpload={onRAGFileUpload}
/>
)}
</ChatForm>
</div>
</div>
</ChatContainer>
);
}
Chat.displayName = "Chat";
export function ChatMessages({
messages,
children,
}: React.PropsWithChildren<{
messages: Message[];
}>) {
const {
containerRef,
scrollToBottom,
handleScroll,
shouldAutoScroll,
handleTouchStart,
} = useAutoScroll([messages]);
return (
<div
className="grid grid-cols-1 overflow-y-auto pb-4"
ref={containerRef}
onScroll={handleScroll}
onTouchStart={handleTouchStart}
>
<div className="max-w-full [grid-column:1/1] [grid-row:1/1]">
{children}
</div>
{!shouldAutoScroll && (
<div className="pointer-events-none flex flex-1 items-end justify-end [grid-column:1/1] [grid-row:1/1]">
<div className="sticky bottom-0 left-0 flex w-full justify-end">
<Button
onClick={scrollToBottom}
className="pointer-events-auto h-8 w-8 rounded-full ease-in-out animate-in fade-in-0 slide-in-from-bottom-1"
size="icon"
variant="ghost"
>
<ArrowDown className="h-4 w-4" />
</Button>
</div>
</div>
)}
</div>
);
}
export const ChatContainer = forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
className={cn("flex flex-col max-h-full w-full", className)}
{...props}
/>
);
});
ChatContainer.displayName = "ChatContainer";
interface ChatFormProps {
className?: string;
isPending: boolean;
handleSubmit: (
event?: { preventDefault?: () => void },
options?: { experimental_attachments?: FileList }
) => void;
children: (props: {
files: File[] | null;
setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
}) => ReactElement;
}
export const ChatForm = forwardRef<HTMLFormElement, ChatFormProps>(
({ children, handleSubmit, isPending, className }, ref) => {
const [files, setFiles] = useState<File[] | null>(null);
const onSubmit = (event: React.FormEvent) => {
if (isPending) {
event.preventDefault();
return;
}
if (!files) {
handleSubmit(event);
return;
}
const fileList = createFileList(files);
handleSubmit(event, { experimental_attachments: fileList });
setFiles(null);
};
return (
<form ref={ref} onSubmit={onSubmit} className={className}>
{children({ files, setFiles })}
</form>
);
}
);
ChatForm.displayName = "ChatForm";
function createFileList(files: File[] | FileList): FileList {
const dataTransfer = new DataTransfer();
for (const file of Array.from(files)) {
dataTransfer.items.add(file);
}
return dataTransfer.files;
}

345
src/llama_stack/ui/components/chat-playground/conversations.test.tsx
View file

@ -1,345 +0,0 @@
import React from "react";
import { render, screen, waitFor, act } from "@testing-library/react";
import "@testing-library/jest-dom";
import { Conversations, SessionUtils } from "./conversations";
import type { Message } from "@/components/chat-playground/chat-message";
interface ChatSession {
id: string;
name: string;
messages: Message[];
selectedModel: string;
systemMessage: string;
agentId: string;
createdAt: number;
updatedAt: number;
}
const mockOnSessionChange = jest.fn();
const mockOnNewSession = jest.fn();
// Mock the auth client
const mockClient = {
agents: {
session: {
list: jest.fn(),
create: jest.fn(),
delete: jest.fn(),
retrieve: jest.fn(),
},
},
};
// Mock the useAuthClient hook
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: jest.fn(() => mockClient),
}));
// Mock additional SessionUtils methods that are now being used
jest.mock("./conversations", () => {
const actual = jest.requireActual("./conversations");
return {
...actual,
SessionUtils: {
...actual.SessionUtils,
saveSessionData: jest.fn(),
loadSessionData: jest.fn(),
saveAgentConfig: jest.fn(),
loadAgentConfig: jest.fn(),
clearAgentCache: jest.fn(),
},
};
});
const localStorageMock = {
getItem: jest.fn(),
setItem: jest.fn(),
removeItem: jest.fn(),
clear: jest.fn(),
};
Object.defineProperty(window, "localStorage", {
value: localStorageMock,
writable: true,
});
// Mock crypto.randomUUID for test environment
let uuidCounter = 0;
Object.defineProperty(globalThis, "crypto", {
value: {
randomUUID: jest.fn(() => `test-uuid-${++uuidCounter}`),
},
writable: true,
});
describe("SessionManager", () => {
const mockSession: ChatSession = {
id: "session_123",
name: "Test Session",
messages: [
{
id: "msg_1",
role: "user",
content: "Hello",
createdAt: new Date(),
},
],
selectedModel: "test-model",
systemMessage: "You are a helpful assistant.",
agentId: "agent_123",
createdAt: 1710000000,
updatedAt: 1710001000,
};
const mockAgentSessions = [
{
session_id: "session_123",
session_name: "Test Session",
started_at: "2024-01-01T00:00:00Z",
turns: [],
},
{
session_id: "session_456",
session_name: "Another Session",
started_at: "2024-01-01T01:00:00Z",
turns: [],
},
];
beforeEach(() => {
jest.clearAllMocks();
localStorageMock.getItem.mockReturnValue(null);
localStorageMock.setItem.mockImplementation(() => {});
mockClient.agents.session.list.mockResolvedValue({
data: mockAgentSessions,
});
mockClient.agents.session.create.mockResolvedValue({
session_id: "new_session_123",
});
mockClient.agents.session.delete.mockResolvedValue(undefined);
mockClient.agents.session.retrieve.mockResolvedValue({
session_id: "test-session",
session_name: "Test Session",
started_at: new Date().toISOString(),
turns: [],
});
uuidCounter = 0; // Reset UUID counter for consistent test behavior
});
describe("Component Rendering", () => {
test("does not render when no agent is selected", async () => {
const { container } = await act(async () => {
return render(
<Conversations
selectedAgentId=""
currentSession={null}
onSessionChange={mockOnSessionChange}
onNewSession={mockOnNewSession}
/>
);
});
expect(container.firstChild).toBeNull();
});
test("renders loading state initially", async () => {
mockClient.agents.session.list.mockImplementation(
() => new Promise(() => {}) // Never resolves to simulate loading
);
await act(async () => {
render(
<Conversations
selectedAgentId="agent_123"
currentSession={null}
onSessionChange={mockOnSessionChange}
onNewSession={mockOnNewSession}
/>
);
});
expect(screen.getByText("Select Session")).toBeInTheDocument();
// When loading, the "+ New" button should be disabled
expect(screen.getByText("+ New")).toBeDisabled();
});
test("renders session selector when agent sessions are loaded", async () => {
await act(async () => {
render(
<Conversations
selectedAgentId="agent_123"
currentSession={null}
onSessionChange={mockOnSessionChange}
onNewSession={mockOnNewSession}
/>
);
});
await waitFor(() => {
expect(screen.getByText("Select Session")).toBeInTheDocument();
});
});
test("renders current session name when session is selected", async () => {
await act(async () => {
render(
<Conversations
selectedAgentId="agent_123"
currentSession={mockSession}
onSessionChange={mockOnSessionChange}
onNewSession={mockOnNewSession}
/>
);
});
await waitFor(() => {
expect(screen.getByText("Test Session")).toBeInTheDocument();
});
});
});
describe("Agent API Integration", () => {
test("loads sessions from agent API on mount", async () => {
await act(async () => {
render(
<Conversations
selectedAgentId="agent_123"
currentSession={mockSession}
onSessionChange={mockOnSessionChange}
onNewSession={mockOnNewSession}
/>
);
});
await waitFor(() => {
expect(mockClient.agents.session.list).toHaveBeenCalledWith(
"agent_123"
);
});
});
test("handles API errors gracefully", async () => {
mockClient.agents.session.list.mockRejectedValue(new Error("API Error"));
const consoleSpy = jest
.spyOn(console, "error")
.mockImplementation(() => {});
await act(async () => {
render(
<Conversations
selectedAgentId="agent_123"
currentSession={mockSession}
onSessionChange={mockOnSessionChange}
onNewSession={mockOnNewSession}
/>
);
});
await waitFor(() => {
expect(consoleSpy).toHaveBeenCalledWith(
"Error loading agent sessions:",
expect.any(Error)
);
});
consoleSpy.mockRestore();
});
});
describe("Error Handling", () => {
test("component renders without crashing when API is unavailable", async () => {
mockClient.agents.session.list.mockRejectedValue(
new Error("Network Error")
);
const consoleSpy = jest
.spyOn(console, "error")
.mockImplementation(() => {});
await act(async () => {
render(
<Conversations
selectedAgentId="agent_123"
currentSession={mockSession}
onSessionChange={mockOnSessionChange}
onNewSession={mockOnNewSession}
/>
);
});
// Should still render the session manager with the select trigger
expect(screen.getByRole("combobox")).toBeInTheDocument();
expect(screen.getByText("+ New")).toBeInTheDocument();
consoleSpy.mockRestore();
});
});
});
describe("SessionUtils", () => {
beforeEach(() => {
jest.clearAllMocks();
localStorageMock.getItem.mockReturnValue(null);
localStorageMock.setItem.mockImplementation(() => {});
});
describe("saveCurrentSessionId", () => {
test("saves session ID to localStorage", () => {
SessionUtils.saveCurrentSessionId("test-session-id");
expect(localStorageMock.setItem).toHaveBeenCalledWith(
"chat-playground-current-session",
"test-session-id"
);
});
});
describe("createDefaultSession", () => {
test("creates default session with agent ID", () => {
const result = SessionUtils.createDefaultSession("agent_123");
expect(result).toEqual(
expect.objectContaining({
name: "Default Session",
messages: [],
selectedModel: "",
systemMessage: "You are a helpful assistant.",
agentId: "agent_123",
})
);
expect(result.id).toBeTruthy();
expect(result.createdAt).toBeTruthy();
expect(result.updatedAt).toBeTruthy();
});
test("creates default session with inherited model", () => {
const result = SessionUtils.createDefaultSession(
"agent_123",
"inherited-model"
);
expect(result.selectedModel).toBe("inherited-model");
expect(result.agentId).toBe("agent_123");
});
test("creates unique session IDs", () => {
const originalNow = Date.now;
let mockTime = 1710005000;
Date.now = jest.fn(() => ++mockTime);
const session1 = SessionUtils.createDefaultSession("agent_123");
const session2 = SessionUtils.createDefaultSession("agent_123");
expect(session1.id).not.toBe(session2.id);
Date.now = originalNow;
});
test("sets creation and update timestamps", () => {
const result = SessionUtils.createDefaultSession("agent_123");
expect(result.createdAt).toBeTruthy();
expect(result.updatedAt).toBeTruthy();
expect(typeof result.createdAt).toBe("number");
expect(typeof result.updatedAt).toBe("number");
});
});
});

565
src/llama_stack/ui/components/chat-playground/conversations.tsx
View file

@ -1,565 +0,0 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";
import { Trash2 } from "lucide-react";
import type { Message } from "@/components/chat-playground/chat-message";
import { useAuthClient } from "@/hooks/use-auth-client";
import { cleanMessageContent } from "@/lib/message-content-utils";
import type {
Session,
SessionCreateParams,
} from "llama-stack-client/resources/agents";
export interface ChatSession {
id: string;
name: string;
messages: Message[];
selectedModel: string;
systemMessage: string;
agentId: string;
session?: Session;
createdAt: number;
updatedAt: number;
}
interface SessionManagerProps {
currentSession: ChatSession | null;
onSessionChange: (session: ChatSession) => void;
onNewSession: () => void;
selectedAgentId: string;
}
const CURRENT_SESSION_KEY = "chat-playground-current-session";
// ensures this only happens client side
const safeLocalStorage = {
getItem: (key: string): string | null => {
if (typeof window === "undefined") return null;
try {
return localStorage.getItem(key);
} catch (err) {
console.error("Error accessing localStorage:", err);
return null;
}
},
setItem: (key: string, value: string): void => {
if (typeof window === "undefined") return;
try {
localStorage.setItem(key, value);
} catch (err) {
console.error("Error writing to localStorage:", err);
}
},
removeItem: (key: string): void => {
if (typeof window === "undefined") return;
try {
localStorage.removeItem(key);
} catch (err) {
console.error("Error removing from localStorage:", err);
}
},
};
const generateSessionId = (): string => {
return globalThis.crypto.randomUUID();
};
export function Conversations({
currentSession,
onSessionChange,
selectedAgentId,
}: SessionManagerProps) {
const [sessions, setSessions] = useState<ChatSession[]>([]);
const [showCreateForm, setShowCreateForm] = useState(false);
const [newSessionName, setNewSessionName] = useState("");
const [loading, setLoading] = useState(false);
const client = useAuthClient();
const loadAgentSessions = useCallback(async () => {
if (!selectedAgentId) return;
setLoading(true);
try {
const response = await client.agents.session.list(selectedAgentId);
console.log("Sessions response:", response);
if (!response.data || !Array.isArray(response.data)) {
console.warn("Invalid sessions response, starting fresh");
setSessions([]);
return;
}
const agentSessions: ChatSession[] = response.data
.filter(sessionData => {
const isValid =
sessionData &&
typeof sessionData === "object" &&
sessionData.session_id &&
sessionData.session_name;
if (!isValid) {
console.warn("Filtering out invalid session:", sessionData);
}
return isValid;
})
.map(sessionData => ({
id: sessionData.session_id,
name: sessionData.session_name,
messages: [],
selectedModel: currentSession?.selectedModel || "",
systemMessage:
currentSession?.systemMessage || "You are a helpful assistant.",
agentId: selectedAgentId,
session: sessionData,
createdAt: sessionData.started_at
? new Date(sessionData.started_at).getTime()
: Date.now(),
updatedAt: sessionData.started_at
? new Date(sessionData.started_at).getTime()
: Date.now(),
}));
setSessions(agentSessions);
} catch (error) {
console.error("Error loading agent sessions:", error);
setSessions([]);
} finally {
setLoading(false);
}
}, [
selectedAgentId,
client,
currentSession?.selectedModel,
currentSession?.systemMessage,
]);
useEffect(() => {
if (selectedAgentId) {
loadAgentSessions();
}
}, [selectedAgentId, loadAgentSessions]);
const createNewSession = async () => {
if (!selectedAgentId) return;
const sessionName =
newSessionName.trim() || `Session ${sessions.length + 1}`;
setLoading(true);
try {
const response = await client.agents.session.create(selectedAgentId, {
session_name: sessionName,
} as SessionCreateParams);
const newSession: ChatSession = {
id: response.session_id,
name: sessionName,
messages: [],
selectedModel: currentSession?.selectedModel || "",
systemMessage:
currentSession?.systemMessage || "You are a helpful assistant.",
agentId: selectedAgentId,
createdAt: Date.now(),
updatedAt: Date.now(),
};
setSessions(prev => [...prev, newSession]);
SessionUtils.saveCurrentSessionId(newSession.id, selectedAgentId);
onSessionChange(newSession);
setNewSessionName("");
setShowCreateForm(false);
} catch (error) {
console.error("Error creating session:", error);
} finally {
setLoading(false);
}
};
const loadSessionMessages = useCallback(
async (agentId: string, sessionId: string): Promise<Message[]> => {
try {
const session = await client.agents.session.retrieve(
agentId,
sessionId
);
if (!session || !session.turns || !Array.isArray(session.turns)) {
return [];
}
const messages: Message[] = [];
for (const turn of session.turns) {
// Add user messages from input_messages
if (turn.input_messages && Array.isArray(turn.input_messages)) {
for (const input of turn.input_messages) {
if (input.role === "user" && input.content) {
messages.push({
id: `${turn.turn_id}-user-${messages.length}`,
role: "user",
content:
typeof input.content === "string"
? input.content
: JSON.stringify(input.content),
createdAt: new Date(turn.started_at || Date.now()),
});
}
}
}
// Add assistant message from output_message
if (turn.output_message && turn.output_message.content) {
messages.push({
id: `${turn.turn_id}-assistant-${messages.length}`,
role: "assistant",
content: cleanMessageContent(turn.output_message.content),
createdAt: new Date(
turn.completed_at || turn.started_at || Date.now()
),
});
}
}
return messages;
} catch (error) {
console.error("Error loading session messages:", error);
return [];
}
},
[client]
);
const switchToSession = useCallback(
async (sessionId: string) => {
const session = sessions.find(s => s.id === sessionId);
if (session) {
setLoading(true);
try {
// Load messages for this session
const messages = await loadSessionMessages(
selectedAgentId,
sessionId
);
const sessionWithMessages = {
...session,
messages,
};
SessionUtils.saveCurrentSessionId(sessionId, selectedAgentId);
onSessionChange(sessionWithMessages);
} catch (error) {
console.error("Error switching to session:", error);
// Fallback to session without messages
SessionUtils.saveCurrentSessionId(sessionId, selectedAgentId);
onSessionChange(session);
} finally {
setLoading(false);
}
}
},
[sessions, selectedAgentId, loadSessionMessages, onSessionChange]
);
const deleteSession = async (sessionId: string) => {
if (!selectedAgentId) {
return;
}
if (
confirm(
"Are you sure you want to delete this session? This action cannot be undone."
)
) {
setLoading(true);
try {
await client.agents.session.delete(selectedAgentId, sessionId);
const updatedSessions = sessions.filter(s => s.id !== sessionId);
setSessions(updatedSessions);
if (currentSession?.id === sessionId) {
const newCurrentSession = updatedSessions[0] || null;
if (newCurrentSession) {
SessionUtils.saveCurrentSessionId(
newCurrentSession.id,
selectedAgentId
);
onSessionChange(newCurrentSession);
} else {
SessionUtils.clearCurrentSession(selectedAgentId);
onNewSession();
}
}
} catch (error) {
console.error("Error deleting session:", error);
} finally {
setLoading(false);
}
}
};
useEffect(() => {
if (currentSession) {
setSessions(prevSessions => {
const updatedSessions = prevSessions.map(session =>
session.id === currentSession.id ? currentSession : session
);
if (!prevSessions.find(s => s.id === currentSession.id)) {
updatedSessions.push(currentSession);
}
return updatedSessions;
});
}
}, [currentSession]);
if (!selectedAgentId) {
return null;
}
return (
<div className="relative">
<div className="flex items-center gap-2">
<Select
value={currentSession?.id || ""}
onValueChange={switchToSession}
>
<SelectTrigger className="w-[200px]">
<SelectValue placeholder="Select Session" />
</SelectTrigger>
<SelectContent>
{sessions.map(session => (
<SelectItem key={session.id} value={session.id}>
{session.name}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
onClick={() => setShowCreateForm(true)}
variant="outline"
size="sm"
disabled={loading || !selectedAgentId}
>
+ New
</Button>
{currentSession && (
<Button
onClick={() => deleteSession(currentSession.id)}
variant="outline"
size="sm"
className="text-destructive hover:text-destructive hover:bg-destructive/10"
title="Delete current session"
>
<Trash2 className="h-3 w-3" />
</Button>
)}
</div>
{showCreateForm && (
<Card className="absolute top-full left-0 mt-2 p-4 space-y-3 w-80 z-50 bg-background border shadow-lg">
<h3 className="text-md font-semibold">Create New Session</h3>
<Input
value={newSessionName}
onChange={e => setNewSessionName(e.target.value)}
placeholder="Session name (optional)"
onKeyDown={e => {
if (e.key === "Enter") {
createNewSession();
} else if (e.key === "Escape") {
setShowCreateForm(false);
setNewSessionName("");
}
}}
/>
<div className="flex gap-2">
<Button
onClick={createNewSession}
className="flex-1"
disabled={loading}
>
{loading ? "Creating..." : "Create"}
</Button>
<Button
variant="outline"
onClick={() => {
setShowCreateForm(false);
setNewSessionName("");
}}
className="flex-1"
>
Cancel
</Button>
</div>
</Card>
)}
{currentSession && sessions.length > 1 && (
<div className="absolute top-full left-0 mt-1 text-xs text-gray-500 whitespace-nowrap">
{sessions.length} sessions • Current: {currentSession.name}
{currentSession.messages.length > 0 &&
` • ${currentSession.messages.length} messages`}
</div>
)}
</div>
);
}
export const SessionUtils = {
loadCurrentSessionId: (agentId?: string): string | null => {
const key = agentId
? `${CURRENT_SESSION_KEY}-${agentId}`
: CURRENT_SESSION_KEY;
return safeLocalStorage.getItem(key);
},
saveCurrentSessionId: (sessionId: string, agentId?: string) => {
const key = agentId
? `${CURRENT_SESSION_KEY}-${agentId}`
: CURRENT_SESSION_KEY;
safeLocalStorage.setItem(key, sessionId);
},
createDefaultSession: (
agentId: string,
inheritModel?: string
): ChatSession => ({
id: generateSessionId(),
name: "Default Session",
messages: [],
selectedModel: inheritModel || "",
systemMessage: "You are a helpful assistant.",
agentId,
createdAt: Date.now(),
updatedAt: Date.now(),
}),
clearCurrentSession: (agentId?: string) => {
const key = agentId
? `${CURRENT_SESSION_KEY}-${agentId}`
: CURRENT_SESSION_KEY;
safeLocalStorage.removeItem(key);
},
loadCurrentAgentId: (): string | null => {
return safeLocalStorage.getItem("chat-playground-current-agent");
},
saveCurrentAgentId: (agentId: string) => {
safeLocalStorage.setItem("chat-playground-current-agent", agentId);
},
// Comprehensive session caching
saveSessionData: (agentId: string, sessionData: ChatSession) => {
const key = `chat-playground-session-data-${agentId}-${sessionData.id}`;
safeLocalStorage.setItem(
key,
JSON.stringify({
...sessionData,
cachedAt: Date.now(),
})
);
},
loadSessionData: (agentId: string, sessionId: string): ChatSession | null => {
const key = `chat-playground-session-data-${agentId}-${sessionId}`;
const cached = safeLocalStorage.getItem(key);
if (!cached) return null;
try {
const data = JSON.parse(cached);
// Check if cache is fresh (less than 1 hour old)
const cacheAge = Date.now() - (data.cachedAt || 0);
if (cacheAge > 60 * 60 * 1000) {
safeLocalStorage.removeItem(key);
return null;
}
// Convert date strings back to Date objects
return {
...data,
messages: data.messages.map(
(msg: { createdAt: string; [key: string]: unknown }) => ({
...msg,
createdAt: new Date(msg.createdAt),
})
),
};
} catch (error) {
console.error("Error parsing cached session data:", error);
safeLocalStorage.removeItem(key);
return null;
}
},
// Agent config caching
saveAgentConfig: (
agentId: string,
config: {
toolgroups?: Array<
string | { name: string; args: Record<string, unknown> }
>;
[key: string]: unknown;
}
) => {
const key = `chat-playground-agent-config-${agentId}`;
safeLocalStorage.setItem(
key,
JSON.stringify({
config,
cachedAt: Date.now(),
})
);
},
loadAgentConfig: (
agentId: string
): {
toolgroups?: Array<
string | { name: string; args: Record<string, unknown> }
>;
[key: string]: unknown;
} | null => {
const key = `chat-playground-agent-config-${agentId}`;
const cached = safeLocalStorage.getItem(key);
if (!cached) return null;
try {
const data = JSON.parse(cached);
// Check if cache is fresh (less than 30 minutes old)
const cacheAge = Date.now() - (data.cachedAt || 0);
if (cacheAge > 30 * 60 * 1000) {
safeLocalStorage.removeItem(key);
return null;
}
return data.config;
} catch (error) {
console.error("Error parsing cached agent config:", error);
safeLocalStorage.removeItem(key);
return null;
}
},
// Clear all cached data for an agent
clearAgentCache: (agentId: string) => {
const keys = Object.keys(localStorage).filter(
key =>
key.includes(`chat-playground-session-data-${agentId}`) ||
key.includes(`chat-playground-agent-config-${agentId}`)
);
keys.forEach(key => safeLocalStorage.removeItem(key));
},
};

41
src/llama_stack/ui/components/chat-playground/interrupt-prompt.tsx
View file

@ -1,41 +0,0 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";
interface InterruptPromptProps {
isOpen: boolean;
close: () => void;
}
export function InterruptPrompt({ isOpen, close }: InterruptPromptProps) {
return (
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ top: 0, filter: "blur(5px)" }}
animate={{
top: -40,
filter: "blur(0px)",
transition: {
type: "spring",
filter: { type: "tween" },
},
}}
exit={{ top: 0, filter: "blur(5px)" }}
className="absolute left-1/2 flex -translate-x-1/2 overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground"
>
<span className="ml-2.5">Press Enter again to interrupt</span>
<button
className="ml-1 mr-2.5 flex items-center"
type="button"
onClick={close}
aria-label="Close"
>
<X className="h-3 w-3" />
</button>
</motion.div>
)}
</AnimatePresence>
);
}

240
src/llama_stack/ui/components/chat-playground/markdown-renderer.tsx
View file

@ -1,240 +0,0 @@
import React, { Suspense, useEffect, useState } from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { cn } from "@/lib/utils";
import { CopyButton } from "@/components/ui/copy-button";
interface MarkdownRendererProps {
children: string;
}
export function MarkdownRenderer({ children }: MarkdownRendererProps) {
return (
<div className="space-y-3">
<Markdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>
{children}
</Markdown>
</div>
);
}
interface HighlightedPre extends React.HTMLAttributes<HTMLPreElement> {
children: string;
language: string;
}
const HighlightedPre = React.memo(
({ children, language, ...props }: HighlightedPre) => {
const [tokens, setTokens] = useState<unknown[] | null>(null);
const [isSupported, setIsSupported] = useState(false);
useEffect(() => {
let mounted = true;
const loadAndHighlight = async () => {
try {
const { codeToTokens, bundledLanguages } = await import("shiki");
if (!mounted) return;
if (!(language in bundledLanguages)) {
setIsSupported(false);
return;
}
setIsSupported(true);
const { tokens: highlightedTokens } = await codeToTokens(children, {
lang: language as keyof typeof bundledLanguages,
defaultColor: false,
themes: {
light: "github-light",
dark: "github-dark",
},
});
if (mounted) {
setTokens(highlightedTokens);
}
} catch {
if (mounted) {
setIsSupported(false);
}
}
};
loadAndHighlight();
return () => {
mounted = false;
};
}, [children, language]);
if (!isSupported) {
return <pre {...props}>{children}</pre>;
}
if (!tokens) {
return <pre {...props}>{children}</pre>;
}
return (
<pre {...props}>
<code>
{tokens.map((line, lineIndex) => (
<React.Fragment key={lineIndex}>
<span>
{line.map((token, tokenIndex) => {
const style =
typeof token.htmlStyle === "string"
? undefined
: token.htmlStyle;
return (
<span
key={tokenIndex}
className="text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg"
style={style}
>
{token.content}
</span>
);
})}
</span>
{lineIndex !== tokens.length - 1 && "\n"}
</React.Fragment>
))}
</code>
</pre>
);
}
);
HighlightedPre.displayName = "HighlightedCode";
interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
children: React.ReactNode;
className?: string;
language: string;
}
const CodeBlock = ({
children,
className,
language,
...restProps
}: CodeBlockProps) => {
const code =
typeof children === "string"
? children
: childrenTakeAllStringContents(children);
const preClass = cn(
"overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
className
);
return (
<div className="group/code relative mb-4">
<Suspense
fallback={
<pre className={preClass} {...restProps}>
{children}
</pre>
}
>
<HighlightedPre language={language} className={preClass}>
{code}
</HighlightedPre>
</Suspense>
<div className="invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100">
<CopyButton content={code} copyMessage="Copied code to clipboard" />
</div>
</div>
);
};
function childrenTakeAllStringContents(element: unknown): string {
if (typeof element === "string") {
return element;
}
if (element?.props?.children) {
const children = element.props.children;
if (Array.isArray(children)) {
return children
.map(child => childrenTakeAllStringContents(child))
.join("");
} else {
return childrenTakeAllStringContents(children);
}
}
return "";
}
const COMPONENTS = {
h1: withClass("h1", "text-2xl font-semibold"),
h2: withClass("h2", "font-semibold text-xl"),
h3: withClass("h3", "font-semibold text-lg"),
h4: withClass("h4", "font-semibold text-base"),
h5: withClass("h5", "font-medium"),
strong: withClass("strong", "font-semibold"),
a: withClass("a", "text-primary underline underline-offset-2"),
blockquote: withClass("blockquote", "border-l-2 border-primary pl-4"),
code: ({
children,
className,
...rest
}: {
children: React.ReactNode;
className?: string;
}) => {
const match = /language-(\w+)/.exec(className || "");
return match ? (
<CodeBlock className={className} language={match[1]} {...rest}>
{children}
</CodeBlock>
) : (
<code
className={cn(
"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
)}
{...rest}
>
{children}
</code>
);
},
pre: ({ children }: { children: React.ReactNode }) => children,
ol: withClass("ol", "list-decimal space-y-2 pl-6"),
ul: withClass("ul", "list-disc space-y-2 pl-6"),
li: withClass("li", "my-1.5"),
table: withClass(
"table",
"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20"
),
th: withClass(
"th",
"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
),
td: withClass(
"td",
"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
),
tr: withClass("tr", "m-0 border-t p-0 even:bg-muted"),
p: withClass("p", "whitespace-pre-wrap"),
hr: withClass("hr", "border-foreground/20"),
};
function withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {
const Component = ({ ...props }: Record<string, unknown>) => (
<Tag className={classes} {...props} />
);
Component.displayName = Tag;
return Component;
}
export default MarkdownRenderer;

49
src/llama_stack/ui/components/chat-playground/message-components.tsx
View file

@ -1,49 +0,0 @@
import React from "react";
export interface MessageBlockProps {
label: string;
labelDetail?: string;
content: React.ReactNode;
className?: string;
contentClassName?: string;
}
export const MessageBlock: React.FC<MessageBlockProps> = ({
label,
labelDetail,
content,
className = "",
contentClassName = "",
}) => {
return (
<div className={`mb-4 ${className}`}>
<p className="py-1 font-semibold text-muted-foreground mb-1">
{label}
{labelDetail && (
<span className="text-xs text-muted-foreground font-normal ml-1">
{labelDetail}
</span>
)}
</p>
<div className={`py-1 whitespace-pre-wrap ${contentClassName}`}>
{content}
</div>
</div>
);
};
export interface ToolCallBlockProps {
children: React.ReactNode;
className?: string;
}
export const ToolCallBlock = ({ children, className }: ToolCallBlockProps) => {
const baseClassName =
"p-3 bg-slate-50 border border-slate-200 rounded-md text-sm";
return (
<div className={`${baseClassName} ${className || ""}`}>
<pre className="whitespace-pre-wrap text-xs">{children}</pre>
</div>
);
};

459
src/llama_stack/ui/components/chat-playground/message-input.tsx
View file

@ -1,459 +0,0 @@
"use client";
import React, { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowUp, Info, Loader2, Mic, Paperclip, Square } from "lucide-react";
import { omit } from "remeda";
import { cn } from "@/lib/utils";
import { useAudioRecording } from "@/hooks/use-audio-recording";
import { useAutosizeTextArea } from "@/hooks/use-autosize-textarea";
import { AudioVisualizer } from "@/components/ui/audio-visualizer";
import { Button } from "@/components/ui/button";
import { FilePreview } from "@/components/ui/file-preview";
import { InterruptPrompt } from "@/components/chat-playground/interrupt-prompt";
interface MessageInputBaseProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
value: string;
submitOnEnter?: boolean;
stop?: () => void;
isGenerating: boolean;
enableInterrupt?: boolean;
transcribeAudio?: (blob: Blob) => Promise<string>;
onRAGFileUpload?: (file: File) => Promise<void>;
}
interface MessageInputWithoutAttachmentProps extends MessageInputBaseProps {
allowAttachments?: false;
}
interface MessageInputWithAttachmentsProps extends MessageInputBaseProps {
allowAttachments: true;
files: File[] | null;
setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
}
type MessageInputProps =
| MessageInputWithoutAttachmentProps
| MessageInputWithAttachmentsProps;
export function MessageInput({
placeholder = "Ask AI...",
className,
onKeyDown: onKeyDownProp,
submitOnEnter = true,
stop,
isGenerating,
enableInterrupt = true,
transcribeAudio,
...props
}: MessageInputProps) {
const [isDragging, setIsDragging] = useState(false);
const [showInterruptPrompt, setShowInterruptPrompt] = useState(false);
const {
isListening,
isSpeechSupported,
isRecording,
isTranscribing,
audioStream,
toggleListening,
stopRecording,
} = useAudioRecording({
transcribeAudio,
onTranscriptionComplete: text => {
props.onChange?.({
target: { value: text },
} as React.ChangeEvent<HTMLTextAreaElement>);
},
});
useEffect(() => {
if (!isGenerating) {
setShowInterruptPrompt(false);
}
}, [isGenerating]);
const addFiles = (files: File[] | null) => {
if (props.allowAttachments) {
props.setFiles(currentFiles => {
if (currentFiles === null) {
return files;
}
if (files === null) {
return currentFiles;
}
return [...currentFiles, ...files];
});
}
};
const onDragOver = (event: React.DragEvent) => {
if (props.allowAttachments !== true) return;
event.preventDefault();
setIsDragging(true);
};
const onDragLeave = (event: React.DragEvent) => {
if (props.allowAttachments !== true) return;
event.preventDefault();
setIsDragging(false);
};
const onDrop = (event: React.DragEvent) => {
setIsDragging(false);
if (props.allowAttachments !== true) return;
event.preventDefault();
const dataTransfer = event.dataTransfer;
if (dataTransfer.files.length) {
addFiles(Array.from(dataTransfer.files));
}
};
const onPaste = (event: React.ClipboardEvent) => {
const items = event.clipboardData?.items;
if (!items) return;
const text = event.clipboardData.getData("text");
if (text && text.length > 500 && props.allowAttachments) {
event.preventDefault();
const blob = new Blob([text], { type: "text/plain" });
const file = new File([blob], "Pasted text", {
type: "text/plain",
lastModified: Date.now(),
});
addFiles([file]);
return;
}
const files = Array.from(items)
.map(item => item.getAsFile())
.filter(file => file !== null);
if (props.allowAttachments && files.length > 0) {
addFiles(files);
}
};
const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
if (isGenerating && stop && enableInterrupt) {
if (showInterruptPrompt) {
stop();
setShowInterruptPrompt(false);
event.currentTarget.form?.requestSubmit();
} else if (
props.value ||
(props.allowAttachments && props.files?.length)
) {
setShowInterruptPrompt(true);
return;
}
}
event.currentTarget.form?.requestSubmit();
}
onKeyDownProp?.(event);
};
const textAreaRef = useRef<HTMLTextAreaElement>(null);
const [textAreaHeight, setTextAreaHeight] = useState<number>(0);
useEffect(() => {
if (textAreaRef.current) {
setTextAreaHeight(textAreaRef.current.offsetHeight);
}
}, [props.value]);
const showFileList =
props.allowAttachments && props.files && props.files.length > 0;
useAutosizeTextArea({
ref: textAreaRef,
maxHeight: 240,
borderWidth: 1,
dependencies: [props.value, showFileList],
});
return (
<div
className="relative flex w-full"
onDragOver={onDragOver}
onDragLeave={onDragLeave}
onDrop={onDrop}
>
{enableInterrupt && (
<InterruptPrompt
isOpen={showInterruptPrompt}
close={() => setShowInterruptPrompt(false)}
/>
)}
<RecordingPrompt
isVisible={isRecording}
onStopRecording={stopRecording}
/>
<div className="relative flex w-full items-center space-x-2">
<div className="relative flex-1">
<textarea
aria-label="Write your prompt here"
placeholder={placeholder}
ref={textAreaRef}
onPaste={onPaste}
onKeyDown={onKeyDown}
className={cn(
"z-10 w-full grow resize-none rounded-xl border border-input bg-background p-3 pr-24 text-sm ring-offset-background transition-[border] placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
showFileList && "pb-16",
className
)}
{...(props.allowAttachments
? omit(props, [
"allowAttachments",
"files",
"setFiles",
"onRAGFileUpload",
])
: omit(props, ["allowAttachments", "onRAGFileUpload"]))}
/>
{props.allowAttachments && (
<div className="absolute inset-x-3 bottom-0 z-20 overflow-x-scroll py-3">
<div className="flex space-x-3">
<AnimatePresence mode="popLayout">
{props.files?.map(file => {
return (
<FilePreview
key={file.name + String(file.lastModified)}
file={file}
onRemove={() => {
props.setFiles(files => {
if (!files) return null;
const filtered = Array.from(files).filter(
f => f !== file
);
if (filtered.length === 0) return null;
return filtered;
});
}}
/>
);
})}
</AnimatePresence>
</div>
</div>
)}
</div>
</div>
<div className="absolute right-3 top-3 z-20 flex gap-2">
{props.allowAttachments && (
<Button
type="button"
size="icon"
variant="outline"
className="h-8 w-8"
aria-label="Upload file to RAG"
disabled={false}
onClick={async () => {
const input = document.createElement("input");
input.type = "file";
input.accept = ".pdf,.txt,.md,.html,.csv,.json";
input.onchange = async e => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file && props.onRAGFileUpload) {
await props.onRAGFileUpload(file);
}
};
input.click();
}}
>
<Paperclip className="h-4 w-4" />
</Button>
)}
{isSpeechSupported && (
<Button
type="button"
variant="outline"
className={cn("h-8 w-8", isListening && "text-primary")}
aria-label="Voice input"
size="icon"
onClick={toggleListening}
>
<Mic className="h-4 w-4" />
</Button>
)}
{isGenerating && stop ? (
<Button
type="button"
size="icon"
className="h-8 w-8"
aria-label="Stop generating"
onClick={stop}
>
<Square className="h-3 w-3 animate-pulse" fill="currentColor" />
</Button>
) : (
<Button
type="submit"
size="icon"
className="h-8 w-8 transition-opacity"
aria-label="Send message"
disabled={props.value === "" || isGenerating}
>
<ArrowUp className="h-5 w-5" />
</Button>
)}
</div>
{props.allowAttachments && <FileUploadOverlay isDragging={isDragging} />}
<RecordingControls
isRecording={isRecording}
isTranscribing={isTranscribing}
audioStream={audioStream}
textAreaHeight={textAreaHeight}
onStopRecording={stopRecording}
/>
</div>
);
}
MessageInput.displayName = "MessageInput";
interface FileUploadOverlayProps {
isDragging: boolean;
}
function FileUploadOverlay({ isDragging }: FileUploadOverlayProps) {
return (
<AnimatePresence>
{isDragging && (
<motion.div
className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center space-x-2 rounded-xl border border-dashed border-border bg-background text-sm text-muted-foreground"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
aria-hidden
>
<Paperclip className="h-4 w-4" />
<span>Drop your files here to attach them.</span>
</motion.div>
)}
</AnimatePresence>
);
}
function TranscribingOverlay() {
return (
<motion.div
className="flex h-full w-full flex-col items-center justify-center rounded-xl bg-background/80 backdrop-blur-sm"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
>
<div className="relative">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<motion.div
className="absolute inset-0 h-8 w-8 animate-pulse rounded-full bg-primary/20"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1.2, opacity: 1 }}
transition={{
duration: 1,
repeat: Infinity,
repeatType: "reverse",
ease: "easeInOut",
}}
/>
</div>
<p className="mt-4 text-sm font-medium text-muted-foreground">
Transcribing audio...
</p>
</motion.div>
);
}
interface RecordingPromptProps {
isVisible: boolean;
onStopRecording: () => void;
}
function RecordingPrompt({ isVisible, onStopRecording }: RecordingPromptProps) {
return (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ top: 0, filter: "blur(5px)" }}
animate={{
top: -40,
filter: "blur(0px)",
transition: {
type: "spring",
filter: { type: "tween" },
},
}}
exit={{ top: 0, filter: "blur(5px)" }}
className="absolute left-1/2 flex -translate-x-1/2 cursor-pointer overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground"
onClick={onStopRecording}
>
<span className="mx-2.5 flex items-center">
<Info className="mr-2 h-3 w-3" />
Click to finish recording
</span>
</motion.div>
)}
</AnimatePresence>
);
}
interface RecordingControlsProps {
isRecording: boolean;
isTranscribing: boolean;
audioStream: MediaStream | null;
textAreaHeight: number;
onStopRecording: () => void;
}
function RecordingControls({
isRecording,
isTranscribing,
audioStream,
textAreaHeight,
onStopRecording,
}: RecordingControlsProps) {
if (isRecording) {
return (
<div
className="absolute inset-[1px] z-50 overflow-hidden rounded-xl"
style={{ height: textAreaHeight - 2 }}
>
<AudioVisualizer
stream={audioStream}
isRecording={isRecording}
onClick={onStopRecording}
/>
</div>
);
}
if (isTranscribing) {
return (
<div
className="absolute inset-[1px] z-50 overflow-hidden rounded-xl"
style={{ height: textAreaHeight - 2 }}
>
<TranscribingOverlay />
</div>
);
}
return null;
}

45
src/llama_stack/ui/components/chat-playground/message-list.tsx
View file

@ -1,45 +0,0 @@
import {
ChatMessage,
type ChatMessageProps,
type Message,
} from "@/components/chat-playground/chat-message";
import { TypingIndicator } from "@/components/chat-playground/typing-indicator";
type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>;
interface MessageListProps {
messages: Message[];
showTimeStamps?: boolean;
isTyping?: boolean;
messageOptions?:
| AdditionalMessageOptions
| ((message: Message) => AdditionalMessageOptions);
}
export function MessageList({
messages,
showTimeStamps = true,
isTyping = false,
messageOptions,
}: MessageListProps) {
return (
<div className="space-y-4 overflow-visible">
{messages.map((message, index) => {
const additionalOptions =
typeof messageOptions === "function"
? messageOptions(message)
: messageOptions;
return (
<ChatMessage
key={index}
showTimeStamp={showTimeStamps}
{...message}
{...additionalOptions}
/>
);
})}
{isTyping && <TypingIndicator />}
</div>
);
}

28
src/llama_stack/ui/components/chat-playground/prompt-suggestions.tsx
View file

@ -1,28 +0,0 @@
interface PromptSuggestionsProps {
label: string;
append: (message: { role: "user"; content: string }) => void;
suggestions: string[];
}
export function PromptSuggestions({
label,
append,
suggestions,
}: PromptSuggestionsProps) {
return (
<div className="space-y-6">
<h2 className="text-center text-2xl font-bold">{label}</h2>
<div className="flex gap-6 text-sm">
{suggestions.map(suggestion => (
<button
key={suggestion}
onClick={() => append({ role: "user", content: suggestion })}
className="h-max flex-1 rounded-xl border bg-background p-4 hover:bg-muted"
>
<p>{suggestion}</p>
</button>
))}
</div>
</div>
);
}

15
src/llama_stack/ui/components/chat-playground/typing-indicator.tsx
View file

@ -1,15 +0,0 @@
import { Dot } from "lucide-react";
export function TypingIndicator() {
return (
<div className="justify-left flex space-x-1">
<div className="rounded-lg bg-muted p-3">
<div className="flex -space-x-2.5">
<Dot className="h-5 w-5 animate-typing-dot-1" />
<Dot className="h-5 w-5 animate-typing-dot-2" />
<Dot className="h-5 w-5 animate-typing-dot-3" />
</div>
</div>
</div>
);
}

243
src/llama_stack/ui/components/chat-playground/vector-db-creator.tsx
View file

@ -1,243 +0,0 @@
"use client";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useAuthClient } from "@/hooks/use-auth-client";
import type { Model } from "llama-stack-client/resources/models";
interface VectorDBCreatorProps {
models: Model[];
onVectorDBCreated?: (vectorDbId: string) => void;
onCancel?: () => void;
}
interface VectorDBProvider {
api: string;
provider_id: string;
provider_type: string;
}
export function VectorDBCreator({
models,
onVectorDBCreated,
onCancel,
}: VectorDBCreatorProps) {
const [vectorDbName, setVectorDbName] = useState("");
const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState("");
const [selectedProvider, setSelectedProvider] = useState("faiss");
const [availableProviders, setAvailableProviders] = useState<
VectorDBProvider[]
>([]);
const [isCreating, setIsCreating] = useState(false);
const [isLoadingProviders, setIsLoadingProviders] = useState(false);
const [error, setError] = useState<string | null>(null);
const client = useAuthClient();
const embeddingModels = models.filter(
model => model.model_type === "embedding"
);
useEffect(() => {
const fetchProviders = async () => {
setIsLoadingProviders(true);
try {
const providersResponse = await client.providers.list();
const vectorIoProviders = providersResponse.filter(
(provider: VectorDBProvider) => provider.api === "vector_io"
);
setAvailableProviders(vectorIoProviders);
if (vectorIoProviders.length > 0) {
const faissProvider = vectorIoProviders.find(
(p: VectorDBProvider) => p.provider_id === "faiss"
);
setSelectedProvider(
faissProvider?.provider_id || vectorIoProviders[0].provider_id
);
}
} catch (err) {
console.error("Error fetching providers:", err);
setAvailableProviders([
{
api: "vector_io",
provider_id: "faiss",
provider_type: "inline::faiss",
},
]);
} finally {
setIsLoadingProviders(false);
}
};
fetchProviders();
}, [client]);
const handleCreate = async () => {
if (!vectorDbName.trim() || !selectedEmbeddingModel) {
setError("Please provide a name and select an embedding model");
return;
}
setIsCreating(true);
setError(null);
try {
const embeddingModel = embeddingModels.find(
m => m.identifier === selectedEmbeddingModel
);
if (!embeddingModel) {
throw new Error("Selected embedding model not found");
}
const embeddingDimension = embeddingModel.metadata
?.embedding_dimension as number;
if (!embeddingDimension) {
throw new Error("Embedding dimension not available for selected model");
}
const vectorDbId = vectorDbName.trim() || `vector_db_${Date.now()}`;
const response = await client.vectorDBs.register({
vector_db_id: vectorDbId,
embedding_model: selectedEmbeddingModel,
embedding_dimension: embeddingDimension,
provider_id: selectedProvider,
});
onVectorDBCreated?.(response.identifier || vectorDbId);
} catch (err) {
console.error("Error creating vector DB:", err);
setError(
err instanceof Error ? err.message : "Failed to create vector DB"
);
} finally {
setIsCreating(false);
}
};
return (
<Card className="p-6 space-y-4">
<h3 className="text-lg font-semibold">Create Vector Database</h3>
<div className="space-y-4">
<div>
<label className="text-sm font-medium block mb-2">
Vector DB Name
</label>
<Input
value={vectorDbName}
onChange={e => setVectorDbName(e.target.value)}
placeholder="My Vector Database"
/>
</div>
<div>
<label className="text-sm font-medium block mb-2">
Embedding Model
</label>
<Select
value={selectedEmbeddingModel}
onValueChange={setSelectedEmbeddingModel}
>
<SelectTrigger>
<SelectValue placeholder="Select Embedding Model" />
</SelectTrigger>
<SelectContent>
{embeddingModels.map(model => (
<SelectItem key={model.identifier} value={model.identifier}>
{model.identifier}
</SelectItem>
))}
</SelectContent>
</Select>
{selectedEmbeddingModel && (
<p className="text-xs text-muted-foreground mt-1">
Dimension:{" "}
{embeddingModels.find(
m => m.identifier === selectedEmbeddingModel
)?.metadata?.embedding_dimension || "Unknown"}
</p>
)}
</div>
<div>
<label className="text-sm font-medium block mb-2">
Vector Database Provider
</label>
<Select
value={selectedProvider}
onValueChange={setSelectedProvider}
disabled={isLoadingProviders}
>
<SelectTrigger>
<SelectValue
placeholder={
isLoadingProviders
? "Loading providers..."
: "Select Provider"
}
/>
</SelectTrigger>
<SelectContent>
{availableProviders.map(provider => (
<SelectItem
key={provider.provider_id}
value={provider.provider_id}
>
{provider.provider_id}
</SelectItem>
))}
</SelectContent>
</Select>
{selectedProvider && (
<p className="text-xs text-muted-foreground mt-1">
Selected provider: {selectedProvider}
</p>
)}
</div>
{error && (
<div className="text-destructive text-sm bg-destructive/10 p-2 rounded">
{error}
</div>
)}
<div className="flex gap-2 pt-2">
<Button
onClick={handleCreate}
disabled={
isCreating || !vectorDbName.trim() || !selectedEmbeddingModel
}
className="flex-1"
>
{isCreating ? "Creating..." : "Create Vector DB"}
</Button>
{onCancel && (
<Button variant="outline" onClick={onCancel} className="flex-1">
Cancel
</Button>
)}
</div>
</div>
<div className="text-xs text-muted-foreground bg-muted/50 p-3 rounded">
<strong>Note:</strong> This will create a new vector database that can
be used with RAG tools. After creation, you&apos;ll be able to upload
documents and use it for knowledge search in your agent conversations.
</div>
</Card>
);
}

170
src/llama_stack/ui/components/layout/app-sidebar.tsx
View file

@ -1,170 +0,0 @@
"use client";
import {
MessageSquareText,
MessagesSquare,
MoveUpRight,
Database,
MessageCircle,
Settings2,
Compass,
FileText,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Image from "next/image";
import { cn } from "@/lib/utils";
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarHeader,
} from "@/components/ui/sidebar";
const createItems = [
{
title: "Chat Playground",
url: "/chat-playground",
icon: MessageCircle,
},
];
const manageItems = [
{
title: "Chat Completions",
url: "/logs/chat-completions",
icon: MessageSquareText,
},
{
title: "Responses",
url: "/logs/responses",
icon: MessagesSquare,
},
{
title: "Vector Stores",
url: "/logs/vector-stores",
icon: Database,
},
{
title: "Prompts",
url: "/prompts",
icon: FileText,
},
{
title: "Documentation",
url: "https://llama-stack.readthedocs.io/en/latest/references/api_reference/index.html",
icon: MoveUpRight,
},
];
const optimizeItems: { title: string; url: string; icon: React.ElementType }[] =
[
{
title: "Evaluations",
url: "",
icon: Compass,
},
{
title: "Fine-tuning",
url: "",
icon: Settings2,
},
];
interface SidebarItem {
title: string;
url: string;
icon: React.ElementType;
}
export function AppSidebar() {
const pathname = usePathname();
const renderSidebarItems = (items: SidebarItem[]) => {
return items.map(item => {
const isActive = pathname.startsWith(item.url);
return (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
className={cn(
"justify-start",
isActive &&
"bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100"
)}
>
<Link href={item.url}>
<item.icon
className={cn(
isActive && "text-gray-900 dark:text-gray-100",
"mr-2 h-4 w-4"
)}
/>
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
);
});
};
return (
<Sidebar>
<SidebarHeader>
<Link href="/" className="flex items-center gap-2 p-2">
<Image
src="/logo.webp"
alt="Llama Stack"
width={32}
height={32}
className="h-8 w-8"
/>
<span className="font-semibold text-lg">Llama Stack</span>
</Link>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Create</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>{renderSidebarItems(createItems)}</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Manage</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>{renderSidebarItems(manageItems)}</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Optimize</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{optimizeItems.map(item => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
disabled
className="justify-start opacity-60 cursor-not-allowed"
>
<item.icon className="mr-2 h-4 w-4" />
<span>{item.title}</span>
<span className="ml-2 text-xs text-gray-500">
(Coming Soon)
</span>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
);
}

145
src/llama_stack/ui/components/layout/detail-layout.tsx
View file

@ -1,145 +0,0 @@
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
export function DetailLoadingView() {
return (
<>
<Skeleton className="h-8 w-3/4 mb-6" /> {/* Title Skeleton */}
<div className="flex flex-col md:flex-row gap-6">
<div className="flex-grow md:w-2/3 space-y-6">
{[...Array(2)].map((_, i) => (
<Card key={`main-skeleton-card-${i}`}>
<CardHeader>
<CardTitle>
<Skeleton className="h-6 w-1/2" />
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
</CardContent>
</Card>
))}
</div>
<div className="md:w-1/3">
<div className="p-4 border rounded-lg shadow-sm bg-white space-y-3">
<Skeleton className="h-6 w-1/3 mb-3" />{" "}
{/* Properties Title Skeleton */}
{[...Array(5)].map((_, i) => (
<div key={`prop-skeleton-${i}`} className="space-y-1">
<Skeleton className="h-4 w-1/4" />
<Skeleton className="h-4 w-1/2" />
</div>
))}
</div>
</div>
</div>
</>
);
}
export function DetailErrorView({
title,
id,
error,
}: {
title: string;
id: string;
error: Error;
}) {
return (
<>
<h1 className="text-2xl font-bold mb-6">{title}</h1>
<p>
Error loading details for ID {id}: {error.message}
</p>
</>
);
}
export function DetailNotFoundView({
title,
id,
}: {
title: string;
id: string;
}) {
return (
<>
<h1 className="text-2xl font-bold mb-6">{title}</h1>
<p>No details found for ID: {id}.</p>
</>
);
}
export interface PropertyItemProps {
label: string;
value: React.ReactNode;
className?: string;
hasBorder?: boolean;
}
export function PropertyItem({
label,
value,
className = "",
hasBorder = false,
}: PropertyItemProps) {
return (
<li
className={`${hasBorder ? "pt-1 mt-1 border-t border-gray-200" : ""} ${className}`}
>
<strong>{label}:</strong>{" "}
{typeof value === "string" || typeof value === "number" ? (
<span className="text-gray-900 dark:text-gray-100 font-medium">
{value}
</span>
) : (
value
)}
</li>
);
}
export interface PropertiesCardProps {
children: React.ReactNode;
}
export function PropertiesCard({ children }: PropertiesCardProps) {
return (
<Card>
<CardHeader>
<CardTitle>Properties</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
{children}
</ul>
</CardContent>
</Card>
);
}
export interface DetailLayoutProps {
title: string;
mainContent: React.ReactNode;
sidebar: React.ReactNode;
}
export function DetailLayout({
title,
mainContent,
sidebar,
}: DetailLayoutProps) {
return (
<>
<h1 className="text-2xl font-bold mb-6">{title}</h1>
<div className="flex flex-col md:flex-row gap-6">
<div className="flex-grow md:w-2/3 space-y-6">{mainContent}</div>
<div className="md:w-1/3">{sidebar}</div>
</div>
</>
);
}

47
src/llama_stack/ui/components/layout/logs-layout.tsx
View file

@ -1,47 +0,0 @@
"use client";
import React from "react";
import { usePathname, useParams } from "next/navigation";
import {
PageBreadcrumb,
BreadcrumbSegment,
} from "@/components/layout/page-breadcrumb";
import { truncateText } from "@/lib/truncate-text";
interface LogsLayoutProps {
children: React.ReactNode;
sectionLabel: string;
basePath: string;
}
export default function LogsLayout({
children,
sectionLabel,
basePath,
}: LogsLayoutProps) {
const pathname = usePathname();
const params = useParams();
let segments: BreadcrumbSegment[] = [];
if (pathname === basePath) {
segments = [{ label: sectionLabel }];
}
const idParam = params?.id;
if (idParam && typeof idParam === "string") {
segments = [
{ label: sectionLabel, href: basePath },
{ label: `Details (${truncateText(idParam, 20)})` },
];
}
return (
<div className="container mx-auto p-4 h-[calc(100vh-64px)] flex flex-col">
{segments.length > 0 && (
<PageBreadcrumb segments={segments} className="mb-4" />
)}
<div className="flex-1 min-h-0 flex flex-col">{children}</div>
</div>
);
}

49
src/llama_stack/ui/components/layout/page-breadcrumb.tsx
View file

@ -1,49 +0,0 @@
"use client";
import Link from "next/link";
import React from "react";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
export interface BreadcrumbSegment {
label: string;
href?: string;
}
interface PageBreadcrumbProps {
segments: BreadcrumbSegment[];
className?: string;
}
export function PageBreadcrumb({ segments, className }: PageBreadcrumbProps) {
if (!segments || segments.length === 0) {
return null;
}
return (
<Breadcrumb className={className}>
<BreadcrumbList>
{segments.map((segment, index) => (
<React.Fragment key={segment.label + index}>
<BreadcrumbItem>
{segment.href ? (
<BreadcrumbLink asChild>
<Link href={segment.href}>{segment.label}</Link>
</BreadcrumbLink>
) : (
<BreadcrumbPage>{segment.label}</BreadcrumbPage>
)}
</BreadcrumbItem>
{index < segments.length - 1 && <BreadcrumbSeparator />}
</React.Fragment>
))}
</BreadcrumbList>
</Breadcrumb>
);
}

138
src/llama_stack/ui/components/logs/logs-table-scroll.test.tsx
View file

@ -1,138 +0,0 @@
import React from "react";
import { render, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import { LogsTable, LogTableRow } from "./logs-table";
import { PaginationStatus } from "@/lib/types";
// Mock next/navigation
jest.mock("next/navigation", () => ({
useRouter: () => ({
push: jest.fn(),
}),
}));
// Mock the useInfiniteScroll hook
jest.mock("@/hooks/use-infinite-scroll", () => ({
useInfiniteScroll: jest.fn((onLoadMore, options) => {
const ref = React.useRef(null);
React.useEffect(() => {
// Simulate the observer behavior
if (options?.enabled && onLoadMore) {
// Trigger load after a delay to simulate intersection
const timeout = setTimeout(() => {
onLoadMore();
}, 100);
return () => clearTimeout(timeout);
}
}, [options?.enabled, onLoadMore]);
return ref;
}),
}));
// IntersectionObserver mock is already in jest.setup.ts
describe("LogsTable Viewport Loading", () => {
const mockData: LogTableRow[] = Array.from({ length: 10 }, (_, i) => ({
id: `row_${i}`,
input: `Input ${i}`,
output: `Output ${i}`,
model: "test-model",
createdTime: new Date().toISOString(),
detailPath: `/logs/test/${i}`,
}));
const defaultProps = {
data: mockData,
status: "idle" as PaginationStatus,
hasMore: true,
error: null,
caption: "Test table",
emptyMessage: "No data",
};
beforeEach(() => {
jest.clearAllMocks();
});
test("should trigger loadMore when sentinel is visible", async () => {
const mockLoadMore = jest.fn();
render(<LogsTable {...defaultProps} onLoadMore={mockLoadMore} />);
// Wait for the intersection observer to trigger
await waitFor(
() => {
expect(mockLoadMore).toHaveBeenCalled();
},
{ timeout: 300 }
);
expect(mockLoadMore).toHaveBeenCalledTimes(1);
});
test("should not trigger loadMore when already loading", async () => {
const mockLoadMore = jest.fn();
render(
<LogsTable
{...defaultProps}
status="loading-more"
onLoadMore={mockLoadMore}
/>
);
// Wait for possible triggers
await new Promise(resolve => setTimeout(resolve, 300));
expect(mockLoadMore).not.toHaveBeenCalled();
});
test("should not trigger loadMore when status is loading", async () => {
const mockLoadMore = jest.fn();
render(
<LogsTable {...defaultProps} status="loading" onLoadMore={mockLoadMore} />
);
// Wait for possible triggers
await new Promise(resolve => setTimeout(resolve, 300));
expect(mockLoadMore).not.toHaveBeenCalled();
});
test("should not trigger loadMore when hasMore is false", async () => {
const mockLoadMore = jest.fn();
render(
<LogsTable {...defaultProps} hasMore={false} onLoadMore={mockLoadMore} />
);
// Wait for possible triggers
await new Promise(resolve => setTimeout(resolve, 300));
expect(mockLoadMore).not.toHaveBeenCalled();
});
test("sentinel element should not be rendered when loading", () => {
const { container } = render(
<LogsTable {...defaultProps} status="loading-more" />
);
// Check that no sentinel row with height: 1 exists
const sentinelRow = container.querySelector('tr[style*="height: 1"]');
expect(sentinelRow).not.toBeInTheDocument();
});
test("sentinel element should be rendered when not loading and hasMore", () => {
const { container } = render(
<LogsTable {...defaultProps} hasMore={true} status="idle" />
);
// Check that sentinel row exists
const sentinelRow = container.querySelector('tr[style*="height: 1"]');
expect(sentinelRow).toBeInTheDocument();
});
});

371
src/llama_stack/ui/components/logs/logs-table.test.tsx
View file

@ -1,371 +0,0 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { LogsTable, LogTableRow } from "./logs-table";
import { PaginationStatus } from "@/lib/types";
// Mock next/navigation
const mockPush = jest.fn();
jest.mock("next/navigation", () => ({
useRouter: () => ({
push: mockPush,
}),
}));
// Mock helper functions
jest.mock("@/lib/truncate-text");
// Import the mocked functions
import { truncateText as originalTruncateText } from "@/lib/truncate-text";
// Cast to jest.Mock for typings
const truncateText = originalTruncateText as jest.Mock;
describe("LogsTable", () => {
const defaultProps = {
data: [] as LogTableRow[],
status: "idle" as PaginationStatus,
error: null,
caption: "Test table caption",
emptyMessage: "No data found",
};
beforeEach(() => {
// Reset all mocks before each test
mockPush.mockClear();
truncateText.mockClear();
// Default pass-through implementation
truncateText.mockImplementation((text: string | undefined) => text);
});
test("renders without crashing with default props", () => {
render(<LogsTable {...defaultProps} />);
expect(screen.getByText("No data found")).toBeInTheDocument();
});
test("click on a row navigates to the correct URL", () => {
const mockData: LogTableRow[] = [
{
id: "row_123",
input: "Test input",
output: "Test output",
model: "test-model",
createdTime: "2024-01-01 12:00:00",
detailPath: "/test/path/row_123",
},
];
render(<LogsTable {...defaultProps} data={mockData} />);
const row = screen.getByText("Test input").closest("tr");
if (row) {
fireEvent.click(row);
expect(mockPush).toHaveBeenCalledWith("/test/path/row_123");
} else {
throw new Error('Row with "Test input" not found for router mock test.');
}
});
describe("Loading State", () => {
test("renders skeleton UI when isLoading is true", () => {
const { container } = render(
<LogsTable {...defaultProps} status="loading" />
);
// Check for skeleton in the table caption
const tableCaption = container.querySelector("caption");
expect(tableCaption).toBeInTheDocument();
if (tableCaption) {
const captionSkeleton = tableCaption.querySelector(
'[data-slot="skeleton"]'
);
expect(captionSkeleton).toBeInTheDocument();
}
// Check for skeletons in the table body cells
const tableBody = container.querySelector("tbody");
expect(tableBody).toBeInTheDocument();
if (tableBody) {
const bodySkeletons = tableBody.querySelectorAll(
'[data-slot="skeleton"]'
);
expect(bodySkeletons.length).toBeGreaterThan(0);
}
// Check that table headers are still rendered
expect(screen.getByText("Input")).toBeInTheDocument();
expect(screen.getByText("Output")).toBeInTheDocument();
expect(screen.getByText("Model")).toBeInTheDocument();
expect(screen.getByText("Created")).toBeInTheDocument();
});
test("renders correct number of skeleton rows", () => {
const { container } = render(
<LogsTable {...defaultProps} status="loading" />
);
const skeletonRows = container.querySelectorAll("tbody tr");
expect(skeletonRows.length).toBe(3); // Should render 3 skeleton rows
});
});
describe("Error State", () => {
test("renders error message when error prop is provided", () => {
const errorMessage = "Network Error";
render(
<LogsTable
{...defaultProps}
status="error"
error={{ name: "Error", message: errorMessage } as Error}
/>
);
expect(
screen.getByText("Unable to load chat completions")
).toBeInTheDocument();
expect(screen.getByText(errorMessage)).toBeInTheDocument();
});
test("renders default error message when error.message is not available", () => {
render(
<LogsTable
{...defaultProps}
status="error"
error={{ name: "Error", message: "" } as Error}
/>
);
expect(
screen.getByText("Unable to load chat completions")
).toBeInTheDocument();
expect(
screen.getByText("An unexpected error occurred while loading the data.")
).toBeInTheDocument();
});
test("renders default error message when error prop is an object without message", () => {
render(
<LogsTable {...defaultProps} status="error" error={{} as Error} />
);
expect(
screen.getByText("Unable to load chat completions")
).toBeInTheDocument();
expect(
screen.getByText("An unexpected error occurred while loading the data.")
).toBeInTheDocument();
});
test("does not render table when in error state", () => {
render(
<LogsTable
{...defaultProps}
status="error"
error={{ name: "Error", message: "Test error" } as Error}
/>
);
const table = screen.queryByRole("table");
expect(table).not.toBeInTheDocument();
});
});
describe("Empty State", () => {
test("renders custom empty message when data array is empty", () => {
render(
<LogsTable
{...defaultProps}
data={[]}
emptyMessage="Custom empty message"
/>
);
expect(screen.getByText("Custom empty message")).toBeInTheDocument();
// Ensure that the table structure is NOT rendered in the empty state
const table = screen.queryByRole("table");
expect(table).not.toBeInTheDocument();
});
});
describe("Data Rendering", () => {
test("renders table caption, headers, and data correctly", () => {
const mockData: LogTableRow[] = [
{
id: "row_1",
input: "First input",
output: "First output",
model: "model-1",
createdTime: "2024-01-01 12:00:00",
detailPath: "/path/1",
},
{
id: "row_2",
input: "Second input",
output: "Second output",
model: "model-2",
createdTime: "2024-01-02 13:00:00",
detailPath: "/path/2",
},
];
render(
<LogsTable
{...defaultProps}
data={mockData}
caption="Custom table caption"
/>
);
// Table caption
expect(screen.getByText("Custom table caption")).toBeInTheDocument();
// Table headers
expect(screen.getByText("Input")).toBeInTheDocument();
expect(screen.getByText("Output")).toBeInTheDocument();
expect(screen.getByText("Model")).toBeInTheDocument();
expect(screen.getByText("Created")).toBeInTheDocument();
// Data rows
expect(screen.getByText("First input")).toBeInTheDocument();
expect(screen.getByText("First output")).toBeInTheDocument();
expect(screen.getByText("model-1")).toBeInTheDocument();
expect(screen.getByText("2024-01-01 12:00:00")).toBeInTheDocument();
expect(screen.getByText("Second input")).toBeInTheDocument();
expect(screen.getByText("Second output")).toBeInTheDocument();
expect(screen.getByText("model-2")).toBeInTheDocument();
expect(screen.getByText("2024-01-02 13:00:00")).toBeInTheDocument();
});
test("applies correct CSS classes to table rows", () => {
const mockData: LogTableRow[] = [
{
id: "row_1",
input: "Test input",
output: "Test output",
model: "test-model",
createdTime: "2024-01-01 12:00:00",
detailPath: "/test/path",
},
];
render(<LogsTable {...defaultProps} data={mockData} />);
const row = screen.getByText("Test input").closest("tr");
expect(row).toHaveClass("cursor-pointer");
expect(row).toHaveClass("hover:bg-muted/50");
});
test("applies correct alignment to Created column", () => {
const mockData: LogTableRow[] = [
{
id: "row_1",
input: "Test input",
output: "Test output",
model: "test-model",
createdTime: "2024-01-01 12:00:00",
detailPath: "/test/path",
},
];
render(<LogsTable {...defaultProps} data={mockData} />);
const createdCell = screen.getByText("2024-01-01 12:00:00").closest("td");
expect(createdCell).toHaveClass("text-right");
});
});
describe("Text Truncation", () => {
test("truncates input and output text using truncateText function", () => {
// Mock truncateText to return truncated versions
truncateText.mockImplementation((text: string | undefined) => {
if (typeof text === "string" && text.length > 10) {
return text.slice(0, 10) + "...";
}
return text;
});
const longInput =
"This is a very long input text that should be truncated";
const longOutput =
"This is a very long output text that should be truncated";
const mockData: LogTableRow[] = [
{
id: "row_1",
input: longInput,
output: longOutput,
model: "test-model",
createdTime: "2024-01-01 12:00:00",
detailPath: "/test/path",
},
];
render(<LogsTable {...defaultProps} data={mockData} />);
// Verify truncateText was called
expect(truncateText).toHaveBeenCalledWith(longInput);
expect(truncateText).toHaveBeenCalledWith(longOutput);
// Verify truncated text is displayed
const truncatedTexts = screen.getAllByText("This is a ...");
expect(truncatedTexts).toHaveLength(2); // one for input, one for output
truncatedTexts.forEach(textElement =>
expect(textElement).toBeInTheDocument()
);
});
test("does not truncate model names", () => {
const mockData: LogTableRow[] = [
{
id: "row_1",
input: "Test input",
output: "Test output",
model: "very-long-model-name-that-should-not-be-truncated",
createdTime: "2024-01-01 12:00:00",
detailPath: "/test/path",
},
];
render(<LogsTable {...defaultProps} data={mockData} />);
// Model name should not be passed to truncateText
expect(truncateText).not.toHaveBeenCalledWith(
"very-long-model-name-that-should-not-be-truncated"
);
// Full model name should be displayed
expect(
screen.getByText("very-long-model-name-that-should-not-be-truncated")
).toBeInTheDocument();
});
});
describe("Accessibility", () => {
test("table has proper role and structure", () => {
const mockData: LogTableRow[] = [
{
id: "row_1",
input: "Test input",
output: "Test output",
model: "test-model",
createdTime: "2024-01-01 12:00:00",
detailPath: "/test/path",
},
];
render(<LogsTable {...defaultProps} data={mockData} />);
const tables = screen.getAllByRole("table");
expect(tables).toHaveLength(2); // Fixed header table + body table
const columnHeaders = screen.getAllByRole("columnheader");
expect(columnHeaders).toHaveLength(4);
const rows = screen.getAllByRole("row");
expect(rows).toHaveLength(3); // 1 header row + 1 data row + 1 "no more items" row
expect(screen.getByText("Input")).toBeInTheDocument();
expect(screen.getByText("Output")).toBeInTheDocument();
expect(screen.getByText("Model")).toBeInTheDocument();
expect(screen.getByText("Created")).toBeInTheDocument();
});
});
});

195
src/llama_stack/ui/components/logs/logs-table.tsx
View file

@ -1,195 +0,0 @@
"use client";
import { useRouter } from "next/navigation";
import { useRef } from "react";
import { truncateText } from "@/lib/truncate-text";
import { PaginationStatus } from "@/lib/types";
import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
// Generic table row data interface
export interface LogTableRow {
id: string;
input: string;
output: string;
model: string;
createdTime: string;
detailPath: string;
}
interface LogsTableProps {
/** Array of log table row data to display */
data: LogTableRow[];
/** Current loading/error status */
status: PaginationStatus;
/** Whether more data is available to load */
hasMore?: boolean;
/** Error state, null if no error */
error: Error | null;
/** Table caption for accessibility */
caption: string;
/** Message to show when no data is available */
emptyMessage: string;
/** Callback function to load more data */
onLoadMore?: () => void;
}
export function LogsTable({
data,
status,
hasMore = false,
error,
caption,
emptyMessage,
onLoadMore,
}: LogsTableProps) {
const router = useRouter();
const tableContainerRef = useRef<HTMLDivElement>(null);
// Use Intersection Observer for infinite scroll
const sentinelRef = useInfiniteScroll(onLoadMore, {
enabled: hasMore && status === "idle",
rootMargin: "100px",
threshold: 0.1,
});
// Fixed header component
const FixedHeader = () => (
<div className="bg-background border-b border-border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/4">Input</TableHead>
<TableHead className="w-1/4">Output</TableHead>
<TableHead className="w-1/4">Model</TableHead>
<TableHead className="w-1/4 text-right">Created</TableHead>
</TableRow>
</TableHeader>
</Table>
</div>
);
if (status === "loading") {
return (
<div className="h-full flex flex-col">
<FixedHeader />
<div ref={tableContainerRef} className="overflow-auto flex-1 min-h-0">
<Table>
<TableCaption>
<Skeleton className="h-4 w-[250px] mx-auto" />
</TableCaption>
<TableBody>
{[...Array(3)].map((_, i) => (
<TableRow key={`skeleton-${i}`}>
<TableCell className="w-1/4">
<Skeleton className="h-4 w-full" />
</TableCell>
<TableCell className="w-1/4">
<Skeleton className="h-4 w-full" />
</TableCell>
<TableCell className="w-1/4">
<Skeleton className="h-4 w-3/4" />
</TableCell>
<TableCell className="w-1/4 text-right">
<Skeleton className="h-4 w-1/2 ml-auto" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}
if (status === "error") {
return (
<div className="flex flex-col items-center justify-center p-8 space-y-4">
<div className="text-destructive font-medium">
Unable to load chat completions
</div>
<div className="text-sm text-muted-foreground text-center max-w-md">
{error?.message ||
"An unexpected error occurred while loading the data."}
</div>
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
>
Retry
</button>
</div>
);
}
if (data.length === 0) {
return <p>{emptyMessage}</p>;
}
return (
<div className="h-full flex flex-col">
<FixedHeader />
<div ref={tableContainerRef} className="overflow-auto flex-1 min-h-0">
<Table>
<TableCaption className="sr-only">{caption}</TableCaption>
<TableBody>
{data.map(row => (
<TableRow
key={row.id}
onClick={() => router.push(row.detailPath)}
className="cursor-pointer hover:bg-muted/50"
>
<TableCell className="w-1/4">
{truncateText(row.input)}
</TableCell>
<TableCell className="w-1/4">
{truncateText(row.output)}
</TableCell>
<TableCell className="w-1/4">{row.model}</TableCell>
<TableCell className="w-1/4 text-right">
{row.createdTime}
</TableCell>
</TableRow>
))}
{/* Sentinel element for infinite scroll */}
{hasMore && status === "idle" && (
<TableRow ref={sentinelRef} style={{ height: 1 }}>
<TableCell colSpan={4} style={{ padding: 0, border: 0 }} />
</TableRow>
)}
{status === "loading-more" && (
<TableRow>
<TableCell colSpan={4} className="text-center py-4">
<div className="flex items-center justify-center space-x-2">
<Skeleton className="h-4 w-4 rounded-full" />
<span className="text-sm text-muted-foreground">
Loading more...
</span>
</div>
</TableCell>
</TableRow>
)}
{!hasMore && data.length > 0 && (
<TableRow>
<TableCell colSpan={4} className="text-center py-4">
<span className="text-sm text-muted-foreground">
No more items to load
</span>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>
);
}

4
src/llama_stack/ui/components/prompts/index.ts
View file

@ -1,4 +0,0 @@
export { PromptManagement } from "./prompt-management";
export { PromptList } from "./prompt-list";
export { PromptEditor } from "./prompt-editor";
export * from "./types";

309
src/llama_stack/ui/components/prompts/prompt-editor.test.tsx
View file

@ -1,309 +0,0 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { PromptEditor } from "./prompt-editor";
import type { Prompt, PromptFormData } from "./types";
describe("PromptEditor", () => {
const mockOnSave = jest.fn();
const mockOnCancel = jest.fn();
const mockOnDelete = jest.fn();
const defaultProps = {
onSave: mockOnSave,
onCancel: mockOnCancel,
onDelete: mockOnDelete,
};
beforeEach(() => {
jest.clearAllMocks();
});
describe("Create Mode", () => {
test("renders create form correctly", () => {
render(<PromptEditor {...defaultProps} />);
expect(screen.getByLabelText("Prompt Content *")).toBeInTheDocument();
expect(screen.getByText("Variables")).toBeInTheDocument();
expect(screen.getByText("Preview")).toBeInTheDocument();
expect(screen.getByText("Create Prompt")).toBeInTheDocument();
expect(screen.getByText("Cancel")).toBeInTheDocument();
});
test("shows preview placeholder when no content", () => {
render(<PromptEditor {...defaultProps} />);
expect(
screen.getByText("Enter content to preview the compiled prompt")
).toBeInTheDocument();
});
test("submits form with correct data", () => {
render(<PromptEditor {...defaultProps} />);
const promptInput = screen.getByLabelText("Prompt Content *");
fireEvent.change(promptInput, {
target: { value: "Hello {{name}}, welcome!" },
});
fireEvent.click(screen.getByText("Create Prompt"));
expect(mockOnSave).toHaveBeenCalledWith({
prompt: "Hello {{name}}, welcome!",
variables: [],
});
});
test("prevents submission with empty prompt", () => {
render(<PromptEditor {...defaultProps} />);
fireEvent.click(screen.getByText("Create Prompt"));
expect(mockOnSave).not.toHaveBeenCalled();
});
});
describe("Edit Mode", () => {
const mockPrompt: Prompt = {
prompt_id: "prompt_123",
prompt: "Hello {{name}}, how is {{weather}}?",
version: 1,
variables: ["name", "weather"],
is_default: true,
};
test("renders edit form with existing data", () => {
render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
expect(
screen.getByDisplayValue("Hello {{name}}, how is {{weather}}?")
).toBeInTheDocument();
expect(screen.getAllByText("name")).toHaveLength(2); // One in variables, one in preview
expect(screen.getAllByText("weather")).toHaveLength(2); // One in variables, one in preview
expect(screen.getByText("Update Prompt")).toBeInTheDocument();
expect(screen.getByText("Delete Prompt")).toBeInTheDocument();
});
test("submits updated data correctly", () => {
render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
const promptInput = screen.getByLabelText("Prompt Content *");
fireEvent.change(promptInput, {
target: { value: "Updated: Hello {{name}}!" },
});
fireEvent.click(screen.getByText("Update Prompt"));
expect(mockOnSave).toHaveBeenCalledWith({
prompt: "Updated: Hello {{name}}!",
variables: ["name", "weather"],
});
});
});
describe("Variables Management", () => {
test("adds new variable", () => {
render(<PromptEditor {...defaultProps} />);
const variableInput = screen.getByPlaceholderText(
"Add variable name (e.g. user_name, topic)"
);
fireEvent.change(variableInput, { target: { value: "testVar" } });
fireEvent.click(screen.getByText("Add"));
expect(screen.getByText("testVar")).toBeInTheDocument();
});
test("prevents adding duplicate variables", () => {
render(<PromptEditor {...defaultProps} />);
const variableInput = screen.getByPlaceholderText(
"Add variable name (e.g. user_name, topic)"
);
// Add first variable
fireEvent.change(variableInput, { target: { value: "test" } });
fireEvent.click(screen.getByText("Add"));
// Try to add same variable again
fireEvent.change(variableInput, { target: { value: "test" } });
// Button should be disabled
expect(screen.getByText("Add")).toBeDisabled();
});
test("removes variable", () => {
const mockPrompt: Prompt = {
prompt_id: "prompt_123",
prompt: "Hello {{name}}",
version: 1,
variables: ["name", "location"],
is_default: true,
};
render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
// Check that both variables are present initially
expect(screen.getAllByText("name").length).toBeGreaterThan(0);
expect(screen.getAllByText("location").length).toBeGreaterThan(0);
// Remove the location variable by clicking the X button with the specific title
const removeLocationButton = screen.getByTitle(
"Remove location variable"
);
fireEvent.click(removeLocationButton);
// Name should still be there, location should be gone from the variables section
expect(screen.getAllByText("name").length).toBeGreaterThan(0);
expect(
screen.queryByTitle("Remove location variable")
).not.toBeInTheDocument();
});
test("adds variable on Enter key", () => {
render(<PromptEditor {...defaultProps} />);
const variableInput = screen.getByPlaceholderText(
"Add variable name (e.g. user_name, topic)"
);
fireEvent.change(variableInput, { target: { value: "enterVar" } });
// Simulate Enter key press
fireEvent.keyPress(variableInput, {
key: "Enter",
code: "Enter",
charCode: 13,
preventDefault: jest.fn(),
});
// Check if the variable was added by looking for the badge
expect(screen.getAllByText("enterVar").length).toBeGreaterThan(0);
});
});
describe("Preview Functionality", () => {
test("shows live preview with variables", () => {
render(<PromptEditor {...defaultProps} />);
// Add prompt content
const promptInput = screen.getByLabelText("Prompt Content *");
fireEvent.change(promptInput, {
target: { value: "Hello {{name}}, welcome to {{place}}!" },
});
// Add variables
const variableInput = screen.getByPlaceholderText(
"Add variable name (e.g. user_name, topic)"
);
fireEvent.change(variableInput, { target: { value: "name" } });
fireEvent.click(screen.getByText("Add"));
fireEvent.change(variableInput, { target: { value: "place" } });
fireEvent.click(screen.getByText("Add"));
// Check that preview area shows the content
expect(screen.getByText("Compiled Prompt")).toBeInTheDocument();
});
test("shows variable value inputs in preview", () => {
const mockPrompt: Prompt = {
prompt_id: "prompt_123",
prompt: "Hello {{name}}",
version: 1,
variables: ["name"],
is_default: true,
};
render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
expect(screen.getByText("Variable Values")).toBeInTheDocument();
expect(
screen.getByPlaceholderText("Enter value for name")
).toBeInTheDocument();
});
test("shows color legend for variable states", () => {
render(<PromptEditor {...defaultProps} />);
// Add content to show preview
const promptInput = screen.getByLabelText("Prompt Content *");
fireEvent.change(promptInput, {
target: { value: "Hello {{name}}" },
});
expect(screen.getByText("Used")).toBeInTheDocument();
expect(screen.getByText("Unused")).toBeInTheDocument();
expect(screen.getByText("Undefined")).toBeInTheDocument();
});
});
describe("Error Handling", () => {
test("displays error message", () => {
const errorMessage = "Prompt contains undeclared variables";
render(<PromptEditor {...defaultProps} error={errorMessage} />);
expect(screen.getByText(errorMessage)).toBeInTheDocument();
});
});
describe("Delete Functionality", () => {
const mockPrompt: Prompt = {
prompt_id: "prompt_123",
prompt: "Hello {{name}}",
version: 1,
variables: ["name"],
is_default: true,
};
test("shows delete button in edit mode", () => {
render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
expect(screen.getByText("Delete Prompt")).toBeInTheDocument();
});
test("hides delete button in create mode", () => {
render(<PromptEditor {...defaultProps} />);
expect(screen.queryByText("Delete Prompt")).not.toBeInTheDocument();
});
test("calls onDelete with confirmation", () => {
const originalConfirm = window.confirm;
window.confirm = jest.fn(() => true);
render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
fireEvent.click(screen.getByText("Delete Prompt"));
expect(window.confirm).toHaveBeenCalledWith(
"Are you sure you want to delete this prompt? This action cannot be undone."
);
expect(mockOnDelete).toHaveBeenCalledWith("prompt_123");
window.confirm = originalConfirm;
});
test("does not delete when confirmation is cancelled", () => {
const originalConfirm = window.confirm;
window.confirm = jest.fn(() => false);
render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
fireEvent.click(screen.getByText("Delete Prompt"));
expect(mockOnDelete).not.toHaveBeenCalled();
window.confirm = originalConfirm;
});
});
describe("Cancel Functionality", () => {
test("calls onCancel when cancel button is clicked", () => {
render(<PromptEditor {...defaultProps} />);
fireEvent.click(screen.getByText("Cancel"));
expect(mockOnCancel).toHaveBeenCalled();
});
});
});

346
src/llama_stack/ui/components/prompts/prompt-editor.tsx
View file

@ -1,346 +0,0 @@
"use client";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { X, Plus, Save, Trash2 } from "lucide-react";
import { Prompt, PromptFormData } from "./types";
interface PromptEditorProps {
prompt?: Prompt;
onSave: (prompt: PromptFormData) => void;
onCancel: () => void;
onDelete?: (promptId: string) => void;
error?: string | null;
}
export function PromptEditor({
prompt,
onSave,
onCancel,
onDelete,
error,
}: PromptEditorProps) {
const [formData, setFormData] = useState<PromptFormData>({
prompt: "",
variables: [],
});
const [newVariable, setNewVariable] = useState("");
const [variableValues, setVariableValues] = useState<Record<string, string>>(
{}
);
useEffect(() => {
if (prompt) {
setFormData({
prompt: prompt.prompt || "",
variables: prompt.variables || [],
});
}
}, [prompt]);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!formData.prompt.trim()) {
return;
}
onSave(formData);
};
const addVariable = () => {
if (
newVariable.trim() &&
!formData.variables.includes(newVariable.trim())
) {
setFormData(prev => ({
...prev,
variables: [...prev.variables, newVariable.trim()],
}));
setNewVariable("");
}
};
const removeVariable = (variableToRemove: string) => {
setFormData(prev => ({
...prev,
variables: prev.variables.filter(
variable => variable !== variableToRemove
),
}));
};
const renderPreview = () => {
const text = formData.prompt;
if (!text) return text;
// Split text by variable patterns and process each part
const parts = text.split(/(\{\{\s*\w+\s*\}\})/g);
return parts.map((part, index) => {
const variableMatch = part.match(/\{\{\s*(\w+)\s*\}\}/);
if (variableMatch) {
const variableName = variableMatch[1];
const isDefined = formData.variables.includes(variableName);
const value = variableValues[variableName];
if (!isDefined) {
// Variable not in variables list - likely a typo/bug (RED)
return (
<span
key={index}
className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 px-1 rounded font-medium"
>
{part}
</span>
);
} else if (value && value.trim()) {
// Variable defined and has value - show the value (GREEN)
return (
<span
key={index}
className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-1 rounded font-medium"
>
{value}
</span>
);
} else {
// Variable defined but empty (YELLOW)
return (
<span
key={index}
className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-1 rounded font-medium"
>
{part}
</span>
);
}
}
return part;
});
};
const updateVariableValue = (variable: string, value: string) => {
setVariableValues(prev => ({
...prev,
[variable]: value,
}));
};
return (
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-4 bg-destructive/10 border border-destructive/20 rounded-md">
<p className="text-destructive text-sm">{error}</p>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Form Section */}
<div className="space-y-4">
<div>
<Label htmlFor="prompt">Prompt Content *</Label>
<Textarea
id="prompt"
value={formData.prompt}
onChange={e =>
setFormData(prev => ({ ...prev, prompt: e.target.value }))
}
placeholder="Enter your prompt content here. Use {{variable_name}} for dynamic variables."
className="min-h-32 font-mono mt-2"
required
/>
<p className="text-xs text-muted-foreground mt-2">
Use double curly braces around variable names, e.g.,{" "}
{`{{user_name}}`} or {`{{topic}}`}
</p>
</div>
<div className="space-y-3">
<Label className="text-sm font-medium">Variables</Label>
<div className="flex gap-2 mt-2">
<Input
value={newVariable}
onChange={e => setNewVariable(e.target.value)}
placeholder="Add variable name (e.g. user_name, topic)"
onKeyPress={e =>
e.key === "Enter" && (e.preventDefault(), addVariable())
}
className="flex-1"
/>
<Button
type="button"
onClick={addVariable}
size="sm"
disabled={
!newVariable.trim() ||
formData.variables.includes(newVariable.trim())
}
>
<Plus className="h-4 w-4" />
Add
</Button>
</div>
{formData.variables.length > 0 && (
<div className="border rounded-lg p-3 bg-muted/20">
<div className="flex flex-wrap gap-2">
{formData.variables.map(variable => (
<Badge
key={variable}
variant="secondary"
className="text-sm px-2 py-1"
>
{variable}
<button
type="button"
onClick={() => removeVariable(variable)}
className="ml-2 hover:text-destructive transition-colors"
title={`Remove ${variable} variable`}
>
<X className="h-3 w-3" />
</button>
</Badge>
))}
</div>
</div>
)}
<p className="text-xs text-muted-foreground">
Variables that can be used in the prompt template. Each variable
should match a {`{{variable}}`} placeholder in the content above.
</p>
</div>
</div>
{/* Preview Section */}
<div className="space-y-4">
<Card>
<CardHeader>
<CardTitle className="text-lg">Preview</CardTitle>
<CardDescription>
Live preview of compiled prompt and variable substitution.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{formData.prompt ? (
<>
{/* Variable Values */}
{formData.variables.length > 0 && (
<div className="space-y-3">
<Label className="text-sm font-medium">
Variable Values
</Label>
<div className="space-y-2">
{formData.variables.map(variable => (
<div
key={variable}
className="grid grid-cols-2 gap-3 items-center"
>
<div className="text-sm font-mono text-muted-foreground">
{variable}
</div>
<Input
id={`var-${variable}`}
value={variableValues[variable] || ""}
onChange={e =>
updateVariableValue(variable, e.target.value)
}
placeholder={`Enter value for ${variable}`}
className="text-sm"
/>
</div>
))}
</div>
<Separator />
</div>
)}
{/* Live Preview */}
<div>
<Label className="text-sm font-medium mb-2 block">
Compiled Prompt
</Label>
<div className="bg-muted/50 p-4 rounded-lg border">
<div className="text-sm leading-relaxed whitespace-pre-wrap">
{renderPreview()}
</div>
</div>
<div className="flex flex-wrap gap-4 mt-2 text-xs">
<div className="flex items-center gap-1">
<div className="w-3 h-3 bg-green-500 dark:bg-green-400 border rounded"></div>
<span className="text-muted-foreground">Used</span>
</div>
<div className="flex items-center gap-1">
<div className="w-3 h-3 bg-yellow-500 dark:bg-yellow-400 border rounded"></div>
<span className="text-muted-foreground">Unused</span>
</div>
<div className="flex items-center gap-1">
<div className="w-3 h-3 bg-red-500 dark:bg-red-400 border rounded"></div>
<span className="text-muted-foreground">Undefined</span>
</div>
</div>
</div>
</>
) : (
<div className="text-center py-8">
<div className="text-muted-foreground text-sm">
Enter content to preview the compiled prompt
</div>
<div className="text-xs text-muted-foreground mt-2">
Use {`{{variable_name}}`} to add dynamic variables
</div>
</div>
)}
</CardContent>
</Card>
</div>
</div>
<Separator />
<div className="flex justify-between">
<div>
{prompt && onDelete && (
<Button
type="button"
variant="destructive"
onClick={() => {
if (
confirm(
`Are you sure you want to delete this prompt? This action cannot be undone.`
)
) {
onDelete(prompt.prompt_id);
}
}}
>
<Trash2 className="h-4 w-4 mr-2" />
Delete Prompt
</Button>
)}
</div>
<div className="flex gap-2">
<Button type="button" variant="outline" onClick={onCancel}>
Cancel
</Button>
<Button type="submit">
<Save className="h-4 w-4 mr-2" />
{prompt ? "Update" : "Create"} Prompt
</Button>
</div>
</div>
</form>
);
}

259
src/llama_stack/ui/components/prompts/prompt-list.test.tsx
View file

@ -1,259 +0,0 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { PromptList } from "./prompt-list";
import type { Prompt } from "./types";
describe("PromptList", () => {
const mockOnEdit = jest.fn();
const mockOnDelete = jest.fn();
const defaultProps = {
prompts: [],
onEdit: mockOnEdit,
onDelete: mockOnDelete,
};
beforeEach(() => {
jest.clearAllMocks();
});
describe("Empty State", () => {
test("renders empty message when no prompts", () => {
render(<PromptList {...defaultProps} />);
expect(screen.getByText("No prompts yet")).toBeInTheDocument();
});
test("shows filtered empty message when search has no results", () => {
const prompts: Prompt[] = [
{
prompt_id: "prompt_123",
prompt: "Hello world",
version: 1,
variables: [],
is_default: false,
},
];
render(<PromptList {...defaultProps} prompts={prompts} />);
// Search for something that doesn't exist
const searchInput = screen.getByPlaceholderText("Search prompts...");
fireEvent.change(searchInput, { target: { value: "nonexistent" } });
expect(
screen.getByText("No prompts match your filters")
).toBeInTheDocument();
});
});
describe("Prompts Display", () => {
const mockPrompts: Prompt[] = [
{
prompt_id: "prompt_123",
prompt: "Hello {{name}}, how are you?",
version: 1,
variables: ["name"],
is_default: true,
},
{
prompt_id: "prompt_456",
prompt: "Summarize this {{text}} in {{length}} words",
version: 2,
variables: ["text", "length"],
is_default: false,
},
{
prompt_id: "prompt_789",
prompt: "Simple prompt with no variables",
version: 1,
variables: [],
is_default: false,
},
];
test("renders prompts table with correct headers", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
expect(screen.getByText("ID")).toBeInTheDocument();
expect(screen.getByText("Content")).toBeInTheDocument();
expect(screen.getByText("Variables")).toBeInTheDocument();
expect(screen.getByText("Version")).toBeInTheDocument();
expect(screen.getByText("Actions")).toBeInTheDocument();
});
test("renders prompt data correctly", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
// Check prompt IDs
expect(screen.getByText("prompt_123")).toBeInTheDocument();
expect(screen.getByText("prompt_456")).toBeInTheDocument();
expect(screen.getByText("prompt_789")).toBeInTheDocument();
// Check content
expect(
screen.getByText("Hello {{name}}, how are you?")
).toBeInTheDocument();
expect(
screen.getByText("Summarize this {{text}} in {{length}} words")
).toBeInTheDocument();
expect(
screen.getByText("Simple prompt with no variables")
).toBeInTheDocument();
// Check versions
expect(screen.getAllByText("1")).toHaveLength(2); // Two prompts with version 1
expect(screen.getByText("2")).toBeInTheDocument();
// Check default badge
expect(screen.getByText("Default")).toBeInTheDocument();
});
test("renders variables correctly", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
// Check variables display
expect(screen.getByText("name")).toBeInTheDocument();
expect(screen.getByText("text")).toBeInTheDocument();
expect(screen.getByText("length")).toBeInTheDocument();
expect(screen.getByText("None")).toBeInTheDocument(); // For prompt with no variables
});
test("prompt ID links are clickable and call onEdit", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
// Click on the first prompt ID link
const promptLink = screen.getByRole("button", { name: "prompt_123" });
fireEvent.click(promptLink);
expect(mockOnEdit).toHaveBeenCalledWith(mockPrompts[0]);
});
test("edit buttons call onEdit", () => {
const { container } = render(
<PromptList {...defaultProps} prompts={mockPrompts} />
);
// Find the action buttons in the table - they should be in the last column
const actionCells = container.querySelectorAll("td:last-child");
const firstActionCell = actionCells[0];
const editButton = firstActionCell?.querySelector("button");
expect(editButton).toBeInTheDocument();
fireEvent.click(editButton!);
expect(mockOnEdit).toHaveBeenCalledWith(mockPrompts[0]);
});
test("delete buttons call onDelete with confirmation", () => {
const originalConfirm = window.confirm;
window.confirm = jest.fn(() => true);
const { container } = render(
<PromptList {...defaultProps} prompts={mockPrompts} />
);
// Find the delete button (second button in the first action cell)
const actionCells = container.querySelectorAll("td:last-child");
const firstActionCell = actionCells[0];
const buttons = firstActionCell?.querySelectorAll("button");
const deleteButton = buttons?.[1]; // Second button should be delete
expect(deleteButton).toBeInTheDocument();
fireEvent.click(deleteButton!);
expect(window.confirm).toHaveBeenCalledWith(
"Are you sure you want to delete this prompt? This action cannot be undone."
);
expect(mockOnDelete).toHaveBeenCalledWith("prompt_123");
window.confirm = originalConfirm;
});
test("delete does not execute when confirmation is cancelled", () => {
const originalConfirm = window.confirm;
window.confirm = jest.fn(() => false);
const { container } = render(
<PromptList {...defaultProps} prompts={mockPrompts} />
);
const actionCells = container.querySelectorAll("td:last-child");
const firstActionCell = actionCells[0];
const buttons = firstActionCell?.querySelectorAll("button");
const deleteButton = buttons?.[1]; // Second button should be delete
expect(deleteButton).toBeInTheDocument();
fireEvent.click(deleteButton!);
expect(mockOnDelete).not.toHaveBeenCalled();
window.confirm = originalConfirm;
});
});
describe("Search Functionality", () => {
const mockPrompts: Prompt[] = [
{
prompt_id: "user_greeting",
prompt: "Hello {{name}}, welcome!",
version: 1,
variables: ["name"],
is_default: true,
},
{
prompt_id: "system_summary",
prompt: "Summarize the following text",
version: 1,
variables: [],
is_default: false,
},
];
test("filters prompts by prompt ID", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
const searchInput = screen.getByPlaceholderText("Search prompts...");
fireEvent.change(searchInput, { target: { value: "user" } });
expect(screen.getByText("user_greeting")).toBeInTheDocument();
expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
});
test("filters prompts by content", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
const searchInput = screen.getByPlaceholderText("Search prompts...");
fireEvent.change(searchInput, { target: { value: "welcome" } });
expect(screen.getByText("user_greeting")).toBeInTheDocument();
expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
});
test("search is case insensitive", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
const searchInput = screen.getByPlaceholderText("Search prompts...");
fireEvent.change(searchInput, { target: { value: "HELLO" } });
expect(screen.getByText("user_greeting")).toBeInTheDocument();
expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
});
test("clearing search shows all prompts", () => {
render(<PromptList {...defaultProps} prompts={mockPrompts} />);
const searchInput = screen.getByPlaceholderText("Search prompts...");
// Filter first
fireEvent.change(searchInput, { target: { value: "user" } });
expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
// Clear search
fireEvent.change(searchInput, { target: { value: "" } });
expect(screen.getByText("user_greeting")).toBeInTheDocument();
expect(screen.getByText("system_summary")).toBeInTheDocument();
});
});
});

164
src/llama_stack/ui/components/prompts/prompt-list.tsx
View file

@ -1,164 +0,0 @@
"use client";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { Edit, Search, Trash2 } from "lucide-react";
import { Prompt, PromptFilters } from "./types";
interface PromptListProps {
prompts: Prompt[];
onEdit: (prompt: Prompt) => void;
onDelete: (promptId: string) => void;
}
export function PromptList({ prompts, onEdit, onDelete }: PromptListProps) {
const [filters, setFilters] = useState<PromptFilters>({});
const filteredPrompts = prompts.filter(prompt => {
if (
filters.searchTerm &&
!(
prompt.prompt
?.toLowerCase()
.includes(filters.searchTerm.toLowerCase()) ||
prompt.prompt_id
.toLowerCase()
.includes(filters.searchTerm.toLowerCase())
)
) {
return false;
}
return true;
});
return (
<div className="space-y-4">
{/* Filters */}
<div className="flex flex-col sm:flex-row gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
<Input
placeholder="Search prompts..."
value={filters.searchTerm || ""}
onChange={e =>
setFilters(prev => ({ ...prev, searchTerm: e.target.value }))
}
className="pl-10"
/>
</div>
</div>
{/* Prompts Table */}
<div className="overflow-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>ID</TableHead>
<TableHead>Content</TableHead>
<TableHead>Variables</TableHead>
<TableHead>Version</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredPrompts.map(prompt => (
<TableRow key={prompt.prompt_id}>
<TableCell className="max-w-48">
<Button
variant="link"
className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 max-w-full justify-start"
onClick={() => onEdit(prompt)}
title={prompt.prompt_id}
>
<div className="truncate">{prompt.prompt_id}</div>
</Button>
</TableCell>
<TableCell className="max-w-64">
<div
className="font-mono text-xs text-muted-foreground truncate"
title={prompt.prompt || "No content"}
>
{prompt.prompt || "No content"}
</div>
</TableCell>
<TableCell>
{prompt.variables.length > 0 ? (
<div className="flex flex-wrap gap-1">
{prompt.variables.map(variable => (
<Badge
key={variable}
variant="outline"
className="text-xs"
>
{variable}
</Badge>
))}
</div>
) : (
<span className="text-muted-foreground text-sm">None</span>
)}
</TableCell>
<TableCell className="text-sm">
{prompt.version}
{prompt.is_default && (
<Badge variant="secondary" className="text-xs ml-2">
Default
</Badge>
)}
</TableCell>
<TableCell>
<div className="flex gap-1">
<Button
size="sm"
variant="outline"
onClick={() => onEdit(prompt)}
className="h-8 w-8 p-0"
>
<Edit className="h-3 w-3" />
</Button>
<Button
size="sm"
variant="outline"
onClick={() => {
if (
confirm(
`Are you sure you want to delete this prompt? This action cannot be undone.`
)
) {
onDelete(prompt.prompt_id);
}
}}
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{filteredPrompts.length === 0 && (
<div className="text-center py-12">
<div className="text-muted-foreground">
{prompts.length === 0
? "No prompts yet"
: "No prompts match your filters"}
</div>
</div>
)}
</div>
);
}

304
src/llama_stack/ui/components/prompts/prompt-management.test.tsx
View file

@ -1,304 +0,0 @@
import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import { PromptManagement } from "./prompt-management";
import type { Prompt } from "./types";
// Mock the auth client
const mockPromptsClient = {
list: jest.fn(),
create: jest.fn(),
update: jest.fn(),
delete: jest.fn(),
};
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: () => ({
prompts: mockPromptsClient,
}),
}));
describe("PromptManagement", () => {
beforeEach(() => {
jest.clearAllMocks();
});
describe("Loading State", () => {
test("renders loading state initially", () => {
mockPromptsClient.list.mockReturnValue(new Promise(() => {})); // Never resolves
render(<PromptManagement />);
expect(screen.getByText("Loading prompts...")).toBeInTheDocument();
expect(screen.getByText("Prompts")).toBeInTheDocument();
});
});
describe("Empty State", () => {
test("renders empty state when no prompts", async () => {
mockPromptsClient.list.mockResolvedValue([]);
render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("No prompts found.")).toBeInTheDocument();
});
expect(screen.getByText("Create Your First Prompt")).toBeInTheDocument();
});
test("opens modal when clicking 'Create Your First Prompt'", async () => {
mockPromptsClient.list.mockResolvedValue([]);
render(<PromptManagement />);
await waitFor(() => {
expect(
screen.getByText("Create Your First Prompt")
).toBeInTheDocument();
});
fireEvent.click(screen.getByText("Create Your First Prompt"));
expect(screen.getByText("Create New Prompt")).toBeInTheDocument();
});
});
describe("Error State", () => {
test("renders error state when API fails", async () => {
const error = new Error("API not found");
mockPromptsClient.list.mockRejectedValue(error);
render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText(/Error:/)).toBeInTheDocument();
});
});
test("renders specific error for 404", async () => {
const error = new Error("404 Not found");
mockPromptsClient.list.mockRejectedValue(error);
render(<PromptManagement />);
await waitFor(() => {
expect(
screen.getByText(/Prompts API endpoint not found/)
).toBeInTheDocument();
});
});
});
describe("Prompts List", () => {
const mockPrompts: Prompt[] = [
{
prompt_id: "prompt_123",
prompt: "Hello {{name}}, how are you?",
version: 1,
variables: ["name"],
is_default: true,
},
{
prompt_id: "prompt_456",
prompt: "Summarize this {{text}}",
version: 2,
variables: ["text"],
is_default: false,
},
];
test("renders prompts list correctly", async () => {
mockPromptsClient.list.mockResolvedValue(mockPrompts);
render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("prompt_123")).toBeInTheDocument();
});
expect(screen.getByText("prompt_456")).toBeInTheDocument();
expect(
screen.getByText("Hello {{name}}, how are you?")
).toBeInTheDocument();
expect(screen.getByText("Summarize this {{text}}")).toBeInTheDocument();
});
test("opens modal when clicking 'New Prompt' button", async () => {
mockPromptsClient.list.mockResolvedValue(mockPrompts);
render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("prompt_123")).toBeInTheDocument();
});
fireEvent.click(screen.getByText("New Prompt"));
expect(screen.getByText("Create New Prompt")).toBeInTheDocument();
});
});
describe("Modal Operations", () => {
const mockPrompts: Prompt[] = [
{
prompt_id: "prompt_123",
prompt: "Hello {{name}}",
version: 1,
variables: ["name"],
is_default: true,
},
];
test("closes modal when clicking cancel", async () => {
mockPromptsClient.list.mockResolvedValue(mockPrompts);
render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("prompt_123")).toBeInTheDocument();
});
// Open modal
fireEvent.click(screen.getByText("New Prompt"));
expect(screen.getByText("Create New Prompt")).toBeInTheDocument();
// Close modal
fireEvent.click(screen.getByText("Cancel"));
expect(screen.queryByText("Create New Prompt")).not.toBeInTheDocument();
});
test("creates new prompt successfully", async () => {
const newPrompt: Prompt = {
prompt_id: "prompt_new",
prompt: "New prompt content",
version: 1,
variables: [],
is_default: false,
};
mockPromptsClient.list.mockResolvedValue(mockPrompts);
mockPromptsClient.create.mockResolvedValue(newPrompt);
render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("prompt_123")).toBeInTheDocument();
});
// Open modal
fireEvent.click(screen.getByText("New Prompt"));
// Fill form
const promptInput = screen.getByLabelText("Prompt Content *");
fireEvent.change(promptInput, {
target: { value: "New prompt content" },
});
// Submit form
fireEvent.click(screen.getByText("Create Prompt"));
await waitFor(() => {
expect(mockPromptsClient.create).toHaveBeenCalledWith({
prompt: "New prompt content",
variables: [],
});
});
});
test("handles create error gracefully", async () => {
const error = {
detail: {
errors: [{ msg: "Prompt contains undeclared variables: ['test']" }],
},
};
mockPromptsClient.list.mockResolvedValue(mockPrompts);
mockPromptsClient.create.mockRejectedValue(error);
render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("prompt_123")).toBeInTheDocument();
});
// Open modal
fireEvent.click(screen.getByText("New Prompt"));
// Fill form
const promptInput = screen.getByLabelText("Prompt Content *");
fireEvent.change(promptInput, { target: { value: "Hello {{test}}" } });
// Submit form
fireEvent.click(screen.getByText("Create Prompt"));
await waitFor(() => {
expect(
screen.getByText("Prompt contains undeclared variables: ['test']")
).toBeInTheDocument();
});
});
test("updates existing prompt successfully", async () => {
const updatedPrompt: Prompt = {
...mockPrompts[0],
prompt: "Updated content",
};
mockPromptsClient.list.mockResolvedValue(mockPrompts);
mockPromptsClient.update.mockResolvedValue(updatedPrompt);
const { container } = render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("prompt_123")).toBeInTheDocument();
});
// Click edit button (first button in the action cell of the first row)
const actionCells = container.querySelectorAll("td:last-child");
const firstActionCell = actionCells[0];
const editButton = firstActionCell?.querySelector("button");
expect(editButton).toBeInTheDocument();
fireEvent.click(editButton!);
expect(screen.getByText("Edit Prompt")).toBeInTheDocument();
// Update content
const promptInput = screen.getByLabelText("Prompt Content *");
fireEvent.change(promptInput, { target: { value: "Updated content" } });
// Submit form
fireEvent.click(screen.getByText("Update Prompt"));
await waitFor(() => {
expect(mockPromptsClient.update).toHaveBeenCalledWith("prompt_123", {
prompt: "Updated content",
variables: ["name"],
version: 1,
set_as_default: true,
});
});
});
test("deletes prompt successfully", async () => {
mockPromptsClient.list.mockResolvedValue(mockPrompts);
mockPromptsClient.delete.mockResolvedValue(undefined);
// Mock window.confirm
const originalConfirm = window.confirm;
window.confirm = jest.fn(() => true);
const { container } = render(<PromptManagement />);
await waitFor(() => {
expect(screen.getByText("prompt_123")).toBeInTheDocument();
});
// Click delete button (second button in the action cell of the first row)
const actionCells = container.querySelectorAll("td:last-child");
const firstActionCell = actionCells[0];
const buttons = firstActionCell?.querySelectorAll("button");
const deleteButton = buttons?.[1]; // Second button should be delete
expect(deleteButton).toBeInTheDocument();
fireEvent.click(deleteButton!);
await waitFor(() => {
expect(mockPromptsClient.delete).toHaveBeenCalledWith("prompt_123");
});
// Restore window.confirm
window.confirm = originalConfirm;
});
});
});

233
src/llama_stack/ui/components/prompts/prompt-management.tsx
View file

@ -1,233 +0,0 @@
"use client";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { PromptList } from "./prompt-list";
import { PromptEditor } from "./prompt-editor";
import { Prompt, PromptFormData } from "./types";
import { useAuthClient } from "@/hooks/use-auth-client";
export function PromptManagement() {
const [prompts, setPrompts] = useState<Prompt[]>([]);
const [showPromptModal, setShowPromptModal] = useState(false);
const [editingPrompt, setEditingPrompt] = useState<Prompt | undefined>();
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); // For main page errors (loading, etc.)
const [modalError, setModalError] = useState<string | null>(null); // For form submission errors
const client = useAuthClient();
// Load prompts from API on component mount
useEffect(() => {
const fetchPrompts = async () => {
try {
setLoading(true);
setError(null);
const response = await client.prompts.list();
setPrompts(response || []);
} catch (err: unknown) {
console.error("Failed to load prompts:", err);
// Handle different types of errors
const error = err as Error & { status?: number };
if (error?.message?.includes("404") || error?.status === 404) {
setError(
"Prompts API endpoint not found. Please ensure your Llama Stack server supports the prompts API."
);
} else if (
error?.message?.includes("not implemented") ||
error?.message?.includes("not supported")
) {
setError(
"Prompts API is not yet implemented on this Llama Stack server."
);
} else {
setError(
`Failed to load prompts: ${error?.message || "Unknown error"}`
);
}
} finally {
setLoading(false);
}
};
fetchPrompts();
}, [client]);
const handleSavePrompt = async (formData: PromptFormData) => {
try {
setModalError(null);
if (editingPrompt) {
// Update existing prompt
const response = await client.prompts.update(editingPrompt.prompt_id, {
prompt: formData.prompt,
variables: formData.variables,
version: editingPrompt.version,
set_as_default: true,
});
// Update local state
setPrompts(prev =>
prev.map(p =>
p.prompt_id === editingPrompt.prompt_id ? response : p
)
);
} else {
// Create new prompt
const response = await client.prompts.create({
prompt: formData.prompt,
variables: formData.variables,
});
// Add to local state
setPrompts(prev => [response, ...prev]);
}
setShowPromptModal(false);
setEditingPrompt(undefined);
} catch (err) {
console.error("Failed to save prompt:", err);
// Extract specific error message from API response
const error = err as Error & {
message?: string;
detail?: { errors?: Array<{ msg?: string }> };
};
// Try to parse JSON from error message if it's a string
let parsedError = error;
if (typeof error?.message === "string" && error.message.includes("{")) {
try {
const jsonMatch = error.message.match(/\d+\s+(.+)/);
if (jsonMatch) {
parsedError = JSON.parse(jsonMatch[1]);
}
} catch {
// If parsing fails, use original error
}
}
// Try to get the specific validation error message
const validationError = parsedError?.detail?.errors?.[0]?.msg;
if (validationError) {
// Clean up validation error messages (remove "Value error, " prefix if present)
const cleanMessage = validationError.replace(/^Value error,\s*/i, "");
setModalError(cleanMessage);
} else {
// For other errors, format them nicely with line breaks
const statusMatch = error?.message?.match(/(\d+)\s+(.+)/);
if (statusMatch) {
const statusCode = statusMatch[1];
const response = statusMatch[2];
setModalError(
`Failed to save prompt: Status Code ${statusCode}\n\nResponse: ${response}`
);
} else {
const message = error?.message || error?.detail || "Unknown error";
setModalError(`Failed to save prompt: ${message}`);
}
}
}
};
const handleEditPrompt = (prompt: Prompt) => {
setEditingPrompt(prompt);
setShowPromptModal(true);
setModalError(null); // Clear any previous modal errors
};
const handleDeletePrompt = async (promptId: string) => {
try {
setError(null);
await client.prompts.delete(promptId);
setPrompts(prev => prev.filter(p => p.prompt_id !== promptId));
// If we're deleting the currently editing prompt, close the modal
if (editingPrompt && editingPrompt.prompt_id === promptId) {
setShowPromptModal(false);
setEditingPrompt(undefined);
}
} catch (err) {
console.error("Failed to delete prompt:", err);
setError("Failed to delete prompt");
}
};
const handleCreateNew = () => {
setEditingPrompt(undefined);
setShowPromptModal(true);
setModalError(null); // Clear any previous modal errors
};
const handleCancel = () => {
setShowPromptModal(false);
setEditingPrompt(undefined);
};
const renderContent = () => {
if (loading) {
return <div className="text-muted-foreground">Loading prompts...</div>;
}
if (error) {
return <div className="text-destructive">Error: {error}</div>;
}
if (!prompts || prompts.length === 0) {
return (
<div className="text-center py-12">
<p className="text-muted-foreground mb-4">No prompts found.</p>
<Button onClick={handleCreateNew}>
<Plus className="h-4 w-4 mr-2" />
Create Your First Prompt
</Button>
</div>
);
}
return (
<PromptList
prompts={prompts}
onEdit={handleEditPrompt}
onDelete={handleDeletePrompt}
/>
);
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-semibold">Prompts</h1>
<Button onClick={handleCreateNew} disabled={loading}>
<Plus className="h-4 w-4 mr-2" />
New Prompt
</Button>
</div>
{renderContent()}
{/* Create/Edit Prompt Modal */}
{showPromptModal && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-background border rounded-lg shadow-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
<div className="p-6 border-b">
<h2 className="text-2xl font-bold">
{editingPrompt ? "Edit Prompt" : "Create New Prompt"}
</h2>
</div>
<div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
<PromptEditor
prompt={editingPrompt}
onSave={handleSavePrompt}
onCancel={handleCancel}
onDelete={handleDeletePrompt}
error={modalError}
/>
</div>
</div>
</div>
)}
</div>
);
}

16
src/llama_stack/ui/components/prompts/types.ts
View file

@ -1,16 +0,0 @@
export interface Prompt {
prompt_id: string;
prompt: string | null;
version: number;
variables: string[];
is_default: boolean;
}
export interface PromptFormData {
prompt: string;
variables: string[];
}
export interface PromptFilters {
searchTerm?: string;
}

7
src/llama_stack/ui/components/providers/session-provider.tsx
View file

@ -1,7 +0,0 @@
"use client";
import { SessionProvider as NextAuthSessionProvider } from "next-auth/react";
export function SessionProvider({ children }: { children: React.ReactNode }) {
return <NextAuthSessionProvider>{children}</NextAuthSessionProvider>;
}

56
src/llama_stack/ui/components/responses/grouping/grouped-items-display.tsx
View file

@ -1,56 +0,0 @@
import { useFunctionCallGrouping } from "../hooks/function-call-grouping";
import { ItemRenderer } from "../items/item-renderer";
import { GroupedFunctionCallItemComponent } from "../items/grouped-function-call-item";
import {
isFunctionCallItem,
isFunctionCallOutputItem,
AnyResponseItem,
} from "../utils/item-types";
interface GroupedItemsDisplayProps {
items: AnyResponseItem[];
keyPrefix: string;
defaultRole?: string;
}
export function GroupedItemsDisplay({
items,
keyPrefix,
defaultRole = "unknown",
}: GroupedItemsDisplayProps) {
const groupedItems = useFunctionCallGrouping(items);
return (
<>
{groupedItems.map(groupedItem => {
// If this is a function call with an output, render the grouped component
if (
groupedItem.outputItem &&
isFunctionCallItem(groupedItem.item) &&
isFunctionCallOutputItem(groupedItem.outputItem)
) {
return (
<GroupedFunctionCallItemComponent
key={`${keyPrefix}-${groupedItem.index}`}
functionCall={groupedItem.item}
output={groupedItem.outputItem}
index={groupedItem.index}
keyPrefix={keyPrefix}
/>
);
}
// Otherwise, render the individual item
return (
<ItemRenderer
key={`${keyPrefix}-${groupedItem.index}`}
item={groupedItem.item}
index={groupedItem.index}
keyPrefix={keyPrefix}
defaultRole={defaultRole}
/>
);
})}
</>
);
}

92
src/llama_stack/ui/components/responses/hooks/function-call-grouping.ts
View file

@ -1,92 +0,0 @@
import { useMemo } from "react";
import {
isFunctionCallOutputItem,
AnyResponseItem,
FunctionCallOutputItem,
} from "../utils/item-types";
export interface GroupedItem {
item: AnyResponseItem;
index: number;
outputItem?: AnyResponseItem;
outputIndex?: number;
}
/**
* Hook to group function calls with their corresponding outputs
* @param items Array of items to group
* @returns Array of grouped items with their outputs
*/
export function useFunctionCallGrouping(
items: AnyResponseItem[]
): GroupedItem[] {
return useMemo(() => {
const groupedItems: GroupedItem[] = [];
const processedIndices = new Set<number>();
// Build a map of call_id to indices for function_call_output items
const callIdToIndices = new Map<string, number[]>();
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (isFunctionCallOutputItem(item)) {
if (!callIdToIndices.has(item.call_id)) {
callIdToIndices.set(item.call_id, []);
}
callIdToIndices.get(item.call_id)!.push(i);
}
}
// Process items and group function calls with their outputs
for (let i = 0; i < items.length; i++) {
if (processedIndices.has(i)) {
continue;
}
const currentItem = items[i];
if (
currentItem.type === "function_call" &&
"name" in currentItem &&
"call_id" in currentItem
) {
const functionCallId = currentItem.call_id as string;
let outputIndex = -1;
let outputItem: FunctionCallOutputItem | null = null;
const relatedIndices = callIdToIndices.get(functionCallId) || [];
for (const idx of relatedIndices) {
const potentialOutput = items[idx];
outputIndex = idx;
outputItem = potentialOutput as FunctionCallOutputItem;
break;
}
if (outputItem && outputIndex !== -1) {
// Group function call with its function_call_output
groupedItems.push({
item: currentItem,
index: i,
outputItem,
outputIndex,
});
// Mark both items as processed
processedIndices.add(i);
processedIndices.add(outputIndex);
// Matching function call and output found, skip to next item
continue;
}
}
// render normally
groupedItems.push({
item: currentItem,
index: i,
});
processedIndices.add(i);
}
return groupedItems;
}, [items]);
}

29
src/llama_stack/ui/components/responses/items/function-call-item.tsx
View file

@ -1,29 +0,0 @@
import {
MessageBlock,
ToolCallBlock,
} from "@/components/chat-playground/message-components";
import { FunctionCallItem } from "../utils/item-types";
interface FunctionCallItemProps {
item: FunctionCallItem;
index: number;
keyPrefix: string;
}
export function FunctionCallItemComponent({
item,
index,
keyPrefix,
}: FunctionCallItemProps) {
const name = item.name || "unknown";
const args = item.arguments || "{}";
const formattedFunctionCall = `${name}(${args})`;
return (
<MessageBlock
key={`${keyPrefix}-${index}`}
label="Function Call"
content={<ToolCallBlock>{formattedFunctionCall}</ToolCallBlock>}
/>
);
}

37
src/llama_stack/ui/components/responses/items/generic-item.tsx
View file

@ -1,37 +0,0 @@
import {
MessageBlock,
ToolCallBlock,
} from "@/components/chat-playground/message-components";
import { BaseItem } from "../utils/item-types";
interface GenericItemProps {
item: BaseItem;
index: number;
keyPrefix: string;
}
export function GenericItemComponent({
item,
index,
keyPrefix,
}: GenericItemProps) {
// Handle other types like function calls, tool outputs, etc.
const itemData = item as Record<string, unknown>;
const content = itemData.content
? typeof itemData.content === "string"
? itemData.content
: JSON.stringify(itemData.content, null, 2)
: JSON.stringify(itemData, null, 2);
const label = keyPrefix === "input" ? "Input" : "Output";
return (
<MessageBlock
key={`${keyPrefix}-${index}`}
label={label}
labelDetail={`(${itemData.type})`}
content={<ToolCallBlock>{content}</ToolCallBlock>}
/>
);
}

54
src/llama_stack/ui/components/responses/items/grouped-function-call-item.tsx
View file

@ -1,54 +0,0 @@
import {
MessageBlock,
ToolCallBlock,
} from "@/components/chat-playground/message-components";
import { FunctionCallItem, FunctionCallOutputItem } from "../utils/item-types";
interface GroupedFunctionCallItemProps {
functionCall: FunctionCallItem;
output: FunctionCallOutputItem;
index: number;
keyPrefix: string;
}
export function GroupedFunctionCallItemComponent({
functionCall,
output,
index,
keyPrefix,
}: GroupedFunctionCallItemProps) {
const name = functionCall.name || "unknown";
const args = functionCall.arguments || "{}";
// Extract the output content from function_call_output
let outputContent = "";
if (output.output) {
outputContent =
typeof output.output === "string"
? output.output
: JSON.stringify(output.output);
} else {
outputContent = JSON.stringify(output, null, 2);
}
const functionCallContent = (
<div>
<div className="mb-2">
<span className="text-sm text-gray-600">Arguments</span>
<ToolCallBlock>{`${name}(${args})`}</ToolCallBlock>
</div>
<div>
<span className="text-sm text-gray-600">Output</span>
<ToolCallBlock>{outputContent}</ToolCallBlock>
</div>
</div>
);
return (
<MessageBlock
key={`${keyPrefix}-${index}`}
label="Function Call"
content={functionCallContent}
/>
);
}

6
src/llama_stack/ui/components/responses/items/index.ts
View file

@ -1,6 +0,0 @@
export { MessageItemComponent } from "./message-item";
export { FunctionCallItemComponent } from "./function-call-item";
export { WebSearchItemComponent } from "./web-search-item";
export { GenericItemComponent } from "./generic-item";
export { GroupedFunctionCallItemComponent } from "./grouped-function-call-item";
export { ItemRenderer } from "./item-renderer";

60
src/llama_stack/ui/components/responses/items/item-renderer.tsx
View file

@ -1,60 +0,0 @@
import {
isMessageItem,
isFunctionCallItem,
isWebSearchCallItem,
AnyResponseItem,
} from "../utils/item-types";
import { MessageItemComponent } from "./message-item";
import { FunctionCallItemComponent } from "./function-call-item";
import { WebSearchItemComponent } from "./web-search-item";
import { GenericItemComponent } from "./generic-item";
interface ItemRendererProps {
item: AnyResponseItem;
index: number;
keyPrefix: string;
defaultRole?: string;
}
export function ItemRenderer({
item,
index,
keyPrefix,
defaultRole = "unknown",
}: ItemRendererProps) {
if (isMessageItem(item)) {
return (
<MessageItemComponent
item={item}
index={index}
keyPrefix={keyPrefix}
defaultRole={defaultRole}
/>
);
}
if (isFunctionCallItem(item)) {
return (
<FunctionCallItemComponent
item={item}
index={index}
keyPrefix={keyPrefix}
/>
);
}
if (isWebSearchCallItem(item)) {
return (
<WebSearchItemComponent item={item} index={index} keyPrefix={keyPrefix} />
);
}
// Fallback to generic item for unknown types
return (
<GenericItemComponent
item={item as Record<string, unknown>}
index={index}
keyPrefix={keyPrefix}
/>
);
}

41
src/llama_stack/ui/components/responses/items/message-item.tsx
View file

@ -1,41 +0,0 @@
import { MessageBlock } from "@/components/chat-playground/message-components";
import { MessageItem } from "../utils/item-types";
interface MessageItemProps {
item: MessageItem;
index: number;
keyPrefix: string;
defaultRole?: string;
}
export function MessageItemComponent({
item,
index,
keyPrefix,
defaultRole = "unknown",
}: MessageItemProps) {
let content = "";
if (typeof item.content === "string") {
content = item.content;
} else if (Array.isArray(item.content)) {
content = item.content
.map(c => {
return c.type === "input_text" || c.type === "output_text"
? c.text
: JSON.stringify(c);
})
.join(" ");
}
const role = item.role || defaultRole;
const label = role.charAt(0).toUpperCase() + role.slice(1);
return (
<MessageBlock
key={`${keyPrefix}-${index}`}
label={label}
content={content}
/>
);
}

28
src/llama_stack/ui/components/responses/items/web-search-item.tsx
View file

@ -1,28 +0,0 @@
import {
MessageBlock,
ToolCallBlock,
} from "@/components/chat-playground/message-components";
import { WebSearchCallItem } from "../utils/item-types";
interface WebSearchItemProps {
item: WebSearchCallItem;
index: number;
keyPrefix: string;
}
export function WebSearchItemComponent({
item,
index,
keyPrefix,
}: WebSearchItemProps) {
const formattedWebSearch = `web_search_call(status: ${item.status})`;
return (
<MessageBlock
key={`${keyPrefix}-${index}`}
label="Function Call"
labelDetail="(Web Search)"
content={<ToolCallBlock>{formattedWebSearch}</ToolCallBlock>}
/>
);
}

777
src/llama_stack/ui/components/responses/responses-detail.test.tsx
View file

@ -1,777 +0,0 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { ResponseDetailView } from "./responses-detail";
import { OpenAIResponse, InputItemListResponse } from "@/lib/types";
describe("ResponseDetailView", () => {
const defaultProps = {
response: null,
inputItems: null,
isLoading: false,
isLoadingInputItems: false,
error: null,
inputItemsError: null,
id: "test_id",
};
describe("Loading State", () => {
test("renders loading skeleton when isLoading is true", () => {
const { container } = render(
<ResponseDetailView {...defaultProps} isLoading={true} />
);
// Check for skeleton elements
const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
// The title is replaced by a skeleton when loading, so we shouldn't expect the text
});
});
describe("Error State", () => {
test("renders error message when error prop is provided", () => {
const errorMessage = "Network Error";
render(
<ResponseDetailView
{...defaultProps}
error={{ name: "Error", message: errorMessage }}
/>
);
expect(screen.getByText("Responses Details")).toBeInTheDocument();
// The error message is split across elements, so we check for parts
expect(
screen.getByText(/Error loading details for ID/)
).toBeInTheDocument();
expect(screen.getByText(/test_id/)).toBeInTheDocument();
expect(screen.getByText(/Network Error/)).toBeInTheDocument();
});
test("renders default error message when error.message is not available", () => {
render(
<ResponseDetailView
{...defaultProps}
error={{ name: "Error", message: "" }}
/>
);
expect(
screen.getByText(/Error loading details for ID/)
).toBeInTheDocument();
expect(screen.getByText(/test_id/)).toBeInTheDocument();
});
});
describe("Not Found State", () => {
test("renders not found message when response is null and not loading/error", () => {
render(<ResponseDetailView {...defaultProps} response={null} />);
expect(screen.getByText("Responses Details")).toBeInTheDocument();
// The message is split across elements
expect(screen.getByText(/No details found for ID:/)).toBeInTheDocument();
expect(screen.getByText(/test_id/)).toBeInTheDocument();
});
});
describe("Response Data Rendering", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "llama-test-model",
status: "completed",
output: [
{
type: "message",
role: "assistant",
content: "Test response output",
},
],
input: [
{
type: "message",
role: "user",
content: "Test input message",
},
],
temperature: 0.7,
top_p: 0.9,
parallel_tool_calls: true,
previous_response_id: "prev_resp_456",
};
test("renders response data with input and output sections", () => {
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
// Check main sections
expect(screen.getByText("Responses Details")).toBeInTheDocument();
expect(screen.getByText("Input")).toBeInTheDocument();
expect(screen.getByText("Output")).toBeInTheDocument();
// Check input content
expect(screen.getByText("Test input message")).toBeInTheDocument();
expect(screen.getByText("User")).toBeInTheDocument();
// Check output content
expect(screen.getByText("Test response output")).toBeInTheDocument();
expect(screen.getByText("Assistant")).toBeInTheDocument();
});
test("renders properties sidebar with all response metadata", () => {
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
// Check properties - use regex to handle text split across elements
expect(screen.getByText(/Created/)).toBeInTheDocument();
expect(
screen.getByText(new Date(1710000000 * 1000).toLocaleString())
).toBeInTheDocument();
// Check for the specific ID label (not Previous Response ID)
expect(
screen.getByText((content, element) => {
return element?.tagName === "STRONG" && content === "ID:";
})
).toBeInTheDocument();
expect(screen.getByText("resp_123")).toBeInTheDocument();
expect(screen.getByText(/Model/)).toBeInTheDocument();
expect(screen.getByText("llama-test-model")).toBeInTheDocument();
expect(screen.getByText(/Status/)).toBeInTheDocument();
expect(screen.getByText("completed")).toBeInTheDocument();
expect(screen.getByText(/Temperature/)).toBeInTheDocument();
expect(screen.getByText("0.7")).toBeInTheDocument();
expect(screen.getByText(/Top P/)).toBeInTheDocument();
expect(screen.getByText("0.9")).toBeInTheDocument();
expect(screen.getByText(/Parallel Tool Calls/)).toBeInTheDocument();
expect(screen.getByText("Yes")).toBeInTheDocument();
expect(screen.getByText(/Previous Response ID/)).toBeInTheDocument();
expect(screen.getByText("prev_resp_456")).toBeInTheDocument();
});
test("handles optional properties correctly", () => {
const minimalResponse: OpenAIResponse = {
id: "resp_minimal",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [],
};
render(
<ResponseDetailView {...defaultProps} response={minimalResponse} />
);
// Should show required properties
expect(screen.getByText("resp_minimal")).toBeInTheDocument();
expect(screen.getByText("test-model")).toBeInTheDocument();
expect(screen.getByText("completed")).toBeInTheDocument();
// Should not show optional properties
expect(screen.queryByText("Temperature")).not.toBeInTheDocument();
expect(screen.queryByText("Top P")).not.toBeInTheDocument();
expect(screen.queryByText("Parallel Tool Calls")).not.toBeInTheDocument();
expect(
screen.queryByText("Previous Response ID")
).not.toBeInTheDocument();
});
test("renders error information when response has error", () => {
const errorResponse: OpenAIResponse = {
...mockResponse,
error: {
code: "invalid_request",
message: "The request was invalid",
},
};
render(<ResponseDetailView {...defaultProps} response={errorResponse} />);
// The error is shown in the properties sidebar, not as a separate "Error" label
expect(
screen.getByText("invalid_request: The request was invalid")
).toBeInTheDocument();
});
});
describe("Input Items Handling", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [{ type: "message", role: "assistant", content: "output" }],
input: [{ type: "message", role: "user", content: "fallback input" }],
};
test("shows loading state for input items", () => {
render(
<ResponseDetailView
{...defaultProps}
response={mockResponse}
isLoadingInputItems={true}
/>
);
// Check for skeleton loading in input items section
const { container } = render(
<ResponseDetailView
{...defaultProps}
response={mockResponse}
isLoadingInputItems={true}
/>
);
const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
expect(skeletons.length).toBeGreaterThan(0);
});
test("shows error message for input items with fallback", () => {
render(
<ResponseDetailView
{...defaultProps}
response={mockResponse}
inputItemsError={{
name: "Error",
message: "Failed to load input items",
}}
/>
);
expect(
screen.getByText(
"Error loading input items: Failed to load input items"
)
).toBeInTheDocument();
expect(
screen.getByText("Falling back to response input data.")
).toBeInTheDocument();
// Should still show fallback input data
expect(screen.getByText("fallback input")).toBeInTheDocument();
});
test("uses input items data when available", () => {
const mockInputItems: InputItemListResponse = {
object: "list",
data: [
{
type: "message",
role: "user",
content: "input from items API",
},
],
};
render(
<ResponseDetailView
{...defaultProps}
response={mockResponse}
inputItems={mockInputItems}
/>
);
// Should show input items data, not response.input
expect(screen.getByText("input from items API")).toBeInTheDocument();
expect(screen.queryByText("fallback input")).not.toBeInTheDocument();
});
test("falls back to response.input when input items is empty", () => {
const emptyInputItems: InputItemListResponse = {
object: "list",
data: [],
};
render(
<ResponseDetailView
{...defaultProps}
response={mockResponse}
inputItems={emptyInputItems}
/>
);
// Should show fallback input data
expect(screen.getByText("fallback input")).toBeInTheDocument();
});
test("shows no input message when no data available", () => {
const responseWithoutInput: OpenAIResponse = {
...mockResponse,
input: [],
};
render(
<ResponseDetailView
{...defaultProps}
response={responseWithoutInput}
inputItems={null}
/>
);
expect(screen.getByText("No input data available.")).toBeInTheDocument();
});
});
describe("Input Display Components", () => {
test("renders string content input correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [
{
type: "message",
role: "user",
content: "Simple string input",
},
],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(screen.getByText("Simple string input")).toBeInTheDocument();
expect(screen.getByText("User")).toBeInTheDocument();
});
test("renders array content input correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [
{
type: "message",
role: "user",
content: [
{ type: "input_text", text: "First part" },
{ type: "output_text", text: "Second part" },
],
},
],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(screen.getByText("First part Second part")).toBeInTheDocument();
expect(screen.getByText("User")).toBeInTheDocument();
});
test("renders non-message input types correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [
{
type: "function_call",
content: "function call content",
},
],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(screen.getByText("function call content")).toBeInTheDocument();
// Use getAllByText to find the specific "Input" with the type detail
const inputElements = screen.getAllByText("Input");
expect(inputElements.length).toBeGreaterThan(0);
expect(screen.getByText("(function_call)")).toBeInTheDocument();
});
test("handles input with object content", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [
{
type: "custom_type",
content: JSON.stringify({ key: "value", nested: { data: "test" } }),
},
],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
// Should show JSON stringified content (without quotes around keys in the rendered output)
expect(screen.getByText(/key.*value/)).toBeInTheDocument();
// Use getAllByText to find the specific "Input" with the type detail
const inputElements = screen.getAllByText("Input");
expect(inputElements.length).toBeGreaterThan(0);
expect(screen.getByText("(custom_type)")).toBeInTheDocument();
});
test("renders function call input correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [
{
type: "function_call",
id: "call_456",
status: "completed",
name: "input_function",
arguments: '{"param": "value"}',
},
],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(
screen.getByText('input_function({"param": "value"})')
).toBeInTheDocument();
expect(screen.getByText("Function Call")).toBeInTheDocument();
});
test("renders web search call input correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [
{
type: "web_search_call",
id: "search_789",
status: "completed",
},
],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(
screen.getByText("web_search_call(status: completed)")
).toBeInTheDocument();
expect(screen.getByText("Function Call")).toBeInTheDocument();
expect(screen.getByText("(Web Search)")).toBeInTheDocument();
});
});
describe("Output Display Components", () => {
test("renders message output with string content", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "message",
role: "assistant",
content: "Simple string output",
},
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(screen.getByText("Simple string output")).toBeInTheDocument();
expect(screen.getByText("Assistant")).toBeInTheDocument();
});
test("renders message output with array content", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "message",
role: "assistant",
content: [
{ type: "output_text", text: "First output" },
{ type: "input_text", text: "Second output" },
],
},
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(
screen.getByText("First output Second output")
).toBeInTheDocument();
expect(screen.getByText("Assistant")).toBeInTheDocument();
});
test("renders function call output correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "function_call",
id: "call_123",
status: "completed",
name: "search_function",
arguments: '{"query": "test"}',
},
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(
screen.getByText('search_function({"query": "test"})')
).toBeInTheDocument();
expect(screen.getByText("Function Call")).toBeInTheDocument();
});
test("renders function call output without arguments", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "function_call",
id: "call_123",
status: "completed",
name: "simple_function",
},
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(screen.getByText("simple_function({})")).toBeInTheDocument();
expect(screen.getByText(/Function Call/)).toBeInTheDocument();
});
test("renders web search call output correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "web_search_call",
id: "search_123",
status: "completed",
},
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(
screen.getByText("web_search_call(status: completed)")
).toBeInTheDocument();
expect(screen.getByText(/Function Call/)).toBeInTheDocument();
expect(screen.getByText("(Web Search)")).toBeInTheDocument();
});
test("renders unknown output types with JSON fallback", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "unknown_type",
custom_field: "custom_value",
data: { nested: "object" },
} as unknown,
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
// Should show JSON stringified content
expect(
screen.getByText(/custom_field.*custom_value/)
).toBeInTheDocument();
expect(screen.getByText("(unknown_type)")).toBeInTheDocument();
});
test("shows no output message when output array is empty", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(screen.getByText("No output data available.")).toBeInTheDocument();
});
test("groups function call with its output correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "function_call",
id: "call_123",
status: "completed",
name: "get_weather",
arguments: '{"city": "Tokyo"}',
},
{
type: "message",
role: "assistant",
call_id: "call_123",
content: "sunny and warm",
} as unknown, // Using any to bypass the type restriction for this test
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
// Should show the function call and message as separate items (not grouped)
expect(screen.getByText("Function Call")).toBeInTheDocument();
expect(
screen.getByText('get_weather({"city": "Tokyo"})')
).toBeInTheDocument();
expect(screen.getByText("Assistant")).toBeInTheDocument();
expect(screen.getByText("sunny and warm")).toBeInTheDocument();
// Should NOT have the grouped "Arguments" and "Output" labels
expect(screen.queryByText("Arguments")).not.toBeInTheDocument();
});
test("groups function call with function_call_output correctly", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "function_call",
call_id: "call_123",
status: "completed",
name: "get_weather",
arguments: '{"city": "Tokyo"}',
},
{
type: "function_call_output",
id: "fc_68364957013081...",
status: "completed",
call_id: "call_123",
output: "sunny and warm",
} as unknown,
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
// Should show the function call grouped with its clean output
expect(screen.getByText("Function Call")).toBeInTheDocument();
expect(screen.getByText("Arguments")).toBeInTheDocument();
expect(
screen.getByText('get_weather({"city": "Tokyo"})')
).toBeInTheDocument();
// Use getAllByText since there are multiple "Output" elements (card title and output label)
const outputElements = screen.getAllByText("Output");
expect(outputElements.length).toBeGreaterThan(0);
expect(screen.getByText("sunny and warm")).toBeInTheDocument();
});
});
describe("Edge Cases and Error Handling", () => {
test("handles missing role in message input", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [],
input: [
{
type: "message",
content: "Message without role",
},
],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
expect(screen.getByText("Message without role")).toBeInTheDocument();
expect(screen.getByText("Unknown")).toBeInTheDocument(); // Default role
});
test("handles missing name in function call output", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "function_call",
id: "call_123",
status: "completed",
},
],
input: [],
};
render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
// When name is missing, it falls back to JSON.stringify of the entire output
const functionCallElements = screen.getAllByText(/function_call/);
expect(functionCallElements.length).toBeGreaterThan(0);
expect(screen.getByText(/call_123/)).toBeInTheDocument();
});
});
});

171
src/llama_stack/ui/components/responses/responses-detail.tsx
View file

@ -1,171 +0,0 @@
"use client";
import { OpenAIResponse, InputItemListResponse } from "@/lib/types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import {
DetailLoadingView,
DetailErrorView,
DetailNotFoundView,
DetailLayout,
PropertiesCard,
PropertyItem,
} from "@/components/layout/detail-layout";
import { GroupedItemsDisplay } from "./grouping/grouped-items-display";
interface ResponseDetailViewProps {
response: OpenAIResponse | null;
inputItems: InputItemListResponse | null;
isLoading: boolean;
isLoadingInputItems: boolean;
error: Error | null;
inputItemsError: Error | null;
id: string;
}
export function ResponseDetailView({
response,
inputItems,
isLoading,
isLoadingInputItems,
error,
inputItemsError,
id,
}: ResponseDetailViewProps) {
const title = "Responses Details";
if (error) {
return <DetailErrorView title={title} id={id} error={error} />;
}
if (isLoading) {
return <DetailLoadingView title={title} />;
}
if (!response) {
return <DetailNotFoundView title={title} id={id} />;
}
// Main content cards
const mainContent = (
<>
<Card>
<CardHeader>
<CardTitle>Input</CardTitle>
</CardHeader>
<CardContent>
{/* Show loading state for input items */}
{isLoadingInputItems ? (
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
) : inputItemsError ? (
<div className="text-red-500 text-sm">
Error loading input items: {inputItemsError.message}
<br />
<span className="text-gray-500 text-xs">
Falling back to response input data.
</span>
</div>
) : null}
{/* Display input items if available, otherwise fall back to response.input */}
{(() => {
const dataToDisplay =
inputItems?.data && inputItems.data.length > 0
? inputItems.data
: response.input;
if (dataToDisplay && dataToDisplay.length > 0) {
return (
<GroupedItemsDisplay
items={dataToDisplay}
keyPrefix="input"
defaultRole="unknown"
/>
);
} else {
return (
<p className="text-gray-500 italic text-sm">
No input data available.
</p>
);
}
})()}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Output</CardTitle>
</CardHeader>
<CardContent>
{response.output?.length > 0 ? (
<GroupedItemsDisplay
items={response.output}
keyPrefix="output"
defaultRole="assistant"
/>
) : (
<p className="text-gray-500 italic text-sm">
No output data available.
</p>
)}
</CardContent>
</Card>
</>
);
// Properties sidebar
const sidebar = (
<PropertiesCard>
<PropertyItem
label="Created"
value={new Date(response.created_at * 1000).toLocaleString()}
/>
<PropertyItem label="ID" value={response.id} />
<PropertyItem label="Model" value={response.model} />
<PropertyItem label="Status" value={response.status} hasBorder />
{response.temperature && (
<PropertyItem
label="Temperature"
value={response.temperature}
hasBorder
/>
)}
{response.top_p && <PropertyItem label="Top P" value={response.top_p} />}
{response.parallel_tool_calls && (
<PropertyItem
label="Parallel Tool Calls"
value={response.parallel_tool_calls ? "Yes" : "No"}
/>
)}
{response.previous_response_id && (
<PropertyItem
label="Previous Response ID"
value={
<span className="text-xs">{response.previous_response_id}</span>
}
hasBorder
/>
)}
{response.error && (
<PropertyItem
label="Error"
value={
<span className="text-red-900 font-medium">
{response.error.code}: {response.error.message}
</span>
}
className="pt-1 mt-1 border-t border-red-200"
/>
)}
</PropertiesCard>
);
return (
<DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
);
}

673
src/llama_stack/ui/components/responses/responses-table.test.tsx
View file

@ -1,673 +0,0 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { ResponsesTable } from "./responses-table";
import { OpenAIResponse } from "@/lib/types";
// Mock next/navigation
const mockPush = jest.fn();
jest.mock("next/navigation", () => ({
useRouter: () => ({
push: mockPush,
}),
}));
// Mock next-auth
jest.mock("next-auth/react", () => ({
useSession: () => ({
status: "authenticated",
data: { accessToken: "mock-token" },
}),
}));
// Mock helper functions
jest.mock("@/lib/truncate-text");
// Mock the auth client hook
const mockClient = {
responses: {
list: jest.fn(),
},
};
jest.mock("@/hooks/use-auth-client", () => ({
useAuthClient: () => mockClient,
}));
// Mock the usePagination hook
const mockLoadMore = jest.fn();
jest.mock("@/hooks/use-pagination", () => ({
usePagination: jest.fn(() => ({
data: [],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
})),
}));
// Import the mocked functions
import { truncateText as originalTruncateText } from "@/lib/truncate-text";
// Import the mocked hook
import { usePagination } from "@/hooks/use-pagination";
const mockedUsePagination = usePagination as jest.MockedFunction<
typeof usePagination
>;
// Cast to jest.Mock for typings
const truncateText = originalTruncateText as jest.Mock;
describe("ResponsesTable", () => {
const defaultProps = {};
beforeEach(() => {
// Reset all mocks before each test
mockPush.mockClear();
truncateText.mockClear();
mockLoadMore.mockClear();
jest.clearAllMocks();
// Default pass-through implementation
truncateText.mockImplementation((text: string | undefined) => text);
// Default hook return value
mockedUsePagination.mockReturnValue({
data: [],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
});
test("renders without crashing with default props", () => {
render(<ResponsesTable {...defaultProps} />);
expect(screen.getByText("No responses found.")).toBeInTheDocument();
});
test("click on a row navigates to the correct URL", () => {
const mockResponse: OpenAIResponse = {
id: "resp_123",
object: "response",
created_at: Math.floor(Date.now() / 1000),
model: "llama-test-model",
status: "completed",
output: [
{
type: "message",
role: "assistant",
content: "Test output",
},
],
input: [
{
type: "message",
role: "user",
content: "Test input",
},
],
};
// Configure the mock to return our test data
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
const row = screen.getByText("Test input").closest("tr");
if (row) {
fireEvent.click(row);
expect(mockPush).toHaveBeenCalledWith("/logs/responses/resp_123");
} else {
throw new Error('Row with "Test input" not found for router mock test.');
}
});
describe("Loading State", () => {
test("renders skeleton UI when status is loading", () => {
mockedUsePagination.mockReturnValue({
data: [],
status: "loading",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
const { container } = render(<ResponsesTable {...defaultProps} />);
// Check for skeleton in the table caption
const tableCaption = container.querySelector("caption");
expect(tableCaption).toBeInTheDocument();
if (tableCaption) {
const captionSkeleton = tableCaption.querySelector(
'[data-slot="skeleton"]'
);
expect(captionSkeleton).toBeInTheDocument();
}
// Check for skeletons in the table body cells
const tableBody = container.querySelector("tbody");
expect(tableBody).toBeInTheDocument();
if (tableBody) {
const bodySkeletons = tableBody.querySelectorAll(
'[data-slot="skeleton"]'
);
expect(bodySkeletons.length).toBeGreaterThan(0);
}
});
});
describe("Error State", () => {
test("renders error message when error is provided", () => {
const errorMessage = "Network Error";
mockedUsePagination.mockReturnValue({
data: [],
status: "error",
hasMore: false,
error: { name: "Error", message: errorMessage } as Error,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(
screen.getByText("Unable to load chat completions")
).toBeInTheDocument();
expect(screen.getByText(errorMessage)).toBeInTheDocument();
});
test.each([{ name: "Error", message: "" }, {}])(
"renders default error message when error has no message",
errorObject => {
mockedUsePagination.mockReturnValue({
data: [],
status: "error",
hasMore: false,
error: errorObject as Error,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(
screen.getByText("Unable to load chat completions")
).toBeInTheDocument();
expect(
screen.getByText(
"An unexpected error occurred while loading the data."
)
).toBeInTheDocument();
}
);
});
describe("Empty State", () => {
test('renders "No responses found." and no table when data array is empty', () => {
render(<ResponsesTable {...defaultProps} />);
expect(screen.getByText("No responses found.")).toBeInTheDocument();
// Ensure that the table structure is NOT rendered in the empty state
const table = screen.queryByRole("table");
expect(table).not.toBeInTheDocument();
});
});
describe("Data Rendering", () => {
test("renders table caption, headers, and response data correctly", () => {
const mockResponses: OpenAIResponse[] = [
{
id: "resp_1",
object: "response" as const,
created_at: 1710000000,
model: "llama-test-model",
status: "completed",
output: [
{
type: "message" as const,
role: "assistant" as const,
content: "Test output",
},
],
input: [
{
type: "message",
role: "user",
content: "Test input",
},
],
},
{
id: "resp_2",
object: "response" as const,
created_at: 1710001000,
model: "llama-another-model",
status: "completed",
output: [
{
type: "message" as const,
role: "assistant" as const,
content: "Another output",
},
],
input: [
{
type: "message",
role: "user",
content: "Another input",
},
],
},
];
mockedUsePagination.mockReturnValue({
data: mockResponses,
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
// Table caption
expect(
screen.getByText("A list of your recent responses.")
).toBeInTheDocument();
// Table headers
expect(screen.getByText("Input")).toBeInTheDocument();
expect(screen.getByText("Output")).toBeInTheDocument();
expect(screen.getByText("Model")).toBeInTheDocument();
expect(screen.getByText("Created")).toBeInTheDocument();
// Data rows
expect(screen.getByText("Test input")).toBeInTheDocument();
expect(screen.getByText("Test output")).toBeInTheDocument();
expect(screen.getByText("llama-test-model")).toBeInTheDocument();
expect(
screen.getByText(new Date(1710000000 * 1000).toLocaleString())
).toBeInTheDocument();
expect(screen.getByText("Another input")).toBeInTheDocument();
expect(screen.getByText("Another output")).toBeInTheDocument();
expect(screen.getByText("llama-another-model")).toBeInTheDocument();
expect(
screen.getByText(new Date(1710001000 * 1000).toLocaleString())
).toBeInTheDocument();
});
});
describe("Input Text Extraction", () => {
test("extracts text from string content", () => {
const mockResponse: OpenAIResponse = {
id: "resp_string",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [{ type: "message", role: "assistant", content: "output" }],
input: [
{
type: "message",
role: "user",
content: "Simple string input",
},
],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(screen.getByText("Simple string input")).toBeInTheDocument();
});
test("extracts text from array content with input_text type", () => {
const mockResponse: OpenAIResponse = {
id: "resp_array",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [{ type: "message", role: "assistant", content: "output" }],
input: [
{
type: "message",
role: "user",
content: [
{ type: "input_text", text: "Array input text" },
{ type: "input_text", text: "Should not be used" },
],
},
],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(screen.getByText("Array input text")).toBeInTheDocument();
});
test("returns empty string when no message input found", () => {
const mockResponse: OpenAIResponse = {
id: "resp_no_input",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [{ type: "message", role: "assistant", content: "output" }],
input: [
{
type: "other_type",
content: "Not a message",
},
],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
const { container } = render(<ResponsesTable {...defaultProps} />);
// Find the input cell (first cell in the data row) and verify it's empty
const inputCell = container.querySelector("tbody tr td:first-child");
expect(inputCell).toBeInTheDocument();
expect(inputCell).toHaveTextContent("");
});
});
describe("Output Text Extraction", () => {
test("extracts text from string message content", () => {
const mockResponse: OpenAIResponse = {
id: "resp_string_output",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "message",
role: "assistant",
content: "Simple string output",
},
],
input: [{ type: "message", content: "input" }],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(screen.getByText("Simple string output")).toBeInTheDocument();
});
test("extracts text from array message content with output_text type", () => {
const mockResponse: OpenAIResponse = {
id: "resp_array_output",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "message",
role: "assistant",
content: [
{ type: "output_text", text: "Array output text" },
{ type: "output_text", text: "Should not be used" },
],
},
],
input: [{ type: "message", content: "input" }],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(screen.getByText("Array output text")).toBeInTheDocument();
});
test("formats function call output", () => {
const mockResponse: OpenAIResponse = {
id: "resp_function_call",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "function_call",
id: "call_123",
status: "completed",
name: "search_function",
arguments: '{"query": "test"}',
},
],
input: [{ type: "message", content: "input" }],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(
screen.getByText('search_function({"query": "test"})')
).toBeInTheDocument();
});
test("formats function call output without arguments", () => {
const mockResponse: OpenAIResponse = {
id: "resp_function_no_args",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "function_call",
id: "call_123",
status: "completed",
name: "simple_function",
},
],
input: [{ type: "message", content: "input" }],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(screen.getByText("simple_function({})")).toBeInTheDocument();
});
test("formats web search call output", () => {
const mockResponse: OpenAIResponse = {
id: "resp_web_search",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "web_search_call",
id: "search_123",
status: "completed",
},
],
input: [{ type: "message", content: "input" }],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
expect(
screen.getByText("web_search_call(status: completed)")
).toBeInTheDocument();
});
test("falls back to JSON.stringify for unknown tool call types", () => {
const mockResponse: OpenAIResponse = {
id: "resp_unknown_tool",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "unknown_call",
id: "unknown_123",
status: "completed",
custom_field: "custom_value",
} as unknown,
],
input: [{ type: "message", content: "input" }],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
// Should contain the JSON stringified version
expect(screen.getByText(/unknown_call/)).toBeInTheDocument();
});
test("falls back to JSON.stringify for entire output when no message or tool call found", () => {
const mockResponse: OpenAIResponse = {
id: "resp_fallback",
object: "response",
created_at: 1710000000,
model: "test-model",
status: "completed",
output: [
{
type: "unknown_type",
data: "some data",
} as unknown,
],
input: [{ type: "message", content: "input" }],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
// Should contain the JSON stringified version of the output array
expect(screen.getByText(/unknown_type/)).toBeInTheDocument();
});
});
describe("Text Truncation", () => {
test("truncates long input and output text", () => {
// Specific mock implementation for this test
truncateText.mockImplementation(
(text: string | undefined, maxLength?: number) => {
const defaultTestMaxLength = 10;
const effectiveMaxLength = maxLength ?? defaultTestMaxLength;
return typeof text === "string" && text.length > effectiveMaxLength
? text.slice(0, effectiveMaxLength) + "..."
: text;
}
);
const longInput =
"This is a very long input message that should be truncated.";
const longOutput =
"This is a very long output message that should also be truncated.";
const mockResponse: OpenAIResponse = {
id: "resp_trunc",
object: "response",
created_at: 1710002000,
model: "llama-trunc-model",
status: "completed",
output: [
{
type: "message",
role: "assistant",
content: longOutput,
},
],
input: [
{
type: "message",
role: "user",
content: longInput,
},
],
};
mockedUsePagination.mockReturnValue({
data: [mockResponse],
status: "idle",
hasMore: false,
error: null,
loadMore: mockLoadMore,
});
render(<ResponsesTable {...defaultProps} />);
// The truncated text should be present for both input and output
const truncatedTexts = screen.getAllByText(
longInput.slice(0, 10) + "..."
);
expect(truncatedTexts.length).toBe(2); // one for input, one for output
});
});
});

169
src/llama_stack/ui/components/responses/responses-table.tsx
View file

@ -1,169 +0,0 @@
"use client";
import {
OpenAIResponse,
ResponseInputMessageContent,
UsePaginationOptions,
} from "@/lib/types";
import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
import { usePagination } from "@/hooks/use-pagination";
import type { ResponseListResponse } from "llama-stack-client/resources/responses/responses";
import {
isMessageInput,
isMessageItem,
isFunctionCallItem,
isWebSearchCallItem,
MessageItem,
FunctionCallItem,
WebSearchCallItem,
} from "./utils/item-types";
interface ResponsesTableProps {
/** Optional pagination configuration */
paginationOptions?: UsePaginationOptions;
}
/**
* Helper function to convert ResponseListResponse.Data to OpenAIResponse
*/
const convertResponseListData = (
responseData: ResponseListResponse.Data
): OpenAIResponse => {
return {
id: responseData.id,
created_at: responseData.created_at,
model: responseData.model,
object: responseData.object,
status: responseData.status,
output: responseData.output as OpenAIResponse["output"],
input: responseData.input as OpenAIResponse["input"],
error: responseData.error,
parallel_tool_calls: responseData.parallel_tool_calls,
previous_response_id: responseData.previous_response_id,
temperature: responseData.temperature,
top_p: responseData.top_p,
truncation: responseData.truncation,
};
};
function getInputText(response: OpenAIResponse): string {
const firstInput = response.input.find(isMessageInput);
if (firstInput) {
return extractContentFromItem(firstInput);
}
return "";
}
function getOutputText(response: OpenAIResponse): string {
const firstMessage = response.output.find(item =>
isMessageItem(item as Record<string, unknown>)
);
if (firstMessage) {
const content = extractContentFromItem(firstMessage as MessageItem);
if (content) {
return content;
}
}
const functionCall = response.output.find(item =>
isFunctionCallItem(item as Record<string, unknown>)
);
if (functionCall) {
return formatFunctionCall(functionCall as FunctionCallItem);
}
const webSearchCall = response.output.find(item =>
isWebSearchCallItem(item as Record<string, unknown>)
);
if (webSearchCall) {
return formatWebSearchCall(webSearchCall as WebSearchCallItem);
}
return JSON.stringify(response.output);
}
function extractContentFromItem(item: {
content?: string | ResponseInputMessageContent[];
}): string {
if (!item.content) {
return "";
}
if (typeof item.content === "string") {
return item.content;
} else if (Array.isArray(item.content)) {
const textContent = item.content.find(
(c: ResponseInputMessageContent) =>
c.type === "input_text" || c.type === "output_text"
);
return textContent?.text || "";
}
return "";
}
function formatFunctionCall(functionCall: FunctionCallItem): string {
const args = functionCall.arguments || "{}";
const name = functionCall.name || "unknown";
return `${name}(${args})`;
}
function formatWebSearchCall(webSearchCall: WebSearchCallItem): string {
return `web_search_call(status: ${webSearchCall.status})`;
}
function formatResponseToRow(response: OpenAIResponse): LogTableRow {
return {
id: response.id,
input: getInputText(response),
output: getOutputText(response),
model: response.model,
createdTime: new Date(response.created_at * 1000).toLocaleString(),
detailPath: `/logs/responses/${response.id}`,
};
}
export function ResponsesTable({ paginationOptions }: ResponsesTableProps) {
const fetchFunction = async (
client: ReturnType<typeof import("@/hooks/use-auth-client").useAuthClient>,
params: {
after?: string;
limit: number;
model?: string;
order?: string;
}
) => {
const response = await client.responses.list({
after: params.after,
limit: params.limit,
...(params.model && { model: params.model }),
...(params.order && { order: params.order }),
} as Parameters<typeof client.responses.list>[0]);
const listResponse = response as ResponseListResponse;
return {
...listResponse,
data: listResponse.data.map(convertResponseListData),
};
};
const { data, status, hasMore, error, loadMore } = usePagination({
...paginationOptions,
fetchFunction,
errorMessagePrefix: "responses",
});
const formattedData = data.map(formatResponseToRow);
return (
<LogsTable
data={formattedData}
status={status}
hasMore={hasMore}
error={error}
onLoadMore={loadMore}
caption="A list of your recent responses."
emptyMessage="No responses found."
/>
);
}

61
src/llama_stack/ui/components/responses/utils/item-types.ts
View file

@ -1,61 +0,0 @@
/**
* Type guards for different item types in responses
*/
import type {
ResponseInput,
ResponseOutput,
ResponseMessage,
ResponseToolCall,
} from "@/lib/types";
export interface BaseItem {
type: string;
[key: string]: unknown;
}
export type MessageItem = ResponseMessage;
export type FunctionCallItem = ResponseToolCall & { type: "function_call" };
export type WebSearchCallItem = ResponseToolCall & { type: "web_search_call" };
export type FunctionCallOutputItem = BaseItem & {
type: "function_call_output";
call_id: string;
output?: string | object;
};
export type AnyResponseItem =
| ResponseInput
| ResponseOutput
| FunctionCallOutputItem;
export function isMessageInput(
item: ResponseInput
): item is ResponseInput & { type: "message" } {
return item.type === "message";
}
export function isMessageItem(item: AnyResponseItem): item is MessageItem {
return item.type === "message" && "content" in item;
}
export function isFunctionCallItem(
item: AnyResponseItem
): item is FunctionCallItem {
return item.type === "function_call" && "name" in item;
}
export function isWebSearchCallItem(
item: AnyResponseItem
): item is WebSearchCallItem {
return item.type === "web_search_call";
}
export function isFunctionCallOutputItem(
item: AnyResponseItem
): item is FunctionCallOutputItem {
return (
item.type === "function_call_output" &&
"call_id" in item &&
typeof (item as Record<string, unknown>).call_id === "string"
);
}

198
src/llama_stack/ui/components/ui/audio-visualizer.tsx
View file

@ -1,198 +0,0 @@
"use client";
import { useEffect, useRef } from "react";
// Configuration constants for the audio analyzer
const AUDIO_CONFIG = {
FFT_SIZE: 512,
SMOOTHING: 0.8,
MIN_BAR_HEIGHT: 2,
MIN_BAR_WIDTH: 2,
BAR_SPACING: 1,
COLOR: {
MIN_INTENSITY: 100, // Minimum gray value (darker)
MAX_INTENSITY: 255, // Maximum gray value (brighter)
INTENSITY_RANGE: 155, // MAX_INTENSITY - MIN_INTENSITY
},
} as const;
interface AudioVisualizerProps {
stream: MediaStream | null;
isRecording: boolean;
onClick: () => void;
}
export function AudioVisualizer({
stream,
isRecording,
onClick,
}: AudioVisualizerProps) {
// Refs for managing audio context and animation
const canvasRef = useRef<HTMLCanvasElement>(null);
const audioContextRef = useRef<AudioContext | null>(null);
const analyserRef = useRef<AnalyserNode | null>(null);
const animationFrameRef = useRef<number>();
const containerRef = useRef<HTMLDivElement>(null);
// Cleanup function to stop visualization and close audio context
const cleanup = () => {
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
}
if (audioContextRef.current) {
audioContextRef.current.close();
}
};
// Cleanup on unmount
useEffect(() => {
return cleanup;
}, []);
// Start or stop visualization based on recording state
useEffect(() => {
if (stream && isRecording) {
startVisualization();
} else {
cleanup();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [stream, isRecording]);
// Handle window resize
useEffect(() => {
const handleResize = () => {
if (canvasRef.current && containerRef.current) {
const container = containerRef.current;
const canvas = canvasRef.current;
const dpr = window.devicePixelRatio || 1;
// Set canvas size based on container and device pixel ratio
const rect = container.getBoundingClientRect();
// Account for the 2px total margin (1px on each side)
canvas.width = (rect.width - 2) * dpr;
canvas.height = (rect.height - 2) * dpr;
// Scale canvas CSS size to match container minus margins
canvas.style.width = `${rect.width - 2}px`;
canvas.style.height = `${rect.height - 2}px`;
}
};
window.addEventListener("resize", handleResize);
// Initial setup
handleResize();
return () => window.removeEventListener("resize", handleResize);
}, []);
// Initialize audio context and start visualization
const startVisualization = async () => {
try {
const audioContext = new AudioContext();
audioContextRef.current = audioContext;
const analyser = audioContext.createAnalyser();
analyser.fftSize = AUDIO_CONFIG.FFT_SIZE;
analyser.smoothingTimeConstant = AUDIO_CONFIG.SMOOTHING;
analyserRef.current = analyser;
const source = audioContext.createMediaStreamSource(stream!);
source.connect(analyser);
draw();
} catch (error) {
console.error("Error starting visualization:", error);
}
};
// Calculate the color intensity based on bar height
const getBarColor = (normalizedHeight: number) => {
const intensity =
Math.floor(normalizedHeight * AUDIO_CONFIG.COLOR.INTENSITY_RANGE) +
AUDIO_CONFIG.COLOR.MIN_INTENSITY;
return `rgb(${intensity}, ${intensity}, ${intensity})`;
};
// Draw a single bar of the visualizer
const drawBar = (
ctx: CanvasRenderingContext2D,
x: number,
centerY: number,
width: number,
height: number,
color: string
) => {
ctx.fillStyle = color;
// Draw upper bar (above center)
ctx.fillRect(x, centerY - height, width, height);
// Draw lower bar (below center)
ctx.fillRect(x, centerY, width, height);
};
// Main drawing function
const draw = () => {
if (!isRecording) return;
const canvas = canvasRef.current;
const ctx = canvas?.getContext("2d");
if (!canvas || !ctx || !analyserRef.current) return;
const dpr = window.devicePixelRatio || 1;
ctx.scale(dpr, dpr);
const analyser = analyserRef.current;
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);
const drawFrame = () => {
animationFrameRef.current = requestAnimationFrame(drawFrame);
// Get current frequency data
analyser.getByteFrequencyData(frequencyData);
// Clear canvas - use CSS pixels for clearing
ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
// Calculate dimensions in CSS pixels
const barWidth = Math.max(
AUDIO_CONFIG.MIN_BAR_WIDTH,
canvas.width / dpr / bufferLength - AUDIO_CONFIG.BAR_SPACING
);
const centerY = canvas.height / dpr / 2;
let x = 0;
// Draw each frequency bar
for (let i = 0; i < bufferLength; i++) {
const normalizedHeight = frequencyData[i] / 255; // Convert to 0-1 range
const barHeight = Math.max(
AUDIO_CONFIG.MIN_BAR_HEIGHT,
normalizedHeight * centerY
);
drawBar(
ctx,
x,
centerY,
barWidth,
barHeight,
getBarColor(normalizedHeight)
);
x += barWidth + AUDIO_CONFIG.BAR_SPACING;
}
};
drawFrame();
};
return (
<div
ref={containerRef}
className="h-full w-full cursor-pointer rounded-lg bg-background/80 backdrop-blur"
onClick={onClick}
>
<canvas ref={canvasRef} className="h-full w-full" />
</div>
);
}

36
src/llama_stack/ui/components/ui/badge.tsx
View file

@ -1,36 +0,0 @@
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
);
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
);
}
export { Badge, badgeVariants };

109
src/llama_stack/ui/components/ui/breadcrumb.tsx
View file

@ -1,109 +0,0 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
}
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
return (
<ol
data-slot="breadcrumb-list"
className={cn(
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
className
)}
{...props}
/>
);
}
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
return (
<li
data-slot="breadcrumb-item"
className={cn("inline-flex items-center gap-1.5", className)}
{...props}
/>
);
}
function BreadcrumbLink({
asChild,
className,
...props
}: React.ComponentProps<"a"> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "a";
return (
<Comp
data-slot="breadcrumb-link"
className={cn("hover:text-foreground transition-colors", className)}
{...props}
/>
);
}
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
data-slot="breadcrumb-page"
role="link"
aria-disabled="true"
aria-current="page"
className={cn("text-foreground font-normal", className)}
{...props}
/>
);
}
function BreadcrumbSeparator({
children,
className,
...props
}: React.ComponentProps<"li">) {
return (
<li
data-slot="breadcrumb-separator"
role="presentation"
aria-hidden="true"
className={cn("[&>svg]:size-3.5", className)}
{...props}
>
{children ?? <ChevronRight />}
</li>
);
}
function BreadcrumbEllipsis({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="breadcrumb-ellipsis"
role="presentation"
aria-hidden="true"
className={cn("flex size-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontal className="size-4" />
<span className="sr-only">More</span>
</span>
);
}
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
};

59
src/llama_stack/ui/components/ui/button.tsx
View file

@ -1,59 +0,0 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
function Button({
className,
variant,
size,
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
}
export { Button, buttonVariants };

92
src/llama_stack/ui/components/ui/card.tsx
View file

@ -1,92 +0,0 @@
import * as React from "react";
import { cn } from "@/lib/utils";
function Card({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className
)}
{...props}
/>
);
}
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
)}
{...props}
/>
);
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold", className)}
{...props}
/>
);
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...props}
/>
);
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
{...props}
/>
);
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
{...props}
/>
);
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
};

33
src/llama_stack/ui/components/ui/collapsible.tsx
View file

@ -1,33 +0,0 @@
"use client";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
function Collapsible({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}
function CollapsibleTrigger({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
return (
<CollapsiblePrimitive.CollapsibleTrigger
data-slot="collapsible-trigger"
{...props}
/>
);
}
function CollapsibleContent({
...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
return (
<CollapsiblePrimitive.CollapsibleContent
data-slot="collapsible-content"
{...props}
/>
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

44
src/llama_stack/ui/components/ui/copy-button.tsx
View file

@ -1,44 +0,0 @@
"use client";
import { Check, Copy } from "lucide-react";
import { cn } from "@/lib/utils";
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
import { Button } from "@/components/ui/button";
type CopyButtonProps = {
content: string;
copyMessage?: string;
};
export function CopyButton({ content, copyMessage }: CopyButtonProps) {
const { isCopied, handleCopy } = useCopyToClipboard({
text: content,
copyMessage,
});
return (
<Button
variant="ghost"
size="icon"
className="relative h-6 w-6"
aria-label="Copy to clipboard"
onClick={handleCopy}
>
<div className="absolute inset-0 flex items-center justify-center">
<Check
className={cn(
"h-4 w-4 transition-transform ease-in-out",
isCopied ? "scale-100" : "scale-0"
)}
/>
</div>
<Copy
className={cn(
"h-4 w-4 transition-transform ease-in-out",
isCopied ? "scale-0" : "scale-100"
)}
/>
</Button>
);
}

257
src/llama_stack/ui/components/ui/dropdown-menu.tsx
View file

@ -1,257 +0,0 @@
"use client";
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import { cn } from "@/lib/utils";
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
);
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
);
}
function DropdownMenuContent({
className,
sideOffset = 4,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
);
}
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
);
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean;
variant?: "default" | "destructive";
}) {
return (
<DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
);
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
return (
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
);
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
);
}
function DropdownMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
return (
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
);
}
function DropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean;
}) {
return (
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
);
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
);
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
);
}
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean;
}) {
return (
<DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto size-4" />
</DropdownMenuPrimitive.SubTrigger>
);
}
function DropdownMenuSubContent({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
return (
<DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props}
/>
);
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
};

153
src/llama_stack/ui/components/ui/file-preview.tsx
View file

@ -1,153 +0,0 @@
"use client";
import React, { useEffect } from "react";
import { motion } from "framer-motion";
import { FileIcon, X } from "lucide-react";
interface FilePreviewProps {
file: File;
onRemove?: () => void;
}
export const FilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
(props, ref) => {
if (props.file.type.startsWith("image/")) {
return <ImageFilePreview {...props} ref={ref} />;
}
if (
props.file.type.startsWith("text/") ||
props.file.name.endsWith(".txt") ||
props.file.name.endsWith(".md")
) {
return <TextFilePreview {...props} ref={ref} />;
}
return <GenericFilePreview {...props} ref={ref} />;
}
);
FilePreview.displayName = "FilePreview";
const ImageFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
({ file, onRemove }, ref) => {
return (
<motion.div
ref={ref}
className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
layout
initial={{ opacity: 0, y: "100%" }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: "100%" }}
>
<div className="flex w-full items-center space-x-2">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
alt={`Attachment ${file.name}`}
className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted object-cover"
src={URL.createObjectURL(file)}
/>
<span className="w-full truncate text-muted-foreground">
{file.name}
</span>
</div>
{onRemove ? (
<button
className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
type="button"
onClick={onRemove}
aria-label="Remove attachment"
>
<X className="h-2.5 w-2.5" />
</button>
) : null}
</motion.div>
);
}
);
ImageFilePreview.displayName = "ImageFilePreview";
const TextFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
({ file, onRemove }, ref) => {
const [preview, setPreview] = React.useState<string>("");
useEffect(() => {
const reader = new FileReader();
reader.onload = e => {
const text = e.target?.result as string;
setPreview(text.slice(0, 50) + (text.length > 50 ? "..." : ""));
};
reader.readAsText(file);
}, [file]);
return (
<motion.div
ref={ref}
className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
layout
initial={{ opacity: 0, y: "100%" }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: "100%" }}
>
<div className="flex w-full items-center space-x-2">
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted p-0.5">
<div className="h-full w-full overflow-hidden text-[6px] leading-none text-muted-foreground">
{preview || "Loading..."}
</div>
</div>
<span className="w-full truncate text-muted-foreground">
{file.name}
</span>
</div>
{onRemove ? (
<button
className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
type="button"
onClick={onRemove}
aria-label="Remove attachment"
>
<X className="h-2.5 w-2.5" />
</button>
) : null}
</motion.div>
);
}
);
TextFilePreview.displayName = "TextFilePreview";
const GenericFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
({ file, onRemove }, ref) => {
return (
<motion.div
ref={ref}
className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
layout
initial={{ opacity: 0, y: "100%" }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: "100%" }}
>
<div className="flex w-full items-center space-x-2">
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted">
<FileIcon className="h-6 w-6 text-foreground" />
</div>
<span className="w-full truncate text-muted-foreground">
{file.name}
</span>
</div>
{onRemove ? (
<button
className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
type="button"
onClick={onRemove}
aria-label="Remove attachment"
>
<X className="h-2.5 w-2.5" />
</button>
) : null}
</motion.div>
);
}
);
GenericFilePreview.displayName = "GenericFilePreview";

21
src/llama_stack/ui/components/ui/input.tsx
View file

@ -1,21 +0,0 @@
import * as React from "react";
import { cn } from "@/lib/utils";
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<input
type={type}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
)}
{...props}
/>
);
}
export { Input };

24
src/llama_stack/ui/components/ui/label.tsx
View file

@ -1,24 +0,0 @@
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
);
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
));
Label.displayName = LabelPrimitive.Root.displayName;
export { Label };

40
src/llama_stack/ui/components/ui/mode-toggle.tsx
View file

@ -1,40 +0,0 @@
"use client";
import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export function ModeToggle() {
const { setTheme } = useTheme();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}

185
src/llama_stack/ui/components/ui/select.tsx
View file

@ -1,185 +0,0 @@
"use client";
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import { cn } from "@/lib/utils";
function Select({
...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />;
}
function SelectGroup({
...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}
function SelectValue({
...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}
function SelectTrigger({
className,
size = "default",
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
size?: "sm" | "default";
}) {
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDownIcon className="size-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
);
}
function SelectContent({
className,
children,
position = "popper",
...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
data-slot="select-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
);
}
function SelectLabel({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
return (
<SelectPrimitive.Label
data-slot="select-label"
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
{...props}
/>
);
}
function SelectItem({
className,
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
return (
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
)}
{...props}
>
<span className="absolute right-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
);
}
function SelectSeparator({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
{...props}
/>
);
}
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUpIcon className="size-4" />
</SelectPrimitive.ScrollUpButton>
);
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
return (
<SelectPrimitive.ScrollDownButton
data-slot="select-scroll-down-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDownIcon className="size-4" />
</SelectPrimitive.ScrollDownButton>
);
}
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
};

28
src/llama_stack/ui/components/ui/separator.tsx
View file

@ -1,28 +0,0 @@
"use client";
import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cn } from "@/lib/utils";
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator-root"
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
)}
{...props}
/>
);
}
export { Separator };

139
src/llama_stack/ui/components/ui/sheet.tsx
View file

@ -1,139 +0,0 @@
"use client";
import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react";
import { cn } from "@/lib/utils";
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}
function SheetTrigger({
...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
}
function SheetClose({
...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
}
function SheetPortal({
...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
}
function SheetOverlay({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
return (
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
);
}
function SheetContent({
className,
children,
side = "right",
...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
side?: "top" | "right" | "bottom" | "left";
}) {
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
data-slot="sheet-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
side === "right" &&
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
side === "left" &&
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
side === "top" &&
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
className
)}
{...props}
>
{children}
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<XIcon className="size-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
);
}
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-header"
className={cn("flex flex-col gap-1.5 p-4", className)}
{...props}
/>
);
}
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
);
}
function SheetTitle({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn("text-foreground font-semibold", className)}
{...props}
/>
);
}
function SheetDescription({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
export {
Sheet,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
};

726
src/llama_stack/ui/components/ui/sidebar.tsx
View file

@ -1,726 +0,0 @@
"use client";
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { VariantProps, cva } from "class-variance-authority";
import { PanelLeftIcon } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
type SidebarContextProps = {
state: "expanded" | "collapsed";
open: boolean;
setOpen: (open: boolean) => void;
openMobile: boolean;
setOpenMobile: (open: boolean) => void;
isMobile: boolean;
toggleSidebar: () => void;
};
const SidebarContext = React.createContext<SidebarContextProps | null>(null);
function useSidebar() {
const context = React.useContext(SidebarContext);
if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.");
}
return context;
}
function SidebarProvider({
defaultOpen = true,
open: openProp,
onOpenChange: setOpenProp,
className,
style,
children,
...props
}: React.ComponentProps<"div"> & {
defaultOpen?: boolean;
open?: boolean;
onOpenChange?: (open: boolean) => void;
}) {
const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React.useState(false);
// This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component.
const [_open, _setOpen] = React.useState(defaultOpen);
const open = openProp ?? _open;
const setOpen = React.useCallback(
(value: boolean | ((value: boolean) => boolean)) => {
const openState = typeof value === "function" ? value(open) : value;
if (setOpenProp) {
setOpenProp(openState);
} else {
_setOpen(openState);
}
// This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
},
[setOpenProp, open]
);
// Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => {
return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);
}, [isMobile, setOpen, setOpenMobile]);
// Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault();
toggleSidebar();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar]);
// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed";
const contextValue = React.useMemo<SidebarContextProps>(
() => ({
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar,
}),
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
);
return (
<SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}>
<div
data-slot="sidebar-wrapper"
style={
{
"--sidebar-width": SIDEBAR_WIDTH,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style,
} as React.CSSProperties
}
className={cn(
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
className
)}
{...props}
>
{children}
</div>
</TooltipProvider>
</SidebarContext.Provider>
);
}
function Sidebar({
side = "left",
variant = "sidebar",
collapsible = "offcanvas",
className,
children,
...props
}: React.ComponentProps<"div"> & {
side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
}) {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === "none") {
return (
<div
data-slot="sidebar"
className={cn(
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
className
)}
{...props}
>
{children}
</div>
);
}
if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
data-sidebar="sidebar"
data-slot="sidebar"
data-mobile="true"
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
} as React.CSSProperties
}
side={side}
>
<SheetHeader className="sr-only">
<SheetTitle>Sidebar</SheetTitle>
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
</SheetHeader>
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
);
}
return (
<div
className="group peer text-sidebar-foreground hidden md:block"
data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant}
data-side={side}
data-slot="sidebar"
>
{/* This is what handles the sidebar gap on desktop */}
<div
data-slot="sidebar-gap"
className={cn(
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
)}
/>
<div
data-slot="sidebar-container"
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
className
)}
{...props}
>
<div
data-sidebar="sidebar"
data-slot="sidebar-inner"
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
>
{children}
</div>
</div>
</div>
);
}
function SidebarTrigger({
className,
onClick,
...props
}: React.ComponentProps<typeof Button>) {
const { toggleSidebar } = useSidebar();
return (
<Button
data-sidebar="trigger"
data-slot="sidebar-trigger"
variant="ghost"
size="icon"
className={cn("size-7", className)}
onClick={event => {
onClick?.(event);
toggleSidebar();
}}
{...props}
>
<PanelLeftIcon />
<span className="sr-only">Toggle Sidebar</span>
</Button>
);
}
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
const { toggleSidebar } = useSidebar();
return (
<button
data-sidebar="rail"
data-slot="sidebar-rail"
aria-label="Toggle Sidebar"
tabIndex={-1}
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
className
)}
{...props}
/>
);
}
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
return (
<main
data-slot="sidebar-inset"
className={cn(
"bg-background relative flex w-full flex-1 flex-col",
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
className
)}
{...props}
/>
);
}
function SidebarInput({
className,
...props
}: React.ComponentProps<typeof Input>) {
return (
<Input
data-slot="sidebar-input"
data-sidebar="input"
className={cn("bg-background h-8 w-full shadow-none", className)}
{...props}
/>
);
}
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-header"
data-sidebar="header"
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
);
}
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-footer"
data-sidebar="footer"
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
);
}
function SidebarSeparator({
className,
...props
}: React.ComponentProps<typeof Separator>) {
return (
<Separator
data-slot="sidebar-separator"
data-sidebar="separator"
className={cn("bg-sidebar-border mx-2 w-auto", className)}
{...props}
/>
);
}
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-content"
data-sidebar="content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className
)}
{...props}
/>
);
}
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-group"
data-sidebar="group"
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props}
/>
);
}
function SidebarGroupLabel({
className,
asChild = false,
...props
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "div";
return (
<Comp
data-slot="sidebar-group-label"
data-sidebar="group-label"
className={cn(
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
className
)}
{...props}
/>
);
}
function SidebarGroupAction({
className,
asChild = false,
...props
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="sidebar-group-action"
data-sidebar="group-action"
className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 md:after:hidden",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}
/>
);
}
function SidebarGroupContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-group-content"
data-sidebar="group-content"
className={cn("w-full text-sm", className)}
{...props}
/>
);
}
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
return (
<ul
data-slot="sidebar-menu"
data-sidebar="menu"
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props}
/>
);
}
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
return (
<li
data-slot="sidebar-menu-item"
data-sidebar="menu-item"
className={cn("group/menu-item relative", className)}
{...props}
/>
);
}
const sidebarMenuButtonVariants = cva(
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
outline:
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
},
size: {
default: "h-8 text-sm",
sm: "h-7 text-xs",
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
function SidebarMenuButton({
asChild = false,
isActive = false,
variant = "default",
size = "default",
tooltip,
className,
...props
}: React.ComponentProps<"button"> & {
asChild?: boolean;
isActive?: boolean;
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
} & VariantProps<typeof sidebarMenuButtonVariants>) {
const Comp = asChild ? Slot : "button";
const { isMobile, state } = useSidebar();
const button = (
<Comp
data-slot="sidebar-menu-button"
data-sidebar="menu-button"
data-size={size}
data-active={isActive}
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props}
/>
);
if (!tooltip) {
return button;
}
if (typeof tooltip === "string") {
tooltip = {
children: tooltip,
};
}
return (
<Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent
side="right"
align="center"
hidden={state !== "collapsed" || isMobile}
{...tooltip}
/>
</Tooltip>
);
}
function SidebarMenuAction({
className,
asChild = false,
showOnHover = false,
...props
}: React.ComponentProps<"button"> & {
asChild?: boolean;
showOnHover?: boolean;
}) {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="sidebar-menu-action"
data-sidebar="menu-action"
className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
showOnHover &&
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
className
)}
{...props}
/>
);
}
function SidebarMenuBadge({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="sidebar-menu-badge"
data-sidebar="menu-badge"
className={cn(
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}
/>
);
}
function SidebarMenuSkeleton({
className,
showIcon = false,
...props
}: React.ComponentProps<"div"> & {
showIcon?: boolean;
}) {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`;
}, []);
return (
<div
data-slot="sidebar-menu-skeleton"
data-sidebar="menu-skeleton"
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
{...props}
>
{showIcon && (
<Skeleton
className="size-4 rounded-md"
data-sidebar="menu-skeleton-icon"
/>
)}
<Skeleton
className="h-4 max-w-(--skeleton-width) flex-1"
data-sidebar="menu-skeleton-text"
style={
{
"--skeleton-width": width,
} as React.CSSProperties
}
/>
</div>
);
}
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
return (
<ul
data-slot="sidebar-menu-sub"
data-sidebar="menu-sub"
className={cn(
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}
/>
);
}
function SidebarMenuSubItem({
className,
...props
}: React.ComponentProps<"li">) {
return (
<li
data-slot="sidebar-menu-sub-item"
data-sidebar="menu-sub-item"
className={cn("group/menu-sub-item relative", className)}
{...props}
/>
);
}
function SidebarMenuSubButton({
asChild = false,
size = "md",
isActive = false,
className,
...props
}: React.ComponentProps<"a"> & {
asChild?: boolean;
size?: "sm" | "md";
isActive?: boolean;
}) {
const Comp = asChild ? Slot : "a";
return (
<Comp
data-slot="sidebar-menu-sub-button"
data-sidebar="menu-sub-button"
data-size={size}
data-active={isActive}
className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
"group-data-[collapsible=icon]:hidden",
className
)}
{...props}
/>
);
}
export {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInput,
SidebarInset,
SidebarMenu,
SidebarMenuAction,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSkeleton,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarSeparator,
SidebarTrigger,
useSidebar,
};

25
src/llama_stack/ui/components/ui/sign-in-button.tsx
View file

@ -1,25 +0,0 @@
"use client";
import { User } from "lucide-react";
import Link from "next/link";
import { useSession } from "next-auth/react";
import { Button } from "./button";
export function SignInButton() {
const { data: session, status } = useSession();
return (
<Button variant="ghost" size="sm" asChild>
<Link href="/auth/signin" className="flex items-center">
<User className="mr-2 h-4 w-4" />
<span>
{status === "loading"
? "Loading..."
: session
? session.user?.email || "Signed In"
: "Sign In"}
</span>
</Link>
</Button>
);
}

13
src/llama_stack/ui/components/ui/skeleton.tsx
View file

@ -1,13 +0,0 @@
import { cn } from "@/lib/utils";
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="skeleton"
className={cn("bg-accent animate-pulse rounded-md", className)}
{...props}
/>
);
}
export { Skeleton };

25
src/llama_stack/ui/components/ui/sonner.tsx
View file

@ -1,25 +0,0 @@
"use client";
import { useTheme } from "next-themes";
import { Toaster as Sonner, ToasterProps } from "sonner";
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme();
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
} as React.CSSProperties
}
{...props}
/>
);
};
export { Toaster };

116
src/llama_stack/ui/components/ui/table.tsx
View file

@ -1,116 +0,0 @@
"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
function Table({ className, ...props }: React.ComponentProps<"table">) {
return (
<div
data-slot="table-container"
className="relative w-full overflow-x-auto"
>
<table
data-slot="table"
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
);
}
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
return (
<thead
data-slot="table-header"
className={cn("[&_tr]:border-b", className)}
{...props}
/>
);
}
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
return (
<tbody
data-slot="table-body"
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
);
}
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
return (
<tfoot
data-slot="table-footer"
className={cn(
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
className
)}
{...props}
/>
);
}
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
return (
<tr
data-slot="table-row"
className={cn(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
className
)}
{...props}
/>
);
}
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
return (
<th
data-slot="table-head"
className={cn(
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
);
}
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
return (
<td
data-slot="table-cell"
className={cn(
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
);
}
function TableCaption({
className,
...props
}: React.ComponentProps<"caption">) {
return (
<caption
data-slot="table-caption"
className={cn("text-muted-foreground mt-4 text-sm", className)}
{...props}
/>
);
}
export {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
};

53
src/llama_stack/ui/components/ui/tabs.tsx
View file

@ -1,53 +0,0 @@
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils";
const Tabs = TabsPrimitive.Root;
const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className
)}
{...props}
/>
));
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className
)}
{...props}
/>
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
const TabsContent = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
)}
{...props}
/>
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
export { Tabs, TabsList, TabsTrigger, TabsContent };

Some files were not shown because too many files have changed in this diff Show more