From 2c1a8e59f54e165a5556a2684a962142837a30e1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 29 Jan 2025 22:56:08 +0530
Subject: [PATCH] chore: Next bubble improvements (#10759)

---
 .../dashboard/assets/scss/_woot.scss          | 20 +++--
 .../components-next/avatar/Avatar.vue         |  4 +-
 .../components-next/message/Message.vue       | 50 +++++++----
 .../components-next/message/MessageList.vue   | 19 ++++-
 .../message/bubbles/Activity.vue              |  2 +-
 .../components-next/message/bubbles/Base.vue  |  6 +-
 .../message/bubbles/BaseAttachment.vue        |  4 +-
 .../message/bubbles/Email/Index.vue           |  9 +-
 .../message/bubbles/Text/Index.vue            |  7 +-
 .../message/chips/AttachmentChips.vue         | 32 +++-----
 .../message/chips/AttachmentGrid.vue          | 82 +++++++++++++++++++
 .../components-next/message/chips/Audio.vue   | 26 +++++-
 .../components-next/message/chips/File.vue    | 17 +++-
 .../components-next/message/chips/Image.vue   | 35 +++++++-
 .../components-next/message/chips/Video.vue   | 34 +++++++-
 .../components-next/message/provider.js       |  2 +-
 tailwind.config.js                            |  3 +
 theme/colors.js                               |  2 +
 18 files changed, 283 insertions(+), 71 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/message/chips/AttachmentGrid.vue

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index d736d7b5a..29e3c7c60 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -146,17 +146,19 @@
     --solid-2: 255 255 255;
     --solid-3: 255 255 255;
     --solid-active: 255 255 255;
-    --solid-amber: 252 232 193;
-    --solid-blue: 218 236 255;
+    --solid-amber: 255 228 181;
+    --solid-blue: 182 216 255;
     --solid-iris: 230 231 255;
+    --solid-purple: 202 202 255;
+    --solid-red: 255 212 219;
 
     --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-2: 196, 197, 198, 0.22;
     --alpha-3: 255, 255, 255, 0.96;
-    --black-alpha-1: 0, 0, 0, 0.12;
+    --black-alpha-1: 0, 0, 0, 0.08;
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.8;
+    --white-alpha: 255, 255, 255, 0.84;
   }
 
   .dark {
@@ -240,16 +242,18 @@
     --gray-12: 238 238 238;
 
     --background-color: 18 18 19;
+    --text-blue: 126 182 255;
     --border-strong: 52 52 52;
     --border-weak: 38 38 42;
     --solid-1: 23 23 26;
     --solid-2: 29 30 36;
     --solid-3: 44 45 54;
     --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
+    --solid-amber: 56 50 41;
+    --solid-blue: 4 51 101;
     --solid-iris: 38 42 101;
-    --text-blue: 126 182 255;
+    --solid-purple: 51 51 107;
+    --solid-red: 78 46 55;
 
     --alpha-1: 36, 36, 36, 0.8;
     --alpha-2: 139, 147, 182, 0.15;
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index 65859b1c7..3cf6d3c88 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -50,16 +50,16 @@ const AVATAR_COLORS = {
   dark: [
     ['#4B143D', '#FF8DCC'],
     ['#3F220D', '#FFA366'],
-    ['#2A2A2A', '#ADB1B8'],
     ['#023B37', '#0BD8B6'],
+    ['#2A2A2A', '#ADB1B8'],
     ['#27264D', '#A19EFF'],
     ['#1D2E62', '#9EB1FF'],
   ],
   light: [
     ['#FBDCEF', '#C2298A'],
     ['#FFE0BB', '#99543A'],
-    ['#E8E8E8', '#60646C'],
     ['#CCF3EA', '#008573'],
+    ['#E8E8E8', '#60646C'],
     ['#EBEBFE', '#4747C2'],
     ['#E1E9FF', '#3A5BC7'],
   ],
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index df0602a49..150c57f85 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -117,7 +117,7 @@ const props = defineProps({
   },
   conversationId: { type: Number, required: true },
   createdAt: { type: Number, required: true }, // eslint-disable-line vue/no-unused-properties
-  currentUserId: { type: Number, required: true },
+  currentUserId: { type: Number, required: true }, // eslint-disable-line vue/no-unused-properties
   groupWithNext: { type: Boolean, default: false },
   inboxId: { type: Number, default: null }, // eslint-disable-line vue/no-unused-properties
   inboxSupportsReplyTo: { type: Object, default: () => ({}) },
@@ -173,7 +173,11 @@ const variant = computed(() => {
   return variants[props.messageType] || MESSAGE_VARIANTS.USER;
 });
 
-const isMyMessage = computed(() => {
+const isBotOrAgentMessage = computed(() => {
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) {
+    return false;
+  }
+
   // if an outgoing message is still processing, then it's definitely a
   // message sent by the current user
   if (
@@ -182,17 +186,15 @@ const isMyMessage = computed(() => {
   ) {
     return true;
   }
+
   const senderId = props.senderId ?? props.sender?.id;
   const senderType = props.senderType ?? props.sender?.type;
 
   if (!senderType || !senderId) {
-    return false;
+    return true;
   }
 
-  return (
-    senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
-    props.currentUserId === senderId
-  );
+  return senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase();
 });
 
 /**
@@ -200,7 +202,7 @@ const isMyMessage = computed(() => {
  * @returns {import('vue').ComputedRef<'left'|'right'|'center'>} The computed orientation
  */
 const orientation = computed(() => {
-  if (isMyMessage.value) {
+  if (isBotOrAgentMessage.value) {
     return ORIENTATION.RIGHT;
   }
 
@@ -221,8 +223,8 @@ const flexOrientationClass = computed(() => {
 
 const gridClass = computed(() => {
   const map = {
-    [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
-    [ORIENTATION.RIGHT]: 'grid grid-cols-1fr',
+    [ORIENTATION.LEFT]: 'grid grid-cols-1fr',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-[1fr_24px]',
   };
 
   return map[orientation.value];
@@ -231,13 +233,13 @@ const gridClass = computed(() => {
 const gridTemplate = computed(() => {
   const map = {
     [ORIENTATION.LEFT]: `
-      "avatar bubble"
-      "spacer meta"
-    `,
-    [ORIENTATION.RIGHT]: `
       "bubble"
       "meta"
     `,
+    [ORIENTATION.RIGHT]: `
+      "bubble avatar"
+      "meta spacer"
+    `,
   };
 
   return map[orientation.value];
@@ -251,7 +253,7 @@ const shouldGroupWithNext = computed(() => {
 
 const shouldShowAvatar = computed(() => {
   if (props.messageType === MESSAGE_TYPES.ACTIVITY) return false;
-  if (orientation.value === ORIENTATION.RIGHT) return false;
+  if (orientation.value === ORIENTATION.LEFT) return false;
 
   return true;
 });
@@ -414,6 +416,11 @@ const avatarInfo = computed(() => {
   };
 });
 
+const avatarTooltip = computed(() => {
+  if (avatarInfo.value.name === '') return '';
+  return `${t('CONVERSATION.SENT_BY')} ${avatarInfo.value.name}`;
+});
+
 const setupHighlightTimer = () => {
   if (Number(route.query.messageId) !== Number(props.id)) {
     return;
@@ -433,7 +440,7 @@ provideMessageContext({
   isPrivate: computed(() => props.private),
   variant,
   orientation,
-  isMyMessage,
+  isBotOrAgentMessage,
   shouldGroupWithNext,
 });
 </script>
@@ -443,7 +450,7 @@ provideMessageContext({
   <div
     v-if="shouldRenderMessage"
     :id="`message${props.id}`"
-    class="flex w-full message-bubble-container mb-2"
+    class="flex w-full message-bubble-container"
     :data-message-id="props.id"
     :class="[
       flexOrientationClass,
@@ -472,6 +479,7 @@ provideMessageContext({
     >
       <div
         v-if="!shouldGroupWithNext && shouldShowAvatar"
+        v-tooltip.left-end="avatarTooltip"
         class="[grid-area:avatar] flex items-end"
       >
         <Avatar v-bind="avatarInfo" :size="24" />
@@ -479,7 +487,13 @@ provideMessageContext({
       <div
         class="[grid-area:bubble] flex"
         :class="{
-          'ltr:pl-9 rtl:pl-0 justify-end': orientation === ORIENTATION.RIGHT,
+          'justify-end': orientation === ORIENTATION.RIGHT,
+          'ltr:pl-12 rtl:pr-12 2xl:ltr:pl-0 2xl:rtl:pr-0':
+            orientation === ORIENTATION.RIGHT &&
+            variant !== MESSAGE_VARIANTS.EMAIL,
+          'ltr:pr-12 rtl:pl-12 2xl:ltr:pr-0 2xl:rtl:pl-0':
+            orientation === ORIENTATION.LEFT &&
+            variant !== MESSAGE_VARIANTS.EMAIL,
           'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
         }"
         @contextmenu="openContextMenu($event)"
diff --git a/app/javascript/dashboard/components-next/message/MessageList.vue b/app/javascript/dashboard/components-next/message/MessageList.vue
index 505e5c03b..d6cb14e21 100644
--- a/app/javascript/dashboard/components-next/message/MessageList.vue
+++ b/app/javascript/dashboard/components-next/message/MessageList.vue
@@ -74,7 +74,11 @@ const shouldGroupWithNext = (index, searchList) => {
     nextMessageType === MESSAGE_TYPES.TEMPLATE &&
     currentMessageType === MESSAGE_TYPES.TEMPLATE;
 
-  if (!hasSameSender || areBothTemplates) return false;
+  const areBothActivity =
+    nextMessageType === MESSAGE_TYPES.ACTIVITY &&
+    currentMessageType === MESSAGE_TYPES.ACTIVITY;
+
+  if (!hasSameSender || areBothTemplates || areBothActivity) return false;
 
   if (currentMessageType !== nextMessageType) return false;
 
@@ -103,6 +107,17 @@ const getInReplyToMessage = parentMessage => {
 
   return replyMessage ? useCamelCase(replyMessage) : null;
 };
+
+const getMessageSpacingClass = (message, messages, index) => {
+  // For non-activity messages, use groupWithNext logic
+  if (message.messageType !== MESSAGE_TYPES.ACTIVITY) {
+    return shouldGroupWithNext(index, messages) ? 'mb-1' : 'mb-6';
+  }
+
+  // For activity messages, check next message exists and is also an activity
+  const nextMessage = messages[index + 1];
+  return nextMessage?.messageType === MESSAGE_TYPES.ACTIVITY ? 'mb-2' : 'mb-6';
+};
 </script>
 
 <template>
@@ -116,6 +131,7 @@ const getInReplyToMessage = parentMessage => {
         :group-with-next="shouldGroupWithNext(index, read)"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :current-user-id="currentUserId"
+        :class="getMessageSpacingClass(message, read, index)"
         data-clarity-mask="True"
       />
     </template>
@@ -128,6 +144,7 @@ const getInReplyToMessage = parentMessage => {
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :current-user-id="currentUserId"
         :is-email-inbox="isAnEmailChannel"
+        :class="getMessageSpacingClass(message, unread, index)"
         data-clarity-mask="True"
       />
     </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Activity.vue b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
index d52286543..4e9300711 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
@@ -14,7 +14,7 @@ const readableTime = computed(() =>
 <template>
   <BaseBubble
     v-tooltip.top="readableTime"
-    class="px-2 py-0.5 !rounded-full flex min-w-0 items-center gap-2"
+    class="px-3 py-1 !rounded-full flex min-w-0 items-center gap-2"
     data-bubble-name="activity"
   >
     <span v-dompurify-html="content" :title="content" />
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
index aaf0cb1ba..20c5bbb9f 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -20,9 +20,9 @@ const varaintBaseMap = {
     'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
   [MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
   [MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
-  [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
-  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
-  [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
+  [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-purple text-n-slate-12',
+  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-purple text-n-slate-12',
+  [MESSAGE_VARIANTS.ERROR]: 'bg-n-solid-red text-n-ruby-12',
   [MESSAGE_VARIANTS.EMAIL]: 'w-full',
   [MESSAGE_VARIANTS.UNSUPPORTED]:
     'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
diff --git a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
index d494de908..832bcd3bc 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@@ -60,13 +60,13 @@ const senderName = computed(() => {
           :href="action.href"
           rel="noreferrer noopener nofollow"
           target="_blank"
-          class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center border border-n-container"
+          class="w-full block bg-n-alpha-white px-4 py-2 rounded-lg text-sm text-center border border-n-container"
         >
           {{ action.label }}
         </a>
         <button
           v-else
-          class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center border border-n-container"
+          class="w-full bg-n-alpha-white px-4 py-2 rounded-lg text-sm text-center border border-n-container"
           @click="action.onClick"
         >
           {{ action.label }}
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 5c83067f3..4d0658ed2 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -60,7 +60,7 @@ const textToShow = computed(() => {
     <EmailMeta
       class="p-3"
       :class="{
-        'border-b border-n-strong': isIncoming,
+        'border-b border-n-slate-6': isIncoming,
         'border-b border-n-slate-8/20': isOutgoing,
       }"
     />
@@ -73,7 +73,7 @@ const textToShow = computed(() => {
       >
         <div
           v-if="isExpandable && !isExpanded"
-          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-gray-3 via-n-gray-3 via-20% to-transparent"
+          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-slate-4 via-n-strong/50 to-transparent dark:from-n-slate-5 dark:via-n-slate-4/50"
         >
           <button
             class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
@@ -127,7 +127,10 @@ const textToShow = computed(() => {
       v-if="Array.isArray(attachments) && attachments.length"
       class="px-4 pb-4 space-y-2"
     >
-      <AttachmentChips :attachments="attachments" class="gap-1" />
+      <AttachmentChips
+        :attachments="attachments"
+        class="flex flex-col gap-2.5"
+      />
     </section>
   </BaseBubble>
 </template>
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 1a7997f50..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,12 +20,15 @@ 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>
       <FormattedContent v-if="content" :content="content" />
-      <AttachmentChips :attachments="attachments" class="gap-2" />
+      <AttachmentChips
+        :attachments="attachments"
+        class="flex flex-col gap-2.5"
+      />
       <template v-if="isTemplate">
         <div
           v-if="contentAttributes.submittedEmail"
diff --git a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
index 4fd1d6428..5b70307fe 100644
--- a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { computed, defineOptions, useAttrs } from 'vue';
 
-import ImageChip from 'next/message/chips/Image.vue';
-import VideoChip from 'next/message/chips/Video.vue';
+import ImageVideoChip from 'next/message/chips/AttachmentGrid.vue'; // Image and Video Grids are the same component
 import AudioChip from 'next/message/chips/Audio.vue';
 import FileChip from 'next/message/chips/File.vue';
 import { useMessageContext } from '../provider.js';
@@ -37,7 +36,7 @@ const attrs = useAttrs();
 const { orientation } = useMessageContext();
 
 const classToApply = computed(() => {
-  const baseClasses = [attrs.class, 'flex', 'flex-wrap'];
+  const baseClasses = [attrs.class, 'flex', 'flex-wrap', 'gap-2'];
 
   if (orientation.value === 'right') {
     baseClasses.push('justify-end');
@@ -77,30 +76,25 @@ const files = computed(() => {
 
 <template>
   <div v-if="mediaAttachments.length" :class="classToApply">
-    <template v-for="attachment in mediaAttachments" :key="attachment.id">
-      <ImageChip
-        v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
-        :attachment="attachment"
-      />
-      <VideoChip
-        v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
-        :attachment="attachment"
-      />
-    </template>
+    <ImageVideoChip :attachments="mediaAttachments" />
   </div>
+
   <div v-if="recordings.length" :class="classToApply">
-    <div v-for="attachment in recordings" :key="attachment.id">
+    <div v-for="attachment in recordings" :key="attachment.id" class="w-full">
       <AudioChip
         class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
         :attachment="attachment"
       />
     </div>
   </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/AttachmentGrid.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentGrid.vue
new file mode 100644
index 000000000..17aeeb0c7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentGrid.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { computed } from 'vue';
+import ImageChip from './Image.vue';
+import VideoChip from './Video.vue';
+
+import { ATTACHMENT_TYPES } from '../constants';
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+    validator: value => Array.isArray(value) && value.length > 0,
+  },
+});
+
+const MAX_DISPLAYED = 5;
+
+const visibleAttachments = computed(() =>
+  props.attachments.slice(0, MAX_DISPLAYED)
+);
+
+const remainingCount = computed(() =>
+  Math.max(0, props.attachments.length - MAX_DISPLAYED)
+);
+
+const gridClass = computed(() => {
+  const count = props.attachments.length;
+  const base = 'grid gap-2 w-full';
+
+  if (count === 1) return `${base} grid-cols-1`;
+
+  const classes = {
+    2: `${base} grid-cols-2 max-h-[500px]`,
+    3: `${base} grid-cols-2 max-h-[500px]`,
+    4: `${base} grid-cols-2 max-h-[500px]`,
+    5: `${base} grid-cols-3 max-h-[500px]`,
+  };
+
+  return classes[count] || classes[5];
+});
+
+const itemClass = computed(() => index => {
+  const count = props.attachments.length;
+  const base = 'relative overflow-hidden rounded-lg';
+
+  if (count === 1) return `${base} w-full h-auto`;
+
+  if (count === 3 && index === 0) return `${base} row-span-2 h-[492px]`;
+  if (count >= 5 && index === 0) return `${base} col-span-2 h-[242px]`;
+
+  return count === 2 ? `${base} h-[500px]` : `${base} h-[242px]`;
+});
+
+const shouldShowOverlay = computed(
+  () => index => remainingCount.value > 0 && index === MAX_DISPLAYED - 1
+);
+
+const componentMap = {
+  [ATTACHMENT_TYPES.IMAGE]: ImageChip,
+  [ATTACHMENT_TYPES.VIDEO]: VideoChip,
+};
+
+const getComponent = fileType =>
+  componentMap[fileType?.toLowerCase()] || componentMap[ATTACHMENT_TYPES.IMAGE];
+</script>
+
+<template>
+  <div :class="gridClass">
+    <div
+      v-for="(attachment, index) in visibleAttachments"
+      :key="attachment.id"
+      :class="itemClass(index)"
+    >
+      <component
+        :is="getComponent(attachment.fileType)"
+        :attachment="attachment"
+        :remaining-count="remainingCount"
+        :should-show-overlay="shouldShowOverlay(index)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Audio.vue b/app/javascript/dashboard/components-next/message/chips/Audio.vue
index 95c0ba1aa..4f72d137e 100644
--- a/app/javascript/dashboard/components-next/message/chips/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -25,16 +25,22 @@ const isPlaying = ref(false);
 const isMuted = ref(false);
 const currentTime = ref(0);
 const duration = ref(0);
+const playbackSpeed = ref(1);
 
 const onLoadedMetadata = () => {
   duration.value = audioPlayer.value?.duration;
 };
 
+const playbackSpeedLabel = computed(() => {
+  return `${playbackSpeed.value}x`;
+});
+
 // There maybe a chance that the audioPlayer ref is not available
 // When the onLoadMetadata is called, so we need to set the duration
 // value when the component is mounted
 onMounted(() => {
   duration.value = audioPlayer.value?.duration;
+  audioPlayer.value.playbackRate = playbackSpeed.value;
 });
 
 const formatTime = time => {
@@ -71,6 +77,16 @@ const playOrPause = () => {
 const onEnd = () => {
   isPlaying.value = false;
   currentTime.value = 0;
+  playbackSpeed.value = 1;
+  audioPlayer.value.playbackRate = 1;
+};
+
+const changePlaybackSpeed = () => {
+  const speeds = [1, 1.5, 2];
+  const currentIndex = speeds.indexOf(playbackSpeed.value);
+  const nextIndex = (currentIndex + 1) % speeds.length;
+  playbackSpeed.value = speeds[nextIndex];
+  audioPlayer.value.playbackRate = playbackSpeed.value;
 };
 
 const downloadAudio = async () => {
@@ -105,7 +121,7 @@ const downloadAudio = async () => {
     <div class="tabular-nums text-xs">
       {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
     </div>
-    <div class="flex items-center px-2">
+    <div class="flex-1 items-center flex px-2">
       <input
         type="range"
         min="0"
@@ -115,6 +131,14 @@ const downloadAudio = async () => {
         @input="seek"
       />
     </div>
+    <button
+      class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
+      @click="changePlaybackSpeed"
+    >
+      <span class="text-xs text-n-slate-11 font-medium">
+        {{ playbackSpeedLabel }}
+      </span>
+    </button>
     <button
       class="p-0 border-0 size-8 grid place-content-center"
       @click="toggleMute"
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')"
diff --git a/app/javascript/dashboard/components-next/message/chips/Image.vue b/app/javascript/dashboard/components-next/message/chips/Image.vue
index 3a1ad1888..be0373a2f 100644
--- a/app/javascript/dashboard/components-next/message/chips/Image.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Image.vue
@@ -11,7 +11,16 @@ defineProps({
     type: Object,
     required: true,
   },
+  remainingCount: {
+    type: Number,
+    required: true,
+  },
+  shouldShowOverlay: {
+    type: Boolean,
+    required: true,
+  },
 });
+
 const hasError = ref(false);
 const showGallery = ref(false);
 
@@ -20,12 +29,20 @@ const { filteredCurrentChatAttachments } = useMessageContext();
 const handleError = () => {
   hasError.value = true;
 };
+
+const handleGalleryClick = () => {
+  showGallery.value = true;
+};
+
+const handleGalleryClose = () => {
+  showGallery.value = false;
+};
 </script>
 
 <template>
   <div
-    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
-    @click="showGallery = true"
+    class="rounded-lg overflow-hidden contain-content cursor-pointer size-full"
+    @click="handleGalleryClick"
   >
     <div
       v-if="hasError"
@@ -34,6 +51,7 @@ const handleError = () => {
       <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
       {{ $t('COMPONENTS.MEDIA.LOADING_FAILED') }}
     </div>
+
     <img
       v-else
       class="object-cover w-full h-full"
@@ -41,12 +59,23 @@ const handleError = () => {
       @error="handleError"
     />
   </div>
+
+  <div
+    v-if="shouldShowOverlay"
+    class="absolute inset-0 flex items-center cursor-pointer justify-center bg-n-black/25 dark:bg-n-alpha-1 rounded-lg"
+    @click="handleGalleryClick"
+  >
+    <span class="text-white text-2xl font-semibold">
+      +{{ remainingCount }}
+    </span>
+  </div>
+
   <GalleryView
     v-if="showGallery"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"
     @error="handleError"
-    @close="() => (showGallery = false)"
+    @close="handleGalleryClose"
   />
 </template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Video.vue b/app/javascript/dashboard/components-next/message/chips/Video.vue
index c9904b998..0c10d9aa3 100644
--- a/app/javascript/dashboard/components-next/message/chips/Video.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Video.vue
@@ -10,17 +10,33 @@ defineProps({
     type: Object,
     required: true,
   },
+  remainingCount: {
+    type: Number,
+    required: true,
+  },
+  shouldShowOverlay: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const showGallery = ref(false);
 
 const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleGalleryClick = () => {
+  showGallery.value = true;
+};
+
+const handleGalleryClose = () => {
+  showGallery.value = false;
+};
 </script>
 
 <template>
   <div
-    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
-    @click="showGallery = true"
+    class="rounded-lg overflow-hidden contain-content cursor-pointer size-full"
+    @click="handleGalleryClick"
   >
     <video
       :src="attachment.dataUrl"
@@ -29,6 +45,7 @@ const { filteredCurrentChatAttachments } = useMessageContext();
       playsInline
     />
     <div
+      v-if="!shouldShowOverlay"
       class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
     >
       <div
@@ -41,12 +58,21 @@ const { filteredCurrentChatAttachments } = useMessageContext();
       </div>
     </div>
   </div>
+
+  <div
+    v-if="shouldShowOverlay"
+    class="absolute inset-0 flex items-center cursor-pointer justify-center bg-n-black/25 dark:bg-n-alpha-1 rounded-lg"
+    @click="handleGalleryClick"
+  >
+    <span class="text-white text-2xl font-semibold">
+      +{{ remainingCount }}
+    </span>
+  </div>
   <GalleryView
     v-if="showGallery"
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"
-    @error="onError"
-    @close="() => (showGallery = false)"
+    @close="handleGalleryClose"
   />
 </template>
diff --git a/app/javascript/dashboard/components-next/message/provider.js b/app/javascript/dashboard/components-next/message/provider.js
index f4c501845..c70c04b16 100644
--- a/app/javascript/dashboard/components-next/message/provider.js
+++ b/app/javascript/dashboard/components-next/message/provider.js
@@ -98,7 +98,7 @@ const MessageControl = Symbol('MessageControl');
  * @property {import('vue').Ref<Sender|null>} [sender=null] - The sender information
  * @property {import('vue').ComputedRef<MessageOrientation>} orientation - The visual variant of the message
  * @property {import('vue').ComputedRef<MessageVariant>} variant - The visual variant of the message
- * @property {import('vue').ComputedRef<boolean>} isMyMessage - Does the message belong to the current user
+ * @property {import('vue').ComputedRef<boolean>} isBotOrAgentMessage - Does the message belong to the bot or agents
  * @property {import('vue').ComputedRef<boolean>} isPrivate - Proxy computed value for private
  * @property {import('vue').ComputedRef<boolean>} shouldGroupWithNext - Should group with the next message or not, it is differnt from groupWithNext, this has a bypass for a failed message
  */
diff --git a/tailwind.config.js b/tailwind.config.js
index 20e4298dc..7492e46aa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -114,6 +114,9 @@ const tailwindConfig = {
                 margin: '0 1em 0.5em 0',
               },
             },
+            'ul > li::marker': {
+              color: 'rgb(var(--slate-9))',
+            },
             'ol li': {
               margin: '0 0 0.5em 1em',
               listStyleType: 'decimal',
diff --git a/theme/colors.js b/theme/colors.js
index 919a9ecf3..4fc29db2a 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -386,6 +386,8 @@ export const colors = {
       amber: 'rgb(var(--solid-amber) / <alpha-value>)',
       blue: 'rgb(var(--solid-blue) / <alpha-value>)',
       iris: 'rgb(var(--solid-iris) / <alpha-value>)',
+      purple: 'rgb(var(--solid-purple) / <alpha-value>)',
+      red: 'rgb(var(--solid-red) / <alpha-value>)',
     },
     alpha: {
       1: 'rgba(var(--alpha-1))',