From 123f0cb61fcf22f71ccc3dc24fdfe12e516e93cd Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 24 Jan 2025 23:42:06 +0530
Subject: [PATCH] chore: Update file chip

---
 .../message/bubbles/Text/Index.vue              |  2 +-
 .../message/chips/AttachmentChips.vue           | 12 +++++++-----
 .../components-next/message/chips/File.vue      | 17 ++++++++++++++---
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
index 83388bed5..439c892dc 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
@@ -20,7 +20,7 @@ const isEmpty = computed(() => {
 
 <template>
   <BaseBubble class="px-4 py-3" data-bubble-name="text">
-    <div class="gap-3 flex flex-col">
+    <div class="gap-4 flex flex-col">
       <span v-if="isEmpty" class="text-n-slate-11">
         {{ $t('CONVERSATION.NO_CONTENT') }}
       </span>
diff --git a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
index 595903e16..5b70307fe 100644
--- a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
@@ -89,10 +89,12 @@ const files = computed(() => {
   </div>
 
   <div v-if="files.length" :class="classToApply">
-    <FileChip
-      v-for="attachment in files"
-      :key="attachment.id"
-      :attachment="attachment"
-    />
+    <div className="grid grid-cols-2 xl:grid-cols-3 gap-3">
+      <FileChip
+        v-for="attachment in files"
+        :key="attachment.id"
+        :attachment="attachment"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/chips/File.vue b/app/javascript/dashboard/components-next/message/chips/File.vue
index 07ca522cf..df9961c46 100644
--- a/app/javascript/dashboard/components-next/message/chips/File.vue
+++ b/app/javascript/dashboard/components-next/message/chips/File.vue
@@ -27,6 +27,11 @@ const fileType = computed(() => {
   return fileName.value.split('.').pop();
 });
 
+const fileNameWithoutExt = computed(() => {
+  const parts = fileName.value.split('.');
+  return parts.slice(0, -1).join('.') || fileName.value;
+});
+
 const textColorClass = computed(() => {
   const colorMap = {
     '7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
@@ -53,11 +58,17 @@ const textColorClass = computed(() => {
 
 <template>
   <div
-    class="h-9 bg-n-alpha-white gap-2 items-center flex px-2 rounded-lg border border-n-container"
+    class="h-9 bg-n-alpha-white gap-2 overflow-hidden items-center flex px-2 rounded-lg border border-n-container"
   >
     <FileIcon class="flex-shrink-0" :file-type="fileType" />
-    <span class="mr-1 max-w-32 truncate" :class="textColorClass">
-      {{ fileName }}
+    <span
+      :class="textColorClass"
+      class="inline-flex items-center text-sm overflow-hidden"
+    >
+      <span class="truncate min-w-6">
+        {{ fileNameWithoutExt }}
+      </span>
+      <span class="flex-shrink-0 whitespace-nowrap">.{{ fileType }}</span>
     </span>
     <a
       v-tooltip="t('CONVERSATION.DOWNLOAD')"