Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../../provider.js';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const { variant } = useMessageContext();
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+</script>
+
+<template>
+  <span v-dompurify-html="formattedContent" class="prose prose-bubble" />
+</template>

research/chatwoot/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed, ref } from 'vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from './FormattedContent.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+import TranslationToggle from 'dashboard/components-next/message/TranslationToggle.vue';
+import { MESSAGE_TYPES } from '../../constants';
+import { useMessageContext } from '../../provider.js';
+import { useTranslations } from 'dashboard/composables/useTranslations';
+
+const { content, attachments, contentAttributes, messageType } =
+  useMessageContext();
+
+const { hasTranslations, translationContent } =
+  useTranslations(contentAttributes);
+
+const renderOriginal = ref(false);
+
+const renderContent = computed(() => {
+  if (renderOriginal.value) {
+    return content.value;
+  }
+
+  if (hasTranslations.value) {
+    return translationContent.value;
+  }
+
+  return content.value;
+});
+
+const isTemplate = computed(() => {
+  return messageType.value === MESSAGE_TYPES.TEMPLATE;
+});
+
+const isEmpty = computed(() => {
+  return !content.value && !attachments.value?.length;
+});
+
+const handleSeeOriginal = () => {
+  renderOriginal.value = !renderOriginal.value;
+};
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3" data-bubble-name="text">
+    <div class="gap-3 flex flex-col">
+      <span v-if="isEmpty" class="text-n-slate-11">
+        {{ $t('CONVERSATION.NO_CONTENT') }}
+      </span>
+      <FormattedContent v-if="renderContent" :content="renderContent" />
+      <TranslationToggle
+        v-if="hasTranslations"
+        class="-mt-3"
+        :showing-original="renderOriginal"
+        @toggle="handleSeeOriginal"
+      />
+      <AttachmentChips :attachments="attachments" class="gap-2" />
+      <template v-if="isTemplate">
+        <div
+          v-if="contentAttributes.submittedEmail"
+          class="px-2 py-1 rounded-lg bg-n-alpha-3"
+        >
+          {{ contentAttributes.submittedEmail }}
+        </div>
+      </template>
+    </div>
+  </BaseBubble>
+</template>
+
+<style>
+p:last-child {
+  margin-bottom: 0;
+}
+</style>