@midscene/recorder-ui 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# @midscene/recorder-ui
+
+Internal recorder UI package for Midscene applications.
+
+> Do not add `@midscene/recorder-ui` as a dependency in external projects. Its API is not intended for external consumption and may change without notice.
+
+See <https://midscenejs.com>.

package/dist/Button.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "./button.css";
+const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props })=>{
+    const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: [
+            'demo-button',
+            `demo-button--${size}`,
+            mode
+        ].join(' '),
+        style: {
+            backgroundColor
+        },
+        ...props,
+        children: label
+    });
+};
+export { Button };

package/dist/RecordTimeline.css

@@ -0,0 +1,41 @@
+.record-timeline-screenshot-thumbnail {
+  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
+}
+
+.record-timeline-screenshot-thumbnail:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px #00000026;
+}
+
+.record-timeline-screenshot-popover {
+  max-width: 600px;
+}
+
+.record-timeline-screenshot-popover .ant-popover-inner {
+  padding: 8px;
+}
+
+.record-timeline-screenshot-full {
+  border-radius: 4px;
+  box-shadow: 0 2px 8px #0000001a;
+}
+
+.ant-image-preview-root, .ant-image-preview-mask, .ant-image-preview-wrap, .ant-image-preview-img-wrapper, .ant-image-preview-operations-wrapper, .ant-image-preview-close, .ant-image-preview-operations-operation {
+  -webkit-app-region: no-drag;
+}
+
+.ant-image-preview-close, .ant-image-preview-operations-operation {
+  pointer-events: auto;
+}
+
+.timeline-scrollable {
+  overscroll-behavior: contain;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.timeline-scrollable > div {
+  max-height: inherit;
+  overflow-y: auto;
+}
+

package/dist/RecordTimeline.js

@@ -0,0 +1,549 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AimOutlined, CompassOutlined, CopyOutlined, EditOutlined, KeyOutlined, VerticalAlignTopOutlined } from "@ant-design/icons";
+import { getMidsceneRecorderEventDescription, getMidsceneRecorderSemantic } from "@midscene/shared/recorder";
+import { App, Button, Card, Image, Space, Timeline, Tooltip, Typography } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { ShinyText } from "./components/shiny-text.js";
+import "./RecordTimeline.css";
+const { Text } = Typography;
+function TwoLineEventDescription({ children, tooltip }) {
+    const contentRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(()=>{
+        const updateTruncation = ()=>{
+            const element = contentRef.current;
+            if (!element) return;
+            setIsTruncated(element.scrollHeight > element.clientHeight + 1);
+        };
+        updateTruncation();
+        if ('undefined' == typeof ResizeObserver || !contentRef.current) return;
+        const observer = new ResizeObserver(updateTruncation);
+        observer.observe(contentRef.current);
+        return ()=>observer.disconnect();
+    }, [
+        tooltip
+    ]);
+    return /*#__PURE__*/ jsx(Tooltip, {
+        title: isTruncated ? tooltip : void 0,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: contentRef,
+            className: "record-timeline-event-description",
+            children: children
+        })
+    });
+}
+const RecordTimeline = ({ events, onEventClick, variant = 'default' })=>{
+    const { message } = App.useApp();
+    const [expandedEvents, setExpandedEvents] = useState(new Set());
+    const timelineRootRef = useRef(null);
+    useEffect(()=>{
+        if (events.length > 0) {
+            const timeline = timelineRootRef.current?.querySelector('.ant-timeline');
+            if (timeline) {
+                const nextScrollTop = timeline.scrollHeight;
+                if ('function' == typeof timeline.scrollTo) timeline.scrollTo({
+                    top: nextScrollTop,
+                    behavior: 'smooth'
+                });
+                else timeline.scrollTop = nextScrollTop;
+            }
+        }
+    }, [
+        events.length
+    ]);
+    const toggleEventExpansion = (index)=>{
+        const newExpanded = new Set(expandedEvents);
+        if (newExpanded.has(index)) newExpanded.delete(index);
+        else newExpanded.add(index);
+        setExpandedEvents(newExpanded);
+    };
+    const truncateJsonStrings = (obj, maxLength = 30)=>{
+        if ('string' == typeof obj) return obj.length > maxLength ? `${obj.substring(0, maxLength)}...` : obj;
+        if (Array.isArray(obj)) return obj.map((item)=>truncateJsonStrings(item, maxLength));
+        if (obj && 'object' == typeof obj) {
+            const truncated = {};
+            for(const key in obj)if (Object.prototype.hasOwnProperty.call(obj, key)) truncated[key] = truncateJsonStrings(obj[key], maxLength);
+            return truncated;
+        }
+        return obj;
+    };
+    const copyToClipboard = (text)=>{
+        navigator.clipboard.writeText(text).then(()=>{
+            message.success('JSON copied to clipboard');
+        }).catch(()=>{
+            message.error('Copy failed');
+        });
+    };
+    const getEventIcon = (type)=>{
+        switch(type){
+            case 'click':
+                return /*#__PURE__*/ jsx(AimOutlined, {
+                    style: {
+                        color: '#1890ff'
+                    }
+                });
+            case 'drag':
+                return /*#__PURE__*/ jsx(AimOutlined, {
+                    style: {
+                        color: '#13c2c2'
+                    }
+                });
+            case 'input':
+                return /*#__PURE__*/ jsx(EditOutlined, {
+                    style: {
+                        color: '#52c41a'
+                    }
+                });
+            case 'scroll':
+                return /*#__PURE__*/ jsx(VerticalAlignTopOutlined, {
+                    style: {
+                        color: '#faad14'
+                    }
+                });
+            case 'navigation':
+                return /*#__PURE__*/ jsx(CompassOutlined, {
+                    style: {
+                        color: '#722ed1'
+                    }
+                });
+            case 'setViewport':
+                return /*#__PURE__*/ jsx(CompassOutlined, {
+                    style: {
+                        color: '#eb2f96'
+                    }
+                });
+            case 'keydown':
+                return /*#__PURE__*/ jsx(KeyOutlined, {
+                    style: {
+                        color: '#fa8c16'
+                    }
+                });
+            default:
+                return /*#__PURE__*/ jsx(AimOutlined, {
+                    style: {
+                        color: '#d9d9d9'
+                    }
+                });
+        }
+    };
+    const getEventColor = (type)=>{
+        switch(type){
+            case 'click':
+                return '#1890ff';
+            case 'drag':
+                return '#13c2c2';
+            case 'input':
+                return '#52c41a';
+            case 'scroll':
+                return '#faad14';
+            case 'navigation':
+                return '#722ed1';
+            case 'setViewport':
+                return '#eb2f96';
+            case 'keydown':
+                return '#fa8c16';
+            default:
+                return '#d9d9d9';
+        }
+    };
+    const isCoordinateValue = (value)=>Boolean(value && /^\s*\d+(?:\.\d+)?,\s*\d+(?:\.\d+)?\s*$/.test(value));
+    const getDisplayDescription = (event)=>getMidsceneRecorderEventDescription(event);
+    const getViewportDescription = (event)=>{
+        const width = event.pageInfo?.width;
+        const height = event.pageInfo?.height;
+        if ('number' != typeof width || 'number' != typeof height || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
+        return `${width}x${height} px`;
+    };
+    const getEventTitle = (event)=>{
+        switch(event.type){
+            case 'click':
+                if ('BUTTON' === event.targetTagName) return 'Click Button';
+                if (event.value && !isCoordinateValue(event.value)) return `Click Element "${event.value}"`;
+                return 'Click';
+            case 'drag':
+                return 'Drag';
+            case 'input':
+                return 'Input';
+            case 'scroll':
+                return 'Scroll';
+            case 'navigation':
+                return 'Navigate';
+            case 'setViewport':
+                return 'Viewport changed';
+            case 'keydown':
+                return 'Key down';
+            default:
+                return event.type;
+        }
+    };
+    const getEventDescription = (event)=>{
+        const eventTitle = getEventTitle(event);
+        switch(event.type){
+            case 'click':
+            case 'drag':
+                if (getMidsceneRecorderSemantic(event)?.status === 'pending') return /*#__PURE__*/ jsxs("span", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '4px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Text, {
+                            children: [
+                                eventTitle,
+                                " - "
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(ShinyText, {
+                            text: "analyzing target...",
+                            disabled: false,
+                            speed: 3,
+                            className: "step-title-shiny"
+                        })
+                    ]
+                });
+                if (getMidsceneRecorderSemantic(event)?.status === 'ready') return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - ",
+                        getDisplayDescription(event)
+                    ]
+                });
+                return /*#__PURE__*/ jsx(Text, {
+                    children: eventTitle
+                });
+            case 'input':
+                if (getMidsceneRecorderSemantic(event)?.status === 'ready') return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - ",
+                        getDisplayDescription(event)
+                    ]
+                });
+                return /*#__PURE__*/ jsxs("span", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '4px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Text, {
+                            children: [
+                                eventTitle,
+                                " - "
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(ShinyText, {
+                            text: event.value ? `"${event.value}"` : '',
+                            disabled: false,
+                            speed: 3,
+                            className: "step-title-shiny"
+                        })
+                    ]
+                });
+            case 'scroll':
+                if (getDisplayDescription(event)) return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - ",
+                        getDisplayDescription(event)
+                    ]
+                });
+                return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - ",
+                        event.value?.split(' ')[0] || 'recorded scroll'
+                    ]
+                });
+            case 'navigation':
+                {
+                    const navigationDescription = getDisplayDescription(event);
+                    if (navigationDescription) return /*#__PURE__*/ jsxs(Text, {
+                        children: [
+                            eventTitle,
+                            " - ",
+                            navigationDescription
+                        ]
+                    });
+                    const truncatedUrl = event.url && event.url.length > 50 ? `${event.url.substring(0, 50)}...` : event.url;
+                    return /*#__PURE__*/ jsxs(Text, {
+                        children: [
+                            eventTitle,
+                            " - ",
+                            truncatedUrl
+                        ]
+                    });
+                }
+            case 'setViewport':
+                {
+                    const viewportDescription = getViewportDescription(event);
+                    return /*#__PURE__*/ jsxs(Text, {
+                        children: [
+                            eventTitle,
+                            viewportDescription ? ` - ${viewportDescription}` : ''
+                        ]
+                    });
+                }
+            case 'keydown':
+                return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - Key: ",
+                        event.value || 'Unknown'
+                    ]
+                });
+            default:
+                return /*#__PURE__*/ jsx(Text, {
+                    children: eventTitle
+                });
+        }
+    };
+    const getEventDescriptionText = (event)=>{
+        const eventTitle = getEventTitle(event);
+        const description = getDisplayDescription(event);
+        switch(event.type){
+            case 'click':
+            case 'drag':
+                return getMidsceneRecorderSemantic(event)?.status === 'pending' ? `${eventTitle} - analyzing target...` : description ? `${eventTitle} - ${description}` : eventTitle;
+            case 'input':
+                return getMidsceneRecorderSemantic(event)?.status === 'ready' ? `${eventTitle} - ${description}` : `${eventTitle} - ${event.value ? `"${event.value}"` : ''}`;
+            case 'scroll':
+                return description ? `${eventTitle} - ${description}` : `${eventTitle} - ${event.value?.split(' ')[0] || 'recorded scroll'}`;
+            case 'navigation':
+                return `${eventTitle} - ${description || event.url || ''}`;
+            case 'setViewport':
+                {
+                    const viewportDescription = getViewportDescription(event);
+                    return viewportDescription ? `${eventTitle} - ${viewportDescription}` : eventTitle;
+                }
+            case 'keydown':
+                return `${eventTitle} - Key: ${event.value || 'Unknown'}`;
+            default:
+                return eventTitle;
+        }
+    };
+    const timelineItems = events.map((event, index)=>{
+        const boxedImage = event.screenshotWithBox;
+        const afterImage = event.screenshotAfter;
+        const isExpanded = expandedEvents.has(index);
+        const eventDescription = getEventDescription(event);
+        const eventDescriptionText = getEventDescriptionText(event);
+        return {
+            dot: getEventIcon(event.type),
+            color: getEventColor(event.type),
+            children: /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsxs(Card, {
+                    className: "record-timeline-event-card",
+                    size: "small",
+                    bordered: false,
+                    style: {
+                        marginBottom: isExpanded ? 8 : 8,
+                        cursor: 'pointer'
+                    },
+                    onClick: ()=>{
+                        toggleEventExpansion(index);
+                        onEventClick?.(event, index);
+                    },
+                    styles: {
+                        body: {
+                            padding: '8px 12px',
+                            backgroundColor: '#F2F4F7',
+                            borderRadius: '8px'
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Space, {
+                            className: 'chrome-extension' === variant ? 'record-timeline-event-row' : void 0,
+                            style: {
+                                width: '100%',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                color: 'rgba(0, 0, 0, 0.85)'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx(Space, {
+                                    className: 'chrome-extension' === variant ? 'record-timeline-event-copy' : void 0,
+                                    style: {
+                                        flex: 1,
+                                        minWidth: 0
+                                    },
+                                    children: 'chrome-extension' === variant ? /*#__PURE__*/ jsx(TwoLineEventDescription, {
+                                        tooltip: eventDescriptionText,
+                                        children: eventDescription
+                                    }) : eventDescription
+                                }),
+                                /*#__PURE__*/ jsx(Space, {
+                                    className: 'chrome-extension' === variant ? 'record-timeline-event-media' : void 0,
+                                    children: (boxedImage || afterImage) && /*#__PURE__*/ jsxs("div", {
+                                        style: {
+                                            display: 'flex',
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            boxedImage && /*#__PURE__*/ jsx("div", {
+                                                className: "record-timeline-screenshot-thumbnail",
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    borderRadius: '4px',
+                                                    overflow: 'hidden',
+                                                    boxShadow: '1px 1px 1px 1px #00000014',
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.2s ease-in-out',
+                                                    zIndex: 2
+                                                },
+                                                onMouseEnter: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1.2)';
+                                                    target.style.boxShadow = `0 2px 8px ${getEventColor(event.type)}60`;
+                                                },
+                                                onMouseLeave: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1)';
+                                                    target.style.boxShadow = '1px 1px 1px 1px #00000014';
+                                                },
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                },
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    src: boxedImage,
+                                                    width: "100%",
+                                                    height: "100%",
+                                                    style: {
+                                                        objectFit: 'cover',
+                                                        display: 'block'
+                                                    },
+                                                    preview: {
+                                                        mask: false
+                                                    }
+                                                })
+                                            }),
+                                            afterImage && /*#__PURE__*/ jsx("div", {
+                                                className: "record-timeline-screenshot-thumbnail",
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    borderRadius: '4px',
+                                                    overflow: 'hidden',
+                                                    boxShadow: '1px 1px 1px 1px #00000014',
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.2s ease-in-out',
+                                                    marginLeft: boxedImage ? '-8px' : '0',
+                                                    zIndex: 1
+                                                },
+                                                onMouseEnter: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1.2)';
+                                                    target.style.boxShadow = '0 2px 8px #52c41a60';
+                                                },
+                                                onMouseLeave: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1)';
+                                                    target.style.boxShadow = '1px 1px 1px 1px #00000014';
+                                                },
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                },
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    src: afterImage,
+                                                    width: "100%",
+                                                    height: "100%",
+                                                    style: {
+                                                        objectFit: 'cover',
+                                                        display: 'block'
+                                                    },
+                                                    preview: {
+                                                        mask: false
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }),
+                        isExpanded && /*#__PURE__*/ jsx("div", {
+                            style: {
+                                marginTop: 8,
+                                marginBottom: 8
+                            },
+                            children: /*#__PURE__*/ jsx(Card, {
+                                size: "small",
+                                style: {
+                                    backgroundColor: '#f5f5f5'
+                                },
+                                styles: {
+                                    body: {
+                                        padding: '0px'
+                                    }
+                                },
+                                children: /*#__PURE__*/ jsxs("div", {
+                                    style: {
+                                        position: 'relative'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx("pre", {
+                                            style: {
+                                                fontSize: '12px',
+                                                margin: 0,
+                                                whiteSpace: 'pre-wrap',
+                                                backgroundColor: '#ffffff',
+                                                padding: '12px',
+                                                borderRadius: '8px',
+                                                maxHeight: '250px',
+                                                overflow: 'auto'
+                                            },
+                                            children: JSON.stringify(truncateJsonStrings(event), null, 2)
+                                        }),
+                                        /*#__PURE__*/ jsx(Button, {
+                                            type: "text",
+                                            size: "small",
+                                            icon: /*#__PURE__*/ jsx(CopyOutlined, {}),
+                                            onClick: (e)=>{
+                                                e.stopPropagation();
+                                                copyToClipboard(JSON.stringify(event, null, 2));
+                                            },
+                                            style: {
+                                                position: 'absolute',
+                                                top: '8px',
+                                                right: '8px',
+                                                background: 'rgba(255, 255, 255, 0.9)',
+                                                border: '1px solid #d9d9d9'
+                                            },
+                                            title: "Copy JSON"
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        };
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: timelineRootRef,
+        className: `record-timeline-${variant}`,
+        style: {
+            minHeight: 0,
+            padding: '3px'
+        },
+        children: /*#__PURE__*/ jsx(Space, {
+            direction: "vertical",
+            size: "large",
+            style: {
+                width: '100%'
+            },
+            children: /*#__PURE__*/ jsx(Timeline, {
+                mode: "left",
+                className: "timeline-scrollable",
+                items: timelineItems,
+                style: {
+                    paddingTop: 16
+                }
+            })
+        })
+    });
+};
+export { RecordTimeline };

package/dist/button.css

@@ -0,0 +1,35 @@
+.demo-button {
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-block;
+}
+
+.demo-button--primary {
+  color: #fff;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: #0000;
+  box-shadow: inset 0 0 0 1px #00000026;
+}
+
+.demo-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+
+.demo-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+
+.demo-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+