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/components/widgets/conversation/bubble/TranslateModal.vue

@@ -1,61 +0,0 @@
-<script>
-export default {
-  props: {
-    contentAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['close'],
-  computed: {
-    translationsAvailable() {
-      return !!Object.keys(this.translations).length;
-    },
-    translations() {
-      return this.contentAttributes.translations || {};
-    },
-  },
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal
-    modal-type="right-aligned"
-    class="text-left"
-    show
-    :on-close="onClose"
-  >
-    <div class="content">
-      <p>
-        <b>{{ $t('TRANSLATE_MODAL.ORIGINAL_CONTENT') }}</b>
-      </p>
-      <p v-dompurify-html="content" class="mb-0" />
-      <br />
-      <hr />
-      <div v-if="translationsAvailable">
-        <p>
-          <b>{{ $t('TRANSLATE_MODAL.TRANSLATED_CONTENT') }}</b>
-        </p>
-        <div v-for="(translation, language) in translations" :key="language">
-          <p>
-            <strong>{{ language }}:</strong>
-          </p>
-          <p v-dompurify-html="translation" />
-          <br />
-        </div>
-      </div>
-      <p v-else>
-        {{ $t('TRANSLATE_MODAL.NO_TRANSLATIONS_AVAILABLE') }}
-      </p>
-    </div>
-  </woot-modal>
-</template>