@midscene/visualizer 1.7.10-beta-20260508024212.0 → 1.7.10

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 (8) hide show
  1. package/dist/es/component/universal-playground/index.css +19 -16
  2. package/dist/es/component/universal-playground/index.mjs +10 -5
  3. package/dist/es/utils/progress-action-icon.mjs +19 -38
  4. package/dist/lib/component/universal-playground/index.css +19 -16
  5. package/dist/lib/component/universal-playground/index.js +10 -5
  6. package/dist/lib/utils/progress-action-icon.js +19 -38
  7. package/dist/types/utils/progress-action-icon.d.ts +4 -8
  8. package/package.json +5 -5
package/dist/es/component/universal-playground/index.css CHANGED
@@ -405,7 +405,6 @@
405
405
  }
406
406
 
407
407
  .playground-container.playground-conversation-skin .bottom-input-section {
408
- border-top: 1px solid var(--midscene-border-subtle);
409
408
  background: var(--midscene-surface);
410
409
  flex-shrink: 0;
411
410
  padding: 12px;
@@ -417,27 +416,27 @@
417
416
  }
418
417
 
419
418
  .playground-container.playground-conversation-skin .list-item > div:has( > .progress-action-item) {
420
- flex-direction: column;
421
- align-items: flex-start;
422
- gap: 8px;
423
- display: flex;
419
+ display: block;
424
420
  }
425
421
 
426
422
  .playground-container.playground-conversation-skin .progress-action-item {
427
423
  color: rgba(0, 0, 0, .7);
424
+ letter-spacing: 0;
428
425
  background: rgba(0, 0, 0, .08);
429
426
  border-radius: 38px;
430
427
  flex-direction: row-reverse;
431
428
  justify-content: flex-end;
432
429
  align-items: center;
433
- gap: 8px;
430
+ gap: 4px;
434
431
  width: -moz-fit-content;
435
432
  width: fit-content;
436
433
  max-width: 100%;
437
434
  height: 28px;
438
435
  margin: 0 0 0 24px;
439
436
  padding: 2px 12px 2px 4px;
437
+ font-family: Inter, sans-serif;
440
438
  font-size: 14px;
439
+ font-weight: 400;
441
440
  line-height: 22px;
442
441
  display: flex;
443
442
  }
@@ -445,16 +444,16 @@
445
444
  .playground-container.playground-conversation-skin .progress-action-item .progress-status-icon {
446
445
  justify-content: center;
447
446
  align-items: center;
448
- width: 24px;
449
- height: 24px;
447
+ width: 16px;
448
+ height: 28px;
450
449
  margin-left: 0;
451
- font-size: 14px;
450
+ font-size: 16px;
452
451
  display: inline-flex;
453
452
  }
454
453
 
455
454
  .playground-container.playground-conversation-skin .progress-action-item + div {
456
455
  width: 100%;
457
- margin: 0;
456
+ margin: 8px 0 0;
458
457
  padding-left: 20px;
459
458
  }
460
459
 
@@ -474,19 +473,23 @@
474
473
  margin-top: -8px;
475
474
  }
476
475
 
477
- .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
476
+ .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):after {
478
477
  content: "";
479
478
  pointer-events: none;
480
479
  background: rgba(0, 0, 0, .08);
481
480
  width: 1px;
482
481
  position: absolute;
483
- top: 23px;
482
+ top: 0;
484
483
  bottom: -16px;
485
- left: 12px;
484
+ left: 8px;
486
485
  }
487
486
 
488
- .playground-container.playground-conversation-skin .list-item:has(.progress-action-item) + .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
489
- top: 0;
487
+ .playground-container.playground-conversation-skin .list-item:not(.list-item:has(.progress-action-item) + .list-item):has(.progress-action-item):after {
488
+ top: 23px;
489
+ }
490
+
491
+ .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):not(:has( + .list-item .progress-action-item)):after {
492
+ bottom: 0;
490
493
  }
491
494
 
492
495
  .playground-container.playground-conversation-skin .progress-group-toggle {
@@ -499,7 +502,7 @@
499
502
  background: rgba(255, 255, 255, .08);
500
503
  }
501
504
 
502
- [data-theme="dark"] .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
505
+ [data-theme="dark"] .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):after {
503
506
  background: rgba(255, 255, 255, .12);
504
507
  }
505
508
 
package/dist/es/component/universal-playground/index.mjs CHANGED
@@ -171,7 +171,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
171
171
  const firstIds = new Set();
172
172
  const visible = [];
173
173
  let currentGroupFirstId = null;
174
- for (const item of infoList)if ('progress' === item.type) {
174
+ const hideWelcome = infoList.length > 1;
175
+ for (const item of infoList)if (!hideWelcome || 'welcome' !== item.id) if ('progress' === item.type) {
175
176
  if (null === currentGroupFirstId) {
176
177
  currentGroupFirstId = item.id;
177
178
  firstIds.add(item.id);
@@ -281,10 +282,13 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
281
282
  }) : /*#__PURE__*/ jsx(List, {
282
283
  itemLayout: "vertical",
283
284
  dataSource: visibleInfoList,
284
- renderItem: (item)=>/*#__PURE__*/ jsxs(List.Item, {
285
+ renderItem: (item)=>{
286
+ const isFirstInProgressGroup = collapsibleProgressGroup && firstInProgressGroup.has(item.id);
287
+ const isCollapsedHeader = isFirstInProgressGroup && collapsedProgressGroups.has(item.id);
288
+ return /*#__PURE__*/ jsxs(List.Item, {
285
289
  className: "list-item",
286
290
  children: [
287
- collapsibleProgressGroup && firstInProgressGroup.has(item.id) ? /*#__PURE__*/ jsxs("button", {
291
+ isFirstInProgressGroup ? /*#__PURE__*/ jsxs("button", {
288
292
  type: "button",
289
293
  className: `progress-group-toggle ${collapsedProgressGroups.has(item.id) ? 'is-collapsed' : 'is-expanded'}`,
290
294
  "aria-expanded": !collapsedProgressGroups.has(item.id),
@@ -299,7 +303,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
299
303
  })
300
304
  ]
301
305
  }) : null,
302
- 'user' === item.type ? /*#__PURE__*/ jsx("div", {
306
+ isCollapsedHeader ? null : 'user' === item.type ? /*#__PURE__*/ jsx("div", {
303
307
  className: "user-message-container",
304
308
  children: /*#__PURE__*/ jsx("div", {
305
309
  className: "user-message-bubble",
@@ -407,7 +411,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
407
411
  ]
408
412
  })
409
413
  ]
410
- }, item.id)
414
+ }, item.id);
415
+ }
411
416
  })
412
417
  }),
413
418
  showScrollToBottomButton && false !== componentConfig.enableScrollToBottom && /*#__PURE__*/ jsx(Button, {
package/dist/es/utils/progress-action-icon.mjs CHANGED
@@ -1,42 +1,23 @@
1
- import { AimOutlined, CheckCircleOutlined, EditOutlined, ExperimentOutlined, FileSearchOutlined, HourglassOutlined, PlayCircleOutlined, QuestionCircleOutlined, SearchOutlined, SelectOutlined, SwapOutlined, ThunderboltOutlined } from "@ant-design/icons";
2
1
  import { createElement } from "react";
3
- function defaultProgressActionIcon(kind) {
4
- switch(kind){
5
- case 'Planning':
6
- return /*#__PURE__*/ createElement(ExperimentOutlined);
7
- case 'Locate':
8
- case 'Insight':
9
- return /*#__PURE__*/ createElement(SearchOutlined);
10
- case 'Tap':
11
- case 'Click':
12
- case 'DoubleClick':
13
- case 'RightClick':
14
- return /*#__PURE__*/ createElement(AimOutlined);
15
- case 'Hover':
16
- return /*#__PURE__*/ createElement(SelectOutlined);
17
- case 'Input':
18
- case 'KeyboardPress':
19
- return /*#__PURE__*/ createElement(EditOutlined);
20
- case 'Scroll':
21
- case 'Swipe':
22
- case 'PullGesture':
23
- return /*#__PURE__*/ createElement(SwapOutlined);
24
- case 'WaitFor':
25
- return /*#__PURE__*/ createElement(HourglassOutlined);
26
- case 'Assert':
27
- case 'Boolean':
28
- return /*#__PURE__*/ createElement(CheckCircleOutlined);
29
- case 'Query':
30
- case 'Number':
31
- case 'String':
32
- return /*#__PURE__*/ createElement(FileSearchOutlined);
33
- case 'Ask':
34
- return /*#__PURE__*/ createElement(QuestionCircleOutlined);
35
- case 'Act':
36
- return /*#__PURE__*/ createElement(PlayCircleOutlined);
37
- default:
38
- return /*#__PURE__*/ createElement(ThunderboltOutlined);
39
- }
2
+ function CompletedActionIcon() {
3
+ return /*#__PURE__*/ createElement('svg', {
4
+ width: 16,
5
+ height: 16,
6
+ viewBox: '0 0 24 24',
7
+ fill: 'none',
8
+ xmlns: 'http://www.w3.org/2000/svg',
9
+ 'aria-hidden': true,
10
+ focusable: false
11
+ }, /*#__PURE__*/ createElement('path', {
12
+ d: 'M7.3335 12L10.6668 15.3334L17.3335 8.66669',
13
+ stroke: '#188F4D',
14
+ strokeWidth: '1.33333',
15
+ strokeLinecap: 'round',
16
+ strokeLinejoin: 'round'
17
+ }));
18
+ }
19
+ function defaultProgressActionIcon(_kind) {
20
+ return /*#__PURE__*/ createElement(CompletedActionIcon);
40
21
  }
41
22
  function resolveProgressActionIcon(kind, override) {
42
23
  if (!kind) return null;
package/dist/lib/component/universal-playground/index.css CHANGED
@@ -405,7 +405,6 @@
405
405
  }
406
406
 
407
407
  .playground-container.playground-conversation-skin .bottom-input-section {
408
- border-top: 1px solid var(--midscene-border-subtle);
409
408
  background: var(--midscene-surface);
410
409
  flex-shrink: 0;
411
410
  padding: 12px;
@@ -417,27 +416,27 @@
417
416
  }
418
417
 
419
418
  .playground-container.playground-conversation-skin .list-item > div:has( > .progress-action-item) {
420
- flex-direction: column;
421
- align-items: flex-start;
422
- gap: 8px;
423
- display: flex;
419
+ display: block;
424
420
  }
425
421
 
426
422
  .playground-container.playground-conversation-skin .progress-action-item {
427
423
  color: rgba(0, 0, 0, .7);
424
+ letter-spacing: 0;
428
425
  background: rgba(0, 0, 0, .08);
429
426
  border-radius: 38px;
430
427
  flex-direction: row-reverse;
431
428
  justify-content: flex-end;
432
429
  align-items: center;
433
- gap: 8px;
430
+ gap: 4px;
434
431
  width: -moz-fit-content;
435
432
  width: fit-content;
436
433
  max-width: 100%;
437
434
  height: 28px;
438
435
  margin: 0 0 0 24px;
439
436
  padding: 2px 12px 2px 4px;
437
+ font-family: Inter, sans-serif;
440
438
  font-size: 14px;
439
+ font-weight: 400;
441
440
  line-height: 22px;
442
441
  display: flex;
443
442
  }
@@ -445,16 +444,16 @@
445
444
  .playground-container.playground-conversation-skin .progress-action-item .progress-status-icon {
446
445
  justify-content: center;
447
446
  align-items: center;
448
- width: 24px;
449
- height: 24px;
447
+ width: 16px;
448
+ height: 28px;
450
449
  margin-left: 0;
451
- font-size: 14px;
450
+ font-size: 16px;
452
451
  display: inline-flex;
453
452
  }
454
453
 
455
454
  .playground-container.playground-conversation-skin .progress-action-item + div {
456
455
  width: 100%;
457
- margin: 0;
456
+ margin: 8px 0 0;
458
457
  padding-left: 20px;
459
458
  }
460
459
 
@@ -474,19 +473,23 @@
474
473
  margin-top: -8px;
475
474
  }
476
475
 
477
- .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
476
+ .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):after {
478
477
  content: "";
479
478
  pointer-events: none;
480
479
  background: rgba(0, 0, 0, .08);
481
480
  width: 1px;
482
481
  position: absolute;
483
- top: 23px;
482
+ top: 0;
484
483
  bottom: -16px;
485
- left: 12px;
484
+ left: 8px;
486
485
  }
487
486
 
488
- .playground-container.playground-conversation-skin .list-item:has(.progress-action-item) + .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
489
- top: 0;
487
+ .playground-container.playground-conversation-skin .list-item:not(.list-item:has(.progress-action-item) + .list-item):has(.progress-action-item):after {
488
+ top: 23px;
489
+ }
490
+
491
+ .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):not(:has( + .list-item .progress-action-item)):after {
492
+ bottom: 0;
490
493
  }
491
494
 
492
495
  .playground-container.playground-conversation-skin .progress-group-toggle {
@@ -499,7 +502,7 @@
499
502
  background: rgba(255, 255, 255, .08);
500
503
  }
501
504
 
502
- [data-theme="dark"] .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):has( + .list-item .progress-action-item):after {
505
+ [data-theme="dark"] .playground-container.playground-conversation-skin .list-item:has(.progress-action-item):after {
503
506
  background: rgba(255, 255, 255, .12);
504
507
  }
505
508
 
package/dist/lib/component/universal-playground/index.js CHANGED
@@ -212,7 +212,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
212
212
  const firstIds = new Set();
213
213
  const visible = [];
214
214
  let currentGroupFirstId = null;
215
- for (const item of infoList)if ('progress' === item.type) {
215
+ const hideWelcome = infoList.length > 1;
216
+ for (const item of infoList)if (!hideWelcome || 'welcome' !== item.id) if ('progress' === item.type) {
216
217
  if (null === currentGroupFirstId) {
217
218
  currentGroupFirstId = item.id;
218
219
  firstIds.add(item.id);
@@ -322,10 +323,13 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
322
323
  }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List, {
323
324
  itemLayout: "vertical",
324
325
  dataSource: visibleInfoList,
325
- renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.List.Item, {
326
+ renderItem: (item)=>{
327
+ const isFirstInProgressGroup = collapsibleProgressGroup && firstInProgressGroup.has(item.id);
328
+ const isCollapsedHeader = isFirstInProgressGroup && collapsedProgressGroups.has(item.id);
329
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.List.Item, {
326
330
  className: "list-item",
327
331
  children: [
328
- collapsibleProgressGroup && firstInProgressGroup.has(item.id) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
332
+ isFirstInProgressGroup ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
329
333
  type: "button",
330
334
  className: `progress-group-toggle ${collapsedProgressGroups.has(item.id) ? 'is-collapsed' : 'is-expanded'}`,
331
335
  "aria-expanded": !collapsedProgressGroups.has(item.id),
@@ -340,7 +344,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
340
344
  })
341
345
  ]
342
346
  }) : null,
343
- 'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
347
+ isCollapsedHeader ? null : 'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
344
348
  className: "user-message-container",
345
349
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
346
350
  className: "user-message-bubble",
@@ -448,7 +452,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
448
452
  ]
449
453
  })
450
454
  ]
451
- }, item.id)
455
+ }, item.id);
456
+ }
452
457
  })
453
458
  }),
454
459
  showScrollToBottomButton && false !== componentConfig.enableScrollToBottom && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
package/dist/lib/utils/progress-action-icon.js CHANGED
@@ -27,45 +27,26 @@ __webpack_require__.d(__webpack_exports__, {
27
27
  defaultProgressActionIcon: ()=>defaultProgressActionIcon,
28
28
  resolveProgressActionIcon: ()=>resolveProgressActionIcon
29
29
  });
30
- const icons_namespaceObject = require("@ant-design/icons");
31
30
  const external_react_namespaceObject = require("react");
32
- function defaultProgressActionIcon(kind) {
33
- switch(kind){
34
- case 'Planning':
35
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.ExperimentOutlined);
36
- case 'Locate':
37
- case 'Insight':
38
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.SearchOutlined);
39
- case 'Tap':
40
- case 'Click':
41
- case 'DoubleClick':
42
- case 'RightClick':
43
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.AimOutlined);
44
- case 'Hover':
45
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.SelectOutlined);
46
- case 'Input':
47
- case 'KeyboardPress':
48
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.EditOutlined);
49
- case 'Scroll':
50
- case 'Swipe':
51
- case 'PullGesture':
52
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.SwapOutlined);
53
- case 'WaitFor':
54
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.HourglassOutlined);
55
- case 'Assert':
56
- case 'Boolean':
57
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.CheckCircleOutlined);
58
- case 'Query':
59
- case 'Number':
60
- case 'String':
61
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.FileSearchOutlined);
62
- case 'Ask':
63
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.QuestionCircleOutlined);
64
- case 'Act':
65
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.PlayCircleOutlined);
66
- default:
67
- return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(icons_namespaceObject.ThunderboltOutlined);
68
- }
31
+ function CompletedActionIcon() {
32
+ return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)('svg', {
33
+ width: 16,
34
+ height: 16,
35
+ viewBox: '0 0 24 24',
36
+ fill: 'none',
37
+ xmlns: 'http://www.w3.org/2000/svg',
38
+ 'aria-hidden': true,
39
+ focusable: false
40
+ }, /*#__PURE__*/ (0, external_react_namespaceObject.createElement)('path', {
41
+ d: 'M7.3335 12L10.6668 15.3334L17.3335 8.66669',
42
+ stroke: '#188F4D',
43
+ strokeWidth: '1.33333',
44
+ strokeLinecap: 'round',
45
+ strokeLinejoin: 'round'
46
+ }));
47
+ }
48
+ function defaultProgressActionIcon(_kind) {
49
+ return /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(CompletedActionIcon);
69
50
  }
70
51
  function resolveProgressActionIcon(kind, override) {
71
52
  if (!kind) return null;
package/dist/types/utils/progress-action-icon.d.ts CHANGED
@@ -1,14 +1,10 @@
1
1
  import { type ReactNode } from 'react';
2
2
  /**
3
- * Default icon mapping for an `InfoListItem.actionKind` (which is
4
- * `ExecutionTask.subType || ExecutionTask.type` — see
5
- * `packages/core/src/agent/ui-utils.ts`). Returns `null` to mean
6
- * "no icon for this kind"; callers should render the status glyph only.
7
- *
8
- * Hosts can override this entirely via
9
- * `ExecutionFlowConfig.resolveActionIcon`.
3
+ * Default icon for a completed `InfoListItem.actionKind`. All action types
4
+ * resolve to the same green checkmark glyph; callers can opt out by passing
5
+ * an override via `ExecutionFlowConfig.resolveActionIcon`.
10
6
  */
11
- export declare function defaultProgressActionIcon(kind: string): ReactNode | null;
7
+ export declare function defaultProgressActionIcon(_kind: string): ReactNode | null;
12
8
  /**
13
9
  * Resolve the icon for a progress action, applying the host's override
14
10
  * (if any) before falling back to the default mapping.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@midscene/visualizer",
3
- "version": "1.7.10-beta-20260508024212.0",
3
+ "version": "1.7.10",
4
4
  "repository": "https://github.com/web-infra-dev/midscene",
5
5
  "homepage": "https://midscenejs.com/",
6
6
  "types": "./dist/types/index.d.ts",
@@ -65,10 +65,10 @@
65
65
  "antd": "^5.21.6",
66
66
  "buffer": "6.0.3",
67
67
  "dayjs": "^1.11.11",
68
- "@midscene/core": "1.7.10-beta-20260508024212.0",
69
- "@midscene/playground": "1.7.10-beta-20260508024212.0",
70
- "@midscene/shared": "1.7.10-beta-20260508024212.0",
71
- "@midscene/web": "1.7.10-beta-20260508024212.0"
68
+ "@midscene/core": "1.7.10",
69
+ "@midscene/playground": "1.7.10",
70
+ "@midscene/web": "1.7.10",
71
+ "@midscene/shared": "1.7.10"
72
72
  },
73
73
  "license": "MIT",
74
74
  "scripts": {