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"