From bfed849d6ac73fd78cfec6fc7891128587f38273 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Sun, 4 May 2025 18:06:24 -0700
Subject: [PATCH] fix: Fix missing translations in copilot (#11411)

This PR does the following:

- Missing translations to the i18n file.
- Test the change with Malayalam (ml) translation.
- Fixes overflow by setting the width to 100%

_Note_: The prompt text is also set for translation. This is
intentional, there is no change in the behaviour.

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../components-next/copilot/Copilot.vue       | 21 +++++++++++--------
 .../i18n/locale/en/integrations.json          | 16 +++++++++++++-
 .../i18n/locale/ml/integrations.json          | 16 +++++++++++++-
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.vue b/app/javascript/dashboard/components-next/copilot/Copilot.vue
index e284bb983..5feb474a6 100644
--- a/app/javascript/dashboard/components-next/copilot/Copilot.vue
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { nextTick, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
@@ -39,6 +40,8 @@ const props = defineProps({
 
 const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
 
+const { t } = useI18n();
+
 const COPILOT_USER_ROLES = ['assistant', 'system'];
 
 const sendMessage = message => {
@@ -47,7 +50,7 @@ const sendMessage = message => {
 };
 
 const useSuggestion = opt => {
-  emit('sendMessage', opt.prompt);
+  emit('sendMessage', t(opt.prompt));
   useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
 };
 
@@ -66,16 +69,16 @@ const scrollToBottom = async () => {
 
 const promptOptions = [
   {
-    label: 'Summarize this conversation',
-    prompt: `Summarize the key points discussed between the customer and the support agent, including the customer's concerns, questions, and the solutions or responses provided by the support agent`,
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
   },
   {
-    label: 'Suggest an answer',
-    prompt: `Analyze the customer’s inquiry, and draft a response that effectively addresses their concerns or questions. Ensure the reply is clear, concise, and provides helpful information.`,
+    label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
   },
   {
-    label: 'Rate this conversation',
-    prompt: `Review the conversation to see how well it meets the customer’s needs. Share a rating out of 5 based on tone, clarity, and effectiveness.`,
+    label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
+    prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
   },
 ];
 
@@ -89,7 +92,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col h-full text-sm leading-6 tracking-tight">
+  <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
     <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
@@ -121,7 +124,7 @@ watch(
           class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
           @click="() => useSuggestion(prompt)"
         >
-          <span>{{ prompt.label }}</span>
+          <span>{{ t(prompt.label) }}</span>
           <Icon icon="i-lucide-chevron-right" />
         </button>
       </div>
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index ed56b1669..14e1506b4 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -331,7 +331,21 @@
       "YOU": "You",
       "USE": "Use this",
       "RESET": "Reset",
-      "SELECT_ASSISTANT": "Select Assistant"
+      "SELECT_ASSISTANT": "Select Assistant",
+      "PROMPTS": {
+        "SUMMARIZE": {
+          "LABEL": "Summarize this conversation",
+          "CONTENT": "Summarize the key points discussed between the customer and the support agent, including the customer's concerns, questions, and the solutions or responses provided by the support agent"
+        },
+        "SUGGEST": {
+          "LABEL": "Suggest an answer",
+          "CONTENT": "Analyze the customer's inquiry, and draft a response that effectively addresses their concerns or questions. Ensure the reply is clear, concise, and provides helpful information."
+        },
+        "RATE": {
+          "LABEL": "Rate this conversation",
+          "CONTENT": "Review the conversation to see how well it meets the customer's needs. Share a rating out of 5 based on tone, clarity, and effectiveness."
+        }
+      }
     },
     "PLAYGROUND": {
       "USER": "You",
diff --git a/app/javascript/dashboard/i18n/locale/ml/integrations.json b/app/javascript/dashboard/i18n/locale/ml/integrations.json
index b08a033b2..38f7a6f43 100644
--- a/app/javascript/dashboard/i18n/locale/ml/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/ml/integrations.json
@@ -334,7 +334,21 @@
       "YOU": "You",
       "USE": "Use this",
       "RESET": "Reset",
-      "SELECT_ASSISTANT": "Select Assistant"
+      "SELECT_ASSISTANT": "Select Assistant",
+      "PROMPTS": {
+        "SUMMARIZE": {
+          "LABEL": "ഈ സംവാദം സംക്ഷേപിക്കുക",
+          "CONTENT": "ഉപഭോക്താവും സഹായ ഏജന്റും തമ്മിലുള്ള സംവാദത്തിലെ പ്രധാന വിഷയങ്ങൾ സംക്ഷേപിക്കുക. ഉപഭോക്താവിന്റെ ആശങ്കകൾ, ചോദ്യങ്ങൾ, ഏജന്റിന്റെ മറുപടികൾ എന്നിവ ഉൾപ്പെടണം."
+        },
+        "SUGGEST": {
+          "LABEL": "ഒരു മറുപടി നിർദ്ദേശിക്കുക",
+          "CONTENT": "ഉപഭോക്താവിന്റെ ചോദ്യങ്ങൾ വിശകലനം ചെയ്ത്, അവരുടെ ആശങ്കകൾക്കും ചോദ്യങ്ങൾക്കും യോജിച്ചുള്ള ഒരു വ്യക്തവും ഉപകാരപ്രദവുമായ മറുപടി രൂപപ്പെടുത്തുക."
+        },
+        "RATE": {
+          "LABEL": "ഈ സംവാദം റേറ്റുചെയ്യുക",
+          "CONTENT": "ഉപഭോക്താവിന്റെ ആവശ്യങ്ങൾ എത്രമാത്രം നല്ല രീതിയിൽ നിറവേറ്റിയെന്ന് വിലയിരുത്തുക. സംഭാഷണത്തിന്റെ സ്വരം, വ്യക്തത, കാര്യക്ഷമത എന്നിവയുടെ അടിസ്ഥാനത്തിൽ 5ൽ എത്രയാണെന്ന് റേറ്റുചെയ്യുക."
+        }
+      }
     },
     "PLAYGROUND": {
       "USER": "You",