feat: Add rich text support for widget welcome tagline (#11666)

# Pull Request Template

## Description

This PR adds rich text support for the widget welcome tagline, enabling
users to format the message using basic text styling (bold, italics,
links, etc.)
https://github.com/chatwoot/chatwoot/pull/11629#issuecomment-2932448975

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Screenshots
<img width="1100" alt="image"
src="https://github.com/user-attachments/assets/eef2bfd3-7bc9-4aea-b21d-078f6b29f334"
/>
<img width="448" alt="image"
src="https://github.com/user-attachments/assets/713c6b07-d0dc-4c8f-bfba-cd119a858375"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Sivin Varghese
2025-06-06 00:43:46 +05:30
committed by GitHub
parent 2f40f95f77
commit 4c0d096e4d
8 changed files with 67 additions and 58 deletions

View File

@@ -1,5 +1,6 @@
<script setup>
import { computed } from 'vue';
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
const props = defineProps({
config: {
@@ -8,6 +9,8 @@ const props = defineProps({
},
});
const { formatMessage } = useMessageFormatter();
const isDefaultScreen = computed(() => {
return (
props.config.isDefaultScreen &&
@@ -53,12 +56,13 @@ const isDefaultScreen = computed(() => {
</div>
</div>
<div v-if="isDefaultScreen" class="overflow-auto max-h-60">
<h2 class="mb-2 text-2xl break-words text-slate-900 dark:text-white">
<h2 class="mb-2 text-2xl break-words text-n-slate-12">
{{ config.welcomeHeading }}
</h2>
<p class="text-sm break-words text-slate-600 dark:text-slate-100">
{{ config.welcomeTagline }}
</p>
<p
v-dompurify-html="formatMessage(config.welcomeTagline)"
class="text-sm break-words text-n-slate-11 [&_a]:!text-n-slate-11 [&_a]:underline"
/>
</div>
</div>
</div>