| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Sketch Timeline Manual Test</title> |
| <link rel="stylesheet" href="/dist/tailwind.css" /> |
| <style> |
| body { |
| font-family: |
| system-ui, |
| -apple-system, |
| sans-serif; |
| margin: 0; |
| padding: 20px; |
| } |
| .test-container { |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| .test-section { |
| margin: 40px 0; |
| padding: 20px; |
| border: 1px solid #e1e5e9; |
| border-radius: 8px; |
| } |
| .test-section h3 { |
| margin: 0 0 15px 0; |
| color: #24292f; |
| } |
| .timeline-wrapper { |
| height: 400px; |
| border: 1px solid #ccc; |
| border-radius: 6px; |
| margin: 15px 0; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="test-container"> |
| <h1>Sketch Timeline Component Test</h1> |
| <p> |
| This page tests the converted SketchTimeline component using Tailwind |
| CSS. |
| </p> |
| |
| <div class="test-section"> |
| <h3>Empty Timeline (Welcome State)</h3> |
| <div class="timeline-wrapper"> |
| <sketch-timeline id="empty-timeline"></sketch-timeline> |
| </div> |
| </div> |
| |
| <div class="test-section"> |
| <h3>Timeline with Messages</h3> |
| <div class="timeline-wrapper"> |
| <sketch-timeline id="messages-timeline"></sketch-timeline> |
| </div> |
| </div> |
| |
| <div class="test-section"> |
| <h3>Timeline with Thinking State</h3> |
| <div class="timeline-wrapper"> |
| <sketch-timeline id="thinking-timeline"></sketch-timeline> |
| </div> |
| </div> |
| |
| <div class="test-section"> |
| <h3>Controls</h3> |
| <button id="add-message">Add Message</button> |
| <button id="toggle-thinking">Toggle Thinking</button> |
| <button id="clear-messages">Clear Messages</button> |
| </div> |
| </div> |
| |
| <script type="module"> |
| // Import the timeline component |
| import "../sketch-timeline.js"; |
| |
| // Mock messages |
| function createMockMessage(props = {}) { |
| return { |
| idx: props.idx || 0, |
| type: props.type || "agent", |
| content: props.content || "Hello world", |
| timestamp: props.timestamp || "2023-05-15T12:00:00Z", |
| elapsed: props.elapsed || 1500000000, |
| end_of_turn: props.end_of_turn || false, |
| conversation_id: props.conversation_id || "conv123", |
| tool_calls: props.tool_calls || [], |
| commits: props.commits || [], |
| usage: props.usage, |
| hide_output: props.hide_output || false, |
| ...props, |
| }; |
| } |
| |
| // Get timeline elements |
| const emptyTimeline = document.getElementById("empty-timeline"); |
| const messagesTimeline = document.getElementById("messages-timeline"); |
| const thinkingTimeline = document.getElementById("thinking-timeline"); |
| |
| // Set up messages timeline |
| const messages = [ |
| createMockMessage({ |
| idx: 0, |
| content: "Hello! I'm a user message.", |
| type: "user", |
| timestamp: "2023-05-15T12:00:00Z", |
| }), |
| createMockMessage({ |
| idx: 1, |
| content: "And I'm an agent response with some details.", |
| type: "agent", |
| timestamp: "2023-05-15T12:01:00Z", |
| usage: { |
| input_tokens: 15, |
| output_tokens: 42, |
| cost_usd: 0.001234, |
| }, |
| }), |
| createMockMessage({ |
| idx: 2, |
| content: "Here's a message with tool calls.", |
| type: "agent", |
| timestamp: "2023-05-15T12:02:00Z", |
| tool_calls: [ |
| { |
| name: "bash", |
| input: "echo 'Hello World'", |
| tool_call_id: "call_123", |
| args: '{"command": "echo \'Hello World\'"}', |
| result: "Hello World", |
| }, |
| ], |
| }), |
| ]; |
| |
| messagesTimeline.messages = messages; |
| thinkingTimeline.messages = messages.slice(0, 2); |
| |
| // Set initial load complete |
| setTimeout(() => { |
| messagesTimeline.isInitialLoadComplete = true; |
| thinkingTimeline.isInitialLoadComplete = true; |
| messagesTimeline.requestUpdate(); |
| thinkingTimeline.requestUpdate(); |
| }, 100); |
| |
| // Set thinking state |
| thinkingTimeline.llmCalls = 1; |
| thinkingTimeline.toolCalls = ["bash"]; |
| |
| // Control buttons |
| let messageCount = messages.length; |
| document.getElementById("add-message").addEventListener("click", () => { |
| const newMessage = createMockMessage({ |
| idx: messageCount++, |
| content: `New message added at ${new Date().toLocaleTimeString()}`, |
| type: messageCount % 2 === 0 ? "user" : "agent", |
| timestamp: new Date().toISOString(), |
| }); |
| messages.push(newMessage); |
| messagesTimeline.messages = [...messages]; |
| }); |
| |
| document |
| .getElementById("toggle-thinking") |
| .addEventListener("click", () => { |
| if (thinkingTimeline.llmCalls > 0) { |
| thinkingTimeline.llmCalls = 0; |
| thinkingTimeline.toolCalls = []; |
| } else { |
| thinkingTimeline.llmCalls = 1; |
| thinkingTimeline.toolCalls = ["bash"]; |
| } |
| }); |
| |
| document |
| .getElementById("clear-messages") |
| .addEventListener("click", () => { |
| messages.length = 0; |
| messagesTimeline.messages = []; |
| messageCount = 0; |
| }); |
| </script> |
| </body> |
| </html> |