feat: use separate redis for sidekiq

This pull request includes changes to various components adding a
`skip-context-menu` class to ensure the system context menu opens
instead of the Chatwoot message one

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

Gemfile

@@ -173,6 +173,7 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'
 
+gem 'iso-639'
 gem 'ruby-openai'
 
 gem 'shopify_api'

Gemfile.lock

@@ -378,6 +378,8 @@ GEM
     io-console (0.6.0)
     irb (1.7.2)
       reline (>= 0.3.6)
+    iso-639 (0.3.8)
+      csv
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
@@ -913,6 +915,7 @@ DEPENDENCIES
   hashie
   html2text
   image_processing
+  iso-639
   jbuilder
   json_refs
   json_schemer

app/javascript/dashboard/components-next/message/bubbles/Audio.vue

@@ -13,6 +13,9 @@ const attachment = computed(() => {
 
 <template>
   <BaseBubble class="bg-transparent" data-bubble-name="audio">
-    <AudioChip :attachment="attachment" class="p-2 text-n-slate-12" />
+    <AudioChip
+      :attachment="attachment"
+      class="p-2 text-n-slate-12 skip-context-menu"
+    />
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/bubbles/Image.vue

@@ -56,6 +56,7 @@ const downloadAttachment = async () => {
     </div>
     <div v-else class="relative group rounded-lg overflow-hidden">
       <img
+        class="skip-context-menu"
         :src="attachment.dataUrl"
         :width="attachment.width"
         :height="attachment.height"
@@ -63,8 +64,9 @@ const downloadAttachment = async () => {
         @error="handleError"
       />
       <div
-        class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
+        class="inset-0 p-2 pointer-events-none absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex"
-      >
+      />
+      <div class="absolute right-2 bottom-2 hidden group-hover:flex gap-2">
         <Button xs solid slate icon="i-lucide-expand" class="opacity-60" />
         <Button
           xs

app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue

@@ -41,13 +41,13 @@ const onVideoLoadError = () => {
     <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
     <img
       v-if="!hasImgStoryError"
-      class="rounded-lg max-w-80"
+      class="rounded-lg max-w-80 skip-context-menu"
       :src="attachment.dataUrl"
       @error="onImageLoadError"
     />
     <video
       v-else-if="!hasVideoStoryError"
-      class="rounded-lg max-w-80"
+      class="rounded-lg max-w-80 skip-context-menu"
       controls
       :src="attachment.dataUrl"
       @error="onVideoLoadError"

app/javascript/dashboard/components-next/message/bubbles/Video.vue

@@ -35,13 +35,13 @@ const isReel = computed(() => {
     <div class="relative group rounded-lg overflow-hidden">
       <div
         v-if="isReel"
-        class="absolute p-2 flex items-start justify-end right-0"
+        class="absolute p-2 flex items-start justify-end right-0 pointer-events-none"
       >
         <Icon icon="i-lucide-instagram" class="text-white shadow-lg" />
       </div>
       <video
         controls
-        class="rounded-lg"
+        class="rounded-lg skip-context-menu"
         :src="attachment.dataUrl"
         :class="{
           'max-w-48': isReel,

app/javascript/dashboard/components-next/message/chips/Image.vue

@@ -36,7 +36,7 @@ const handleError = () => {
     </div>
     <img
       v-else
-      class="object-cover w-full h-full"
+      class="object-cover w-full h-full skip-context-menu"
       :src="attachment.dataUrl"
       @error="handleError"
     />

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -166,188 +166,190 @@ onMounted(() => {
 </script>
 
 <template>
-  <woot-modal
+  <Teleport to="body">
-    v-model:show="show"
+    <woot-modal
-    full-width
+      v-model:show="show"
-    :show-close-button="false"
+      full-width
-    :on-close="onClose"
+      :show-close-button="false"
-  >
+      :on-close="onClose"
-    <div
-      class="bg-n-background flex flex-col h-[inherit] w-[inherit] overflow-hidden select-none"
-      @click="onClose"
     >
-      <header
+      <div
-        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-n-background border-b border-n-weak"
+        class="bg-n-background flex flex-col h-[inherit] w-[inherit] overflow-hidden select-none"
-        @click.stop
+        @click="onClose"
       >
-        <div
+        <header
-          v-if="senderDetails"
+          class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-n-background border-b border-n-weak"
-          class="flex items-center min-w-[15rem] shrink-0"
+          @click.stop
         >
-          <Thumbnail
-            v-if="senderDetails.avatar"
-            :username="senderDetails.name"
-            :src="senderDetails.avatar"
-            class="flex-shrink-0"
-          />
-          <div class="flex flex-col ml-2 rtl:ml-0 rtl:mr-2 overflow-hidden">
-            <h3 class="text-base leading-5 m-0 font-medium">
-              <span
-                class="overflow-hidden text-n-slate-12 whitespace-nowrap text-ellipsis"
-              >
-                {{ senderDetails.name }}
-              </span>
-            </h3>
-            <span
-              class="text-xs text-n-slate-11 whitespace-nowrap text-ellipsis"
-            >
-              {{ readableTime }}
-            </span>
-          </div>
-        </div>
-
-        <div
-          class="flex-1 mx-2 px-2 truncate text-sm font-medium text-center text-n-slate-12"
-        >
-          <span v-dompurify-html="fileNameFromDataUrl" class="truncate" />
-        </div>
-
-        <div class="flex items-center gap-2 ml-2 shrink-0">
-          <NextButton
-            v-if="isImage"
-            icon="i-lucide-zoom-in"
-            slate
-            ghost
-            @click="onZoom(0.1)"
-          />
-          <NextButton
-            v-if="isImage"
-            icon="i-lucide-zoom-out"
-            slate
-            ghost
-            @click="onZoom(-0.1)"
-          />
-          <NextButton
-            v-if="isImage"
-            icon="i-lucide-rotate-ccw"
-            slate
-            ghost
-            @click="onRotate('counter-clockwise')"
-          />
-          <NextButton
-            v-if="isImage"
-            icon="i-lucide-rotate-cw"
-            slate
-            ghost
-            @click="onRotate('clockwise')"
-          />
-          <NextButton
-            icon="i-lucide-download"
-            slate
-            ghost
-            :is-loading="isDownloading"
-            :disabled="isDownloading"
-            @click="onClickDownload"
-          />
-          <NextButton icon="i-lucide-x" slate ghost @click="onClose" />
-        </div>
-      </header>
-
-      <main class="flex items-stretch flex-1 h-full overflow-hidden">
-        <div class="flex items-center justify-center w-16 shrink-0">
-          <NextButton
-            v-if="hasMoreThanOneAttachment"
-            icon="i-lucide-chevron-left"
-            class="z-10"
-            blue
-            faded
-            lg
-            :disabled="activeImageIndex === 0"
-            @click.stop="
-              onClickChangeAttachment(
-                allAttachments[activeImageIndex - 1],
-                activeImageIndex - 1
-              )
-            "
-          />
-        </div>
-
-        <div class="flex-1 flex items-center justify-center overflow-hidden">
           <div
-            v-if="isImage"
+            v-if="senderDetails"
-            :style="imageWrapperStyle"
+            class="flex items-center min-w-[15rem] shrink-0"
-            class="flex items-center justify-center origin-center"
-            :class="{
-              // Adjust dimensions when rotated 90/270 degrees to maintain visibility
-              // and prevent image from overflowing container in different aspect ratios
-              'w-[calc(100dvh-8rem)] h-[calc(100dvw-7rem)]':
-                activeImageRotation % 180 !== 0,
-              'size-full': activeImageRotation % 180 === 0,
-            }"
           >
-            <img
+            <Thumbnail
-              ref="imageRef"
+              v-if="senderDetails.avatar"
-              :key="activeAttachment.message_id"
+              :username="senderDetails.name"
-              :src="activeAttachment.data_url"
+              :src="senderDetails.avatar"
-              :style="imageStyle"
+              class="flex-shrink-0"
-              class="max-h-full max-w-full object-contain duration-100 ease-in-out transform select-none"
+            />
-              @click.stop
+            <div class="flex flex-col ml-2 rtl:ml-0 rtl:mr-2 overflow-hidden">
-              @dblclick.stop="onDoubleClickZoomImage"
+              <h3 class="text-base leading-5 m-0 font-medium">
-              @wheel.prevent.stop="onWheelImageZoom"
+                <span
-              @mousemove="onMouseMove"
+                  class="overflow-hidden text-n-slate-12 whitespace-nowrap text-ellipsis"
-              @mouseleave="onMouseLeave"
+                >
+                  {{ senderDetails.name }}
+                </span>
+              </h3>
+              <span
+                class="text-xs text-n-slate-11 whitespace-nowrap text-ellipsis"
+              >
+                {{ readableTime }}
+              </span>
+            </div>
+          </div>
+
+          <div
+            class="flex-1 mx-2 px-2 truncate text-sm font-medium text-center text-n-slate-12"
+          >
+            <span v-dompurify-html="fileNameFromDataUrl" class="truncate" />
+          </div>
+
+          <div class="flex items-center gap-2 ml-2 shrink-0">
+            <NextButton
+              v-if="isImage"
+              icon="i-lucide-zoom-in"
+              slate
+              ghost
+              @click="onZoom(0.1)"
+            />
+            <NextButton
+              v-if="isImage"
+              icon="i-lucide-zoom-out"
+              slate
+              ghost
+              @click="onZoom(-0.1)"
+            />
+            <NextButton
+              v-if="isImage"
+              icon="i-lucide-rotate-ccw"
+              slate
+              ghost
+              @click="onRotate('counter-clockwise')"
+            />
+            <NextButton
+              v-if="isImage"
+              icon="i-lucide-rotate-cw"
+              slate
+              ghost
+              @click="onRotate('clockwise')"
+            />
+            <NextButton
+              icon="i-lucide-download"
+              slate
+              ghost
+              :is-loading="isDownloading"
+              :disabled="isDownloading"
+              @click="onClickDownload"
+            />
+            <NextButton icon="i-lucide-x" slate ghost @click="onClose" />
+          </div>
+        </header>
+
+        <main class="flex items-stretch flex-1 h-full overflow-hidden">
+          <div class="flex items-center justify-center w-16 shrink-0">
+            <NextButton
+              v-if="hasMoreThanOneAttachment"
+              icon="i-lucide-chevron-left"
+              class="z-10"
+              blue
+              faded
+              lg
+              :disabled="activeImageIndex === 0"
+              @click.stop="
+                onClickChangeAttachment(
+                  allAttachments[activeImageIndex - 1],
+                  activeImageIndex - 1
+                )
+              "
             />
           </div>
 
-          <video
+          <div class="flex-1 flex items-center justify-center overflow-hidden">
-            v-if="isVideo"
+            <div
-            :key="activeAttachment.message_id"
+              v-if="isImage"
-            :src="activeAttachment.data_url"
+              :style="imageWrapperStyle"
-            controls
+              class="flex items-center justify-center origin-center"
-            playsInline
+              :class="{
-            class="max-h-full max-w-full object-contain"
+                // Adjust dimensions when rotated 90/270 degrees to maintain visibility
-            @click.stop
+                // and prevent image from overflowing container in different aspect ratios
-          />
+                'w-[calc(100dvh-8rem)] h-[calc(100dvw-7rem)]':
+                  activeImageRotation % 180 !== 0,
+                'size-full': activeImageRotation % 180 === 0,
+              }"
+            >
+              <img
+                ref="imageRef"
+                :key="activeAttachment.message_id"
+                :src="activeAttachment.data_url"
+                :style="imageStyle"
+                class="max-h-full max-w-full object-contain duration-100 ease-in-out transform select-none"
+                @click.stop
+                @dblclick.stop="onDoubleClickZoomImage"
+                @wheel.prevent.stop="onWheelImageZoom"
+                @mousemove="onMouseMove"
+                @mouseleave="onMouseLeave"
+              />
+            </div>
 
-          <audio
+            <video
-            v-if="isAudio"
+              v-if="isVideo"
-            :key="activeAttachment.message_id"
+              :key="activeAttachment.message_id"
-            controls
+              :src="activeAttachment.data_url"
-            class="w-full max-w-md"
+              controls
-            @click.stop
+              playsInline
-          >
+              class="max-h-full max-w-full object-contain"
-            <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
+              @click.stop
-          </audio>
+            />
-        </div>
 
-        <div class="flex items-center justify-center w-16 shrink-0">
+            <audio
-          <NextButton
+              v-if="isAudio"
-            v-if="hasMoreThanOneAttachment"
+              :key="activeAttachment.message_id"
-            icon="i-lucide-chevron-right"
+              controls
-            class="z-10"
+              class="w-full max-w-md"
-            blue
+              @click.stop
-            faded
+            >
-            lg
+              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
-            :disabled="activeImageIndex === allAttachments.length - 1"
+            </audio>
-            @click.stop="
+          </div>
-              onClickChangeAttachment(
-                allAttachments[activeImageIndex + 1],
-                activeImageIndex + 1
-              )
-            "
-          />
-        </div>
-      </main>
 
-      <footer
+          <div class="flex items-center justify-center w-16 shrink-0">
-        class="z-10 flex items-center justify-center h-12 border-t border-n-weak"
+            <NextButton
-      >
+              v-if="hasMoreThanOneAttachment"
-        <div
+              icon="i-lucide-chevron-right"
-          class="rounded-md flex items-center justify-center px-3 py-1 bg-n-slate-3 text-n-slate-12 text-sm font-medium"
+              class="z-10"
+              blue
+              faded
+              lg
+              :disabled="activeImageIndex === allAttachments.length - 1"
+              @click.stop="
+                onClickChangeAttachment(
+                  allAttachments[activeImageIndex + 1],
+                  activeImageIndex + 1
+                )
+              "
+            />
+          </div>
+        </main>
+
+        <footer
+          class="z-10 flex items-center justify-center h-12 border-t border-n-weak"
         >
-          {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
+          <div
-        </div>
+            class="rounded-md flex items-center justify-center px-3 py-1 bg-n-slate-3 text-n-slate-12 text-sm font-medium"
-      </footer>
+          >
-    </div>
+            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
-  </woot-modal>
+          </div>
+        </footer>
+      </div>
+    </woot-modal>
+  </Teleport>
 </template>

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -3,14 +3,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Modal from '../../../../components/Modal.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 export default {
   name: 'AddCanned',
   components: {
-    WootSubmitButton,
+    NextButton,
     Modal,
     WootMessageEditor,
   },
@@ -118,18 +118,23 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <WootSubmitButton
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT')"
+            @click.prevent="onClose"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
               addCanned.showLoading
             "
-            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
+            :is-loading="addCanned.showLoading"
-            :loading="addCanned.showLoading"
           />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
         </div>
       </form>
     </div>

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -4,12 +4,12 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Modal from '../../../../components/Modal.vue';
 
 export default {
   components: {
-    WootSubmitButton,
+    NextButton,
     Modal,
     WootMessageEditor,
   },
@@ -122,18 +122,23 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <WootSubmitButton
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT')"
+            @click.prevent="onClose"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
               editCanned.showLoading
             "
-            :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
+            :is-loading="editCanned.showLoading"
-            :loading="editCanned.showLoading"
           />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-          </button>
         </div>
       </form>
     </div>

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -7,6 +7,8 @@ import { computed, onMounted, ref, defineOptions } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineOptions({
   name: 'CannedResponseSettings',
 });
@@ -124,13 +126,11 @@ const tableHeaders = computed(() => {
       feature-name="canned_responses"
     >
       <template #actions>
-        <woot-button
+        <Button
-          class="button nice rounded-md"
+          icon="i-lucide-circle-plus"
-          icon="add-circle"
+          :label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
           @click="openAddPopup"
-        >
+        />
-          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-        </woot-button>
       </template>
     </BaseSettingsHeader>
 
@@ -188,21 +188,20 @@ const tableHeaders = computed(() => {
               {{ cannedItem.content }}
             </td>
             <td class="py-4 flex justify-end gap-1">
-              <woot-button
+              <Button
                 v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                variant="smooth"
+                icon="i-lucide-pen"
-                size="tiny"
+                slate
-                color-scheme="secondary"
+                xs
-                icon="edit"
+                faded
                 @click="openEditPopup(cannedItem)"
               />
-              <woot-button
+              <Button
                 v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                variant="smooth"
+                icon="i-lucide-trash-2"
-                color-scheme="alert"
+                xs
-                size="tiny"
+                ruby
-                icon="dismiss-circle"
+                faded
-                class-names="grey-btn"
                 :is-loading="loading[cannedItem.id]"
                 @click="openDeletePopup(cannedItem, index)"
               />

app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue

@@ -5,6 +5,7 @@ import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import CustomRoleModal from './component/CustomRoleModal.vue';
 import CustomRoleTableBody from './component/CustomRoleTableBody.vue';
 import CustomRolePaywall from './component/CustomRolePaywall.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -134,14 +135,12 @@ const confirmDeletion = () => {
         feature-name="canned_responses"
       >
         <template #actions>
-          <woot-button
+          <Button
-            class="rounded-md button nice"
+            icon="i-lucide-circle-plus"
-            icon="add-circle"
+            :label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
             :disabled="isBehindAPaywall"
             @click="openAddModal"
-          >
+          />
-            {{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
-          </woot-button>
         </template>
       </BaseSettingsHeader>
     </template>

app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue

@@ -12,7 +12,7 @@ import {
   CONVERSATION_PARTICIPATING_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   mode: {
@@ -160,13 +160,12 @@ const isSubmitDisabled = computed(
     />
     <form class="flex flex-col w-full" @submit.prevent="handleCustomRole">
       <div class="w-full">
-        <label>
+        <label :class="{ error: v$.name.$error }">
           {{ $t('CUSTOM_ROLE.FORM.NAME.LABEL') }}
           <input
             ref="nameInput"
             v-model.trim="name"
             type="text"
-            :class="{ error: v$.name.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.NAME.PLACEHOLDER')"
             @blur="v$.name.$touch"
           />
@@ -174,13 +173,12 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="w-full">
-        <label>
+        <label :class="{ error: v$.description.$error }">
           {{ $t('CUSTOM_ROLE.FORM.DESCRIPTION.LABEL') }}
 
           <textarea
             v-model="description"
             :rows="3"
-            :class="{ error: v$.description.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.DESCRIPTION.PLACEHOLDER')"
             @blur="v$.description.$touch"
           />
@@ -213,14 +211,19 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <WootSubmitButton
+        <Button
+          faded
+          slate
+          type="reset"
+          :label="$t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT')"
+          @click.prevent="emit('close')"
+        />
+        <Button
+          type="submit"
+          :label="submitButtonText"
           :disabled="isSubmitDisabled"
-          :button-text="submitButtonText"
+          :is-loading="addCustomRole.showLoading"
-          :loading="addCustomRole.showLoading"
         />
-        <button class="button clear" @click.prevent="emit('close')">
-          {{ $t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT') }}
-        </button>
       </div>
     </form>
   </div>

app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue

@@ -2,6 +2,8 @@
 import { useI18n } from 'vue-i18n';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
   roles: {
     type: Array,
@@ -44,22 +46,20 @@ const getFormattedPermissions = role => {
         {{ getFormattedPermissions(customRole) }}
       </td>
       <td class="flex justify-end gap-1 py-4">
-        <woot-button
+        <Button
           v-tooltip.top="$t('CUSTOM_ROLE.EDIT.BUTTON_TEXT')"
-          variant="smooth"
+          icon="i-lucide-pen"
-          size="tiny"
+          slate
-          color-scheme="secondary"
+          xs
-          class-names="grey-btn"
+          faded
-          icon="edit"
           @click="emit('edit', customRole)"
         />
-        <woot-button
+        <Button
           v-tooltip.top="$t('CUSTOM_ROLE.DELETE.BUTTON_TEXT')"
-          variant="smooth"
+          icon="i-lucide-trash-2"
-          color-scheme="alert"
+          xs
-          size="tiny"
+          ruby
-          icon="dismiss-circle"
+          faded
-          class-names="grey-btn"
           :is-loading="loading[customRole.id]"
           @click="emit('delete', customRole)"
         />

app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue

@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     SlaTimeInput,
+    NextButton,
   },
   props: {
     selectedResponse: {
@@ -205,19 +207,19 @@ export default {
       </div>
 
       <div class="flex items-center justify-end w-full gap-2 mt-8">
-        <woot-button
+        <NextButton
-          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+          faded
+          slate
+          type="reset"
+          :label="$t('SLA.FORM.CANCEL')"
           @click.prevent="onClose"
-        >
+        />
-          {{ $t('SLA.FORM.CANCEL') }}
+        <NextButton
-        </woot-button>
+          type="submit"
-        <woot-button
+          :label="submitLabel"
-          :is-disabled="isSubmitDisabled"
+          :disabled="isSubmitDisabled"
-          class="px-4 rounded-xl"
           :is-loading="uiFlags.isUpdating"
-        >
+        />
-          {{ submitLabel }}
-        </woot-button>
       </div>
     </form>
   </div>

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
 
 defineProps({
@@ -19,14 +20,11 @@ defineEmits(['add']);
     feature-name="sla"
   >
     <template v-if="showActions" #actions>
-      <woot-button
+      <Button
-        color-scheme="primary"
+        :label="$t('SLA.ADD_ACTION')"
-        icon="plus-sign"
+        icon="i-lucide-circle-plus"
-        class="rounded-md"
         @click="$emit('add')"
-      >
+      />
-        {{ $t('SLA.ADD_ACTION') }}
-      </woot-button>
     </template>
   </BaseSettingsHeader>
 </template>

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue

@@ -2,6 +2,7 @@
 import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 import SLAResponseTime from './SLAResponseTime.vue';
 import SLABusinessHoursLabel from './SLABusinessHoursLabel.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   slaName: {
@@ -56,13 +57,12 @@ const emit = defineEmits(['delete']);
       </div>
     </template>
     <template #actions>
-      <woot-button
+      <Button
         v-tooltip.top="$t('SLA.FORM.DELETE')"
-        variant="smooth"
+        faded
-        color-scheme="alert"
+        ruby
-        size="tiny"
+        xs
-        icon="delete"
+        icon="i-lucide-trash-2"
-        class-names="grey-btn"
         :is-loading="isLoading"
         @click="emit('delete')"
       />

app/models/account.rb

@@ -128,6 +128,14 @@ class Account < ApplicationRecord
     }
   end
 
+  def locale_english_name
+    # the locale can also be something like pt_BR, en_US, fr_FR, etc.
+    # the format is `<locale_code>_<country_code>`
+    # we need to extract the language code from the locale
+    account_locale = locale&.split('_')&.first
+    ISO_639.find(account_locale)&.english_name&.downcase || 'english'
+  end
+
   private
 
   def notify_creation

app/models/concerns/assignment_handler.rb

@@ -48,4 +48,8 @@ module AssignmentHandler
       create_assignee_change_activity(user_name)
     end
   end
+
+  def self_assign?(assignee_id)
+    assignee_id.present? && Current.user&.id == assignee_id
+  end
 end

app/models/conversation.rb

@@ -125,6 +125,10 @@ class Conversation < ApplicationRecord
     last_message_in_messaging_window?(messaging_window)
   end
 
+  def language
+    additional_attributes&.dig('conversation_language')
+  end
+
   def last_activity_at
     self[:last_activity_at] || created_at
   end
@@ -257,10 +261,6 @@ class Conversation < ApplicationRecord
     )
   end
 
-  def self_assign?(assignee_id)
-    assignee_id.present? && Current.user&.id == assignee_id
-  end
-
   def load_attributes_created_by_db_triggers
     # Display id is set via a trigger in the database
     # So we need to specifically fetch it after the record is created

config/initializers/sidekiq.rb

@@ -3,11 +3,11 @@ require Rails.root.join('lib/redis/config')
 schedule_file = 'config/schedule.yml'
 
 Sidekiq.configure_client do |config|
-  config.redis = Redis::Config.app
+  config.redis = Redis::Config.sidekiq
 end
 
 Sidekiq.configure_server do |config|
-  config.redis = Redis::Config.app
+  config.redis = Redis::Config.sidekiq
 
   # skip the default start stop logging
   if Rails.env.production?

enterprise/app/controllers/enterprise/api/v1/accounts/conversations_controller.rb

@@ -20,7 +20,8 @@ module Enterprise::Api::V1::Accounts::ConversationsController
     response = Captain::Copilot::ChatService.new(
       assistant,
       previous_messages: copilot_params[:previous_messages],
-      conversation_history: @conversation.to_llm_text
+      conversation_history: @conversation.to_llm_text,
+      language: @conversation.account.locale_english_name
     ).generate_response(copilot_params[:message])
 
     render json: { message: response['response'] }

enterprise/app/services/captain/copilot/chat_service.rb

@@ -9,6 +9,7 @@ class Captain::Copilot::ChatService < Llm::BaseOpenAiService
     @assistant = assistant
     @conversation_history = config[:conversation_history]
     @previous_messages = config[:previous_messages] || []
+    @language = config[:language] || 'english'
     @messages = [system_message, conversation_history_context] + @previous_messages
     @response = ''
   end
@@ -27,7 +28,7 @@ class Captain::Copilot::ChatService < Llm::BaseOpenAiService
   def system_message
     {
       role: 'system',
-      content: Captain::Llm::SystemPromptsService.copilot_response_generator(@assistant.config['product_name'])
+      content: Captain::Llm::SystemPromptsService.copilot_response_generator(@assistant.config['product_name'], @language)
     }
   end
 

enterprise/app/services/captain/llm/contact_notes_service.rb

@@ -26,7 +26,9 @@ class Captain::Llm::ContactNotesService < Llm::BaseOpenAiService
   end
 
   def chat_parameters
-    prompt = Captain::Llm::SystemPromptsService.notes_generator
+    account_language = @conversation.account.locale_english_name
+    prompt = Captain::Llm::SystemPromptsService.notes_generator(account_language)
+
     {
       model: @model,
       response_format: { type: 'json_object' },

enterprise/app/services/captain/llm/conversation_faq_service.rb

@@ -89,7 +89,9 @@ class Captain::Llm::ConversationFaqService < Llm::BaseOpenAiService
   end
 
   def chat_parameters
-    prompt = Captain::Llm::SystemPromptsService.conversation_faq_generator
+    account_language = @conversation.account.locale_english_name
+    prompt = Captain::Llm::SystemPromptsService.conversation_faq_generator(account_language)
+
     {
       model: @model,
       response_format: { type: 'json_object' },

enterprise/app/services/captain/llm/system_prompts_service.rb

@@ -56,7 +56,7 @@ class Captain::Llm::SystemPromptsService
       SYSTEM_PROMPT_MESSAGE
     end
 
-    def copilot_response_generator(product_name)
+    def copilot_response_generator(product_name, language)
       <<~SYSTEM_PROMPT_MESSAGE
         [Identity]
         You are Captain, a helpful and friendly copilot assistant for support agents using the product #{product_name}. Your primary role is to assist support agents by retrieving information, compiling accurate responses, and guiding them through customer interactions.
@@ -67,6 +67,7 @@ class Captain::Llm::SystemPromptsService
 
         [Response Guidelines]
         - Use natural, polite, and conversational language that is clear and easy to follow. Keep sentences short and use simple words.
+        - Reply in the language the agent is using, if you're not able to detect the language, reply in #{language}.
         - Provide brief and relevant responses—typically one or two sentences unless a more detailed explanation is necessary.
         - Do not use your own training data or assumptions to answer queries. Base responses strictly on the provided information.
         - If the query is unclear, ask concise clarifying questions instead of making assumptions.

lib/redis/config.rb

@@ -5,10 +5,18 @@ module Redis::Config
       config
     end
 
+    def sidekiq
+      sidekiq_config
+    end
+
     def config
       @config ||= sentinel? ? sentinel_config : base_config
     end
 
+    def sidekiq_config
+      @sidekiq_config ||= sentinel? ? sentinel_config : base_sidekiq_config
+    end
+
     def base_config
       {
         url: ENV.fetch('REDIS_URL', 'redis://127.0.0.1:6379'),
@@ -19,6 +27,16 @@ module Redis::Config
       }
     end
 
+    def base_sidekiq_config
+      {
+        url: ENV.fetch('SIDEKIQ_REDIS_URL', ENV.fetch('REDIS_URL', 'redis://127.0.0.1:6379')),
+        password: ENV.fetch('SIDEKIQ_REDIS_PASSWORD', ENV.fetch('REDIS_PASSWORD', nil)).presence,
+        ssl_params: { verify_mode: Chatwoot.redis_ssl_verify_mode },
+        reconnect_attempts: 2,
+        timeout: 1
+      }
+    end
+
     def sentinel?
       ENV.fetch('REDIS_SENTINELS', nil).presence
     end

spec/enterprise/services/captain/copilot/chat_service_spec.rb

@@ -2,17 +2,71 @@ require 'rails_helper'
 
 RSpec.describe Captain::Copilot::ChatService do
   let(:account) { create(:account, custom_attributes: { plan_name: 'startups' }) }
-  let(:inbox) { create(:inbox, account: account) }
-  let(:assistant) { create(:captain_assistant, account: account) }
   let(:captain_inbox_association) { create(:captain_inbox, captain_assistant: assistant, inbox: inbox) }
-
   let(:mock_captain_agent) { instance_double(Captain::Agent) }
   let(:mock_captain_tool) { instance_double(Captain::Tool) }
   let(:mock_openai_client) { instance_double(OpenAI::Client) }
+  let(:inbox) { create(:inbox, account: account) }
+  let(:assistant) { create(:captain_assistant, account: account) }
+
+  before do
+    create(:installation_config, name: 'CAPTAIN_OPEN_AI_API_KEY', value: 'test-key')
+  end
+
+  describe '#initialize' do
+    it 'sets default language to english when not specified' do
+      service = described_class.new(assistant, { previous_messages: [], conversation_history: '' })
+      expect(service.instance_variable_get(:@language)).to eq('english')
+    end
+
+    it 'uses the specified language when provided' do
+      service = described_class.new(assistant, {
+                                      previous_messages: [],
+                                      conversation_history: '',
+                                      language: 'spanish'
+                                    })
+      expect(service.instance_variable_get(:@language)).to eq('spanish')
+    end
+  end
+
+  describe '#generate_response' do
+    before do
+      allow(OpenAI::Client).to receive(:new).and_return(mock_openai_client)
+      allow(mock_openai_client).to receive(:chat).and_return({ choices: [{ message: { content: '{ "result": "Hey" }' } }] }.with_indifferent_access)
+
+      allow(Captain::Agent).to receive(:new).and_return(mock_captain_agent)
+      allow(mock_captain_agent).to receive(:execute).and_return(true)
+      allow(mock_captain_agent).to receive(:register_tool).and_return(true)
+
+      allow(Captain::Tool).to receive(:new).and_return(mock_captain_tool)
+      allow(mock_captain_tool).to receive(:register_method).and_return(true)
+
+      allow(account).to receive(:increment_response_usage).and_return(true)
+    end
+
+    it 'increments usage' do
+      described_class.new(assistant, { previous_messages: ['Hello'], conversation_history: 'Hi' }).generate_response('Hey')
+      expect(account).to have_received(:increment_response_usage).once
+    end
+
+    it 'includes language in system message' do
+      service = described_class.new(assistant, {
+                                      previous_messages: [],
+                                      conversation_history: '',
+                                      language: 'spanish'
+                                    })
+
+      allow(Captain::Llm::SystemPromptsService).to receive(:copilot_response_generator)
+        .with(assistant.config['product_name'], 'spanish')
+        .and_return('Spanish system prompt')
+
+      system_message = service.send(:system_message)
+      expect(system_message[:content]).to eq('Spanish system prompt')
+    end
+  end
 
   describe '#execute' do
     before do
-      create(:installation_config) { create(:installation_config, name: 'CAPTAIN_OPEN_AI_API_KEY', value: 'test-key') }
       allow(OpenAI::Client).to receive(:new).and_return(mock_openai_client)
       allow(mock_openai_client).to receive(:chat).and_return({ choices: [{ message: { content: '{ "result": "Hey" }' } }] }.with_indifferent_access)
 

spec/enterprise/services/captain/llm/conversation_faq_service_spec.rb

@@ -145,5 +145,25 @@ RSpec.describe Captain::Llm::ConversationFaqService do
         { role: 'user', content: conversation.to_llm_text }
       )
     end
+
+    context 'when conversation has different language' do
+      let(:account) { create(:account, locale: 'fr') }
+      let(:conversation) do
+        create(:conversation, account: account,
+                              first_reply_created_at: Time.zone.now)
+      end
+
+      it 'includes system prompt with correct language' do
+        allow(Captain::Llm::SystemPromptsService).to receive(:conversation_faq_generator)
+          .with('french')
+          .and_return('system prompt in french')
+
+        params = service.send(:chat_parameters)
+
+        expect(params[:messages]).to include(
+          { role: 'system', content: 'system prompt in french' }
+        )
+      end
+    end
   end
 end

spec/models/account_spec.rb

@@ -108,4 +108,30 @@ RSpec.describe Account do
       expect(ActiveRecord::Base.connection.execute(query).count).to eq(0)
     end
   end
+
+  describe 'locale' do
+    it 'returns correct language if the value is set' do
+      account = create(:account, locale: 'fr')
+      expect(account.locale).to eq('fr')
+      expect(account.locale_english_name).to eq('french')
+    end
+
+    it 'returns english if the value is not set' do
+      account = create(:account, locale: nil)
+      expect(account.locale).to be_nil
+      expect(account.locale_english_name).to eq('english')
+    end
+
+    it 'returns english if the value is empty string' do
+      account = create(:account, locale: '')
+      expect(account.locale).to be_nil
+      expect(account.locale_english_name).to eq('english')
+    end
+
+    it 'returns correct language if the value has country code' do
+      account = create(:account, locale: 'pt_BR')
+      expect(account.locale).to eq('pt_BR')
+      expect(account.locale_english_name).to eq('portuguese')
+    end
+  end
 end