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 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

View file

@ -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<MessageBlockProps> = ({
label,
labelDetail,
content,
className = "",
contentClassName = "",
}) => {
return (
<div className={`mb-4 ${className}`}>
<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 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>
);
};