acecoderz-chat-ui 1.0.4 → 1.0.7

package/README.md

@@ -11,6 +11,10 @@ A framework-agnostic, fully customizable chat UI package that works with React,
 - 🎯 **TypeScript** - Full TypeScript support
 - 📦 **Modular** - Import only what you need
 - ✅ **Package Manager Compatible** - Works with both npm and pnpm
+- 💾 **Message Persistence** - Automatic localStorage save/restore
+- ✂️ **Message Actions** - Copy, delete, and edit messages
+- ♿ **Accessible** - Full ARIA support and keyboard navigation
+- 🎭 **Improved Loading** - Animated indicators with accessibility
 
 ## Installation
 
@@ -189,17 +193,26 @@ const container = document.getElementById('chat-container');
 const chatUI = createChatUI({
   config: {
     apiUrl: 'http://localhost:3000/api',
+    enablePersistence: true, // Optional: Save messages to localStorage
+    storageKey: 'my-chat-app', // Optional: Custom storage key
   },
   theme: {
     primaryColor: '#3b82f6',
   },
   container,
+  // Optional: Enable message actions (copy, delete, edit)
+  enableMessageActions: true,
+  showCopyButton: true,
+  showDeleteButton: true,
+  showEditButton: true,
 });
 
 // Later, to destroy:
 // chatUI.destroy();
 ```
 
+**Note**: The vanilla adapter now handles form submission automatically - no workarounds needed! See [INTEGRATION_GUIDE.md](../../INTEGRATION_GUIDE.md) for complete integration examples.
+
 ### Core Only (Advanced)
 
 ```typescript
@@ -259,9 +272,92 @@ interface ChatConfig {
   onError?: (error: Error) => void; // Error callback
   enableWebSocket?: boolean;    // Enable WebSocket
   websocketUrl?: string;        // WebSocket URL
+  enablePersistence?: boolean;  // Enable localStorage persistence (default: false)
+  storageKey?: string;          // Storage key prefix (default: 'chat-ui')
 }
 ```
 
+## New Features
+
+### Message Persistence
+
+Automatically save and restore conversations across page reloads:
+
+```javascript
+const chatUI = createChatUI({
+  config: {
+    apiUrl: '/api/chat',
+    enablePersistence: true, // Enable localStorage
+    storageKey: 'my-app', // Optional: custom key
+  },
+  container: document.getElementById('chat'),
+});
+```
+
+### Message Actions
+
+Enable copy, delete, and edit buttons on messages:
+
+```javascript
+const chatUI = createChatUI({
+  config: { apiUrl: '/api/chat' },
+  container: document.getElementById('chat'),
+  enableMessageActions: true,
+  showCopyButton: true,
+  showDeleteButton: true,
+  showEditButton: true,
+  onMessageCopy: (message) => console.log('Copied:', message.content),
+  onMessageDelete: (message) => console.log('Deleted:', message.id),
+  onMessageEdit: (message, newContent) => console.log('Edited:', newContent),
+});
+```
+
+### Initial Greeting
+
+Display a welcome message when the chat first opens:
+
+**Vanilla JS:**
+```javascript
+const chatUI = createChatUI({
+  config: { apiUrl: '/api/chat' },
+  container: document.getElementById('chat'),
+  initialGreeting: "Hello! 👋 I'm your assistant. How can I help you today?",
+});
+```
+
+**React:**
+```tsx
+<ChatUI
+  config={config}
+  initialGreeting="Hello! 👋 I'm your assistant. How can I help you today?"
+/>
+```
+
+The greeting will:
+- Appear automatically when the chat opens
+- Only show once per conversation
+- Reappear after clearing the chat
+- Not trigger an API call (it's a local message)
+
+### Improved Loading States
+
+- Animated loading indicators
+- Better accessibility with ARIA live regions
+- Smooth transitions
+
+See [NEW_FEATURES.md](./NEW_FEATURES.md) for complete feature documentation.
+
+## Integration Guide
+
+For complete integration instructions, examples, and troubleshooting, see the [Integration Guide](../../INTEGRATION_GUIDE.md).
+
+The integration guide includes:
+- Complete vanilla JS examples with modal
+- React integration examples
+- Backend configuration
+- Feature documentation
+- Troubleshooting guide
+
 ## Customization
 
 ### Custom Message Renderer (React)

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,CAsQxC,CAAC"}

package/dist/adapters/react/ChatUI.js

@@ -39,9 +39,36 @@ 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);
-    // Add initial greeting message when component mounts
+    // Track if we've already added the initial greeting
+    const greetingAddedRef = React.useRef(false);
+    const previousInitialGreetingRef = React.useRef(initialGreeting);
+    const messagesInitializedRef = React.useRef(false);
+    // Reset greeting flag if initialGreeting prop changes
+    if (previousInitialGreetingRef.current !== initialGreeting) {
+        greetingAddedRef.current = false;
+        previousInitialGreetingRef.current = initialGreeting;
+    }
+    // Mark when messages are initialized (loaded from storage or empty)
+    React.useEffect(() => {
+        if (messages.length >= 0) {
+            messagesInitializedRef.current = true;
+        }
+    }, [messages.length]);
+    // Add initial greeting message once when component mounts and messages are ready
     React.useEffect(() => {
-        if (initialGreeting && messages.length === 0) {
+        // Skip if no greeting or already added
+        if (!initialGreeting || greetingAddedRef.current) {
+            return;
+        }
+        // Wait for messages to be initialized
+        if (!messagesInitializedRef.current) {
+            return;
+        }
+        // Check if there's already a greeting message with the same content
+        const hasGreeting = messages.some(msg => msg.role === 'assistant' && msg.content === initialGreeting);
+        // Add greeting if it doesn't already exist
+        if (!hasGreeting) {
+            greetingAddedRef.current = true;
             const greetingMessage = {
                 id: `greeting-${Date.now()}`,
                 content: initialGreeting,
@@ -50,7 +77,11 @@ export const ChatUI = ({ config, theme = {}, className = '', placeholder = 'Type
             };
             addMessage(greetingMessage);
         }
-    }, [initialGreeting, messages.length, addMessage]);
+        else {
+            // If greeting already exists, mark as added
+            greetingAddedRef.current = true;
+        }
+    }, [initialGreeting, messages, addMessage]);
     const handleSubmit = (e) => {
         e.preventDefault();
         if (input.trim() && !isLoading && !disabled) {

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

@@ -18,6 +18,14 @@ export interface ChatUIOptions {
     loadingMessage?: string;
     customMessageRenderer?: (message: Message) => string;
     onInit?: (instance: ChatUIInstance) => void;
+    initialGreeting?: string;
+    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;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,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,CAsoBnE"}

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, initialGreeting, 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,12 @@ export function createChatUI(options) {
     let sendButtonElement = null;
     let clearButtonElement = null;
     let isUpdatingInputProgrammatically = false; // Flag to prevent input event loop
+    // Track if we've already added the initial greeting
+    let greetingAdded = false;
+    let previousInitialGreeting = initialGreeting;
+    let messagesInitialized = false;
+    // Store event handlers for proper cleanup
+    const eventHandlers = [];
     // Apply CSS variables for theming
     const applyTheme = () => {
         const root = containerElement;
@@ -107,12 +113,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 +182,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 +214,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,58 +259,249 @@ 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(() => {
             scrollToBottom();
         }, 0);
     };
+    // Helper function to add initial greeting if needed
+    const addInitialGreetingIfNeeded = () => {
+        if (!initialGreeting || greetingAdded) {
+            return;
+        }
+        // Reset greeting flag if initialGreeting prop changed
+        if (previousInitialGreeting !== initialGreeting) {
+            greetingAdded = false;
+            previousInitialGreeting = initialGreeting;
+        }
+        // Check if there's already a greeting message with the same content
+        const messages = engine.getMessages();
+        const hasGreeting = messages.some(msg => msg.role === 'assistant' && msg.content === initialGreeting);
+        // Add greeting if it doesn't already exist
+        if (!hasGreeting) {
+            greetingAdded = true;
+            const greetingMessage = {
+                id: `greeting-${Date.now()}`,
+                content: initialGreeting,
+                role: 'assistant',
+                timestamp: new Date(),
+            };
+            engine.addMessage(greetingMessage);
+        }
+        else {
+            // If greeting already exists, mark as added
+            greetingAdded = true;
+        }
+    };
     // Subscribe to engine events
     engine.on('messagesChange', () => {
+        // Mark messages as initialized once we get the first messagesChange event
+        if (!messagesInitialized) {
+            messagesInitialized = true;
+            // Try to add greeting after messages are initialized
+            addInitialGreetingIfNeeded();
+            // If greeting was added, it will trigger another messagesChange, so return early
+            if (greetingAdded) {
+                return;
+            }
+        }
         render();
         // Scroll after messages change
         setTimeout(() => {
@@ -297,10 +558,23 @@ export function createChatUI(options) {
     engine.on('error', render);
     // Initial render
     render();
+    // After initial render, check if we need to add greeting
+    // Use setTimeout to ensure messages are loaded from storage first
+    setTimeout(() => {
+        if (!messagesInitialized) {
+            messagesInitialized = true;
+            addInitialGreetingIfNeeded();
+        }
+    }, 100);
     const instance = {
         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
@@ -311,6 +585,8 @@ export function createChatUI(options) {
             clearButtonElement = null;
         },
         clear: () => {
+            // Reset greeting flag so it can be added again after clearing
+            greetingAdded = false;
             engine.clearMessages();
         },
         scrollToBottom,