feat: add file chip

2024-11-28 18:06:55 +05:30
parent 82c46dbb9c
commit b1fd52c275
3 changed files with 95 additions and 6 deletions
@@ -6,6 +6,7 @@ import BaseBubble from 'next/message/bubbles/Base.vue';
 import ImageChip from 'next/message/chips/Image.vue';
 import VideoChip from 'next/message/chips/Video.vue';
 import AudioChip from 'next/message/chips/Audio.vue';
+import FileChip from 'next/message/chips/File.vue';

 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import { MESSAGE_VARIANTS, ATTACHMENT_TYPES } from '../constants';
@@ -60,11 +61,17 @@ const recordings = computed(() => {
    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
  );
 });
+
+const files = computed(() => {
+  return props.attachments.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
+  );
+});
 </script>

 <template>
-  <BaseBubble class="p-3">
-    <span v-if="content" class="mb-[10px]" v-html="formattedContent" />
+  <BaseBubble class="p-3 space-y-[10px]">
+    <span v-if="content" v-html="formattedContent" />
    <div v-if="mediaAttachments.length" class="flex gap-[10px]">
      <template v-for="attachment in mediaAttachments" :key="attachment.id">
        <ImageChip
@@ -77,7 +84,7 @@ const recordings = computed(() => {
        />
      </template>
    </div>
-    <div v-if="recordings.length" class="mt-[10px] flex gap-[10px]">
+    <div v-if="recordings.length" class="flex flex-wrap gap-[10px]">
      <AudioChip
        v-for="attachment in recordings"
        :key="attachment.id"
@@ -85,6 +92,13 @@ const recordings = computed(() => {
        :attachment="attachment"
      />
    </div>
+    <div v-if="files.length" class="flex flex-wrap gap-[10px]">
+      <FileChip
+        v-for="attachment in files"
+        :key="attachment.id"
+        :attachment="attachment"
+      />
+    </div>
  </BaseBubble>
 </template>

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FileIcon from 'next/icon/FileIcon.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const fileName = computed(() => {
+  const url = attachment.dataUrl;
+  if (url) {
+    const filename = url.substring(url.lastIndexOf('/') + 1);
+    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
+  }
+  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+});
+
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
+});
+</script>
+
+<template>
+  <div
+    class="h-9 bg-n-solid-3 gap-2 items-center flex px-2 rounded-lg border border-n-strong"
+  >
+    <FileIcon class="flex-shrink-0" :file-type="fileType" />
+    <span class="mr-1 max-w-32 truncate">{{ fileName }}</span>
+    <a
+      v-tooltip="t('CONVERSATION.DOWNLOAD')"
+      class="flex-shrink-0 h-9 grid place-content-center cursor-pointer"
+      :href="url"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+    >
+      <Icon icon="i-lucide-download" />
+    </a>
+  </div>
+</template>
@@ -436,9 +436,9 @@ export default camelcaseKeys(
          account_id: 2,
          extension: null,
          data_url:
-            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/letterhead.pdf',
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/registrations.xls',
          thumb_url:
-            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/all-files.zip',
          file_size: 99844,
          width: null,
          height: null,
@@ -801,7 +801,35 @@ export default camelcaseKeys(
          account_id: 2,
          extension: null,
          data_url:
-            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/letterhead.pdf',
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/agreement.doc',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/all-files.zip',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/business-card.pdf',
          thumb_url:
            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
          file_size: 99844,