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

.env.example

@@ -161,9 +161,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # for mobile apps
 # FCM_SERVER_KEY=
 
-## Bot Customizations
-USE_INBOX_AVATAR_FOR_BOT=true
-
 ### APM and Error Monitoring configurations
 ## Elastic APM
 ## https://www.elastic.co/guide/en/apm/agent/ruby/current/getting-started-rails.html

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,

app/models/channel/web_widget.rb

@@ -48,6 +48,7 @@ class Channel::WebWidget < ApplicationRecord
   has_flags 1 => :attachments,
             2 => :emoji_picker,
             3 => :end_conversation,
+            4 => :use_inbox_avatar_for_bot,
             :column => 'feature_flags',
             :check_for_column => false
 

app/views/api/v1/widget/configs/create.json.jbuilder

@@ -18,8 +18,9 @@ json.chatwoot_website_channel do
   json.out_of_office_message @web_widget.inbox.out_of_office_message
   json.utc_off_set ActiveSupport::TimeZone[@web_widget.inbox.timezone].now.formatted_offset
 end
+# Remove the following defaults by June 2023 as it would be covered by the feature flags
 json.chatwoot_widget_defaults do
-  json.use_inbox_avatar_for_bot ActiveModel::Type::Boolean.new.cast(ENV.fetch('USE_INBOX_AVATAR_FOR_BOT', false))
+  json.use_inbox_avatar_for_bot @web_widget.use_inbox_avatar_for_bot
 end
 json.contact do
   json.pubsub_token @contact_inbox.pubsub_token

app/views/widgets/show.html.erb

@@ -27,9 +27,6 @@
         allowMessagesAfterResolved: <%= @web_widget.inbox.allow_messages_after_resolved %>,
         disableBranding: <%= @web_widget.inbox.account.feature_enabled?('disable_branding') %>
       }
-      window.chatwootWidgetDefaults = {
-        useInboxAvatarForBot: <%= ActiveModel::Type::Boolean.new.cast(ENV.fetch('USE_INBOX_AVATAR_FOR_BOT', false)) %>,
-      }
       window.chatwootPubsubToken = '<%= @contact_inbox.pubsub_token %>'
       window.authToken = '<%= @token %>'
       window.globalConfig = <%= raw @global_config.to_json %>

db/migrate/20230407191457_migrate_env_var_to_channel_feature.rb

@@ -0,0 +1,12 @@
+class MigrateEnvVarToChannelFeature < ActiveRecord::Migration[6.1]
+  def change
+    return unless ActiveModel::Type::Boolean.new.cast(ENV.fetch('USE_INBOX_AVATAR_FOR_BOT', false))
+
+    Channel::WebWidget.find_in_batches do |widget_batch|
+      widget_batch.each do |widget|
+        widget.use_inbox_avatar_for_bot = true
+        widget.save!
+      end
+    end
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2023_04_04_030719) do
+ActiveRecord::Schema.define(version: 2023_04_07_191457) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"