forked from phoenix-oss/llama-stack-mirror
feat(ui): add views for Responses (#2293)
# 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
GitHub
parent
6352078e4b
commit
56e5ddb39f
34 changed files with 3282 additions and 380 deletions
|
|
@ -3,45 +3,14 @@
|
|||
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 { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
function ChatCompletionDetailLoadingView() {
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
import {
|
||||
DetailLoadingView,
|
||||
DetailErrorView,
|
||||
DetailNotFoundView,
|
||||
DetailLayout,
|
||||
PropertiesCard,
|
||||
PropertyItem,
|
||||
} from "@/components/layout/detail-layout";
|
||||
|
||||
interface ChatCompletionDetailViewProps {
|
||||
completion: ChatCompletion | null;
|
||||
|
|
@ -56,143 +25,121 @@ export function ChatCompletionDetailView({
|
|||
error,
|
||||
id,
|
||||
}: ChatCompletionDetailViewProps) {
|
||||
const title = "Chat Completion Details";
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
{/* We still want a title for consistency on error pages */}
|
||||
<h1 className="text-2xl font-bold mb-6">Chat Completion Details</h1>
|
||||
<p>
|
||||
Error loading details for ID {id}: {error.message}
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
return <DetailErrorView title={title} id={id} error={error} />;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <ChatCompletionDetailLoadingView />;
|
||||
return <DetailLoadingView title={title} />;
|
||||
}
|
||||
|
||||
if (!completion) {
|
||||
// This state means: not loading, no error, but no completion data
|
||||
return (
|
||||
<>
|
||||
{/* We still want a title for consistency on not-found pages */}
|
||||
<h1 className="text-2xl font-bold mb-6">Chat Completion Details</h1>
|
||||
<p>No details found for completion ID: {id}.</p>
|
||||
</>
|
||||
);
|
||||
return <DetailNotFoundView title={title} id={id} />;
|
||||
}
|
||||
|
||||
// If no error, not loading, and completion exists, render the details:
|
||||
return (
|
||||
// Main content cards
|
||||
const mainContent = (
|
||||
<>
|
||||
<h1 className="text-2xl font-bold mb-6">Chat Completion Details</h1>
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
<div className="flex-grow md:w-2/3 space-y-6">
|
||||
<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 &&
|
||||
!completion.input_messages?.some(
|
||||
(im) =>
|
||||
im.role === "assistant" &&
|
||||
im.tool_calls &&
|
||||
im.tool_calls.length > 0,
|
||||
) &&
|
||||
completion.choices[0].message.tool_calls.map(
|
||||
(toolCall: any, 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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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: any, 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's choice.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Properties</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li>
|
||||
<strong>Created:</strong>{" "}
|
||||
<span className="text-gray-900 font-medium">
|
||||
{new Date(completion.created * 1000).toLocaleString()}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>ID:</strong>{" "}
|
||||
<span className="text-gray-900 font-medium">
|
||||
{completion.id}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Model:</strong>{" "}
|
||||
<span className="text-gray-900 font-medium">
|
||||
{completion.model}
|
||||
</span>
|
||||
</li>
|
||||
<li className="pt-1 mt-1 border-t border-gray-200">
|
||||
<strong>Finish Reason:</strong>{" "}
|
||||
<span className="text-gray-900 font-medium">
|
||||
{completion.choices?.[0]?.finish_reason || "N/A"}
|
||||
</span>
|
||||
</li>
|
||||
{completion.choices?.[0]?.message?.tool_calls &&
|
||||
completion.choices[0].message.tool_calls.length > 0 && (
|
||||
<li className="pt-1 mt-1 border-t border-gray-200">
|
||||
<strong>Functions/Tools Called:</strong>
|
||||
<ul className="list-disc list-inside pl-4 mt-1">
|
||||
{completion.choices[0].message.tool_calls.map(
|
||||
(toolCall: any, index: number) => (
|
||||
<li key={index}>
|
||||
<span className="text-gray-900 font-medium">
|
||||
{toolCall.function?.name || "N/A"}
|
||||
</span>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<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'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: any, 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} />
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue