Merge branch 'develop' into feat/support-pdf-upload-faq-gen-fe

app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.story.vue

@@ -0,0 +1,28 @@
+<script setup>
+import SettingsHeader from './SettingsHeader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/PageComponents/SettingsHeader"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div class="px-6 py-4 bg-n-background">
+        <SettingsHeader
+          heading="General Settings"
+          description="Configure general preferences for your workspace."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Long Description">
+      <div class="px-6 py-4 bg-n-background">
+        <SettingsHeader
+          heading="Integrations"
+          description="Manage and configure third-party integrations such as Slack, Zapier, and Webhooks to enhance your workflow."
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  heading: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <header class="flex flex-col items-start gap-2">
+    <h2 class="text-n-slate-12 text-base font-medium">{{ heading }}</h2>
+    <p class="text-n-slate-11 text-sm">{{ description }}</p>
+  </header>
+</template>

app/javascript/entrypoints/sdk.js

@@ -72,6 +72,13 @@ const runSDK = ({ baseUrl, websiteToken }) => {
     widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
     resetTriggered: false,
     darkMode: getDarkMode(chatwootSettings.darkMode),
+    welcomeTitle: chatwootSettings.welcomeTitle || '',
+    welcomeDescription: chatwootSettings.welcomeDescription || '',
+    availableMessage: chatwootSettings.availableMessage || '',
+    unavailableMessage: chatwootSettings.unavailableMessage || '',
+    enableFileUpload: chatwootSettings.enableFileUpload ?? true,
+    enableEmojiPicker: chatwootSettings.enableEmojiPicker ?? true,
+    enableEndConversation: chatwootSettings.enableEndConversation ?? true,
 
     toggle(state) {
       IFrameHelper.events.toggleBubble(state);

app/javascript/sdk/IFrameHelper.js

@@ -166,6 +166,13 @@ export const IFrameHelper = {
         darkMode: window.$chatwoot.darkMode,
         showUnreadMessagesDialog: window.$chatwoot.showUnreadMessagesDialog,
         campaignsSnoozedTill,
+        welcomeTitle: window.$chatwoot.welcomeTitle,
+        welcomeDescription: window.$chatwoot.welcomeDescription,
+        availableMessage: window.$chatwoot.availableMessage,
+        unavailableMessage: window.$chatwoot.unavailableMessage,
+        enableFileUpload: window.$chatwoot.enableFileUpload,
+        enableEmojiPicker: window.$chatwoot.enableEmojiPicker,
+        enableEndConversation: window.$chatwoot.enableEndConversation,
       });
       IFrameHelper.onLoad({
         widgetColor: message.config.channelConfig.widgetColor,

app/javascript/shared/components/ResizableTextArea.vue

@@ -69,7 +69,7 @@ export default {
     },
   },
   watch: {
-    value() {
+    modelValue() {
       this.resizeTextarea();
       // 🚨 watch triggers every time the value is changed, we cannot set this to focus then
       // when this runs, it sets the cursor to the end of the body, ignoring the signature

app/javascript/widget/components/ChatAttachment.vue

@@ -24,7 +24,10 @@ export default {
     return { isUploading: false };
   },
   computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+      shouldShowFilePicker: 'appConfig/getShouldShowFilePicker',
+    }),
     fileUploadSizeLimit() {
       return MAXIMUM_FILE_UPLOAD_SIZE;
     },
@@ -40,6 +43,9 @@ export default {
   },
   methods: {
     handleClipboardPaste(e) {
+      // If file picker is not enabled, do not allow paste
+      if (!this.shouldShowFilePicker) return;
+
       const items = (e.clipboardData || e.originalEvent.clipboardData).items;
       // items is a DataTransferItemList object which does not have forEach method
       const itemsArray = Array.from(items);

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -47,11 +47,11 @@ const containerClasses = computed(() => [
     </div>
     <h2
       v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12"
+      class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12 line-clamp-4"
     />
     <p
       v-dompurify-html="formatMessage(introBody)"
-      class="text-lg leading-normal text-n-slate-11 [&_a]:underline"
+      class="text-lg leading-normal text-n-slate-11 [&_a]:underline line-clamp-6"
     />
   </header>
 </template>

app/javascript/widget/components/ChatInputWrap.vue

@@ -41,9 +41,15 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
       isWidgetOpen: 'appConfig/getIsWidgetOpen',
+      shouldShowFilePicker: 'appConfig/getShouldShowFilePicker',
+      shouldShowEmojiPicker: 'appConfig/getShouldShowEmojiPicker',
     }),
     showAttachment() {
-      return this.hasAttachmentsEnabled && this.userInput.length === 0;
+      return (
+        this.shouldShowFilePicker &&
+        this.hasAttachmentsEnabled &&
+        this.userInput.length === 0
+      );
     },
     showSendButton() {
       return this.userInput.length > 0;
@@ -143,7 +149,7 @@ export default {
         :on-attach="onSendAttachment"
       />
       <button
-        v-if="hasEmojiPickerEnabled"
+        v-if="shouldShowEmojiPicker && hasEmojiPickerEnabled"
         class="flex items-center justify-center min-h-8 min-w-8"
         :aria-label="$t('EMOJI.ARIA_LABEL')"
         @click="toggleEmojiPicker"
@@ -158,7 +164,7 @@ export default {
         />
       </button>
       <EmojiInput
-        v-if="showEmojiPicker"
+        v-if="shouldShowEmojiPicker && showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
         :on-click="emojiOnClick"
         @keydown.esc="hideEmojiPicker"

app/javascript/widget/components/HeaderActions.vue

@@ -23,6 +23,7 @@ export default {
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
+      canUserEndConversation: 'appConfig/getCanUserEndConversation',
     }),
     canLeaveConversation() {
       return [
@@ -82,6 +83,7 @@ export default {
     <button
       v-if="
         canLeaveConversation &&
+        canUserEndConversation &&
         hasEndConversationEnabled &&
         showEndConversationButton
       "

app/javascript/widget/components/TeamAvailability.vue

@@ -29,6 +29,8 @@ export default {
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
+      availableMessage: 'appConfig/getAvailableMessage',
+      unavailableMessage: 'appConfig/getUnavailableMessage',
     }),
     textColor() {
       return getContrastingTextColor(this.widgetColor);
@@ -40,6 +42,11 @@ export default {
         id: agent.id,
       }));
     },
+    headerMessage() {
+      return this.isOnline
+        ? this.availableMessage || this.$t('TEAM_AVAILABILITY.ONLINE')
+        : this.unavailableMessage || this.$t('TEAM_AVAILABILITY.OFFLINE');
+    },
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
@@ -71,12 +78,8 @@ export default {
   >
     <div class="flex items-center justify-between gap-2">
       <div class="flex flex-col gap-1">
-        <div class="font-medium text-n-slate-12">
-          {{
-            isOnline
-              ? $t('TEAM_AVAILABILITY.ONLINE')
-              : $t('TEAM_AVAILABILITY.OFFLINE')
-          }}
+        <div class="font-medium text-n-slate-12 line-clamp-2">
+          {{ headerMessage }}
         </div>
         <div class="text-n-slate-11">
           {{ replyWaitMessage }}

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -119,8 +119,10 @@ export default {
       >
         <ChatHeaderExpanded
           v-if="!isHeaderCollapsed"
-          :intro-heading="channelConfig.welcomeTitle"
-          :intro-body="channelConfig.welcomeTagline"
+          :intro-heading="appConfig.welcomeTitle || channelConfig.welcomeTitle"
+          :intro-body="
+            appConfig.welcomeDescription || channelConfig.welcomeTagline
+          "
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"
         />

app/javascript/widget/store/modules/appConfig.js

@@ -21,6 +21,13 @@ const state = {
   widgetStyle: 'standard',
   darkMode: 'light',
   isUpdatingRoute: false,
+  welcomeTitle: '',
+  welcomeDescription: '',
+  availableMessage: '',
+  unavailableMessage: '',
+  enableFileUpload: true,
+  enableEmojiPicker: true,
+  enableEndConversation: true,
 };
 
 export const getters = {
@@ -34,6 +41,13 @@ export const getters = {
   darkMode: $state => $state.darkMode,
   getShowUnreadMessagesDialog: $state => $state.showUnreadMessagesDialog,
   getIsUpdatingRoute: _state => _state.isUpdatingRoute,
+  getWelcomeHeading: $state => $state.welcomeTitle,
+  getWelcomeTagline: $state => $state.welcomeDescription,
+  getAvailableMessage: $state => $state.availableMessage,
+  getUnavailableMessage: $state => $state.unavailableMessage,
+  getShouldShowFilePicker: $state => $state.enableFileUpload,
+  getShouldShowEmojiPicker: $state => $state.enableEmojiPicker,
+  getCanUserEndConversation: $state => $state.enableEndConversation,
 };
 
 export const actions = {
@@ -46,6 +60,13 @@ export const actions = {
       showUnreadMessagesDialog,
       widgetStyle = 'rounded',
       darkMode = 'light',
+      welcomeTitle = '',
+      welcomeDescription = '',
+      availableMessage = '',
+      unavailableMessage = '',
+      enableFileUpload = true,
+      enableEmojiPicker = true,
+      enableEndConversation = true,
     }
   ) {
     commit(SET_WIDGET_APP_CONFIG, {
@@ -55,6 +76,13 @@ export const actions = {
       showUnreadMessagesDialog: !!showUnreadMessagesDialog,
       widgetStyle,
       darkMode,
+      welcomeTitle,
+      welcomeDescription,
+      availableMessage,
+      unavailableMessage,
+      enableFileUpload,
+      enableEmojiPicker,
+      enableEndConversation,
     });
   },
   toggleWidgetOpen({ commit }, isWidgetOpen) {
@@ -90,6 +118,13 @@ export const mutations = {
     $state.darkMode = data.darkMode;
     $state.locale = data.locale || $state.locale;
     $state.showUnreadMessagesDialog = data.showUnreadMessagesDialog;
+    $state.welcomeTitle = data.welcomeTitle;
+    $state.welcomeDescription = data.welcomeDescription;
+    $state.availableMessage = data.availableMessage;
+    $state.unavailableMessage = data.unavailableMessage;
+    $state.enableFileUpload = data.enableFileUpload;
+    $state.enableEmojiPicker = data.enableEmojiPicker;
+    $state.enableEndConversation = data.enableEndConversation;
   },
   [TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
     $state.isWidgetOpen = isWidgetOpen;

app/javascript/widget/store/modules/specs/appConfig/getters.spec.js

@@ -19,6 +19,48 @@ describe('#getters', () => {
       expect(getters.getShowUnreadMessagesDialog(state)).toEqual(true);
     });
   });
+  describe('#getAvailableMessage', () => {
+    it('returns correct value', () => {
+      const state = { availableMessage: 'We reply quickly' };
+      expect(getters.getAvailableMessage(state)).toEqual('We reply quickly');
+    });
+  });
+  describe('#getWelcomeHeading', () => {
+    it('returns correct value', () => {
+      const state = { welcomeTitle: 'Hello!' };
+      expect(getters.getWelcomeHeading(state)).toEqual('Hello!');
+    });
+  });
+  describe('#getWelcomeTagline', () => {
+    it('returns correct value', () => {
+      const state = { welcomeDescription: 'Welcome to our site' };
+      expect(getters.getWelcomeTagline(state)).toEqual('Welcome to our site');
+    });
+  });
+  describe('#getShouldShowFilePicker', () => {
+    it('returns correct value', () => {
+      const state = { enableFileUpload: true };
+      expect(getters.getShouldShowFilePicker(state)).toEqual(true);
+    });
+  });
+  describe('#getShouldShowEmojiPicker', () => {
+    it('returns correct value', () => {
+      const state = { enableEmojiPicker: true };
+      expect(getters.getShouldShowEmojiPicker(state)).toEqual(true);
+    });
+  });
+  describe('#getCanUserEndConversation', () => {
+    it('returns correct value', () => {
+      const state = { enableEndConversation: true };
+      expect(getters.getCanUserEndConversation(state)).toEqual(true);
+    });
+  });
+  describe('#getUnavailableMessage', () => {
+    it('returns correct value', () => {
+      const state = { unavailableMessage: 'We are offline' };
+      expect(getters.getUnavailableMessage(state)).toEqual('We are offline');
+    });
+  });
   describe('#getIsUpdatingRoute', () => {
     it('returns correct value', () => {
       const state = { isUpdatingRoute: true };