181 lines
4.2 KiB
TypeScript
181 lines
4.2 KiB
TypeScript
import React from "react";
|
|
import { StreamMessage } from "./StreamMessage";
|
|
import type { ClaudeStreamMessage } from "./AgentExecution";
|
|
|
|
/**
|
|
* Demo component showing all the different message types and tools
|
|
*/
|
|
export const AgentExecutionDemo: React.FC = () => {
|
|
// Sample messages based on the provided JSONL session
|
|
const messages: ClaudeStreamMessage[] = [
|
|
// Skip meta message (should not render)
|
|
{
|
|
type: "user",
|
|
isMeta: true,
|
|
message: { content: [] },
|
|
timestamp: "2025-06-11T14:08:53.771Z"
|
|
},
|
|
|
|
// Summary message
|
|
{
|
|
leafUuid: "3c5ecb4f-c1f0-40c2-a357-ab7642ad28b8",
|
|
summary: "JSONL Viewer Model Configuration and Setup",
|
|
type: "summary" as any
|
|
},
|
|
|
|
// Assistant with Edit tool
|
|
{
|
|
type: "assistant",
|
|
message: {
|
|
content: [{
|
|
type: "tool_use",
|
|
name: "Edit",
|
|
input: {
|
|
file_path: "/Users/mufeedvh/dev/jsonl-viewer/script.js",
|
|
new_string: "reader.onerror = () => reject(new Error('Failed to read file'));",
|
|
old_string: "reader.onerror = e => reject(new Error('Failed to read file'));"
|
|
}
|
|
}],
|
|
usage: { input_tokens: 4, output_tokens: 158 }
|
|
}
|
|
},
|
|
|
|
// User with Edit tool result
|
|
{
|
|
type: "user",
|
|
message: {
|
|
content: [{
|
|
type: "tool_result",
|
|
content: `The file /Users/mufeedvh/dev/jsonl-viewer/script.js has been updated. Here's the result of running \`cat -n\` on a snippet of the edited file:
|
|
220 readFileAsText(file) {
|
|
221 return new Promise((resolve, reject) => {
|
|
222 const reader = new FileReader();
|
|
223 reader.onload = e => resolve(e.target.result);
|
|
224 reader.onerror = () => reject(new Error('Failed to read file'));
|
|
225 reader.readAsText(file);
|
|
226 });
|
|
227 }
|
|
228`
|
|
}]
|
|
}
|
|
},
|
|
|
|
// Assistant with MCP tool
|
|
{
|
|
type: "assistant",
|
|
message: {
|
|
content: [{
|
|
type: "tool_use",
|
|
name: "mcp__ide__getDiagnostics",
|
|
input: {}
|
|
}],
|
|
usage: { input_tokens: 4, output_tokens: 37 }
|
|
}
|
|
},
|
|
|
|
// User with empty tool result
|
|
{
|
|
type: "user",
|
|
message: {
|
|
content: [{
|
|
type: "tool_result",
|
|
content: ""
|
|
}]
|
|
}
|
|
},
|
|
|
|
// Assistant with Write tool (large content)
|
|
{
|
|
type: "assistant",
|
|
message: {
|
|
content: [{
|
|
type: "tool_use",
|
|
name: "Write",
|
|
input: {
|
|
file_path: "/Users/mufeedvh/dev/jsonl-viewer/styles.css",
|
|
content: `/* Reset and Base Styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: #f8fafc;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Container */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #1a202c;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header p {
|
|
color: #718096;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Input Section */
|
|
.input-section {
|
|
display: grid;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Drop Zone */
|
|
.drop-zone {
|
|
border: 2px dashed #cbd5e0;
|
|
border-radius: 12px;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
position: relative;
|
|
}
|
|
|
|
.drop-zone:hover,
|
|
.drop-zone.drag-over {
|
|
border-color: #4299e1;
|
|
background: #ebf8ff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(66, 153, 225, 0.1);
|
|
}
|
|
|
|
/* ... many more lines of CSS ... */
|
|
/* This content is over 1000 characters so it should show the maximize button */
|
|
` + '\n'.repeat(100) + '/* End of very long CSS file */'
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-8 space-y-4">
|
|
<h1 className="text-2xl font-bold mb-6">Agent Execution Demo</h1>
|
|
|
|
{messages.map((message, idx) => (
|
|
<StreamMessage key={idx} message={message} streamMessages={messages} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|