@midscene/visualizer 0.28.2-beta-20250910043028.0 → 0.28.2-beta-20250910065550.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 (134) hide show
  1. package/dist/es/blank_polyfill.mjs +2 -0
  2. package/dist/es/component/{blackboard/index.mjs → blackboard.mjs} +3 -3
  3. package/dist/es/component/describer.css +25 -0
  4. package/dist/es/component/{env-config/index.mjs → env-config.mjs} +1 -1
  5. package/dist/es/component/{github-star/index.mjs → github-star.mjs} +1 -1
  6. package/dist/es/component/{logo/index.mjs → logo.mjs} +1 -1
  7. package/dist/es/component/{misc/index.mjs → misc.mjs} +2 -42
  8. package/dist/es/component/{player/index.mjs → player.mjs} +8 -8
  9. package/dist/es/component/{config-selector/index.mjs → playground/ConfigSelector.mjs} +3 -2
  10. package/dist/es/component/{context-preview/index.mjs → playground/ContextPreview.mjs} +4 -3
  11. package/dist/es/component/{history-selector/index.mjs → playground/HistorySelector.mjs} +1 -1
  12. package/dist/es/component/{playground-result/index.mjs → playground/PlaygroundResult.mjs} +4 -3
  13. package/dist/es/component/{prompt-input/index.mjs → playground/PromptInput.mjs} +9 -9
  14. package/dist/es/component/{service-mode-control/index.mjs → playground/ServiceModeControl.mjs} +5 -4
  15. package/dist/es/component/playground/index.css +161 -29
  16. package/dist/es/{utils/constants.mjs → component/playground/playground-constants.mjs} +43 -23
  17. package/dist/es/component/playground/playground-types.mjs +0 -0
  18. package/dist/es/{utils → component/playground}/playground-utils.mjs +1 -1
  19. package/dist/es/{utils → component}/replay-scripts.mjs +2 -1
  20. package/dist/es/component/{shiny-text/index.mjs → shiny-text.mjs} +1 -1
  21. package/dist/es/index.mjs +18 -22
  22. package/dist/es/init.mjs +10 -0
  23. package/dist/lib/blank_polyfill.js +36 -0
  24. package/dist/lib/component/{blackboard/index.js → blackboard.js} +5 -5
  25. package/dist/lib/component/describer.css +25 -0
  26. package/dist/lib/component/{env-config/index.js → env-config.js} +1 -1
  27. package/dist/lib/component/{github-star/index.js → github-star.js} +1 -1
  28. package/dist/lib/component/{logo/index.js → logo.js} +1 -1
  29. package/dist/lib/component/{misc/index.js → misc.js} +1 -60
  30. package/dist/lib/component/{player/index.js → player.js} +23 -23
  31. package/dist/lib/component/{config-selector/index.js → playground/ConfigSelector.js} +7 -6
  32. package/dist/lib/component/{context-preview/index.js → playground/ContextPreview.js} +9 -8
  33. package/dist/lib/component/{history-selector/index.js → playground/HistorySelector.js} +1 -1
  34. package/dist/lib/component/{playground-result/index.js → playground/PlaygroundResult.js} +9 -8
  35. package/dist/lib/component/{prompt-input/index.js → playground/PromptInput.js} +37 -37
  36. package/dist/lib/component/{service-mode-control/index.js → playground/ServiceModeControl.js} +9 -8
  37. package/dist/lib/component/playground/index.css +161 -29
  38. package/dist/lib/{utils/constants.js → component/playground/playground-constants.js} +64 -31
  39. package/dist/lib/component/playground/playground-types.js +18 -0
  40. package/dist/lib/{utils → component/playground}/playground-utils.js +1 -1
  41. package/dist/lib/{utils → component}/replay-scripts.js +4 -3
  42. package/dist/lib/component/{shiny-text/index.js → shiny-text.js} +1 -1
  43. package/dist/lib/index.js +34 -66
  44. package/dist/lib/init.js +44 -0
  45. package/dist/types/blank_polyfill.d.ts +2 -0
  46. package/dist/types/component/{blackboard/index.d.ts → blackboard.d.ts} +2 -2
  47. package/dist/types/component/{github-star/index.d.ts → github-star.d.ts} +1 -1
  48. package/dist/types/component/{logo/index.d.ts → logo.d.ts} +1 -1
  49. package/dist/types/component/misc.d.ts +2 -0
  50. package/dist/types/component/{player/index.d.ts → player.d.ts} +2 -2
  51. package/dist/types/component/{config-selector/index.d.ts → playground/ConfigSelector.d.ts} +1 -0
  52. package/dist/types/component/{context-preview/index.d.ts → playground/ContextPreview.d.ts} +1 -0
  53. package/dist/types/component/{history-selector/index.d.ts → playground/HistorySelector.d.ts} +1 -1
  54. package/dist/types/component/{playground-result/index.d.ts → playground/PlaygroundResult.d.ts} +4 -3
  55. package/dist/types/component/{prompt-input/index.d.ts → playground/PromptInput.d.ts} +2 -3
  56. package/dist/types/component/{service-mode-control/index.d.ts → playground/ServiceModeControl.d.ts} +1 -0
  57. package/dist/types/{utils/constants.d.ts → component/playground/playground-constants.d.ts} +5 -3
  58. package/dist/types/component/playground/playground-types.d.ts +19 -0
  59. package/dist/types/component/playground/types.d.ts +72 -0
  60. package/dist/types/{utils → component}/replay-scripts.d.ts +1 -0
  61. package/dist/types/component/{shiny-text/index.d.ts → shiny-text.d.ts} +1 -1
  62. package/dist/types/index.d.ts +10 -15
  63. package/dist/types/init.d.ts +1 -0
  64. package/package.json +5 -5
  65. package/dist/es/component/history-selector/index.css +0 -132
  66. package/dist/es/component/index.mjs +0 -1
  67. package/dist/es/component/playground/index.mjs +0 -8
  68. package/dist/es/component/playground-result/index.css +0 -29
  69. package/dist/es/component/prompt-input/index.css +0 -330
  70. package/dist/es/component/universal-playground/index.css +0 -341
  71. package/dist/es/component/universal-playground/index.mjs +0 -273
  72. package/dist/es/component/universal-playground/providers/context-provider.mjs +0 -52
  73. package/dist/es/component/universal-playground/providers/storage-provider.mjs +0 -107
  74. package/dist/es/hooks/usePlaygroundExecution.mjs +0 -168
  75. package/dist/es/hooks/usePlaygroundState.mjs +0 -176
  76. package/dist/es/icons/avatar.mjs +0 -28
  77. package/dist/lib/component/history-selector/index.css +0 -132
  78. package/dist/lib/component/index.js +0 -60
  79. package/dist/lib/component/playground/index.js +0 -113
  80. package/dist/lib/component/playground-result/index.css +0 -29
  81. package/dist/lib/component/prompt-input/index.css +0 -330
  82. package/dist/lib/component/universal-playground/index.css +0 -341
  83. package/dist/lib/component/universal-playground/index.js +0 -321
  84. package/dist/lib/component/universal-playground/providers/context-provider.js +0 -95
  85. package/dist/lib/component/universal-playground/providers/storage-provider.js +0 -147
  86. package/dist/lib/hooks/usePlaygroundExecution.js +0 -202
  87. package/dist/lib/hooks/usePlaygroundState.js +0 -210
  88. package/dist/lib/icons/avatar.js +0 -62
  89. package/dist/types/component/index.d.ts +0 -1
  90. package/dist/types/component/misc/index.d.ts +0 -6
  91. package/dist/types/component/playground/index.d.ts +0 -7
  92. package/dist/types/component/universal-playground/index.d.ts +0 -4
  93. package/dist/types/component/universal-playground/providers/context-provider.d.ts +0 -37
  94. package/dist/types/component/universal-playground/providers/storage-provider.d.ts +0 -33
  95. package/dist/types/hooks/usePlaygroundExecution.d.ts +0 -10
  96. package/dist/types/hooks/usePlaygroundState.d.ts +0 -26
  97. package/dist/types/types.d.ts +0 -164
  98. /package/dist/es/component/{blackboard/index.css → blackboard.css} +0 -0
  99. /package/dist/es/{utils → component}/color.mjs +0 -0
  100. /package/dist/es/component/{github-star/index.css → github-star.css} +0 -0
  101. /package/dist/es/component/{logo/index.css → logo.css} +0 -0
  102. /package/dist/es/{utils → component}/pixi-loader.mjs +0 -0
  103. /package/dist/es/component/{player/index.css → player.css} +0 -0
  104. /package/dist/es/component/{form-field/index.mjs → playground/FormField.mjs} +0 -0
  105. /package/dist/es/{types.mjs → component/playground/types.mjs} +0 -0
  106. /package/dist/es/{hooks → component/playground}/useServerValid.mjs +0 -0
  107. /package/dist/es/component/{playground/playground-demo-ui-context.json → playground-demo-ui-context.json} +0 -0
  108. /package/dist/es/component/{shiny-text/index.css → shiny-text.css} +0 -0
  109. /package/dist/es/{store → component/store}/history.mjs +0 -0
  110. /package/dist/es/{store → component/store}/store.mjs +0 -0
  111. /package/dist/es/{utils/index.mjs → utils.mjs} +0 -0
  112. /package/dist/lib/component/{blackboard/index.css → blackboard.css} +0 -0
  113. /package/dist/lib/{utils → component}/color.js +0 -0
  114. /package/dist/lib/component/{github-star/index.css → github-star.css} +0 -0
  115. /package/dist/lib/component/{logo/index.css → logo.css} +0 -0
  116. /package/dist/lib/{utils → component}/pixi-loader.js +0 -0
  117. /package/dist/lib/component/{player/index.css → player.css} +0 -0
  118. /package/dist/lib/component/{form-field/index.js → playground/FormField.js} +0 -0
  119. /package/dist/lib/{types.js → component/playground/types.js} +0 -0
  120. /package/dist/lib/{hooks → component/playground}/useServerValid.js +0 -0
  121. /package/dist/lib/component/{playground/playground-demo-ui-context.json → playground-demo-ui-context.json} +0 -0
  122. /package/dist/lib/component/{shiny-text/index.css → shiny-text.css} +0 -0
  123. /package/dist/lib/{store → component/store}/history.js +0 -0
  124. /package/dist/lib/{store → component/store}/store.js +0 -0
  125. /package/dist/lib/{utils/index.js → utils.js} +0 -0
  126. /package/dist/types/{utils → component}/color.d.ts +0 -0
  127. /package/dist/types/component/{env-config/index.d.ts → env-config.d.ts} +0 -0
  128. /package/dist/types/{utils → component}/pixi-loader.d.ts +0 -0
  129. /package/dist/types/component/{form-field/index.d.ts → playground/FormField.d.ts} +0 -0
  130. /package/dist/types/{utils → component/playground}/playground-utils.d.ts +0 -0
  131. /package/dist/types/{hooks → component/playground}/useServerValid.d.ts +0 -0
  132. /package/dist/types/{store → component/store}/history.d.ts +0 -0
  133. /package/dist/types/{store → component/store}/store.d.ts +0 -0
  134. /package/dist/types/{utils/index.d.ts → utils.d.ts} +0 -0
@@ -0,0 +1,2 @@
1
+ const AsyncLocalStorage = {};
2
+ export { AsyncLocalStorage };
@@ -4,11 +4,11 @@ import "pixi.js/unsafe-eval";
4
4
  import { Checkbox } from "antd";
5
5
  import { Application, Container, Graphics, Rectangle, Sprite, Text, Texture } from "pixi.js";
6
6
  import { useEffect, useMemo, useRef, useState } from "react";
7
- import { colorForName, highlightColorForType } from "../../utils/color.mjs";
8
- import "./index.css";
7
+ import { colorForName, highlightColorForType } from "./color.mjs";
8
+ import "./blackboard.css";
9
9
  import { treeToList } from "@midscene/shared/extractor";
10
10
  import { DropShadowFilter } from "pixi-filters";
11
- import { useBlackboardPreference } from "../../store/store.mjs";
11
+ import { useBlackboardPreference } from "./store/store.mjs";
12
12
  const itemFillAlpha = 0.4;
13
13
  const highlightAlpha = 0.4;
14
14
  const pointRadius = 10;
@@ -0,0 +1,25 @@
1
+ .image-describer {
2
+ position: relative;
3
+ }
4
+
5
+ .image-describer .describe-text {
6
+ box-sizing: border-box;
7
+ color: #fff;
8
+ background: #000;
9
+ width: 100%;
10
+ height: 30px;
11
+ padding: 10px;
12
+ font-size: 12px;
13
+ position: absolute;
14
+ bottom: 0;
15
+ left: 0;
16
+ }
17
+
18
+ .image-describer .describe-text.success {
19
+ background: #047704;
20
+ }
21
+
22
+ .image-describer .describe-text.error {
23
+ background: #870707;
24
+ }
25
+
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { SettingOutlined } from "@ant-design/icons";
3
3
  import { Input, Modal, Tooltip } from "antd";
4
4
  import { useEffect, useRef, useState } from "react";
5
- import { useEnvConfig } from "../../store/store.mjs";
5
+ import { useEnvConfig } from "./store/store.mjs";
6
6
  function EnvConfig(param) {
7
7
  let { showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' } = param;
8
8
  const { config, configString, loadConfig, syncFromStorage } = useEnvConfig();
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import "./index.css";
2
+ import "./github-star.css";
3
3
  const GithubStar = ()=>/*#__PURE__*/ jsx("a", {
4
4
  href: "https://github.com/web-infra-dev/midscene",
5
5
  target: "_blank",
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import "./index.css";
2
+ import "./logo.css";
3
3
  const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
4
4
  const Logo = (param)=>{
5
5
  let { hideLogo = false } = param;
@@ -1,7 +1,5 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ import { jsx } from "react/jsx-runtime";
2
2
  import { ArrowRightOutlined, CheckOutlined, ClockCircleOutlined, CloseOutlined, LogoutOutlined, MinusOutlined, WarningOutlined } from "@ant-design/icons";
3
- import { Alert } from "antd";
4
- import shiny_text from "../shiny-text/index.mjs";
5
3
  function timeCostStrElement(timeCost) {
6
4
  let str;
7
5
  str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
@@ -53,42 +51,4 @@ const iconForStatus = (status)=>{
53
51
  return /*#__PURE__*/ jsx(MinusOutlined, {});
54
52
  }
55
53
  };
56
- const errorMessageServerNotReady = /*#__PURE__*/ jsxs("span", {
57
- children: [
58
- "Don't worry, just one more step to launch the playground server.",
59
- /*#__PURE__*/ jsx("br", {}),
60
- "Please run one of the commands under the midscene project directory:",
61
- /*#__PURE__*/ jsx("br", {}),
62
- "a. ",
63
- /*#__PURE__*/ jsx("strong", {
64
- children: "npx midscene-playground"
65
- }),
66
- /*#__PURE__*/ jsx("br", {}),
67
- "b. ",
68
- /*#__PURE__*/ jsx("strong", {
69
- children: "npx --yes @midscene/web"
70
- })
71
- ]
72
- });
73
- const serverLaunchTip = function() {
74
- let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
75
- return /*#__PURE__*/ jsx("div", {
76
- className: "server-tip",
77
- children: /*#__PURE__*/ jsx(Alert, {
78
- message: "Playground Server Not Ready",
79
- description: notReadyMessage,
80
- type: "warning"
81
- })
82
- });
83
- };
84
- const emptyResultTip = /*#__PURE__*/ jsx("div", {
85
- className: "result-empty-tip",
86
- style: {
87
- textAlign: 'center'
88
- },
89
- children: /*#__PURE__*/ jsx(shiny_text, {
90
- disabled: true,
91
- text: "The result will be shown here"
92
- })
93
- });
94
- export { emptyResultTip, errorMessageServerNotReady, iconForStatus, serverLaunchTip, timeCostStrElement };
54
+ export { iconForStatus, timeCostStrElement };
@@ -3,17 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import "pixi.js/unsafe-eval";
4
4
  import { Application, Container, Sprite } from "pixi.js";
5
5
  import { useEffect, useMemo, useRef, useState } from "react";
6
- import "./index.css";
7
- import { mouseLoading, mousePointer } from "../../utils/index.mjs";
6
+ import "./player.css";
7
+ import { mouseLoading, mousePointer } from "../utils.mjs";
8
8
  import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined } from "@ant-design/icons";
9
9
  import { treeToList } from "@midscene/shared/extractor";
10
10
  import { Dropdown, Spin, Switch, Tooltip } from "antd";
11
- import global_perspective from "../../icons/global-perspective.mjs";
12
- import player_setting from "../../icons/player-setting.mjs";
13
- import show_marker from "../../icons/show-marker.mjs";
14
- import { useBlackboardPreference } from "../../store/store.mjs";
15
- import { getTextureFromCache, loadTexture } from "../../utils/pixi-loader.mjs";
16
- import { rectMarkForItem } from "../blackboard/index.mjs";
11
+ import global_perspective from "../icons/global-perspective.mjs";
12
+ import player_setting from "../icons/player-setting.mjs";
13
+ import show_marker from "../icons/show-marker.mjs";
14
+ import { rectMarkForItem } from "./blackboard.mjs";
15
+ import { getTextureFromCache, loadTexture } from "./pixi-loader.mjs";
16
+ import { useBlackboardPreference } from "./store/store.mjs";
17
17
  function _define_property(obj, key, value) {
18
18
  if (key in obj) Object.defineProperty(obj, key, {
19
19
  value: value,
@@ -1,8 +1,9 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Checkbox, Dropdown, Radio } from "antd";
3
3
  import setting from "../../icons/setting.mjs";
4
- import { useEnvConfig } from "../../store/store.mjs";
5
- import { deepThinkTip, domIncludedTip, screenshotIncludedTip, trackingTip } from "../../utils/constants.mjs";
4
+ import { useEnvConfig } from "../store/store.mjs";
5
+ import { deepThinkTip, domIncludedTip, screenshotIncludedTip, trackingTip } from "./playground-constants.mjs";
6
+ import "./index.css";
6
7
  const ConfigSelector = (param)=>{
7
8
  let { showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false } = param;
8
9
  const forceSameTabNavigation = useEnvConfig((state)=>state.forceSameTabNavigation);
@@ -1,8 +1,9 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Button } from "antd";
3
- import blackboard from "../blackboard/index.mjs";
4
- import { iconForStatus } from "../misc/index.mjs";
5
- import playground_demo_ui_context from "../playground/playground-demo-ui-context.json";
3
+ import blackboard from "../blackboard.mjs";
4
+ import { iconForStatus } from "../misc.mjs";
5
+ import playground_demo_ui_context from "../playground-demo-ui-context.json";
6
+ import "./index.css";
6
7
  const ContextPreview = (param)=>{
7
8
  let { uiContextPreview, setUiContextPreview, showContextPreview } = param;
8
9
  if (!showContextPreview) return null;
@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
4
4
  import icons_close from "../../icons/close.mjs";
5
5
  import icons_history from "../../icons/history.mjs";
6
6
  import magnifying_glass from "../../icons/magnifying-glass.mjs";
7
- import { useHistoryStore } from "../../store/history.mjs";
7
+ import { useHistoryStore } from "../store/history.mjs";
8
8
  import "./index.css";
9
9
  const { Text } = Typography;
10
10
  const HistorySelector = (param)=>{
@@ -1,9 +1,10 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { LoadingOutlined } from "@ant-design/icons";
3
3
  import { Spin } from "antd";
4
- import { emptyResultTip, serverLaunchTip } from "../misc/index.mjs";
5
- import { Player } from "../player/index.mjs";
6
- import shiny_text from "../shiny-text/index.mjs";
4
+ import { Player } from "../player.mjs";
5
+ import shiny_text from "../shiny-text.mjs";
6
+ import { emptyResultTip, serverLaunchTip } from "./playground-constants.mjs";
7
+ import "./index.css";
7
8
  const PlaygroundResultView = (param)=>{
8
9
  let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom } = param;
9
10
  let resultWrapperClassName = 'result-wrapper';
@@ -1,15 +1,15 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { BorderOutlined, DownOutlined, SendOutlined } from "@ant-design/icons";
3
- import "./index.css";
4
3
  import { Button, Dropdown, Form, Input, Radio, Space, Tooltip } from "antd";
5
4
  import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
6
- import { useHistoryStore } from "../../store/history.mjs";
7
- import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "../../types.mjs";
8
- import { apiMetadata, defaultMainButtons } from "../../utils/constants.mjs";
9
- import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as playground_utils_mjs_isRunButtonEnabled } from "../../utils/playground-utils.mjs";
10
- import { ConfigSelector } from "../config-selector/index.mjs";
11
- import { BooleanField, EnumField, LocateField, NumberField, TextField } from "../form-field/index.mjs";
12
- import { HistorySelector } from "../history-selector/index.mjs";
5
+ import { useHistoryStore } from "../store/history.mjs";
6
+ import { ConfigSelector } from "./ConfigSelector.mjs";
7
+ import { BooleanField, EnumField, LocateField, NumberField, TextField } from "./FormField.mjs";
8
+ import { HistorySelector } from "./HistorySelector.mjs";
9
+ import { apiMetadata, defaultMainButtons } from "./playground-constants.mjs";
10
+ import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as external_playground_utils_mjs_isRunButtonEnabled } from "./playground-utils.mjs";
11
+ import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "./types.mjs";
12
+ import "./index.css";
13
13
  const { TextArea } = Input;
14
14
  const PromptInput = (param)=>{
15
15
  let { runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false } = param;
@@ -221,7 +221,7 @@ const PromptInput = (param)=>{
221
221
  needsStructuredParams,
222
222
  actionSpace
223
223
  ]);
224
- const isRunButtonEnabled = useMemo(()=>playground_utils_mjs_isRunButtonEnabled(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
224
+ const isRunButtonEnabled = useMemo(()=>external_playground_utils_mjs_isRunButtonEnabled(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
225
225
  runButtonEnabled,
226
226
  needsStructuredParams,
227
227
  selectedType,
@@ -3,10 +3,11 @@ import { PlaygroundSDK } from "@midscene/playground";
3
3
  import { overrideAIConfig } from "@midscene/shared/env";
4
4
  import { Button, Tooltip } from "antd";
5
5
  import { useEffect } from "react";
6
- import { useServerValid } from "../../hooks/useServerValid.mjs";
7
- import { useEnvConfig } from "../../store/store.mjs";
8
- import { EnvConfig } from "../env-config/index.mjs";
9
- import { iconForStatus } from "../misc/index.mjs";
6
+ import { EnvConfig } from "../env-config.mjs";
7
+ import { iconForStatus } from "../misc.mjs";
8
+ import { useEnvConfig } from "../store/store.mjs";
9
+ import { useServerValid } from "./useServerValid.mjs";
10
+ import "./index.css";
10
11
  const TITLE_TEXT = {
11
12
  Server: 'Server Status',
12
13
  'In-Browser': 'In-Browser'
@@ -1,30 +1,7 @@
1
- .result-wrapper {
2
- justify-content: center;
3
- height: 100%;
4
- margin: 4px 0;
5
- display: flex;
6
- }
7
-
8
- .result-wrapper .loading-container {
9
- text-align: center;
10
- }
11
-
12
- .result-wrapper .loading-container .loading-progress-text {
13
- color: #888;
14
- margin-top: 8px;
15
- font-size: 12px;
16
- }
17
-
18
- .result-wrapper pre {
19
- white-space: pre-wrap;
20
- text-wrap: unset;
21
- word-wrap: break-word;
22
- overflow-wrap: break-word;
23
- background: #f2f4f7;
24
- border-radius: 8px;
1
+ body {
25
2
  margin: 0;
26
- padding: 14px;
27
- overflow: scroll;
3
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
4
+ font-size: 14px;
28
5
  }
29
6
 
30
7
  .prompt-input-wrapper {
@@ -357,9 +334,164 @@
357
334
  color: #2b83ff;
358
335
  }
359
336
 
360
- body {
361
- margin: 0;
362
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
337
+ .history-modal-container {
338
+ border-radius: 12px 12px 0 0;
339
+ flex-direction: column;
340
+ height: 70vh;
341
+ display: flex;
342
+ overflow: hidden;
343
+ }
344
+
345
+ .history-modal-container .history-modal-header {
346
+ justify-content: space-between;
347
+ align-items: center;
348
+ height: 48px;
349
+ padding: 0 25px;
350
+ line-height: 48px;
351
+ display: flex;
352
+ }
353
+
354
+ .history-modal-container .history-modal-header .close-button {
355
+ justify-content: center;
356
+ align-items: center;
357
+ margin-right: -4px;
358
+ padding: 4px;
359
+ display: flex;
360
+ }
361
+
362
+ .history-modal-container .history-modal-header .close-button .anticon {
363
+ color: #999;
364
+ font-size: 18px;
365
+ }
366
+
367
+ .history-modal-container .history-modal-header .close-button:hover .anticon {
368
+ color: #666;
369
+ }
370
+
371
+ .history-modal-container .history-search-section {
372
+ background: #fff;
373
+ padding: 16px 20px;
374
+ }
375
+
376
+ .history-modal-container .history-search-section .search-input-wrapper {
377
+ color: rgba(0, 0, 0, .25);
378
+ align-items: center;
379
+ gap: 12px;
380
+ display: flex;
381
+ }
382
+
383
+ .history-modal-container .history-search-section .search-input-wrapper .search-input {
384
+ background: #f1f2f3;
385
+ border: none;
386
+ border-radius: 16px;
387
+ flex: 1;
388
+ height: 36px;
389
+ }
390
+
391
+ .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
392
+ box-shadow: none;
393
+ background: none;
394
+ border: none;
395
+ }
396
+
397
+ .history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
398
+ background: #fff;
399
+ border-color: #d9d9d9;
400
+ }
401
+
402
+ .history-modal-container .history-search-section .search-input-wrapper .clear-button {
403
+ color: #1890ff;
404
+ height: auto;
405
+ padding: 0;
406
+ }
407
+
408
+ .history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
409
+ color: #40a9ff;
410
+ }
411
+
412
+ .history-modal-container .history-content {
413
+ flex: 1;
414
+ padding: 0 25px 25px;
415
+ overflow-y: auto;
416
+ }
417
+
418
+ .history-modal-container .history-content .history-group {
419
+ margin-bottom: 10px;
420
+ }
421
+
422
+ .history-modal-container .history-content .history-group .history-group-title {
423
+ color: rgba(0, 0, 0, .45);
424
+ height: 40px;
425
+ font-size: 12px;
426
+ font-weight: 400;
427
+ line-height: 40px;
428
+ }
429
+
430
+ .history-modal-container .history-content .history-group .history-item {
431
+ cursor: pointer;
432
+ color: rgba(0, 0, 0, .85);
433
+ white-space: nowrap;
434
+ text-overflow: ellipsis;
435
+ height: 40px;
363
436
  font-size: 14px;
437
+ line-height: 40px;
438
+ overflow: hidden;
439
+ }
440
+
441
+ .history-modal-container .history-content .history-group .history-item:hover {
442
+ background: #f2f4f7;
443
+ margin: 0 -8px;
444
+ padding: 0 8px;
445
+ }
446
+
447
+ .history-modal-container .history-content .no-results {
448
+ text-align: center;
449
+ color: #999;
450
+ padding: 40px 20px;
451
+ }
452
+
453
+ .ant-modal-wrap .ant-modal-content {
454
+ animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
455
+ }
456
+
457
+ @keyframes slideUpFromBottom {
458
+ 0% {
459
+ opacity: 0;
460
+ transform: translateY(100%);
461
+ }
462
+
463
+ 100% {
464
+ opacity: 1;
465
+ transform: translateY(0);
466
+ }
467
+ }
468
+
469
+ .result-wrapper {
470
+ justify-content: center;
471
+ height: 100%;
472
+ margin: 4px 0;
473
+ display: flex;
474
+ }
475
+
476
+ .result-wrapper .loading-container {
477
+ text-align: center;
478
+ }
479
+
480
+ .result-wrapper .loading-container .loading-progress-text {
481
+ color: #888;
482
+ margin-top: 8px;
483
+ font-size: 12px;
484
+ }
485
+
486
+ .result-wrapper pre {
487
+ white-space: pre-wrap;
488
+ text-wrap: unset;
489
+ word-wrap: break-word;
490
+ overflow-wrap: break-word;
491
+ background: #f2f4f7;
492
+ border-radius: 8px;
493
+ margin: 0;
494
+ padding: 14px;
495
+ overflow: scroll;
364
496
  }
365
497
 
@@ -1,3 +1,45 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { Alert } from "antd";
3
+ import shiny_text from "../shiny-text.mjs";
4
+ import "./index.css";
5
+ const errorMessageServerNotReady = /*#__PURE__*/ jsxs("span", {
6
+ children: [
7
+ "Don't worry, just one more step to launch the playground server.",
8
+ /*#__PURE__*/ jsx("br", {}),
9
+ "Please run one of the commands under the midscene project directory:",
10
+ /*#__PURE__*/ jsx("br", {}),
11
+ "a. ",
12
+ /*#__PURE__*/ jsx("strong", {
13
+ children: "npx midscene-playground"
14
+ }),
15
+ /*#__PURE__*/ jsx("br", {}),
16
+ "b. ",
17
+ /*#__PURE__*/ jsx("strong", {
18
+ children: "npx --yes @midscene/web"
19
+ })
20
+ ]
21
+ });
22
+ const serverLaunchTip = function() {
23
+ let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
24
+ return /*#__PURE__*/ jsx("div", {
25
+ className: "server-tip",
26
+ children: /*#__PURE__*/ jsx(Alert, {
27
+ message: "Playground Server Not Ready",
28
+ description: notReadyMessage,
29
+ type: "warning"
30
+ })
31
+ });
32
+ };
33
+ const emptyResultTip = /*#__PURE__*/ jsx("div", {
34
+ className: "result-empty-tip",
35
+ style: {
36
+ textAlign: 'center'
37
+ },
38
+ children: /*#__PURE__*/ jsx(shiny_text, {
39
+ disabled: true,
40
+ text: "The result will be shown here"
41
+ })
42
+ });
1
43
  const trackingTip = 'limit popup to current tab';
2
44
  const deepThinkTip = 'deep think';
3
45
  const screenshotIncludedTip = 'include screenshot in request';
@@ -74,26 +116,4 @@ const defaultMainButtons = [
74
116
  'aiQuery',
75
117
  'aiAssert'
76
118
  ];
77
- const WELCOME_MESSAGE_TEMPLATE = {
78
- type: 'system',
79
- content: `
80
- Welcome to Midscene.js Playground!
81
-
82
- This is a panel for experimenting and testing Midscene.js features. You can use natural language instructions to operate the web page, such as clicking buttons, filling in forms, querying information, etc.
83
-
84
- Please enter your instructions in the input box below to start experiencing.
85
- `,
86
- loading: false,
87
- result: void 0,
88
- replayScriptsInfo: null,
89
- replayCounter: 0,
90
- loadingProgressText: '',
91
- verticalMode: false
92
- };
93
- const BLANK_RESULT = {
94
- result: void 0,
95
- dump: null,
96
- reportHTML: null,
97
- error: null
98
- };
99
- export { BLANK_RESULT, WELCOME_MESSAGE_TEMPLATE, apiMetadata, deepThinkTip, defaultMainButtons, domIncludedTip, screenshotIncludedTip, trackingTip };
119
+ export { apiMetadata, deepThinkTip, defaultMainButtons, domIncludedTip, emptyResultTip, errorMessageServerNotReady, screenshotIncludedTip, serverLaunchTip, trackingTip };
@@ -1,5 +1,5 @@
1
1
  import { StaticPage, StaticPageAgent } from "@midscene/web/static";
2
- import { isZodObjectSchema, unwrapZodType } from "../types.mjs";
2
+ import { isZodObjectSchema, unwrapZodType } from "./types.mjs";
3
3
  const actionNameForType = (type)=>{
4
4
  const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
5
5
  const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
@@ -1,5 +1,6 @@
1
1
  'use client';
2
- import { mousePointer } from "./index.mjs";
2
+ import "./player.css";
3
+ import { mousePointer } from "../utils.mjs";
3
4
  import { paramStr, typeStr } from "@midscene/core/agent";
4
5
  import { treeToList } from "@midscene/shared/extractor";
5
6
  const stillDuration = 900;
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import "./index.css";
2
+ import "./shiny-text.css";
3
3
  const ShinyText = (param)=>{
4
4
  let { text, disabled = false, speed = 5, className = '' } = param;
5
5
  const style = {
package/dist/es/index.mjs CHANGED
@@ -1,23 +1,19 @@
1
1
  import "./component/playground/index.css";
2
- import "./component/universal-playground/index.css";
3
- import { allScriptsFromDump, generateAnimationScripts } from "./utils/replay-scripts.mjs";
4
- import { useEnvConfig } from "./store/store.mjs";
5
- import { colorForName, globalThemeConfig, highlightColorForType } from "./utils/color.mjs";
6
- import { EnvConfig } from "./component/env-config/index.mjs";
7
- import { Logo } from "./component/logo/index.mjs";
8
- import { iconForStatus, timeCostStrElement } from "./component/misc/index.mjs";
9
- import { useServerValid } from "./hooks/useServerValid.mjs";
10
- import { PlaygroundResultView } from "./component/playground-result/index.mjs";
11
- import { ServiceModeControl } from "./component/service-mode-control/index.mjs";
12
- import { ContextPreview } from "./component/context-preview/index.mjs";
13
- import { PromptInput } from "./component/prompt-input/index.mjs";
14
- import { Player } from "./component/player/index.mjs";
15
- import { Blackboard } from "./component/blackboard/index.mjs";
16
- import { GithubStar } from "./component/github-star/index.mjs";
17
- import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./utils/playground-utils.mjs";
18
- import { filterBase64Value, timeStr } from "./utils/index.mjs";
19
- import shiny_text from "./component/shiny-text/index.mjs";
20
- import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
21
- import { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./component/universal-playground/providers/storage-provider.mjs";
22
- import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
23
- export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, GithubStar, LocalStorageProvider, Logo, MemoryStorageProvider, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };
2
+ import { allScriptsFromDump, generateAnimationScripts } from "./component/replay-scripts.mjs";
3
+ import { useEnvConfig } from "./component/store/store.mjs";
4
+ import { colorForName, globalThemeConfig, highlightColorForType } from "./component/color.mjs";
5
+ import { EnvConfig } from "./component/env-config.mjs";
6
+ import { Logo } from "./component/logo.mjs";
7
+ import { iconForStatus, timeCostStrElement } from "./component/misc.mjs";
8
+ import { useServerValid } from "./component/playground/useServerValid.mjs";
9
+ import { PlaygroundResultView } from "./component/playground/PlaygroundResult.mjs";
10
+ import { ServiceModeControl } from "./component/playground/ServiceModeControl.mjs";
11
+ import { ContextPreview } from "./component/playground/ContextPreview.mjs";
12
+ import { PromptInput } from "./component/playground/PromptInput.mjs";
13
+ import { Player } from "./component/player.mjs";
14
+ import { Blackboard } from "./component/blackboard.mjs";
15
+ import { GithubStar } from "./component/github-star.mjs";
16
+ import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./component/playground/playground-utils.mjs";
17
+ import { filterBase64Value, timeStr } from "./utils.mjs";
18
+ import shiny_text from "./component/shiny-text.mjs";
19
+ export { Blackboard, ContextPreview, EnvConfig, GithubStar, Logo, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };
@@ -0,0 +1,10 @@
1
+ import { Buffer } from "buffer";
2
+ var _window;
3
+ (_window = window).global || (_window.global = window);
4
+ window.Buffer = Buffer;
5
+ let sideEffect = 0;
6
+ const setSideEffect = ()=>{
7
+ sideEffect++;
8
+ return sideEffect;
9
+ };
10
+ export { setSideEffect };
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ var __webpack_require__ = {};
3
+ (()=>{
4
+ __webpack_require__.d = (exports1, definition)=>{
5
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
+ enumerable: true,
7
+ get: definition[key]
8
+ });
9
+ };
10
+ })();
11
+ (()=>{
12
+ __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
+ })();
14
+ (()=>{
15
+ __webpack_require__.r = (exports1)=>{
16
+ if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
+ value: 'Module'
18
+ });
19
+ Object.defineProperty(exports1, '__esModule', {
20
+ value: true
21
+ });
22
+ };
23
+ })();
24
+ var __webpack_exports__ = {};
25
+ __webpack_require__.r(__webpack_exports__);
26
+ __webpack_require__.d(__webpack_exports__, {
27
+ AsyncLocalStorage: ()=>AsyncLocalStorage
28
+ });
29
+ const AsyncLocalStorage = {};
30
+ exports.AsyncLocalStorage = __webpack_exports__.AsyncLocalStorage;
31
+ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
32
+ "AsyncLocalStorage"
33
+ ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
34
+ Object.defineProperty(exports, '__esModule', {
35
+ value: true
36
+ });