@midscene/visualizer 0.26.2 → 0.26.3-beta-20250813075706.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 (124) hide show
  1. package/dist/es/blank_polyfill.mjs +2 -0
  2. package/dist/es/component/blackboard.css +12 -5
  3. package/dist/es/component/blackboard.mjs +266 -0
  4. package/dist/es/component/color.mjs +35 -0
  5. package/dist/es/component/describer.css +9 -5
  6. package/dist/es/component/describer.mjs +128 -0
  7. package/dist/es/component/env-config.mjs +112 -0
  8. package/dist/es/component/github-star.css +1 -0
  9. package/dist/es/component/github-star.mjs +20 -0
  10. package/dist/es/component/logo.css +5 -3
  11. package/dist/es/component/logo.mjs +20 -0
  12. package/dist/es/component/misc.mjs +54 -0
  13. package/dist/es/component/pixi-loader.mjs +16 -0
  14. package/dist/es/component/player.css +88 -70
  15. package/dist/es/component/player.mjs +628 -0
  16. package/dist/es/component/playground/ConfigSelector.mjs +53 -0
  17. package/dist/es/component/playground/ContextPreview.mjs +39 -0
  18. package/dist/es/component/playground/HistorySelector.mjs +193 -0
  19. package/dist/es/component/playground/PlaygroundResult.mjs +60 -0
  20. package/dist/es/component/playground/PromptInput.mjs +225 -0
  21. package/dist/es/component/playground/ServiceModeControl.mjs +100 -0
  22. package/dist/es/component/playground/index.css +140 -98
  23. package/dist/es/component/playground/playground-constants.mjs +45 -0
  24. package/dist/es/component/playground/playground-utils.mjs +89 -0
  25. package/dist/es/component/playground/useServerValid.mjs +27 -0
  26. package/dist/es/component/playground/useStaticPageAgent.mjs +12 -0
  27. package/dist/es/component/replay-scripts.mjs +271 -0
  28. package/dist/es/component/shiny-text.css +33 -22
  29. package/dist/es/component/shiny-text.mjs +15 -0
  30. package/dist/es/component/store/history.mjs +55 -0
  31. package/dist/es/component/store/store.mjs +128 -0
  32. package/dist/es/icons/close.mjs +19 -0
  33. package/dist/es/icons/history.mjs +30 -0
  34. package/dist/es/icons/magnifying-glass.mjs +39 -0
  35. package/dist/es/icons/setting.mjs +20 -0
  36. package/dist/es/index.mjs +21 -0
  37. package/dist/es/init.mjs +10 -0
  38. package/dist/es/{utils.js → utils.mjs} +51 -75
  39. package/dist/lib/blank_polyfill.js +34 -38
  40. package/dist/lib/component/blackboard.css +12 -5
  41. package/dist/lib/component/blackboard.js +293 -306
  42. package/dist/lib/component/color.js +64 -74
  43. package/dist/lib/component/describer.css +9 -5
  44. package/dist/lib/component/describer.js +158 -198
  45. package/dist/lib/component/env-config.js +142 -147
  46. package/dist/lib/component/github-star.css +1 -0
  47. package/dist/lib/component/github-star.js +51 -62
  48. package/dist/lib/component/logo.css +5 -3
  49. package/dist/lib/component/logo.js +53 -56
  50. package/dist/lib/component/misc.js +85 -84
  51. package/dist/lib/component/pixi-loader.js +49 -80
  52. package/dist/lib/component/player.css +88 -70
  53. package/dist/lib/component/player.js +627 -738
  54. package/dist/lib/component/playground/ConfigSelector.js +91 -92
  55. package/dist/lib/component/playground/ContextPreview.js +80 -72
  56. package/dist/lib/component/playground/HistorySelector.js +234 -197
  57. package/dist/lib/component/playground/PlaygroundResult.js +100 -103
  58. package/dist/lib/component/playground/PromptInput.js +250 -237
  59. package/dist/lib/component/playground/ServiceModeControl.js +124 -124
  60. package/dist/lib/component/playground/index.css +140 -98
  61. package/dist/lib/component/playground/playground-constants.js +97 -73
  62. package/dist/lib/component/playground/playground-types.js +17 -31
  63. package/dist/lib/component/playground/playground-utils.js +140 -168
  64. package/dist/lib/component/playground/useServerValid.js +55 -86
  65. package/dist/lib/component/playground/useStaticPageAgent.js +45 -51
  66. package/dist/lib/component/replay-scripts.js +291 -373
  67. package/dist/lib/component/shiny-text.css +33 -22
  68. package/dist/lib/component/shiny-text.js +46 -57
  69. package/dist/lib/component/store/history.js +58 -64
  70. package/dist/lib/component/store/store.js +132 -128
  71. package/dist/lib/icons/close.js +53 -0
  72. package/dist/lib/icons/history.js +64 -0
  73. package/dist/lib/icons/magnifying-glass.js +73 -0
  74. package/dist/lib/icons/setting.js +54 -0
  75. package/dist/lib/index.js +158 -124
  76. package/dist/lib/init.js +39 -46
  77. package/dist/lib/utils.js +105 -109
  78. package/dist/types/blank_polyfill.d.ts +2 -2
  79. package/dist/types/component/playground/ConfigSelector.d.ts +1 -0
  80. package/dist/types/component/playground/ContextPreview.d.ts +1 -0
  81. package/dist/types/component/playground/HistorySelector.d.ts +1 -0
  82. package/dist/types/component/playground/PlaygroundResult.d.ts +1 -0
  83. package/dist/types/component/playground/PromptInput.d.ts +1 -0
  84. package/dist/types/component/playground/ServiceModeControl.d.ts +1 -0
  85. package/package.json +16 -19
  86. package/dist/es/assets/close.909351c0.svg +0 -4
  87. package/dist/es/assets/history.164a4eab.svg +0 -4
  88. package/dist/es/assets/magnifying-glass.9498e70e.svg +0 -12
  89. package/dist/es/assets/setting.80ab7285.svg +0 -11
  90. package/dist/es/blank_polyfill.js +0 -10
  91. package/dist/es/component/blackboard.js +0 -286
  92. package/dist/es/component/color.js +0 -49
  93. package/dist/es/component/describer.js +0 -173
  94. package/dist/es/component/env-config.js +0 -117
  95. package/dist/es/component/github-star.js +0 -31
  96. package/dist/es/component/logo.js +0 -25
  97. package/dist/es/component/misc.js +0 -63
  98. package/dist/es/component/pixi-loader.js +0 -51
  99. package/dist/es/component/player.js +0 -746
  100. package/dist/es/component/playground/ConfigSelector.js +0 -64
  101. package/dist/es/component/playground/ContextPreview.js +0 -42
  102. package/dist/es/component/playground/HistorySelector.js +0 -168
  103. package/dist/es/component/playground/PlaygroundResult.js +0 -73
  104. package/dist/es/component/playground/PromptInput.js +0 -212
  105. package/dist/es/component/playground/ServiceModeControl.js +0 -100
  106. package/dist/es/component/playground/playground-constants.js +0 -39
  107. package/dist/es/component/playground/playground-types.js +0 -6
  108. package/dist/es/component/playground/playground-utils.js +0 -141
  109. package/dist/es/component/playground/useServerValid.js +0 -58
  110. package/dist/es/component/playground/useStaticPageAgent.js +0 -20
  111. package/dist/es/component/replay-scripts.js +0 -361
  112. package/dist/es/component/shiny-text.js +0 -30
  113. package/dist/es/component/store/history.js +0 -34
  114. package/dist/es/component/store/store.js +0 -99
  115. package/dist/es/index.js +0 -79
  116. package/dist/es/init.js +0 -17
  117. package/dist/index.css +0 -595
  118. package/dist/index.js +0 -1
  119. package/dist/lib/assets/close.909351c0.svg +0 -4
  120. package/dist/lib/assets/history.164a4eab.svg +0 -4
  121. package/dist/lib/assets/magnifying-glass.9498e70e.svg +0 -12
  122. package/dist/lib/assets/setting.80ab7285.svg +0 -11
  123. package/dist/lib/component/common.css +0 -0
  124. /package/dist/es/component/{common.css → playground/playground-types.mjs} +0 -0
@@ -1,64 +0,0 @@
1
- import Buffer from "buffer";
2
- import processBrowser from "process/browser";
3
- import console from "console-browserify";
4
- var buffer = {
5
- Buffer
6
- };
7
- import { jsx } from "react/jsx-runtime";
8
- import { Checkbox, Dropdown } from "antd";
9
- import SettingOutlined from "../../assets/setting.80ab7285.svg";
10
- import { useEnvConfig } from "../store/store";
11
- import { deepThinkTip, trackingTip } from "./playground-constants";
12
- const ConfigSelector = ({
13
- showDeepThinkOption = false,
14
- enableTracking = false
15
- }) => {
16
- const forceSameTabNavigation = useEnvConfig(
17
- (state) => state.forceSameTabNavigation
18
- );
19
- const setForceSameTabNavigation = useEnvConfig(
20
- (state) => state.setForceSameTabNavigation
21
- );
22
- const deepThink = useEnvConfig((state) => state.deepThink);
23
- const setDeepThink = useEnvConfig((state) => state.setDeepThink);
24
- if (!enableTracking && !showDeepThinkOption) {
25
- return null;
26
- }
27
- const configItems = buildConfigItems();
28
- return /* @__PURE__ */ jsx("div", { className: "selector-trigger", children: /* @__PURE__ */ jsx(Dropdown, { menu: { items: configItems }, trigger: ["click"], children: /* @__PURE__ */ jsx(SettingOutlined, { width: 24, height: 24 }) }) });
29
- function buildConfigItems() {
30
- const items = [];
31
- if (enableTracking) {
32
- items.push({
33
- label: /* @__PURE__ */ jsx(
34
- Checkbox,
35
- {
36
- onChange: (e) => setForceSameTabNavigation(e.target.checked),
37
- checked: forceSameTabNavigation,
38
- children: trackingTip
39
- }
40
- ),
41
- key: "track-config"
42
- });
43
- }
44
- if (showDeepThinkOption) {
45
- items.push({
46
- label: /* @__PURE__ */ jsx(
47
- Checkbox,
48
- {
49
- onChange: (e) => {
50
- setDeepThink(e.target.checked);
51
- },
52
- checked: deepThink,
53
- children: deepThinkTip
54
- }
55
- ),
56
- key: "deep-think-config"
57
- });
58
- }
59
- return items;
60
- }
61
- };
62
- export {
63
- ConfigSelector
64
- };
@@ -1,42 +0,0 @@
1
- import Buffer from "buffer";
2
- import processBrowser from "process/browser";
3
- import console from "console-browserify";
4
- var buffer = {
5
- Buffer
6
- };
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- import { Button } from "antd";
9
- import Blackboard from "../blackboard";
10
- import { iconForStatus } from "../misc";
11
- import DemoData from "../playground-demo-ui-context.json";
12
- const ContextPreview = ({
13
- uiContextPreview,
14
- setUiContextPreview,
15
- showContextPreview
16
- }) => {
17
- if (!showContextPreview) {
18
- return null;
19
- }
20
- return /* @__PURE__ */ jsxs("div", { className: "form-part context-panel", children: [
21
- /* @__PURE__ */ jsx("h3", { children: "UI Context" }),
22
- uiContextPreview ? /* @__PURE__ */ jsx(Blackboard, { uiContext: uiContextPreview, hideController: true }) : /* @__PURE__ */ jsxs("div", { children: [
23
- iconForStatus("failed"),
24
- " No UI context",
25
- /* @__PURE__ */ jsx(
26
- Button,
27
- {
28
- type: "link",
29
- onClick: (e) => {
30
- e.preventDefault();
31
- setUiContextPreview(DemoData);
32
- },
33
- children: "Load Demo"
34
- }
35
- ),
36
- /* @__PURE__ */ jsx("div", { children: "To load the UI context, you can either use the demo data above, or click the 'Send to Playground' in the report page." })
37
- ] })
38
- ] });
39
- };
40
- export {
41
- ContextPreview
42
- };
@@ -1,168 +0,0 @@
1
- import Buffer from "buffer";
2
- import processBrowser from "process/browser";
3
- import console from "console-browserify";
4
- var buffer = {
5
- Buffer
6
- };
7
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
- import { Button, Input, Modal, Typography } from "antd";
9
- import { useMemo, useState } from "react";
10
- import CloseOutlined from "../../assets/close.909351c0.svg";
11
- import HistoryOutlined from "../../assets/history.164a4eab.svg";
12
- import MagnifyingGlass from "../../assets/magnifying-glass.9498e70e.svg";
13
- import { useHistoryStore } from "../store/history";
14
- const { Text } = Typography;
15
- const HistorySelector = ({
16
- onSelect
17
- }) => {
18
- const [isModalOpen, setIsModalOpen] = useState(false);
19
- const [searchText, setSearchText] = useState("");
20
- const history = useHistoryStore((state) => state.history);
21
- const clearHistory = useHistoryStore((state) => state.clearHistory);
22
- const groupedHistory = useMemo(() => {
23
- const now = Date.now();
24
- const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1e3;
25
- const oneYearAgo = now - 365 * 24 * 60 * 60 * 1e3;
26
- const filteredHistory = history.filter(
27
- (item) => item.prompt.toLowerCase().includes(searchText.toLowerCase())
28
- );
29
- const groups = {
30
- recent7Days: filteredHistory.filter(
31
- (item) => item.timestamp >= sevenDaysAgo
32
- ),
33
- recent1Year: filteredHistory.filter(
34
- (item) => item.timestamp < sevenDaysAgo && item.timestamp >= oneYearAgo
35
- ),
36
- older: filteredHistory.filter((item) => item.timestamp < oneYearAgo)
37
- };
38
- return groups;
39
- }, [history, searchText]);
40
- const handleHistoryClick = (item) => {
41
- onSelect(item);
42
- setIsModalOpen(false);
43
- };
44
- const handleClearHistory = () => {
45
- clearHistory();
46
- setSearchText("");
47
- setIsModalOpen(false);
48
- };
49
- const renderHistoryGroup = (title, items) => {
50
- if (items.length === 0)
51
- return null;
52
- return /* @__PURE__ */ jsxs("div", { className: "history-group", children: [
53
- /* @__PURE__ */ jsx("div", { className: "history-group-title", children: title }),
54
- items.map((item, index) => /* @__PURE__ */ jsx(
55
- "div",
56
- {
57
- className: "history-item",
58
- onClick: () => handleHistoryClick(item),
59
- children: item.prompt
60
- },
61
- `${item.timestamp}-${index}`
62
- ))
63
- ] }, title);
64
- };
65
- return /* @__PURE__ */ jsxs(Fragment, { children: [
66
- /* @__PURE__ */ jsx("div", { className: "selector-trigger", onClick: () => setIsModalOpen(true), children: /* @__PURE__ */ jsx(HistoryOutlined, { width: 24, height: 24 }) }),
67
- /* @__PURE__ */ jsx(
68
- Modal,
69
- {
70
- open: isModalOpen,
71
- onCancel: () => setIsModalOpen(false),
72
- footer: null,
73
- width: "100%",
74
- closable: false,
75
- centered: false,
76
- transitionName: "",
77
- maskTransitionName: "",
78
- style: {
79
- margin: 0,
80
- padding: 0,
81
- maxWidth: "none",
82
- top: "auto",
83
- bottom: 0
84
- },
85
- styles: {
86
- wrapper: {
87
- alignItems: "flex-end",
88
- justifyContent: "center",
89
- paddingBottom: 0,
90
- display: "flex"
91
- },
92
- body: {
93
- height: "70vh",
94
- padding: 0,
95
- margin: 0
96
- },
97
- content: {
98
- height: "70vh",
99
- borderRadius: "12px 12px 0 0",
100
- margin: 0,
101
- padding: 0,
102
- marginBottom: 0,
103
- position: "fixed",
104
- bottom: 0,
105
- left: 0,
106
- right: 0
107
- }
108
- },
109
- maskClosable: true,
110
- destroyOnClose: true,
111
- children: /* @__PURE__ */ jsxs("div", { className: "history-modal-container", children: [
112
- /* @__PURE__ */ jsxs("div", { className: "history-modal-header", children: [
113
- /* @__PURE__ */ jsxs(Text, { strong: true, style: { fontSize: "16px" }, children: [
114
- "History (",
115
- history.length,
116
- ")"
117
- ] }),
118
- /* @__PURE__ */ jsx(
119
- Button,
120
- {
121
- size: "small",
122
- type: "text",
123
- icon: /* @__PURE__ */ jsx(CloseOutlined, { width: 16, height: 16 }),
124
- onClick: () => setIsModalOpen(false),
125
- className: "close-button"
126
- }
127
- )
128
- ] }),
129
- /* @__PURE__ */ jsx("div", { className: "history-search-section", children: /* @__PURE__ */ jsxs("div", { className: "search-input-wrapper", children: [
130
- /* @__PURE__ */ jsx(
131
- Input,
132
- {
133
- placeholder: "Search",
134
- value: searchText,
135
- onChange: (e) => setSearchText(e.target.value),
136
- prefix: /* @__PURE__ */ jsx(MagnifyingGlass, { width: 18, height: 18 }),
137
- className: "search-input",
138
- allowClear: true
139
- }
140
- ),
141
- /* @__PURE__ */ jsx(
142
- Button,
143
- {
144
- type: "link",
145
- onClick: handleClearHistory,
146
- className: "clear-button",
147
- disabled: history.length === 0,
148
- children: "Clear"
149
- }
150
- )
151
- ] }) }),
152
- /* @__PURE__ */ jsx("div", { className: "history-content", children: history.length === 0 ? (
153
- /* no history record */
154
- /* @__PURE__ */ jsx("div", { className: "no-results", children: /* @__PURE__ */ jsx(Text, { type: "secondary", children: "No history record" }) })
155
- ) : /* @__PURE__ */ jsxs(Fragment, { children: [
156
- renderHistoryGroup("Last 7 days", groupedHistory.recent7Days),
157
- renderHistoryGroup("Last 1 year", groupedHistory.recent1Year),
158
- renderHistoryGroup("Earlier", groupedHistory.older),
159
- searchText && groupedHistory.recent7Days.length === 0 && groupedHistory.recent1Year.length === 0 && groupedHistory.older.length === 0 && /* @__PURE__ */ jsx("div", { className: "no-results", children: /* @__PURE__ */ jsx(Text, { type: "secondary", children: "No matching history record" }) })
160
- ] }) })
161
- ] })
162
- }
163
- )
164
- ] });
165
- };
166
- export {
167
- HistorySelector
168
- };
@@ -1,73 +0,0 @@
1
- import Buffer from "buffer";
2
- import processBrowser from "process/browser";
3
- import console from "console-browserify";
4
- var buffer = {
5
- Buffer
6
- };
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- import { LoadingOutlined } from "@ant-design/icons";
9
- import { Spin } from "antd";
10
- import { Player } from "../player";
11
- import ShinyText from "../shiny-text";
12
- import { emptyResultTip, serverLaunchTip } from "./playground-constants";
13
- const PlaygroundResultView = ({
14
- result,
15
- loading,
16
- serverValid,
17
- serviceMode,
18
- replayScriptsInfo,
19
- replayCounter,
20
- loadingProgressText,
21
- verticalMode = false,
22
- notReadyMessage,
23
- fitMode
24
- }) => {
25
- let resultWrapperClassName = "result-wrapper";
26
- if (verticalMode) {
27
- resultWrapperClassName += " vertical-mode-result";
28
- }
29
- if (replayScriptsInfo && verticalMode) {
30
- resultWrapperClassName += " result-wrapper-compact";
31
- }
32
- let resultDataToShow = emptyResultTip;
33
- if (!serverValid && serviceMode === "Server") {
34
- resultDataToShow = serverLaunchTip(notReadyMessage);
35
- } else if (loading) {
36
- resultDataToShow = /* @__PURE__ */ jsxs("div", { className: "loading-container", children: [
37
- /* @__PURE__ */ jsx(Spin, { spinning: loading, indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }) }),
38
- /* @__PURE__ */ jsx("div", { className: "loading-progress-text loading-progress-text-progress", children: /* @__PURE__ */ jsx(ShinyText, { text: loadingProgressText, speed: 3 }) })
39
- ] });
40
- } else if (replayScriptsInfo) {
41
- resultDataToShow = /* @__PURE__ */ jsx(
42
- Player,
43
- {
44
- replayScripts: replayScriptsInfo.scripts,
45
- imageWidth: replayScriptsInfo.width,
46
- imageHeight: replayScriptsInfo.height,
47
- reportFileContent: (serviceMode === "In-Browser-Extension" || serviceMode === "Server") && (result == null ? void 0 : result.reportHTML) ? result == null ? void 0 : result.reportHTML : null,
48
- fitMode
49
- },
50
- replayCounter
51
- );
52
- } else if (result == null ? void 0 : result.error) {
53
- resultDataToShow = /* @__PURE__ */ jsx("pre", { children: result == null ? void 0 : result.error });
54
- } else if ((result == null ? void 0 : result.result) !== void 0) {
55
- resultDataToShow = typeof (result == null ? void 0 : result.result) === "string" ? /* @__PURE__ */ jsx("pre", { children: result == null ? void 0 : result.result }) : /* @__PURE__ */ jsx("pre", { children: JSON.stringify(result == null ? void 0 : result.result, null, 2) });
56
- }
57
- return /* @__PURE__ */ jsx(
58
- "div",
59
- {
60
- className: resultWrapperClassName,
61
- style: {
62
- height: "100%",
63
- display: "flex",
64
- flexDirection: "column",
65
- flex: "1 1 auto"
66
- },
67
- children: resultDataToShow
68
- }
69
- );
70
- };
71
- export {
72
- PlaygroundResultView
73
- };
@@ -1,212 +0,0 @@
1
- import Buffer from "buffer";
2
- import processBrowser from "process/browser";
3
- import console from "console-browserify";
4
- var buffer = {
5
- Buffer
6
- };
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- import { BorderOutlined, SendOutlined } from "@ant-design/icons";
9
- import { Button, Form, Input, Radio, Space, Tooltip } from "antd";
10
- import { useCallback, useEffect, useRef, useState } from "react";
11
- import { useHistoryStore } from "../store/history";
12
- import { ConfigSelector } from "./ConfigSelector";
13
- import { HistorySelector } from "./HistorySelector";
14
- import { actionNameForType, getPlaceholderForType } from "./playground-utils";
15
- const { TextArea } = Input;
16
- const PromptInput = ({
17
- runButtonEnabled,
18
- form,
19
- serviceMode,
20
- selectedType,
21
- dryMode,
22
- stoppable,
23
- loading,
24
- onRun,
25
- onStop,
26
- clearPromptAfterRun = true
27
- }) => {
28
- const [hoveringSettings, setHoveringSettings] = useState(false);
29
- const [promptValue, setPromptValue] = useState("");
30
- const placeholder = getPlaceholderForType(selectedType);
31
- const textAreaRef = useRef(null);
32
- const history = useHistoryStore((state) => state.history);
33
- const addHistory = useHistoryStore((state) => state.addHistory);
34
- const lastHistory = history[0];
35
- useEffect(() => {
36
- if (lastHistory) {
37
- form.setFieldsValue({
38
- type: lastHistory.type || "aiAction",
39
- prompt: lastHistory.prompt || ""
40
- });
41
- setPromptValue(lastHistory.prompt || "");
42
- } else {
43
- form.setFieldsValue({
44
- type: "aiAction",
45
- prompt: ""
46
- });
47
- setPromptValue("");
48
- }
49
- }, []);
50
- const handleSelectHistory = useCallback(
51
- (historyItem) => {
52
- form.setFieldsValue({
53
- prompt: historyItem.prompt,
54
- type: historyItem.type
55
- });
56
- setPromptValue(historyItem.prompt);
57
- },
58
- [form]
59
- );
60
- const handlePromptChange = useCallback(
61
- (e) => {
62
- const value = e.target.value;
63
- setPromptValue(value);
64
- form.setFieldValue("prompt", value);
65
- },
66
- [form]
67
- );
68
- const isRunButtonEnabled = runButtonEnabled && promptValue.trim().length > 0;
69
- const handleRunWithHistory = useCallback(() => {
70
- const values = form.getFieldsValue();
71
- if (values.prompt) {
72
- addHistory({
73
- type: values.type,
74
- prompt: values.prompt,
75
- timestamp: Date.now()
76
- });
77
- }
78
- onRun();
79
- if (clearPromptAfterRun) {
80
- setPromptValue("");
81
- form.setFieldValue("prompt", "");
82
- }
83
- }, [form, addHistory, onRun]);
84
- const handleKeyDown = useCallback(
85
- (e) => {
86
- if (e.key === "Enter" && e.metaKey && isRunButtonEnabled) {
87
- handleRunWithHistory();
88
- e.preventDefault();
89
- e.stopPropagation();
90
- } else if (e.key === "Enter") {
91
- setTimeout(() => {
92
- if (textAreaRef.current) {
93
- const textarea = textAreaRef.current.resizableTextArea.textArea;
94
- const selectionStart = textarea.selectionStart;
95
- const value = textarea.value;
96
- const lastNewlineIndex = value.lastIndexOf("\n");
97
- const isAtLastLine = lastNewlineIndex === -1 || selectionStart > lastNewlineIndex;
98
- if (isAtLastLine) {
99
- textarea.scrollTop = textarea.scrollHeight;
100
- }
101
- }
102
- }, 0);
103
- }
104
- },
105
- [handleRunWithHistory, isRunButtonEnabled]
106
- );
107
- const handleMouseEnter = useCallback(() => {
108
- setHoveringSettings(true);
109
- }, []);
110
- const handleMouseLeave = useCallback(() => {
111
- setHoveringSettings(false);
112
- }, []);
113
- const renderActionButton = useCallback(() => {
114
- const runButton = (text) => /* @__PURE__ */ jsx(
115
- Button,
116
- {
117
- type: "primary",
118
- icon: /* @__PURE__ */ jsx(SendOutlined, {}),
119
- style: { borderRadius: 20, zIndex: 999 },
120
- onClick: handleRunWithHistory,
121
- disabled: !isRunButtonEnabled,
122
- loading,
123
- children: text
124
- }
125
- );
126
- if (dryMode) {
127
- return selectedType === "aiAction" ? /* @__PURE__ */ jsx(Tooltip, { title: "Start executing until some interaction actions need to be performed. You can see the process of planning and locating.", children: runButton("Dry Run") }) : runButton("Run");
128
- }
129
- if (stoppable) {
130
- return /* @__PURE__ */ jsx(
131
- Button,
132
- {
133
- icon: /* @__PURE__ */ jsx(BorderOutlined, {}),
134
- onClick: onStop,
135
- style: { borderRadius: 20, zIndex: 999 },
136
- children: "Stop"
137
- }
138
- );
139
- }
140
- return runButton("Run");
141
- }, [
142
- dryMode,
143
- loading,
144
- handleRunWithHistory,
145
- onStop,
146
- isRunButtonEnabled,
147
- selectedType,
148
- stoppable
149
- ]);
150
- return /* @__PURE__ */ jsxs("div", { className: "prompt-input-wrapper", children: [
151
- /* @__PURE__ */ jsxs(Space, { className: "mode-radio-group-wrapper", children: [
152
- /* @__PURE__ */ jsx(Form.Item, { name: "type", style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
153
- Radio.Group,
154
- {
155
- buttonStyle: "solid",
156
- disabled: !runButtonEnabled,
157
- className: "mode-radio-group",
158
- children: [
159
- /* @__PURE__ */ jsx(Tooltip, { title: "Auto Planning: plan the steps and execute", children: /* @__PURE__ */ jsx(Radio.Button, { value: "aiAction", children: actionNameForType("aiAction") }) }),
160
- /* @__PURE__ */ jsx(Tooltip, { title: "Extract data directly from the UI", children: /* @__PURE__ */ jsx(Radio.Button, { value: "aiQuery", children: actionNameForType("aiQuery") }) }),
161
- /* @__PURE__ */ jsx(Tooltip, { title: "Understand the UI and determine if the assertion is true", children: /* @__PURE__ */ jsx(Radio.Button, { value: "aiAssert", children: actionNameForType("aiAssert") }) }),
162
- /* @__PURE__ */ jsx(Tooltip, { title: "Instant Action: click something", children: /* @__PURE__ */ jsx(Radio.Button, { value: "aiTap", children: actionNameForType("aiTap") }) })
163
- ]
164
- }
165
- ) }),
166
- /* @__PURE__ */ jsxs("div", { className: "action-icons", children: [
167
- /* @__PURE__ */ jsx(HistorySelector, { onSelect: handleSelectHistory }),
168
- /* @__PURE__ */ jsx(
169
- "div",
170
- {
171
- className: hoveringSettings ? "settings-wrapper settings-wrapper-hover" : "settings-wrapper",
172
- onMouseEnter: handleMouseEnter,
173
- onMouseLeave: handleMouseLeave,
174
- children: /* @__PURE__ */ jsx(
175
- ConfigSelector,
176
- {
177
- enableTracking: serviceMode === "In-Browser-Extension",
178
- showDeepThinkOption: selectedType === "aiTap"
179
- }
180
- )
181
- }
182
- )
183
- ] })
184
- ] }),
185
- /* @__PURE__ */ jsxs(
186
- "div",
187
- {
188
- className: `main-side-console-input ${!runButtonEnabled ? "disabled" : ""} ${loading ? "loading" : ""}`,
189
- children: [
190
- /* @__PURE__ */ jsx(Form.Item, { name: "prompt", style: { margin: 0 }, children: /* @__PURE__ */ jsx(
191
- TextArea,
192
- {
193
- className: "main-side-console-input-textarea",
194
- disabled: !runButtonEnabled,
195
- rows: 4,
196
- placeholder,
197
- autoFocus: true,
198
- onKeyDown: handleKeyDown,
199
- onChange: handlePromptChange,
200
- value: promptValue,
201
- ref: textAreaRef
202
- }
203
- ) }),
204
- /* @__PURE__ */ jsx("div", { className: "form-controller-wrapper", children: renderActionButton() })
205
- ]
206
- }
207
- )
208
- ] });
209
- };
210
- export {
211
- PromptInput
212
- };
@@ -1,100 +0,0 @@
1
- import Buffer from "buffer";
2
- import processBrowser from "process/browser";
3
- import console from "console-browserify";
4
- var buffer = {
5
- Buffer
6
- };
7
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
- import { overrideAIConfig } from "@midscene/shared/env";
9
- import { Button, Tooltip } from "antd";
10
- import { useEffect } from "react";
11
- import { EnvConfig } from "../env-config";
12
- import { iconForStatus } from "../misc";
13
- import { useEnvConfig } from "../store/store";
14
- import { overrideServerConfig } from "./playground-utils";
15
- import { useServerValid } from "./useServerValid";
16
- const TITLE_TEXT = {
17
- Server: "Server Status",
18
- "In-Browser": "In-Browser"
19
- };
20
- const SWITCH_BUTTON_TEXT = {
21
- Server: "Switch to In-Browser Mode",
22
- "In-Browser": "Switch to Server Mode"
23
- };
24
- const ServiceModeControl = ({
25
- serviceMode
26
- }) => {
27
- const { setServiceMode, config } = useEnvConfig();
28
- const serverValid = useServerValid(serviceMode === "Server");
29
- const renderServerTip = () => {
30
- if (serverValid) {
31
- return /* @__PURE__ */ jsx(Tooltip, { title: "Connected", children: /* @__PURE__ */ jsx("div", { className: "server-tip", children: iconForStatus("connected") }) });
32
- }
33
- return /* @__PURE__ */ jsx(Tooltip, { title: "Connection failed", children: /* @__PURE__ */ jsx("div", { className: "server-tip", children: iconForStatus("failed") }) });
34
- };
35
- const renderSwitchButton = () => {
36
- const nextMode = serviceMode === "Server" ? "In-Browser" : "Server";
37
- const buttonText = SWITCH_BUTTON_TEXT[serviceMode];
38
- return /* @__PURE__ */ jsx(
39
- Tooltip,
40
- {
41
- title: /* @__PURE__ */ jsxs("span", { children: [
42
- "Server Mode: send the request through the server ",
43
- /* @__PURE__ */ jsx("br", {}),
44
- "In-Browser Mode: send the request through the browser fetch API (The AI service should support CORS in this case)"
45
- ] }),
46
- children: /* @__PURE__ */ jsx(
47
- Button,
48
- {
49
- type: "link",
50
- onClick: (e) => {
51
- e.preventDefault();
52
- setServiceMode(nextMode);
53
- },
54
- children: buttonText
55
- }
56
- )
57
- }
58
- );
59
- };
60
- useEffect(() => {
61
- overrideAIConfig(config);
62
- if (serviceMode === "Server") {
63
- overrideServerConfig(config);
64
- }
65
- }, [config, serviceMode]);
66
- const statusContent = serviceMode === "Server" && renderServerTip();
67
- const title = TITLE_TEXT[serviceMode];
68
- return /* @__PURE__ */ jsxs(Fragment, { children: [
69
- /* @__PURE__ */ jsxs(
70
- "div",
71
- {
72
- style: {
73
- display: "flex",
74
- alignItems: "center",
75
- justifyContent: "space-between",
76
- gap: "10px"
77
- },
78
- children: [
79
- /* @__PURE__ */ jsx(
80
- "h3",
81
- {
82
- style: {
83
- whiteSpace: "nowrap",
84
- margin: 0,
85
- flexShrink: 0
86
- },
87
- children: title
88
- }
89
- ),
90
- statusContent,
91
- /* @__PURE__ */ jsx(EnvConfig, { showTooltipWhenEmpty: serviceMode !== "Server" })
92
- ]
93
- }
94
- ),
95
- /* @__PURE__ */ jsx("div", { className: "switch-btn-wrapper", children: renderSwitchButton() })
96
- ] });
97
- };
98
- export {
99
- ServiceModeControl
100
- };