feat: Improve CSAT responses (#11485)

# Pull Request Template

## Description

This PR introduces basic customization options for the CSAT survey:

* **Display Type**: Option to use star ratings instead of emojis.
* **Message Text**: Customize the survey message (up to 200 characters).
* **Survey Rules**: Send surveys based on labels — trigger when a
conversation has or doesn't have a specific label.

Fixes
https://linear.app/chatwoot/document/improve-csat-responses-a61cf30e054e

## Type of change

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

## How Has This Been Tested?

### Loom videos

**Website Channel (Widget)**

https://www.loom.com/share/7f47836cde7940ae9d17b7997d060a18?sid=aad2ad0a-140a-4a09-8829-e01fa2e102c5

**Email Channel (Survey link)**

https://www.loom.com/share/e92f4c4c0f73417ba300a25885e093ce?sid=4bb006f0-1c2a-4352-a232-8bf684e3d757

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] 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
- [x] 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: Pranav <pranavrajs@gmail.com>

app/javascript/survey/App.vue

@@ -10,7 +10,7 @@ export default {
 </script>
 
 <template>
-  <div id="app" class="woot-survey-wrap min-h-screen">
+  <div id="app" dir="ltr" class="woot-survey-wrap min-h-screen">
     <Response />
   </div>
 </template>

app/javascript/survey/assets/scss/woot.scss

@@ -3,6 +3,7 @@
 @import 'tailwindcss/utilities';
 @import 'widget/assets/scss/reset';
 @import 'shared/assets/fonts/widget_fonts';
+@import 'dashboard/assets/scss/next-colors';
 
 html,
 body {

app/javascript/survey/components/Banner.vue

@@ -24,7 +24,7 @@ export default {
       class="ion-checkmark-circled text-3xl text-green-500 mr-1"
     />
     <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
-    <label class="text-base font-medium text-black-800 mt-4 mb-4">
+    <label class="text-base font-medium text-n-slate-12 mt-4 mb-4">
       {{ message }}
     </label>
   </div>

app/javascript/survey/components/Feedback.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="mt-6">
-    <label class="text-base font-medium text-black-800">
+    <label class="text-base font-medium text-n-slate-12">
       {{ $t('SURVEY.FEEDBACK.LABEL') }}
     </label>
     <TextArea

app/javascript/survey/views/Response.vue

@@ -5,8 +5,11 @@ import Spinner from 'shared/components/Spinner.vue';
 import Rating from 'survey/components/Rating.vue';
 import Feedback from 'survey/components/Feedback.vue';
 import Banner from 'survey/components/Banner.vue';
+import StarRating from 'shared/components/StarRating.vue';
 import { getSurveyDetails, updateSurvey } from 'survey/api/survey';
 
+import { CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
+
 export default {
   name: 'Response',
   components: {
@@ -15,6 +18,7 @@ export default {
     Spinner,
     Banner,
     Feedback,
+    StarRating,
   },
   data() {
     return {
@@ -26,6 +30,8 @@ export default {
       isUpdating: false,
       logo: '',
       inboxName: '',
+      displayType: CSAT_DISPLAY_TYPES.EMOJI,
+      messageContent: '',
     };
   },
   computed: {
@@ -42,16 +48,22 @@ export default {
     isButtonDisabled() {
       return !(this.selectedRating && this.feedback);
     },
+    isEmojiType() {
+      return this.displayType === CSAT_DISPLAY_TYPES.EMOJI;
+    },
+    isStarType() {
+      return this.displayType === CSAT_DISPLAY_TYPES.STAR;
+    },
     shouldShowBanner() {
       return this.isRatingSubmitted || this.errorMessage;
     },
     enableFeedbackForm() {
       return !this.isFeedbackSubmitted && this.isRatingSubmitted;
     },
-    shouldShowErrorMesage() {
+    shouldShowErrorMessage() {
       return !!this.errorMessage;
     },
-    shouldShowSuccessMesage() {
+    shouldShowSuccessMessage() {
       return !!this.isRatingSubmitted;
     },
     message() {
@@ -82,6 +94,10 @@ export default {
         this.surveyDetails = result?.data?.csat_survey_response;
         this.selectedRating = this.surveyDetails?.rating;
         this.feedbackMessage = this.surveyDetails?.feedback_message || '';
+        this.displayType = result.data.display_type || CSAT_DISPLAY_TYPES.EMOJI;
+        this.messageContent =
+          result.data.content ||
+          this.$t('SURVEY.DESCRIPTION', { inboxName: this.inboxName });
         this.setLocale(result.data.locale);
       } catch (error) {
         const errorMessage = error?.response?.data?.message;
@@ -129,41 +145,49 @@ export default {
 <template>
   <div
     v-if="isLoading"
-    class="flex items-center justify-center flex-1 h-full min-h-screen bg-black-25"
+    class="flex items-center justify-center flex-1 h-full min-h-screen bg-n-background"
   >
     <Spinner size="" />
   </div>
   <div
     v-else
-    class="flex items-center justify-center w-full h-full min-h-screen overflow-auto bg-slate-50"
+    class="flex items-center justify-center w-full h-full min-h-screen overflow-auto bg-n-background"
   >
     <div
-      class="flex flex-col w-full h-full bg-white rounded-lg shadow-lg lg:w-2/5 lg:h-auto"
+      class="flex flex-col w-full h-full bg-n-solid-1 rounded-lg border border-solid border-n-weak shadow-md lg:w-2/5 lg:h-auto"
     >
       <div class="w-full px-12 pt-12 pb-6 m-auto my-0">
         <img v-if="logo" :src="logo" alt="Chatwoot logo" class="mb-6 logo" />
         <p
           v-if="!isRatingSubmitted"
-          class="mb-8 text-lg leading-relaxed text-black-700"
+          class="mb-8 text-lg leading-relaxed text-n-slate-12"
         >
-          {{ $t('SURVEY.DESCRIPTION', { inboxName }) }}
+          {{ messageContent }}
         </p>
         <Banner
           v-if="shouldShowBanner"
-          :show-success="shouldShowSuccessMesage"
-          :show-error="shouldShowErrorMesage"
+          :show-success="shouldShowSuccessMessage"
+          :show-error="shouldShowErrorMessage"
           :message="message"
         />
         <label
           v-if="!isRatingSubmitted"
-          class="mb-4 text-base font-medium text-black-800"
+          class="mb-4 text-base font-medium text-n-slate-11"
         >
           {{ $t('SURVEY.RATING.LABEL') }}
         </label>
         <Rating
+          v-if="isEmojiType"
           :selected-rating="selectedRating"
           @select-rating="selectRating"
         />
+        <StarRating
+          v-if="isStarType"
+          :selected-rating="selectedRating"
+          :is-disabled="isRatingSubmitted"
+          class="[&>button>span]:text-4xl !justify-start !px-0"
+          @select-rating="selectRating"
+        />
         <Feedback
           v-if="enableFeedbackForm"
           :is-updating="isUpdating"