From 8ffae3541df9f38f66533d0615b9d01e8a235d78 Mon Sep 17 00:00:00 2001
From: alexa <alex@targoninc.com>
Date: Tue, 2 Jul 2024 19:00:56 +0200
Subject: [PATCH] file attachments

---
 ui/base.css                  |  3 +++
 ui/classes.css               |  4 ++++
 ui/components/attachment.mjs | 29 ++++++++++++++++++++++-------
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/ui/base.css b/ui/base.css
index 2f2770b..b1e3e48 100644
--- a/ui/base.css
+++ b/ui/base.css
@@ -184,6 +184,9 @@ label {
 
 button {
     cursor: pointer;
+}
+
+button.flex {
     align-items: center;
 }
 
diff --git a/ui/classes.css b/ui/classes.css
index 6aaed2f..6c2e396 100644
--- a/ui/classes.css
+++ b/ui/classes.css
@@ -209,6 +209,10 @@
     font-size: 0.8em;
 }
 
+.text-tiny {
+    font-size: 0.6em;
+}
+
 .chat-content {
     height: 100%;
 }
diff --git a/ui/components/attachment.mjs b/ui/components/attachment.mjs
index 3d1daee..8efc1fc 100644
--- a/ui/components/attachment.mjs
+++ b/ui/components/attachment.mjs
@@ -182,17 +182,32 @@ export class AttachmentTemplates {
                     .attributes("scrolling", "no")
                     .attributes("frameborder", "0")
                     .attributes("allowfullscreen", "true")
-                    .build()
             ).build();
     }
 
     static fileAttachment(attachment, url) {
-        return CommonTemplates.buttonWithIcon("download", attachment.filename, () => {
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = attachment.filename;
-            link.click();
-        });
+        const mb = (attachment.size / 1024 / 1024).toFixed(2);
+
+        return create("button")
+            .classes("flex-v", "small-gap")
+            .onclick(() => {
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = attachment.filename;
+                link.click();
+            }).children(
+                create("div")
+                    .classes("flex")
+                    .children(
+                        CommonTemplates.icon("download"),
+                        create("span")
+                            .classes("text-small")
+                            .text(attachment.filename)
+                    ),
+                create("span")
+                    .classes("text-tiny")
+                    .text("Download (" + mb + " MB)")
+            ).build();
     }
 
     static imageAttachment(attachment, url) {