@midscene/playground-app 1.9.6 → 1.9.7

package/dist/es/DeviceInteractionLayer.mjs

@@ -114,20 +114,32 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
     const activePointer = useRef(null);
     const composingRef = useRef(false);
     const keyboardArmedRef = useRef(false);
+    const keyboardFocusRequestIdRef = useRef(0);
     const lastKeyboardPointRef = useRef(null);
     const pendingWheelRef = useRef(null);
     const wheelTimerRef = useRef(null);
     const focusKeyboardSink = useCallback(()=>{
         if (keyboardEnabled) {
-            var _keyboardSinkRef_current;
             keyboardArmedRef.current = true;
-            null == (_keyboardSinkRef_current = keyboardSinkRef.current) || _keyboardSinkRef_current.focus({
+            const sink = keyboardSinkRef.current;
+            if (sink && document.activeElement !== sink) sink.focus({
                 preventScroll: true
             });
         }
     }, [
         keyboardEnabled
     ]);
+    const refocusKeyboardSinkAfterTap = useCallback((focusRequestId, interaction)=>{
+        if (!keyboardEnabled) return;
+        Promise.resolve(interaction).catch(()=>void 0).then(()=>{
+            window.setTimeout(()=>{
+                if (keyboardArmedRef.current && keyboardFocusRequestIdRef.current === focusRequestId) focusKeyboardSink();
+            }, 0);
+        });
+    }, [
+        focusKeyboardSink,
+        keyboardEnabled
+    ]);
     const positionKeyboardSink = useCallback((clientX, clientY)=>{
         const overlay = overlayRef.current;
         const sink = keyboardSinkRef.current;
@@ -161,6 +173,8 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
             return;
         }
         positionKeyboardSink(event.clientX, event.clientY);
+        const keyboardFocusRequestId = keyboardFocusRequestIdRef.current + 1;
+        keyboardFocusRequestIdRef.current = keyboardFocusRequestId;
         focusKeyboardSink();
         try {
             overlayRef.current.setPointerCapture(event.pointerId);
@@ -169,7 +183,8 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
             startX: event.clientX,
             startY: event.clientY,
             startTime: performance.now(),
-            contentRect
+            contentRect,
+            keyboardFocusRequestId
         };
         event.preventDefault();
     }, [
@@ -196,12 +211,13 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
         const endPoint = projectToDevice(event.clientX, event.clientY, active.contentRect);
         if (!startPoint || !endPoint) return;
         lastKeyboardPointRef.current = endPoint;
-        if (distance <= tapMaxDistance && duration <= tapMaxDurationMs) null == onTap || onTap(startPoint);
+        if (distance <= tapMaxDistance && duration <= tapMaxDurationMs) refocusKeyboardSinkAfterTap(active.keyboardFocusRequestId, null == onTap ? void 0 : onTap(startPoint));
         else null == onSwipe || onSwipe(startPoint, endPoint, Math.round(duration));
     }, [
         onTap,
         onSwipe,
         projectToDevice,
+        refocusKeyboardSinkAfterTap,
         tapMaxDistance,
         tapMaxDurationMs
     ]);
@@ -423,8 +439,11 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
                 top: 0,
                 width: 32,
                 height: 24,
-                opacity: 0.01,
+                opacity: 0,
                 pointerEvents: 'none',
+                appearance: 'none',
+                boxShadow: 'none',
+                overflow: 'hidden',
                 resize: 'none',
                 border: 0,
                 padding: 0,

package/dist/es/PlaygroundThemeProvider.mjs

@@ -1,10 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { globalThemeConfig } from "@midscene/visualizer";
-import { ConfigProvider } from "antd";
+import { App, ConfigProvider } from "antd";
 function PlaygroundThemeProvider({ children }) {
     return /*#__PURE__*/ jsx(ConfigProvider, {
         theme: globalThemeConfig(),
-        children: children
+        children: /*#__PURE__*/ jsx(App, {
+            component: false,
+            children: children
+        })
     });
 }
 export { PlaygroundThemeProvider };

package/dist/es/PreviewRenderer.mjs

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { PREVIEW_TEXT_INPUT_BATCH_DELAY_MS } from "@midscene/shared/constants";
 import { ScreenshotViewer } from "@midscene/visualizer";
 import { WebCodecsVideoDecoder } from "@yume-chan/scrcpy-decoder-webcodecs";
-import { Alert, Popover, message } from "antd";
+import { Alert, App, Popover } from "antd";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { DeviceInteractionLayer } from "./DeviceInteractionLayer.mjs";
 import { ScrcpyPanel } from "./ScrcpyPanel.mjs";
@@ -34,6 +34,29 @@ function _async_to_generator(fn) {
         });
     };
 }
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function isNonLocalhostHttp() {
     try {
         const { protocol, hostname } = window.location;
@@ -44,6 +67,7 @@ function isNonLocalhostHttp() {
     }
 }
 function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatusChange, renderErrorOverlay, scrcpyViewportStyle, screenshotViewerMode, playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating }) {
+    const { message } = App.useApp();
     const previewConnection = resolvePreviewConnectionInfo(runtimeInfo, serverUrl);
     const [deviceSize, setDeviceSize] = useState(null);
     const [streamSize, setStreamSize] = useState(null);
@@ -51,6 +75,7 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     const [scrcpyStatus, setScrcpyStatus] = useState('connecting');
     const manualControlQueueRef = useRef(Promise.resolve());
     const pendingTextInputRef = useRef('');
+    const pendingTextInputPointRef = useRef(null);
     const textInputTimerRef = useRef(null);
     const textInputFlushPromiseRef = useRef(null);
     const previewContentRef = useRef(null);
@@ -65,7 +90,9 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
         const nextTask = manualControlQueueRef.current.then(task, task);
         manualControlQueueRef.current = nextTask.catch(()=>void 0);
         return nextTask;
-    }, []);
+    }, [
+        message
+    ]);
     useEffect(()=>{
         if (!serverOnline) {
             setDeviceSize(null);
@@ -136,19 +163,24 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     const flushPendingTextInput = useCallback(()=>{
         clearTextInputTimer();
         const text = pendingTextInputRef.current;
+        const point = pendingTextInputPointRef.current;
         if (!text) {
             var _textInputFlushPromiseRef_current;
             return null != (_textInputFlushPromiseRef_current = textInputFlushPromiseRef.current) ? _textInputFlushPromiseRef_current : Promise.resolve();
         }
         pendingTextInputRef.current = '';
+        pendingTextInputPointRef.current = null;
         var _textInputFlushPromiseRef_current1;
         const previousFlush = null != (_textInputFlushPromiseRef_current1 = textInputFlushPromiseRef.current) ? _textInputFlushPromiseRef_current1 : Promise.resolve();
         const flushPromise = previousFlush.catch(()=>void 0).then(()=>_async_to_generator(function*() {
-                const res = yield enqueueManualControl(()=>playgroundSDK.interact({
+                const res = yield enqueueManualControl(()=>playgroundSDK.interact(_object_spread({
                         actionType: 'Input',
                         value: text,
                         mode: 'typeOnly'
-                    }));
+                    }, point ? {
+                        x: point.x,
+                        y: point.y
+                    } : {})));
                 if (!res.ok) showManualControlError('Input failed', res.error);
             })());
         const trackedFlushPromise = flushPromise.finally(()=>{
@@ -187,9 +219,10 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
         playgroundSDK,
         showManualControlError
     ]);
-    const handleTextInput = useCallback((text)=>{
+    const handleTextInput = useCallback((text, point)=>{
         if (!text) return;
         pendingTextInputRef.current += text;
+        if (point) pendingTextInputPointRef.current = point;
         clearTextInputTimer();
         textInputTimerRef.current = setTimeout(()=>{
             flushPendingTextInput();
@@ -202,6 +235,7 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
         if (serverOnline && previewInteractionEnabled && manualKeyboardEnabled) return;
         clearTextInputTimer();
         pendingTextInputRef.current = '';
+        pendingTextInputPointRef.current = null;
     }, [
         clearTextInputTimer,
         manualKeyboardEnabled,
@@ -211,6 +245,7 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     useEffect(()=>()=>{
             if (serverOnline && previewInteractionEnabled && manualKeyboardEnabled && pendingTextInputRef.current) return void flushPendingTextInput();
             clearTextInputTimer();
+            pendingTextInputPointRef.current = null;
         }, [
         clearTextInputTimer,
         flushPendingTextInput,

package/dist/es/controller/usePlaygroundController.mjs

@@ -1,6 +1,6 @@
 import { PlaygroundSDK } from "@midscene/playground";
 import { notifyError, useEnvConfig } from "@midscene/visualizer";
-import { Form, message } from "antd";
+import { App, Form } from "antd";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { resolveAutoCreateSessionInput } from "../session-setup.mjs";
 import { buildSessionInitialValues, resolveSessionViewState } from "../session-state.mjs";
@@ -81,6 +81,7 @@ function getPlatformSelectorFieldKey(setup) {
     return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
 }
 function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues, onCountdownFinish }) {
+    const { message } = App.useApp();
     const [form] = Form.useForm();
     const initialFormValuesRef = useRef(initialFormValues);
     useLayoutEffect(()=>{
@@ -266,6 +267,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         })(), [
         applyAiConfig,
         form,
+        message,
         playgroundSDK,
         refreshServerState
     ]);
@@ -288,6 +290,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
             }
         })(), [
         form,
+        message,
         playgroundSDK,
         refreshServerState,
         refreshSessionSetup,

package/dist/lib/DeviceInteractionLayer.js

@@ -155,20 +155,32 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
     const activePointer = (0, external_react_namespaceObject.useRef)(null);
     const composingRef = (0, external_react_namespaceObject.useRef)(false);
     const keyboardArmedRef = (0, external_react_namespaceObject.useRef)(false);
+    const keyboardFocusRequestIdRef = (0, external_react_namespaceObject.useRef)(0);
     const lastKeyboardPointRef = (0, external_react_namespaceObject.useRef)(null);
     const pendingWheelRef = (0, external_react_namespaceObject.useRef)(null);
     const wheelTimerRef = (0, external_react_namespaceObject.useRef)(null);
     const focusKeyboardSink = (0, external_react_namespaceObject.useCallback)(()=>{
         if (keyboardEnabled) {
-            var _keyboardSinkRef_current;
             keyboardArmedRef.current = true;
-            null == (_keyboardSinkRef_current = keyboardSinkRef.current) || _keyboardSinkRef_current.focus({
+            const sink = keyboardSinkRef.current;
+            if (sink && document.activeElement !== sink) sink.focus({
                 preventScroll: true
             });
         }
     }, [
         keyboardEnabled
     ]);
+    const refocusKeyboardSinkAfterTap = (0, external_react_namespaceObject.useCallback)((focusRequestId, interaction)=>{
+        if (!keyboardEnabled) return;
+        Promise.resolve(interaction).catch(()=>void 0).then(()=>{
+            window.setTimeout(()=>{
+                if (keyboardArmedRef.current && keyboardFocusRequestIdRef.current === focusRequestId) focusKeyboardSink();
+            }, 0);
+        });
+    }, [
+        focusKeyboardSink,
+        keyboardEnabled
+    ]);
     const positionKeyboardSink = (0, external_react_namespaceObject.useCallback)((clientX, clientY)=>{
         const overlay = overlayRef.current;
         const sink = keyboardSinkRef.current;
@@ -202,6 +214,8 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
             return;
         }
         positionKeyboardSink(event.clientX, event.clientY);
+        const keyboardFocusRequestId = keyboardFocusRequestIdRef.current + 1;
+        keyboardFocusRequestIdRef.current = keyboardFocusRequestId;
         focusKeyboardSink();
         try {
             overlayRef.current.setPointerCapture(event.pointerId);
@@ -210,7 +224,8 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
             startX: event.clientX,
             startY: event.clientY,
             startTime: performance.now(),
-            contentRect
+            contentRect,
+            keyboardFocusRequestId
         };
         event.preventDefault();
     }, [
@@ -237,12 +252,13 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
         const endPoint = projectToDevice(event.clientX, event.clientY, active.contentRect);
         if (!startPoint || !endPoint) return;
         lastKeyboardPointRef.current = endPoint;
-        if (distance <= tapMaxDistance && duration <= tapMaxDurationMs) null == onTap || onTap(startPoint);
+        if (distance <= tapMaxDistance && duration <= tapMaxDurationMs) refocusKeyboardSinkAfterTap(active.keyboardFocusRequestId, null == onTap ? void 0 : onTap(startPoint));
         else null == onSwipe || onSwipe(startPoint, endPoint, Math.round(duration));
     }, [
         onTap,
         onSwipe,
         projectToDevice,
+        refocusKeyboardSinkAfterTap,
         tapMaxDistance,
         tapMaxDurationMs
     ]);
@@ -464,8 +480,11 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, scrollEna
                 top: 0,
                 width: 32,
                 height: 24,
-                opacity: 0.01,
+                opacity: 0,
                 pointerEvents: 'none',
+                appearance: 'none',
+                boxShadow: 'none',
+                overflow: 'hidden',
                 resize: 'none',
                 border: 0,
                 padding: 0,

package/dist/lib/PlaygroundThemeProvider.js

@@ -32,7 +32,10 @@ const external_antd_namespaceObject = require("antd");
 function PlaygroundThemeProvider({ children }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.ConfigProvider, {
         theme: (0, visualizer_namespaceObject.globalThemeConfig)(),
-        children: children
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.App, {
+            component: false,
+            children: children
+        })
     });
 }
 exports.PlaygroundThemeProvider = __webpack_exports__.PlaygroundThemeProvider;

package/dist/lib/PreviewRenderer.js

@@ -62,6 +62,29 @@ function _async_to_generator(fn) {
         });
     };
 }
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function isNonLocalhostHttp() {
     try {
         const { protocol, hostname } = window.location;
@@ -72,6 +95,7 @@ function isNonLocalhostHttp() {
     }
 }
 function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatusChange, renderErrorOverlay, scrcpyViewportStyle, screenshotViewerMode, playgroundSDK, runtimeInfo, serverUrl, serverOnline, isUserOperating }) {
+    const { message } = external_antd_namespaceObject.App.useApp();
     const previewConnection = (0, external_runtime_info_js_namespaceObject.resolvePreviewConnectionInfo)(runtimeInfo, serverUrl);
     const [deviceSize, setDeviceSize] = (0, external_react_namespaceObject.useState)(null);
     const [streamSize, setStreamSize] = (0, external_react_namespaceObject.useState)(null);
@@ -79,6 +103,7 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     const [scrcpyStatus, setScrcpyStatus] = (0, external_react_namespaceObject.useState)('connecting');
     const manualControlQueueRef = (0, external_react_namespaceObject.useRef)(Promise.resolve());
     const pendingTextInputRef = (0, external_react_namespaceObject.useRef)('');
+    const pendingTextInputPointRef = (0, external_react_namespaceObject.useRef)(null);
     const textInputTimerRef = (0, external_react_namespaceObject.useRef)(null);
     const textInputFlushPromiseRef = (0, external_react_namespaceObject.useRef)(null);
     const previewContentRef = (0, external_react_namespaceObject.useRef)(null);
@@ -93,7 +118,9 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
         const nextTask = manualControlQueueRef.current.then(task, task);
         manualControlQueueRef.current = nextTask.catch(()=>void 0);
         return nextTask;
-    }, []);
+    }, [
+        message
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!serverOnline) {
             setDeviceSize(null);
@@ -149,7 +176,7 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     const showInsecureContextHint = 'scrcpy' === previewConnection.type && !scrcpy_decoder_webcodecs_namespaceObject.WebCodecsVideoDecoder.isSupported && isNonLocalhostHttp();
     const previewInteractionEnabled = 'none' !== previewConnection.type && (!scrcpyAvailable || 'connected' === scrcpyStatus);
     const showManualControlError = (0, external_react_namespaceObject.useCallback)((fallback, error)=>{
-        external_antd_namespaceObject.message.open({
+        message.open({
             type: 'error',
             content: error || fallback,
             key: 'manual-control-error'
@@ -164,19 +191,24 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     const flushPendingTextInput = (0, external_react_namespaceObject.useCallback)(()=>{
         clearTextInputTimer();
         const text = pendingTextInputRef.current;
+        const point = pendingTextInputPointRef.current;
         if (!text) {
             var _textInputFlushPromiseRef_current;
             return null != (_textInputFlushPromiseRef_current = textInputFlushPromiseRef.current) ? _textInputFlushPromiseRef_current : Promise.resolve();
         }
         pendingTextInputRef.current = '';
+        pendingTextInputPointRef.current = null;
         var _textInputFlushPromiseRef_current1;
         const previousFlush = null != (_textInputFlushPromiseRef_current1 = textInputFlushPromiseRef.current) ? _textInputFlushPromiseRef_current1 : Promise.resolve();
         const flushPromise = previousFlush.catch(()=>void 0).then(()=>_async_to_generator(function*() {
-                const res = yield enqueueManualControl(()=>playgroundSDK.interact({
+                const res = yield enqueueManualControl(()=>playgroundSDK.interact(_object_spread({
                         actionType: 'Input',
                         value: text,
                         mode: 'typeOnly'
-                    }));
+                    }, point ? {
+                        x: point.x,
+                        y: point.y
+                    } : {})));
                 if (!res.ok) showManualControlError('Input failed', res.error);
             })());
         const trackedFlushPromise = flushPromise.finally(()=>{
@@ -215,9 +247,10 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
         playgroundSDK,
         showManualControlError
     ]);
-    const handleTextInput = (0, external_react_namespaceObject.useCallback)((text)=>{
+    const handleTextInput = (0, external_react_namespaceObject.useCallback)((text, point)=>{
         if (!text) return;
         pendingTextInputRef.current += text;
+        if (point) pendingTextInputPointRef.current = point;
         clearTextInputTimer();
         textInputTimerRef.current = setTimeout(()=>{
             flushPendingTextInput();
@@ -230,6 +263,7 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
         if (serverOnline && previewInteractionEnabled && manualKeyboardEnabled) return;
         clearTextInputTimer();
         pendingTextInputRef.current = '';
+        pendingTextInputPointRef.current = null;
     }, [
         clearTextInputTimer,
         manualKeyboardEnabled,
@@ -239,6 +273,7 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     (0, external_react_namespaceObject.useEffect)(()=>()=>{
             if (serverOnline && previewInteractionEnabled && manualKeyboardEnabled && pendingTextInputRef.current) return void flushPendingTextInput();
             clearTextInputTimer();
+            pendingTextInputPointRef.current = null;
         }, [
         clearTextInputTimer,
         flushPendingTextInput,

package/dist/lib/controller/usePlaygroundController.js

@@ -109,6 +109,7 @@ function getPlatformSelectorFieldKey(setup) {
     return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
 }
 function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3, initialFormValues, onCountdownFinish }) {
+    const { message } = external_antd_namespaceObject.App.useApp();
     const [form] = external_antd_namespaceObject.Form.useForm();
     const initialFormValuesRef = (0, external_react_namespaceObject.useRef)(initialFormValues);
     (0, external_react_namespaceObject.useLayoutEffect)(()=>{
@@ -277,7 +278,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                         const values = null != input ? input : yield form.validateFields();
                         yield playgroundSDK.createSession(values);
                         if ((0, external_auto_create_js_namespaceObject.shouldResetAutoCreateBlock)(options)) autoCreateBlockedSignatureRef.current = null;
-                        if (!(null == options ? void 0 : options.silent)) external_antd_namespaceObject.message.success('Agent created');
+                        if (!(null == options ? void 0 : options.silent)) message.success('Agent created');
                         yield refreshServerState();
                         return true;
                     } catch (error) {
@@ -294,6 +295,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
         })(), [
         applyAiConfig,
         form,
+        message,
         playgroundSDK,
         refreshServerState
     ]);
@@ -303,7 +305,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
                 sessionMutatingRef.current = true;
                 setSessionMutating(true);
                 yield playgroundSDK.destroySession();
-                external_antd_namespaceObject.message.success('Session disconnected');
+                message.success('Session disconnected');
                 yield refreshServerState();
                 yield refreshSessionSetup();
             } catch (error) {
@@ -316,6 +318,7 @@ function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollInt
             }
         })(), [
         form,
+        message,
         playgroundSDK,
         refreshServerState,
         refreshSessionSetup,

package/dist/types/DeviceInteractionLayer.d.ts

@@ -9,7 +9,7 @@ export interface DeviceInteractionLayerProps {
     onTap?: (point: {
         x: number;
         y: number;
-    }) => void;
+    }) => void | Promise<void>;
     onSwipe?: (start: {
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/playground-app",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "description": "Reusable React shell for Midscene playground applications",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
@@ -28,9 +28,9 @@
     "antd": "^5.21.6",
     "react-resizable-panels": "2.0.22",
     "socket.io-client": "4.8.1",
-    "@midscene/playground": "1.9.6",
-    "@midscene/visualizer": "1.9.6",
-    "@midscene/shared": "1.9.6"
+    "@midscene/shared": "1.9.7",
+    "@midscene/visualizer": "1.9.7",
+    "@midscene/playground": "1.9.7"
   },
   "devDependencies": {
     "@rsbuild/plugin-less": "^1.5.0",