feat: fixes for bubble UI (#10643)

This PR applies the following fixes

1. Images in emails have margins, causing unnecessary gaps when 1x1px
images are loaded (ref:
[42111](https://app.chatwoot.com/app/accounts/1/conversations/42111?messageId=96215315))
2. Two adjacent `<br>` tags would add a huge gap, fixed this (ref:
[42111](https://app.chatwoot.com/app/accounts/1/conversations/42111?messageId=96215315))
3. Color for outgoing emails is wrong (ref:
[41621](https://app.chatwoot.com/app/accounts/1/conversations/41621?messageId=93560032))
4. Wrong list styles (see:
[42372](https://app.chatwoot.com/app/accounts/1/conversations/42372?messageId=96208130))
5. Wrong bubble color when outgoing message is sent by a bot or captain
6. Wrong avatar when outgoing message is sent by a bot or captain

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

@@ -3,6 +3,7 @@ import { computed, ref, toRefs } from 'vue';
 import { provideMessageContext } from './provider.js';
 import { useTrack } from 'dashboard/composables';
 import { emitter } from 'shared/helpers/mitt';
+import { useI18n } from 'vue-i18n';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
@@ -127,6 +128,8 @@ const props = defineProps({
 
 const contextMenuPosition = ref({});
 const showContextMenu = ref(false);
+const { t } = useI18n();
+
 /**
  * Computes the message variant based on props
  * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
@@ -149,6 +152,10 @@ const variant = computed(() => {
   if (props.contentAttributes?.isUnsupported)
     return MESSAGE_VARIANTS.UNSUPPORTED;
 
+  if (!props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT) {
+    return MESSAGE_VARIANTS.BOT;
+  }
+
   const variants = {
     [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
     [MESSAGE_TYPES.ACTIVITY]: MESSAGE_VARIANTS.ACTIVITY,
@@ -353,6 +360,27 @@ function handleReplyTo() {
   emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, props);
 }
 
+const avatarInfo = computed(() => {
+  if (!props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT) {
+    return {
+      name: t('CONVERSATION.BOT'),
+      src: '',
+    };
+  }
+
+  if (props.sender) {
+    return {
+      name: props.sender.name,
+      src: props.sender?.thumbnail,
+    };
+  }
+
+  return {
+    name: '',
+    src: '',
+  };
+});
+
 provideMessageContext({
   ...toRefs(props),
   isPrivate: computed(() => props.private),
@@ -391,11 +419,7 @@ provideMessageContext({
         v-if="!shouldGroupWithNext && shouldShowAvatar"
         class="[grid-area:avatar] flex items-end"
       >
-        <Avatar
-          :name="sender ? sender.name : ''"
-          :src="sender?.thumbnail"
-          :size="24"
-        />
+        <Avatar v-bind="avatarInfo" :size="24" />
       </div>
       <div
         class="[grid-area:bubble] flex"

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

@@ -69,7 +69,11 @@ const textToShow = computed(() => {
             {{ $t('EMAIL_HEADER.EXPAND') }}
           </button>
         </div>
-        <FormattedContent v-if="isOutgoing && content" :content="content" />
+        <FormattedContent
+          v-if="isOutgoing && content"
+          class="text-n-slate-12"
+          :content="content"
+        />
         <template v-else>
           <Letter
             v-if="showQuotedMessage"

app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue

@@ -26,6 +26,6 @@ const formattedContent = computed(() => {
 <template>
   <span
     v-dompurify-html="formattedContent"
-    class="[&_.link]:text-n-slate-11 [&_.link]:underline [&>p:last-child]:mb-0 [&>ul]:list-inside"
+    class="[&_.link]:text-n-slate-11 [&_.link]:underline [&>p:last-child]:mb-0 [&>ul]:list-inside [&>ol]:list-inside [&>dl]:list-inside [&>ol]:list-decimal [&>ul]:list-disc"
   />
 </template>

app/javascript/dashboard/components-next/message/constants.js

@@ -20,6 +20,7 @@ export const MESSAGE_VARIANTS = {
 export const SENDER_TYPES = {
   CONTACT: 'Contact',
   USER: 'User',
+  AGENT_BOT: 'agent_bot',
 };
 
 export const ORIENTATION = {

tailwind.config.js

@@ -54,6 +54,10 @@ const tailwindConfig = {
               },
             },
 
+            'br + br': {
+              display: 'none',
+            },
+
             strong: {
               color: 'rgb(var(--slate-12))',
               fontWeight: '700',
@@ -144,6 +148,8 @@ const tailwindConfig = {
             img: {
               maxWidth: '100%',
               height: 'auto',
+              marginTop: 'unset',
+              marginBottom: 'unset',
             },
           },
         },