botui/ui/suite/chat/chat.html

<link rel="stylesheet" href="/chat/chat.css" />
<script>
    // WebSocket URL - use relative path to go through botui proxy
    const WS_BASE_URL = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
    const WS_URL = `${WS_BASE_URL}${window.location.host}`;
    
    // Message Type Constants
    const MessageType = { EXTERNAL: 0, USER: 1, BOT_RESPONSE: 2, CONTINUE: 3, SUGGESTION: 4, CONTEXT_CHANGE: 5 };
    
    // State
    let ws = null, currentSessionId = null, currentUserId = null, currentBotId = "default";
    let isStreaming = false, streamingMessageId = null, currentStreamingContent = "";
    let reconnectAttempts = 0;
    const maxReconnectAttempts = 5;
    
    // Initialize auth and WebSocket
    async function initChat() {
        try {
            updateConnectionStatus('connecting');
            const botName = 'default';
            // Use the botui proxy for auth (handles SSL cert issues)
            const response = await fetch(`/api/auth?bot_name=${encodeURIComponent(botName)}`);
            const auth = await response.json();
            currentUserId = auth.user_id;
            currentSessionId = auth.session_id;
            currentBotId = auth.bot_id || "default";
            console.log("Auth:", { currentUserId, currentSessionId, currentBotId });
            connectWebSocket();
        } catch (e) {
            console.error("Auth failed:", e);
            updateConnectionStatus('disconnected');
            setTimeout(initChat, 3000);
        }
    }
    
    function connectWebSocket() {
        if (ws) ws.close();
        // Use the botui proxy for WebSocket (handles SSL cert issues)
        const url = `${WS_URL}/ws?session_id=${currentSessionId}&user_id=${currentUserId}`;
        ws = new WebSocket(url);
        
        ws.onopen = () => {
            console.log("WebSocket connected");
            updateConnectionStatus('connected');
            reconnectAttempts = 0;
        };
        
        ws.onmessage = (event) => {
            try {
                const data = JSON.parse(event.data);
                if (data.type === 'connected') return;
                if (data.message_type === MessageType.BOT_RESPONSE) {
                    processMessage(data);
                }
            } catch (e) {
                console.error("WS message error:", e);
            }
        };
        
        ws.onclose = () => {
            updateConnectionStatus('disconnected');
            if (reconnectAttempts < maxReconnectAttempts) {
                reconnectAttempts++;
                setTimeout(connectWebSocket, 1000 * reconnectAttempts);
            }
        };
        
        ws.onerror = (e) => console.error("WebSocket error:", e);
    }
    
    function processMessage(data) {
        if (data.is_complete) {
            if (isStreaming) {
                finalizeStreaming();
            } else {
                addMessage('bot', data.content);
            }
            isStreaming = false;
        } else {
            if (!isStreaming) {
                isStreaming = true;
                streamingMessageId = 'streaming-' + Date.now();
                currentStreamingContent = data.content || '';
                addMessage('bot', currentStreamingContent, streamingMessageId);
            } else {
                currentStreamingContent += data.content || '';
                updateStreaming(currentStreamingContent);
            }
        }
    }
    
    function addMessage(sender, content, msgId = null) {
        const messages = document.getElementById('messages');
        const div = document.createElement('div');
        div.className = `message ${sender}`;
        if (msgId) div.id = msgId;
        
        if (sender === 'user') {
            div.innerHTML = `<div class="message-content user-message">${escapeHtml(content)}</div>`;
        } else {
            div.innerHTML = `<div class="message-content bot-message">${marked.parse(content)}</div>`;
        }
        messages.appendChild(div);
        messages.scrollTop = messages.scrollHeight;
    }
    
    function updateStreaming(content) {
        const el = document.getElementById(streamingMessageId);
        if (el) el.querySelector('.message-content').innerHTML = marked.parse(content);
    }
    
    function finalizeStreaming() {
        const el = document.getElementById(streamingMessageId);
        if (el) {
            el.querySelector('.message-content').innerHTML = marked.parse(currentStreamingContent);
            el.removeAttribute('id');
        }
        streamingMessageId = null;
        currentStreamingContent = '';
    }
    
    function sendMessage() {
        const input = document.getElementById('messageInput');
        const content = input.value.trim();
        if (!content || !ws || ws.readyState !== WebSocket.OPEN) return;
        
        addMessage('user', content);
        
        ws.send(JSON.stringify({
            bot_id: currentBotId,
            user_id: currentUserId,
            session_id: currentSessionId,
            channel: 'web',
            content: content,
            message_type: MessageType.USER,
            timestamp: new Date().toISOString()
        }));
        
        input.value = '';
        input.focus();
    }
    
    function updateConnectionStatus(status) {
        const el = document.getElementById('connectionStatus');
        if (el) el.className = `connection-status ${status}`;
    }
    
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // Initialize chat - runs immediately when script is executed
    // (works both on full page load and HTMX partial load)
    function setupChat() {
        const input = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendBtn');
        
        if (sendBtn) sendBtn.onclick = sendMessage;
        if (input) {
            input.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') sendMessage();
            });
        }
        
        initChat();
    }
    
    // Initialize after a micro-delay to ensure DOM is ready
    // This works for both full page loads and HTMX partial loads
    setTimeout(() => {
        if (document.getElementById('messageInput') && !window.chatInitialized) {
            window.chatInitialized = true;
            setupChat();
        }
    }, 0);
    
    // Fallback for full page load
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            if (!window.chatInitialized) {
                window.chatInitialized = true;
                setupChat();
            }
        });
    }
</script>

<div class="chat-layout" id="chat-app">
    <div id="connectionStatus" class="connection-status disconnected"></div>
    <main id="messages"></main>

    <footer>
        <div class="suggestions-container" id="suggestions"></div>
        <div class="input-container">
            <input
                name="content"
                id="messageInput"
                type="text"
                placeholder="Message..."
                autofocus
            />
            <button type="button" id="voiceBtn" title="Voice">🎤</button>
            <button type="button" id="sendBtn" title="Send">↑</button>
        </div>
    </footer>
    <button class="scroll-to-bottom" id="scrollToBottom">↓</button>
</div>