Feat/attachment improvements

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-community-file-opener')
+    implementation project(':capacitor-app')
     implementation project(':capacitor-filesystem')
 
 }

android/capacitor.settings.gradle

@@ -5,5 +5,8 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-community-file-opener'
 project(':capacitor-community-file-opener').projectDir = new File('../node_modules/@capacitor-community/file-opener/android')
 
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
 include ':capacitor-filesystem'
 project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@capacitor-community/file-opener": "^7.0.1",
     "@capacitor/android": "^7.3.0",
+    "@capacitor/app": "^7.0.2",
     "@capacitor/core": "^7.3.0",
     "@capacitor/filesystem": "^7.1.1",
     "@emoji-mart/data": "^1.2.1",
@@ -119,7 +120,8 @@
     "web3-eth-contract": "^4.7.2",
     "web3-providers-http": "^4.2.0",
     "web3-utils": "^4.3.3",
-    "web3-validator": "^2.0.6"
+    "web3-validator": "^2.0.6",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",

src/assets/styles/components/_chat.scss

@@ -131,13 +131,39 @@ $scroll-bar-width: 4px;
     }
   }
 
+  &__download-attachments-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+
+    &--left {
+      left: -48px;
+    }
+
+    &--right {
+      right: -48px;
+    }
+
+    &__icon {
+      color: map.get(colors.$adm-colors, 'grey');
+    }
+  }
+
   &__message {
     display: flex;
     flex-direction: row;
     padding: 8px 16px;
     border-radius: 16px;
     position: relative;
 
+    &--with-attachments {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      box-shadow: none;
+    }
+
     &::after {
       content: "";
       position: absolute;
@@ -447,6 +473,19 @@ $scroll-bar-width: 4px;
       &--green {
         background-color: map.get(settings.$green, 'lighten-5');
       }
+
+      &--with-attachments {
+        box-shadow: none;
+      }
+    }
+
+    &__message-container {
+      &--with-attachments {
+        box-shadow:
+          0 1px 10px hsla(0, 0%, 39.2%, 0.06),
+          0 1px 1px hsla(0, 0%, 39.2%, 0.04),
+          0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
+      }
     }
 
     &__sender {
@@ -561,6 +600,19 @@ $scroll-bar-width: 4px;
       &--green {
         background-color: map.get(settings.$grey, 'darken-3');
       }
+
+      &--with-attachments {
+        box-shadow: none;
+      }
+    }
+
+    &__message-container {
+      &--with-attachments {
+        box-shadow:
+          0 1px 10px hsla(0, 0%, 39.2%, 0.06),
+          0 1px 1px hsla(0, 0%, 39.2%, 0.04),
+          0 2px 10px -1px hsla(0, 0%, 39.2%, 0.02);
+      }
     }
 
     &__message-container--right:not(&__message-container--grouped) .a-chat__message::after {

src/components/AChat/AChat.vue

@@ -176,6 +176,19 @@ const scrollTo = (position: number) => {
   }
 }
 
+const scrollByOffset = (offset: number) => {
+  const formPadding = 8
+  const entireOffset = offset + formPadding
+
+  if (messagesRef.value) {
+    const scrollBottom =
+      messagesRef.value.scrollHeight -
+      (messagesRef.value.scrollTop + messagesRef.value.clientHeight)
+
+    messagesRef.value.scrollTop += scrollBottom > entireOffset ? 0 : entireOffset
+  }
+}
+
 const scrollToMessage = (index: number) => {
   if (!messagesRef.value) return
 
@@ -265,7 +278,8 @@ defineExpose({
   scrollToMessageEasy,
   maintainScrollPosition,
   scrollToMessage,
-  scrollTo
+  scrollTo,
+  scrollByOffset
 })
 
 const spinnerTop = computed(() => {