updates

components/ClientEmailSection.vue

@@ -161,8 +161,13 @@
                             variant="tonal"
                             prepend-icon="mdi-paperclip"
                             class="mr-2 mb-1"
+                            :href="getAttachmentUrl(attachment)"
+                            :target="isViewableAttachment(attachment) ? '_blank' : undefined"
+                            :download="!isViewableAttachment(attachment)"
+                            component="a"
+                            clickable
                           >
-                            {{ attachment.name || attachment }}
+                            {{ getAttachmentName(attachment) }}
                           </v-chip>
                         </div>
                         
@@ -243,9 +248,14 @@
                     color="primary"
                     variant="tonal"
                     prepend-icon="mdi-paperclip"
-                    class="mr-2"
+                    class="mr-2 mb-1"
+                    :href="getAttachmentUrl(attachment)"
+                    :target="isViewableAttachment(attachment) ? '_blank' : undefined"
+                    :download="!isViewableAttachment(attachment)"
+                    component="a"
+                    clickable
                   >
-                    {{ attachment.name || attachment }}
+                    {{ getAttachmentName(attachment) }}
                   </v-chip>
                 </div>
                 
@@ -1058,6 +1068,45 @@ const saveSignature = () => {
   localStorage.setItem('emailSignature', JSON.stringify(signatureConfig.value));
   toast.success('Signature saved successfully');
 };
+
+// Helper functions for attachments
+const getAttachmentName = (attachment: any) => {
+  if (typeof attachment === 'string') {
+    return attachment;
+  }
+  return attachment?.name || attachment?.filename || 'Attachment';
+};
+
+const getAttachmentUrl = (attachment: any) => {
+  // If attachment is just a string (filename), assume it's in the client-emails bucket
+  if (typeof attachment === 'string') {
+    return `/api/files/proxy-download?fileName=${encodeURIComponent(attachment)}&bucket=client-emails`;
+  }
+  
+  // If it has a path property, use that
+  if (attachment?.path) {
+    const bucket = attachment.bucket || 'client-emails';
+    return `/api/files/proxy-download?fileName=${encodeURIComponent(attachment.path)}&bucket=${bucket}`;
+  }
+  
+  // If it has a url property, use that directly
+  if (attachment?.url) {
+    return attachment.url;
+  }
+  
+  // Default fallback
+  const name = attachment?.name || attachment?.filename || 'attachment';
+  return `/api/files/proxy-download?fileName=${encodeURIComponent(name)}&bucket=client-emails`;
+};
+
+const isViewableAttachment = (attachment: any) => {
+  const name = getAttachmentName(attachment);
+  const ext = name.split('.').pop()?.toLowerCase();
+  
+  // These file types can be viewed in browser
+  const viewableExtensions = ['pdf', 'png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'txt'];
+  return viewableExtensions.includes(ext || '');
+};
 </script>
 
 <style scoped>