acecoderz-chat-ui 1.0.0

package/dist/adapters/solid/index.d.ts

@@ -0,0 +1,3 @@
+export { createChat } from './createChat';
+export type { CreateChatReturn } from './createChat';
+//# sourceMappingURL=index.d.ts.map

package/dist/adapters/solid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../adapters/solid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/adapters/solid/index.js

@@ -0,0 +1 @@
+export { createChat } from './createChat';

package/dist/adapters/vanilla/index.d.ts

@@ -0,0 +1,31 @@
+import { ChatEngine } from '../../core/src/ChatEngine';
+import type { ChatConfig, Message, ChatTheme } from '../../core/src/types';
+export interface ChatUIOptions {
+    config: ChatConfig;
+    theme?: ChatTheme;
+    container: HTMLElement | string;
+    placeholder?: string;
+    showTimestamp?: boolean;
+    showAvatar?: boolean;
+    userAvatar?: string;
+    assistantAvatar?: string;
+    maxHeight?: string;
+    disabled?: boolean;
+    autoScroll?: boolean;
+    enableMarkdown?: boolean;
+    showClearButton?: boolean;
+    emptyStateMessage?: string;
+    loadingMessage?: string;
+    customMessageRenderer?: (message: Message) => string;
+    onInit?: (instance: ChatUIInstance) => void;
+}
+export interface ChatUIInstance {
+    engine: ChatEngine;
+    render: () => void;
+    destroy: () => void;
+    clear: () => void;
+    scrollToBottom: () => void;
+    getContainer: () => HTMLElement;
+}
+export declare function createChatUI(options: ChatUIOptions): ChatUIInstance;
+//# sourceMappingURL=index.d.ts.map

package/dist/adapters/vanilla/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../adapters/vanilla/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IACrD,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,MAAM,WAAW,CAAC;CACjC;AA2DD,wBAAgB,YAAY,CAAC,OAAO,EAAE,aAAa,GAAG,cAAc,CAyUnE"}

package/dist/adapters/vanilla/index.js

@@ -0,0 +1,346 @@
+import { ChatEngine } from '../../core/src/ChatEngine';
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+/**
+ * Simple markdown-like text formatting (basic support)
+ */
+function formatText(text, enableMarkdown) {
+    if (!enableMarkdown) {
+        return escapeHtml(text);
+    }
+    // Basic markdown support
+    let formatted = escapeHtml(text);
+    // Bold: **text** or __text__
+    formatted = formatted.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    formatted = formatted.replace(/__(.+?)__/g, '<strong>$1</strong>');
+    // Italic: *text* or _text_
+    formatted = formatted.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    formatted = formatted.replace(/_(.+?)_/g, '<em>$1</em>');
+    // Code: `code`
+    formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');
+    // Links: [text](url)
+    formatted = formatted.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    // Line breaks
+    formatted = formatted.replace(/\n/g, '<br>');
+    return formatted;
+}
+/**
+ * Get container element from selector or element
+ */
+function getContainerElement(container) {
+    if (typeof container === 'string') {
+        const element = document.querySelector(container);
+        if (!element) {
+            throw new Error(`Chatbot container not found: ${container}`);
+        }
+        if (!(element instanceof HTMLElement)) {
+            throw new Error(`Chatbot container is not an HTMLElement: ${container}`);
+        }
+        return element;
+    }
+    return container;
+}
+export function createChatUI(options) {
+    const { config, theme = {}, container, placeholder = 'Type your message...', showTimestamp = true, showAvatar = true, userAvatar, assistantAvatar, maxHeight = '600px', disabled = false, autoScroll = true, enableMarkdown = true, showClearButton = true, emptyStateMessage = 'Start a conversation...', loadingMessage = 'Thinking...', customMessageRenderer, onInit, } = options;
+    // Get container element
+    const containerElement = getContainerElement(container);
+    const engine = new ChatEngine(config);
+    // Store references for cleanup
+    let messagesContainer = null;
+    let inputElement = null;
+    let formElement = null;
+    let sendButtonElement = null;
+    let clearButtonElement = null;
+    let isUpdatingInputProgrammatically = false; // Flag to prevent input event loop
+    // Apply CSS variables for theming
+    const applyTheme = () => {
+        const root = containerElement;
+        root.style.setProperty('--chat-primary-color', theme.primaryColor || '#3b82f6');
+        root.style.setProperty('--chat-secondary-color', theme.secondaryColor || '#64748b');
+        root.style.setProperty('--chat-background-color', theme.backgroundColor || '#ffffff');
+        root.style.setProperty('--chat-text-color', theme.textColor || '#1e293b');
+        root.style.setProperty('--chat-user-message-color', theme.userMessageColor || '#3b82f6');
+        root.style.setProperty('--chat-assistant-message-color', theme.assistantMessageColor || '#f1f5f9');
+        root.style.setProperty('--chat-input-background-color', theme.inputBackgroundColor || '#f8fafc');
+        root.style.setProperty('--chat-input-text-color', theme.inputTextColor || '#1e293b');
+        root.style.setProperty('--chat-border-radius', theme.borderRadius || '0.5rem');
+        root.style.setProperty('--chat-font-family', theme.fontFamily || 'system-ui, sans-serif');
+        root.style.setProperty('--chat-font-size', theme.fontSize || '1rem');
+        root.style.setProperty('--chat-max-height', maxHeight);
+    };
+    // Scroll to bottom helper
+    const scrollToBottom = () => {
+        if (messagesContainer && autoScroll) {
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+    };
+    const formatTimestamp = (date) => {
+        return new Intl.DateTimeFormat('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+        }).format(date);
+    };
+    const renderAvatar = (role) => {
+        if (!showAvatar)
+            return '';
+        const avatar = role === 'user' ? userAvatar : assistantAvatar;
+        if (avatar) {
+            return `<div class="chat-avatar"><img src="${escapeHtml(avatar)}" alt="${role}" /></div>`;
+        }
+        return `<div class="chat-avatar">${role === 'user' ? 'U' : 'A'}</div>`;
+    };
+    const renderMessage = (message) => {
+        // Use custom renderer if provided
+        if (customMessageRenderer) {
+            return customMessageRenderer(message);
+        }
+        const isUser = message.role === 'user';
+        const isSystem = message.role === 'system';
+        const role = isUser ? 'user' : 'assistant';
+        const avatarHtml = !isSystem ? renderAvatar(role) : '';
+        const messageContent = enableMarkdown
+            ? `<div class="chat-markdown">${formatText(message.content, enableMarkdown)}</div>`
+            : `<div class="chat-message-text">${formatText(message.content, false)}</div>`;
+        return `
+      <div class="chat-message ${isUser ? 'chat-message-user' : isSystem ? 'chat-message-system' : 'chat-message-assistant'}" data-message-id="${escapeHtml(message.id)}">
+        ${!isUser && !isSystem ? avatarHtml : ''}
+        <div class="chat-message-content ${isUser ? 'chat-message-content-user' : isSystem ? 'chat-message-content-system' : 'chat-message-content-assistant'}">
+          ${messageContent}
+          ${showTimestamp ? `<div class="chat-message-timestamp">${formatTimestamp(message.timestamp)}</div>` : ''}
+        </div>
+        ${isUser ? avatarHtml : ''}
+      </div>
+    `;
+    };
+    const render = () => {
+        const messages = engine.getMessages();
+        const input = engine.getInput();
+        const isLoading = engine.getIsLoading();
+        const error = engine.getError();
+        // Preserve input focus and cursor position before re-render
+        const wasInputFocused = inputElement && document.activeElement === inputElement;
+        const inputCursorPosition = inputElement ? inputElement.selectionStart || 0 : 0;
+        applyTheme();
+        containerElement.className = `chat-container ${containerElement.className || ''}`.trim();
+        containerElement.setAttribute('data-chat-ui', 'true');
+        containerElement.innerHTML = `
+      <div class="chat-messages-container">
+        ${messages.length === 0 ? `<div class="chat-empty-state">${escapeHtml(emptyStateMessage)}</div>` : ''}
+        ${messages.map(renderMessage).join('')}
+        ${isLoading ? `
+          <div class="chat-message chat-message-assistant chat-message-loading">
+            ${renderAvatar('assistant')}
+            <div class="chat-message-content chat-message-content-assistant">
+              <div class="chat-message-text">${escapeHtml(loadingMessage)}</div>
+            </div>
+          </div>
+        ` : ''}
+      </div>
+      ${error ? `<div class="chat-error">
+        <div class="chat-error-message">Error: ${escapeHtml(error.message)}</div>
+        <button class="chat-retry-button" type="button">Retry</button>
+      </div>` : ''}
+      ${showClearButton && messages.length > 0 ? `
+        <div class="chat-actions">
+          <button class="chat-clear-button" type="button" title="Clear conversation">Clear</button>
+        </div>
+      ` : ''}
+      <div class="chat-input-container">
+        <form class="chat-input-form">
+          <input 
+            type="text" 
+            class="chat-input" 
+            value="${escapeHtml(input)}" 
+            placeholder="${escapeHtml(placeholder)}" 
+            ${disabled || isLoading ? 'disabled' : ''}
+            aria-label="Chat input"
+          />
+          <button 
+            type="submit" 
+            class="chat-send-button"
+            ${disabled || isLoading || !input.trim() ? 'disabled' : ''}
+            aria-label="Send message"
+          >
+            Send
+          </button>
+        </form>
+      </div>
+    `;
+        // Store references
+        messagesContainer = containerElement.querySelector('.chat-messages-container');
+        inputElement = containerElement.querySelector('.chat-input');
+        formElement = containerElement.querySelector('.chat-input-form');
+        sendButtonElement = containerElement.querySelector('.chat-send-button');
+        clearButtonElement = containerElement.querySelector('.chat-clear-button');
+        const retryButton = containerElement.querySelector('.chat-retry-button');
+        // Restore input focus and cursor position if it was focused before re-render
+        if (wasInputFocused && inputElement) {
+            requestAnimationFrame(() => {
+                if (inputElement) {
+                    inputElement.focus();
+                    const newCursorPosition = Math.min(inputCursorPosition, inputElement.value.length);
+                    inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
+                }
+            });
+        }
+        // Attach event listeners
+        if (formElement) {
+            formElement.addEventListener('submit', (e) => {
+                e.preventDefault();
+                if (!disabled && !isLoading && input.trim()) {
+                    engine.sendMessage();
+                }
+            });
+        }
+        if (inputElement) {
+            // Handle input changes
+            inputElement.addEventListener('input', (e) => {
+                // Skip if we're programmatically updating the input
+                if (isUpdatingInputProgrammatically) {
+                    return;
+                }
+                const target = e.target;
+                engine.setInput(target.value);
+            });
+            // Keyboard shortcuts: Enter to send, Shift+Enter for newline
+            inputElement.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    if (!disabled && !isLoading && input.trim()) {
+                        engine.sendMessage();
+                    }
+                }
+                // Shift+Enter allows default behavior (newline if textarea, ignored if input)
+            });
+        }
+        // Clear button handler
+        if (clearButtonElement) {
+            clearButtonElement.addEventListener('click', () => {
+                if (confirm('Are you sure you want to clear the conversation?')) {
+                    engine.clearMessages();
+                }
+            });
+        }
+        // Retry button handler
+        if (retryButton) {
+            retryButton.addEventListener('click', () => {
+                engine.retryLastMessage();
+            });
+        }
+        // Auto-scroll to bottom after render
+        // Use setTimeout to ensure DOM is updated
+        setTimeout(() => {
+            scrollToBottom();
+        }, 0);
+    };
+    // Subscribe to engine events
+    engine.on('messagesChange', () => {
+        render();
+        // Scroll after messages change
+        setTimeout(() => {
+            scrollToBottom();
+        }, 100);
+    });
+    // Helper function to update send button state
+    const updateSendButtonState = () => {
+        if (sendButtonElement) {
+            const input = engine.getInput();
+            const isLoading = engine.getIsLoading();
+            const shouldDisable = disabled || isLoading || !input.trim();
+            sendButtonElement.disabled = shouldDisable;
+        }
+    };
+    engine.on('inputChange', (value) => {
+        // Only update input value without full re-render to preserve focus
+        if (inputElement && inputElement.isConnected) {
+            const wasFocused = document.activeElement === inputElement;
+            const cursorPosition = inputElement.selectionStart || 0;
+            // Set flag to prevent input event from firing
+            isUpdatingInputProgrammatically = true;
+            inputElement.value = value || '';
+            isUpdatingInputProgrammatically = false;
+            // Update send button state
+            updateSendButtonState();
+            // Restore focus and cursor position if input was focused
+            if (wasFocused) {
+                // Use requestAnimationFrame to ensure DOM is ready
+                requestAnimationFrame(() => {
+                    if (inputElement) {
+                        inputElement.focus();
+                        // Restore cursor position, accounting for value length changes
+                        const newCursorPosition = Math.min(cursorPosition, inputElement.value.length);
+                        inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
+                    }
+                });
+            }
+        }
+        else {
+            // If input element doesn't exist yet, do a full render
+            render();
+        }
+    });
+    engine.on('loadingChange', () => {
+        // Update send button state without full re-render if possible
+        updateSendButtonState();
+        // Still do full render for loading indicator
+        render();
+        setTimeout(() => {
+            scrollToBottom();
+        }, 100);
+    });
+    engine.on('error', render);
+    // Initial render
+    render();
+    const instance = {
+        engine,
+        render,
+        destroy: () => {
+            engine.destroy();
+            containerElement.innerHTML = '';
+            // Clear references
+            messagesContainer = null;
+            inputElement = null;
+            formElement = null;
+            sendButtonElement = null;
+            clearButtonElement = null;
+        },
+        clear: () => {
+            engine.clearMessages();
+        },
+        scrollToBottom,
+        getContainer: () => containerElement,
+    };
+    // Call onInit callback if provided
+    if (onInit) {
+        onInit(instance);
+    }
+    return instance;
+}
+/**
+ * Global initialization helper for PHP/Laravel integration
+ * Usage: window.ChatbotUI.init('container-id', { apiUrl: '...' })
+ */
+if (typeof window !== 'undefined') {
+    window.ChatbotUI = {
+        create: createChatUI,
+        init: (containerId, options) => {
+            const container = typeof containerId === 'string'
+                ? document.getElementById(containerId) || document.querySelector(containerId)
+                : containerId;
+            if (!container) {
+                console.error(`Chatbot container not found: ${containerId}`);
+                return null;
+            }
+            return createChatUI({
+                container: container,
+                ...options,
+            });
+        },
+    };
+}

package/dist/browser/cdn-example.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chatbot UI - CDN Example</title>
+  
+  <!-- Include Chatbot UI CSS -->
+  <link rel="stylesheet" href="./chatbot-ui.css">
+  
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    
+    h1 {
+      margin-top: 0;
+      color: #1e293b;
+    }
+    
+    .info {
+      background: #f0f9ff;
+      border-left: 4px solid #3b82f6;
+      padding: 12px;
+      margin-bottom: 20px;
+      border-radius: 4px;
+    }
+    
+    .code-block {
+      background: #1e293b;
+      color: #f1f5f9;
+      padding: 16px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 16px 0;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 14px;
+    }
+    
+    #chatbot-container {
+      width: 100%;
+      height: 600px;
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🤖 Chatbot UI - CDN Example</h1>
+    
+    <div class="info">
+      <strong>📝 Usage:</strong> Include the chatbot-ui.css and chatbot-ui.min.js files in your HTML, 
+      then initialize the chatbot using <code>ChatbotUI.init()</code> or <code>ChatbotUI.create()</code>.
+    </div>
+    
+    <h3>📋 HTML Setup:</h3>
+    <div class="code-block">&lt;!-- Include CSS --&gt;
+&lt;link rel="stylesheet" href="https://cdn.example.com/chatbot-ui.css"&gt;
+
+&lt;!-- Include JavaScript --&gt;
+&lt;script src="https://cdn.example.com/chatbot-ui.min.js"&gt;&lt;/script&gt;
+
+&lt;!-- Container element --&gt;
+&lt;div id="chatbot-container"&gt;&lt;/div&gt;
+
+&lt;!-- Initialize --&gt;
+&lt;script&gt;
+  ChatbotUI.init('chatbot-container', {
+    config: {
+      apiUrl: 'http://localhost:3003/api',
+    },
+    theme: {
+      primaryColor: '#3b82f6',
+      userMessageColor: '#3b82f6',
+      assistantMessageColor: '#f1f5f9',
+    },
+    placeholder: 'Type your message...',
+    showTimestamp: true,
+    showAvatar: true,
+  });
+&lt;/script&gt;</div>
+    
+    <h3>🎨 Customization Example:</h3>
+    <div class="code-block">ChatbotUI.init('chatbot-container', {
+  config: {
+    apiUrl: 'https://your-api.com/api/chat',
+    // Optional: Add headers
+    headers: {
+      'Authorization': 'Bearer YOUR_TOKEN',
+    },
+  },
+  theme: {
+    primaryColor: '#8b5cf6',
+    userMessageColor: '#8b5cf6',
+    assistantMessageColor: '#f3e8ff',
+    backgroundColor: '#ffffff',
+    borderRadius: '12px',
+  },
+  placeholder: 'Ask me anything...',
+  showTimestamp: true,
+  showAvatar: true,
+  maxHeight: '600px',
+  enableMarkdown: true,
+  showClearButton: true,
+});</div>
+    
+    <h3>🎯 Advanced Usage:</h3>
+    <div class="code-block">// Using create() for more control
+const chatInstance = ChatbotUI.create({
+  container: document.getElementById('chatbot-container'),
+  config: {
+    apiUrl: 'https://your-api.com/api/chat',
+  },
+  theme: {
+    primaryColor: '#10b981',
+  },
+  onInit: (instance) => {
+    console.log('Chatbot initialized!', instance);
+    // Access the engine
+    instance.engine.on('messagesChange', () => {
+      console.log('Messages updated');
+    });
+  },
+});
+
+// Later, you can interact with it
+chatInstance.clear(); // Clear conversation
+chatInstance.scrollToBottom(); // Scroll to bottom
+chatInstance.destroy(); // Clean up</div>
+    
+    <hr style="margin: 30px 0; border: none; border-top: 1px solid #e2e8f0;">
+    
+    <h3>💬 Live Example:</h3>
+    <div id="chatbot-container"></div>
+  </div>
+  
+  <!-- Initialize the chatbot -->
+  <script>
+    // Wait for ChatbotUI to be available
+    if (typeof ChatbotUI !== 'undefined') {
+      ChatbotUI.init('chatbot-container', {
+        config: {
+          apiUrl: 'http://localhost:3003/api',
+        },
+        theme: {
+          primaryColor: '#3b82f6',
+          userMessageColor: '#3b82f6',
+          assistantMessageColor: '#f1f5f9',
+          borderRadius: '8px',
+        },
+        placeholder: 'Type your message...',
+        showTimestamp: true,
+        showAvatar: true,
+        maxHeight: '600px',
+        enableMarkdown: true,
+        showClearButton: true,
+      });
+    } else {
+      console.error('ChatbotUI not loaded. Make sure chatbot-ui.min.js is included.');
+    }
+  </script>
+</body>
+</html>