update

ts_web/elements/sio-conversation-view.ts

@@ -14,6 +14,10 @@ import {
 import { colors, bdTheme } from './00colors.js';
 import { spacing, radius, shadows, transitions } from './00tokens.js';
 import { fontFamilies, typography } from './00fonts.js';
+import { SioDropdownMenu, type IDropdownMenuItem } from './sio-dropdown-menu.js';
+
+// Make sure components are loaded
+SioDropdownMenu;
 
 // Types
 export interface IAttachment {
@@ -70,6 +74,17 @@ export class SioConversationView extends DeesElement {
   @state()
   private pendingAttachments: IAttachment[] = [];
 
+  private dropdownMenuItems: IDropdownMenuItem[] = [
+    { id: 'mute', label: 'Mute notifications', icon: 'bell-off' },
+    { id: 'pin', label: 'Pin conversation', icon: 'pin' },
+    { id: 'search', label: 'Search in chat', icon: 'search' },
+    { id: 'divider1', label: '', divider: true },
+    { id: 'export', label: 'Export chat', icon: 'download' },
+    { id: 'archive', label: 'Archive conversation', icon: 'archive' },
+    { id: 'divider2', label: '', divider: true },
+    { id: 'clear', label: 'Clear history', icon: 'trash-2', destructive: true }
+  ];
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -93,6 +108,7 @@ export class SioConversationView extends DeesElement {
         position: sticky;
         top: 0;
         z-index: 10;
+        overflow: visible;
       }
 
       .back-button {
@@ -117,6 +133,8 @@ export class SioConversationView extends DeesElement {
       .header-actions {
         display: flex;
         gap: ${unsafeCSS(spacing["2"])};
+        position: relative;
+        overflow: visible;
       }
 
       .messages-container {
@@ -495,9 +513,14 @@ export class SioConversationView extends DeesElement {
           <sio-button type="ghost" size="sm">
             <sio-icon icon="phone" size="16"></sio-icon>
           </sio-button>
-          <sio-button type="ghost" size="sm">
-            <sio-icon icon="more-vertical" size="16"></sio-icon>
-          </sio-button>
+          <sio-dropdown-menu 
+            .items=${this.dropdownMenuItems}
+            @item-selected=${this.handleDropdownAction}
+          >
+            <sio-button type="ghost" size="sm">
+              <sio-icon icon="more-vertical" size="16"></sio-icon>
+            </sio-button>
+          </sio-dropdown-menu>
         </div>
       </div>
 
@@ -802,4 +825,53 @@ export class SioConversationView extends DeesElement {
     a.click();
     document.body.removeChild(a);
   }
+
+  private handleDropdownAction(event: CustomEvent) {
+    const { item } = event.detail as { item: IDropdownMenuItem };
+    
+    // Dispatch event for parent to handle these actions
+    this.dispatchEvent(new CustomEvent('conversation-action', {
+      detail: { 
+        action: item.id,
+        conversationId: this.conversation?.id 
+      },
+      bubbles: true,
+      composed: true
+    }));
+
+    // Log action for demo purposes
+    console.log('Conversation action:', item.id, item.label);
+    
+    // Handle some actions locally for demo
+    switch (item.id) {
+      case 'search':
+        // Could open a search overlay
+        console.log('Opening search...');
+        break;
+      case 'export':
+        // Export conversation as JSON/text
+        this.exportConversation();
+        break;
+    }
+  }
+
+  private exportConversation() {
+    if (!this.conversation) return;
+    
+    const exportData = {
+      conversation: this.conversation.title,
+      exportDate: new Date().toISOString(),
+      messages: this.conversation.messages
+    };
+    
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${this.conversation.title.replace(/\s+/g, '-')}-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
 }