feat: Use inbox image as avatar for the bot (#6859)

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -439,7 +439,8 @@
       "LABEL": "Features",
       "DISPLAY_FILE_PICKER": "Display file picker on the widget",
       "DISPLAY_EMOJI_PICKER": "Display emoji picker on the widget",
-      "ALLOW_END_CONVERSATION": "Allow users to end conversation from the widget"
+      "ALLOW_END_CONVERSATION": "Allow users to end conversation from the widget",
+      "USE_INBOX_AVATAR_FOR_BOT": "Use inbox name and avatar for the bot"
     },
     "SETTINGS_POPUP": {
       "MESSENGER_HEADING": "Messenger Script",

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -320,6 +320,17 @@
             {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
           </label>
         </div>
+        <div v-if="isAWebWidgetInbox" class="settings-item settings-item">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="use_inbox_avatar_for_bot"
+            @input="handleFeatureFlag"
+          />
+          <label for="emoji_picker">
+            {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
+          </label>
+        </div>
 
         <woot-submit-button
           v-if="isAPIInbox"

app/javascript/widget/components/AgentMessage.vue

@@ -119,13 +119,15 @@ export default {
       return type;
     },
     agentName() {
-      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
-        return 'Bot';
-      }
       if (this.message.sender) {
         return this.message.sender.available_name || this.message.sender.name;
       }
-      return 'Bot';
+
+      if (this.useInboxAvatarForBot) {
+        return this.channelConfig.websiteName;
+      }
+
+      return this.$t('UNREAD_VIEW.BOT');
     },
     avatarUrl() {
       // eslint-disable-next-line

app/javascript/widget/components/UnreadMessage.vue

@@ -78,6 +78,9 @@ export default {
         const { available_name: availableName, name } = this.sender;
         return availableName || name;
       }
+      if (this.useInboxAvatarForBot) {
+        return this.channelConfig.websiteName;
+      }
       return this.$t('UNREAD_VIEW.BOT');
     },
     availabilityStatus() {

app/javascript/widget/mixins/configMixin.js

@@ -1,7 +1,9 @@
 export default {
   computed: {
     useInboxAvatarForBot() {
-      return window.chatwootWidgetDefaults.useInboxAvatarForBot;
+      return this.channelConfig.enabledFeatures.includes(
+        'use_inbox_avatar_for_bot'
+      );
     },
     hasAConnectedAgentBot() {
       return !!window.chatwootWebChannel.hasAConnectedAgentBot;

app/javascript/widget/mixins/specs/configMixin.spec.js

@@ -22,15 +22,16 @@ const preChatFields = [
 global.chatwootWebChannel = {
   avatarUrl: 'https://test.url',
   hasAConnectedAgentBot: 'AgentBot',
-  enabledFeatures: ['emoji_picker', 'attachments', 'end_conversation'],
+  enabledFeatures: [
+    'emoji_picker',
+    'attachments',
+    'end_conversation',
+    'use_inbox_avatar_for_bot',
+  ],
   preChatFormOptions: { pre_chat_fields: preChatFields, pre_chat_message: '' },
   preChatFormEnabled: true,
 };
 
-global.chatwootWidgetDefaults = {
-  useInboxAvatarForBot: true,
-};
-
 describe('configMixin', () => {
   test('returns config', () => {
     const Component = {
@@ -51,7 +52,12 @@ describe('configMixin', () => {
     expect(wrapper.vm.channelConfig).toEqual({
       avatarUrl: 'https://test.url',
       hasAConnectedAgentBot: 'AgentBot',
-      enabledFeatures: ['emoji_picker', 'attachments', 'end_conversation'],
+      enabledFeatures: [
+        'emoji_picker',
+        'attachments',
+        'end_conversation',
+        'use_inbox_avatar_for_bot',
+      ],
       preChatFormOptions: {
         pre_chat_message: '',
         pre_chat_fields: preChatFields,