feat: Update translated content inline (#11074)

Previously, viewing translations required opening a modal, which was a
frustrating experience. This update improves the UX by displaying
translations inline.

https://www.loom.com/share/c69f4316248946208f2e56e2429063a2

A sample message with translated content (which has an option to see the
original):
 
<img width="313" alt="Screenshot 2025-03-12 at 6 57 49 PM"
src="https://github.com/user-attachments/assets/52434086-b57f-40e8-87b8-314c3519df4b"
/>

Right now, the translation is done based on the account locale. Some of
the future considerations.

- Add personal preference for the language (For eg: an agent can use the
software in spanish even though the company default is english), then
support translations based on personal preference.
- Add support for LLM translations (OpenAI integration)
- Add translations if Captain is enabled
- Add auto translation if the feature is turned on.

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -11,14 +11,12 @@ import {
   ACCOUNT_EVENTS,
   CONVERSATION_EVENTS,
 } from '../../../helper/AnalyticsHelper/events';
-import TranslateModal from 'dashboard/components/widgets/conversation/bubble/TranslateModal.vue';
 import MenuItem from '../../../components/widgets/conversation/contextMenu/menuItem.vue';
 import { useTrack } from 'dashboard/composables';
 
 export default {
   components: {
     AddCannedModal,
-    TranslateModal,
     MenuItem,
     ContextMenu,
   },
@@ -54,7 +52,6 @@ export default {
   data() {
     return {
       isCannedResponseModalOpen: false,
-      showTranslateModal: false,
       showDeleteModal: false,
     };
   },
@@ -125,15 +122,11 @@ export default {
       });
       useTrack(CONVERSATION_EVENTS.TRANSLATE_A_MESSAGE);
       this.handleClose();
-      this.showTranslateModal = true;
     },
     handleReplyTo() {
       this.$emit('replyTo', this.message);
       this.handleClose();
     },
-    onCloseTranslateModal() {
-      this.showTranslateModal = false;
-    },
     openDeleteModal() {
       this.handleClose();
       this.showDeleteModal = true;
@@ -170,13 +163,6 @@ export default {
         :on-close="hideCannedResponseModal"
       />
     </woot-modal>
-    <!-- Translate Content -->
-    <TranslateModal
-      v-if="showTranslateModal"
-      :content="messageContent"
-      :content-attributes="contentAttributes"
-      @close="onCloseTranslateModal"
-    />
     <!-- Confirm Deletion -->
     <woot-delete-modal
       v-if="showDeleteModal"