fix: v4 ui issues (#10652)
This PR has the following fixes 1. Remove leading `:` in inbox view push message content 2. Styles for block quotes in text 3. Better condition for checking bot message 4. Use dompurify
This commit is contained in:
@@ -80,6 +80,10 @@ const messageClasses = computed(() => ({
|
||||
}));
|
||||
|
||||
const formatPushMessage = message => {
|
||||
if (message.startsWith(': ')) {
|
||||
return message.slice(2);
|
||||
}
|
||||
|
||||
return message.replace(/^([^:]+):/g, (match, name) => {
|
||||
return `<span class="${messageClasses.value.emphasis}">${name}:</span>`;
|
||||
});
|
||||
|
||||
@@ -152,7 +152,8 @@ const variant = computed(() => {
|
||||
if (props.contentAttributes?.isUnsupported)
|
||||
return MESSAGE_VARIANTS.UNSUPPORTED;
|
||||
|
||||
if (!props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT) {
|
||||
const isBot = !props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT;
|
||||
if (isBot && props.messageType === MESSAGE_TYPES.OUTGOING) {
|
||||
return MESSAGE_VARIANTS.BOT;
|
||||
}
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ const onVideoLoadError = () => {
|
||||
|
||||
<template>
|
||||
<BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
|
||||
<div v-if="content" class="mb-2" v-html="formattedContent" />
|
||||
<div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
|
||||
<img
|
||||
v-if="!hasImgStoryError"
|
||||
class="rounded-lg max-w-80"
|
||||
|
||||
@@ -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 [&>ol]:list-inside [&>dl]:list-inside [&>ol]:list-decimal [&>ul]:list-disc"
|
||||
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 [&>blockquote]:border-l-4 [&>blockquote]:border-n-alpha-black1 [&>blockquote]:pl-2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user