Gitiles
Code Review Sign In
code.v1.dodo.cloud / sketch / 078e85ae683cfcb6f0cc45dfbb7dd02aafec0046 / . / webui / src / web-components / demo / sketch-timeline.demo.html
blob: 9c817d82cb5c081a126db99c574f68264b00a2d1 [file] [log] [blame]
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]1<html>
2 <head>
3 <title>sketch-timeline demo</title>
4 <link rel="stylesheet" href="demo.css" />
Philip Zeyliger72682df2025-04-23 13:09:46 -0700[diff] [blame]5 <script type="module" src="../sketch-timeline.ts"></script>
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]6 <script>
7 const messages = [
8 {
9 type: "user",
10 content: "a user message",
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]11 timestamp: "2025-04-14T16:39:30.639533919Z",
12 conversation_id: "conv-123456",
13 idx: 0,
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]14 },
15 {
16 type: "agent",
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]17 content: "an agent message with usage information",
18 timestamp: "2025-04-14T16:39:31.639533919Z",
19 conversation_id: "conv-123456",
20 idx: 1,
21 usage: {
22 input_tokens: 4,
23 cache_creation_input_tokens: 2620,
24 cache_read_input_tokens: 0,
25 output_tokens: 106,
26 cost_usd: 0.011427,
27 },
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]28 },
29 {
30 type: "agent",
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]31 content: "an agent message with a single tool call",
32 timestamp: "2025-04-14T16:39:32.639533919Z",
33 conversation_id: "conv-123456",
34 idx: 2,
35 tool_calls: [
36 {
37 name: "bash",
38 input: 'find . -type f -name "*.go" | wc -l',
39 tool_call_id: "call_12345",
40 args: '{"command": "find . -type f -name \\"*.go\\" | wc -l"}',
41 result: "486",
42 },
43 ],
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]44 },
45 {
46 type: "agent",
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]47 content:
48 "an agent message with a bash command that is extremely long and would create a horizontal scrollbar",
49 timestamp: "2025-04-14T16:39:32.739533919Z",
50 conversation_id: "conv-123456",
51 idx: 2.5,
52 tool_calls: [
53 {
54 name: "bash",
55 input:
56 'find /app -type f -name "*.ts" -o -name "*.js" -o -name "*.tsx" -o -name "*.jsx" | xargs grep -l "useState" | while read file; do echo "File: $file"; grep -n "useState" $file | head -5; echo; done | head -50',
57 tool_call_id: "call_verylongbash",
58 args: '{"command": "find /app -type f -name \\"*.ts\\" -o -name \\"*.js\\" -o -name \\"*.tsx\\" -o -name \\"*.jsx\\" | xargs grep -l \\"useState\\" | while read file; do echo \\"File: $file\\"; grep -n \\"useState\\" $file | head -5; echo; done | head -50"}',
59 result:
60 'File: /app/webui/src/web-components/sketch-chat-input.ts\n97: useState,\n\nFile: /app/webui/src/web-components/sketch-diff-view.ts\n47:import { createRef, ref, useState } from "lit/directives/ref.js";\n110: const [selectedFiles, setSelectedFiles] = useState([]);\n',
61 },
62 ],
63 },
64 {
65 type: "agent",
66 content:
67 "an agent message with a bash command that has a very long output that would create a horizontal scrollbar",
68 timestamp: "2025-04-14T16:39:32.839533919Z",
69 conversation_id: "conv-123456",
70 idx: 2.7,
71 tool_calls: [
72 {
73 name: "bash",
74 input: "cat /app/webui/package.json | grep -A 5 dependencies",
75 tool_call_id: "call_longoutput",
76 args: '{"command": "cat /app/webui/package.json | grep -A 5 dependencies"}',
77 result:
78 ' "dependencies": {\n "@xterm/addon-fit": "^0.10.0",\n "@xterm/xterm": "^5.5.0",\n "diff2html": "3.4.51",\n "lit": "^3.2.1",\n "marked": "^15.0.7",\n "mermaid": "^11.6.0",\n "sanitize-html": "^2.15.0",\n "vega": "^5.33.0",\n "vega-embed": "^6.29.0",\n "vega-lite": "^5.23.0",\n "react": "^18.2.0",\n "react-dom": "^18.2.0",\n "styled-components": "^6.1.8",\n "tailwindcss": "^3.4.1",\n "typescript": "^5.3.3",\n "zod": "^3.22.4",\n "@types/react": "^18.2.55",\n "@types/react-dom": "^18.2.19",\n "eslint": "^8.56.0",\n "prettier": "^3.2.5"\n },',
79 },
80 ],
81 },
82 {
83 type: "agent",
84 content:
85 "an agent message with two tool calls that will show how the width behaves with very long content that should push the boundaries of the UI layout with really wide tool calls that might stretch beyond the regular message content width",
86 timestamp: "2025-04-14T16:39:33.639533919Z",
87 conversation_id: "conv-123456",
88 idx: 3,
89 tool_calls: [
90 {
91 name: "keyword_search",
92 input: "Search for files related to the timeline component",
93 tool_call_id: "call_67890",
94 args: '{"query": "Find all files related to the timeline component in the project", "search_terms": ["timeline", "message", "component", "web-components"]}',
95 result:
96 "Found 3 files: sketch-timeline.ts, sketch-timeline-message.ts, sketch-timeline.demo.html",
97 },
98 {
99 name: "patch",
100 input: "Update the timeline component CSS",
101 tool_call_id: "call_abcdef",
102 args: '{"path": "/app/webui/src/web-components/sketch-timeline.ts", "patches": [{"operation": "replace", "oldText": "width: 100%;", "newText": "width: auto; max-width: 100%;"}, {"operation": "replace", "oldText": "margin-bottom: 20px;", "newText": "margin-bottom: 24px;"}]}',
103 result: "Applied all patches successfully",
104 },
105 ],
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]106 },
107 {
108 type: "user",
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]109 content: "another user message",
110 timestamp: "2025-04-14T16:39:34.639533919Z",
111 conversation_id: "conv-123456",
112 idx: 4,
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]113 },
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]114 {
115 type: "agent",
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]116 content: "an agent message with detailed information and usage data",
117 timestamp: "2025-04-14T16:39:35.639533919Z",
118 conversation_id: "conv-123456",
119 idx: 5,
120 usage: {
121 input_tokens: 125,
122 cache_creation_input_tokens: 0,
123 cache_read_input_tokens: 3050,
124 output_tokens: 245,
125 cost_usd: 0.023456,
126 },
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]127 },
128 {
129 type: "tool",
130 content: "a tool use message",
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]131 timestamp: "2025-04-14T16:39:36.639533919Z",
132 conversation_id: "conv-123456",
133 idx: 6,
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]134 },
135 {
136 type: "commit",
137 end_of_turn: false,
138 content: "",
139 commits: [
140 {
141 hash: "ece101c103ec231da87f4df05c1b5e6a24e13add",
142 subject: "Add README.md for web components directory",
Philip Zeyliger2032b1c2025-04-23 19:40:42 -0700[diff] [blame]143 body: "This adds documentation for the web components used in the Loop UI,\nincluding a description of each component, usage examples, and\ndevelopment guidelines.\n\nCo-Authored-By: sketch\nadd README.md for webui/src/web-components",
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]144 pushed_branch:
145 "sketch/create-readmemd-for-web-components-directory",
146 },
147 ],
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]148 timestamp: "2025-04-14T16:39:37.639533919Z",
149 conversation_id: "conv-123456",
150 idx: 7,
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]151 },
152 {
153 type: "agent",
154 content: "an end-of-turn agent message",
155 end_of_turn: true,
Philip Zeyliger16fa8b42025-05-02 04:28:16 +0000[diff] [blame]156 timestamp: "2025-04-14T16:39:38.639533919Z",
157 conversation_id: "conv-123456",
158 idx: 8,
159 usage: {
160 input_tokens: 85,
161 cache_creation_input_tokens: 1240,
162 cache_read_input_tokens: 750,
163 output_tokens: 178,
164 cost_usd: 0.018976,
165 },
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]166 },
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]167 ];
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]168
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]169 document.addEventListener("DOMContentLoaded", () => {
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]170 const appShell = document.querySelector(".app-shell");
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]171 const timelineEl = document.querySelector("sketch-timeline");
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]172 timelineEl.messages = messages;
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]173 timelineEl.scrollContainer = appShell;
174 const addMessagesCheckbox = document.querySelector("#addMessages");
175 addMessagesCheckbox.addEventListener("change", toggleAddMessages);
176
177 let addingMessages = false;
178 const addNewMessagesInterval = 1000;
179
180 function addNewMessages() {
181 if (!addingMessages) {
182 return;
183 }
184 const n = new Date().getMilliseconds() % messages.length;
185 const msgToDup = messages[n];
186 const dup = JSON.parse(JSON.stringify(msgToDup));
187 dup.idx = messages.length;
188 dup.timestamp = new Date().toISOString();
189 messages.push(dup);
190 timelineEl.messages = messages.concat();
191 timelineEl.prop;
192 timelineEl.requestUpdate();
193 }
194
195 let addMessagesHandler = setInterval(
196 addNewMessages,
197 addNewMessagesInterval,
198 );
199
200 function toggleAddMessages() {
201 addingMessages = !addingMessages;
202 if (addingMessages) {
203 } else {
204 }
205 }
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]206 });
207 </script>
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]208 <style>
209 .app-shell {
210 display: block;
211 font-family:
212 system-ui,
213 -apple-system,
214 BlinkMacSystemFont,
215 "Segoe UI",
216 Roboto,
217 sans-serif;
218 color: rgb(51, 51, 51);
219 line-height: 1.4;
220 min-height: 100vh;
221 width: 100%;
222 position: relative;
223 overflow-x: hidden;
224 }
225 .app-header {
226 flex-grow: 0;
227 }
228 .view-container {
229 flex-grow: 2;
230 }
231 </style>
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]232 </head>
233 <body>
Sean McCullough2c5bba42025-04-20 19:33:17 -0700[diff] [blame]234 <div class="app-shell">
235 <div class="app-header">
236 <h1>sketch-timeline demo</h1>
237 <input
238 type="checkbox"
239 id="addMessages"
240 title="Automatically add new messages"
241 /><label for="addMessages">Automatically add new messages</label>
242 </div>
243 <div class="view-container">
244 <div class="chat-view view-active">
245 <sketch-timeline></sketch-timeline>
246 </div>
247 </div>
248 </div>
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]249 </body>
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]250</html>