@midscene/visualizer 0.28.7-beta-20250915094412.0 → 0.28.7-beta-20250915133700.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 (10) hide show
  1. package/dist/es/component/playground/index.css +11 -4
  2. package/dist/es/component/prompt-input/index.css +11 -4
  3. package/dist/es/component/universal-playground/index.mjs +3 -12
  4. package/dist/es/hooks/usePlaygroundExecution.mjs +10 -2
  5. package/dist/lib/component/playground/index.css +11 -4
  6. package/dist/lib/component/prompt-input/index.css +11 -4
  7. package/dist/lib/component/universal-playground/index.js +3 -12
  8. package/dist/lib/hooks/usePlaygroundExecution.js +10 -2
  9. package/dist/types/types.d.ts +2 -8
  10. package/package.json +5 -5
package/dist/es/component/playground/index.css CHANGED
@@ -37,21 +37,21 @@
37
37
  }
38
38
 
39
39
  .prompt-input-wrapper .mode-radio-group-wrapper {
40
- justify-content: space-between;
41
40
  align-items: center;
42
41
  gap: 8px;
43
42
  display: flex;
43
+ position: relative;
44
44
  }
45
45
 
46
46
  .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
47
47
  scrollbar-width: none;
48
48
  -ms-overflow-style: none;
49
+ flex: 1;
49
50
  align-items: center;
50
51
  gap: 8px;
51
- width: 350px;
52
- min-width: 350px;
53
- max-width: 350px;
52
+ min-width: 0;
54
53
  height: 100%;
54
+ margin-right: 80px;
55
55
  display: flex;
56
56
  overflow-x: auto;
57
57
  overflow-y: hidden;
@@ -145,9 +145,16 @@
145
145
  }
146
146
 
147
147
  .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
148
+ z-index: 10;
149
+ background: #fff;
148
150
  flex-shrink: 0;
149
151
  align-items: center;
152
+ padding-left: 8px;
150
153
  display: flex;
154
+ position: absolute;
155
+ top: 50%;
156
+ right: 0;
157
+ transform: translateY(-50%);
151
158
  }
152
159
 
153
160
  .prompt-input-wrapper .main-side-console-input {
package/dist/es/component/prompt-input/index.css CHANGED
@@ -3,21 +3,21 @@
3
3
  }
4
4
 
5
5
  .prompt-input-wrapper .mode-radio-group-wrapper {
6
- justify-content: space-between;
7
6
  align-items: center;
8
7
  gap: 8px;
9
8
  display: flex;
9
+ position: relative;
10
10
  }
11
11
 
12
12
  .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
13
13
  scrollbar-width: none;
14
14
  -ms-overflow-style: none;
15
+ flex: 1;
15
16
  align-items: center;
16
17
  gap: 8px;
17
- width: 350px;
18
- min-width: 350px;
19
- max-width: 350px;
18
+ min-width: 0;
20
19
  height: 100%;
20
+ margin-right: 80px;
21
21
  display: flex;
22
22
  overflow-x: auto;
23
23
  overflow-y: hidden;
@@ -111,9 +111,16 @@
111
111
  }
112
112
 
113
113
  .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
114
+ z-index: 10;
115
+ background: #fff;
114
116
  flex-shrink: 0;
115
117
  align-items: center;
118
+ padding-left: 8px;
116
119
  display: flex;
120
+ position: absolute;
121
+ top: 50%;
122
+ right: 0;
123
+ transform: translateY(-50%);
117
124
  }
118
125
 
119
126
  .prompt-input-wrapper .main-side-console-input {
package/dist/es/component/universal-playground/index.mjs CHANGED
@@ -40,7 +40,7 @@ function ErrorMessage(param) {
40
40
  function UniversalPlayground(param) {
41
41
  let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
42
42
  const [form] = Form.useForm();
43
- const { deepThink, screenshotIncluded, domIncluded, config } = useEnvConfig();
43
+ const { config } = useEnvConfig();
44
44
  const effectiveStorage = (()=>{
45
45
  if (storage) return storage;
46
46
  const namespace = componentConfig.storageNamespace || getSDKId(playgroundSDK);
@@ -49,21 +49,12 @@ function UniversalPlayground(param) {
49
49
  const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = usePlaygroundState(playgroundSDK, effectiveStorage, contextProvider);
50
50
  const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
51
51
  useEffect(()=>{
52
- const completeConfig = {
53
- ...config,
54
- deepThink,
55
- screenshotIncluded,
56
- domIncluded
57
- };
58
- if (null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
52
+ if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
59
53
  console.error('Failed to override SDK config:', error);
60
54
  });
61
55
  }, [
62
56
  playgroundSDK,
63
- config,
64
- deepThink,
65
- screenshotIncluded,
66
- domIncluded
57
+ config
67
58
  ]);
68
59
  const handleFormRun = useCallback(async ()=>{
69
60
  try {
package/dist/es/hooks/usePlaygroundExecution.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { useCallback } from "react";
2
+ import { useEnvConfig } from "../store/store.mjs";
2
3
  import { BLANK_RESULT } from "../utils/constants.mjs";
3
4
  import { allScriptsFromDump } from "../utils/replay-scripts.mjs";
4
5
  const noReplayAPIs = [
@@ -6,6 +7,7 @@ const noReplayAPIs = [
6
7
  'aiAssert'
7
8
  ];
8
9
  function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
10
+ const { deepThink, screenshotIncluded, domIncluded } = useEnvConfig();
9
11
  const handleRun = useCallback(async (value)=>{
10
12
  if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
11
13
  const thisRunningId = Date.now();
@@ -59,7 +61,10 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
59
61
  });
60
62
  });
61
63
  result.result = await playgroundSDK.executeAction(actionType, value, {
62
- requestId: thisRunningId.toString()
64
+ requestId: thisRunningId.toString(),
65
+ deepThink,
66
+ screenshotIncluded,
67
+ domIncluded
63
68
  });
64
69
  if ('object' == typeof result.result && null !== result.result) {
65
70
  const resultObj = result.result;
@@ -130,7 +135,10 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
130
135
  setReplayCounter,
131
136
  verticalMode,
132
137
  currentRunningIdRef,
133
- interruptedFlagRef
138
+ interruptedFlagRef,
139
+ deepThink,
140
+ screenshotIncluded,
141
+ domIncluded
134
142
  ]);
135
143
  const handleStop = useCallback(async ()=>{
136
144
  const thisRunningId = currentRunningIdRef.current;
package/dist/lib/component/playground/index.css CHANGED
@@ -37,21 +37,21 @@
37
37
  }
38
38
 
39
39
  .prompt-input-wrapper .mode-radio-group-wrapper {
40
- justify-content: space-between;
41
40
  align-items: center;
42
41
  gap: 8px;
43
42
  display: flex;
43
+ position: relative;
44
44
  }
45
45
 
46
46
  .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
47
47
  scrollbar-width: none;
48
48
  -ms-overflow-style: none;
49
+ flex: 1;
49
50
  align-items: center;
50
51
  gap: 8px;
51
- width: 350px;
52
- min-width: 350px;
53
- max-width: 350px;
52
+ min-width: 0;
54
53
  height: 100%;
54
+ margin-right: 80px;
55
55
  display: flex;
56
56
  overflow-x: auto;
57
57
  overflow-y: hidden;
@@ -145,9 +145,16 @@
145
145
  }
146
146
 
147
147
  .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
148
+ z-index: 10;
149
+ background: #fff;
148
150
  flex-shrink: 0;
149
151
  align-items: center;
152
+ padding-left: 8px;
150
153
  display: flex;
154
+ position: absolute;
155
+ top: 50%;
156
+ right: 0;
157
+ transform: translateY(-50%);
151
158
  }
152
159
 
153
160
  .prompt-input-wrapper .main-side-console-input {
package/dist/lib/component/prompt-input/index.css CHANGED
@@ -3,21 +3,21 @@
3
3
  }
4
4
 
5
5
  .prompt-input-wrapper .mode-radio-group-wrapper {
6
- justify-content: space-between;
7
6
  align-items: center;
8
7
  gap: 8px;
9
8
  display: flex;
9
+ position: relative;
10
10
  }
11
11
 
12
12
  .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
13
13
  scrollbar-width: none;
14
14
  -ms-overflow-style: none;
15
+ flex: 1;
15
16
  align-items: center;
16
17
  gap: 8px;
17
- width: 350px;
18
- min-width: 350px;
19
- max-width: 350px;
18
+ min-width: 0;
20
19
  height: 100%;
20
+ margin-right: 80px;
21
21
  display: flex;
22
22
  overflow-x: auto;
23
23
  overflow-y: hidden;
@@ -111,9 +111,16 @@
111
111
  }
112
112
 
113
113
  .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
114
+ z-index: 10;
115
+ background: #fff;
114
116
  flex-shrink: 0;
115
117
  align-items: center;
118
+ padding-left: 8px;
116
119
  display: flex;
120
+ position: absolute;
121
+ top: 50%;
122
+ right: 0;
123
+ transform: translateY(-50%);
117
124
  }
118
125
 
119
126
  .prompt-input-wrapper .main-side-console-input {
package/dist/lib/component/universal-playground/index.js CHANGED
@@ -80,7 +80,7 @@ function ErrorMessage(param) {
80
80
  function UniversalPlayground(param) {
81
81
  let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
82
82
  const [form] = external_antd_namespaceObject.Form.useForm();
83
- const { deepThink, screenshotIncluded, domIncluded, config } = (0, store_js_namespaceObject.useEnvConfig)();
83
+ const { config } = (0, store_js_namespaceObject.useEnvConfig)();
84
84
  const effectiveStorage = (()=>{
85
85
  if (storage) return storage;
86
86
  const namespace = componentConfig.storageNamespace || getSDKId(playgroundSDK);
@@ -89,21 +89,12 @@ function UniversalPlayground(param) {
89
89
  const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = (0, usePlaygroundState_js_namespaceObject.usePlaygroundState)(playgroundSDK, effectiveStorage, contextProvider);
90
90
  const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
91
91
  (0, external_react_namespaceObject.useEffect)(()=>{
92
- const completeConfig = {
93
- ...config,
94
- deepThink,
95
- screenshotIncluded,
96
- domIncluded
97
- };
98
- if (null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
92
+ if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
99
93
  console.error('Failed to override SDK config:', error);
100
94
  });
101
95
  }, [
102
96
  playgroundSDK,
103
- config,
104
- deepThink,
105
- screenshotIncluded,
106
- domIncluded
97
+ config
107
98
  ]);
108
99
  const handleFormRun = (0, external_react_namespaceObject.useCallback)(async ()=>{
109
100
  try {
package/dist/lib/hooks/usePlaygroundExecution.js CHANGED
@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
27
27
  usePlaygroundExecution: ()=>usePlaygroundExecution
28
28
  });
29
29
  const external_react_namespaceObject = require("react");
30
+ const store_js_namespaceObject = require("../store/store.js");
30
31
  const constants_js_namespaceObject = require("../utils/constants.js");
31
32
  const replay_scripts_js_namespaceObject = require("../utils/replay-scripts.js");
32
33
  const noReplayAPIs = [
@@ -34,6 +35,7 @@ const noReplayAPIs = [
34
35
  'aiAssert'
35
36
  ];
36
37
  function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
38
+ const { deepThink, screenshotIncluded, domIncluded } = (0, store_js_namespaceObject.useEnvConfig)();
37
39
  const handleRun = (0, external_react_namespaceObject.useCallback)(async (value)=>{
38
40
  if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
39
41
  const thisRunningId = Date.now();
@@ -87,7 +89,10 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
87
89
  });
88
90
  });
89
91
  result.result = await playgroundSDK.executeAction(actionType, value, {
90
- requestId: thisRunningId.toString()
92
+ requestId: thisRunningId.toString(),
93
+ deepThink,
94
+ screenshotIncluded,
95
+ domIncluded
91
96
  });
92
97
  if ('object' == typeof result.result && null !== result.result) {
93
98
  const resultObj = result.result;
@@ -158,7 +163,10 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
158
163
  setReplayCounter,
159
164
  verticalMode,
160
165
  currentRunningIdRef,
161
- interruptedFlagRef
166
+ interruptedFlagRef,
167
+ deepThink,
168
+ screenshotIncluded,
169
+ domIncluded
162
170
  ]);
163
171
  const handleStop = (0, external_react_namespaceObject.useCallback)(async ()=>{
164
172
  const thisRunningId = currentRunningIdRef.current;
package/dist/types/types.d.ts CHANGED
@@ -72,7 +72,7 @@ export declare const unwrapZodType: (field: ZodType) => {
72
72
  };
73
73
  export declare const extractDefaultValue: (field: ZodType) => unknown;
74
74
  import type { GroupedActionDump, WebUIContext } from '@midscene/core';
75
- import type { PlaygroundAgent } from '@midscene/playground';
75
+ import type { ExecutionOptions, PlaygroundAgent } from '@midscene/playground';
76
76
  export interface PlaygroundResult {
77
77
  result: any;
78
78
  dump?: GroupedActionDump | null;
@@ -102,13 +102,7 @@ export interface FormValue {
102
102
  prompt?: string;
103
103
  params?: Record<string, unknown>;
104
104
  }
105
- export interface ExecutionOptions {
106
- requestId?: string;
107
- deepThink?: boolean;
108
- screenshotIncluded?: boolean;
109
- domIncluded?: boolean;
110
- context?: string | object;
111
- }
105
+ export type { ExecutionOptions };
112
106
  export type ProgressCallback = (step: string, status?: 'loading' | 'completed' | 'error') => void;
113
107
  export interface PlaygroundSDKLike {
114
108
  executeAction(actionType: string, value: FormValue, options: ExecutionOptions): Promise<unknown>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@midscene/visualizer",
3
- "version": "0.28.7-beta-20250915094412.0",
3
+ "version": "0.28.7-beta-20250915133700.0",
4
4
  "repository": "https://github.com/web-infra-dev/midscene",
5
5
  "homepage": "https://midscenejs.com/",
6
6
  "types": "./dist/types/index.d.ts",
@@ -70,10 +70,10 @@
70
70
  "antd": "^5.21.6",
71
71
  "buffer": "6.0.3",
72
72
  "dayjs": "^1.11.11",
73
- "@midscene/core": "0.28.7-beta-20250915094412.0",
74
- "@midscene/playground": "0.28.7-beta-20250915094412.0",
75
- "@midscene/shared": "0.28.7-beta-20250915094412.0",
76
- "@midscene/web": "0.28.7-beta-20250915094412.0"
73
+ "@midscene/shared": "0.28.7-beta-20250915133700.0",
74
+ "@midscene/playground": "0.28.7-beta-20250915133700.0",
75
+ "@midscene/core": "0.28.7-beta-20250915133700.0",
76
+ "@midscene/web": "0.28.7-beta-20250915133700.0"
77
77
  },
78
78
  "license": "MIT",
79
79
  "scripts": {