feat: use separate redis for sidekiq

chore: Update buttons in canned response page (#11121 )
chore: Update buttons in SLA page (#11118 )
2025-03-20 20:22:10 +05:30 · 2025-03-20 19:03:53 +05:30 · 2025-03-20 18:22:45 +05:30 · 2025-03-20 18:22:04 +05:30 · 2025-03-19 20:09:44 -07:00 · 2025-03-19 18:25:33 -07:00
30 changed files with 440 additions and 281 deletions
@@ -173,6 +173,7 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'

+gem 'iso-639'
 gem 'ruby-openai'

 gem 'shopify_api'
@@ -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
@@ -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>
@@ -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
@@ -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"
@@ -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,
@@ -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"
    />
@@ -166,188 +166,190 @@ onMounted(() => {
 </script>

 <template>
-  <woot-modal
-    v-model:show="show"
-    full-width
-    :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"
+  <Teleport to="body">
+    <woot-modal
+      v-model:show="show"
+      full-width
+      :show-close-button="false"
+      :on-close="onClose"
    >
-      <header
-        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-n-background border-b border-n-weak"
-        @click.stop
+      <div
+        class="bg-n-background flex flex-col h-[inherit] w-[inherit] overflow-hidden select-none"
+        @click="onClose"
      >
-        <div
-          v-if="senderDetails"
-          class="flex items-center min-w-[15rem] shrink-0"
+        <header
+          class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-n-background border-b border-n-weak"
+          @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"
-            :style="imageWrapperStyle"
-            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,
-            }"
+            v-if="senderDetails"
+            class="flex items-center min-w-[15rem] shrink-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"
+            <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>

-          <video
-            v-if="isVideo"
-            :key="activeAttachment.message_id"
-            :src="activeAttachment.data_url"
-            controls
-            playsInline
-            class="max-h-full max-w-full object-contain"
-            @click.stop
-          />
+          <div class="flex-1 flex items-center justify-center overflow-hidden">
+            <div
+              v-if="isImage"
+              :style="imageWrapperStyle"
+              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
+                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
-            v-if="isAudio"
-            :key="activeAttachment.message_id"
-            controls
-            class="w-full max-w-md"
-            @click.stop
-          >
-            <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
-          </audio>
-        </div>
+            <video
+              v-if="isVideo"
+              :key="activeAttachment.message_id"
+              :src="activeAttachment.data_url"
+              controls
+              playsInline
+              class="max-h-full max-w-full object-contain"
+              @click.stop
+            />

-        <div class="flex items-center justify-center w-16 shrink-0">
-          <NextButton
-            v-if="hasMoreThanOneAttachment"
-            icon="i-lucide-chevron-right"
-            class="z-10"
-            blue
-            faded
-            lg
-            :disabled="activeImageIndex === allAttachments.length - 1"
-            @click.stop="
-              onClickChangeAttachment(
-                allAttachments[activeImageIndex + 1],
-                activeImageIndex + 1
-              )
-            "
-          />
-        </div>
-      </main>
+            <audio
+              v-if="isAudio"
+              :key="activeAttachment.message_id"
+              controls
+              class="w-full max-w-md"
+              @click.stop
+            >
+              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
+            </audio>
+          </div>

-      <footer
-        class="z-10 flex items-center justify-center h-12 border-t border-n-weak"
-      >
-        <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"
+          <div class="flex items-center justify-center w-16 shrink-0">
+            <NextButton
+              v-if="hasMoreThanOneAttachment"
+              icon="i-lucide-chevron-right"
+              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>
-      </footer>
-    </div>
-  </woot-modal>
+          <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"
+          >
+            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
+          </div>
+        </footer>
+      </div>
+    </woot-modal>
+  </Teleport>
 </template>
@@ -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')"
-            :loading="addCanned.showLoading"
+            :is-loading="addCanned.showLoading"
          />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
        </div>
      </form>
    </div>
@@ -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')"
-            :loading="editCanned.showLoading"
+            :is-loading="editCanned.showLoading"
          />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
-          </button>
        </div>
      </form>
    </div>
@@ -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
-          class="button nice rounded-md"
-          icon="add-circle"
+        <Button
+          icon="i-lucide-circle-plus"
+          :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"
-                size="tiny"
-                color-scheme="secondary"
-                icon="edit"
+                icon="i-lucide-pen"
+                slate
+                xs
+                faded
                @click="openEditPopup(cannedItem)"
              />
-              <woot-button
+              <Button
                v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                variant="smooth"
-                color-scheme="alert"
-                size="tiny"
-                icon="dismiss-circle"
-                class-names="grey-btn"
+                icon="i-lucide-trash-2"
+                xs
+                ruby
+                faded
                :is-loading="loading[cannedItem.id]"
                @click="openDeletePopup(cannedItem, index)"
              />
@@ -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
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
            :disabled="isBehindAPaywall"
            @click="openAddModal"
-          >
-            {{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
        </template>
      </BaseSettingsHeader>
    </template>
@@ -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"
-          :loading="addCustomRole.showLoading"
+          :is-loading="addCustomRole.showLoading"
        />
-        <button class="button clear" @click.prevent="emit('close')">
-          {{ $t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT') }}
-        </button>
      </div>
    </form>
  </div>
@@ -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"
-          size="tiny"
-          color-scheme="secondary"
-          class-names="grey-btn"
-          icon="edit"
+          icon="i-lucide-pen"
+          slate
+          xs
+          faded
          @click="emit('edit', customRole)"
        />
-        <woot-button
+        <Button
          v-tooltip.top="$t('CUSTOM_ROLE.DELETE.BUTTON_TEXT')"
-          variant="smooth"
-          color-scheme="alert"
-          size="tiny"
-          icon="dismiss-circle"
-          class-names="grey-btn"
+          icon="i-lucide-trash-2"
+          xs
+          ruby
+          faded
          :is-loading="loading[customRole.id]"
          @click="emit('delete', customRole)"
        />
@@ -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
-          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('SLA.FORM.CANCEL')"
          @click.prevent="onClose"
-        >
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
-        <woot-button
-          :is-disabled="isSubmitDisabled"
-          class="px-4 rounded-xl"
+        />
+        <NextButton
+          type="submit"
+          :label="submitLabel"
+          :disabled="isSubmitDisabled"
          :is-loading="uiFlags.isUpdating"
-        >
-          {{ submitLabel }}
-        </woot-button>
+        />
      </div>
    </form>
  </div>
@@ -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
-        color-scheme="primary"
-        icon="plus-sign"
-        class="rounded-md"
+      <Button
+        :label="$t('SLA.ADD_ACTION')"
+        icon="i-lucide-circle-plus"
        @click="$emit('add')"
-      >
-        {{ $t('SLA.ADD_ACTION') }}
-      </woot-button>
+      />
    </template>
  </BaseSettingsHeader>
 </template>
@@ -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"
-        color-scheme="alert"
-        size="tiny"
-        icon="delete"
-        class-names="grey-btn"
+        faded
+        ruby
+        xs
+        icon="i-lucide-trash-2"
        :is-loading="isLoading"
        @click="emit('delete')"
      />
@@ -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
@@ -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
@@ -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
@@ -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?
@@ -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'] }
@@ -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

@@ -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' },
@@ -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' },
@@ -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.
@@ -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
@@ -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)

@@ -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
@@ -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
Author	SHA1	Message	Date
Vishnu Narayanan	4d2052e372	feat: use separate redis for sidekiq	2025-03-20 20:22:10 +05:30
Sivin VargheseandGitHub	b2debdc912	chore: Update buttons in canned response page (#11121 )	2025-03-20 19:03:53 +05:30
Sivin VargheseandGitHub	46297ce85e	chore: Update buttons in SLA page (#11118 )	2025-03-20 18:22:45 +05:30
Sivin VargheseandGitHub	f82dfee0a5	chore: Update buttons in custom role page (#11119 )	2025-03-20 18:22:04 +05:30
Shivam Mishra GitHub Pranav Pranav	57a571ea87	fix: Fix the issue with context menu for right click on images and videos (#11114 ) 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>	2025-03-19 20:09:44 -07:00
Shivam Mishra GitHub Muhsin Keloth Pranav	3a4249da11	feat: Add support for multi-language support for Captain (#11068 ) This PR implements the following features - FAQs from conversations will be generated in account language - Contact notes will be generated in account language - Copilot chat will respond in user language, unless the agent asks the question in a different language ## Changes ### Copilot Chat - Update the prompt to include an instruction for the language, the bot will reply in asked language, but will default to account language - Update the `ChatService` class to include pass the language to `SystemPromptsService` ### FAQ and Contact note generation - Update contact note generator and conversation generator to include account locale - Pass the account locale to `SystemPromptsService` <details><summary>Screenshots</summary> #### FAQs being generated in system langauge ![CleanShot 2025-03-12 at 13 32 30@2x](https://github.com/user-attachments/assets/84685bd8-3785-4432-aff3-419f60d96dd3) #### Copilot responding in system language ![CleanShot 2025-03-12 at 13 47 03@2x](https://github.com/user-attachments/assets/38383293-4228-47bd-b74a-773e9a194f90) </details> --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>	2025-03-19 18:25:33 -07:00