update

ts_web/elements/sio-combox.ts

@@ -18,11 +18,13 @@ import { fontFamilies, typography } from './00fonts.js';
 
 // Import components
 import { SioConversationSelector, type IConversation } from './sio-conversation-selector.js';
-import { SioConversationView, type IMessage, type IConversationData } from './sio-conversation-view.js';
+import { SioConversationView, type IMessage, type IConversationData, type IAttachment } from './sio-conversation-view.js';
+import { SioImageLightbox, type ILightboxImage } from './sio-image-lightbox.js';
 
 // Make sure components are loaded
 SioConversationSelector;
 SioConversationView;
+SioImageLightbox;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -76,7 +78,20 @@ export class SioCombox extends DeesElement {
       { id: '2', text: 'I can help you with that. Can you tell me what error you\'re seeing?', sender: 'support', time: '10:02 AM' },
       { id: '3', text: 'It says "Invalid credentials" but I\'m sure my password is correct', sender: 'user', time: '10:03 AM' },
       { id: '4', text: 'Let me check your account. Please try resetting your password using the forgot password link.', sender: 'support', time: '10:05 AM' },
-      { id: '5', text: 'Thanks for your help with the login issue!', sender: 'user', time: '10:10 AM' },
+      { 
+        id: '5', 
+        text: 'Here\'s a screenshot of the error', 
+        sender: 'user', 
+        time: '10:08 AM',
+        attachments: [{
+          id: 'att1',
+          name: 'error-screenshot.png',
+          size: 245780,
+          type: 'image/png',
+          url: 'https://picsum.photos/400/300?random=1'
+        }]
+      },
+      { id: '6', text: 'Thanks for your help with the login issue!', sender: 'user', time: '10:10 AM' },
     ],
     '2': [
       { id: '1', text: 'I need help understanding my invoice', sender: 'user', time: '9:00 AM' },
@@ -235,8 +250,11 @@ export class SioCombox extends DeesElement {
           .conversation=${conversationData}
           @back=${this.handleBack}
           @send-message=${this.handleSendMessage}
+          @open-image=${this.handleOpenImage}
         ></sio-conversation-view>
       </div>
+      
+      <sio-image-lightbox></sio-image-lightbox>
     `;
   }
 
@@ -296,4 +314,18 @@ export class SioCombox extends DeesElement {
       }, 3000);
     }
   }
+
+  private handleOpenImage(event: CustomEvent) {
+    const attachment = event.detail.attachment as IAttachment;
+    const lightbox = this.shadowRoot?.querySelector('sio-image-lightbox') as SioImageLightbox;
+    
+    if (lightbox && attachment) {
+      const lightboxImage: ILightboxImage = {
+        url: attachment.url,
+        name: attachment.name,
+        size: attachment.size
+      };
+      lightbox.open(lightboxImage);
+    }
+  }
 }