Method createElement

chat/components/FloatingPanel.js:54–94

()

    }

    createElement() {
        // Remove existing panel if any
        const existing = document.getElementById('floating-panel');
        if (existing) {
            existing.remove();
        }

        // Create floating panel container
        const floatingPanel = document.createElement('div');
        floatingPanel.id = 'floating-panel';
        floatingPanel.className = 'fixed bg-background border border-border shadow-lg rounded-lg z-50 transition-all duration-300';

        // Dynamically calculate position based on the status dot
        const statusDotBtn = document.getElementById('status-dot-btn');
        if (statusDotBtn) {
            const rect = statusDotBtn.getBoundingClientRect();
            const panelLeft = rect.right + 8; // 8px gap
            // The breathing animation expands the dot with a 6px box-shadow.
            // We adjust the top position to align with the top of the animation's outer edge.
            const panelTop = rect.top - 12; // Nudge up by 11px (6px for shadow + 5px extra)

            floatingPanel.style.top = `${panelTop}px`;
            floatingPanel.style.left = `${panelLeft}px`;
        } else {
            // Fallback to a default position if the dot isn't found
            floatingPanel.style.top = '1rem';
            floatingPanel.style.left = '1.875rem';
        }

        floatingPanel.style.width = '280px';
        floatingPanel.style.maxWidth = 'calc(100vw - 2.5rem)';

        // Add content container
        const content = document.createElement('div');
        content.id = 'floating-panel-content';
        content.className = 'bg-background rounded-lg flex flex-col';
        content.style.height = 'auto';

        floatingPanel.appendChild(content);
        document.body.appendChild(floatingPanel);
    }

    updateWithLog(log) {
        this.currentLog = log;