feat: Add an extended bubble design for the widget (#1123)

* feat: Add a new design for chat bubble

Signed-off-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

* Add i18n

* Fix stye issues

* Set fixed font-size

* Update docs for bubble

app/javascript/widget/App.vue

@@ -77,12 +77,13 @@ export default {
 
       const message = JSON.parse(e.data.replace(wootPrefix, ''));
       if (message.event === 'config-set') {
+        this.setLocale(message.locale);
+        this.setBubbleLabel();
+        this.setPosition(message.position);
         this.fetchOldConversations().then(() => {
           this.setUnreadView();
         });
         this.fetchAvailableAgents(websiteToken);
-        this.setLocale(message.locale);
-        this.setPosition(message.position);
         this.setHideMessageBubble(message.hideMessageBubble);
       } else if (message.event === 'widget-visible') {
         this.scrollConversationToBottom();
@@ -100,6 +101,7 @@ export default {
         this.$store.dispatch('contacts/update', message);
       } else if (message.event === 'set-locale') {
         this.setLocale(message.locale);
+        this.setBubbleLabel();
       } else if (message.event === 'set-unread-view') {
         this.showUnreadView = true;
       } else if (message.event === 'unset-unread-view') {
@@ -118,6 +120,12 @@ export default {
       const container = this.$el.querySelector('.conversation-wrap');
       container.scrollTop = container.scrollHeight;
     },
+    setBubbleLabel() {
+      IFrameHelper.sendMessage({
+        event: 'setBubbleLabel',
+        label: this.$t('BUBBLE.LABEL'),
+      });
+    },
     setLocale(locale) {
       const { enabledLanguages } = window.chatwootWebChannel;
       if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {