test-chat-component-per 1.0.1

package/src/delachat-webcomponent.js

@@ -0,0 +1,683 @@
+/**
+ * DelaChat Web Component
+ * A standards-based custom element for chat functionality
+ *
+ * Usage:
+ * <dela-chat
+ *     api-url="https://localhost:5001"
+ *     session-uid="your-session"
+ *     datasource="EPMSCA"
+ *     product-id="200"
+ *     token="your-token">
+ * </dela-chat>
+ */
+
+class DelaChatComponent extends HTMLElement {
+    constructor() {
+        super();
+
+        // Attach shadow DOM for style encapsulation
+        this.attachShadow({ mode: 'open' });
+
+        // State
+        this.state = {
+            messages: [],
+            isLoading: false,
+            isOpen: true,
+            error: null
+        };
+    }
+
+    // Observed attributes (auto-updates when changed)
+    static get observedAttributes() {
+        return ['api-url', 'session-uid', 'datasource', 'product-id', 'token', 'theme', 'height', 'width'];
+    }
+
+    // Called when element is added to DOM
+    connectedCallback() {
+        this.render();
+        this.attachEventListeners();
+        this.loadHistory();
+
+        // Emit ready event
+        this.dispatchEvent(new CustomEvent('ready', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    // Called when attributes change
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this.shadowRoot.innerHTML) {
+            this.render();
+        }
+    }
+
+    // Get configuration from attributes
+    get config() {
+        return {
+            apiUrl: this.getAttribute('api-url'),
+            sessionUid: this.getAttribute('session-uid'),
+            datasource: this.getAttribute('datasource'),
+            productId: parseInt(this.getAttribute('product-id')),
+            token: this.getAttribute('token'),
+            theme: this.getAttribute('theme') || 'light',
+            height: this.getAttribute('height') || '600px',
+            width: this.getAttribute('width') || '100%'
+        };
+    }
+
+    // Render component
+    render() {
+        const config = this.config;
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                ${this.getStyles()}
+            </style>
+
+            <div class="chat-window" data-theme="${config.theme}" style="height: ${config.height}; width: ${config.width};">
+                <!-- Header -->
+                <div class="chat-header">
+                    <h2 class="chat-title">Ask Dela</h2>
+                    <div class="chat-header-buttons">
+                        <button class="btn-icon" data-action="disclaimer" title="Disclaimer">ℹ</button>
+                        <button class="btn-icon" data-action="new-chat" title="New Chat">＋</button>
+                        <button class="btn-icon" data-action="help" title="Help">?</button>
+                        <button class="btn-icon" data-action="close" title="Close">✕</button>
+                    </div>
+                </div>
+
+                <!-- Disclaimer -->
+                <div class="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="error" style="display: none;"></div>
+
+                <!-- Messages area -->
+                <div class="messages">
+                    <div class="welcome">
+                        <div class="ai-avatar-large">🤖</div>
+                        <p>Hello! I'm Dela, your AI assistant. How can I help you today?</p>
+                    </div>
+                </div>
+
+                <!-- Loading indicator -->
+                <div class="loading" style="display: none;">
+                    <div class="loading-dots">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <span>Dela is thinking...</span>
+                </div>
+
+                <!-- Input area -->
+                <div class="input-container">
+                    <div class="input-wrapper">
+                        <textarea class="input" placeholder="Type your message..." rows="1"></textarea>
+                        <button class="btn-send" data-action="send" title="Send message">➤</button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    // Attach event listeners
+    attachEventListeners() {
+        const shadow = this.shadowRoot;
+        const input = shadow.querySelector('.input');
+        const btnSend = shadow.querySelector('[data-action="send"]');
+        const btnClose = shadow.querySelector('[data-action="close"]');
+        const btnDisclaimer = shadow.querySelector('[data-action="disclaimer"]');
+        const btnNewChat = shadow.querySelector('[data-action="new-chat"]');
+        const btnHelp = shadow.querySelector('[data-action="help"]');
+
+        // Send button
+        btnSend.addEventListener('click', () => this.handleSend());
+
+        // Enter key
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSend();
+            }
+        });
+
+        // Auto-resize textarea
+        input.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+
+        // Close button
+        btnClose.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+            this.style.display = 'none';
+        });
+
+        // Disclaimer toggle
+        btnDisclaimer.addEventListener('click', () => {
+            const disclaimer = shadow.querySelector('.disclaimer');
+            disclaimer.style.display = disclaimer.style.display === 'none' ? 'block' : 'none';
+        });
+
+        // New chat
+        btnNewChat.addEventListener('click', () => {
+            if (confirm('Start a new conversation? This will clear the current chat.')) {
+                this.clearHistory();
+            }
+        });
+
+        // Help
+        btnHelp.addEventListener('click', () => {
+            alert('DelaChat Help\n\nType your question and press Enter or click Send.');
+        });
+    }
+
+    // Handle send message
+    handleSend() {
+        const input = this.shadowRoot.querySelector('.input');
+        const message = input.value.trim();
+
+        if (!message || this.state.isLoading) return;
+
+        this.sendMessage(message);
+        input.value = '';
+        input.style.height = 'auto';
+    }
+
+    // Load chat history
+    async loadHistory() {
+        this.setLoading(true);
+
+        try {
+            const data = await this.apiRequest('GET', '/delachat/history?limit=50&offset=0');
+            this.state.messages = data.records || [];
+            this.renderMessages();
+        } catch (error) {
+            this.handleError(error);
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
+    // Send message
+    async sendMessage(message) {
+        this.setLoading(true);
+        this.hideWelcome();
+
+        // Add to UI immediately
+        const tempMsg = {
+            historyId: 'temp-' + Date.now(),
+            message: message,
+            source: 0,
+            created: new Date().toISOString(),
+            userId: this.config.userName || 'User',
+            isUserMessage: true
+        };
+
+        this.state.messages.unshift(tempMsg);
+        this.renderMessages();
+
+        try {
+            // Send to API
+            const data = await this.apiRequest('POST', '/delachat/history', {
+                message: message,
+                source: 0,
+                productUid: this.config.productId
+            });
+
+            // Replace temp with real message
+            this.state.messages[0] = data.record;
+            this.renderMessages();
+
+            // Emit event
+            this.dispatchEvent(new CustomEvent('message-sent', {
+                bubbles: true,
+                composed: true,
+                detail: { message }
+            }));
+
+            // Simulate AI response
+            this.simulateAIResponse(message);
+
+        } catch (error) {
+            this.handleError(error);
+            this.setLoading(false);
+        }
+    }
+
+    // Simulate AI response (replace with real AI integration)
+    async simulateAIResponse(userMessage) {
+        setTimeout(async () => {
+            const aiResponse = `I received your message: "${userMessage}". This is a simulated response.`;
+
+            try {
+                const data = await this.apiRequest('POST', '/delachat/history', {
+                    message: aiResponse,
+                    source: 1,
+                    productUid: this.config.productId
+                });
+
+                this.state.messages.unshift(data.record);
+                this.renderMessages();
+                this.setLoading(false);
+
+                // Emit event
+                this.dispatchEvent(new CustomEvent('message-received', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { message: aiResponse }
+                }));
+
+            } catch (error) {
+                this.handleError(error);
+                this.setLoading(false);
+            }
+        }, 1500);
+    }
+
+    // Render messages
+    renderMessages() {
+        const messagesContainer = this.shadowRoot.querySelector('.messages');
+        const messagesHtml = this.state.messages.map(msg => this.renderMessage(msg)).join('');
+        messagesContainer.innerHTML = messagesHtml;
+        this.scrollToBottom();
+    }
+
+    // Render single message
+    renderMessage(msg) {
+        const isUser = msg.source === 0;
+        const avatarIcon = isUser ? '👤' : '🤖';
+        const messageClass = isUser ? 'message-user' : 'message-ai';
+
+        const actions = !isUser ? `
+            <div class="message-actions">
+                <button onclick="this.getRootNode().host.copyMessage('${msg.historyId}')" class="btn-action">
+                    📋 Copy
+                </button>
+            </div>
+        ` : '';
+
+        return `
+            <div class="message ${messageClass}" data-id="${msg.historyId}">
+                <div class="avatar">${avatarIcon}</div>
+                <div class="message-content">
+                    <div class="message-bubble">${this.escapeHtml(msg.message)}</div>
+                    ${actions}
+                </div>
+            </div>
+        `;
+    }
+
+    // Public methods
+    copyMessage(messageId) {
+        const msg = this.state.messages.find(m => m.historyId === messageId);
+        if (msg && navigator.clipboard) {
+            navigator.clipboard.writeText(msg.message);
+            alert('Message copied!');
+        }
+    }
+
+    clearHistory() {
+        this.state.messages = [];
+        this.renderMessages();
+        this.shadowRoot.querySelector('.welcome').style.display = 'block';
+    }
+
+    open() {
+        this.style.display = 'block';
+    }
+
+    close() {
+        this.style.display = 'none';
+    }
+
+    // Utility methods
+    async apiRequest(method, endpoint, data = null) {
+        const config = this.config;
+        const url = config.apiUrl + endpoint;
+
+        const response = await fetch(url, {
+            method,
+            headers: {
+                'Content-Type': 'application/json',
+                'X-SessionUid': config.sessionUid,
+                'X-Datasource': config.datasource,
+                'X-ProductId': config.productId.toString(),
+                'X-RequestVerificationToken': config.token
+            },
+            body: data ? JSON.stringify(data) : null
+        });
+
+        if (!response.ok) {
+            if (response.status === 401) {
+                throw new Error('Unauthorized: Session expired or invalid token');
+            }
+            throw new Error(`Request failed: ${response.status}`);
+        }
+
+        return response.json();
+    }
+
+    setLoading(isLoading) {
+        this.state.isLoading = isLoading;
+        const loading = this.shadowRoot.querySelector('.loading');
+        const input = this.shadowRoot.querySelector('.input');
+        const btnSend = this.shadowRoot.querySelector('[data-action="send"]');
+
+        loading.style.display = isLoading ? 'flex' : 'none';
+        input.disabled = isLoading;
+        btnSend.disabled = isLoading;
+    }
+
+    handleError(error) {
+        this.state.error = error.message;
+        const errorEl = this.shadowRoot.querySelector('.error');
+        errorEl.textContent = error.message;
+        errorEl.style.display = 'block';
+
+        // Emit error event
+        this.dispatchEvent(new CustomEvent('error', {
+            bubbles: true,
+            composed: true,
+            detail: { error }
+        }));
+
+        // Auto-hide after 5 seconds
+        setTimeout(() => {
+            errorEl.style.display = 'none';
+        }, 5000);
+    }
+
+    hideWelcome() {
+        const welcome = this.shadowRoot.querySelector('.welcome');
+        if (welcome) welcome.style.display = 'none';
+    }
+
+    scrollToBottom() {
+        const messages = this.shadowRoot.querySelector('.messages');
+        messages.scrollTop = messages.scrollHeight;
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML.replace(/\n/g, '<br>');
+    }
+
+    // Styles (inline for encapsulation)
+    getStyles() {
+        return `
+            :host {
+                display: block;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+                font-size: 14px;
+                color: #1F2937;
+            }
+
+            .chat-window {
+                display: flex;
+                flex-direction: column;
+                background: #FFFFFF;
+                border-radius: 12px;
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                overflow: hidden;
+            }
+
+            .chat-header {
+                background: #7C3AED;
+                color: white;
+                padding: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .chat-title {
+                font-size: 18px;
+                font-weight: 600;
+                margin: 0;
+            }
+
+            .chat-header-buttons {
+                display: flex;
+                gap: 8px;
+            }
+
+            .btn-icon {
+                background: transparent;
+                border: none;
+                color: white;
+                cursor: pointer;
+                padding: 6px;
+                border-radius: 6px;
+                width: 32px;
+                height: 32px;
+                font-size: 16px;
+            }
+
+            .btn-icon:hover {
+                background: #6D28D9;
+            }
+
+            .disclaimer {
+                background: #FEF3C7;
+                border-bottom: 1px solid #F59E0B;
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #92400E;
+            }
+
+            .error {
+                background: #FEE2E2;
+                border-bottom: 1px solid #EF4444;
+                padding: 12px 16px;
+                font-size: 13px;
+                color: #991B1B;
+            }
+
+            .messages {
+                flex: 1;
+                overflow-y: auto;
+                padding: 16px;
+                display: flex;
+                flex-direction: column-reverse;
+                gap: 16px;
+            }
+
+            .welcome {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 40px 20px;
+                text-align: center;
+                color: #6B7280;
+            }
+
+            .ai-avatar-large {
+                width: 64px;
+                height: 64px;
+                background: #7C3AED;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 32px;
+                margin-bottom: 16px;
+            }
+
+            .message {
+                display: flex;
+                gap: 12px;
+                align-items: flex-start;
+            }
+
+            .message-user {
+                flex-direction: row-reverse;
+            }
+
+            .avatar {
+                width: 32px;
+                height: 32px;
+                background: #6B7280;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 16px;
+                flex-shrink: 0;
+            }
+
+            .message-user .avatar {
+                background: #7C3AED;
+            }
+
+            .message-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+                max-width: 75%;
+            }
+
+            .message-user .message-content {
+                align-items: flex-end;
+            }
+
+            .message-bubble {
+                padding: 12px 16px;
+                border-radius: 12px;
+                line-height: 1.5;
+                word-wrap: break-word;
+            }
+
+            .message-ai .message-bubble {
+                background: #F3F4F6;
+                border-bottom-left-radius: 4px;
+            }
+
+            .message-user .message-bubble {
+                background: #7C3AED;
+                color: white;
+                border-bottom-right-radius: 4px;
+            }
+
+            .message-actions {
+                display: flex;
+                gap: 8px;
+            }
+
+            .btn-action {
+                background: transparent;
+                border: none;
+                color: #6B7280;
+                cursor: pointer;
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-size: 12px;
+            }
+
+            .btn-action:hover {
+                background: #F9FAFB;
+                color: #7C3AED;
+            }
+
+            .loading {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+                padding: 12px;
+                color: #6B7280;
+                font-size: 13px;
+            }
+
+            .loading-dots {
+                display: flex;
+                gap: 4px;
+            }
+
+            .loading-dots span {
+                width: 6px;
+                height: 6px;
+                background: #7C3AED;
+                border-radius: 50%;
+                animation: bounce 1.4s infinite ease-in-out both;
+            }
+
+            .loading-dots span:nth-child(2) {
+                animation-delay: -0.16s;
+            }
+
+            .loading-dots span:nth-child(3) {
+                animation-delay: -0.32s;
+            }
+
+            @keyframes bounce {
+                0%, 80%, 100% { transform: scale(0); }
+                40% { transform: scale(1); }
+            }
+
+            .input-container {
+                padding: 16px;
+                background: #F9FAFB;
+                border-top: 1px solid #E5E7EB;
+            }
+
+            .input-wrapper {
+                display: flex;
+                gap: 8px;
+                align-items: flex-end;
+            }
+
+            .input {
+                flex: 1;
+                padding: 10px 12px;
+                border: 1px solid #E5E7EB;
+                border-radius: 8px;
+                font-family: inherit;
+                font-size: 14px;
+                resize: none;
+                max-height: 120px;
+            }
+
+            .input:focus {
+                outline: none;
+                border-color: #7C3AED;
+                box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+            }
+
+            .input:disabled {
+                background: #F9FAFB;
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+
+            .btn-send {
+                background: #7C3AED;
+                color: white;
+                border: none;
+                border-radius: 8px;
+                padding: 10px 16px;
+                cursor: pointer;
+                font-size: 16px;
+            }
+
+            .btn-send:hover:not(:disabled) {
+                background: #6D28D9;
+            }
+
+            .btn-send:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+        `;
+    }
+}
+
+// Define the custom element
+customElements.define('dela-chat', DelaChatComponent);