| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <title>Sketch Charts Demo</title> |
| <script type="module" src="../sketch-charts.ts"></script> |
| <link rel="stylesheet" href="demo.css" /> |
| <style> |
| sketch-charts { |
| margin: 20px; |
| max-width: 1000px; |
| } |
| |
| body { |
| font-family: |
| system-ui, |
| -apple-system, |
| BlinkMacSystemFont, |
| "Segoe UI", |
| Roboto, |
| sans-serif; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Sketch Charts Demo</h1> |
| <sketch-charts id="charts"></sketch-charts> |
| |
| <script> |
| // Sample data for testing |
| const sampleMessages = [ |
| { |
| idx: 1, |
| type: "human", |
| content: "Hello, can you help me with a coding task?", |
| timestamp: new Date(Date.now() - 3600000).toISOString(), |
| usage: { cost_usd: 0.0001 }, |
| }, |
| { |
| idx: 2, |
| type: "assistant", |
| content: |
| "I'd be happy to help! What kind of coding task are you working on?", |
| timestamp: new Date(Date.now() - 3500000).toISOString(), |
| usage: { cost_usd: 0.0005 }, |
| }, |
| { |
| idx: 3, |
| type: "human", |
| content: "I need to create a web component using lit-element", |
| timestamp: new Date(Date.now() - 3400000).toISOString(), |
| usage: { cost_usd: 0.0001 }, |
| }, |
| { |
| idx: 4, |
| type: "assistant", |
| content: |
| "I can definitely help with that. Lit Element is a great library for building web components.", |
| timestamp: new Date(Date.now() - 3300000).toISOString(), |
| usage: { cost_usd: 0.0008 }, |
| }, |
| { |
| idx: 5, |
| type: "assistant", |
| tool_name: "bash", |
| input: "ls -la", |
| tool_result: |
| "total 16\ndrwxr-xr-x 4 user staff 128 Jan 10 12:34 .\ndrwxr-xr-x 10 user staff 320 Jan 10 12:34 ..\n-rw-r--r-- 1 user staff 123 Jan 10 12:34 file1.txt\n-rw-r--r-- 1 user staff 456 Jan 10 12:34 file2.txt", |
| start_time: new Date(Date.now() - 3200000).toISOString(), |
| end_time: new Date(Date.now() - 3190000).toISOString(), |
| timestamp: new Date(Date.now() - 3190000).toISOString(), |
| usage: { cost_usd: 0.0002 }, |
| }, |
| { |
| idx: 6, |
| type: "assistant", |
| content: "Let me create a basic web component for you.", |
| timestamp: new Date(Date.now() - 3100000).toISOString(), |
| usage: { cost_usd: 0.0015 }, |
| }, |
| { |
| idx: 7, |
| type: "human", |
| content: "Can you show me how to handle events in the web component?", |
| timestamp: new Date(Date.now() - 3000000).toISOString(), |
| usage: { cost_usd: 0.0001 }, |
| }, |
| { |
| idx: 8, |
| type: "assistant", |
| tool_name: "bash", |
| input: "cat example.ts", |
| tool_result: |
| "import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('my-element')\nexport class MyElement extends LitElement {\n render() {\n return html`<div>Hello World</div>`;\n }\n}", |
| start_time: new Date(Date.now() - 2900000).toISOString(), |
| end_time: new Date(Date.now() - 2800000).toISOString(), |
| timestamp: new Date(Date.now() - 2800000).toISOString(), |
| usage: { cost_usd: 0.0003 }, |
| }, |
| { |
| idx: 9, |
| type: "assistant", |
| content: |
| "Here's how you can handle events in a web component using Lit.", |
| timestamp: new Date(Date.now() - 2700000).toISOString(), |
| usage: { cost_usd: 0.002 }, |
| }, |
| { |
| idx: 10, |
| type: "human", |
| content: "Thank you! How about adding properties and attributes?", |
| timestamp: new Date(Date.now() - 2600000).toISOString(), |
| usage: { cost_usd: 0.0001 }, |
| }, |
| { |
| idx: 11, |
| type: "assistant", |
| content: |
| "You can use the @property decorator to define properties in your Lit Element component.", |
| timestamp: new Date(Date.now() - 2500000).toISOString(), |
| usage: { cost_usd: 0.0025 }, |
| }, |
| ]; |
| |
| // Set sample data as soon as the component is defined |
| document.addEventListener("DOMContentLoaded", () => { |
| console.time("chart-demo-load"); |
| const chartsComponent = document.getElementById("charts"); |
| chartsComponent.messages = sampleMessages; |
| console.timeEnd("chart-demo-load"); |
| }); |
| </script> |
| </body> |
| </html> |