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>
2025-06-06 00:43:46 +05:30
parent 2f40f95f77
commit 4c0d096e4d
8 changed files with 67 additions and 58 deletions
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -4,38 +4,14 @@ import { computed, ref, watch, useSlots } from 'vue';
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';

 const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  focusOnMount: {
-    type: Boolean,
-    default: false,
-  },
-  maxLength: {
-    type: Number,
-    default: 200,
-  },
-  showCharacterCount: {
-    type: Boolean,
-    default: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-    default: '',
-  },
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  focusOnMount: { type: Boolean, default: false },
+  maxLength: { type: Number, default: 200 },
+  showCharacterCount: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  message: { type: String, default: '' },
  messageType: {
    type: String,
    default: 'info',
@@ -43,6 +19,7 @@ const props = defineProps({
  },
  enableVariables: { type: Boolean, default: false },
  enableCannedResponses: { type: Boolean, default: true },
+  enabledMenuOptions: { type: Array, default: () => [] },
 });

 const emit = defineEmits(['update:modelValue']);
@@ -120,6 +97,7 @@ watch(
        :disabled="disabled"
        :enable-variables="enableVariables"
        :enable-canned-responses="enableCannedResponses"
+        :enabled-menu-options="enabledMenuOptions"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
--- a/app/javascript/dashboard/constants/editor.js
+++ b/app/javascript/dashboard/constants/editor.js
@@ -33,6 +33,14 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [
  'code',
 ];

+export const WIDGET_BUILDER_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+];
+
 export const MESSAGE_EDITOR_IMAGE_RESIZES = [
  {
    name: 'Small',
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -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>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -23,6 +23,8 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';

 export default {
  components: {
@@ -43,6 +45,7 @@ export default {
    NextButton,
    InstagramReauthorize,
    DuplicateInboxBanner,
+    Editor,
  },
  mixins: [inboxMixin],
  setup() {
@@ -70,6 +73,7 @@ export default {
      selectedTabIndex: 0,
      selectedPortalSlug: '',
      showBusinessNameInput: false,
+      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
    };
  },
  computed: {
@@ -480,10 +484,10 @@ export default {
            "
          />

-          <woot-input
+          <Editor
            v-if="isAWebWidgetInbox"
            v-model="channelWelcomeTagline"
-            class="pb-4"
+            class="mb-4"
            :label="
              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
            "
@@ -492,6 +496,8 @@ export default {
                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
              )
            "
+            :max-length="255"
+            :enabled-menu-options="welcomeTaglineEditorMenuOptions"
          />

          <label v-if="isAWebWidgetInbox" class="pb-4">
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -7,13 +7,16 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
+import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';

 export default {
  components: {
    Widget,
    InputRadioGroup,
    NextButton,
+    Editor,
  },
  props: {
    inbox: {
@@ -71,6 +74,7 @@ export default {
          checked: false,
        },
      ],
+      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
    };
  },
  computed: {
@@ -310,7 +314,7 @@ export default {
                )
              "
            />
-            <woot-input
+            <Editor
              v-model="welcomeTagline"
              :label="
                $t(
@@ -322,6 +326,9 @@ export default {
                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
                )
              "
+              :max-length="255"
+              :enabled-menu-options="welcomeTaglineEditorMenuOptions"
+              class="mb-4"
            />
            <label>
              {{
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -5,12 +5,15 @@ import router from '../../../../index';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
+import { WIDGET_BUILDER_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';

 export default {
  components: {
    PageHeader,
    GreetingsEditor,
    NextButton,
+    Editor,
  },
  data() {
    return {
@@ -21,6 +24,7 @@ export default {
      channelWelcomeTagline: '',
      greetingEnabled: false,
      greetingMessage: '',
+      welcomeTaglineEditorMenuOptions: WIDGET_BUILDER_EDITOR_MENU_OPTIONS,
    };
  },
  computed: {
@@ -134,22 +138,21 @@ export default {
          />
        </label>
      </div>
-      <div class="w-full">
-        <label>
-          {{
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-          }}
-          <input
-            v-model="channelWelcomeTagline"
-            type="text"
-            :placeholder="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-              )
-            "
-          />
-        </label>
-      </div>
+      <Editor
+        v-model="channelWelcomeTagline"
+        :label="
+          $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+        "
+        :placeholder="
+          $t(
+            'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+          )
+        "
+        :max-length="255"
+        :enabled-menu-options="welcomeTaglineEditorMenuOptions"
+        class="mb-4"
+      />
+
      <label class="w-full">
        {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL') }}
        <select v-model="greetingEnabled">
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,6 +1,7 @@
 <script setup>
 import HeaderActions from './HeaderActions.vue';
 import { computed } from 'vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';

 const props = defineProps({
  avatarUrl: {
@@ -21,6 +22,8 @@ const props = defineProps({
  },
 });

+const { formatMessage } = useMessageFormatter();
+
 const containerClasses = computed(() => [
  props.avatarUrl ? 'justify-between' : 'justify-end',
 ]);
@@ -47,8 +50,8 @@ const containerClasses = computed(() => [
      class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12"
    />
    <p
-      v-dompurify-html="introBody"
-      class="text-lg leading-normal text-n-slate-11"
+      v-dompurify-html="formatMessage(introBody)"
+      class="text-lg leading-normal text-n-slate-11 [&_a]:underline"
    />
  </header>
 </template>