AI Chatbot Assistant on WordPress UI Code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
    

<style>
/* Chatbot Theme Variables - Prefixed to avoid conflicts */
.wp-chatbot-container {
    --wp-chatbot-primary: var(--wp-theme-primary, #2B2A66);
    --wp-chatbot-secondary: var(--wp-theme-secondary, #f5f5f5);
    --wp-chatbot-text: var(--wp-theme-text, #333);
    --wp-chatbot-border: var(--wp-theme-border, #ddd);
    --wp-chatbot-shadow: var(--wp-theme-shadow, rgba(0, 0, 0, 0.1));
    --wp-chatbot-radius: 12px;
    --wp-chatbot-width: 350px;
    --wp-chatbot-height: 500px;
    --wp-chatbot-mobile-height: 100vh;
}

/* Base Styles */
.wp-chatbot-container .chatbot {
    font-family: inherit;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
}

/* Toggle Button */
.wp-chatbot-container .chatbot-toggle {
    background: var(--wp-chatbot-primary);
    color: white !important;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 2px 10px var(--wp-chatbot-shadow);
    transition: transform 0.3s ease;
    padding: 0;
    margin: 0;
    line-height: 50px;
}

.wp-chatbot-container .chatbot-toggle:hover {
    transform: scale(1.1);
}

/* Chat Window */
.wp-chatbot-container .chatbot-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: var(--wp-chatbot-width);
    height: var(--wp-chatbot-height);
    background: white;
    border-radius: var(--wp-chatbot-radius);
    box-shadow: 0 5px 20px var(--wp-chatbot-shadow);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all 0.3s ease;
}

.wp-chatbot-container .chatbot-window.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Header */
.wp-chatbot-container .chatbot-header {
    padding: 15px;
    background: var(--wp-chatbot-primary);
    color: white !important;
    border-radius: var(--wp-chatbot-radius) var(--wp-chatbot-radius) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: auto;
}

.wp-chatbot-container .chatbot-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: white !important;
    padding: 0;
}

.wp-chatbot-container .chatbot-controls {
    display: flex;
    gap: 10px;
}

.wp-chatbot-container .chatbot-controls button {
    background: transparent;
    border: none;
    color: white !important;
    cursor: pointer;
    padding: 5px;
    margin: 0;
    line-height: 1;
    font-size: 1rem;
}

/* Messages Area */
.wp-chatbot-container .chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: white;
}

/* Message Container with Avatar */
.wp-chatbot-container .message-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 85%;
    margin-bottom: 10px;
}

.wp-chatbot-container .message-container.user {
    margin-left: auto;
    flex-direction: row-reverse;
}

/* Avatar Styles */
.wp-chatbot-container .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wp-chatbot-container .avatar.bot {
    background: var(--wp-chatbot-primary);
    color: white;
}

.wp-chatbot-container .avatar.user {
    background: #e1e1e1;
    color: #666;
}

/* Message Bubbles */
.wp-chatbot-container .message {
    max-width: calc(100% - 42px);
    padding: 10px 15px;
    border-radius: 15px;
    line-height: 1.4;
    margin: 0;
    font-size: inherit;
    word-wrap: break-word;
}

.wp-chatbot-container .message.user {
    background: var(--wp-chatbot-primary);
    color: white !important;
    border-bottom-right-radius: 5px;
}

.wp-chatbot-container .message.bot {
    background: var(--wp-chatbot-secondary);
    color: var(--wp-chatbot-text) !important;
    border-bottom-left-radius: 5px;
}

/* Input Area */
.wp-chatbot-container .chatbot-input {
    border-top: 1px solid var(--wp-chatbot-border);
    padding: 15px;
    background: white;
    min-height: 70px;
}

.wp-chatbot-container .chatbot-input form {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.wp-chatbot-container .chatbot-input textarea {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--wp-chatbot-border);
    border-radius: var(--wp-chatbot-radius);
    resize: none;
    max-height: 100px;
    min-height: 40px;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.4;
    margin: 0;
    background: white;
    color: var(--wp-chatbot-text);
    width: 100%;
}

.wp-chatbot-container .chatbot-input button {
    background: var(--wp-chatbot-primary);
    color: white !important;
    border: none;
    border-radius: var(--wp-chatbot-radius);
    padding: 0 15px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin: 0;
    line-height: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-chatbot-container .chatbot-input button:hover {
    filter: brightness(1.1);
}

/* Typing Indicator */
.wp-chatbot-container .typing {
    display: flex;
    gap: 5px;
    padding: 10px 15px;
    background: var(--wp-chatbot-secondary);
    border-radius: 15px;
    width: fit-content;
}

.wp-chatbot-container .typing span {
    width: 8px;
    height: 8px;
    background: var(--wp-chatbot-text);
    border-radius: 50%;
    animation: wp-chatbot-typing 1s infinite ease-in-out;
}

.wp-chatbot-container .typing span:nth-child(2) { animation-delay: 0.2s; }
.wp-chatbot-container .typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wp-chatbot-typing {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .wp-chatbot-container .chatbot-window {
        width: calc(100vw - 40px);
        right: 20px;
    }

    .wp-chatbot-container .message-container {
        max-width: 90%;
    }
}

/* Mobile Full Screen Design */
@media (max-width: 480px) {
    .wp-chatbot-container .chatbot {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 999999;
    }
    
    .wp-chatbot-container .chatbot-toggle {
        width: 45px;
        height: 45px;
        line-height: 45px;
    }

    .wp-chatbot-container .chatbot-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .wp-chatbot-container .chatbot-window.active {
        transform: none;
    }

    .wp-chatbot-container .chatbot-header {
        border-radius: 0;
        padding: 10px 15px;
    }

    .wp-chatbot-container .chatbot-messages {
        padding: 10px;
    }

    .wp-chatbot-container .chatbot-input {
        padding: 10px;
    }

    .wp-chatbot-container .message-container {
        max-width: 90%;
    }

    /* Hide chat toggle when chat is open */
    .wp-chatbot-container .chatbot-window.active + .chatbot-toggle {
        display: none;
    }
}

/* Handle iOS Safari viewport height */
@supports (-webkit-touch-callout: none) {
    .wp-chatbot-container .chatbot-window {
        height: -webkit-fill-available;
    }
}

/* Scrollbar Styles */
.wp-chatbot-container .chatbot-messages {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--wp-chatbot-primary) transparent;
}

.wp-chatbot-container .chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

.wp-chatbot-container .chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

.wp-chatbot-container .chatbot-messages::-webkit-scrollbar-thumb {
    background-color: var(--wp-chatbot-primary);
    border-radius: 3px;
}
</style>


<body>
    <div class="wp-chatbot-container">
    <div class="chatbot">
        <!-- Chat Toggle Button -->
        <button class="chatbot-toggle" aria-label="Toggle chat">
            <i class="fas fa-comments"></i>
        </button>

        <!-- Chat Window -->
        <div class="chatbot-window">
            <!-- Header -->
            <div class="chatbot-header">
                <h2>Chat Assistant</h2>
                <div class="chatbot-controls">
                    <button class="new-chat" aria-label="Start new chat">
                        <i class="fas fa-plus"></i>
                    </button>
                    <button class="close-chat" aria-label="Close chat">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>

            <!-- Messages Area -->
            <div class="chatbot-messages"></div>

            <!-- Input Area -->
            <div class="chatbot-input">
                <form id="chat-form">
                    <textarea 
                        placeholder="Type your message..." 
                        rows="1"
                        required
                    ></textarea>
                    <button type="submit" aria-label="Send message">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    
    class Chatbot {
    constructor(config) {
        this.config = config;
        this.messageHistory = [];
        this.isOpen = false;
        this.conversationId = null;
        this.initElements();
        this.initEventListeners();
        this.sendInitialMessage();
    }

    initElements() {
        // Main elements
        this.window = document.querySelector('.chatbot-window');
        this.toggle = document.querySelector('.chatbot-toggle');
        this.messagesContainer = document.querySelector('.chatbot-messages');
        this.input = document.querySelector('.chatbot-input textarea');
        this.form = document.querySelector('#chat-form');
        
        // Control buttons
        this.newChatBtn = document.querySelector('.new-chat');
        this.closeBtn = document.querySelector('.close-chat');
    }

    initEventListeners() {
        // Toggle chat window
        this.toggle.addEventListener('click', () => this.toggleChat());
        this.closeBtn.addEventListener('click', () => this.toggleChat());

        // Form submission
        this.form.addEventListener('submit', (e) => this.handleSubmit(e));

        // Input auto-resize and keyboard handling
        this.input.addEventListener('input', () => this.autoResizeInput());
        this.input.addEventListener('keydown', (e) => this.handleKeyPress(e));

        // New chat
        this.newChatBtn.addEventListener('click', () => this.startNewChat());
    }

    handleKeyPress(e) {
        if (e.key === 'Enter') {
            // If Shift + Enter, allow new line
            if (e.shiftKey) {
                return;
            }
            
            // Prevent default Enter behavior
            e.preventDefault();
            
            // If input is not empty, submit the form
            if (this.input.value.trim()) {
                this.form.dispatchEvent(new Event('submit'));
            }
        }
    }

    toggleChat() {
        this.isOpen = !this.isOpen;
        this.window.classList.toggle('active');
        if (this.isOpen) this.input.focus();
    }

    async handleSubmit(e) {
        e.preventDefault();
        const message = this.input.value.trim();
        if (!message) return;
    
        // Disable input while processing
        this.input.disabled = true;
        this.form.querySelector('button').disabled = true;
    
        // Add user message
        this.addMessage('user', message);
        this.input.value = '';
        this.autoResizeInput();
    
        // Show typing indicator
        this.showTypingIndicator();
    
        try {
            const response = await this.sendMessage(message);
            this.hideTypingIndicator();
            this.addMessage('bot', response);
        } catch (error) {
            this.hideTypingIndicator();
            this.addMessage('bot', 'Sorry, I encountered an error. Please try again.');
            console.error('Chat error:', error);
        } finally {
            // Re-enable input
            this.input.disabled = false;
            this.form.querySelector('button').disabled = false;
            this.input.focus();
        }
    }

    addMessage(sender, text) {
        const messageContainer = document.createElement('div');
        messageContainer.className = `message-container ${sender}`;
        
        // Create avatar
        const avatar = document.createElement('div');
        avatar.className = `avatar ${sender}`;
        
        // Set avatar icon based on sender
        if (sender === 'bot') {
            avatar.innerHTML = '<i class="fas fa-robot"></i>';
        } else {
            avatar.innerHTML = '<i class="fas fa-user"></i>';
        }
        
        // Create message
        const message = document.createElement('div');
        message.className = `message ${sender}`;
        message.textContent = text;
        
        // Assemble message container
        messageContainer.appendChild(avatar);
        messageContainer.appendChild(message);
        
        this.messagesContainer.appendChild(messageContainer);
        this.messageHistory.push({ sender, text });
        this.scrollToBottom();
    }

    async sendMessage(message) {
        const response = await fetch(this.config.apiEndpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                message: message,
                conversation_id: this.conversationId
            })
        });
    
        if (!response.ok) {
            throw new Error('Failed to send message');
        }
    
        const data = await response.json();
        
        if (data.conversation_id) {
            this.conversationId = data.conversation_id;
        }
    
        return data.response;
    }

    showTypingIndicator() {
        const typing = document.createElement('div');
        typing.className = 'typing message bot';
        typing.innerHTML = '<span></span><span></span><span></span>';
        this.messagesContainer.appendChild(typing);
        this.scrollToBottom();
    }

    hideTypingIndicator() {
        const typing = this.messagesContainer.querySelector('.typing');
        if (typing) typing.remove();
    }

    autoResizeInput() {
        this.input.style.height = 'auto';
        const newHeight = Math.min(this.input.scrollHeight, this.config.maxInputHeight);
        this.input.style.height = `${newHeight}px`;
    }

    scrollToBottom() {
        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
    }

    startNewChat() {
        this.messageHistory = [];
        this.conversationId = null;
        this.messagesContainer.innerHTML = '';
        this.sendInitialMessage();
    }

    sendInitialMessage() {
        this.addMessage('bot', this.config.initialMessage);
    }
}

// Initialize chatbot with configuration
document.addEventListener('DOMContentLoaded', () => {
    const chatbot = new Chatbot({
        apiEndpoint: 'http://rag-chatbot.local/wp-json/chatbot/v1/chat',
        initialMessage: 'Hello! How can I help you today?',
        botName: 'Chat Assistant',
        maxInputHeight: 100,
        typingDelay: 30,
    });
});
</script>