@midscene/recorder 0.21.4-beta-20250711063424.0 → 0.21.4-beta-20250714025212.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/RecordTimeline.css +5 -0
  2. package/dist/RecordTimeline.d.ts +1 -0
  3. package/dist/RecordTimeline.js +262 -546
  4. package/dist/components/shiny-text.css +73 -0
  5. package/dist/components/shiny-text.d.ts +12 -0
  6. package/dist/components/shiny-text.js +13 -0
  7. package/dist/recorder-iife.js +1642 -270
  8. package/dist/recorder-iife.js.LICENSE.txt +8 -0
  9. package/dist/recorder.d.ts +2 -0
  10. package/dist/recorder.js +43 -17
  11. package/package.json +2 -2
  12. package/LICENSE +0 -21
package/dist/RecordTimeline.js CHANGED
@@ -1,9 +1,47 @@
1
1
  import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
2
  import * as __WEBPACK_EXTERNAL_MODULE__ant_design_icons_a8184985__ from "@ant-design/icons";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
4
- import "react";
5
- const { Text, Title } = __WEBPACK_EXTERNAL_MODULE_antd__.Typography;
4
+ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
5
+ import * as __WEBPACK_EXTERNAL_MODULE__components_shiny_text_js_e4b4c6bb__ from "./components/shiny-text.js";
6
+ import "./RecordTimeline.css";
7
+ const { Text } = __WEBPACK_EXTERNAL_MODULE_antd__.Typography;
6
8
  const RecordTimeline = ({ events, onEventClick })=>{
9
+ const [expandedEvents, setExpandedEvents] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(new Set());
10
+ console.log('events', events);
11
+ (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
12
+ if (events.length > 0) {
13
+ const timeline = document.querySelector('.ant-timeline');
14
+ if (timeline) timeline.scrollIntoView({
15
+ behavior: 'smooth',
16
+ block: 'end'
17
+ });
18
+ }
19
+ }, [
20
+ events.length
21
+ ]);
22
+ const toggleEventExpansion = (index)=>{
23
+ const newExpanded = new Set(expandedEvents);
24
+ if (newExpanded.has(index)) newExpanded.delete(index);
25
+ else newExpanded.add(index);
26
+ setExpandedEvents(newExpanded);
27
+ };
28
+ const truncateJsonStrings = (obj, maxLength = 30)=>{
29
+ if ('string' == typeof obj) return obj.length > maxLength ? `${obj.substring(0, maxLength)}...` : obj;
30
+ if (Array.isArray(obj)) return obj.map((item)=>truncateJsonStrings(item, maxLength));
31
+ if (obj && 'object' == typeof obj) {
32
+ const truncated = {};
33
+ for(const key in obj)if (Object.prototype.hasOwnProperty.call(obj, key)) truncated[key] = truncateJsonStrings(obj[key], maxLength);
34
+ return truncated;
35
+ }
36
+ return obj;
37
+ };
38
+ const copyToClipboard = (text)=>{
39
+ navigator.clipboard.writeText(text).then(()=>{
40
+ __WEBPACK_EXTERNAL_MODULE_antd__.message.success('JSON copied to clipboard');
41
+ }).catch(()=>{
42
+ __WEBPACK_EXTERNAL_MODULE_antd__.message.error('Copy failed');
43
+ });
44
+ };
7
45
  const getEventIcon = (type)=>{
8
46
  switch(type){
9
47
  case 'click':
@@ -43,7 +81,11 @@ const RecordTimeline = ({ events, onEventClick })=>{
43
81
  }
44
82
  });
45
83
  default:
46
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ant_design_icons_a8184985__.MoreOutlined, {});
84
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ant_design_icons_a8184985__.AimOutlined, {
85
+ style: {
86
+ color: '#d9d9d9'
87
+ }
88
+ });
47
89
  }
48
90
  };
49
91
  const getEventColor = (type)=>{
@@ -64,12 +106,6 @@ const RecordTimeline = ({ events, onEventClick })=>{
64
106
  return '#d9d9d9';
65
107
  }
66
108
  };
67
- const formatTime = (timestamp)=>new Date(timestamp).toLocaleTimeString('en-US', {
68
- hour12: false,
69
- hour: '2-digit',
70
- minute: '2-digit',
71
- second: '2-digit'
72
- });
73
109
  const getEventTitle = (event)=>{
74
110
  switch(event.type){
75
111
  case 'click':
@@ -77,11 +113,11 @@ const RecordTimeline = ({ events, onEventClick })=>{
77
113
  if (event.value) return `Click Element "${event.value}"`;
78
114
  return 'Click';
79
115
  case 'input':
80
- return 'Change';
116
+ return 'Input';
81
117
  case 'scroll':
82
118
  return 'Scroll';
83
119
  case 'navigation':
84
- return event.title || 'Navigate';
120
+ return 'Navigate';
85
121
  case 'setViewport':
86
122
  return 'Set viewport';
87
123
  case 'keydown':
@@ -91,581 +127,301 @@ const RecordTimeline = ({ events, onEventClick })=>{
91
127
  }
92
128
  };
93
129
  const getEventDescription = (event)=>{
130
+ const eventTitle = getEventTitle(event);
94
131
  switch(event.type){
95
132
  case 'click':
96
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
97
- direction: "vertical",
98
- size: "small",
133
+ if (true === event.descriptionLoading && event.elementRect?.x !== void 0 && event.elementRect?.y !== void 0) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
134
+ style: {
135
+ display: 'flex',
136
+ alignItems: 'center',
137
+ gap: '4px'
138
+ },
99
139
  children: [
100
- event.targetTagName && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
101
- type: "secondary",
102
- children: [
103
- 'Element "',
104
- event.targetTagName,
105
- '"'
106
- ]
107
- }),
108
- event.elementRect?.x !== void 0 && event.elementRect?.y !== void 0 && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
109
- type: "secondary",
140
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
110
141
  children: [
111
- "Position: (",
112
- event.elementRect?.x,
113
- ", ",
114
- event.elementRect?.y,
115
- ")"
142
+ eventTitle,
143
+ " - "
116
144
  ]
117
145
  }),
118
- void 0 !== event.elementDescription && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
119
- type: "secondary",
120
- children: [
121
- "Description: ",
122
- event.elementDescription
123
- ]
146
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_shiny_text_js_e4b4c6bb__.ShinyText, {
147
+ text: `(${event.elementRect.x}, ${event.elementRect.y})`,
148
+ disabled: false,
149
+ speed: 3,
150
+ className: "step-title-shiny"
124
151
  })
125
152
  ]
126
153
  });
154
+ if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
155
+ className: "",
156
+ children: [
157
+ eventTitle,
158
+ " - ",
159
+ event.elementDescription
160
+ ]
161
+ });
162
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
163
+ children: eventTitle
164
+ });
127
165
  case 'input':
128
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
129
- direction: "vertical",
130
- size: "small",
166
+ if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
167
+ children: [
168
+ eventTitle,
169
+ " - ",
170
+ event.elementDescription
171
+ ]
172
+ });
173
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("span", {
174
+ style: {
175
+ display: 'flex',
176
+ alignItems: 'center',
177
+ gap: '4px'
178
+ },
131
179
  children: [
132
180
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
133
- type: "secondary",
134
181
  children: [
135
- 'Element "',
136
- event.targetTagName || 'Input',
137
- '"'
182
+ eventTitle,
183
+ " - "
138
184
  ]
139
185
  }),
140
- void 0 !== event.elementDescription && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
141
- type: "secondary",
142
- children: [
143
- "Description: ",
144
- event.elementDescription
145
- ]
146
- }),
147
- event.value && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
148
- code: true,
149
- children: [
150
- '"',
151
- event.value,
152
- '"'
153
- ]
186
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__components_shiny_text_js_e4b4c6bb__.ShinyText, {
187
+ text: event.value ? `"${event.value}"` : '',
188
+ disabled: false,
189
+ speed: 3,
190
+ className: "step-title-shiny"
154
191
  })
155
192
  ]
156
193
  });
157
194
  case 'scroll':
195
+ if (event.elementDescription) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
196
+ children: [
197
+ eventTitle,
198
+ " - ",
199
+ event.value?.split(' ')[0] || ''
200
+ ]
201
+ });
158
202
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
159
- type: "secondary",
160
203
  children: [
161
- "Position: (",
204
+ eventTitle,
205
+ " - Position: (",
162
206
  event.elementRect?.x || 0,
163
- ", ",
207
+ ",",
208
+ ' ',
164
209
  event.elementRect?.y || 0,
165
210
  ")"
166
211
  ]
167
212
  });
168
213
  case 'navigation':
169
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
170
- direction: "vertical",
171
- size: "small",
172
- children: event.url && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
173
- type: "secondary",
174
- style: {
175
- display: '-webkit-box',
176
- WebkitLineClamp: 2,
177
- WebkitBoxOrient: 'vertical',
178
- overflow: 'hidden',
179
- wordBreak: 'break-all'
180
- },
181
- children: event.url
182
- })
183
- });
214
+ {
215
+ const truncatedUrl = event.url && event.url.length > 50 ? `${event.url.substring(0, 50)}...` : event.url;
216
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
217
+ children: [
218
+ eventTitle,
219
+ " - ",
220
+ truncatedUrl
221
+ ]
222
+ });
223
+ }
184
224
  case 'setViewport':
185
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
186
- type: "secondary",
187
- children: "Desktop 964x992 px"
225
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
226
+ children: [
227
+ eventTitle,
228
+ " - Desktop 964x992 px"
229
+ ]
188
230
  });
189
231
  case 'keydown':
190
232
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
191
- type: "secondary",
192
233
  children: [
193
- "Key: ",
234
+ eventTitle,
235
+ " - Key: ",
194
236
  event.value || 'Unknown'
195
237
  ]
196
238
  });
197
239
  default:
198
- return null;
240
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
241
+ children: eventTitle
242
+ });
199
243
  }
200
244
  };
201
- const copyToClipboard = (text)=>{
202
- navigator.clipboard.writeText(text).then(()=>{
203
- __WEBPACK_EXTERNAL_MODULE_antd__.message.success('JSON copied to clipboard');
204
- }).catch(()=>{
205
- __WEBPACK_EXTERNAL_MODULE_antd__.message.error('Copy failed');
206
- });
207
- };
208
245
  const timelineItems = events.map((event, index)=>{
209
- event.screenshotBefore;
210
246
  const boxedImage = event.screenshotWithBox;
211
247
  const afterImage = event.screenshotAfter;
212
- const hasElementInfo = event.elementRect?.left !== void 0 && event.elementRect?.top !== void 0;
213
- const eventJsonString = JSON.stringify(event, null, 2);
248
+ const isExpanded = expandedEvents.has(index);
214
249
  return {
215
250
  dot: getEventIcon(event.type),
216
251
  color: getEventColor(event.type),
217
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Card, {
218
- size: "small",
219
- bordered: false,
220
- style: {
221
- marginBottom: 8,
222
- cursor: 'pointer'
223
- },
224
- onClick: ()=>onEventClick?.(event, index),
225
- bodyStyle: {
226
- padding: '12px 16px'
227
- },
228
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
229
- direction: "vertical",
252
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
253
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Card, {
230
254
  size: "small",
255
+ bordered: false,
231
256
  style: {
232
- width: '100%'
257
+ marginBottom: isExpanded ? 8 : 8,
258
+ cursor: 'pointer'
259
+ },
260
+ onClick: ()=>{
261
+ toggleEventExpansion(index);
262
+ onEventClick?.(event, index);
263
+ },
264
+ styles: {
265
+ body: {
266
+ padding: '8px 12px',
267
+ backgroundColor: '#F2F4F7',
268
+ borderRadius: '8px'
269
+ }
233
270
  },
234
271
  children: [
235
272
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
236
273
  style: {
237
274
  width: '100%',
238
- justifyContent: 'space-between'
275
+ justifyContent: 'space-between',
276
+ alignItems: 'center',
277
+ color: 'rgba(0, 0, 0, 0.85)'
239
278
  },
240
279
  children: [
241
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
242
- children: [
243
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
244
- strong: true,
245
- children: getEventTitle(event)
246
- }),
247
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tag, {
248
- color: getEventColor(event.type),
249
- children: event.type
250
- }),
251
- hasElementInfo && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tag, {
252
- color: "orange",
253
- style: {
254
- fontSize: '10px'
255
- },
256
- children: "Element Located"
257
- })
258
- ]
259
- }),
260
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
261
- children: [
262
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Popover, {
263
- content: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
264
- style: {
265
- maxWidth: '500px',
266
- maxHeight: '400px'
267
- },
268
- children: [
269
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
270
- style: {
271
- marginBottom: '12px',
272
- display: 'flex',
273
- justifyContent: 'space-between',
274
- alignItems: 'center'
275
- },
276
- children: [
277
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
278
- strong: true,
279
- children: "Event Details"
280
- }),
281
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
282
- type: "primary",
283
- size: "small",
284
- icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ant_design_icons_a8184985__.CopyOutlined, {}),
285
- onClick: ()=>copyToClipboard(eventJsonString),
286
- children: "Copy JSON"
287
- })
288
- ]
289
- }),
290
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
291
- style: {
292
- overflow: 'auto',
293
- maxHeight: '350px'
294
- },
295
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("pre", {
296
- style: {
297
- fontSize: '12px',
298
- margin: 0,
299
- whiteSpace: 'pre-wrap',
300
- backgroundColor: '#f5f5f5',
301
- padding: '12px',
302
- borderRadius: '4px',
303
- border: '1px solid #d9d9d9'
304
- },
305
- children: eventJsonString
306
- })
307
- })
308
- ]
309
- }),
310
- trigger: "click",
311
- placement: "right",
312
- overlayStyle: {
313
- maxWidth: '550px'
314
- },
315
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
316
- type: "text",
317
- size: "small",
318
- icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ant_design_icons_a8184985__.InfoCircleOutlined, {}),
319
- onClick: (e)=>{
320
- e.stopPropagation();
321
- },
322
- title: "View Event Details"
323
- })
324
- }),
325
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
326
- type: "text",
327
- size: "small",
328
- icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ant_design_icons_a8184985__.MoreOutlined, {}),
329
- onClick: (e)=>{
330
- e.stopPropagation();
331
- }
332
- })
333
- ]
334
- })
335
- ]
336
- }),
337
- getEventDescription(event),
338
- (boxedImage || afterImage) && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
339
- style: {
340
- display: 'flex',
341
- gap: '12px',
342
- alignItems: 'flex-start'
343
- },
344
- children: [
345
- boxedImage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
280
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
346
281
  style: {
347
- flexShrink: 0
282
+ flex: 1,
283
+ minWidth: 0
348
284
  },
349
- children: [
350
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
351
- style: {
352
- marginBottom: '4px',
353
- fontSize: '11px',
354
- color: '#8c8c8c',
355
- textAlign: 'center'
356
- },
357
- children: "Highlighted"
358
- }),
359
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Popover, {
360
- content: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
361
- style: {
362
- maxWidth: '400px'
363
- },
364
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
365
- direction: "vertical",
366
- size: "small",
367
- style: {
368
- width: '100%'
369
- },
370
- children: [
371
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
372
- strong: true,
373
- children: "Selected Element Details"
374
- }),
375
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Image, {
376
- src: boxedImage,
377
- style: {
378
- width: '100%',
379
- maxHeight: '300px',
380
- objectFit: 'contain'
381
- },
382
- preview: true
383
- }),
384
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
385
- style: {
386
- padding: '6px 10px',
387
- backgroundColor: '#f0f8ff',
388
- borderRadius: '4px',
389
- fontSize: '12px'
390
- },
391
- children: [
392
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
393
- children: [
394
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
395
- strong: true,
396
- children: "Element Type:"
397
- }),
398
- ' ',
399
- event.targetTagName || 'Unknown'
400
- ]
401
- }),
402
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
403
- children: [
404
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
405
- strong: true,
406
- children: "Action:"
407
- }),
408
- " ",
409
- event.type
410
- ]
411
- }),
412
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
413
- children: [
414
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
415
- strong: true,
416
- children: "Position:"
417
- }),
418
- " (",
419
- event.elementRect?.left,
420
- ",",
421
- ' ',
422
- event.elementRect?.top,
423
- ")"
424
- ]
425
- }),
426
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
427
- children: [
428
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
429
- strong: true,
430
- children: "Size:"
431
- }),
432
- ' ',
433
- event.elementRect?.width,
434
- " \xd7",
435
- ' ',
436
- event.elementRect?.height,
437
- "px"
438
- ]
439
- }),
440
- event.pageInfo.width && event.pageInfo.height && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
441
- children: [
442
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
443
- strong: true,
444
- children: "Page Size:"
445
- }),
446
- ' ',
447
- event.pageInfo.width,
448
- " \xd7",
449
- ' ',
450
- event.pageInfo.height,
451
- "px"
452
- ]
453
- }),
454
- event.value && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
455
- children: [
456
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
457
- strong: true,
458
- children: "Content:"
459
- }),
460
- ' "',
461
- event.value,
462
- '"'
463
- ]
464
- })
465
- ]
466
- })
467
- ]
468
- })
469
- }),
470
- title: "Element Details",
471
- trigger: "hover",
472
- placement: "right",
473
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
285
+ children: getEventDescription(event)
286
+ }),
287
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
288
+ children: (boxedImage || afterImage) && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
289
+ style: {
290
+ display: 'flex',
291
+ alignItems: 'center'
292
+ },
293
+ children: [
294
+ boxedImage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
474
295
  style: {
475
- width: '80px',
476
- height: '50px',
477
- borderRadius: '6px',
296
+ width: '24px',
297
+ height: '24px',
298
+ borderRadius: '4px',
478
299
  overflow: 'hidden',
479
- border: `2px solid ${getEventColor(event.type)}`,
300
+ boxShadow: '1px 1px 1px 1px #00000014',
480
301
  cursor: 'pointer',
481
302
  transition: 'all 0.2s ease-in-out',
482
- background: '#f8f9fa'
303
+ zIndex: 2
483
304
  },
484
305
  onMouseEnter: (e)=>{
485
306
  const target = e.currentTarget;
486
- target.style.transform = 'scale(1.05)';
487
- target.style.boxShadow = `0 4px 12px ${getEventColor(event.type)}60`;
307
+ target.style.transform = 'scale(1.2)';
308
+ target.style.boxShadow = `0 2px 8px ${getEventColor(event.type)}60`;
488
309
  },
489
310
  onMouseLeave: (e)=>{
490
311
  const target = e.currentTarget;
491
312
  target.style.transform = 'scale(1)';
492
- target.style.boxShadow = 'none';
313
+ target.style.boxShadow = '1px 1px 1px 1px #00000014';
493
314
  },
494
- children: [
495
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Image, {
496
- src: boxedImage,
497
- width: "100%",
498
- height: "100%",
499
- style: {
500
- objectFit: 'cover',
501
- display: 'block'
502
- },
503
- preview: false
504
- }),
505
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
506
- style: {
507
- position: 'absolute',
508
- top: '2px',
509
- right: '2px',
510
- background: getEventColor(event.type),
511
- color: 'white',
512
- fontSize: '8px',
513
- padding: '1px 3px',
514
- borderRadius: '2px',
515
- lineHeight: 1
516
- },
517
- children: event.type.toUpperCase()
518
- })
519
- ]
520
- })
521
- })
522
- ]
523
- }),
524
- afterImage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
525
- style: {
526
- flexShrink: 0
527
- },
528
- children: [
529
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
530
- style: {
531
- marginBottom: '4px',
532
- fontSize: '11px',
533
- color: '#8c8c8c',
534
- textAlign: 'center'
535
- },
536
- children: "After"
537
- }),
538
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Popover, {
539
- content: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
540
- style: {
541
- maxWidth: '400px'
315
+ onClick: (e)=>{
316
+ e.stopPropagation();
542
317
  },
543
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
544
- direction: "vertical",
545
- size: "small",
318
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Image, {
319
+ src: boxedImage,
320
+ width: "100%",
321
+ height: "100%",
546
322
  style: {
547
- width: '100%'
323
+ objectFit: 'cover',
324
+ display: 'block'
548
325
  },
549
- children: [
550
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
551
- strong: true,
552
- children: "After Action Screenshot"
553
- }),
554
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Image, {
555
- src: afterImage,
556
- style: {
557
- width: '100%',
558
- maxHeight: '300px',
559
- objectFit: 'contain'
560
- },
561
- preview: true
562
- }),
563
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
564
- style: {
565
- padding: '6px 10px',
566
- backgroundColor: '#f0fff0',
567
- borderRadius: '4px',
568
- fontSize: '12px'
569
- },
570
- children: [
571
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
572
- children: [
573
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
574
- strong: true,
575
- children: "Action:"
576
- }),
577
- " ",
578
- event.type
579
- ]
580
- }),
581
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
582
- children: [
583
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
584
- strong: true,
585
- children: "Timestamp:"
586
- }),
587
- ' ',
588
- formatTime(event.timestamp)
589
- ]
590
- }),
591
- event.value && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
592
- children: [
593
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
594
- strong: true,
595
- children: "Value:"
596
- }),
597
- ' "',
598
- event.value,
599
- '"'
600
- ]
601
- })
602
- ]
603
- })
604
- ]
326
+ preview: {
327
+ mask: false
328
+ }
605
329
  })
606
330
  }),
607
- title: "After Action",
608
- trigger: "hover",
609
- placement: "right",
610
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
331
+ afterImage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
611
332
  style: {
612
- width: '80px',
613
- height: '50px',
614
- borderRadius: '6px',
333
+ width: '24px',
334
+ height: '24px',
335
+ borderRadius: '4px',
615
336
  overflow: 'hidden',
616
- border: '2px solid #52c41a',
337
+ boxShadow: '1px 1px 1px 1px #00000014',
617
338
  cursor: 'pointer',
618
339
  transition: 'all 0.2s ease-in-out',
619
- background: '#f6ffed'
340
+ marginLeft: boxedImage ? '-8px' : '0',
341
+ zIndex: 1
620
342
  },
621
343
  onMouseEnter: (e)=>{
622
344
  const target = e.currentTarget;
623
- target.style.transform = 'scale(1.05)';
624
- target.style.boxShadow = '0 4px 12px #52c41a60';
345
+ target.style.transform = 'scale(1.2)';
346
+ target.style.boxShadow = '0 2px 8px #52c41a60';
625
347
  },
626
348
  onMouseLeave: (e)=>{
627
349
  const target = e.currentTarget;
628
350
  target.style.transform = 'scale(1)';
629
- target.style.boxShadow = 'none';
351
+ target.style.boxShadow = '1px 1px 1px 1px #00000014';
352
+ },
353
+ onClick: (e)=>{
354
+ e.stopPropagation();
630
355
  },
631
- children: [
632
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Image, {
633
- src: afterImage,
634
- width: "100%",
635
- height: "100%",
636
- style: {
637
- objectFit: 'cover',
638
- display: 'block'
639
- },
640
- preview: false
641
- }),
642
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
643
- style: {
644
- position: 'absolute',
645
- top: '2px',
646
- right: '2px',
647
- background: '#52c41a',
648
- color: 'white',
649
- fontSize: '8px',
650
- padding: '1px 3px',
651
- borderRadius: '2px',
652
- lineHeight: 1
653
- },
654
- children: "AFTER"
655
- })
656
- ]
356
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Image, {
357
+ src: afterImage,
358
+ width: "100%",
359
+ height: "100%",
360
+ style: {
361
+ objectFit: 'cover',
362
+ display: 'block'
363
+ },
364
+ preview: {
365
+ mask: false
366
+ }
367
+ })
657
368
  })
658
- })
659
- ]
369
+ ]
370
+ })
660
371
  })
661
372
  ]
662
373
  }),
663
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Text, {
664
- type: "secondary",
374
+ isExpanded && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
665
375
  style: {
666
- fontSize: '12px'
376
+ marginTop: 8,
377
+ marginBottom: 8
667
378
  },
668
- children: formatTime(event.timestamp)
379
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Card, {
380
+ size: "small",
381
+ style: {
382
+ backgroundColor: '#f5f5f5'
383
+ },
384
+ bodyStyle: {
385
+ padding: '0px'
386
+ },
387
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
388
+ style: {
389
+ position: 'relative'
390
+ },
391
+ children: [
392
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("pre", {
393
+ style: {
394
+ fontSize: '12px',
395
+ margin: 0,
396
+ whiteSpace: 'pre-wrap',
397
+ backgroundColor: '#ffffff',
398
+ padding: '12px',
399
+ borderRadius: '8px',
400
+ maxHeight: '250px',
401
+ overflow: 'auto'
402
+ },
403
+ children: JSON.stringify(truncateJsonStrings(event), null, 2)
404
+ }),
405
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
406
+ type: "text",
407
+ size: "small",
408
+ icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ant_design_icons_a8184985__.CopyOutlined, {}),
409
+ onClick: (e)=>{
410
+ e.stopPropagation();
411
+ copyToClipboard(JSON.stringify(event, null, 2));
412
+ },
413
+ style: {
414
+ position: 'absolute',
415
+ top: '8px',
416
+ right: '8px',
417
+ background: 'rgba(255, 255, 255, 0.9)',
418
+ border: '1px solid #d9d9d9'
419
+ },
420
+ title: "Copy JSON"
421
+ })
422
+ ]
423
+ })
424
+ })
669
425
  })
670
426
  ]
671
427
  })
@@ -674,62 +430,22 @@ const RecordTimeline = ({ events, onEventClick })=>{
674
430
  });
675
431
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
676
432
  style: {
677
- padding: '16px'
433
+ padding: '3px'
678
434
  },
679
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
435
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
680
436
  direction: "vertical",
681
437
  size: "large",
682
438
  style: {
683
439
  width: '100%'
684
440
  },
685
- children: [
686
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
687
- style: {
688
- display: 'flex',
689
- justifyContent: 'space-between',
690
- alignItems: 'center'
691
- },
692
- children: [
693
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Title, {
694
- level: 4,
695
- style: {
696
- margin: 0
697
- },
698
- children: "Recording Timeline"
699
- }),
700
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Space, {
701
- children: [
702
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
703
- type: "secondary",
704
- children: [
705
- events.length,
706
- " events recorded"
707
- ]
708
- }),
709
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Text, {
710
- type: "secondary",
711
- style: {
712
- fontSize: '12px'
713
- },
714
- children: [
715
- "(",
716
- events.filter((e)=>e.elementRect?.left !== void 0).length,
717
- ' ',
718
- "events with located elements)"
719
- ]
720
- })
721
- ]
722
- })
723
- ]
724
- }),
725
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Timeline, {
726
- mode: "left",
727
- items: timelineItems,
728
- style: {
729
- paddingTop: 16
730
- }
731
- })
732
- ]
441
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Timeline, {
442
+ mode: "left",
443
+ className: "timeline-scrollable",
444
+ items: timelineItems,
445
+ style: {
446
+ paddingTop: 16
447
+ }
448
+ })
733
449
  })
734
450
  });
735
451
  };