feat: update colors for v4 (#10660)

Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/message/Message.vue

@@ -431,12 +431,12 @@ provideMessageContext({
   <div
     v-if="shouldRenderMessage"
     :id="`message${props.id}`"
-    class="flex w-full message-bubble-container"
+    class="flex w-full message-bubble-container mb-2"
     :data-message-id="props.id"
     :class="[
       flexOrientationClass,
-      shouldGroupWithNext ? 'group-with-next mb-2' : 'mb-4',
       {
+        'group-with-next': shouldGroupWithNext,
         'bg-n-alpha-1': showBackgroundHighlight,
       },
     ]"
@@ -449,7 +449,7 @@ provideMessageContext({
       :class="[
         gridClass,
         {
-          'gap-y-2': !shouldGroupWithNext,
+          'gap-y-2': contentAttributes.externalError,
           'w-full': variant === MESSAGE_VARIANTS.EMAIL,
         },
       ]"

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -28,10 +28,7 @@ const senderName = computed(() => {
 </script>
 
 <template>
-  <BaseBubble
-    class="overflow-hidden p-3 !bg-n-solid-2 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.05)]"
-    data-bubble-name="attachment"
-  >
+  <BaseBubble class="overflow-hidden p-3" data-bubble-name="attachment">
     <div class="grid gap-4 min-w-64">
       <div class="grid gap-3 z-20">
         <div
@@ -57,7 +54,7 @@ const senderName = computed(() => {
           </slot>
         </div>
       </div>
-      <div v-if="action">
+      <div v-if="action" class="mb-2">
         <a
           v-if="action.href"
           :href="action.href"

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -21,7 +21,7 @@ const showQuotedMessage = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
 onMounted(() => {
-  isExpandable.value = contentContainer.value.scrollHeight > 400;
+  isExpandable.value = contentContainer.value?.scrollHeight > 400;
 });
 
 const isOutgoing = computed(() => {

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -26,7 +26,7 @@ const currentTime = ref(0);
 const duration = ref(0);
 
 const onLoadedMetadata = () => {
-  duration.value = audioPlayer.value.duration;
+  duration.value = audioPlayer.value?.duration;
 };
 
 const formatTime = time => {