acecoderz-chat-ui 1.0.4 → 1.0.5

package/dist/adapters/react/ChatUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatUI.d.ts","sourceRoot":"","sources":["../../../adapters/react/ChatUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAuD3E,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC5B,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,QAAQ,EAAE,OAAO,CAAC;KACnB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgOxC,CAAC"}
+{"version":3,"file":"ChatUI.d.ts","sourceRoot":"","sources":["../../../adapters/react/ChatUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAuD3E,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC5B,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,QAAQ,EAAE,OAAO,CAAC;KACnB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsPxC,CAAC"}

package/dist/adapters/react/ChatUI.js

@@ -39,9 +39,24 @@ const MarkdownContent = ({ content }) => {
 };
 export const ChatUI = ({ config, theme = {}, className = '', placeholder = 'Type your message...', showTimestamp = true, showAvatar = true, userAvatar, assistantAvatar, maxHeight = '600px', disabled = false, initialGreeting, messagesContainerClassName = '', messageClassName = '', inputContainerClassName = '', inputClassName = '', buttonClassName = '', errorClassName = '', emptyStateClassName = '', customMessageRenderer, customInputRenderer, dataAttributes = {}, }) => {
     const { messages, input, isLoading, error, sendMessage, setInput, addMessage, } = useChat(config);
+    // Track if we've already added the initial greeting for the current initialGreeting value
+    const greetingAddedRef = React.useRef(null);
     // Add initial greeting message when component mounts
     React.useEffect(() => {
-        if (initialGreeting && messages.length === 0) {
+        if (!initialGreeting) {
+            greetingAddedRef.current = null;
+            return;
+        }
+        // Check if there's already a greeting message with the same content
+        const hasGreeting = messages.some(msg => msg.role === 'assistant' && msg.content === initialGreeting);
+        // Only add greeting if:
+        // 1. We haven't already added this specific greeting (tracked by ref)
+        // 2. There's no existing greeting message with the same content
+        // 3. Messages array is empty
+        if (greetingAddedRef.current !== initialGreeting &&
+            !hasGreeting &&
+            messages.length === 0) {
+            greetingAddedRef.current = initialGreeting;
             const greetingMessage = {
                 id: `greeting-${Date.now()}`,
                 content: initialGreeting,
@@ -50,7 +65,7 @@ export const ChatUI = ({ config, theme = {}, className = '', placeholder = 'Type
             };
             addMessage(greetingMessage);
         }
-    }, [initialGreeting, messages.length, addMessage]);
+    }, [initialGreeting, messages, addMessage]);
     const handleSubmit = (e) => {
         e.preventDefault();
         if (input.trim() && !isLoading && !disabled) {

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

@@ -18,6 +18,13 @@ export interface ChatUIOptions {
     loadingMessage?: string;
     customMessageRenderer?: (message: Message) => string;
     onInit?: (instance: ChatUIInstance) => void;
+    enableMessageActions?: boolean;
+    showCopyButton?: boolean;
+    showDeleteButton?: boolean;
+    showEditButton?: boolean;
+    onMessageCopy?: (message: Message) => void;
+    onMessageDelete?: (message: Message) => void;
+    onMessageEdit?: (message: Message, newContent: string) => void;
 }
 export interface ChatUIInstance {
     engine: ChatEngine;

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

@@ -1 +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"}
+{"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;IAE5C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE;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,CAwkBnE"}

package/dist/adapters/vanilla/index.js

@@ -47,7 +47,7 @@ function getContainerElement(container) {
     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;
+    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, enableMessageActions = false, showCopyButton = true, showDeleteButton = true, showEditButton = true, onMessageCopy, onMessageDelete, onMessageEdit, } = options;
     // Get container element
     const containerElement = getContainerElement(container);
     const engine = new ChatEngine(config);
@@ -58,6 +58,8 @@ export function createChatUI(options) {
     let sendButtonElement = null;
     let clearButtonElement = null;
     let isUpdatingInputProgrammatically = false; // Flag to prevent input event loop
+    // Store event handlers for proper cleanup
+    const eventHandlers = [];
     // Apply CSS variables for theming
     const applyTheme = () => {
         const root = containerElement;
@@ -107,12 +109,59 @@ export function createChatUI(options) {
         const messageContent = enableMarkdown
             ? `<div class="chat-markdown">${formatText(message.content, enableMarkdown)}</div>`
             : `<div class="chat-message-text">${formatText(message.content, false)}</div>`;
+        const messageId = escapeHtml(message.id);
+        const messageActions = enableMessageActions ? `
+      <div class="chat-message-actions" role="group" aria-label="Message actions">
+        ${showCopyButton ? `
+          <button 
+            class="chat-message-action chat-message-copy" 
+            type="button"
+            aria-label="Copy message"
+            data-message-id="${messageId}"
+            data-action="copy"
+            title="Copy message"
+          >
+            <span aria-hidden="true">📋</span>
+          </button>
+        ` : ''}
+        ${showDeleteButton ? `
+          <button 
+            class="chat-message-action chat-message-delete" 
+            type="button"
+            aria-label="Delete message"
+            data-message-id="${messageId}"
+            data-action="delete"
+            title="Delete message"
+          >
+            <span aria-hidden="true">🗑️</span>
+          </button>
+        ` : ''}
+        ${showEditButton && isUser && !isSystem ? `
+          <button 
+            class="chat-message-action chat-message-edit" 
+            type="button"
+            aria-label="Edit message"
+            data-message-id="${messageId}"
+            data-action="edit"
+            title="Edit message"
+          >
+            <span aria-hidden="true">✏️</span>
+          </button>
+        ` : ''}
+      </div>
+    ` : '';
         return `
-      <div class="chat-message ${isUser ? 'chat-message-user' : isSystem ? 'chat-message-system' : 'chat-message-assistant'}" data-message-id="${escapeHtml(message.id)}">
+      <div 
+        class="chat-message ${isUser ? 'chat-message-user' : isSystem ? 'chat-message-system' : 'chat-message-assistant'}" 
+        data-message-id="${messageId}"
+        role="article"
+        aria-label="${isUser ? 'Your message' : 'Assistant message'}"
+      >
         ${!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>` : ''}
+          ${showTimestamp ? `<div class="chat-message-timestamp" aria-label="Sent at ${formatTimestamp(message.timestamp)}">${formatTimestamp(message.timestamp)}</div>` : ''}
+          ${messageActions}
         </div>
         ${isUser ? avatarHtml : ''}
       </div>
@@ -129,15 +178,24 @@ export function createChatUI(options) {
         applyTheme();
         containerElement.className = `chat-container ${containerElement.className || ''}`.trim();
         containerElement.setAttribute('data-chat-ui', 'true');
+        containerElement.setAttribute('role', 'log');
+        containerElement.setAttribute('aria-label', 'Chat conversation');
+        containerElement.setAttribute('aria-live', 'polite');
+        containerElement.setAttribute('aria-atomic', 'false');
         containerElement.innerHTML = `
-      <div class="chat-messages-container">
+      <div class="chat-messages-container" role="log" aria-live="polite" aria-label="Chat messages">
         ${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">
+          <div class="chat-message chat-message-assistant chat-message-loading" role="status" aria-live="polite" aria-label="Loading response">
             ${renderAvatar('assistant')}
             <div class="chat-message-content chat-message-content-assistant">
-              <div class="chat-message-text">${escapeHtml(loadingMessage)}</div>
+              <div class="chat-message-text">
+                <span class="chat-loading-dots">
+                  <span></span><span></span><span></span>
+                </span>
+                <span class="chat-loading-text">${escapeHtml(loadingMessage)}</span>
+              </div>
             </div>
           </div>
         ` : ''}
@@ -152,7 +210,15 @@ export function createChatUI(options) {
         </div>
       ` : ''}
       <div class="chat-input-container">
-        <form class="chat-input-form">
+        <form 
+          class="chat-input-form" 
+          action="javascript:void(0)" 
+          method="post" 
+          novalidate
+          data-chat-form="true"
+          role="form"
+          aria-label="Chat input form"
+        >
           <input 
             type="text" 
             class="chat-input" 
@@ -189,50 +255,202 @@ export function createChatUI(options) {
                 }
             });
         }
-        // Attach event listeners
+        // Attach event listeners with proper cleanup tracking
         if (formElement) {
-            formElement.addEventListener('submit', (e) => {
-                e.preventDefault();
+            // Use capture phase to ensure preventDefault runs before any other handlers
+            // This prevents page reloads even if parent elements have submit handlers
+            const handleSubmit = (e) => {
+                const submitEvent = e;
+                submitEvent.preventDefault();
+                submitEvent.stopPropagation();
                 if (!disabled && !isLoading && input.trim()) {
                     engine.sendMessage();
                 }
-            });
+            };
+            // Add handler in capture phase (runs first) to prevent any page reloads
+            formElement.addEventListener('submit', handleSubmit, true);
+            eventHandlers.push({ element: formElement, event: 'submit', handler: handleSubmit, options: true });
+            // Also add in bubble phase as fallback
+            formElement.addEventListener('submit', handleSubmit, false);
+            eventHandlers.push({ element: formElement, event: 'submit', handler: handleSubmit, options: false });
         }
         if (inputElement) {
             // Handle input changes
-            inputElement.addEventListener('input', (e) => {
+            const handleInput = (e) => {
                 // Skip if we're programmatically updating the input
                 if (isUpdatingInputProgrammatically) {
                     return;
                 }
                 const target = e.target;
                 engine.setInput(target.value);
-            });
+            };
+            inputElement.addEventListener('input', handleInput);
+            eventHandlers.push({ element: inputElement, event: 'input', handler: handleInput });
             // Keyboard shortcuts: Enter to send, Shift+Enter for newline
-            inputElement.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
+            const handleKeydown = (e) => {
+                const keyboardEvent = e;
+                if (keyboardEvent.key === 'Enter' && !keyboardEvent.shiftKey) {
+                    keyboardEvent.preventDefault();
                     if (!disabled && !isLoading && input.trim()) {
                         engine.sendMessage();
                     }
                 }
                 // Shift+Enter allows default behavior (newline if textarea, ignored if input)
-            });
+            };
+            inputElement.addEventListener('keydown', handleKeydown);
+            eventHandlers.push({ element: inputElement, event: 'keydown', handler: handleKeydown });
         }
         // Clear button handler
         if (clearButtonElement) {
-            clearButtonElement.addEventListener('click', () => {
+            const handleClearClick = () => {
                 if (confirm('Are you sure you want to clear the conversation?')) {
                     engine.clearMessages();
                 }
-            });
+            };
+            clearButtonElement.addEventListener('click', handleClearClick);
+            eventHandlers.push({ element: clearButtonElement, event: 'click', handler: handleClearClick });
         }
         // Retry button handler
         if (retryButton) {
-            retryButton.addEventListener('click', () => {
+            const handleRetryClick = () => {
                 engine.retryLastMessage();
-            });
+            };
+            retryButton.addEventListener('click', handleRetryClick);
+            eventHandlers.push({ element: retryButton, event: 'click', handler: handleRetryClick });
+        }
+        // Message actions handlers (using event delegation)
+        if (enableMessageActions) {
+            const handleMessageAction = async (e) => {
+                const target = e.target;
+                const actionButton = target.closest('[data-action]');
+                if (!actionButton)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                const action = actionButton.getAttribute('data-action');
+                const messageId = actionButton.getAttribute('data-message-id');
+                if (!messageId || !action)
+                    return;
+                const message = engine.getMessages().find(m => m.id === messageId);
+                if (!message)
+                    return;
+                switch (action) {
+                    case 'copy':
+                        await copyMessageToClipboard(message);
+                        break;
+                    case 'delete':
+                        deleteMessage(message);
+                        break;
+                    case 'edit':
+                        editMessage(message);
+                        break;
+                }
+            };
+            containerElement.addEventListener('click', handleMessageAction);
+            eventHandlers.push({ element: containerElement, event: 'click', handler: handleMessageAction });
         }
+        // Toast notification helper
+        const showToast = (message, type = 'info') => {
+            const toast = document.createElement('div');
+            toast.className = `chat-toast chat-toast-${type}`;
+            toast.setAttribute('role', 'alert');
+            toast.setAttribute('aria-live', 'polite');
+            toast.textContent = message;
+            containerElement.appendChild(toast);
+            // Animate in
+            requestAnimationFrame(() => {
+                toast.classList.add('chat-toast-show');
+            });
+            // Remove after 3 seconds
+            setTimeout(() => {
+                toast.classList.remove('chat-toast-show');
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        };
+        const copyMessageToClipboard = async (message) => {
+            try {
+                await navigator.clipboard.writeText(message.content);
+                showToast('Message copied to clipboard', 'success');
+                onMessageCopy?.(message);
+            }
+            catch (err) {
+                console.error('Failed to copy:', err);
+                showToast('Failed to copy message', 'error');
+            }
+        };
+        const deleteMessage = (message) => {
+            if (confirm('Are you sure you want to delete this message?')) {
+                engine.deleteMessage(message.id);
+                showToast('Message deleted', 'info');
+                onMessageDelete?.(message);
+            }
+        };
+        const editMessage = (message) => {
+            const messageElement = containerElement.querySelector(`[data-message-id="${message.id}"]`);
+            if (!messageElement)
+                return;
+            const contentElement = messageElement.querySelector('.chat-message-text, .chat-markdown');
+            if (!contentElement)
+                return;
+            const originalContent = message.content;
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.value = originalContent;
+            input.className = 'chat-message-edit-input';
+            input.setAttribute('aria-label', 'Edit message');
+            const buttonContainer = document.createElement('div');
+            buttonContainer.className = 'chat-message-edit-buttons';
+            const saveButton = document.createElement('button');
+            saveButton.textContent = 'Save';
+            saveButton.className = 'chat-message-edit-save';
+            saveButton.type = 'button';
+            saveButton.setAttribute('aria-label', 'Save changes');
+            const cancelButton = document.createElement('button');
+            cancelButton.textContent = 'Cancel';
+            cancelButton.className = 'chat-message-edit-cancel';
+            cancelButton.type = 'button';
+            cancelButton.setAttribute('aria-label', 'Cancel editing');
+            buttonContainer.appendChild(saveButton);
+            buttonContainer.appendChild(cancelButton);
+            const originalHTML = contentElement.innerHTML;
+            contentElement.innerHTML = '';
+            contentElement.appendChild(input);
+            contentElement.appendChild(buttonContainer);
+            input.focus();
+            input.select();
+            const handleSave = () => {
+                const newContent = input.value.trim();
+                if (newContent && newContent !== originalContent) {
+                    try {
+                        engine.editMessage(message.id, newContent);
+                        showToast('Message updated', 'success');
+                        onMessageEdit?.(message, newContent);
+                    }
+                    catch (error) {
+                        showToast(error instanceof Error ? error.message : 'Failed to edit message', 'error');
+                        contentElement.innerHTML = originalHTML;
+                    }
+                }
+                else {
+                    contentElement.innerHTML = originalHTML;
+                }
+            };
+            const handleCancel = () => {
+                contentElement.innerHTML = originalHTML;
+            };
+            saveButton.addEventListener('click', handleSave);
+            cancelButton.addEventListener('click', handleCancel);
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSave();
+                }
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    handleCancel();
+                }
+            });
+        };
         // Auto-scroll to bottom after render
         // Use setTimeout to ensure DOM is updated
         setTimeout(() => {
@@ -301,6 +519,11 @@ export function createChatUI(options) {
         engine,
         render,
         destroy: () => {
+            // Remove all event listeners
+            eventHandlers.forEach(({ element, event, handler, options }) => {
+                element.removeEventListener(event, handler, options);
+            });
+            eventHandlers.length = 0;
             engine.destroy();
             containerElement.innerHTML = '';
             // Clear references

package/dist/browser/chatbot-ui.css

@@ -506,3 +506,195 @@
   /* This selector allows for custom styling via data attributes */
 }
 
+/* Message Actions */
+.chat-message-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  opacity: 0;
+  transition: opacity var(--chat-transition-duration, 0.2s);
+}
+
+.chat-message:hover .chat-message-actions {
+  opacity: 1;
+}
+
+.chat-message-action {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--chat-border-radius, 0.25rem);
+  font-size: 0.875rem;
+  transition: background var(--chat-transition-duration, 0.2s);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+}
+
+.chat-message-action:hover {
+  background: color-mix(in srgb, var(--chat-secondary-color, #64748b) 10%, transparent);
+}
+
+.chat-message-action:focus {
+  outline: 2px solid var(--chat-primary-color, #3b82f6);
+  outline-offset: 2px;
+}
+
+.chat-message-action:active {
+  transform: scale(0.95);
+}
+
+/* Loading Animation */
+.chat-loading-dots {
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-right: 0.5rem;
+}
+
+.chat-loading-dots span {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--chat-secondary-color, #64748b);
+  animation: chat-loading-pulse 1.4s ease-in-out infinite;
+}
+
+.chat-loading-dots span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.chat-loading-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.chat-loading-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes chat-loading-pulse {
+  0%, 80%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.chat-loading-text {
+  opacity: 0.7;
+}
+
+/* Toast Notifications */
+.chat-toast {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  background: var(--chat-background-color, #ffffff);
+  color: var(--chat-text-color, #1e293b);
+  padding: 0.75rem 1rem;
+  border-radius: var(--chat-border-radius, 0.5rem);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 10000;
+  opacity: 0;
+  transform: translateY(1rem);
+  transition: opacity var(--chat-transition-duration, 0.2s), transform var(--chat-transition-duration, 0.2s);
+  max-width: 300px;
+  font-size: 0.875rem;
+}
+
+.chat-toast-show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.chat-toast-success {
+  background: #d1fae5;
+  color: #065f46;
+  border-left: 3px solid #10b981;
+}
+
+.chat-toast-error {
+  background: #fee2e2;
+  color: #991b1b;
+  border-left: 3px solid #ef4444;
+}
+
+.chat-toast-info {
+  background: #dbeafe;
+  color: #1e40af;
+  border-left: 3px solid #3b82f6;
+}
+
+/* Message Edit Input */
+.chat-message-edit-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--chat-border-color, rgba(0, 0, 0, 0.1));
+  border-radius: var(--chat-border-radius, 0.5rem);
+  font-family: var(--chat-font-family, system-ui, sans-serif);
+  font-size: var(--chat-font-size, 1rem);
+  background: var(--chat-input-background-color, #f8fafc);
+  color: var(--chat-input-text-color, #1e293b);
+  margin-bottom: 0.5rem;
+}
+
+.chat-message-edit-input:focus {
+  outline: 2px solid var(--chat-primary-color, #3b82f6);
+  outline-offset: 2px;
+}
+
+.chat-message-edit-buttons {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.chat-message-edit-save,
+.chat-message-edit-cancel {
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--chat-border-radius, 0.5rem);
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background var(--chat-transition-duration, 0.2s);
+}
+
+.chat-message-edit-save {
+  background: var(--chat-primary-color, #3b82f6);
+  color: white;
+}
+
+.chat-message-edit-save:hover {
+  background: color-mix(in srgb, var(--chat-primary-color, #3b82f6) 90%, black);
+}
+
+.chat-message-edit-cancel {
+  background: var(--chat-secondary-color, #64748b);
+  color: white;
+}
+
+.chat-message-edit-cancel:hover {
+  background: color-mix(in srgb, var(--chat-secondary-color, #64748b) 90%, black);
+}
+
+/* Accessibility Improvements */
+.chat-container [role="status"] {
+  /* Ensure loading states are announced */
+}
+
+.chat-container [aria-live] {
+  /* Ensure dynamic content is announced */
+}
+
+.chat-message:focus-within {
+  outline: 2px solid var(--chat-primary-color, #3b82f6);
+  outline-offset: 2px;
+  border-radius: var(--chat-message-border-radius, var(--chat-border-radius, 0.5rem));
+}
+