(null);
+
+ // 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,
+ user: responseData.user,
+ };
+ };
+
+ useEffect(() => {
+ const fetchResponses = async () => {
+ setIsLoading(true);
+ setError(null);
+ try {
+ const response = await client.responses.list();
+ const responseListData = response as ResponseListResponse;
+
+ const convertedResponses: OpenAIResponse[] = responseListData.data.map(
+ convertResponseListData,
+ );
+
+ setResponses(convertedResponses);
+ } catch (err) {
+ console.error("Error fetching responses:", err);
+ setError(
+ err instanceof Error ? err : new Error("Failed to fetch responses"),
+ );
+ setResponses([]);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchResponses();
+ }, []);
+
return (
-
-
Under Construction
-
+
);
}
diff --git a/llama_stack/ui/components/chat-completions/chat-completion-detail.test.tsx b/llama_stack/ui/components/chat-completions/chat-completion-detail.test.tsx
index 33247ed26..5348dbc3a 100644
--- a/llama_stack/ui/components/chat-completions/chat-completion-detail.test.tsx
+++ b/llama_stack/ui/components/chat-completions/chat-completion-detail.test.tsx
@@ -75,7 +75,7 @@ describe("ChatCompletionDetailView", () => {
/>,
);
expect(
- screen.getByText("No details found for completion ID: notfound-id."),
+ screen.getByText("No details found for ID: notfound-id."),
).toBeInTheDocument();
});
diff --git a/llama_stack/ui/components/chat-completions/chat-completion-detail.tsx b/llama_stack/ui/components/chat-completions/chat-completion-detail.tsx
index e76418d1a..200807864 100644
--- a/llama_stack/ui/components/chat-completions/chat-completion-detail.tsx
+++ b/llama_stack/ui/components/chat-completions/chat-completion-detail.tsx
@@ -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 (
- <>
- {/* Title Skeleton */}
-
-
- {[...Array(2)].map((_, i) => (
-
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
{" "}
- {/* Properties Title Skeleton */}
- {[...Array(5)].map((_, i) => (
-
-
-
-
- ))}
-
-
-
Chat Completion Details
-
- Error loading details for ID {id}: {error.message}
-
-
- );
+ return ;
}
if (isLoading) {
- return ;
+ return ;
}
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 */}
- Chat Completion Details
- No details found for completion ID: {id}.
-
- );
+ return ;
}
- // If no error, not loading, and completion exists, render the details:
- return (
+ // Main content cards
+ const mainContent = (
<>
- Chat Completion Details
-
-
-
-
- Input
-
-
- {completion.input_messages?.map((msg, index) => (
-
- ))}
- {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 (
-
- );
- },
- )}
-
-
+
+
+ Input
+
+
+ {completion.input_messages?.map((msg, index) => (
+
+ ))}
+ {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 (
+
+ );
+ },
+ )
+ : null}
+
+
-
-
- Output
-
-
- {completion.choices?.[0]?.message ? (
-
- ) : (
-
- No message found in assistant's choice.
-
- )}
-
-
-
-
-
-
-
- Properties
-
-
-
- -
- Created:{" "}
-
- {new Date(completion.created * 1000).toLocaleString()}
-
-
- -
- ID:{" "}
-
- {completion.id}
-
-
- -
- Model:{" "}
-
- {completion.model}
-
-
- -
- Finish Reason:{" "}
-
- {completion.choices?.[0]?.finish_reason || "N/A"}
-
-
- {completion.choices?.[0]?.message?.tool_calls &&
- completion.choices[0].message.tool_calls.length > 0 && (
- -
- Functions/Tools Called:
-
- {completion.choices[0].message.tool_calls.map(
- (toolCall: any, index: number) => (
- -
-
- {toolCall.function?.name || "N/A"}
-
-
- ),
- )}
-
-
- )}
-
-
-
-
-
+ No message found in assistant's choice.
+
+ )}
+
+
);
+
+ // Properties sidebar
+ const sidebar = (
+
+
+
+
+
+ {(() => {
+ const toolCalls = completion.choices?.[0]?.message?.tool_calls;
+ if (toolCalls && Array.isArray(toolCalls) && toolCalls.length > 0) {
+ return (
+
+
+ {toolCalls.map((toolCall: any, index: number) => (
+ -
+
+ {toolCall.function?.name || "N/A"}
+
+
+ ))}
+
+
+ }
+ hasBorder
+ />
+ );
+ }
+ return null;
+ })()}
+
+ );
+
+ return (
+
+ );
}
diff --git a/llama_stack/ui/components/chat-completions/chat-completion-table.test.tsx b/llama_stack/ui/components/chat-completions/chat-completion-table.test.tsx
index e71ef3d43..c8a55b100 100644
--- a/llama_stack/ui/components/chat-completions/chat-completion-table.test.tsx
+++ b/llama_stack/ui/components/chat-completions/chat-completion-table.test.tsx
@@ -1,8 +1,8 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
-import { ChatCompletionsTable } from "./chat-completion-table";
-import { ChatCompletion } from "@/lib/types"; // Assuming this path is correct
+import { ChatCompletionsTable } from "./chat-completions-table";
+import { ChatCompletion } from "@/lib/types";
// Mock next/navigation
const mockPush = jest.fn();
@@ -13,21 +13,25 @@ jest.mock("next/navigation", () => ({
}));
// Mock helper functions
-// These are hoisted, so their mocks are available throughout the file
jest.mock("@/lib/truncate-text");
-jest.mock("@/lib/format-tool-call");
+jest.mock("@/lib/format-message-content");
// Import the mocked functions to set up default or specific implementations
import { truncateText as originalTruncateText } from "@/lib/truncate-text";
-import { formatToolCallToString as originalFormatToolCallToString } from "@/lib/format-tool-call";
+import {
+ extractTextFromContentPart as originalExtractTextFromContentPart,
+ extractDisplayableText as originalExtractDisplayableText,
+} from "@/lib/format-message-content";
// Cast to jest.Mock for typings
const truncateText = originalTruncateText as jest.Mock;
-const formatToolCallToString = originalFormatToolCallToString as jest.Mock;
+const extractTextFromContentPart =
+ originalExtractTextFromContentPart as jest.Mock;
+const extractDisplayableText = originalExtractDisplayableText as jest.Mock;
describe("ChatCompletionsTable", () => {
const defaultProps = {
- completions: [] as ChatCompletion[],
+ data: [] as ChatCompletion[],
isLoading: false,
error: null,
};
@@ -36,28 +40,26 @@ describe("ChatCompletionsTable", () => {
// Reset all mocks before each test
mockPush.mockClear();
truncateText.mockClear();
- formatToolCallToString.mockClear();
+ extractTextFromContentPart.mockClear();
+ extractDisplayableText.mockClear();
- // Default pass-through implementation for tests not focusing on truncation/formatting
+ // Default pass-through implementations
truncateText.mockImplementation((text: string | undefined) => text);
- formatToolCallToString.mockImplementation((toolCall: any) =>
- toolCall && typeof toolCall === "object" && toolCall.name
- ? `[DefaultToolCall:${toolCall.name}]`
- : "[InvalidToolCall]",
+ extractTextFromContentPart.mockImplementation((content: unknown) =>
+ typeof content === "string" ? content : "extracted text",
+ );
+ extractDisplayableText.mockImplementation(
+ (message: unknown) =>
+ (message as { content?: string })?.content || "extracted output",
);
});
test("renders without crashing with default props", () => {
render();
- // Check for a unique element that should be present in the non-empty, non-loading, non-error state
- // For now, as per Task 1, we will test the empty state message
expect(screen.getByText("No chat completions found.")).toBeInTheDocument();
});
test("click on a row navigates to the correct URL", () => {
- const { rerender } = render();
-
- // Simulate a scenario where a completion exists and is clicked
const mockCompletion: ChatCompletion = {
id: "comp_123",
object: "chat.completion",
@@ -73,9 +75,12 @@ describe("ChatCompletionsTable", () => {
input_messages: [{ role: "user", content: "Test input" }],
};
- rerender(
- ,
- );
+ // Set up mocks to return expected values
+ extractTextFromContentPart.mockReturnValue("Test input");
+ extractDisplayableText.mockReturnValue("Test output");
+
+ render();
+
const row = screen.getByText("Test input").closest("tr");
if (row) {
fireEvent.click(row);
@@ -91,14 +96,13 @@ describe("ChatCompletionsTable", () => {
,
);
- // The Skeleton component uses data-slot="skeleton"
- const skeletonSelector = '[data-slot="skeleton"]';
-
// Check for skeleton in the table caption
const tableCaption = container.querySelector("caption");
expect(tableCaption).toBeInTheDocument();
if (tableCaption) {
- const captionSkeleton = tableCaption.querySelector(skeletonSelector);
+ const captionSkeleton = tableCaption.querySelector(
+ '[data-slot="skeleton"]',
+ );
expect(captionSkeleton).toBeInTheDocument();
}
@@ -107,16 +111,10 @@ describe("ChatCompletionsTable", () => {
expect(tableBody).toBeInTheDocument();
if (tableBody) {
const bodySkeletons = tableBody.querySelectorAll(
- `td ${skeletonSelector}`,
+ '[data-slot="skeleton"]',
);
- expect(bodySkeletons.length).toBeGreaterThan(0); // Ensure at least one skeleton cell exists
+ expect(bodySkeletons.length).toBeGreaterThan(0);
}
-
- // General check: ensure multiple skeleton elements are present in the table overall
- const allSkeletonsInTable = container.querySelectorAll(
- `table ${skeletonSelector}`,
- );
- expect(allSkeletonsInTable.length).toBeGreaterThan(3); // e.g., caption + at least one row of 3 cells, or just a few
});
});
@@ -140,14 +138,14 @@ describe("ChatCompletionsTable", () => {
{...defaultProps}
error={{ name: "Error", message: "" }}
/>,
- ); // Error with empty message
+ );
expect(
screen.getByText("Error fetching data: An unknown error occurred"),
).toBeInTheDocument();
});
test("renders default error message when error prop is an object without message", () => {
- render(); // Empty error object
+ render();
expect(
screen.getByText("Error fetching data: An unknown error occurred"),
).toBeInTheDocument();
@@ -155,14 +153,8 @@ describe("ChatCompletionsTable", () => {
});
describe("Empty State", () => {
- test('renders "No chat completions found." and no table when completions array is empty', () => {
- render(
- ,
- );
+ test('renders "No chat completions found." and no table when data array is empty', () => {
+ render();
expect(
screen.getByText("No chat completions found."),
).toBeInTheDocument();
@@ -179,7 +171,7 @@ describe("ChatCompletionsTable", () => {
{
id: "comp_1",
object: "chat.completion",
- created: 1710000000, // Fixed timestamp for test
+ created: 1710000000,
model: "llama-test-model",
choices: [
{
@@ -206,9 +198,22 @@ describe("ChatCompletionsTable", () => {
},
];
+ // 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";
+ });
+
render(
,
@@ -242,7 +247,7 @@ describe("ChatCompletionsTable", () => {
});
});
- describe("Text Truncation and Tool Call Formatting", () => {
+ describe("Text Truncation and Content Extraction", () => {
test("truncates long input and output text", () => {
// Specific mock implementation for this test
truncateText.mockImplementation(
@@ -259,6 +264,10 @@ describe("ChatCompletionsTable", () => {
"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 = [
{
id: "comp_trunc",
@@ -278,7 +287,7 @@ describe("ChatCompletionsTable", () => {
render(
,
@@ -289,52 +298,50 @@ describe("ChatCompletionsTable", () => {
longInput.slice(0, 10) + "...",
);
expect(truncatedTexts.length).toBe(2); // one for input, one for output
- // Optionally, verify each one is in the document if getAllByText doesn't throw on not found
truncatedTexts.forEach((textElement) =>
expect(textElement).toBeInTheDocument(),
);
});
- test("formats tool call output using formatToolCallToString", () => {
- // Specific mock implementation for this test
- formatToolCallToString.mockImplementation(
- (toolCall: any) => `[TOOL:${toolCall.name}]`,
- );
- // Ensure no truncation interferes for this specific test for clarity of tool call format
- truncateText.mockImplementation((text: string | undefined) => text);
+ test("uses content extraction functions correctly", () => {
+ const mockCompletion = {
+ id: "comp_extract",
+ object: "chat.completion",
+ created: 1710003000,
+ model: "llama-extract-model",
+ choices: [
+ {
+ index: 0,
+ message: { role: "assistant", content: "Extracted output" },
+ finish_reason: "stop",
+ },
+ ],
+ input_messages: [{ role: "user", content: "Extracted input" }],
+ };
- const toolCall = { name: "search", args: { query: "llama" } };
- const mockCompletions = [
- {
- id: "comp_tool",
- object: "chat.completion",
- created: 1710003000,
- model: "llama-tool-model",
- choices: [
- {
- index: 0,
- message: {
- role: "assistant",
- content: "Tool output", // Content that will be prepended
- tool_calls: [toolCall],
- },
- finish_reason: "stop",
- },
- ],
- input_messages: [{ role: "user", content: "Tool input" }],
- },
- ];
+ extractTextFromContentPart.mockReturnValue("Extracted input");
+ extractDisplayableText.mockReturnValue("Extracted output");
render(
,
);
- // The component concatenates message.content and the formatted tool call
- expect(screen.getByText("Tool output [TOOL:search]")).toBeInTheDocument();
+ // Verify the extraction functions were called
+ expect(extractTextFromContentPart).toHaveBeenCalledWith(
+ "Extracted input",
+ );
+ expect(extractDisplayableText).toHaveBeenCalledWith({
+ role: "assistant",
+ content: "Extracted output",
+ });
+
+ // Verify the extracted content is displayed
+ expect(screen.getByText("Extracted input")).toBeInTheDocument();
+ expect(screen.getByText("Extracted output")).toBeInTheDocument();
});
});
});
diff --git a/llama_stack/ui/components/chat-completions/chat-completions-table.tsx b/llama_stack/ui/components/chat-completions/chat-completions-table.tsx
new file mode 100644
index 000000000..5f1d2f03d
--- /dev/null
+++ b/llama_stack/ui/components/chat-completions/chat-completions-table.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { ChatCompletion } from "@/lib/types";
+import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
+import {
+ extractTextFromContentPart,
+ extractDisplayableText,
+} from "@/lib/format-message-content";
+
+interface ChatCompletionsTableProps {
+ data: ChatCompletion[];
+ isLoading: boolean;
+ error: Error | null;
+}
+
+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({
+ data,
+ isLoading,
+ error,
+}: ChatCompletionsTableProps) {
+ const formattedData = data.map(formatChatCompletionToRow);
+
+ return (
+
+ );
+}
diff --git a/llama_stack/ui/components/chat-completions/chat-messasge-item.tsx b/llama_stack/ui/components/chat-completions/chat-messasge-item.tsx
index 58a009aed..2e8593bfb 100644
--- a/llama_stack/ui/components/chat-completions/chat-messasge-item.tsx
+++ b/llama_stack/ui/components/chat-completions/chat-messasge-item.tsx
@@ -4,45 +4,10 @@ import { ChatMessage } from "@/lib/types";
import React from "react";
import { formatToolCallToString } from "@/lib/format-tool-call";
import { extractTextFromContentPart } from "@/lib/format-message-content";
-
-// Sub-component or helper for the common label + content structure
-const MessageBlock: React.FC<{
- label: string;
- labelDetail?: string;
- content: React.ReactNode;
-}> = ({ label, labelDetail, content }) => {
- return (
-
-
- {label}
- {labelDetail && (
-
- {labelDetail}
-
- )}
-
-
{content}
-
+
+ {[...Array(2)].map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
{" "}
+ {/* Properties Title Skeleton */}
+ {[...Array(5)].map((_, i) => (
+
+
+
+
+ ))}
+
+
+
{title}
+
+ Error loading details for ID {id}: {error.message}
+
+
+ );
+}
+
+export function DetailNotFoundView({
+ title,
+ id,
+}: {
+ title: string;
+ id: string;
+}) {
+ return (
+ <>
+ {title}
+ No details found for ID: {id}.
+
+ );
+}
+
+export interface PropertyItemProps {
+ label: string;
+ value: React.ReactNode;
+ className?: string;
+ hasBorder?: boolean;
+}
+
+export function PropertyItem({
+ label,
+ value,
+ className = "",
+ hasBorder = false,
+}: PropertyItemProps) {
+ return (
+
+ {label}:{" "}
+ {typeof value === "string" || typeof value === "number" ? (
+ {value}
+ ) : (
+ value
+ )}
+
+ );
+}
+
+export interface PropertiesCardProps {
+ children: React.ReactNode;
+}
+
+export function PropertiesCard({ children }: PropertiesCardProps) {
+ return (
+
+
+ Properties
+
+
+
+
+
+ );
+}
+
+export interface DetailLayoutProps {
+ title: string;
+ mainContent: React.ReactNode;
+ sidebar: React.ReactNode;
+}
+
+export function DetailLayout({
+ title,
+ mainContent,
+ sidebar,
+}: DetailLayoutProps) {
+ return (
+ <>
+ {title}
+
+
{mainContent}
+
{sidebar}
+
+ <>
+ {segments.length > 0 && (
+
+ )}
+ {children}
+
+
No chat completions found.
;
+ if (data.length === 0) {
+ return {emptyMessage}
;
}
return (
- A list of your recent chat completions.
+ {caption}
{tableHeader}
- {completions.map((completion) => (
+ {data.map((row) => (
- router.push(`/logs/chat-completions/${completion.id}`)
- }
+ key={row.id}
+ onClick={() => router.push(row.detailPath)}
className="cursor-pointer hover:bg-muted/50"
>
-
- {truncateText(
- extractTextFromContentPart(
- completion.input_messages?.[0]?.content,
- ),
- )}
-
-
- {(() => {
- const message = completion.choices?.[0]?.message;
- const outputText = extractDisplayableText(message);
- return truncateText(outputText);
- })()}
-
- {completion.model}
-
- {new Date(completion.created * 1000).toLocaleString()}
-
+ {truncateText(row.input)}
+ {truncateText(row.output)}
+ {row.model}
+ {row.createdTime}
))}
diff --git a/llama_stack/ui/components/responses/grouping/grouped-items-display.tsx b/llama_stack/ui/components/responses/grouping/grouped-items-display.tsx
new file mode 100644
index 000000000..6ddc0eacc
--- /dev/null
+++ b/llama_stack/ui/components/responses/grouping/grouped-items-display.tsx
@@ -0,0 +1,56 @@
+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 (
+
+ );
+ }
+
+ // Otherwise, render the individual item
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/llama_stack/ui/components/responses/hooks/function-call-grouping.ts b/llama_stack/ui/components/responses/hooks/function-call-grouping.ts
new file mode 100644
index 000000000..2994354d5
--- /dev/null
+++ b/llama_stack/ui/components/responses/hooks/function-call-grouping.ts
@@ -0,0 +1,92 @@
+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();
+
+ // Build a map of call_id to indices for function_call_output items
+ const callIdToIndices = new Map();
+
+ 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]);
+}
diff --git a/llama_stack/ui/components/responses/items/function-call-item.tsx b/llama_stack/ui/components/responses/items/function-call-item.tsx
new file mode 100644
index 000000000..beca935f0
--- /dev/null
+++ b/llama_stack/ui/components/responses/items/function-call-item.tsx
@@ -0,0 +1,29 @@
+import {
+ MessageBlock,
+ ToolCallBlock,
+} from "@/components/ui/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 (
+ {formattedFunctionCall}}
+ />
+ );
+}
diff --git a/llama_stack/ui/components/responses/items/generic-item.tsx b/llama_stack/ui/components/responses/items/generic-item.tsx
new file mode 100644
index 000000000..6b6f56603
--- /dev/null
+++ b/llama_stack/ui/components/responses/items/generic-item.tsx
@@ -0,0 +1,37 @@
+import {
+ MessageBlock,
+ ToolCallBlock,
+} from "@/components/ui/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;
+
+ 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 (
+ {content}}
+ />
+ );
+}
diff --git a/llama_stack/ui/components/responses/items/grouped-function-call-item.tsx b/llama_stack/ui/components/responses/items/grouped-function-call-item.tsx
new file mode 100644
index 000000000..ded0ced71
--- /dev/null
+++ b/llama_stack/ui/components/responses/items/grouped-function-call-item.tsx
@@ -0,0 +1,54 @@
+import {
+ MessageBlock,
+ ToolCallBlock,
+} from "@/components/ui/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 = (
+
+
+ Arguments
+ {`${name}(${args})`}
+
+
+ Output
+ {outputContent}
+
+
+
+
+
+
+ ) : inputItemsError ? (
+
+ Error loading input items: {inputItemsError.message}
+
+
+ Falling back to response input data.
+
+
+ ) : 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 (
+
+ );
+ } else {
+ return (
+
+ No input data available.
+
+ );
+ }
+ })()}
+
+
+
+
+
+ Output
+
+
+ {response.output?.length > 0 ? (
+
+ ) : (
+
+ No output data available.
+
+ )}
+
+
+
+ );
+
+ // Properties sidebar
+ const sidebar = (
+
+
+
+
+
+ {response.temperature && (
+
+ )}
+ {response.top_p && }
+ {response.parallel_tool_calls && (
+
+ )}
+ {response.previous_response_id && (
+ {response.previous_response_id}
+ }
+ hasBorder
+ />
+ )}
+ {response.error && (
+
+ {response.error.code}: {response.error.message}
+
+ }
+ className="pt-1 mt-1 border-t border-red-200"
+ />
+ )}
+
+ );
+
+ return (
+
+ );
+}
diff --git a/llama_stack/ui/components/responses/responses-table.test.tsx b/llama_stack/ui/components/responses/responses-table.test.tsx
new file mode 100644
index 000000000..7c45c57d3
--- /dev/null
+++ b/llama_stack/ui/components/responses/responses-table.test.tsx
@@ -0,0 +1,537 @@
+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 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("ResponsesTable", () => {
+ const defaultProps = {
+ data: [] as OpenAIResponse[],
+ isLoading: false,
+ error: null,
+ };
+
+ 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();
+ 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",
+ },
+ ],
+ };
+
+ render();
+
+ 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 isLoading is true", () => {
+ const { container } = render(
+ ,
+ );
+
+ // 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";
+ render(
+ ,
+ );
+ expect(
+ screen.getByText(`Error fetching data: ${errorMessage}`),
+ ).toBeInTheDocument();
+ });
+
+ test("renders default error message when error.message is not available", () => {
+ render(
+ ,
+ );
+ expect(
+ screen.getByText("Error fetching data: An unknown error occurred"),
+ ).toBeInTheDocument();
+ });
+
+ test("renders default error message when error prop is an object without message", () => {
+ render();
+ expect(
+ screen.getByText("Error fetching data: An unknown error occurred"),
+ ).toBeInTheDocument();
+ });
+ });
+
+ describe("Empty State", () => {
+ test('renders "No responses found." and no table when data array is empty', () => {
+ render();
+ 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 = [
+ {
+ 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",
+ },
+ ],
+ },
+ ];
+
+ render(
+ ,
+ );
+
+ // 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",
+ },
+ ],
+ };
+
+ render(
+ ,
+ );
+ 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" },
+ ],
+ },
+ ],
+ };
+
+ render(
+ ,
+ );
+ 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",
+ },
+ ],
+ };
+
+ const { container } = render(
+ ,
+ );
+
+ // 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" }],
+ };
+
+ render(
+ ,
+ );
+ 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" }],
+ };
+
+ render(
+ ,
+ );
+ 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" }],
+ };
+
+ render(
+ ,
+ );
+ 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" }],
+ };
+
+ render(
+ ,
+ );
+ 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" }],
+ };
+
+ render(
+ ,
+ );
+ 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 any,
+ ],
+ input: [{ type: "message", content: "input" }],
+ };
+
+ render(
+ ,
+ );
+ // 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 any,
+ ],
+ input: [{ type: "message", content: "input" }],
+ };
+
+ render(
+ ,
+ );
+ // 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,
+ },
+ ],
+ };
+
+ render(
+ ,
+ );
+
+ // 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
+ truncatedTexts.forEach((textElement) =>
+ expect(textElement).toBeInTheDocument(),
+ );
+ });
+ });
+});
diff --git a/llama_stack/ui/components/responses/responses-table.tsx b/llama_stack/ui/components/responses/responses-table.tsx
new file mode 100644
index 000000000..352450d18
--- /dev/null
+++ b/llama_stack/ui/components/responses/responses-table.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import {
+ OpenAIResponse,
+ ResponseInput,
+ ResponseInputMessageContent,
+} from "@/lib/types";
+import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
+import {
+ isMessageInput,
+ isMessageItem,
+ isFunctionCallItem,
+ isWebSearchCallItem,
+ MessageItem,
+ FunctionCallItem,
+ WebSearchCallItem,
+} from "./utils/item-types";
+
+interface ResponsesTableProps {
+ data: OpenAIResponse[];
+ isLoading: boolean;
+ error: Error | null;
+}
+
+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 any),
+ );
+ if (firstMessage) {
+ const content = extractContentFromItem(firstMessage as MessageItem);
+ if (content) {
+ return content;
+ }
+ }
+
+ const functionCall = response.output.find((item) =>
+ isFunctionCallItem(item as any),
+ );
+ if (functionCall) {
+ return formatFunctionCall(functionCall as FunctionCallItem);
+ }
+
+ const webSearchCall = response.output.find((item) =>
+ isWebSearchCallItem(item as any),
+ );
+ 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({
+ data,
+ isLoading,
+ error,
+}: ResponsesTableProps) {
+ const formattedData = data.map(formatResponseToRow);
+
+ return (
+
+ );
+}
diff --git a/llama_stack/ui/components/responses/utils/item-types.ts b/llama_stack/ui/components/responses/utils/item-types.ts
new file mode 100644
index 000000000..2bde49119
--- /dev/null
+++ b/llama_stack/ui/components/responses/utils/item-types.ts
@@ -0,0 +1,61 @@
+/**
+ * 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 any).call_id === "string"
+ );
+}
diff --git a/llama_stack/ui/components/ui/message-components.tsx b/llama_stack/ui/components/ui/message-components.tsx
new file mode 100644
index 000000000..50ccd623e
--- /dev/null
+++ b/llama_stack/ui/components/ui/message-components.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+export interface MessageBlockProps {
+ label: string;
+ labelDetail?: string;
+ content: React.ReactNode;
+ className?: string;
+ contentClassName?: string;
+}
+
+export const MessageBlock: React.FC = ({
+ label,
+ labelDetail,
+ content,
+ className = "",
+ contentClassName = "",
+}) => {
+ return (
+
+
+ {label}
+ {labelDetail && (
+
+ {labelDetail}
+
+ )}
+
+
+ {content}
+
+