frontend-widget/src/ChatWidget.jsx

import { useState } from 'preact/hooks';
import ChatPanel from './components/ChatPanel';

function EnvBadge() {
    const cfg = window.ChatbotConfig;
    if (!cfg?.DEBUG) return null;
    return (
        <div class={`env-badge ${cfg.DETECTED_ENVIRONMENT || ''}`}>
            Environment: {cfg.ENVIRONMENT} | API: {cfg.API_URL || '(same-origin)'}
        </div>
    );
}

export default function ChatWidget() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <>
            <EnvBadge />
            <button
                class="chat-widget-btn"
                onClick={() => setIsOpen(o => !o)}
                aria-label="Toggle chat"
            >
                {isOpen ? '\u2715' : '\uD83D\uDCAC'}
            </button>
            <ChatPanel isOpen={isOpen} onClose={() => setIsOpen(false)} />
        </>
    );
}