@@ -187,7 +186,7 @@ const DetailPanel = (): JSX.Element => {
}}
/>
-
+
{content}
diff --git a/packages/visualizer/src/component/send-to-playground.tsx b/packages/visualizer/src/component/open-playground.tsx
similarity index 62%
rename from packages/visualizer/src/component/send-to-playground.tsx
rename to packages/visualizer/src/component/open-playground.tsx
index 95f1435e..489097b4 100644
--- a/packages/visualizer/src/component/send-to-playground.tsx
+++ b/packages/visualizer/src/component/open-playground.tsx
@@ -1,7 +1,8 @@
-import { SendOutlined } from '@ant-design/icons';
+import { PlayCircleOutlined, SendOutlined } from '@ant-design/icons';
import type { UIContext } from '@midscene/core/.';
-import { Button, Tooltip } from 'antd';
+import { Button, Drawer, Tooltip } from 'antd';
import { useEffect, useState } from 'react';
+import { Playground } from '../playground';
declare const __VERSION__: string;
@@ -10,8 +11,8 @@ export const serverBase = 'http://localhost:5800';
const errorMessageServerNotReady = `To debug the prompt together with this UI context, please follow the steps below:
1. Start the local playground server (Select one of the commands):
- a. npx --yes @midscene/web
- b. npx midscene-playground (Under the midscene project directory)
+ a. npx midscene-playground (Under the midscene project directory)
+ b. npx --yes @midscene/web
2. Click this button again.
`;
@@ -57,8 +58,10 @@ export const useServerValid = () => {
return serverValid;
};
-export default function SendToPlayground(props?: { context?: UIContext }) {
+export default function OpenPlayground(props?: { context?: UIContext }) {
const serverValid = useServerValid();
+ const [context, setContext] = useState
();
+ const [isDrawerVisible, setIsDrawerVisible] = useState(false);
let ifPlaygroundValid = true;
let invalidReason: React.ReactNode = '';
@@ -70,22 +73,13 @@ export default function SendToPlayground(props?: { context?: UIContext }) {
invalidReason = errorMessageNoContext;
}
- const launchPlayground = async () => {
- // post a form to server, use a new window to open the playground
+ const showPlayground = () => {
+ setContext(props?.context || undefined);
+ setIsDrawerVisible(true);
+ };
- const res = await fetch(`${serverBase}/playground-with-context`, {
- method: 'POST',
- body: JSON.stringify({
- context: JSON.stringify(props?.context),
- }),
- headers: {
- 'Content-Type': 'application/json',
- },
- credentials: 'omit',
- });
- const data = await res.json();
- const location = data.location;
- window.open(`${serverBase}${location}`, '_blank');
+ const handleClose = () => {
+ setIsDrawerVisible(false);
};
if (!ifPlaygroundValid) {
@@ -105,15 +99,33 @@ export default function SendToPlayground(props?: { context?: UIContext }) {
}
overlayInnerStyle={{ width: '380px' }}
>
- }>
- Send to Playground
+ }>
+ Open in Playground
);
}
return (
- }>
- Send to Playground
-
+ <>
+ }>
+ Open in Playground
+
+
+
+
+ >
);
}
diff --git a/packages/visualizer/src/playground.less b/packages/visualizer/src/playground.less
index f9d962de..a11be70c 100644
--- a/packages/visualizer/src/playground.less
+++ b/packages/visualizer/src/playground.less
@@ -29,6 +29,7 @@ body {
display: flex;
flex-direction: column;
justify-content: space-between;
+ overflow-y: auto !important;
.ant-form {
flex-grow: 1;
diff --git a/packages/visualizer/src/playground.tsx b/packages/visualizer/src/playground.tsx
index b64e6d55..0daf77c4 100644
--- a/packages/visualizer/src/playground.tsx
+++ b/packages/visualizer/src/playground.tsx
@@ -16,7 +16,7 @@ import { allScriptsFromDump } from './component/replay-scripts';
import './playground.less';
import Logo from './component/logo';
-import { serverBase, useServerValid } from './component/send-to-playground';
+import { serverBase, useServerValid } from './component/open-playground';
const requestPlaygroundServer = async (
context: UIContext,
@@ -53,11 +53,16 @@ const useContextId = () => {
const match = path.match(/^\/playground\/([a-zA-Z0-9-]+)$/);
return match ? match[1] : null;
};
-
const { TextArea } = Input;
-function Playground() {
+
+export function Playground({
+ propsContext,
+ hideLogo,
+}: { propsContext?: UIContext; hideLogo?: boolean }) {
const contextId = useContextId();
- const [uiContext, setUiContext] = useState(null);
+ const [uiContext, setUiContext] = useState(
+ propsContext || null,
+ );
const [loading, setLoading] = useState(false);
const [result, setResult] = useState<{
result: any;
@@ -73,7 +78,7 @@ function Playground() {
const serverValid = useServerValid();
useEffect(() => {
- if (contextId) {
+ if (!uiContext && contextId) {
fetch(`${serverBase}/context/${contextId}`)
.then((res) => res.json())
.then((data) => {
@@ -200,9 +205,11 @@ function Playground() {
minSize={20}
className="playground-left-panel"
>
-
-
-
+ {!hideLogo && (
+
+
+
+ )}