update

ts_web/elements/sio-combox.ts

@@ -92,6 +92,19 @@ export class SioCombox extends DeesElement {
         }]
       },
       { id: '6', text: 'Thanks for your help with the login issue!', sender: 'user', time: '10:10 AM' },
+      { 
+        id: '7', 
+        text: 'Here is the documentation you requested', 
+        sender: 'support', 
+        time: '10:15 AM',
+        attachments: [{
+          id: 'att2',
+          name: 'user-guide.pdf',
+          size: 2457600,
+          type: 'application/pdf',
+          url: 'data:application/pdf;base64,JVBERi0xLjMKJeLjz9MKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovT3V0bGluZXMgMiAwIFIKL1BhZ2VzIDMgMCBSCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9UeXBlIC9PdXRsaW5lcwovQ291bnQgMAo+PgplbmRvYmoKMyAwIG9iago8PAovVHlwZSAvUGFnZXMKL0NvdW50IDEKL0tpZHMgWzQgMCBSXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvUGFnZQovUGFyZW50IDMgMCBSCi9NZWRpYUJveCBbMCAwIDYxMiA3OTJdCi9Db250ZW50cyA1IDAgUgovUmVzb3VyY2VzIDw8Ci9Gb250IDw8Ci9GMSA2IDAgUgo+Pgo+Pgo+PgplbmRvYmoKNSAwIG9iago8PAovTGVuZ3RoIDQ0Cj4+CnN0cmVhbQpCVApxCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8gV29ybGQpIFRqCkVUClEKZW5kc3RyZWFtCmVuZG9iago2IDAgb2JqCjw8Ci9UeXBlIC9Gb250Ci9TdWJ0eXBlIC9UeXBlMQovQmFzZUZvbnQgL1RpbWVzLVJvbWFuCj4+CmVuZG9iagp4cmVmCjAgNwowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDAwMDkgMDAwMDAgbiAKMDAwMDAwMDA3NCAwMDAwMCBuIAowMDAwMDAwMTIwIDAwMDAwIG4gCjAwMDAwMDAxNzkgMDAwMDAgbiAKMDAwMDAwMDM2NCAwMDAwMCBuIAowMDAwMDAwNDY2IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNwovUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNTY1CiUlRU9G'
+        }]
+      },
     ],
     '2': [
       { id: '1', text: 'I need help understanding my invoice', sender: 'user', time: '9:00 AM' },
@@ -125,7 +138,7 @@ export class SioCombox extends DeesElement {
         border-radius: ${unsafeCSS(radius['2xl'])};
         border: 1px solid ${bdTheme('border')};
         box-shadow: ${unsafeCSS(shadows.xl)};
-        overflow: visible;
+        overflow: hidden;
         font-family: ${unsafeCSS(fontFamilies.sans)};
         position: relative;
         transform-origin: bottom right;
@@ -257,6 +270,7 @@ export class SioCombox extends DeesElement {
           @back=${this.handleBack}
           @send-message=${this.handleSendMessage}
           @open-image=${this.handleOpenImage}
+          @open-file=${this.handleOpenImage}
         ></sio-conversation-view>
       </div>
       
@@ -326,12 +340,13 @@ export class SioCombox extends DeesElement {
     const lightbox = this.shadowRoot?.querySelector('sio-image-lightbox') as SioImageLightbox;
     
     if (lightbox && attachment) {
-      const lightboxImage: ILightboxImage = {
+      const lightboxFile: ILightboxImage = {
         url: attachment.url,
         name: attachment.name,
-        size: attachment.size
+        size: attachment.size,
+        type: attachment.type
       };
-      lightbox.open(lightboxImage);
+      lightbox.open(lightboxFile);
     }
   }
 }