Files
chatwoot/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
Shivam Mishra 91b1015457 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
2025-01-08 09:26:40 +05:30

32 lines
808 B
Vue

<script setup>
import { computed } from 'vue';
import { useMessageContext } from '../../provider.js';
import MessageFormatter from 'shared/helpers/MessageFormatter.js';
import { MESSAGE_VARIANTS } from '../../constants';
const props = defineProps({
content: {
type: String,
required: true,
},
});
const { variant } = useMessageContext();
const formattedContent = computed(() => {
if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
return props.content;
}
return new MessageFormatter(props.content).formattedMessage;
});
</script>
<template>
<span
v-dompurify-html="formattedContent"
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>