acecoderz-chat-ui 1.0.3 → 1.0.5

package/README.md

@@ -1,4 +1,4 @@
-# @chatbot/chat-ui
+# acecoderz-chat-ui
 
 A framework-agnostic, fully customizable chat UI package that works with React, Solid, Vanilla JS, and any other framework.
 
@@ -10,19 +10,30 @@ A framework-agnostic, fully customizable chat UI package that works with React,
 - 💬 **Real-time Support** - WebSocket and HTTP API support
 - 🎯 **TypeScript** - Full TypeScript support
 - 📦 **Modular** - Import only what you need
+- ✅ **Package Manager Compatible** - Works with both npm and pnpm
 
 ## Installation
 
-### npm/pnpm/yarn
+### npm
 
 ```bash
-pnpm add @chatbot/chat-ui
-# or
-npm install @chatbot/chat-ui
-# or
-yarn add @chatbot/chat-ui
+npm install acecoderz-chat-ui
+```
+
+### pnpm
+
+```bash
+pnpm add acecoderz-chat-ui
 ```
 
+### yarn
+
+```bash
+yarn add acecoderz-chat-ui
+```
+
+**Note**: This package is compatible with npm, pnpm, and yarn. Use the package manager your project uses.
+
 ### Browser / CDN (Script Tag)
 
 For browser usage without a build step, see [CDN.md](./CDN.md) for detailed documentation.
@@ -56,6 +67,8 @@ For browser usage without a build step, see [CDN.md](./CDN.md) for detailed docu
 **Building for CDN:**
 ```bash
 # Build browser bundle
+npm run build:browser
+# or
 pnpm build:browser
 
 # Output files will be in dist/browser/:
@@ -83,13 +96,13 @@ After building, you can embed the chatbot in an iframe:
 Import the CSS file in your project:
 
 ```css
-@import '@chatbot/chat-ui/styles';
+@import 'acecoderz-chat-ui/styles';
 ```
 
 Or in your JavaScript/TypeScript:
 
 ```javascript
-import '@chatbot/chat-ui/styles';
+import 'acecoderz-chat-ui/styles';
 ```
 
 ## Usage
@@ -97,8 +110,8 @@ import '@chatbot/chat-ui/styles';
 ### React
 
 ```tsx
-import { ChatUI } from '@chatbot/chat-ui/react';
-import '@chatbot/chat-ui/styles';
+import { ChatUI } from 'acecoderz-chat-ui/react';
+import 'acecoderz-chat-ui/styles';
 
 function App() {
   return (
@@ -118,7 +131,7 @@ function App() {
 Or use the hook directly:
 
 ```tsx
-import { useChat } from '@chatbot/chat-ui/react';
+import { useChat } from 'acecoderz-chat-ui/react';
 
 function CustomChat() {
   const { messages, input, sendMessage, setInput } = useChat({
@@ -140,8 +153,8 @@ function CustomChat() {
 ### Solid
 
 ```tsx
-import { createChat } from '@chatbot/chat-ui/solid';
-import '@chatbot/chat-ui/styles';
+import { createChat } from 'acecoderz-chat-ui/solid';
+import 'acecoderz-chat-ui/styles';
 
 function App() {
   const chat = createChat({
@@ -168,8 +181,8 @@ function App() {
 ### Vanilla JS
 
 ```javascript
-import { createChatUI } from '@chatbot/chat-ui/vanilla';
-import '@chatbot/chat-ui/styles';
+import { createChatUI } from 'acecoderz-chat-ui/vanilla';
+import 'acecoderz-chat-ui/styles';
 
 const container = document.getElementById('chat-container');
 
@@ -190,7 +203,7 @@ const chatUI = createChatUI({
 ### Core Only (Advanced)
 
 ```typescript
-import { ChatEngine } from '@chatbot/chat-ui/core';
+import { ChatEngine } from 'acecoderz-chat-ui/core';
 
 const engine = new ChatEngine({
   apiUrl: 'http://localhost:3000/api',

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