Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -0,0 +1,57 @@
+<script setup>
+import HeaderActions from './HeaderActions.vue';
+import { computed } from 'vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+const props = defineProps({
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+  introHeading: {
+    type: String,
+    default: '',
+  },
+  introBody: {
+    type: String,
+    default: '',
+  },
+  showPopoutButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { formatMessage } = useMessageFormatter();
+
+const containerClasses = computed(() => [
+  props.avatarUrl ? 'justify-between' : 'justify-end',
+]);
+</script>
+
+<template>
+  <header
+    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
+  >
+    <div class="flex items-start" :class="containerClasses">
+      <img
+        v-if="avatarUrl"
+        class="h-12 rounded-full"
+        :src="avatarUrl"
+        alt="Avatar"
+      />
+      <HeaderActions
+        :show-popout-button="showPopoutButton"
+        :show-end-conversation-button="false"
+      />
+    </div>
+    <h2
+      v-dompurify-html="introHeading"
+      class="mt-4 text-2xl mb-1.5 font-medium text-n-slate-12 line-clamp-4"
+    />
+    <p
+      v-dompurify-html="formatMessage(introBody)"
+      class="text-lg leading-normal text-n-slate-11 [&_a]:underline line-clamp-6"
+    />
+  </header>
+</template>