responses table, responses details

# What does this PR do?


## Test Plan
# What does this PR do?


## Test Plan
This commit is contained in:
Eric Huang 2025-05-27 21:23:10 -07:00
parent 0b695538af
commit de53390c1c
34 changed files with 3282 additions and 380 deletions

View file

@ -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 (
<div>
<p className="py-1 font-semibold text-gray-800 mb-1">
{label}
{labelDetail && (
<span className="text-xs text-gray-500 font-normal ml-1">
{labelDetail}
</span>
)}
</p>
<div className="py-1">{content}</div>
</div>
);
};
interface ToolCallBlockProps {
children: React.ReactNode;
className?: string;
}
const ToolCallBlock = ({ children, className }: ToolCallBlockProps) => {
// Common styling for both function call arguments and tool output blocks
// Let's use slate-50 background as it's good for code-like content.
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>
);
};
import {
MessageBlock,
ToolCallBlock,
} from "@/components/ui/message-components";
interface ChatMessageItemProps {
message: ChatMessage;
@ -65,7 +30,11 @@ export function ChatMessageItem({ message }: ChatMessageItemProps) {
);
case "assistant":
if (message.tool_calls && message.tool_calls.length > 0) {
if (
message.tool_calls &&
Array.isArray(message.tool_calls) &&
message.tool_calls.length > 0
) {
return (
<>
{message.tool_calls.map((toolCall: any, index: number) => {