feat: add a send-to-playground btn

packages/visualizer/package.json

@@ -1,63 +1,52 @@
 {
-    "name": "@midscene/visualizer",
-    "version": "0.6.2",
-    "repository": "https://github.com/web-infra-dev/midscene",
-    "homepage": "https://midscenejs.com/",
-    "types": "./dist/types/index.d.ts",
-    "main": "./dist/lib/index.js",
-    "module": "./dist/es/index.js",
-    "files": [
-      "dist",
-      "html",
-      "README.md"
-    ],
-    "watch": {
-      "build": {
-        "patterns": [
-          "src"
-        ],
-        "extensions": "tsx,less,scss,css,js,jsx,ts",
-        "quiet": false
-      }
-    },
-    "scripts": {
-      "dev": "npm run build && npx npm-watch",
-      "build": "modern build && npx ts-node scripts/build-html.ts",
-      "build:watch": "modern build -w",
-        "serve": "http-server ./dist/ -p 3000",
-        "new": "modern new",
-        "upgrade": "modern upgrade"
-      },
-      "devDependencies": {
-        "@ant-design/icons": "5.3.7",
-        "@midscene/core": "workspace:*",
-        "@modern-js/module-tools": "2.58.2",
-        "@modern-js/plugin-module-doc": "^2.33.1",
-        "@modern-js/runtime": "^2.56.2",
-        "@types/node": "^18.0.0",
-        "@types/react": "18.3.3",
-        "@types/react-dom": "18.3.0",
-        "antd": "5.19.3",
-        "dayjs": "1.11.11",
-        "http-server": "14.1.1",
-        "npm-watch": "0.13.0",
-        "pixi-filters": "6.0.5",
-        "pixi.js": "8.1.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-resizable-panels": "2.0.22",
-        "rimraf": "~3.0.2",
-        "ts-node": "10.9.2",
-        "typescript": "~5.0.4",
-        "zustand": "4.5.2"
-      },
-      "sideEffects": [
-        "**/*.css",
-        "**/*.less",
-        "**/*.sass",
-        "**/*.scss"
-      ],
-      "publishConfig": {
-        "access": "public"
-      }
-}
+  "name": "@midscene/visualizer",
+  "version": "0.6.2",
+  "repository": "https://github.com/web-infra-dev/midscene",
+  "homepage": "https://midscenejs.com/",
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/lib/index.js",
+  "module": "./dist/es/index.js",
+  "files": ["dist", "html", "README.md"],
+  "watch": {
+    "build": {
+      "patterns": ["src"],
+      "extensions": "tsx,less,scss,css,js,jsx,ts",
+      "quiet": false
+    }
+  },
+  "scripts": {
+    "dev": "npm run build && npx npm-watch",
+    "build": "modern build && npx ts-node scripts/build-html.ts",
+    "build:watch": "modern build -w",
+    "serve": "http-server ./dist/ -p 3000",
+    "new": "modern new",
+    "upgrade": "modern upgrade"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "5.3.7",
+    "@midscene/core": "workspace:*",
+    "@modern-js/module-tools": "2.58.2",
+    "@modern-js/plugin-module-doc": "^2.33.1",
+    "@modern-js/runtime": "^2.56.2",
+    "@types/node": "^18.0.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "antd": "5.19.3",
+    "dayjs": "1.11.11",
+    "http-server": "14.1.1",
+    "npm-watch": "0.13.0",
+    "pixi-filters": "6.0.5",
+    "pixi.js": "8.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-resizable-panels": "2.0.22",
+    "rimraf": "~3.0.2",
+    "ts-node": "10.9.2",
+    "typescript": "~5.0.4",
+    "zustand": "4.5.2"
+  },
+  "sideEffects": ["**/*.css", "**/*.less", "**/*.sass", "**/*.scss"],
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/visualizer/src/component/detail-panel.tsx

@@ -1,19 +1,18 @@
 'use client';
 import './detail-panel.less';
 import { useExecutionDump } from '@/component/store';
-// import Playground from '@/playground';
 import { filterBase64Value, timeStr } from '@/utils';
 import {
   CameraOutlined,
-  ExperimentFilled,
   FileTextOutlined,
   ScheduleOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
-import { Button, ConfigProvider, Segmented, message } from 'antd';
+import { ConfigProvider, Segmented } from 'antd';
 import { useEffect, useState } from 'react';
 import Blackboard from './blackboard';
 import Player from './player';
+import SendToPlayground from './send-to-playground';
 
 const ScreenshotItem = (props: { time: string; img: string }) => {
   return (
@@ -167,21 +166,6 @@ const DetailPanel = (): JSX.Element => {
     };
   });
 
-  const ifPlaygroundValid = Boolean(insightDump?.context);
-  let playgroundEl = null;
-  if (ifPlaygroundValid) {
-    // playgroundEl = <Playground uiContext={insightDump!.context} />;
-    playgroundEl = <Button>Send to Playground</Button>;
-  }
-  const launchPlayground = () => {
-    if (ifPlaygroundValid) {
-      // TODO
-      // setOpen(true);
-    } else {
-      message.error('No context available');
-    }
-  };
-
   return (
     <div className="detail-panel">
       <div className="view-switcher">
@@ -203,17 +187,10 @@ const DetailPanel = (): JSX.Element => {
             }}
           />
 
-          <Button
-            disabled={!ifPlaygroundValid}
-            onClick={launchPlayground}
-            icon={<ExperimentFilled />}
-          >
-            Playground
-          </Button>
+          <SendToPlayground context={insightDump?.context} />
         </ConfigProvider>
       </div>
       <div className="detail-content">{content}</div>
-      {playgroundEl}
     </div>
   );
 };