From c9f821cc5b6768456192d12520acbc839ddb4b7a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 31 Mar 2022 16:02:53 +0530
Subject: [PATCH 01/20] chore(deps): bump puma from 5.6.2 to 5.6.4 (#4348)

Bumps [puma](https://github.com/puma/puma) from 5.6.2 to 5.6.4.
- [Release notes](https://github.com/puma/puma/releases)
- [Changelog](https://github.com/puma/puma/blob/master/History.md)
- [Commits](https://github.com/puma/puma/compare/v5.6.2...v5.6.4)

---
updated-dependencies:
- dependency-name: puma
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index eb6022ac7..6c314817d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -403,7 +403,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (4.0.6)
-    puma (5.6.2)
+    puma (5.6.4)
       nio4r (~> 2.0)
     pundit (2.2.0)
       activesupport (>= 3.0.0)

From 0477123f92234c7e1e060ce5e190f90eac0af9a8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 31 Mar 2022 16:33:14 +0530
Subject: [PATCH 02/20] chore(deps): bump minimist from 1.2.5 to 1.2.6 (#4351)

Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 931d979a6..9acb20d6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10090,9 +10090,9 @@ minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4:
     brace-expansion "^1.1.7"
 
 minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 minipass-collect@^1.0.2:
   version "1.0.2"

From eff3a5031641b4b655806109315b1ea52f342588 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 31 Mar 2022 17:35:39 +0530
Subject: [PATCH 03/20] fix: Disable showing read messages in unread view
 (#4324)

---
 app/javascript/widget/App.vue                 |  9 +++++-
 .../store/modules/conversation/actions.js     |  8 ++++--
 .../specs/conversation/actions.spec.js        | 28 +++++++++++--------
 .../v1/widget/messages/index.json.jbuilder    | 25 ++++++++++-------
 .../api/v1/widget/messages_controller_spec.rb |  3 +-
 5 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 8b34c51bf..9d6600264 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -138,7 +138,13 @@ export default {
       }
     },
     registerUnreadEvents() {
-      bus.$on(ON_AGENT_MESSAGE_RECEIVED, this.setUnreadView);
+      bus.$on(ON_AGENT_MESSAGE_RECEIVED, () => {
+        const { name: routeName } = this.$route;
+        if (this.isWidgetOpen && routeName === 'messages') {
+          this.$store.dispatch('conversation/setUserLastSeen');
+        }
+        this.setUnreadView();
+      });
       bus.$on(ON_UNREAD_MESSAGE_CLICK, () => {
         this.replaceRoute('messages').then(() => this.unsetUnreadView());
       });
@@ -175,6 +181,7 @@ export default {
     },
     setUnreadView() {
       const { unreadMessageCount } = this;
+
       if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
         this.replaceRoute('unread-messages').then(() => {
           this.setIframeHeight(true);
diff --git a/app/javascript/widget/store/modules/conversation/actions.js b/app/javascript/widget/store/modules/conversation/actions.js
index c915ea6e7..ae06afa9c 100644
--- a/app/javascript/widget/store/modules/conversation/actions.js
+++ b/app/javascript/widget/store/modules/conversation/actions.js
@@ -84,8 +84,12 @@ export const actions = {
   fetchOldConversations: async ({ commit }, { before } = {}) => {
     try {
       commit('setConversationListLoading', true);
-      const { data } = await getMessagesAPI({ before });
-      const formattedMessages = getNonDeletedMessages({ messages: data });
+      const {
+        data: { payload, meta },
+      } = await getMessagesAPI({ before });
+      const { contact_last_seen_at: lastSeen } = meta;
+      const formattedMessages = getNonDeletedMessages({ messages: payload });
+      commit('conversation/setMetaUserLastSeenAt', lastSeen, { root: true });
       commit('setMessagesInConversation', formattedMessages);
       commit('setConversationListLoading', false);
     } catch (error) {
diff --git a/app/javascript/widget/store/modules/specs/conversation/actions.spec.js b/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
index cfbb0ec66..82e03d38a 100644
--- a/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
@@ -181,22 +181,28 @@ describe('#actions', () => {
   describe('#fetchOldConversations', () => {
     it('sends correct actions', async () => {
       API.get.mockResolvedValue({
-        data: [
-          {
-            id: 1,
-            text: 'hey',
-            content_attributes: {},
+        data: {
+          payload: [
+            {
+              id: 1,
+              text: 'hey',
+              content_attributes: {},
+            },
+            {
+              id: 2,
+              text: 'welcome',
+              content_attributes: { deleted: true },
+            },
+          ],
+          meta: {
+            contact_last_seen_at: 1466424490,
           },
-          {
-            id: 2,
-            text: 'welcome',
-            content_attributes: { deleted: true },
-          },
-        ],
+        },
       });
       await actions.fetchOldConversations({ commit }, {});
       expect(commit.mock.calls).toEqual([
         ['setConversationListLoading', true],
+        ['conversation/setMetaUserLastSeenAt', 1466424490, { root: true }],
         [
           'setMessagesInConversation',
           [
diff --git a/app/views/api/v1/widget/messages/index.json.jbuilder b/app/views/api/v1/widget/messages/index.json.jbuilder
index a0462b545..d7a441b84 100644
--- a/app/views/api/v1/widget/messages/index.json.jbuilder
+++ b/app/views/api/v1/widget/messages/index.json.jbuilder
@@ -1,11 +1,16 @@
-json.array! @messages do |message|
-  json.id message.id
-  json.content message.content
-  json.message_type message.message_type_before_type_cast
-  json.content_type message.content_type
-  json.content_attributes message.content_attributes
-  json.created_at message.created_at.to_i
-  json.conversation_id message.conversation.display_id
-  json.attachments message.attachments.map(&:push_event_data) if message.attachments.present?
-  json.sender message.sender.push_event_data if message.sender
+json.payload do
+  json.array! @messages do |message|
+    json.id message.id
+    json.content message.content
+    json.message_type message.message_type_before_type_cast
+    json.content_type message.content_type
+    json.content_attributes message.content_attributes
+    json.created_at message.created_at.to_i
+    json.conversation_id message.conversation.display_id
+    json.attachments message.attachments.map(&:push_event_data) if message.attachments.present?
+    json.sender message.sender.push_event_data if message.sender
+  end
+end
+json.meta do
+  json.contact_last_seen_at @conversation.contact_last_seen_at.to_i
 end
diff --git a/spec/controllers/api/v1/widget/messages_controller_spec.rb b/spec/controllers/api/v1/widget/messages_controller_spec.rb
index 983f6f132..f203f11c8 100644
--- a/spec/controllers/api/v1/widget/messages_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/messages_controller_spec.rb
@@ -23,9 +23,8 @@ RSpec.describe '/api/v1/widget/messages', type: :request do
 
         expect(response).to have_http_status(:success)
         json_response = JSON.parse(response.body)
-
         # 2 messages created + 2 messages by the email hook
-        expect(json_response.length).to eq(4)
+        expect(json_response['payload'].length).to eq(4)
       end
     end
   end

From 3cd1616df624f25205c338398466e978fcee0db9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 31 Mar 2022 20:22:52 +0530
Subject: [PATCH 04/20] fix: Fix agent name in Twitter channel private note
 acting as a link (#4326)

---
 .../widgets/conversation/Message.vue          |  6 +++-
 .../shared/helpers/MessageFormatter.js        |  5 ++--
 .../helpers/specs/MessageFormatter.spec.js    | 30 +++++++++++++++++--
 .../shared/mixins/messageFormatterMixin.js    |  8 +++--
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 51d82ff8c..4035a62d0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -207,7 +207,11 @@ export default {
         }
       }
       return (
-        this.formatMessage(this.data.content, this.isATweet) + botMessageContent
+        this.formatMessage(
+          this.data.content,
+          this.isATweet,
+          this.data.private
+        ) + botMessageContent
       );
     },
     contentAttributes() {
diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js
index 3bc89ec2f..260436da4 100644
--- a/app/javascript/shared/helpers/MessageFormatter.js
+++ b/app/javascript/shared/helpers/MessageFormatter.js
@@ -13,8 +13,9 @@ const TWITTER_HASH_REPLACEMENT =
 const USER_MENTIONS_REGEX = /mention:\/\/(user|team)\/(\d+)\/(.+)/gm;
 
 class MessageFormatter {
-  constructor(message, isATweet = false) {
+  constructor(message, isATweet = false, isAPrivateNote = false) {
     this.message = DOMPurify.sanitize(escapeHtml(message || ''));
+    this.isAPrivateNote = isAPrivateNote;
     this.isATweet = isATweet;
     this.marked = marked;
 
@@ -35,7 +36,7 @@ class MessageFormatter {
   }
 
   formatMessage() {
-    if (this.isATweet) {
+    if (this.isATweet && !this.isAPrivateNote) {
       const withUserName = this.message.replace(
         TWITTER_USERNAME_REGEX,
         TWITTER_USERNAME_REPLACEMENT
diff --git a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
index 4e13fe832..1f2209b71 100644
--- a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
+++ b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
@@ -36,19 +36,45 @@ describe('#MessageFormatter', () => {
     it('should add links to @mentions', () => {
       const message =
         '@chatwootapp is an opensource tool thanks @longnonexistenttwitterusername';
-      expect(new MessageFormatter(message, true).formattedMessage).toMatch(
+      expect(
+        new MessageFormatter(message, true, false).formattedMessage
+      ).toMatch(
         '<p><a href="http://twitter.com/chatwootapp" target="_blank" rel="noreferrer nofollow noopener">@chatwootapp</a> is an opensource tool thanks @longnonexistenttwitterusername</p>'
       );
     });
 
     it('should add links to #tags', () => {
       const message = '#chatwootapp is an opensource tool';
-      expect(new MessageFormatter(message, true).formattedMessage).toMatch(
+      expect(
+        new MessageFormatter(message, true, false).formattedMessage
+      ).toMatch(
         '<p><a href="https://twitter.com/hashtag/chatwootapp" target="_blank" rel="noreferrer nofollow noopener">#chatwootapp</a> is an opensource tool</p>'
       );
     });
   });
 
+  describe('private notes', () => {
+    it('should return the same string if not tags or @mentions', () => {
+      const message = 'Chatwoot is an opensource tool';
+      expect(new MessageFormatter(message).formattedMessage).toMatch(message);
+    });
+
+    it('should add links to @mentions', () => {
+      const message =
+        '@chatwootapp is an opensource tool thanks @longnonexistenttwitterusername';
+      expect(
+        new MessageFormatter(message, false, true).formattedMessage
+      ).toMatch(message);
+    });
+
+    it('should add links to #tags', () => {
+      const message = '#chatwootapp is an opensource tool';
+      expect(
+        new MessageFormatter(message, false, true).formattedMessage
+      ).toMatch(message);
+    });
+  });
+
   describe('plain text content', () => {
     it('returns the plain text without HTML', () => {
       const message =
diff --git a/app/javascript/shared/mixins/messageFormatterMixin.js b/app/javascript/shared/mixins/messageFormatterMixin.js
index 21096409d..7767e7c76 100644
--- a/app/javascript/shared/mixins/messageFormatterMixin.js
+++ b/app/javascript/shared/mixins/messageFormatterMixin.js
@@ -3,8 +3,12 @@ import DOMPurify from 'dompurify';
 
 export default {
   methods: {
-    formatMessage(message, isATweet) {
-      const messageFormatter = new MessageFormatter(message, isATweet);
+    formatMessage(message, isATweet, isAPrivateNote) {
+      const messageFormatter = new MessageFormatter(
+        message,
+        isATweet,
+        isAPrivateNote
+      );
       return messageFormatter.formattedMessage;
     },
     getPlainText(message, isATweet) {

From cb23ff53bf7f1b190223b13aedbfefcb7c4ec85f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 31 Mar 2022 21:20:37 +0530
Subject: [PATCH 05/20] fix: Reset Captcha if account signup is an error
 (#4279)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../conversation/AvailabilityStatusBadge.vue  |  2 +-
 .../i18n/locale/en/setNewPassword.json        |  3 ++
 .../dashboard/routes/auth/Signup.vue          | 32 +++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
index 588bbef82..766166fd3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
@@ -23,7 +23,7 @@ export default {
     background: var(--s-500);
   }
   &__busy {
-    background: var(--y-700);
+    background: var(--y-400);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/setNewPassword.json b/app/javascript/dashboard/i18n/locale/en/setNewPassword.json
index 94a3fd2e1..ec2d94744 100644
--- a/app/javascript/dashboard/i18n/locale/en/setNewPassword.json
+++ b/app/javascript/dashboard/i18n/locale/en/setNewPassword.json
@@ -15,6 +15,9 @@
       "SUCCESS_MESSAGE": "Successfully changed the password",
       "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
     },
+    "CAPTCHA": {
+      "ERROR": "Verification expired. Please solve captcha again."
+    },
     "SUBMIT": "Submit"
   }
 }
diff --git a/app/javascript/dashboard/routes/auth/Signup.vue b/app/javascript/dashboard/routes/auth/Signup.vue
index 36b63662d..4f5aab8bd 100644
--- a/app/javascript/dashboard/routes/auth/Signup.vue
+++ b/app/javascript/dashboard/routes/auth/Signup.vue
@@ -77,9 +77,17 @@
           />
           <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
             <vue-hcaptcha
+              ref="hCaptcha"
+              :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
               :sitekey="globalConfig.hCaptchaSiteKey"
               @verify="onRecaptchaVerified"
             />
+            <span
+              v-if="!hasAValidCaptcha && didCaptchaReset"
+              class="captcha-error"
+            >
+              {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
+            </span>
           </div>
           <woot-submit-button
             :disabled="isSignupInProgress || !hasAValidCaptcha"
@@ -129,6 +137,7 @@ export default {
         confirmPassword: '',
         hCaptchaClientResponse: '',
       },
+      didCaptchaReset: false,
       isSignupInProgress: false,
       error: '',
     };
@@ -183,6 +192,7 @@ export default {
     async submit() {
       this.$v.$touch();
       if (this.$v.$invalid) {
+        this.resetCaptcha();
         return;
       }
       this.isSignupInProgress = true;
@@ -194,6 +204,7 @@ export default {
       } catch (error) {
         let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
         if (error.response && error.response.data.message) {
+          this.resetCaptcha();
           errorMessage = error.response.data.message;
         }
         this.showAlert(errorMessage);
@@ -203,6 +214,15 @@ export default {
     },
     onRecaptchaVerified(token) {
       this.credentials.hCaptchaClientResponse = token;
+      this.didCaptchaReset = false;
+    },
+    resetCaptcha() {
+      if (!this.globalConfig.hCaptchaSiteKey) {
+        return;
+      }
+      this.$refs.hCaptcha.reset();
+      this.credentials.hCaptchaClientResponse = '';
+      this.didCaptchaReset = true;
     },
   },
 };
@@ -254,6 +274,18 @@ export default {
 
   .h-captcha--box {
     margin-bottom: var(--space-one);
+
+    .captcha-error {
+      color: var(--r-400);
+      font-size: var(--font-size-small);
+    }
+
+    &::v-deep .error {
+      iframe {
+        border: 1px solid var(--r-500);
+        border-radius: var(--border-radius-normal);
+      }
+    }
   }
 }
 </style>

From c397fe1964a2e139d29dc1273f7673f2a7fd8980 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Thu, 31 Mar 2022 21:21:25 +0530
Subject: [PATCH 06/20] fix: Update the URL for POST inbox_members (#4354)

---
 swagger/paths/index.yml |  10 ++-
 swagger/swagger.json    | 133 +++++++++++++++++++++-------------------
 2 files changed, 77 insertions(+), 66 deletions(-)

diff --git a/swagger/paths/index.yml b/swagger/paths/index.yml
index eeb2539f1..279ebb7bc 100644
--- a/swagger/paths/index.yml
+++ b/swagger/paths/index.yml
@@ -253,13 +253,17 @@
     - $ref: '#/parameters/inbox_id'
   get:
     $ref: ./application/inboxes/inbox_members/show.yml
-  post:
-    $ref: ./application/inboxes/inbox_members/create.yml
   patch:
     $ref: ./application/inboxes/inbox_members/update.yml
   delete:
     $ref: ./application/inboxes/inbox_members/delete.yml
 
+/api/v1/accounts/{account_id}/inbox_members:
+  parameters:
+    - $ref: '#/parameters/account_id'
+  post:
+    $ref: ./application/inboxes/inbox_members/create.yml
+
 
 
 # Messages
@@ -422,4 +426,4 @@
       type: string
       description: The numeric ID of the user
   get:
-    $ref: './application/reports/conversation/agent.yml'
\ No newline at end of file
+    $ref: './application/reports/conversation/agent.yml'
diff --git a/swagger/swagger.json b/swagger/swagger.json
index b17f9c586..4de4db49d 100644
--- a/swagger/swagger.json
+++ b/swagger/swagger.json
@@ -2803,69 +2803,6 @@
           }
         }
       },
-      "post": {
-        "tags": [
-          "Inbox"
-        ],
-        "operationId": "add-new-agent-to-inbox",
-        "summary": "Add a New Agent",
-        "description": "Add a new Agent to Inbox",
-        "security": [
-          {
-            "userApiKey": [
-
-            ]
-          }
-        ],
-        "parameters": [
-          {
-            "name": "data",
-            "in": "body",
-            "required": true,
-            "schema": {
-              "type": "object",
-              "required": [
-                "inbox_id",
-                "user_ids"
-              ],
-              "properties": {
-                "inbox_id": {
-                  "type": "string",
-                  "description": "The ID of the inbox"
-                },
-                "user_ids": {
-                  "type": "array",
-                  "items": {
-                    "type": "integer"
-                  },
-                  "description": "IDs of users to be added to the inbox"
-                }
-              }
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Success",
-            "schema": {
-              "type": "array",
-              "description": "Array of all active agents",
-              "items": {
-                "$ref": "#/definitions/agent"
-              }
-            }
-          },
-          "404": {
-            "description": "Inbox not found"
-          },
-          "403": {
-            "description": "Access denied"
-          },
-          "422": {
-            "description": "User must exist"
-          }
-        }
-      },
       "patch": {
         "tags": [
           "Inbox"
@@ -2986,6 +2923,76 @@
         }
       }
     },
+    "/api/v1/accounts/{account_id}/inbox_members": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        }
+      ],
+      "post": {
+        "tags": [
+          "Inbox"
+        ],
+        "operationId": "add-new-agent-to-inbox",
+        "summary": "Add a New Agent",
+        "description": "Add a new Agent to Inbox",
+        "security": [
+          {
+            "userApiKey": [
+
+            ]
+          }
+        ],
+        "parameters": [
+          {
+            "name": "data",
+            "in": "body",
+            "required": true,
+            "schema": {
+              "type": "object",
+              "required": [
+                "inbox_id",
+                "user_ids"
+              ],
+              "properties": {
+                "inbox_id": {
+                  "type": "string",
+                  "description": "The ID of the inbox"
+                },
+                "user_ids": {
+                  "type": "array",
+                  "items": {
+                    "type": "integer"
+                  },
+                  "description": "IDs of users to be added to the inbox"
+                }
+              }
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "schema": {
+              "type": "array",
+              "description": "Array of all active agents",
+              "items": {
+                "$ref": "#/definitions/agent"
+              }
+            }
+          },
+          "404": {
+            "description": "Inbox not found"
+          },
+          "403": {
+            "description": "Access denied"
+          },
+          "422": {
+            "description": "User must exist"
+          }
+        }
+      }
+    },
     "/api/v1/accounts/{account_id}/conversations/{conversation_id}/messages": {
       "parameters": [
         {

From 3813b3b372d5dfd9e6a5b6c5ad403295ed322ad7 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <vishnu@chatwoot.com>
Date: Fri, 1 Apr 2022 00:34:50 +0530
Subject: [PATCH 07/20] feat: make linux script installation non-interactive
 (#4355)

This PR changes the LetsEncrypt behaviour to be non-interactive. Earlier, the installation flow was waiting for user input at the SSL cert generation stage. With this change, once the user confirms completes the initial selection, the installation can be completed unattended.
---
 deployment/setup_20.04.sh | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/deployment/setup_20.04.sh b/deployment/setup_20.04.sh
index ca8b0a06a..14a0b74f6 100644
--- a/deployment/setup_20.04.sh
+++ b/deployment/setup_20.04.sh
@@ -2,7 +2,7 @@
 
 # Description: Chatwoot installation script
 # OS: Ubuntu 20.04 LTS / Ubuntu 20.10
-# Script Version: 0.7
+# Script Version: 0.8
 # Run this script as root
 
 read -p 'Would you like to configure a domain and SSL for Chatwoot?(yes or no): ' configure_webserver
@@ -12,6 +12,7 @@ then
 read -p 'Enter your sub-domain to be used for Chatwoot (chatwoot.domain.com for example) : ' domain_name
 echo -e "\nThis script will try to generate SSL certificates via LetsEncrypt and serve chatwoot at
 "https://$domain_name". Proceed further once you have pointed your DNS to the IP of the instance.\n"
+read -p 'Enter the email LetsEncrypt can use to send reminders when your SSL certificate is up for renewal: ' le_email
 read -p 'Do you wish to proceed? (yes or no): ' exit_true
 if [ $exit_true == "no" ]
 then
@@ -138,7 +139,7 @@ else
 curl https://ssl-config.mozilla.org/ffdhe4096.txt >> /etc/ssl/dhparam
 wget https://raw.githubusercontent.com/chatwoot/chatwoot/develop/deployment/nginx_chatwoot.conf
 cp nginx_chatwoot.conf /etc/nginx/sites-available/nginx_chatwoot.conf
-certbot certonly --nginx -d $domain_name
+certbot certonly --non-interactive --agree-tos --nginx -m $le_email -d $domain_name
 sed -i "s/chatwoot.domain.com/$domain_name/g" /etc/nginx/sites-available/nginx_chatwoot.conf
 ln -s /etc/nginx/sites-available/nginx_chatwoot.conf /etc/nginx/sites-enabled/nginx_chatwoot.conf
 systemctl restart nginx

From caee9535f1f99168a19a88187c170e0b695179b6 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 1 Apr 2022 20:59:03 +0530
Subject: [PATCH 08/20] feat: Support Dark mode for the widget (#4137)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 app/controllers/widget_tests_controller.rb    |  5 ++
 .../dashboard/settings/agents/Index.vue       |  4 +-
 app/javascript/packs/sdk.js                   |  9 +++-
 app/javascript/sdk/IFrameHelper.js            |  1 +
 app/javascript/sdk/constants.js               |  1 +
 app/javascript/sdk/settingsHelper.js          |  5 +-
 app/javascript/shared/components/ChatCard.vue | 17 +++---
 app/javascript/shared/components/ChatForm.vue | 21 ++++++--
 .../shared/components/ChatOption.vue          |  2 +-
 .../shared/components/ChatOptions.vue         | 10 ++--
 .../components/CustomerSatisfaction.vue       | 28 +++++++---
 .../shared/components/DateSeparator.vue       |  9 +++-
 .../shared/components/ResizableTextArea.vue   |  1 -
 .../components/specs/DateSeparator.spec.js    | 53 +++++++++++++++----
 .../__snapshots__/DateSeparator.spec.js.snap  |  4 +-
 .../assets/scss/views/_conversation.scss      |  3 --
 .../widget/components/AgentMessage.vue        | 12 +++--
 .../widget/components/AgentMessageBubble.vue  | 10 +++-
 .../widget/components/AgentTypingBubble.vue   |  7 ++-
 .../widget/components/ChatHeader.vue          | 28 +++++++---
 .../widget/components/ChatHeaderExpanded.vue  | 17 ++++--
 .../widget/components/ChatInputWrap.vue       | 25 ++++++---
 .../widget/components/Form/Input.vue          | 39 +++++++++-----
 .../widget/components/Form/TextArea.vue       | 37 ++++++++-----
 .../widget/components/HeaderActions.vue       | 20 +++++--
 .../widget/components/PreChat/Form.vue        |  6 ++-
 .../widget/components/TeamAvailability.vue    | 12 +++--
 .../widget/components/UnreadMessage.vue       |  9 +++-
 .../components/layouts/ViewWithHeader.vue     | 13 +++--
 .../widget/components/template/Article.vue    | 24 +++++++--
 .../widget/components/template/EmailInput.vue | 17 +++++-
 app/javascript/widget/mixins/darkModeMixin.js | 15 ++++++
 .../widget/mixins/specs/darkModeMixin.spec.js | 41 ++++++++++++++
 .../widget/store/modules/appConfig.js         | 12 ++++-
 app/views/widget_tests/index.html.erb         |  1 +
 tailwind.config.js                            |  6 ++-
 36 files changed, 411 insertions(+), 113 deletions(-)
 create mode 100644 app/javascript/widget/mixins/darkModeMixin.js
 create mode 100644 app/javascript/widget/mixins/specs/darkModeMixin.spec.js

diff --git a/app/controllers/widget_tests_controller.rb b/app/controllers/widget_tests_controller.rb
index fff47d907..6d6742cf4 100644
--- a/app/controllers/widget_tests_controller.rb
+++ b/app/controllers/widget_tests_controller.rb
@@ -3,6 +3,7 @@ class WidgetTestsController < ActionController::Base
   before_action :ensure_widget_position
   before_action :ensure_widget_type
   before_action :ensure_widget_style
+  before_action :ensure_dark_mode
 
   def index
     render
@@ -14,6 +15,10 @@ class WidgetTestsController < ActionController::Base
     @widget_style = params[:widget_style] || 'standard'
   end
 
+  def ensure_dark_mode
+    @dark_mode = params[:dark_mode] || 'light'
+  end
+
   def ensure_widget_position
     @widget_position = params[:position] || 'left'
   end
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index c3a75b0f6..5714582d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -35,7 +35,9 @@
                 </td>
                 <!-- Agent Name + Email -->
                 <td>
-                  <span class="agent-name">{{ agent.name }}</span>
+                  <span class="agent-name">
+                    {{ agent.name }}
+                  </span>
                   <span>{{ agent.email }}</span>
                 </td>
                 <!-- Agent Role + Verification Status -->
diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 76e1a2cd8..b77b682dd 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -1,6 +1,10 @@
 import Cookies from 'js-cookie';
 import { IFrameHelper } from '../sdk/IFrameHelper';
-import { getBubbleView } from '../sdk/settingsHelper';
+import {
+  getBubbleView,
+  getDarkMode,
+  getWidgetStyle,
+} from '../sdk/settingsHelper';
 import {
   computeHashForUserData,
   getUserCookieName,
@@ -24,8 +28,9 @@ const runSDK = ({ baseUrl, websiteToken }) => {
     type: getBubbleView(chatwootSettings.type),
     launcherTitle: chatwootSettings.launcherTitle || '',
     showPopoutButton: chatwootSettings.showPopoutButton || false,
-    widgetStyle: chatwootSettings.widgetStyle || 'standard',
+    widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
     resetTriggered: false,
+    darkMode: getDarkMode(chatwootSettings.darkMode),
 
     toggle(state) {
       IFrameHelper.events.toggleBubble(state);
diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index df36d8e0d..3bc0973fe 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -145,6 +145,7 @@ export const IFrameHelper = {
         hideMessageBubble: window.$chatwoot.hideMessageBubble,
         showPopoutButton: window.$chatwoot.showPopoutButton,
         widgetStyle: window.$chatwoot.widgetStyle,
+        darkMode: window.$chatwoot.darkMode,
       });
       IFrameHelper.onLoad({
         widgetColor: message.config.channelConfig.widgetColor,
diff --git a/app/javascript/sdk/constants.js b/app/javascript/sdk/constants.js
index 52faf1540..7bf84d430 100644
--- a/app/javascript/sdk/constants.js
+++ b/app/javascript/sdk/constants.js
@@ -1,2 +1,3 @@
 export const BUBBLE_DESIGN = ['standard', 'expanded_bubble'];
 export const WIDGET_DESIGN = ['standard', 'flat'];
+export const DARK_MODE = ['light', 'auto'];
diff --git a/app/javascript/sdk/settingsHelper.js b/app/javascript/sdk/settingsHelper.js
index 4e256b53a..657db1fe0 100644
--- a/app/javascript/sdk/settingsHelper.js
+++ b/app/javascript/sdk/settingsHelper.js
@@ -1,4 +1,4 @@
-import { BUBBLE_DESIGN, WIDGET_DESIGN } from './constants';
+import { BUBBLE_DESIGN, DARK_MODE, WIDGET_DESIGN } from './constants';
 
 export const getBubbleView = type =>
   BUBBLE_DESIGN.includes(type) ? type : BUBBLE_DESIGN[0];
@@ -9,3 +9,6 @@ export const getWidgetStyle = style =>
   WIDGET_DESIGN.includes(style) ? style : WIDGET_DESIGN[0];
 
 export const isFlatWidgetStyle = style => style === 'flat';
+
+export const getDarkMode = darkMode =>
+  DARK_MODE.includes(darkMode) ? darkMode : DARK_MODE[0];
diff --git a/app/javascript/shared/components/ChatCard.vue b/app/javascript/shared/components/ChatCard.vue
index 4e856bb6b..eb6e13364 100644
--- a/app/javascript/shared/components/ChatCard.vue
+++ b/app/javascript/shared/components/ChatCard.vue
@@ -1,11 +1,14 @@
 <template>
-  <div class="card-message chat-bubble agent">
+  <div
+    class="card-message chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
     <img class="media" :src="mediaUrl" />
     <div class="card-body">
-      <h4 class="title">
+      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
         {{ title }}
       </h4>
-      <p class="body">
+      <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
         {{ description }}
       </p>
       <card-button
@@ -19,11 +22,13 @@
 
 <script>
 import CardButton from 'shared/components/CardButton';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   components: {
     CardButton,
   },
+  mixins: [darkModeMixin],
   props: {
     title: {
       type: String,
@@ -52,7 +57,6 @@ export default {
 @import '~dashboard/assets/scss/mixins.scss';
 
 .card-message {
-  background: white;
   max-width: 220px;
   padding: $space-small;
   border-radius: $space-small;
@@ -63,12 +67,10 @@ export default {
     font-weight: $font-weight-medium;
     margin-top: $space-smaller;
     margin-bottom: $space-smaller;
-    color: $color-heading;
     line-height: 1.5;
   }
 
   .body {
-    color: $color-body;
     margin-bottom: $space-smaller;
   }
 
@@ -77,10 +79,11 @@ export default {
     width: 100%;
     object-fit: contain;
     max-height: 150px;
+    border-radius: 5px;
   }
 
   .action-button + .action-button {
-    background: white;
+    background: $color-white;
     @include thin-border($color-woot);
     color: $color-woot;
   }
diff --git a/app/javascript/shared/components/ChatForm.vue b/app/javascript/shared/components/ChatForm.vue
index f943f23c1..3cb6b956c 100644
--- a/app/javascript/shared/components/ChatForm.vue
+++ b/app/javascript/shared/components/ChatForm.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="form chat-bubble agent">
+  <div
+    class="form chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
     <form @submit.prevent="onSubmit">
       <div
         v-for="item in items"
@@ -9,10 +12,13 @@
           'has-submitted': hasSubmitted,
         }"
       >
-        <label>{{ item.label }}</label>
+        <label :class="$dm('text-black-900', 'dark:text-slate-50')">{{
+          item.label
+        }}</label>
         <input
           v-if="item.type === 'email'"
           v-model="formValues[item.name]"
+          :class="inputColor"
           :type="item.type"
           :pattern="item.regex"
           :title="item.title"
@@ -24,6 +30,7 @@
         <input
           v-else-if="item.type === 'text'"
           v-model="formValues[item.name]"
+          :class="inputColor"
           :required="item.required && 'required'"
           :pattern="item.pattern"
           :title="item.title"
@@ -35,6 +42,7 @@
         <textarea
           v-else-if="item.type === 'text_area'"
           v-model="formValues[item.name]"
+          :class="inputColor"
           :required="item.required && 'required'"
           :title="item.title"
           :name="item.name"
@@ -44,6 +52,7 @@
         <select
           v-else-if="item.type === 'select'"
           v-model="formValues[item.name]"
+          :class="inputColor"
           :required="item.required && 'required'"
         >
           <option
@@ -73,7 +82,10 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+
 export default {
+  mixins: [darkModeMixin],
   props: {
     buttonLabel: {
       type: String,
@@ -98,6 +110,10 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
     isFormValid() {
       return this.items.reduce((acc, { name }) => {
         return !!this.formValues[name] && acc;
@@ -186,7 +202,6 @@ export default {
     appearance: none;
     border: 1px solid $color-border;
     border-radius: $space-smaller;
-    background-color: $color-white;
     font-family: inherit;
     font-size: $space-normal;
     font-weight: normal;
diff --git a/app/javascript/shared/components/ChatOption.vue b/app/javascript/shared/components/ChatOption.vue
index 672939356..7532e14d3 100644
--- a/app/javascript/shared/components/ChatOption.vue
+++ b/app/javascript/shared/components/ChatOption.vue
@@ -12,6 +12,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+
 export default {
   components: {},
   props: {
@@ -51,7 +52,6 @@ export default {
     background: transparent;
     border-radius: $space-large;
     border: 0;
-    color: $color-woot;
     cursor: pointer;
     height: auto;
     line-height: 1.5;
diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index 8de14bf94..3a994a583 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -1,7 +1,10 @@
 <template>
-  <div class="options-message chat-bubble agent">
+  <div
+    class="options-message chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
     <div class="card-body">
-      <h4 class="title">
+      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
         {{ title }}
       </h4>
       <ul
@@ -23,11 +26,13 @@
 
 <script>
 import ChatOption from 'shared/components/ChatOption';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   components: {
     ChatOption,
   },
+  mixins: [darkModeMixin],
   props: {
     title: {
       type: String,
@@ -80,7 +85,6 @@ export default {
     font-weight: $font-weight-normal;
     margin-top: $space-smaller;
     margin-bottom: $space-smaller;
-    color: $color-heading;
     line-height: 1.5;
   }
 
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 06c7c8369..661bace55 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="customer-satisfcation" :style="{ borderColor: widgetColor }">
-    <h6 class="title">
+  <div
+    class="customer-satisfaction"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :style="{ borderColor: widgetColor }"
+  >
+    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
       {{ title }}
     </h6>
     <div class="ratings">
@@ -21,8 +25,9 @@
       <input
         v-model="feedback"
         class="form-input"
+        :class="inputColor"
         :placeholder="$t('CSAT.PLACEHOLDER')"
-        @keyup.enter="onSubmit"
+        @keydown.enter="onSubmit"
       />
       <button
         class="button small"
@@ -41,12 +46,14 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 
 export default {
   components: {
     Spinner,
     FluentIcon,
   },
+  mixins: [darkModeMixin],
   props: {
     messageContentAttributes: {
       type: Object,
@@ -67,9 +74,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
+    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
     isRatingSubmitted() {
       return this.messageContentAttributes?.csat_survey_response?.rating;
     },
@@ -80,6 +85,10 @@ export default {
     isButtonDisabled() {
       return !(this.selectedRating && this.feedback);
     },
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
     title() {
       return this.isRatingSubmitted
         ? this.$t('CSAT.SUBMITTED_TITLE')
@@ -136,10 +145,9 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';
 
-.customer-satisfcation {
+.customer-satisfaction {
   @include light-shadow;
 
-  background: $color-white;
   border-bottom-left-radius: $space-smaller;
   border-radius: $space-small;
   border-top: $space-micro solid $color-woot;
@@ -193,6 +201,10 @@ export default {
       border-top: 1px solid $color-border;
       padding: $space-one;
       width: 100%;
+
+      &::placeholder {
+        color: $color-light-gray;
+      }
     }
 
     .button {
diff --git a/app/javascript/shared/components/DateSeparator.vue b/app/javascript/shared/components/DateSeparator.vue
index 487da2f76..32ae6e10c 100644
--- a/app/javascript/shared/components/DateSeparator.vue
+++ b/app/javascript/shared/components/DateSeparator.vue
@@ -1,12 +1,18 @@
 <template>
-  <div class="date--separator">
+  <div
+    class="date--separator"
+    :class="$dm('text-slate-700', 'dark:text-slate-200')"
+  >
     {{ formattedDate }}
   </div>
 </template>
 
 <script>
 import { formatDate } from 'shared/helpers/DateHelper';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+
 export default {
+  mixins: [darkModeMixin],
   props: {
     date: {
       type: String,
@@ -30,7 +36,6 @@ export default {
 
 .date--separator {
   font-size: $font-size-default;
-  color: $color-body;
   height: 50px;
   line-height: 50px;
   position: relative;
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index 402ec0298..6c7f8a78a 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -12,7 +12,6 @@
 
 <script>
 const TYPING_INDICATOR_IDLE_TIME = 4000;
-
 export default {
   props: {
     placeholder: {
diff --git a/app/javascript/shared/components/specs/DateSeparator.spec.js b/app/javascript/shared/components/specs/DateSeparator.spec.js
index 6379fbf77..95b34f4f0 100644
--- a/app/javascript/shared/components/specs/DateSeparator.spec.js
+++ b/app/javascript/shared/components/specs/DateSeparator.spec.js
@@ -1,17 +1,52 @@
-import { mount } from '@vue/test-utils';
 import DateSeparator from '../DateSeparator';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+const localVue = createLocalVue();
+import i18n from 'dashboard/i18n';
+localVue.use(Vuex);
+localVue.use(VueI18n);
 
-describe('DateSeparator', () => {
-  test('matches snapshot', () => {
-    const wrapper = mount(DateSeparator, {
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
+});
+
+describe('dateSeparator', () => {
+  let store = null;
+  let actions = null;
+  let modules = null;
+  let dateSeparator = null;
+
+  beforeEach(() => {
+    actions = {};
+
+    modules = {
+      auth: {
+        getters: {
+          'appConfig/darkMode': () => 'light',
+        },
+      },
+    };
+    store = new Vuex.Store({
+      actions,
+      modules,
+    });
+
+    dateSeparator = shallowMount(DateSeparator, {
+      store,
+      localVue,
       propsData: {
         date: 'Nov 18, 2019',
       },
-      mocks: {
-        $t: () => {},
-      },
+      i18n: i18nConfig,
+      mixins: [darkModeMixin],
     });
-    expect(wrapper.vm).toBeTruthy();
-    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('date separator snapshot', () => {
+    expect(dateSeparator.vm).toBeTruthy();
+    expect(dateSeparator.element).toMatchSnapshot();
   });
 });
diff --git a/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap b/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap
index 4ddc499f9..3b9f2f34e 100644
--- a/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap
+++ b/app/javascript/shared/components/specs/__snapshots__/DateSeparator.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DateSeparator matches snapshot 1`] = `
+exports[`dateSeparator date separator snapshot 1`] = `
 <div
-  class="date--separator"
+  class="date--separator text-slate-700"
 >
   
   Nov 18, 2019
diff --git a/app/javascript/widget/assets/scss/views/_conversation.scss b/app/javascript/widget/assets/scss/views/_conversation.scss
index 7de312eac..7124c52fb 100644
--- a/app/javascript/widget/assets/scss/views/_conversation.scss
+++ b/app/javascript/widget/assets/scss/views/_conversation.scss
@@ -42,7 +42,6 @@
   }
 
   .agent-name {
-    color: $color-body;
     font-size: $font-size-small;
     font-weight: $font-weight-medium;
     margin: $space-small 0;
@@ -210,7 +209,6 @@
 
 .chat-bubble {
   @include light-shadow;
-  background: $color-woot;
   border-radius: $space-two;
   color: $color-white;
   display: inline-block;
@@ -242,7 +240,6 @@
   }
 
   &.agent {
-    background: $color-white;
     border-bottom-left-radius: $space-smaller;
     color: $color-body;
 
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index f3d499126..186b47bd3 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -24,7 +24,7 @@
         <div
           v-if="hasAttachments"
           class="chat-bubble has-attachment agent"
-          :class="wrapClass"
+          :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-50'))"
         >
           <div v-for="attachment in message.attachments" :key="attachment.id">
             <image-bubble
@@ -40,7 +40,11 @@
             <file-bubble v-else :url="attachment.data_url" />
           </div>
         </div>
-        <p v-if="message.showAvatar || hasRecordedResponse" class="agent-name">
+        <p
+          v-if="message.showAvatar || hasRecordedResponse"
+          class="agent-name"
+          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+        >
           {{ agentName }}
         </p>
       </div>
@@ -68,6 +72,8 @@ import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
 import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+
 export default {
   name: 'AgentMessage',
   components: {
@@ -77,7 +83,7 @@ export default {
     UserMessage,
     FileBubble,
   },
-  mixins: [timeMixin, configMixin, messageMixin],
+  mixins: [timeMixin, configMixin, messageMixin, darkModeMixin],
   props: {
     message: {
       type: Object,
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 467b99b47..b4a304914 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -5,8 +5,13 @@
         !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
       "
       class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-700')"
     >
-      <div class="message-content" v-html="formatMessage(message, false)"></div>
+      <div
+        class="message-content"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        v-html="formatMessage(message, false)"
+      ></div>
       <email-input
         v-if="isTemplateEmail"
         :message-id="messageId"
@@ -60,6 +65,7 @@ import ChatOptions from 'shared/components/ChatOptions';
 import ChatArticle from './template/Article';
 import EmailInput from './template/EmailInput';
 import CustomerSatisfaction from 'shared/components/CustomerSatisfaction';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'AgentMessageBubble',
@@ -71,7 +77,7 @@ export default {
     EmailInput,
     CustomerSatisfaction,
   },
-  mixins: [messageFormatterMixin],
+  mixins: [messageFormatterMixin, darkModeMixin],
   props: {
     message: { type: String, default: null },
     contentType: { type: String, default: null },
diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue
index 9e019613a..8e93be85c 100644
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/app/javascript/widget/components/AgentTypingBubble.vue
@@ -3,7 +3,10 @@
     <div class="agent-message">
       <div class="avatar-wrap"></div>
       <div class="message-wrap">
-        <div class="typing-bubble chat-bubble agent">
+        <div
+          class="typing-bubble chat-bubble agent"
+          :class="$dm('bg-white', 'dark:bg-slate-50')"
+        >
           <img
             src="~widget/assets/images/typing.gif"
             alt="Agent is typing a message"
@@ -15,8 +18,10 @@
 </template>
 
 <script>
+import darkModeMixing from 'widget/mixins/darkModeMixin.js';
 export default {
   name: 'AgentTypingBubble',
+  mixins: [darkModeMixing],
 };
 </script>
 
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 23e101f11..15ffda422 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -1,8 +1,15 @@
 <template>
-  <header class="flex justify-between p-5 w-full">
+  <header
+    class="flex justify-between p-5 w-full"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
+  >
     <div class="flex items-center">
       <button v-if="showBackButton" @click="onBackButtonClick">
-        <fluent-icon icon="chevron-left" size="24" />
+        <fluent-icon
+          icon="chevron-left"
+          size="24"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        />
       </button>
       <img
         v-if="avatarUrl"
@@ -11,7 +18,10 @@
         alt="avatar"
       />
       <div>
-        <div class="text-black-900 font-medium text-base flex items-center">
+        <div
+          class="font-medium text-base flex items-center"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        >
           <span class="mr-1" v-html="title" />
           <div
             :class="
@@ -20,7 +30,10 @@
             "
           />
         </div>
-        <div class="text-xs mt-1 text-black-700">
+        <div
+          class="text-xs mt-1"
+          :class="$dm('text-black-700', 'dark:text-slate-400')"
+        >
           {{ replyWaitMessage }}
         </div>
       </div>
@@ -36,6 +49,7 @@ import availabilityMixin from 'widget/mixins/availability';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions';
 import routerMixin from 'widget/mixins/routerMixin';
+import darkMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'ChatHeader',
@@ -43,7 +57,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [availabilityMixin, routerMixin],
+  mixins: [availabilityMixin, routerMixin, darkMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -67,7 +81,9 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index fc4aab125..fd316c3e0 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,5 +1,8 @@
 <template>
-  <header class="header-expanded bg-white py-6 px-5 relative box-border w-full">
+  <header
+    class="header-expanded py-6 px-5 relative box-border w-full"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
+  >
     <div
       class="flex items-start"
       :class="[avatarUrl ? 'justify-between' : 'justify-end']"
@@ -8,21 +11,29 @@
       <header-actions :show-popout-button="showPopoutButton" />
     </div>
     <h2
-      class="text-slate-900 mt-5 text-3xl mb-3 font-normal"
+      class=" mt-5 text-3xl mb-3 font-normal"
+      :class="$dm('text-slate-900', 'dark:text-slate-50')"
       v-html="introHeading"
     />
-    <p class="text-lg text-black-700 leading-normal" v-html="introBody" />
+    <p
+      class="text-lg leading-normal"
+      :class="$dm('text-slate-700', 'dark:text-slate-200')"
+      v-html="introBody"
+    />
   </header>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import HeaderActions from './HeaderActions';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+
 export default {
   name: 'ChatHeaderExpanded',
   components: {
     HeaderActions,
   },
+  mixins: [darkModeMixin],
   props: {
     avatarUrl: {
       type: String,
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 741eb67b2..4cb3fe043 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="chat-message--input"
-    :class="{ 'is-focused': isFocused }"
+    class="chat-message--input is-focused"
+    :class="$dm('bg-white ', 'dark:bg-slate-600')"
     @keydown.esc="hideEmojiPicker"
   >
     <resizable-text-area
@@ -10,7 +10,8 @@
       v-model="userInput"
       :aria-label="$t('CHAT_PLACEHOLDER')"
       :placeholder="$t('CHAT_PLACEHOLDER')"
-      class="form-input user-message-input"
+      class="form-input user-message-input is-focused"
+      :class="inputColor"
       @typing-off="onTypingOff"
       @typing-on="onTypingOn"
       @focus="onFocus"
@@ -19,6 +20,7 @@
     <div class="button-wrap">
       <chat-attachment-button
         v-if="showAttachment"
+        :class="$dm('text-black-900', 'dark:text-slate-100')"
         :on-attach="onSendAttachment"
       />
       <button
@@ -27,10 +29,7 @@
         aria-label="Emoji picker"
         @click="toggleEmojiPicker"
       >
-        <fluent-icon
-          icon="emoji"
-          :class="{ 'text-woot-500': showEmojiPicker }"
-        />
+        <fluent-icon icon="emoji" :class="emojiIconColor" />
       </button>
       <emoji-input
         v-if="showEmojiPicker"
@@ -57,6 +56,7 @@ import configMixin from '../mixins/configMixin';
 import EmojiInput from 'shared/components/emoji/EmojiInput';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'ChatInputWrap',
@@ -67,7 +67,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [clickaway, configMixin],
+  mixins: [clickaway, configMixin, darkModeMixin],
   props: {
     onSendMessage: {
       type: Function,
@@ -98,6 +98,15 @@ export default {
     showSendButton() {
       return this.userInput.length > 0;
     },
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
+    emojiIconColor() {
+      return this.showEmojiPicker
+        ? `text-woot-500 ${this.$dm('text-black-900', 'dark:text-slate-100')}`
+        : `${this.$dm('text-black-900', 'dark:text-slate-100')}`;
+    },
   },
   watch: {
     isWidgetOpen(isWidgetOpen) {
diff --git a/app/javascript/widget/components/Form/Input.vue b/app/javascript/widget/components/Form/Input.vue
index a8f1abe9e..4dddef74f 100644
--- a/app/javascript/widget/components/Form/Input.vue
+++ b/app/javascript/widget/components/Form/Input.vue
@@ -1,22 +1,12 @@
 <template>
   <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs font-medium"
-      :class="{
-        'text-black-800': !error,
-        'text-red-400': error,
-      }"
-    >
+    <div v-if="label" class="mb-2 text-xs font-medium" :class="labelClass">
       {{ label }}
     </div>
     <input
       :type="type"
-      class="border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300': !error,
-        'border-red-200 hover:border-red-300 focus:border-red-300': error,
-      }"
+      class="border rounded w-full py-2 px-3 leading-tight outline-none"
+      :class="inputHasError"
       :placeholder="placeholder"
       :value="value"
       @change="onChange"
@@ -27,7 +17,9 @@
   </label>
 </template>
 <script>
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
+  mixins: [darkModeMixin],
   props: {
     label: {
       type: String,
@@ -50,6 +42,27 @@ export default {
       default: '',
     },
   },
+  computed: {
+    labelClass() {
+      return this.error
+        ? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
+        : `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
+    },
+    isInputDarkOrLightMode() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
+        'text-slate-700',
+        'dark:text-slate-50'
+      )}`;
+    },
+    inputBorderColor() {
+      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+    },
+    inputHasError() {
+      return this.error
+        ? `border-red-200 hover:border-red-300 focus:border-red-300 ${this.isInputDarkOrLightMode}`
+        : `hover:border-black-300 focus:border-black-300 ${this.isInputDarkOrLightMode} ${this.inputBorderColor}`;
+    },
+  },
   methods: {
     onChange(event) {
       this.$emit('input', event.target.value);
diff --git a/app/javascript/widget/components/Form/TextArea.vue b/app/javascript/widget/components/Form/TextArea.vue
index 4de6b4323..024e104f0 100644
--- a/app/javascript/widget/components/Form/TextArea.vue
+++ b/app/javascript/widget/components/Form/TextArea.vue
@@ -1,21 +1,11 @@
 <template>
   <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs font-medium"
-      :class="{
-        'text-black-800': !error,
-        'text-red-400': error,
-      }"
-    >
+    <div v-if="label" class="mb-2 text-xs font-medium" :class="labelClass">
       {{ label }}
     </div>
     <textarea
       class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300': !error,
-        'border-red-200 hover:border-red-300 focus:border-red-300': error,
-      }"
+      :class="isTextAreaHasError"
       :placeholder="placeholder"
       :value="value"
       @change="onChange"
@@ -26,7 +16,9 @@
   </label>
 </template>
 <script>
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
+  mixins: [darkModeMixin],
   props: {
     label: {
       type: String,
@@ -49,6 +41,27 @@ export default {
       default: '',
     },
   },
+  computed: {
+    labelClass() {
+      return this.error
+        ? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
+        : `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
+    },
+    isTextAreaDarkOrLightMode() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
+        'text-slate-700',
+        'dark:text-slate-50'
+      )}`;
+    },
+    textAreaBorderColor() {
+      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+    },
+    isTextAreaHasError() {
+      return this.error
+        ? `border-red-200 hover:border-red-300 focus:border-red-300 ${this.isTextAreaDarkOrLightMode}`
+        : `hover:border-black-300 focus:border-black-300 ${this.isTextAreaDarkOrLightMode} ${this.textAreaBorderColor}`;
+    },
+  },
   methods: {
     onChange(event) {
       this.$emit('input', event.target.value);
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 1090d54b0..16f10ed12 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -6,14 +6,22 @@
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
     >
-      <fluent-icon icon="sign-out" size="22" class="text-black-900" />
+      <fluent-icon
+        icon="sign-out"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
     </button>
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button "
       @click="popoutWindow"
     >
-      <fluent-icon icon="open" size="22" class="text-black-900" />
+      <fluent-icon
+        icon="open"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
     </button>
     <button
       class="button transparent compact close-button"
@@ -22,7 +30,11 @@
       }"
       @click="closeWindow"
     >
-      <fluent-icon icon="dismiss" size="24" class="text-black-900" />
+      <fluent-icon
+        icon="dismiss"
+        size="24"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
     </button>
   </div>
 </template>
@@ -31,10 +43,12 @@ import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'HeaderActions',
   components: { FluentIcon },
+  mixins: [darkModeMixin],
   props: {
     showPopoutButton: {
       type: Boolean,
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 7fdf33375..793c59ecb 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -5,7 +5,8 @@
   >
     <div
       v-if="shouldShowHeaderMessage"
-      class="text-black-800 text-sm leading-5"
+      class="text-sm leading-5"
+      :class="$dm('text-black-800', 'dark:text-slate-50')"
     >
       {{ headerMessage }}
     </div>
@@ -64,6 +65,7 @@ import { getContrastingTextColor } from '@chatwoot/utils';
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import { isEmptyObject } from 'widget/helpers/utils';
 import routerMixin from 'widget/mixins/routerMixin';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
   components: {
     FormInput,
@@ -71,7 +73,7 @@ export default {
     CustomButton,
     Spinner,
   },
-  mixins: [routerMixin],
+  mixins: [routerMixin, darkModeMixin],
   props: {
     options: {
       type: Object,
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index c4e19742d..35cb7eebc 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="px-5">
     <div class="flex items-center justify-between mb-4">
-      <div class="text-black-700 max-w-xs">
+      <div
+        class="max-w-xs"
+        :class="$dm('text-black-700', 'dark:text-slate-50')"
+      >
         <div class="text-base leading-5 font-medium mb-1">
           {{
             isOnline
@@ -36,6 +39,7 @@ import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import CustomButton from 'shared/components/Button';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
+import darkMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'TeamAvailability',
@@ -43,7 +47,7 @@ export default {
     AvailableAgents,
     CustomButton,
   },
-  mixins: [configMixin, availabilityMixin],
+  mixins: [configMixin, availabilityMixin, darkMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -55,7 +59,9 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
index 13e8fc250..a3d8ee363 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="chat-bubble-wrap">
-    <button class="chat-bubble agent" @click="onClickMessage">
+    <button
+      class="chat-bubble agent"
+      :class="$dm('bg-white', 'dark:bg-slate-50')"
+      @click="onClickMessage"
+    >
       <div v-if="showSender" class="row--agent-block">
         <thumbnail
           :src="avatarUrl"
@@ -25,10 +29,11 @@ import {
   ON_CAMPAIGN_MESSAGE_CLICK,
   ON_UNREAD_MESSAGE_CLICK,
 } from '../constants/widgetBusEvents';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
   name: 'UnreadMessage',
   components: { Thumbnail },
-  mixins: [messageFormatterMixin, configMixin],
+  mixins: [messageFormatterMixin, configMixin, darkModeMixin],
   props: {
     message: {
       type: String,
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index 9c200eb43..10c56121f 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -1,11 +1,15 @@
 <template>
   <div
-    class="w-full h-full bg-slate-50 flex flex-col"
+    class="w-full h-full flex flex-col"
+    :class="$dm('bg-slate-50', 'dark:bg-slate-800')"
     @keydown.esc="closeWindow"
   >
     <div
-      class="header-wrap bg-white"
-      :class="{ expanded: !isHeaderCollapsed, collapsed: isHeaderCollapsed }"
+      class="header-wrap"
+      :class="{
+        expanded: !isHeaderCollapsed,
+        collapsed: isHeaderCollapsed,
+      }"
     >
       <transition
         enter-active-class="transition-all delay-200 duration-300 ease-in"
@@ -51,6 +55,7 @@ import Branding from 'shared/components/Branding.vue';
 import ChatHeader from '../ChatHeader.vue';
 import ChatHeaderExpanded from '../ChatHeaderExpanded.vue';
 import configMixin from '../../mixins/configMixin';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
 
@@ -61,7 +66,7 @@ export default {
     ChatHeader,
     ChatHeaderExpanded,
   },
-  mixins: [configMixin],
+  mixins: [configMixin, darkModeMixin],
   data() {
     return {
       showPopoutButton: false,
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index 6d5308c48..f022215bd 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -1,12 +1,25 @@
 <template>
-  <div v-if="!!items.length" class="chat-bubble agent">
+  <div
+    v-if="!!items.length"
+    class="chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
         <span class="title flex items-center text-black-900 font-medium">
-          <fluent-icon icon="link" class="mr-1" />
-          <span>{{ item.title }}</span>
+          <fluent-icon
+            icon="link"
+            class="mr-1"
+            :class="$dm('text-black-900', 'dark:text-slate-50')"
+          />
+          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
+            item.title
+          }}</span>
         </span>
-        <span class="description">
+        <span
+          class="description"
+          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+        >
           {{ truncateMessage(item.description) }}
         </span>
       </a>
@@ -17,12 +30,13 @@
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   components: {
     FluentIcon,
   },
-  mixins: [messageFormatterMixin],
+  mixins: [messageFormatterMixin, darkModeMixin],
   props: {
     items: {
       type: Array,
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index 096870b73..054508313 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -9,7 +9,7 @@
         v-model.trim="email"
         class="form-input"
         :placeholder="$t('EMAIL_PLACEHOLDER')"
-        :class="{ error: $v.email.$error }"
+        :class="inputHasError"
         @input="$v.email.$touch"
         @keydown.enter="onSubmit"
       />
@@ -31,12 +31,14 @@ import { required, email } from 'vuelidate/lib/validators';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import Spinner from 'shared/components/Spinner';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   components: {
     FluentIcon,
     Spinner,
   },
+  mixins: [darkModeMixin],
   props: {
     messageId: {
       type: Number,
@@ -63,6 +65,15 @@ export default {
         this.messageContentAttributes.submitted_email
       );
     },
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
+    inputHasError() {
+      return this.$v.email.$error
+        ? `${this.inputColor} error`
+        : `${this.inputColor}`;
+    },
   },
   validations: {
     email: {
@@ -105,6 +116,10 @@ export default {
     padding: $space-one;
     width: 100%;
 
+    &::placeholder {
+      color: $color-light-gray;
+    }
+
     &.error {
       border-color: $color-error;
     }
diff --git a/app/javascript/widget/mixins/darkModeMixin.js b/app/javascript/widget/mixins/darkModeMixin.js
new file mode 100644
index 000000000..dd8f19cfc
--- /dev/null
+++ b/app/javascript/widget/mixins/darkModeMixin.js
@@ -0,0 +1,15 @@
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({ darkMode: 'appConfig/darkMode' }),
+  },
+  methods: {
+    $dm(light, dark) {
+      if (this.darkMode === 'light') {
+        return light;
+      }
+      return light + ' ' + dark;
+    },
+  },
+};
diff --git a/app/javascript/widget/mixins/specs/darkModeMixin.spec.js b/app/javascript/widget/mixins/specs/darkModeMixin.spec.js
new file mode 100644
index 000000000..852bcc6e6
--- /dev/null
+++ b/app/javascript/widget/mixins/specs/darkModeMixin.spec.js
@@ -0,0 +1,41 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import darkModeMixin from '../darkModeMixin';
+import Vuex from 'vuex';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const darkModeValues = ['light', 'auto'];
+
+describe('darkModeMixin', () => {
+  let getters;
+  let store;
+  beforeEach(() => {
+    getters = {
+      'appConfig/darkMode': () => darkModeValues[0],
+    };
+    store = new Vuex.Store({ getters });
+  });
+
+  it('if light theme', () => {
+    const Component = {
+      render() {},
+      mixins: [darkModeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100');
+  });
+
+  it('if auto theme', () => {
+    getters = {
+      'appConfig/darkMode': () => darkModeValues[2],
+    };
+    store = new Vuex.Store({ getters });
+
+    const Component = {
+      render() {},
+      mixins: [darkModeMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100 bg-600');
+  });
+});
diff --git a/app/javascript/widget/store/modules/appConfig.js b/app/javascript/widget/store/modules/appConfig.js
index bb65f2dfa..319f86be4 100644
--- a/app/javascript/widget/store/modules/appConfig.js
+++ b/app/javascript/widget/store/modules/appConfig.js
@@ -15,6 +15,7 @@ const state = {
   showPopoutButton: false,
   widgetColor: '',
   widgetStyle: 'standard',
+  darkMode: 'light',
 };
 
 export const getters = {
@@ -25,18 +26,26 @@ export const getters = {
   getWidgetColor: $state => $state.widgetColor,
   getReferrerHost: $state => $state.referrerHost,
   isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
+  darkMode: $state => $state.darkMode,
 };
 
 export const actions = {
   setAppConfig(
     { commit },
-    { showPopoutButton, position, hideMessageBubble, widgetStyle = 'rounded' }
+    {
+      showPopoutButton,
+      position,
+      hideMessageBubble,
+      widgetStyle = 'rounded',
+      darkMode = 'light',
+    }
   ) {
     commit(SET_WIDGET_APP_CONFIG, {
       hideMessageBubble: !!hideMessageBubble,
       position: position || 'right',
       showPopoutButton: !!showPopoutButton,
       widgetStyle,
+      darkMode,
     });
   },
   toggleWidgetOpen({ commit }, isWidgetOpen) {
@@ -56,6 +65,7 @@ export const mutations = {
     $state.position = data.position;
     $state.hideMessageBubble = data.hideMessageBubble;
     $state.widgetStyle = data.widgetStyle;
+    $state.darkMode = data.darkMode;
   },
   [TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
     $state.isWidgetOpen = isWidgetOpen;
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index 8e20c06a9..3352f5a3a 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -19,6 +19,7 @@ window.chatwootSettings = {
   type: '<%= @widget_type %>',
   showPopoutButton: true,
   widgetStyle: '<%= @widget_style %>',
+  darkMode: '<%= @dark_mode %>',
 };
 
 (function(d,t) {
diff --git a/tailwind.config.js b/tailwind.config.js
index c4e5aa8c1..48e24bc31 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -85,7 +85,11 @@ module.exports = {
         900: '#C30011',
       },
     },
-    extend: {},
+    extend: {
+      screens: {
+        dark: { raw: '(prefers-color-scheme: dark)' },
+      },
+    },
   },
   variants: {},
   plugins: [],

From 5d85a212875c0b3de125881abbfbe8e6af939f13 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 1 Apr 2022 21:03:53 +0530
Subject: [PATCH 09/20] fix: Fix login button is missing in Safari (#4332)

Fixes #4328
---
 .../dashboard/components/buttons/FormSubmitButton.vue  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index cc65c68b0..1a60b3a43 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -57,3 +57,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+button:disabled {
+  opacity: 1;
+  background-color: var(--w-100);
+
+  &:hover {
+    background-color: var(--w-100);
+  }
+}
+</style>

From 3509692055912b5796d9dac7b922e1a11e8b94b8 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Sun, 3 Apr 2022 19:22:56 +0530
Subject: [PATCH 10/20] chore: Fix brand name in survey translations (#4360)

---
 app/javascript/survey/i18n/locale/ar.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/survey/i18n/locale/ar.json b/app/javascript/survey/i18n/locale/ar.json
index 945c640a2..9cd0cc6d1 100644
--- a/app/javascript/survey/i18n/locale/ar.json
+++ b/app/javascript/survey/i18n/locale/ar.json
@@ -15,5 +15,5 @@
       "ERROR_MESSAGE": "تعذر الاتصال بالخادم، الرجاء المحاولة مرة أخرى لاحقاً"
     }
   },
-  "POWERED_BY": "مدعوم بواسطة تشات وت"
+  "POWERED_BY": "مدعوم بواسطة Chatwoot"
 }

From 1dd0c7249c21a5482f08cfc7fe3546003238aea4 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 4 Apr 2022 14:34:01 +0530
Subject: [PATCH 11/20] fix:  Unread notification count in multiple accounts
 (#4373)

Fixes: #4367
---
 app/listeners/base_listener.rb | 5 +++--
 app/models/user.rb             | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/listeners/base_listener.rb b/app/listeners/base_listener.rb
index 397ec62ed..ffd57d2a3 100644
--- a/app/listeners/base_listener.rb
+++ b/app/listeners/base_listener.rb
@@ -8,8 +8,9 @@ class BaseListener
 
   def extract_notification_and_account(event)
     notification = event.data[:notification]
-    unread_count = notification.user.notifications_meta[:unread_count]
-    count = notification.user.notifications_meta[:count]
+    notifications_meta = notification.user.notifications_meta(notification.account_id)
+    unread_count = notifications_meta[:unread_count]
+    count = notifications_meta[:count]
     [notification, notification.account, unread_count, count]
   end
 
diff --git a/app/models/user.rb b/app/models/user.rb
index 8c4b3ce2f..3b7a74672 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -188,10 +188,10 @@ class User < ApplicationRecord
     mutations_from_database.changed?('email')
   end
 
-  def notifications_meta
+  def notifications_meta(account_id)
     {
-      unread_count: notifications.where(read_at: nil).count,
-      count: notifications.count
+      unread_count: notifications.where(account_id: account_id, read_at: nil).count,
+      count: notifications.where(account_id: account_id).count
     }
   end
 end

From 73d8073530a7dab8fa95b1deecb7fa3ad8028296 Mon Sep 17 00:00:00 2001
From: Jordan Brough <jordan-brough@users.noreply.github.com>
Date: Mon, 4 Apr 2022 02:45:45 -0700
Subject: [PATCH 12/20] chore: Fix test failure in
 action_cable_listener_spec.rb due to ordering (#4357)

---
 spec/listeners/action_cable_listener_spec.rb | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/spec/listeners/action_cable_listener_spec.rb b/spec/listeners/action_cable_listener_spec.rb
index 16367848f..b3266abc8 100644
--- a/spec/listeners/action_cable_listener_spec.rb
+++ b/spec/listeners/action_cable_listener_spec.rb
@@ -24,7 +24,9 @@ describe ActionCableListener do
       expect(conversation.inbox.reload.inbox_members.count).to eq(1)
 
       expect(ActionCableBroadcastJob).to receive(:perform_later).with(
-        [agent.pubsub_token, admin.pubsub_token, conversation.contact_inbox.pubsub_token],
+        a_collection_containing_exactly(
+          agent.pubsub_token, admin.pubsub_token, conversation.contact_inbox.pubsub_token
+        ),
         'message.created',
         message.push_event_data.merge(account_id: account.id)
       )
@@ -40,7 +42,9 @@ describe ActionCableListener do
       verified_contact_inbox = create(:contact_inbox, contact: conversation.contact, inbox: inbox, hmac_verified: true)
 
       expect(ActionCableBroadcastJob).to receive(:perform_later).with(
-        [agent.pubsub_token, admin.pubsub_token, conversation.contact_inbox.pubsub_token, verified_contact_inbox.pubsub_token],
+        a_collection_containing_exactly(
+          agent.pubsub_token, admin.pubsub_token, conversation.contact_inbox.pubsub_token, verified_contact_inbox.pubsub_token
+        ),
         'message.created',
         message.push_event_data.merge(account_id: account.id)
       )
@@ -56,7 +60,9 @@ describe ActionCableListener do
       # HACK: to reload conversation inbox members
       expect(conversation.inbox.reload.inbox_members.count).to eq(1)
       expect(ActionCableBroadcastJob).to receive(:perform_later).with(
-        [admin.pubsub_token, conversation.contact.pubsub_token],
+        a_collection_containing_exactly(
+          admin.pubsub_token, conversation.contact.pubsub_token
+        ),
         'conversation.typing_on', conversation: conversation.push_event_data,
                                   user: agent.push_event_data,
                                   account_id: account.id,
@@ -74,7 +80,9 @@ describe ActionCableListener do
       # HACK: to reload conversation inbox members
       expect(conversation.inbox.reload.inbox_members.count).to eq(1)
       expect(ActionCableBroadcastJob).to receive(:perform_later).with(
-        [admin.pubsub_token, conversation.contact.pubsub_token],
+        a_collection_containing_exactly(
+          admin.pubsub_token, conversation.contact.pubsub_token
+        ),
         'conversation.typing_off', conversation: conversation.push_event_data,
                                    user: agent.push_event_data,
                                    account_id: account.id,
@@ -91,7 +99,9 @@ describe ActionCableListener do
 
     it 'sends message to account admins, inbox agents' do
       expect(ActionCableBroadcastJob).to receive(:perform_later).with(
-        [agent.pubsub_token, admin.pubsub_token],
+        a_collection_containing_exactly(
+          agent.pubsub_token, admin.pubsub_token
+        ),
         'contact.deleted',
         contact.push_event_data.merge(account_id: account.id)
       )

From 591d186d667633f83ba83183c2e69a7221e283d8 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 4 Apr 2022 18:23:38 +0530
Subject: [PATCH 13/20] chore: Add `agent_last_seen_at` in conversation API
 (#4377)

---
 app/views/public/api/v1/models/_conversation.json.jbuilder | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/views/public/api/v1/models/_conversation.json.jbuilder b/app/views/public/api/v1/models/_conversation.json.jbuilder
index 7029238d9..25d888d3f 100644
--- a/app/views/public/api/v1/models/_conversation.json.jbuilder
+++ b/app/views/public/api/v1/models/_conversation.json.jbuilder
@@ -2,6 +2,7 @@ json.id resource.display_id
 json.inbox_id resource.inbox_id
 json.contact_last_seen_at resource.contact_last_seen_at.to_i
 json.status resource.status
+json.agent_last_seen_at resource.agent_last_seen_at.to_i
 json.messages do
   json.array! resource.messages do |message|
     json.partial! 'public/api/v1/models/message.json.jbuilder', resource: message

From 76f53d9a1168d2e2e3d2d9cedc37c6401d8efa5c Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <vishnu@chatwoot.com>
Date: Mon, 4 Apr 2022 19:27:01 +0530
Subject: [PATCH 14/20] feat: add gh action to run CE edition tests (#4342)

* feat: add gh action to run CE spec

* setup ruby
* add pg,redis services
* fix failing tests
---
 .github/workflows/run-foss-spec.yml | 72 +++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 .github/workflows/run-foss-spec.yml

diff --git a/.github/workflows/run-foss-spec.yml b/.github/workflows/run-foss-spec.yml
new file mode 100644
index 000000000..3a6ff5f7b
--- /dev/null
+++ b/.github/workflows/run-foss-spec.yml
@@ -0,0 +1,72 @@
+# #
+# # This action will strip the enterprise folder
+# # and run the spec.
+# # This is set to run against every PR.
+# #
+
+name: Run Chatwoot CE spec
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:10.8
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: ""
+          POSTGRES_DB: postgres
+        ports:
+          - 5432:5432
+        # needed because the postgres container does not provide a healthcheck
+        # tmpfs makes DB faster by using RAM
+        options: >-
+          --mount type=tmpfs,destination=/var/lib/postgresql/data
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+        options: --entrypoint redis-server
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        ref: ${{ github.head_ref }}
+
+    - uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: 3.0.2 # Not needed with a .ruby-version file
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+    - name: yarn
+      run: yarn install
+
+    - name: Strip enterprise code
+      run: |
+        rm -rf enterprise
+        rm -rf spec/enterprise
+
+    - name: Create database
+      run: bundle exec rake db:create
+
+    - name: Seed database
+      run: bundle exec rake db:schema:load
+
+    - name: yarn check-files
+      run: yarn install --check-files
+
+    # Run rails tests
+    - name: Run backend tests
+      run: |
+        bundle exec rspec --profile=10 --format documentation

From cd5646b4b9aee239d68887bf8687d23a52a18c31 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 5 Apr 2022 14:00:07 +0530
Subject: [PATCH 15/20] fix: Skip `contact_last_seen_at` in empty conversation
 payload (#4387)

* Fix undefined `last_seen_at` empty conversation

* chore: remove the comment

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 .../api/v1/widget/messages/index.json.jbuilder   |  2 +-
 .../api/v1/widget/messages_controller_spec.rb    | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/views/api/v1/widget/messages/index.json.jbuilder b/app/views/api/v1/widget/messages/index.json.jbuilder
index d7a441b84..29e80815d 100644
--- a/app/views/api/v1/widget/messages/index.json.jbuilder
+++ b/app/views/api/v1/widget/messages/index.json.jbuilder
@@ -12,5 +12,5 @@ json.payload do
   end
 end
 json.meta do
-  json.contact_last_seen_at @conversation.contact_last_seen_at.to_i
+  json.contact_last_seen_at @conversation.contact_last_seen_at.to_i if @conversation.present?
 end
diff --git a/spec/controllers/api/v1/widget/messages_controller_spec.rb b/spec/controllers/api/v1/widget/messages_controller_spec.rb
index f203f11c8..208327c74 100644
--- a/spec/controllers/api/v1/widget/messages_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/messages_controller_spec.rb
@@ -9,8 +9,8 @@ RSpec.describe '/api/v1/widget/messages', type: :request do
   let(:payload) { { source_id: contact_inbox.source_id, inbox_id: web_widget.inbox.id } }
   let(:token) { ::Widget::TokenService.new(payload: payload).generate_token }
 
-  before do
-    2.times.each { create(:message, account: account, inbox: web_widget.inbox, conversation: conversation) }
+  before do |example|
+    2.times.each { create(:message, account: account, inbox: web_widget.inbox, conversation: conversation) } unless example.metadata[:skip_before]
   end
 
   describe 'GET /api/v1/widget/messages' do
@@ -25,6 +25,18 @@ RSpec.describe '/api/v1/widget/messages', type: :request do
         json_response = JSON.parse(response.body)
         # 2 messages created + 2 messages by the email hook
         expect(json_response['payload'].length).to eq(4)
+        expect(json_response['meta']).not_to be_empty
+      end
+
+      it 'returns empty messages', :skip_before do
+        get api_v1_widget_messages_url,
+            params: { website_token: web_widget.website_token },
+            headers: { 'X-Auth-Token' => token },
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        json_response = JSON.parse(response.body)
+        expect(json_response['payload'].length).to eq(0)
       end
     end
   end

From 9a8a0bd8655a1af62e003cb0bdceff873404d8f1 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 5 Apr 2022 15:20:34 +0530
Subject: [PATCH 16/20] feat: Ability to customize the online presence duration
 (#4385)

---
 lib/online_status_tracker.rb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/online_status_tracker.rb b/lib/online_status_tracker.rb
index 8688c4251..ec5f65812 100644
--- a/lib/online_status_tracker.rb
+++ b/lib/online_status_tracker.rb
@@ -1,5 +1,6 @@
 module OnlineStatusTracker
-  PRESENCE_DURATION = 20.seconds
+  # NOTE: You can customise the environment variable to keep your agents/contacts as online for longer
+  PRESENCE_DURATION = ENV.fetch('PRESENCE_DURATION', 20).to_i.seconds
 
   # presence : sorted set with timestamp as the score & object id as value
 

From 2595e774e5e1525aa32c7540e9d3a839d918b1dc Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Tue, 5 Apr 2022 15:22:56 +0530
Subject: [PATCH 17/20] fix: Update validations in automation edit actions
 (#4370)

Co-authored-by: fayazara <fayazara@gmail.com>
---
 .../widgets/AutomationActionInput.vue         |  6 ++-
 .../dashboard/helper/actionQueryGenerator.js  | 13 ++++-
 .../settings/automation/AddAutomationRule.vue | 23 ++++++---
 .../automation/EditAutomationRule.vue         | 50 ++++++++++++++-----
 app/models/automation_rule.rb                 |  2 +-
 5 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 0c8178a9b..dc3a31c08 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -18,7 +18,7 @@
           {{ attribute.label }}
         </option>
       </select>
-      <div class="filter__answer--wrap">
+      <div v-if="showActionInput" class="filter__answer--wrap">
         <div v-if="inputType">
           <div
             v-if="inputType === 'multi_select'"
@@ -89,6 +89,10 @@ export default {
       type: Object,
       default: () => null,
     },
+    showActionInput: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     action_name: {
diff --git a/app/javascript/dashboard/helper/actionQueryGenerator.js b/app/javascript/dashboard/helper/actionQueryGenerator.js
index d8f57b572..7ef5fa56f 100644
--- a/app/javascript/dashboard/helper/actionQueryGenerator.js
+++ b/app/javascript/dashboard/helper/actionQueryGenerator.js
@@ -1,8 +1,19 @@
+const formatArray = params => {
+  if (params.length <= 0) {
+    params = [];
+  } else if (params.every(elem => typeof elem === 'string')) {
+    params = [...params];
+  } else {
+    params = params.map(val => val.id);
+  }
+  return params;
+};
+
 const generatePayload = data => {
   const actions = JSON.parse(JSON.stringify(data));
   let payload = actions.map(item => {
     if (Array.isArray(item.action_params)) {
-      item.action_params = item.action_params.map(val => val.id);
+      item.action_params = formatArray(item.action_params);
     } else if (typeof item.values === 'object') {
       item.action_params = [item.action_params.id];
     } else if (!item.action_params) {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 2e10280e5..68d2c687c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -100,6 +100,9 @@
               :dropdown-values="
                 getActionDropdownValues(automation.actions[i].action_name)
               "
+              :show-action-input="
+                showActionInput(automation.actions[i].action_name)
+              "
               :v="$v.automation.actions.$each[i]"
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
@@ -413,14 +416,15 @@ export default {
     submitAutomation() {
       this.$v.$touch();
       if (this.$v.$invalid) return;
-      this.automation.conditions[
-        this.automation.conditions.length - 1
+      const automation = JSON.parse(JSON.stringify(this.automation));
+      automation.conditions[
+        automation.conditions.length - 1
       ].query_operator = null;
-      this.automation.conditions = filterQueryGenerator(
-        this.automation.conditions
+      automation.conditions = filterQueryGenerator(
+        automation.conditions
       ).payload;
-      this.automation.actions = actionQueryGenerator(this.automation.actions);
-      this.$emit('saveAutomation', this.automation);
+      automation.actions = actionQueryGenerator(automation.actions);
+      this.$emit('saveAutomation', automation);
     },
     resetFilter(index, currentCondition) {
       this.automation.conditions[index].filter_operator = this.automationTypes[
@@ -438,6 +442,13 @@ export default {
         return false;
       return true;
     },
+    showActionInput(actionName) {
+      const type = AUTOMATION_ACTION_TYPES.find(
+        action => action.key === actionName
+      ).inputType;
+      if (type === null) return false;
+      return true;
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 6add27ba5..cf70a35bb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -97,6 +97,9 @@
               :dropdown-values="
                 getActionDropdownValues(automation.actions[i].action_name)
               "
+              :show-action-input="
+                showActionInput(automation.actions[i].action_name)
+              "
               :v="$v.automation.actions.$each[i]"
               @removeAction="removeAction(i)"
             />
@@ -192,7 +195,13 @@ export default {
         required,
         $each: {
           action_params: {
-            required,
+            required: requiredIf(prop => {
+              return !(
+                prop.action_name === 'mute_conversation' ||
+                prop.action_name === 'snooze_convresation' ||
+                prop.action_name === 'resolve_convresation'
+              );
+            }),
           },
         },
       },
@@ -246,7 +255,7 @@ export default {
     },
   },
   mounted() {
-    this.formatConditions(this.selectedResponse);
+    this.formatAutomation(this.selectedResponse);
   },
   methods: {
     onEventChange() {
@@ -414,14 +423,15 @@ export default {
     submitAutomation() {
       this.$v.$touch();
       if (this.$v.$invalid) return;
-      this.automation.conditions[
-        this.automation.conditions.length - 1
+      const automation = JSON.parse(JSON.stringify(this.automation));
+      automation.conditions[
+        automation.conditions.length - 1
       ].query_operator = null;
-      this.automation.conditions = filterQueryGenerator(
-        this.automation.conditions
+      automation.conditions = filterQueryGenerator(
+        automation.conditions
       ).payload;
-      this.automation.actions = actionQueryGenerator(this.automation.actions);
-      this.$emit('saveAutomation', this.automation, 'EDIT');
+      automation.actions = actionQueryGenerator(automation.actions);
+      this.$emit('saveAutomation', automation, 'EDIT');
     },
     resetFilter(index, currentCondition) {
       this.automation.conditions[index].filter_operator = this.automationTypes[
@@ -436,7 +446,7 @@ export default {
         return false;
       return true;
     },
-    formatConditions(automation) {
+    formatAutomation(automation) {
       const formattedConditions = automation.conditions.map(condition => {
         const inputType = this.automationTypes[
           automation.event_name
@@ -456,11 +466,20 @@ export default {
         };
       });
       const formattedActions = automation.actions.map(action => {
+        let actionParams = [];
+        if (action.action_params.length) {
+          const inputType = AUTOMATION_ACTION_TYPES.find(
+            item => item.key === action.action_name
+          ).inputType;
+          if (inputType === 'multi_select') {
+            actionParams = [
+              ...this.getActionDropdownValues(action.action_name),
+            ].filter(item => [...action.action_params].includes(item.id));
+          } else actionParams = [...action.action_params];
+        }
         return {
           ...action,
-          action_params: [
-            ...this.getActionDropdownValues(action.action_name),
-          ].filter(item => [...action.action_params].includes(item.id)),
+          action_params: actionParams,
         };
       });
       this.automation = {
@@ -469,6 +488,13 @@ export default {
         actions: formattedActions,
       };
     },
+    showActionInput(actionName) {
+      const type = AUTOMATION_ACTION_TYPES.find(
+        action => action.key === actionName
+      ).inputType;
+      if (type === null) return false;
+      return true;
+    },
   },
 };
 </script>
diff --git a/app/models/automation_rule.rb b/app/models/automation_rule.rb
index b0b62eef9..95cd9543e 100644
--- a/app/models/automation_rule.rb
+++ b/app/models/automation_rule.rb
@@ -27,7 +27,7 @@ class AutomationRule < ApplicationRecord
 
   scope :active, -> { where(active: true) }
 
-  CONDITIONS_ATTRS = %w[email country_code status message_type browser_language assignee_id team_id referer city company].freeze
+  CONDITIONS_ATTRS = %w[content email country_code status message_type browser_language assignee_id team_id referrer city company].freeze
   ACTIONS_ATTRS = %w[send_message add_label send_email_to_team assign_team assign_best_agents send_attachments].freeze
 
   private

From 7a8aa4ca2e29cda09217f590eb09dcc1edfa44b5 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 5 Apr 2022 16:05:49 +0530
Subject: [PATCH 18/20] chore: Add Swagger Doc for Team Members (#4390)

Add swagger documentation for Team Members APIs
---
 .../team_members/create.json.jbuilder         |   8 +-
 swagger/index.yml                             |  12 +-
 swagger/parameters/team_id.yml                |   2 +-
 swagger/paths/application/agents/create.yml   |   2 +-
 swagger/paths/application/agents/delete.yml   |   2 +-
 swagger/paths/application/agents/index.yml    |   2 +-
 swagger/paths/application/agents/update.yml   |   2 +-
 .../application/canned_responses/create.yml   |   2 +-
 .../application/canned_responses/delete.yml   |   2 +-
 .../application/canned_responses/index.yml    |   2 +-
 .../application/contacts/conversations.yml    |   2 +-
 swagger/paths/application/contacts/crud.yml   |   6 +-
 swagger/paths/application/contacts/filter.yml |   2 +-
 .../application/contacts/list_create.yml      |   4 +-
 swagger/paths/application/contacts/search.yml |   2 +-
 .../paths/application/conversation/filter.yml |   2 +-
 .../paths/application/conversation/index.yml  |   4 +-
 .../paths/application/conversation/show.yml   |   2 +-
 .../conversation/toggle_status.yml            |   2 +-
 .../conversation/update_last_seen.yml         |   2 +-
 .../application/custom_filters/create.yml     |   2 +-
 .../application/custom_filters/delete.yml     |   2 +-
 .../application/custom_filters/index.yml      |   2 +-
 .../paths/application/custom_filters/show.yml |   2 +-
 .../application/custom_filters/update.yml     |   2 +-
 swagger/paths/application/inboxes/create.yml  |   2 +-
 .../application/inboxes/get_agent_bot.yml     |   2 +-
 .../inboxes/inbox_members/create.yml          |   2 +-
 .../inboxes/inbox_members/delete.yml          |   2 +-
 .../inboxes/inbox_members/show.yml            |   2 +-
 .../inboxes/inbox_members/update.yml          |   2 +-
 swagger/paths/application/inboxes/index.yml   |   2 +-
 .../application/inboxes/set_agent_bot.yml     |   2 +-
 swagger/paths/application/inboxes/show.yml    |   2 +-
 swagger/paths/application/inboxes/update.yml  |   2 +-
 .../paths/application/team_members/create.yml |  35 ++
 .../paths/application/team_members/delete.yml |  31 ++
 .../paths/application/team_members/index.yml  |  21 ++
 .../paths/application/team_members/update.yml |  35 ++
 swagger/paths/index.yml                       |  16 +-
 swagger/swagger.json                          | 302 +++++++++++++++---
 41 files changed, 440 insertions(+), 94 deletions(-)
 create mode 100644 swagger/paths/application/team_members/create.yml
 create mode 100644 swagger/paths/application/team_members/delete.yml
 create mode 100644 swagger/paths/application/team_members/index.yml
 create mode 100644 swagger/paths/application/team_members/update.yml

diff --git a/app/views/api/v1/accounts/team_members/create.json.jbuilder b/app/views/api/v1/accounts/team_members/create.json.jbuilder
index e4924f6a2..d8c0d209f 100644
--- a/app/views/api/v1/accounts/team_members/create.json.jbuilder
+++ b/app/views/api/v1/accounts/team_members/create.json.jbuilder
@@ -1,7 +1,3 @@
-if @team_member
-  json.partial! 'api/v1/models/agent.json.jbuilder', resource: @team_member
-elsif @team_members.present?
-  json.array! @team_members do |team_member|
-    json.partial! 'api/v1/models/agent.json.jbuilder', resource: team_member
-  end
+json.array! @team_members do |team_member|
+  json.partial! 'api/v1/models/agent.json.jbuilder', resource: team_member
 end
diff --git a/swagger/index.yml b/swagger/index.yml
index 28f20ce5a..181fed1a8 100644
--- a/swagger/index.yml
+++ b/swagger/index.yml
@@ -53,18 +53,18 @@ x-tagGroups:
   - name: Application
     tags:
       - Account AgentBots
-      - Agent
-      - Canned Response
-      - Contact
-      - Conversation
+      - Agents
+      - Canned Responses
+      - Contacts
+      - Conversations
       - Conversation Assignment
       - Conversation Labels
-      - Inbox
+      - Inboxes
       - Messages
       - Integrations
       - Profile
       - Teams
-      - Custom Filter
+      - Custom Filters
       - Reports
   - name: Client
     tags:
diff --git a/swagger/parameters/team_id.yml b/swagger/parameters/team_id.yml
index 805c32c2d..c18532b75 100644
--- a/swagger/parameters/team_id.yml
+++ b/swagger/parameters/team_id.yml
@@ -1,5 +1,5 @@
 in: path
-name: id
+name: team_id
 type: integer
 required: true
 description: The ID of the team to be updated
diff --git a/swagger/paths/application/agents/create.yml b/swagger/paths/application/agents/create.yml
index b206eb306..dd191d81f 100644
--- a/swagger/paths/application/agents/create.yml
+++ b/swagger/paths/application/agents/create.yml
@@ -1,5 +1,5 @@
 tags:
-  - Agent
+  - Agents
 operationId: add-new-agent-to-account
 summary: Add a New Agent
 description: Add a new Agent to Account
diff --git a/swagger/paths/application/agents/delete.yml b/swagger/paths/application/agents/delete.yml
index 1872fd8ea..118ddf234 100644
--- a/swagger/paths/application/agents/delete.yml
+++ b/swagger/paths/application/agents/delete.yml
@@ -1,5 +1,5 @@
 tags:
-  - Agent
+  - Agents
 operationId: delete-agent-from-account
 summary: Remove an Agent from Account
 description: Remove an Agent from Account
diff --git a/swagger/paths/application/agents/index.yml b/swagger/paths/application/agents/index.yml
index 026893a4b..7961ad3b0 100644
--- a/swagger/paths/application/agents/index.yml
+++ b/swagger/paths/application/agents/index.yml
@@ -1,5 +1,5 @@
 tags:
-  - Agent
+  - Agents
 operationId: get-account-agents
 summary: List Agents in Account
 description: Get Details of Agents in an Account
diff --git a/swagger/paths/application/agents/update.yml b/swagger/paths/application/agents/update.yml
index 693bef5b2..a72f5ed4e 100644
--- a/swagger/paths/application/agents/update.yml
+++ b/swagger/paths/application/agents/update.yml
@@ -1,5 +1,5 @@
 tags:
-  - Agent
+  - Agents
 operationId: update-agent-in-account
 summary: Update Agent in Account
 description: Update an Agent in Account
diff --git a/swagger/paths/application/canned_responses/create.yml b/swagger/paths/application/canned_responses/create.yml
index 69b3673bc..95eacafb1 100644
--- a/swagger/paths/application/canned_responses/create.yml
+++ b/swagger/paths/application/canned_responses/create.yml
@@ -1,5 +1,5 @@
 tags:
-  - Canned Response
+  - Canned Responses
 operationId: add-new-canned-response-to-account
 summary: Add a New Canned Response
 description: Add a new Canned Response to Account
diff --git a/swagger/paths/application/canned_responses/delete.yml b/swagger/paths/application/canned_responses/delete.yml
index 4b82e5068..2b1d08238 100644
--- a/swagger/paths/application/canned_responses/delete.yml
+++ b/swagger/paths/application/canned_responses/delete.yml
@@ -1,5 +1,5 @@
 tags:
-  - Canned Response
+  - Canned Responses
 operationId: delete-canned-response-from-account
 summary: Remove a Canned Response from Account
 description: Remove a Canned Response from Account
diff --git a/swagger/paths/application/canned_responses/index.yml b/swagger/paths/application/canned_responses/index.yml
index 4e4a24c5d..3094a23a6 100644
--- a/swagger/paths/application/canned_responses/index.yml
+++ b/swagger/paths/application/canned_responses/index.yml
@@ -1,5 +1,5 @@
 tags:
-  - Canned Response
+  - Canned Responses
 operationId: get-account-canned-response
 summary: List all Canned Responses in an Account
 description: Get Details of Canned Responses in an Account
diff --git a/swagger/paths/application/contacts/conversations.yml b/swagger/paths/application/contacts/conversations.yml
index 7d4b507b9..d08235f5e 100644
--- a/swagger/paths/application/contacts/conversations.yml
+++ b/swagger/paths/application/contacts/conversations.yml
@@ -1,6 +1,6 @@
 get:
   tags:
-    - Contact
+    - Contacts
   operationId: contactConversations
   summary: Contact Conversations
   description: Get conversations associated to that contact
diff --git a/swagger/paths/application/contacts/crud.yml b/swagger/paths/application/contacts/crud.yml
index af9fecff7..3c982dfe9 100644
--- a/swagger/paths/application/contacts/crud.yml
+++ b/swagger/paths/application/contacts/crud.yml
@@ -8,7 +8,7 @@ parameters:
 
 get:
   tags:
-    - Contact
+    - Contacts
   operationId: contactDetails
   summary: Show Contact
   description: Get a contact belonging to the account using ID
@@ -24,7 +24,7 @@ get:
 
 put:
   tags:
-    - Contact
+    - Contacts
   operationId: contactUpdate
   summary: Update Contact
   description: Update a contact belonging to the account using ID
@@ -46,7 +46,7 @@ put:
 
 delete:
   tags:
-    - Contact
+    - Contacts
   operationId: contactDelete
   summary: Delete Contact
   responses:
diff --git a/swagger/paths/application/contacts/filter.yml b/swagger/paths/application/contacts/filter.yml
index 27adfbb9f..39aa269d9 100644
--- a/swagger/paths/application/contacts/filter.yml
+++ b/swagger/paths/application/contacts/filter.yml
@@ -1,5 +1,5 @@
 tags:
-  - Contact
+  - Contacts
 operationId: contactFilter
 description: Filter contacts with custom filter options and pagination
 summary: Contact Filter
diff --git a/swagger/paths/application/contacts/list_create.yml b/swagger/paths/application/contacts/list_create.yml
index a80311d32..4329ed3b7 100644
--- a/swagger/paths/application/contacts/list_create.yml
+++ b/swagger/paths/application/contacts/list_create.yml
@@ -1,6 +1,6 @@
 get:
   tags:
-    - Contact
+    - Contacts
   operationId: contactList
   description: Listing all the resolved contacts with pagination (Page size = 15) . Resolved contacts are the ones with a value for identifier, email or phone number
   summary: List Contacts
@@ -20,7 +20,7 @@ get:
 
 post:
   tags:
-    - Contact
+    - Contacts
   operationId: contactCreate
   description: Create a new Contact
   summary: Create Contact
diff --git a/swagger/paths/application/contacts/search.yml b/swagger/paths/application/contacts/search.yml
index e413863bd..63cc11903 100644
--- a/swagger/paths/application/contacts/search.yml
+++ b/swagger/paths/application/contacts/search.yml
@@ -1,6 +1,6 @@
 get:
   tags:
-    - Contact
+    - Contacts
   operationId: contactSearch
   description: Search the resolved contacts using a search key, currently supports email search (Page size = 15). Resolved contacts are the ones with a value for identifier, email or phone number
   summary: Search Contacts
diff --git a/swagger/paths/application/conversation/filter.yml b/swagger/paths/application/conversation/filter.yml
index 8f7e642c7..3ef141145 100644
--- a/swagger/paths/application/conversation/filter.yml
+++ b/swagger/paths/application/conversation/filter.yml
@@ -1,5 +1,5 @@
 tags:
-  - Conversation
+  - Conversations
 operationId: conversationFilter
 description: Filter conversations with custom filter options and pagination
 summary: Conversations Filter
diff --git a/swagger/paths/application/conversation/index.yml b/swagger/paths/application/conversation/index.yml
index d5f8f9c0c..8041a7af6 100644
--- a/swagger/paths/application/conversation/index.yml
+++ b/swagger/paths/application/conversation/index.yml
@@ -3,7 +3,7 @@ parameters:
 
 get:
   tags:
-    - Conversation
+    - Conversations
   operationId: conversationList
   description: List all the conversations with pagination
   summary: Conversations List
@@ -43,7 +43,7 @@ get:
 
 post:
   tags:
-    - Conversation
+    - Conversations
   operationId: newConversation
   summary: Create New Conversation
   description: "Creating a conversation in chatwoot requires a source id. \n\n Learn more about source_id: https://github.com/chatwoot/chatwoot/wiki/Building-on-Top-of-Chatwoot:-Importing-Existing-Contacts-and-Creating-Conversations"
diff --git a/swagger/paths/application/conversation/show.yml b/swagger/paths/application/conversation/show.yml
index 81782702c..56c3a292b 100644
--- a/swagger/paths/application/conversation/show.yml
+++ b/swagger/paths/application/conversation/show.yml
@@ -1,5 +1,5 @@
 tags:
-  - Conversation
+  - Conversations
 operationId: get-details-of-a-conversation
 summary: Conversation Details
 description: Get all details regarding a conversation with all messages in the conversation
diff --git a/swagger/paths/application/conversation/toggle_status.yml b/swagger/paths/application/conversation/toggle_status.yml
index 14172e27c..20b18d6aa 100644
--- a/swagger/paths/application/conversation/toggle_status.yml
+++ b/swagger/paths/application/conversation/toggle_status.yml
@@ -1,5 +1,5 @@
 tags:
-  - Conversation
+  - Conversations
 operationId: toggle-status-of-a-conversation
 summary: Toggle Status
 description: Toggles the status of the conversation between open and resolved
diff --git a/swagger/paths/application/conversation/update_last_seen.yml b/swagger/paths/application/conversation/update_last_seen.yml
index 2f26df879..0f542dd7f 100644
--- a/swagger/paths/application/conversation/update_last_seen.yml
+++ b/swagger/paths/application/conversation/update_last_seen.yml
@@ -1,6 +1,6 @@
 post:
   tags:
-    - Conversation
+    - Conversations
   operationId: conversationUpdateLastSeen
   summary: Update Last Seen
   description: Updates the last seen of the conversation so that conversations will have the bubbles in the agents screen
diff --git a/swagger/paths/application/custom_filters/create.yml b/swagger/paths/application/custom_filters/create.yml
index 6fbc4c7f8..9d9534976 100644
--- a/swagger/paths/application/custom_filters/create.yml
+++ b/swagger/paths/application/custom_filters/create.yml
@@ -1,5 +1,5 @@
 tags:
-  - Custom Filter
+  - Custom Filters
 operationId: create-a-custom-filter
 summary: Create a custom filter
 description: Create a custom filter in the account
diff --git a/swagger/paths/application/custom_filters/delete.yml b/swagger/paths/application/custom_filters/delete.yml
index 3ae042e9b..e66748858 100644
--- a/swagger/paths/application/custom_filters/delete.yml
+++ b/swagger/paths/application/custom_filters/delete.yml
@@ -1,5 +1,5 @@
 tags:
-  - Custom Filter
+  - Custom Filters
 operationId: delete-a-custom-filter
 summary: Delete a custom filter
 description: Delete a custom filter from the account
diff --git a/swagger/paths/application/custom_filters/index.yml b/swagger/paths/application/custom_filters/index.yml
index b66e7b6f8..b77949dc3 100644
--- a/swagger/paths/application/custom_filters/index.yml
+++ b/swagger/paths/application/custom_filters/index.yml
@@ -1,5 +1,5 @@
 tags:
-  - Custom Filter
+  - Custom Filters
 operationId: list-all-filters
 summary: List all custom filters
 description: List all custom filters in a category of a user
diff --git a/swagger/paths/application/custom_filters/show.yml b/swagger/paths/application/custom_filters/show.yml
index e2e2bf529..14de07d85 100644
--- a/swagger/paths/application/custom_filters/show.yml
+++ b/swagger/paths/application/custom_filters/show.yml
@@ -1,5 +1,5 @@
 tags:
-  - Custom Filter
+  - Custom Filters
 operationId: get-details-of-a-single-custom-filter
 summary: Get a custom filter details
 description: Get the details of a custom filter in the account
diff --git a/swagger/paths/application/custom_filters/update.yml b/swagger/paths/application/custom_filters/update.yml
index 23ff97781..a058b81f8 100644
--- a/swagger/paths/application/custom_filters/update.yml
+++ b/swagger/paths/application/custom_filters/update.yml
@@ -1,5 +1,5 @@
 tags:
-  - Custom Filter
+  - Custom Filters
 operationId: update-a-custom-filter
 summary: Update a custom filter
 description: Update a custom filter's attributes
diff --git a/swagger/paths/application/inboxes/create.yml b/swagger/paths/application/inboxes/create.yml
index 2a63775e7..3d649e820 100644
--- a/swagger/paths/application/inboxes/create.yml
+++ b/swagger/paths/application/inboxes/create.yml
@@ -1,6 +1,6 @@
 post:
   tags:
-    - Inbox
+    - Inboxes
   operationId: inboxCreation
   summary: Create an inbox
   description: You can create more than one website inbox in each account
diff --git a/swagger/paths/application/inboxes/get_agent_bot.yml b/swagger/paths/application/inboxes/get_agent_bot.yml
index b77e7e06a..178151dd3 100644
--- a/swagger/paths/application/inboxes/get_agent_bot.yml
+++ b/swagger/paths/application/inboxes/get_agent_bot.yml
@@ -1,6 +1,6 @@
 get:
   tags:
-    - Inbox
+    - Inboxes
   operationId: getInboxAgentBot
   summary: Show Inbox Agent Bot
   description: See if an agent bot is associated to the Inbox
diff --git a/swagger/paths/application/inboxes/inbox_members/create.yml b/swagger/paths/application/inboxes/inbox_members/create.yml
index 2cbbb4598..9ca5641e6 100644
--- a/swagger/paths/application/inboxes/inbox_members/create.yml
+++ b/swagger/paths/application/inboxes/inbox_members/create.yml
@@ -1,5 +1,5 @@
 tags:
-  - Inbox
+  - Inboxes
 operationId: add-new-agent-to-inbox
 summary: Add a New Agent
 description: Add a new Agent to Inbox
diff --git a/swagger/paths/application/inboxes/inbox_members/delete.yml b/swagger/paths/application/inboxes/inbox_members/delete.yml
index 3167b28c6..78f1435b5 100644
--- a/swagger/paths/application/inboxes/inbox_members/delete.yml
+++ b/swagger/paths/application/inboxes/inbox_members/delete.yml
@@ -1,5 +1,5 @@
 tags:
-  - Inbox
+  - Inboxes
 operationId: delete-agent-in-inbox
 summary: Remove an Agent from Inbox
 description: Remove an Agent from Inbox
diff --git a/swagger/paths/application/inboxes/inbox_members/show.yml b/swagger/paths/application/inboxes/inbox_members/show.yml
index af358f78f..57793f520 100644
--- a/swagger/paths/application/inboxes/inbox_members/show.yml
+++ b/swagger/paths/application/inboxes/inbox_members/show.yml
@@ -1,5 +1,5 @@
 tags:
-  - Inbox
+  - Inboxes
 operationId: get-inbox-members
 summary: List Agents in Inbox
 description: Get Details of Agents in an Inbox
diff --git a/swagger/paths/application/inboxes/inbox_members/update.yml b/swagger/paths/application/inboxes/inbox_members/update.yml
index 3a06cef27..483b8f6ab 100644
--- a/swagger/paths/application/inboxes/inbox_members/update.yml
+++ b/swagger/paths/application/inboxes/inbox_members/update.yml
@@ -1,5 +1,5 @@
 tags:
-  - Inbox
+  - Inboxes
 operationId: update-agents-in-inbox
 summary: Update Agents in Inbox
 description: All agents except the one passed in params will be removed
diff --git a/swagger/paths/application/inboxes/index.yml b/swagger/paths/application/inboxes/index.yml
index 714ff87e7..233488228 100644
--- a/swagger/paths/application/inboxes/index.yml
+++ b/swagger/paths/application/inboxes/index.yml
@@ -1,6 +1,6 @@
 get:
   tags:
-    - Inbox
+    - Inboxes
   operationId: listAllInboxes
   summary: List all inboxes
   description: List all inboxes available in the current account
diff --git a/swagger/paths/application/inboxes/set_agent_bot.yml b/swagger/paths/application/inboxes/set_agent_bot.yml
index b37b06915..56a37d165 100644
--- a/swagger/paths/application/inboxes/set_agent_bot.yml
+++ b/swagger/paths/application/inboxes/set_agent_bot.yml
@@ -1,6 +1,6 @@
 post:
   tags:
-    - Inbox
+    - Inboxes
   operationId: updateAgentBot
   summary: Add or remove agent bot
   description: To add an agent bot pass agent_bot id, to remove agent bot from an inbox pass null
diff --git a/swagger/paths/application/inboxes/show.yml b/swagger/paths/application/inboxes/show.yml
index a0d44c1d2..6bb2e84a5 100644
--- a/swagger/paths/application/inboxes/show.yml
+++ b/swagger/paths/application/inboxes/show.yml
@@ -1,6 +1,6 @@
 get:
   tags:
-    - Inbox
+    - Inboxes
   operationId: GetInbox
   summary: Get an inbox
   description: Get an inbox available in the current account
diff --git a/swagger/paths/application/inboxes/update.yml b/swagger/paths/application/inboxes/update.yml
index d44822114..c5b3aaebf 100644
--- a/swagger/paths/application/inboxes/update.yml
+++ b/swagger/paths/application/inboxes/update.yml
@@ -1,6 +1,6 @@
 patch:
   tags:
-    - Inbox
+    - Inboxes
   operationId: updateInbox
   summary: Update Inbox
   description: Add avatar and disable auto assignment for an inbox
diff --git a/swagger/paths/application/team_members/create.yml b/swagger/paths/application/team_members/create.yml
new file mode 100644
index 000000000..724769319
--- /dev/null
+++ b/swagger/paths/application/team_members/create.yml
@@ -0,0 +1,35 @@
+tags:
+  - Teams
+operationId: add-new-agent-to-team
+summary: Add a New Agent
+description: Add a new Agent to Team
+security:
+  - userApiKey: []
+parameters:
+  - name: data
+    in: body
+    required: true
+    schema:
+      type: object
+      required:
+          - user_ids
+      properties:
+        user_ids:
+          type: array
+          items:
+            type: integer
+          description: IDs of users to be added to the team
+responses:
+  200:
+    description: Success
+    schema:
+        type: array
+        description: 'Array of all active agents'
+        items:
+          $ref: '#/definitions/agent'
+  404:
+    description: Team not found
+  403:
+    description: Access denied
+  422:
+    description: User must exist
diff --git a/swagger/paths/application/team_members/delete.yml b/swagger/paths/application/team_members/delete.yml
new file mode 100644
index 000000000..ac7dbb451
--- /dev/null
+++ b/swagger/paths/application/team_members/delete.yml
@@ -0,0 +1,31 @@
+tags:
+  - Teams
+operationId: delete-agent-in-team
+summary: Remove an Agent from Team
+description: Remove an Agent from Team
+security:
+  - userApiKey: []
+parameters:
+  - name: data
+    in: body
+    required: true
+    schema:
+      type: object
+      required:
+        - team_id
+        - user_ids
+      properties:
+        user_ids:
+          type: array
+          items:
+            type: integer
+          description: IDs of users to be deleted from the team
+responses:
+  200:
+    description: Success
+  404:
+    description: Team not found
+  403:
+    description: Access denied
+  422:
+    description: User must exist
diff --git a/swagger/paths/application/team_members/index.yml b/swagger/paths/application/team_members/index.yml
new file mode 100644
index 000000000..dc28f2e99
--- /dev/null
+++ b/swagger/paths/application/team_members/index.yml
@@ -0,0 +1,21 @@
+tags:
+  - Teams
+operationId: get-team-members
+summary: List Agents in Team
+description: Get Details of Agents in an Team
+security:
+  - userApiKey: []
+parameters:
+  - $ref: '#/parameters/team_id'
+responses:
+  200:
+    description: Success
+    schema:
+        type: array
+        description: 'Array of all agents in the team'
+        items:
+          $ref: '#/definitions/agent'
+  404:
+    description: Inbox not found
+  403:
+    description: Access denied
diff --git a/swagger/paths/application/team_members/update.yml b/swagger/paths/application/team_members/update.yml
new file mode 100644
index 000000000..81034b9c7
--- /dev/null
+++ b/swagger/paths/application/team_members/update.yml
@@ -0,0 +1,35 @@
+tags:
+  - Teams
+operationId: update-agents-in-team
+summary: Update Agents in Team
+description: All agents except the one passed in params will be removed
+security:
+  - userApiKey: []
+parameters:
+  - name: data
+    in: body
+    required: true
+    schema:
+      type: object
+      required:
+        - user_ids
+      properties:
+        user_ids:
+          type: array
+          items:
+            type: integer
+          description: IDs of users to be added to the team
+responses:
+  200:
+    description: Success
+    schema:
+        type: array
+        description: 'Array of all agents in the team'
+        items:
+          $ref: '#/definitions/agent'
+  404:
+    description: Team not found
+  403:
+    description: Access denied
+  422:
+    description: User must exist
diff --git a/swagger/paths/index.yml b/swagger/paths/index.yml
index 279ebb7bc..dc00c9b24 100644
--- a/swagger/paths/index.yml
+++ b/swagger/paths/index.yml
@@ -154,7 +154,7 @@
   delete:
     $ref: ./application/agents/delete.yml
 
-# Agents
+# Canned Responses
 /api/v1/accounts/{account_id}/canned_responses:
   parameters:
     - $ref: '#/parameters/account_id'
@@ -315,7 +315,7 @@
     $ref: ./application/teams/index.yml
   post:
     $ref: ./application/teams/create.yml
-/api/v1/accounts/{account_id}/teams/{id}:
+/api/v1/accounts/{account_id}/teams/{team_id}:
   parameters:
     - $ref: '#/parameters/account_id'
     - $ref: '#/parameters/team_id'
@@ -325,6 +325,18 @@
     $ref: ./application/teams/update.yml
   delete:
     $ref: ./application/teams/delete.yml
+/accounts/{account-id}/teams/{team_id}/team_members:
+  parameters:
+    - $ref: '#/parameters/account_id'
+    - $ref: '#/parameters/team_id'
+  get:
+    $ref: ./application/team_members/index.yml
+  post:
+    $ref: ./application/team_members/create.yml
+  patch:
+    $ref: ./application/team_members/update.yml
+  delete:
+    $ref: ./application/team_members/delete.yml
 
 ### Custom Filters goes here
 
diff --git a/swagger/swagger.json b/swagger/swagger.json
index 4de4db49d..6e188ad5e 100644
--- a/swagger/swagger.json
+++ b/swagger/swagger.json
@@ -1118,7 +1118,7 @@
       ],
       "get": {
         "tags": [
-          "Agent"
+          "Agents"
         ],
         "operationId": "get-account-agents",
         "summary": "List Agents in Account",
@@ -1148,7 +1148,7 @@
       },
       "post": {
         "tags": [
-          "Agent"
+          "Agents"
         ],
         "operationId": "add-new-agent-to-account",
         "summary": "Add a New Agent",
@@ -1227,7 +1227,7 @@
       ],
       "patch": {
         "tags": [
-          "Agent"
+          "Agents"
         ],
         "operationId": "update-agent-in-account",
         "summary": "Update Agent in Account",
@@ -1299,7 +1299,7 @@
       },
       "delete": {
         "tags": [
-          "Agent"
+          "Agents"
         ],
         "operationId": "delete-agent-from-account",
         "summary": "Remove an Agent from Account",
@@ -1341,7 +1341,7 @@
       ],
       "get": {
         "tags": [
-          "Canned Response"
+          "Canned Responses"
         ],
         "operationId": "get-account-canned-response",
         "summary": "List all Canned Responses in an Account",
@@ -1371,7 +1371,7 @@
       },
       "post": {
         "tags": [
-          "Canned Response"
+          "Canned Responses"
         ],
         "operationId": "add-new-canned-response-to-account",
         "summary": "Add a New Canned Response",
@@ -1460,7 +1460,7 @@
       },
       "delete": {
         "tags": [
-          "Canned Response"
+          "Canned Responses"
         ],
         "operationId": "delete-canned-response-from-account",
         "summary": "Remove a Canned Response from Account",
@@ -1497,7 +1497,7 @@
     "/api/v1/accounts/{account_id}/contacts": {
       "get": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactList",
         "description": "Listing all the resolved contacts with pagination (Page size = 15) . Resolved contacts are the ones with a value for identifier, email or phone number",
@@ -1530,7 +1530,7 @@
       },
       "post": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactCreate",
         "description": "Create a new Contact",
@@ -1579,7 +1579,7 @@
       ],
       "get": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactDetails",
         "summary": "Show Contact",
@@ -1601,7 +1601,7 @@
       },
       "put": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactUpdate",
         "summary": "Update Contact",
@@ -1633,7 +1633,7 @@
       },
       "delete": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactDelete",
         "summary": "Delete Contact",
@@ -1653,7 +1653,7 @@
     "/api/v1/accounts/{account_id}/contacts/{id}/conversations": {
       "get": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactConversations",
         "summary": "Contact Conversations",
@@ -1689,7 +1689,7 @@
     "/api/v1/accounts/{account_id}/contacts/search": {
       "get": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactSearch",
         "description": "Search the resolved contacts using a search key, currently supports email search (Page size = 15). Resolved contacts are the ones with a value for identifier, email or phone number",
@@ -1740,7 +1740,7 @@
       ],
       "post": {
         "tags": [
-          "Contact"
+          "Contacts"
         ],
         "operationId": "contactFilter",
         "description": "Filter contacts with custom filter options and pagination",
@@ -1947,7 +1947,7 @@
       ],
       "get": {
         "tags": [
-          "Conversation"
+          "Conversations"
         ],
         "operationId": "conversationList",
         "description": "List all the conversations with pagination",
@@ -2013,7 +2013,7 @@
       },
       "post": {
         "tags": [
-          "Conversation"
+          "Conversations"
         ],
         "operationId": "newConversation",
         "summary": "Create New Conversation",
@@ -2110,7 +2110,7 @@
       ],
       "post": {
         "tags": [
-          "Conversation"
+          "Conversations"
         ],
         "operationId": "conversationFilter",
         "description": "Filter conversations with custom filter options and pagination",
@@ -2221,7 +2221,7 @@
       ],
       "get": {
         "tags": [
-          "Conversation"
+          "Conversations"
         ],
         "operationId": "get-details-of-a-conversation",
         "summary": "Conversation Details",
@@ -2253,7 +2253,7 @@
       ],
       "post": {
         "tags": [
-          "Conversation"
+          "Conversations"
         ],
         "operationId": "toggle-status-of-a-conversation",
         "summary": "Toggle Status",
@@ -2438,7 +2438,7 @@
     "/api/v1/accounts/{account_id}/inboxes": {
       "get": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "listAllInboxes",
         "summary": "List all inboxes",
@@ -2471,7 +2471,7 @@
     "/api/v1/accounts/{account_id}/inboxes/{id}/": {
       "get": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "GetInbox",
         "summary": "Get an inbox",
@@ -2507,7 +2507,7 @@
     "/api/v1/accounts/{account_id}/inboxes/": {
       "post": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "inboxCreation",
         "summary": "Create an inbox",
@@ -2586,7 +2586,7 @@
     "/api/v1/accounts/{account_id}/inboxes/{id}": {
       "patch": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "updateInbox",
         "summary": "Update Inbox",
@@ -2673,7 +2673,7 @@
     "/api/v1/accounts/{account_id}/inboxes/{id}/agent_bot": {
       "get": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "getInboxAgentBot",
         "summary": "Show Inbox Agent Bot",
@@ -2709,7 +2709,7 @@
     "/api/v1/accounts/{account_id}/inboxes/{id}/set_agent_bot": {
       "post": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "updateAgentBot",
         "summary": "Add or remove agent bot",
@@ -2767,7 +2767,7 @@
       ],
       "get": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "get-inbox-members",
         "summary": "List Agents in Inbox",
@@ -2805,7 +2805,7 @@
       },
       "patch": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "update-agents-in-inbox",
         "summary": "Update Agents in Inbox",
@@ -2868,7 +2868,7 @@
       },
       "delete": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "delete-agent-in-inbox",
         "summary": "Remove an Agent from Inbox",
@@ -2931,7 +2931,7 @@
       ],
       "post": {
         "tags": [
-          "Inbox"
+          "Inboxes"
         ],
         "operationId": "add-new-agent-to-inbox",
         "summary": "Add a New Agent",
@@ -3333,7 +3333,7 @@
         }
       }
     },
-    "/api/v1/accounts/{account_id}/teams/{id}": {
+    "/api/v1/accounts/{account_id}/teams/{team_id}": {
       "parameters": [
         {
           "$ref": "#/parameters/account_id"
@@ -3413,6 +3413,222 @@
         }
       }
     },
+    "/accounts/{account-id}/teams/{team_id}/team_members": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        },
+        {
+          "$ref": "#/parameters/team_id"
+        }
+      ],
+      "get": {
+        "tags": [
+          "Teams"
+        ],
+        "operationId": "get-team-members",
+        "summary": "List Agents in Team",
+        "description": "Get Details of Agents in an Team",
+        "security": [
+          {
+            "userApiKey": [
+
+            ]
+          }
+        ],
+        "parameters": [
+          {
+            "$ref": "#/parameters/team_id"
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "schema": {
+              "type": "array",
+              "description": "Array of all agents in the team",
+              "items": {
+                "$ref": "#/definitions/agent"
+              }
+            }
+          },
+          "404": {
+            "description": "Inbox not found"
+          },
+          "403": {
+            "description": "Access denied"
+          }
+        }
+      },
+      "post": {
+        "tags": [
+          "Teams"
+        ],
+        "operationId": "add-new-agent-to-team",
+        "summary": "Add a New Agent",
+        "description": "Add a new Agent to Team",
+        "security": [
+          {
+            "userApiKey": [
+
+            ]
+          }
+        ],
+        "parameters": [
+          {
+            "name": "data",
+            "in": "body",
+            "required": true,
+            "schema": {
+              "type": "object",
+              "required": [
+                "user_ids"
+              ],
+              "properties": {
+                "user_ids": {
+                  "type": "array",
+                  "items": {
+                    "type": "integer"
+                  },
+                  "description": "IDs of users to be added to the team"
+                }
+              }
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "schema": {
+              "type": "array",
+              "description": "Array of all active agents",
+              "items": {
+                "$ref": "#/definitions/agent"
+              }
+            }
+          },
+          "404": {
+            "description": "Team not found"
+          },
+          "403": {
+            "description": "Access denied"
+          },
+          "422": {
+            "description": "User must exist"
+          }
+        }
+      },
+      "patch": {
+        "tags": [
+          "Teams"
+        ],
+        "operationId": "update-agents-in-team",
+        "summary": "Update Agents in Team",
+        "description": "All agents except the one passed in params will be removed",
+        "security": [
+          {
+            "userApiKey": [
+
+            ]
+          }
+        ],
+        "parameters": [
+          {
+            "name": "data",
+            "in": "body",
+            "required": true,
+            "schema": {
+              "type": "object",
+              "required": [
+                "user_ids"
+              ],
+              "properties": {
+                "user_ids": {
+                  "type": "array",
+                  "items": {
+                    "type": "integer"
+                  },
+                  "description": "IDs of users to be added to the team"
+                }
+              }
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success",
+            "schema": {
+              "type": "array",
+              "description": "Array of all agents in the team",
+              "items": {
+                "$ref": "#/definitions/agent"
+              }
+            }
+          },
+          "404": {
+            "description": "Team not found"
+          },
+          "403": {
+            "description": "Access denied"
+          },
+          "422": {
+            "description": "User must exist"
+          }
+        }
+      },
+      "delete": {
+        "tags": [
+          "Teams"
+        ],
+        "operationId": "delete-agent-in-team",
+        "summary": "Remove an Agent from Team",
+        "description": "Remove an Agent from Team",
+        "security": [
+          {
+            "userApiKey": [
+
+            ]
+          }
+        ],
+        "parameters": [
+          {
+            "name": "data",
+            "in": "body",
+            "required": true,
+            "schema": {
+              "type": "object",
+              "required": [
+                "team_id",
+                "user_ids"
+              ],
+              "properties": {
+                "user_ids": {
+                  "type": "array",
+                  "items": {
+                    "type": "integer"
+                  },
+                  "description": "IDs of users to be deleted from the team"
+                }
+              }
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Success"
+          },
+          "404": {
+            "description": "Team not found"
+          },
+          "403": {
+            "description": "Access denied"
+          },
+          "422": {
+            "description": "User must exist"
+          }
+        }
+      }
+    },
     "/api/v1/accounts/{account_id}/custom_filters": {
       "parameters": [
         {
@@ -3433,7 +3649,7 @@
       ],
       "get": {
         "tags": [
-          "Custom Filter"
+          "Custom Filters"
         ],
         "operationId": "list-all-filters",
         "summary": "List all custom filters",
@@ -3456,7 +3672,7 @@
       },
       "post": {
         "tags": [
-          "Custom Filter"
+          "Custom Filters"
         ],
         "operationId": "create-a-custom-filter",
         "summary": "Create a custom filter",
@@ -3498,7 +3714,7 @@
       ],
       "get": {
         "tags": [
-          "Custom Filter"
+          "Custom Filters"
         ],
         "operationId": "get-details-of-a-single-custom-filter",
         "summary": "Get a custom filter details",
@@ -3520,7 +3736,7 @@
       },
       "patch": {
         "tags": [
-          "Custom Filter"
+          "Custom Filters"
         ],
         "operationId": "update-a-custom-filter",
         "summary": "Update a custom filter",
@@ -3549,7 +3765,7 @@
       },
       "delete": {
         "tags": [
-          "Custom Filter"
+          "Custom Filters"
         ],
         "operationId": "delete-a-custom-filter",
         "summary": "Delete a custom filter",
@@ -5084,7 +5300,7 @@
     },
     "team_id": {
       "in": "path",
-      "name": "id",
+      "name": "team_id",
       "type": "integer",
       "required": true,
       "description": "The ID of the team to be updated"
@@ -5221,18 +5437,18 @@
       "name": "Application",
       "tags": [
         "Account AgentBots",
-        "Agent",
-        "Canned Response",
-        "Contact",
-        "Conversation",
+        "Agents",
+        "Canned Responses",
+        "Contacts",
+        "Conversations",
         "Conversation Assignment",
         "Conversation Labels",
-        "Inbox",
+        "Inboxes",
         "Messages",
         "Integrations",
         "Profile",
         "Teams",
-        "Custom Filter",
+        "Custom Filters",
         "Reports"
       ]
     },

From 821b953ee9b02d68ab2152fb05ac7a437b0708e4 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Wed, 6 Apr 2022 12:36:32 +0530
Subject: [PATCH 19/20] Fix: handling UTF encoded mail (#4384)

---
 app/presenters/mail_presenter.rb             |  2 +-
 spec/fixtures/files/non_utf_encoded_mail.eml | 15 +++++++++++++++
 spec/presenters/mail_presenter_spec.rb       |  9 +++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 spec/fixtures/files/non_utf_encoded_mail.eml

diff --git a/app/presenters/mail_presenter.rb b/app/presenters/mail_presenter.rb
index f2d9ac92c..ff355c9f3 100644
--- a/app/presenters/mail_presenter.rb
+++ b/app/presenters/mail_presenter.rb
@@ -33,7 +33,7 @@ class MailPresenter < SimpleDelegator
   # encodes mail raw body if mail.content_type is plain/text
   # encodes mail raw body if mail.content_type is html/text
   def text_html_mail(mail_part)
-    decoded = mail_part&.decoded || @mail.body&.decoded
+    decoded = mail_part&.decoded || @mail.decoded
     encoded = encode_to_unicode(decoded)
 
     encoded if html_mail_body? || text_mail_body?
diff --git a/spec/fixtures/files/non_utf_encoded_mail.eml b/spec/fixtures/files/non_utf_encoded_mail.eml
new file mode 100644
index 000000000..78e6e55b1
--- /dev/null
+++ b/spec/fixtures/files/non_utf_encoded_mail.eml
@@ -0,0 +1,15 @@
+In-Reply-To: <4e6e35f5a38b4_479f13bb90078178@small-app-01.mail>, <4e6e35f5a38b4_479f13bb90078178@small-app-01.mail>
+To: "Replies" <reply+6bdc3f4d-0bec-4515-a284-5d916fdde489@example.com>
+From: "=?UTF-8?B?2YXYqtis2LEg2LPZiNmCINmG2Ko=?=" <example@gmail.com>
+Date: Sun, 3 Apr 2022 11:48:20 -0700
+Message-ID: <CAEjnyt3uiyywAF3SrJzEedMRV5H5XG4aYvFrGdFwxtuGoRCc0w@mail.gmail.com>
+Subject: =?UTF-8?Q?=D8=A3=D9=87=D9=84=D9=8A=D9=86_=D8=B9?= =?UTF-8?Q?=D9=85=D9=8A=D9=84=D9=86=D8=A7_=D8=A7=D9=84?= =?UTF-8?Q?=D9=83=D8=B1=D9=8A=D9=85_?=
+MIME-Version: 1.0
+Content-Type: text/plain; charset=UTF-8
+Content-Transfer-Encoding: base64
+Content-Disposition: inline
+Precedence: bulk
+X-Autoreply: yes
+Auto-Submitted: auto-replied
+
+2KPZhti42LHZiNin2Iwg2KPZhtinINij2K3Yqtin2KzZh9inINmB2YLYtyDZhNiq2YLZiNmFINio2KfZhNiq2K/ZgtmK2YIg2YHZiiDZhdmC2KfZhNiq2Yog2KfZhNi02K7YtdmK2KkK
diff --git a/spec/presenters/mail_presenter_spec.rb b/spec/presenters/mail_presenter_spec.rb
index c1049e944..a39559cc4 100644
--- a/spec/presenters/mail_presenter_spec.rb
+++ b/spec/presenters/mail_presenter_spec.rb
@@ -5,6 +5,7 @@ RSpec.describe MailPresenter do
   describe 'parsed mail decorator' do
     let(:mail) { create_inbound_email_from_fixture('welcome.eml').mail }
     let(:html_mail) { create_inbound_email_from_fixture('welcome_html.eml').mail }
+    let(:ascii_mail) { create_inbound_email_from_fixture('non_utf_encoded_mail.eml').mail }
     let(:decorated_mail) { described_class.new(mail) }
 
     let(:mail_with_no_subject) { create_inbound_email_from_fixture('mail_with_no_subject.eml').mail }
@@ -65,5 +66,13 @@ RSpec.describe MailPresenter do
         "I'm learning English as a first language for the past 13 years, but to "
       )
     end
+
+    it 'encodes email to UTF-8' do
+      decorated_html_mail = described_class.new(ascii_mail)
+      expect(decorated_html_mail.subject).to eq('أهلين عميلنا الكريم ')
+      expect(decorated_html_mail.text_content[:reply][0..70]).to eq(
+        'أنظروا، أنا أحتاجها فقط لتقوم بالتدقيق في مقالتي الشخصية'
+      )
+    end
   end
 end

From 0b03e4b296c8c522ea346fb4d93f215a808a9aa3 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 6 Apr 2022 13:54:55 +0530
Subject: [PATCH 20/20] feat: Add an option to disable endConversation button
 (#4352)

---
 .../api/v1/widget/conversations_controller.rb |  5 ++-
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  3 +-
 .../dashboard/settings/inbox/Settings.vue     | 11 ++++++
 .../widget/components/HeaderActions.vue       |  7 ++--
 app/javascript/widget/mixins/configMixin.js   |  3 ++
 .../widget/mixins/specs/configMixin.spec.js   |  5 +--
 app/models/channel/web_widget.rb              |  3 +-
 ...5092033_update_web_widget_feature_flags.rb | 16 +++++++++
 db/schema.rb                                  |  4 +--
 .../widget/conversations_controller_spec.rb   | 34 +++++++++++++++++++
 10 files changed, 81 insertions(+), 10 deletions(-)
 create mode 100644 db/migrate/20220405092033_update_web_widget_feature_flags.rb

diff --git a/app/controllers/api/v1/widget/conversations_controller.rb b/app/controllers/api/v1/widget/conversations_controller.rb
index cc1b16b75..3b0a460e4 100644
--- a/app/controllers/api/v1/widget/conversations_controller.rb
+++ b/app/controllers/api/v1/widget/conversations_controller.rb
@@ -45,7 +45,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def toggle_status
-    head :not_found && return if conversation.nil?
+    return head :not_found if conversation.nil?
+
+    return head :forbidden unless @web_widget.end_conversation?
+
     unless conversation.resolved?
       conversation.status = :resolved
       conversation.save
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 538d6d5f0..83a28de43 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -395,7 +395,8 @@
     "FEATURES": {
       "LABEL": "Features",
       "DISPLAY_FILE_PICKER": "Display file picker on the widget",
-      "DISPLAY_EMOJI_PICKER": "Display emoji picker on the widget"
+      "DISPLAY_EMOJI_PICKER": "Display emoji picker on the widget",
+      "ALLOW_END_CONVERSATION": "Allow users to end conversation from the widget"
     },
     "SETTINGS_POPUP": {
       "MESSENGER_HEADING": "Messenger Script",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 31f435a82..5b29091f7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -285,6 +285,17 @@
             {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
           </label>
         </div>
+        <div v-if="isAWebWidgetInbox" class="settings-item settings-item">
+          <input
+            v-model="selectedFeatureFlags"
+            type="checkbox"
+            value="end_conversation"
+            @input="handleFeatureFlag"
+          />
+          <label for="end_conversation">
+            {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
+          </label>
+        </div>
 
         <woot-submit-button
           v-if="isAPIInbox"
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 16f10ed12..433c7b6f0 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="showHeaderActions" class="actions flex items-center">
     <button
-      v-if="conversationStatus === 'open'"
+      v-if="conversationStatus === 'open' && hasEndConversationEnabled"
       class="button transparent compact"
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
@@ -43,12 +43,13 @@ import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
+import configMixin from 'widget/mixins/configMixin';
 
 export default {
   name: 'HeaderActions',
   components: { FluentIcon },
-  mixins: [darkModeMixin],
+  mixins: [configMixin, darkModeMixin],
   props: {
     showPopoutButton: {
       type: Boolean,
diff --git a/app/javascript/widget/mixins/configMixin.js b/app/javascript/widget/mixins/configMixin.js
index c91730767..9cb09f062 100644
--- a/app/javascript/widget/mixins/configMixin.js
+++ b/app/javascript/widget/mixins/configMixin.js
@@ -18,6 +18,9 @@ export default {
     hasAttachmentsEnabled() {
       return this.channelConfig.enabledFeatures.includes('attachments');
     },
+    hasEndConversationEnabled() {
+      return this.channelConfig.enabledFeatures.includes('end_conversation');
+    },
     preChatFormEnabled() {
       return window.chatwootWebChannel.preChatFormEnabled;
     },
diff --git a/app/javascript/widget/mixins/specs/configMixin.spec.js b/app/javascript/widget/mixins/specs/configMixin.spec.js
index c87d9fd71..975001249 100644
--- a/app/javascript/widget/mixins/specs/configMixin.spec.js
+++ b/app/javascript/widget/mixins/specs/configMixin.spec.js
@@ -5,7 +5,7 @@ import Vue from 'vue';
 global.chatwootWebChannel = {
   avatarUrl: 'https://test.url',
   hasAConnectedAgentBot: 'AgentBot',
-  enabledFeatures: ['emoji_picker', 'attachments'],
+  enabledFeatures: ['emoji_picker', 'attachments', 'end_conversation'],
   preChatFormOptions: { require_email: false, pre_chat_message: '' },
 };
 
@@ -24,6 +24,7 @@ describe('configMixin', () => {
     const vm = new Constructor().$mount();
     const wrapper = createWrapper(vm);
     expect(wrapper.vm.hasEmojiPickerEnabled).toBe(true);
+    expect(wrapper.vm.hasEndConversationEnabled).toBe(true);
     expect(wrapper.vm.hasAttachmentsEnabled).toBe(true);
     expect(wrapper.vm.hasAConnectedAgentBot).toBe(true);
     expect(wrapper.vm.useInboxAvatarForBot).toBe(true);
@@ -31,7 +32,7 @@ describe('configMixin', () => {
     expect(wrapper.vm.channelConfig).toEqual({
       avatarUrl: 'https://test.url',
       hasAConnectedAgentBot: 'AgentBot',
-      enabledFeatures: ['emoji_picker', 'attachments'],
+      enabledFeatures: ['emoji_picker', 'attachments', 'end_conversation'],
       preChatFormOptions: {
         pre_chat_message: '',
         require_email: false,
diff --git a/app/models/channel/web_widget.rb b/app/models/channel/web_widget.rb
index 949b562be..94ea0138b 100644
--- a/app/models/channel/web_widget.rb
+++ b/app/models/channel/web_widget.rb
@@ -4,7 +4,7 @@
 #
 #  id                    :integer          not null, primary key
 #  continuity_via_email  :boolean          default(TRUE), not null
-#  feature_flags         :integer          default(3), not null
+#  feature_flags         :integer          default(7), not null
 #  hmac_mandatory        :boolean          default(FALSE)
 #  hmac_token            :string
 #  pre_chat_form_enabled :boolean          default(FALSE)
@@ -43,6 +43,7 @@ class Channel::WebWidget < ApplicationRecord
 
   has_flags 1 => :attachments,
             2 => :emoji_picker,
+            3 => :end_conversation,
             :column => 'feature_flags',
             :check_for_column => false
 
diff --git a/db/migrate/20220405092033_update_web_widget_feature_flags.rb b/db/migrate/20220405092033_update_web_widget_feature_flags.rb
new file mode 100644
index 000000000..5b534aa15
--- /dev/null
+++ b/db/migrate/20220405092033_update_web_widget_feature_flags.rb
@@ -0,0 +1,16 @@
+class UpdateWebWidgetFeatureFlags < ActiveRecord::Migration[6.1]
+  def change
+    change_column_default(:channel_web_widgets, :feature_flags, from: 3, to: 7)
+
+    set_end_conversation_to_default
+  end
+
+  def set_end_conversation_to_default
+    ::Channel::WebWidget.find_in_batches do |widget_batch|
+      widget_batch.each do |widget|
+        widget.end_conversation = true
+        widget.save!
+      end
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 2f3334b74..c99c2b70c 100644
--- a/db/schema.rb
+++ b/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: 2022_02_18_120357) do
+ActiveRecord::Schema.define(version: 2022_04_05_092033) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -280,7 +280,7 @@ ActiveRecord::Schema.define(version: 2022_02_18_120357) do
     t.string "widget_color", default: "#1f93ff"
     t.string "welcome_title"
     t.string "welcome_tagline"
-    t.integer "feature_flags", default: 3, null: false
+    t.integer "feature_flags", default: 7, null: false
     t.integer "reply_time", default: 0
     t.string "hmac_token"
     t.boolean "pre_chat_form_enabled", default: false
diff --git a/spec/controllers/api/v1/widget/conversations_controller_spec.rb b/spec/controllers/api/v1/widget/conversations_controller_spec.rb
index f6e0ce00f..0d3edb0dd 100644
--- a/spec/controllers/api/v1/widget/conversations_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/conversations_controller_spec.rb
@@ -5,9 +5,13 @@ RSpec.describe '/api/v1/widget/conversations/toggle_typing', type: :request do
   let(:web_widget) { create(:channel_widget, account: account) }
   let(:contact) { create(:contact, account: account, email: nil) }
   let(:contact_inbox) { create(:contact_inbox, contact: contact, inbox: web_widget.inbox) }
+  let(:second_session) { create(:contact_inbox, contact: contact, inbox: web_widget.inbox) }
   let!(:conversation) { create(:conversation, contact: contact, account: account, inbox: web_widget.inbox, contact_inbox: contact_inbox) }
   let(:payload) { { source_id: contact_inbox.source_id, inbox_id: web_widget.inbox.id } }
   let(:token) { ::Widget::TokenService.new(payload: payload).generate_token }
+  let(:token_without_conversation) do
+    ::Widget::TokenService.new(payload: { source_id: second_session.source_id, inbox_id: web_widget.inbox.id }).generate_token
+  end
 
   describe 'GET /api/v1/widget/conversations' do
     context 'with a conversation' do
@@ -142,5 +146,35 @@ RSpec.describe '/api/v1/widget/conversations/toggle_typing', type: :request do
         )
       end
     end
+
+    context 'when end conversation is not permitted' do
+      before do
+        web_widget.end_conversation = false
+        web_widget.save!
+      end
+
+      it 'returns action not permitted status' do
+        expect(conversation.open?).to be true
+
+        get '/api/v1/widget/conversations/toggle_status',
+            headers: { 'X-Auth-Token' => token },
+            params: { website_token: web_widget.website_token },
+            as: :json
+
+        expect(response).to have_http_status(:forbidden)
+        expect(conversation.reload.resolved?).to be false
+      end
+    end
+
+    context 'when a token without any conversation is used' do
+      it 'returns not found status' do
+        get '/api/v1/widget/conversations/toggle_status',
+            headers: { 'X-Auth-Token' => token_without_conversation },
+            params: { website_token: web_widget.website_token },
+            as: :json
+
+        expect(response).to have_http_status(:not_found)
+      end
+    end
   end
 end