phoenix-oss/llama-stack-mirror
0
0
Fork 1
mirror of https://github.com/meta-llama/llama-stack.git synced 2025-06-28 02:53:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): add views for Responses (#2293)

Browse source 
# What does this PR do?
* Add responses list and detail views
* Refactored components to be shared as much as possible between chat
completions and responses

## Test Plan
<img width="2014" alt="image"
src="https://github.com/user-attachments/assets/6dee12ea-8876-4351-a6eb-2338058466ef"
/>
<img width="2021" alt="image"
src="https://github.com/user-attachments/assets/6c7c71b8-25b7-4199-9c57-6960be5580c8"
/>

added tests
This commit is contained in:
ehhuang 2025-05-28 09:51:22 -07:00 • committed by GitHub
parent 6352078e4b
commit 56e5ddb39f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 3282 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

120
llama_stack/ui/components/chat-completions/chat-completion-table.tsx
View file

@ -1,120 +0,0 @@
"use client";
import { useRouter } from "next/navigation";
import { ChatCompletion } from "@/lib/types";
import { truncateText } from "@/lib/truncate-text";
import {
extractTextFromContentPart,
extractDisplayableText,
} from "@/lib/format-message-content";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
interface ChatCompletionsTableProps {
completions: ChatCompletion[];
isLoading: boolean;
error: Error | null;
}
export function ChatCompletionsTable({
completions,
isLoading,
error,
}: ChatCompletionsTableProps) {
const router = useRouter();
const tableHeader = (
<TableHeader>
<TableRow>
<TableHead>Input</TableHead>
<TableHead>Output</TableHead>
<TableHead>Model</TableHead>
<TableHead className="text-right">Created</TableHead>
</TableRow>
</TableHeader>
);
if (isLoading) {
return (
<Table>
<TableCaption>
<Skeleton className="h-4 w-[250px] mx-auto" />
</TableCaption>
{tableHeader}
<TableBody>
{[...Array(3)].map((_, i) => (
<TableRow key={`skeleton-${i}`}>
<TableCell>
<Skeleton className="h-4 w-full" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-full" />
</TableCell>
<TableCell>
<Skeleton className="h-4 w-3/4" />
</TableCell>
<TableCell className="text-right">
<Skeleton className="h-4 w-1/2 ml-auto" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
if (error) {
return (
<p>Error fetching data: {error.message || "An unknown error occurred"}</p>
);
}
if (completions.length === 0) {
return <p>No chat completions found.</p>;
}
return (
<Table>
<TableCaption>A list of your recent chat completions.</TableCaption>
{tableHeader}
<TableBody>
{completions.map((completion) => (
<TableRow
key={completion.id}
onClick={() =>
router.push(`/logs/chat-completions/${completion.id}`)
}
className="cursor-pointer hover:bg-muted/50"
>
<TableCell>
{truncateText(
extractTextFromContentPart(
completion.input_messages?.[0]?.content,
),
)}
</TableCell>
<TableCell>
{(() => {
const message = completion.choices?.[0]?.message;
const outputText = extractDisplayableText(message);
return truncateText(outputText);
})()}
</TableCell>
<TableCell>{completion.model}</TableCell>
<TableCell className="text-right">
{new Date(completion.created * 1000).toLocaleString()}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}