test-chat-component-per 1.0.1

package/src/delachat.js

@@ -0,0 +1,580 @@
+/**
+ * DelaChat - Standalone Chat Component
+ * Version: 1.0.0
+ *
+ * A plug-and-play chat component for integrating DelaChat AI
+ * Pure vanilla JavaScript - zero dependencies
+ */
+
+(function(window) {
+    'use strict';
+
+    // Component version
+    const VERSION = '1.0.0';
+
+    /**
+     * DelaChat Constructor
+     */
+    function DelaChatInstance(container, config) {
+        this.container = container;
+        this.config = this._validateConfig(config);
+        this.state = {
+            messages: [],
+            isLoading: false,
+            isOpen: true,
+            error: null
+        };
+        this.elements = {};
+        this.eventListeners = {};
+
+        this._init();
+    }
+
+    /**
+     * Initialize the component
+     */
+    DelaChatInstance.prototype._init = function() {
+        this._render();
+        this._attachEventListeners();
+        this._loadHistory();
+
+        if (this.config.onReady) {
+            this.config.onReady.call(this);
+        }
+    };
+
+    /**
+     * Validate and set default configuration
+     */
+    DelaChatInstance.prototype._validateConfig = function(config) {
+        if (!config.apiUrl) throw new Error('apiUrl is required');
+        if (!config.sessionUid) throw new Error('sessionUid is required');
+        if (!config.datasource) throw new Error('datasource is required');
+        if (!config.productId) throw new Error('productId is required');
+        if (!config.token) throw new Error('token is required');
+
+        return {
+            apiUrl: config.apiUrl,
+            sessionUid: config.sessionUid,
+            datasource: config.datasource,
+            productId: config.productId,
+            token: config.token,
+            theme: config.theme || 'light',
+            height: config.height || '600px',
+            width: config.width || '400px',
+            position: config.position || 'inline',
+            autoOpen: config.autoOpen !== false,
+            avatarUrl: config.avatarUrl || null,
+            userName: config.userName || 'User',
+            onReady: config.onReady || null,
+            onMessageSent: config.onMessageSent || null,
+            onMessageReceived: config.onMessageReceived || null,
+            onError: config.onError || null,
+            onClose: config.onClose || null
+        };
+    };
+
+    /**
+     * Render the chat UI
+     */
+    DelaChatInstance.prototype._render = function() {
+        const html = `
+            <div class="delachat-window" data-theme="${this.config.theme}" style="height: ${this.config.height}; width: ${this.config.width};">
+                <!-- Header -->
+                <div class="delachat-header">
+                    <h2 class="delachat-title">Ask Dela</h2>
+                    <div class="delachat-header-buttons">
+                        <button class="delachat-btn-icon" data-action="disclaimer" title="Disclaimer">
+                            <span class="delachat-icon">ℹ</span>
+                        </button>
+                        <button class="delachat-btn-icon" data-action="new-chat" title="New Chat">
+                            <span class="delachat-icon">＋</span>
+                        </button>
+                        <button class="delachat-btn-icon" data-action="help" title="Help">
+                            <span class="delachat-icon">?</span>
+                        </button>
+                        <button class="delachat-btn-icon" data-action="close" title="Close">
+                            <span class="delachat-icon">✕</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Disclaimer -->
+                <div class="delachat-disclaimer" style="display: none;">
+                    <p>Dela is an AI-powered assistant. While I strive to provide accurate information, please verify important details independently.</p>
+                </div>
+
+                <!-- Error message -->
+                <div class="delachat-error" style="display: none;"></div>
+
+                <!-- Messages area -->
+                <div class="delachat-messages">
+                    <div class="delachat-welcome">
+                        <div class="delachat-ai-avatar-large">
+                            <span>🤖</span>
+                        </div>
+                        <p>Hello! I'm Dela, your AI assistant. How can I help you today?</p>
+                    </div>
+                </div>
+
+                <!-- Loading indicator -->
+                <div class="delachat-loading" style="display: none;">
+                    <div class="delachat-loading-dots">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <span>Dela is thinking...</span>
+                </div>
+
+                <!-- Input area -->
+                <div class="delachat-input-container">
+                    <div class="delachat-input-wrapper">
+                        <textarea
+                            class="delachat-input"
+                            placeholder="Type your message..."
+                            rows="1"
+                        ></textarea>
+                        <button class="delachat-btn-send" data-action="send" title="Send message">
+                            <span class="delachat-icon">➤</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.container.innerHTML = html;
+        this._cacheElements();
+    };
+
+    /**
+     * Cache DOM elements
+     */
+    DelaChatInstance.prototype._cacheElements = function() {
+        const win = this.container.querySelector('.delachat-window');
+        this.elements = {
+            window: win,
+            header: win.querySelector('.delachat-header'),
+            disclaimer: win.querySelector('.delachat-disclaimer'),
+            error: win.querySelector('.delachat-error'),
+            messages: win.querySelector('.delachat-messages'),
+            welcome: win.querySelector('.delachat-welcome'),
+            loading: win.querySelector('.delachat-loading'),
+            inputContainer: win.querySelector('.delachat-input-container'),
+            input: win.querySelector('.delachat-input'),
+            btnSend: win.querySelector('[data-action="send"]'),
+            btnClose: win.querySelector('[data-action="close"]'),
+            btnDisclaimer: win.querySelector('[data-action="disclaimer"]'),
+            btnNewChat: win.querySelector('[data-action="new-chat"]'),
+            btnHelp: win.querySelector('[data-action="help"]')
+        };
+    };
+
+    /**
+     * Attach event listeners
+     */
+    DelaChatInstance.prototype._attachEventListeners = function() {
+        var self = this;
+
+        // Send button
+        this.elements.btnSend.addEventListener('click', function() {
+            self._handleSend();
+        });
+
+        // Input - Enter key
+        this.elements.input.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                self._handleSend();
+            }
+        });
+
+        // Auto-resize textarea
+        this.elements.input.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+
+        // Close button
+        this.elements.btnClose.addEventListener('click', function() {
+            self.close();
+        });
+
+        // Disclaimer toggle
+        this.elements.btnDisclaimer.addEventListener('click', function() {
+            var disclaimer = self.elements.disclaimer;
+            disclaimer.style.display = disclaimer.style.display === 'none' ? 'block' : 'none';
+        });
+
+        // New chat
+        this.elements.btnNewChat.addEventListener('click', function() {
+            if (confirm('Start a new conversation? This will clear the current chat.')) {
+                self.clearHistory();
+            }
+        });
+
+        // Help
+        this.elements.btnHelp.addEventListener('click', function() {
+            alert('DelaChat Help\n\nType your question and press Enter or click Send.\n\nTips:\n- Ask specific questions\n- Provide context for better answers\n- Use "Regenerate" if you need a different response');
+        });
+    };
+
+    /**
+     * Handle send message
+     */
+    DelaChatInstance.prototype._handleSend = function() {
+        var message = this.elements.input.value.trim();
+        if (!message || this.state.isLoading) return;
+
+        this.sendMessage(message);
+        this.elements.input.value = '';
+        this.elements.input.style.height = 'auto';
+    };
+
+    /**
+     * Load chat history from API
+     */
+    DelaChatInstance.prototype._loadHistory = function() {
+        var self = this;
+        this._setLoading(true);
+
+        this._apiRequest('GET', '/delachat/history?limit=50&offset=0')
+            .then(function(data) {
+                self.state.messages = data.records || [];
+                self._renderMessages();
+                self._setLoading(false);
+            })
+            .catch(function(error) {
+                self._handleError(error);
+                self._setLoading(false);
+            });
+    };
+
+    /**
+     * Send user message
+     */
+    DelaChatInstance.prototype.sendMessage = function(message) {
+        var self = this;
+        this._setLoading(true);
+        this._hideWelcome();
+
+        // Add user message to UI immediately
+        var userMsg = {
+            historyId: 'temp-' + Date.now(),
+            message: message,
+            source: 0,
+            created: new Date().toISOString(),
+            userId: this.config.userName,
+            isUserMessage: true,
+            isAIMessage: false
+        };
+
+        this.state.messages.unshift(userMsg);
+        this._renderMessages();
+
+        // Send to API
+        this._apiRequest('POST', '/delachat/history', {
+            message: message,
+            source: 0,
+            productUid: this.config.productId
+        })
+            .then(function(data) {
+                // Replace temp message with real one
+                self.state.messages[0] = data.record;
+                self._renderMessages();
+
+                if (self.config.onMessageSent) {
+                    self.config.onMessageSent.call(self, message);
+                }
+
+                // Simulate AI response (in real app, this would come from AI service)
+                self._simulateAIResponse(message);
+            })
+            .catch(function(error) {
+                self._handleError(error);
+                self._setLoading(false);
+            });
+    };
+
+    /**
+     * Simulate AI response (Replace with real AI integration)
+     */
+    DelaChatInstance.prototype._simulateAIResponse = function(userMessage) {
+        var self = this;
+
+        // Simulate delay
+        setTimeout(function() {
+            var aiResponse = "I received your message: \"" + userMessage + "\". This is a simulated response. In production, this would call your AI service.";
+
+            self._apiRequest('POST', '/delachat/history', {
+                message: aiResponse,
+                source: 1,
+                productUid: self.config.productId
+            })
+                .then(function(data) {
+                    self.state.messages.unshift(data.record);
+                    self._renderMessages();
+                    self._setLoading(false);
+
+                    if (self.config.onMessageReceived) {
+                        self.config.onMessageReceived.call(self, aiResponse);
+                    }
+                })
+                .catch(function(error) {
+                    self._handleError(error);
+                    self._setLoading(false);
+                });
+        }, 1500);
+    };
+
+    /**
+     * Render messages
+     */
+    DelaChatInstance.prototype._renderMessages = function() {
+        var self = this;
+        var messagesHtml = this.state.messages.map(function(msg) {
+            return self._renderMessage(msg);
+        }).join('');
+
+        this.elements.messages.innerHTML = messagesHtml;
+        this._scrollToBottom();
+    };
+
+    /**
+     * Render single message
+     */
+    DelaChatInstance.prototype._renderMessage = function(msg) {
+        var isUser = msg.source === 0;
+        var avatarIcon = isUser ? '👤' : '🤖';
+        var messageClass = isUser ? 'delachat-message-user' : 'delachat-message-ai';
+
+        var actions = '';
+        if (!isUser) {
+            actions = `
+                <div class="delachat-message-actions">
+                    <button onclick="DelaChat._copyMessage('${msg.historyId}')" class="delachat-btn-action" title="Copy">
+                        📋 Copy
+                    </button>
+                    <button onclick="DelaChat._regenerate('${msg.historyId}')" class="delachat-btn-action" title="Regenerate">
+                        🔄 Regenerate
+                    </button>
+                </div>
+            `;
+        }
+
+        return `
+            <div class="delachat-message ${messageClass}" data-id="${msg.historyId}">
+                <div class="delachat-avatar">
+                    <span>${avatarIcon}</span>
+                </div>
+                <div class="delachat-message-content">
+                    <div class="delachat-message-bubble">
+                        ${this._escapeHtml(msg.message)}
+                    </div>
+                    ${actions}
+                </div>
+            </div>
+        `;
+    };
+
+    /**
+     * API Request helper
+     */
+    DelaChatInstance.prototype._apiRequest = function(method, endpoint, data) {
+        var self = this;
+        var url = this.config.apiUrl + endpoint;
+
+        return new Promise(function(resolve, reject) {
+            var xhr = new XMLHttpRequest();
+            xhr.open(method, url);
+            xhr.setRequestHeader('Content-Type', 'application/json');
+            xhr.setRequestHeader('X-SessionUid', self.config.sessionUid);
+            xhr.setRequestHeader('X-Datasource', self.config.datasource);
+            xhr.setRequestHeader('X-ProductId', self.config.productId.toString());
+            xhr.setRequestHeader('X-RequestVerificationToken', self.config.token);
+
+            xhr.onload = function() {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    try {
+                        var response = JSON.parse(xhr.responseText);
+                        resolve(response);
+                    } catch (e) {
+                        reject(new Error('Invalid JSON response'));
+                    }
+                } else if (xhr.status === 401) {
+                    reject(new Error('Unauthorized: Session expired or invalid token'));
+                } else {
+                    reject(new Error('Request failed: ' + xhr.status));
+                }
+            };
+
+            xhr.onerror = function() {
+                reject(new Error('Network error'));
+            };
+
+            xhr.send(data ? JSON.stringify(data) : null);
+        });
+    };
+
+    /**
+     * Set loading state
+     */
+    DelaChatInstance.prototype._setLoading = function(isLoading) {
+        this.state.isLoading = isLoading;
+        this.elements.loading.style.display = isLoading ? 'flex' : 'none';
+        this.elements.input.disabled = isLoading;
+        this.elements.btnSend.disabled = isLoading;
+    };
+
+    /**
+     * Handle error
+     */
+    DelaChatInstance.prototype._handleError = function(error) {
+        this.state.error = error.message;
+        this.elements.error.textContent = error.message;
+        this.elements.error.style.display = 'block';
+
+        if (this.config.onError) {
+            this.config.onError.call(this, error);
+        }
+
+        // Auto-hide error after 5 seconds
+        var self = this;
+        setTimeout(function() {
+            self.elements.error.style.display = 'none';
+        }, 5000);
+    };
+
+    /**
+     * Hide welcome message
+     */
+    DelaChatInstance.prototype._hideWelcome = function() {
+        if (this.elements.welcome) {
+            this.elements.welcome.style.display = 'none';
+        }
+    };
+
+    /**
+     * Scroll to bottom
+     */
+    DelaChatInstance.prototype._scrollToBottom = function() {
+        this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
+    };
+
+    /**
+     * Escape HTML
+     */
+    DelaChatInstance.prototype._escapeHtml = function(text) {
+        var div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML.replace(/\n/g, '<br>');
+    };
+
+    /**
+     * Public API Methods
+     */
+
+    DelaChatInstance.prototype.open = function() {
+        this.state.isOpen = true;
+        this.elements.window.style.display = 'flex';
+    };
+
+    DelaChatInstance.prototype.close = function() {
+        this.state.isOpen = false;
+        this.elements.window.style.display = 'none';
+
+        if (this.config.onClose) {
+            this.config.onClose.call(this);
+        }
+    };
+
+    DelaChatInstance.prototype.toggle = function() {
+        if (this.state.isOpen) {
+            this.close();
+        } else {
+            this.open();
+        }
+    };
+
+    DelaChatInstance.prototype.clearHistory = function() {
+        this.state.messages = [];
+        this._renderMessages();
+        this.elements.welcome.style.display = 'block';
+    };
+
+    DelaChatInstance.prototype.getMessages = function() {
+        return this.state.messages.slice();
+    };
+
+    DelaChatInstance.prototype.isOpen = function() {
+        return this.state.isOpen;
+    };
+
+    DelaChatInstance.prototype.getConfig = function() {
+        return Object.assign({}, this.config);
+    };
+
+    DelaChatInstance.prototype.updateConfig = function(newConfig) {
+        Object.assign(this.config, newConfig);
+    };
+
+    DelaChatInstance.prototype.destroy = function() {
+        this.container.innerHTML = '';
+        this.state = null;
+        this.config = null;
+        this.elements = null;
+    };
+
+    /**
+     * Global DelaChat object
+     */
+    var DelaChat = {
+        version: VERSION,
+        instances: [],
+
+        /**
+         * Create new chat instance
+         */
+        create: function(selector, config) {
+            var container = typeof selector === 'string'
+                ? document.querySelector(selector)
+                : selector;
+
+            if (!container) {
+                throw new Error('Container not found: ' + selector);
+            }
+
+            var instance = new DelaChatInstance(container, config);
+            this.instances.push(instance);
+            return instance;
+        },
+
+        /**
+         * Helper methods for global actions
+         */
+        _copyMessage: function(messageId) {
+            // Find message in all instances
+            for (var i = 0; i < this.instances.length; i++) {
+                var msg = this.instances[i].state.messages.find(function(m) {
+                    return m.historyId === messageId;
+                });
+
+                if (msg) {
+                    if (navigator.clipboard) {
+                        navigator.clipboard.writeText(msg.message);
+                        alert('Message copied to clipboard');
+                    }
+                    break;
+                }
+            }
+        },
+
+        _regenerate: function(messageId) {
+            alert('Regenerate feature - implement AI regeneration here');
+        }
+    };
+
+    // Export to global scope
+    window.DelaChat = DelaChat;
+
+})(window);