Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed, defineOptions, useAttrs } from 'vue';
+
+import ImageChip from 'next/message/chips/Image.vue';
+import VideoChip from 'next/message/chips/Video.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+import FileChip from 'next/message/chips/File.vue';
+import { useMessageContext } from '../provider.js';
+
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+const { orientation } = useMessageContext();
+
+const classToApply = computed(() => {
+  const baseClasses = [attrs.class, 'flex', 'flex-wrap'];
+
+  if (orientation.value === 'right') {
+    baseClasses.push('justify-end');
+  }
+
+  return baseClasses;
+});
+
+const allAttachments = computed(() => {
+  return Array.isArray(props.attachments) ? props.attachments : [];
+});
+
+const mediaAttachments = computed(() => {
+  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
+  const mediaTypes = allAttachments.value.filter(attachment =>
+    allowedTypes.includes(attachment.fileType)
+  );
+
+  return mediaTypes.sort(
+    (a, b) =>
+      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
+  );
+});
+
+const recordings = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
+  );
+});
+
+const files = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
+  );
+});
+</script>
+
+<template>
+  <div v-if="mediaAttachments.length" :class="classToApply">
+    <template v-for="attachment in mediaAttachments" :key="attachment.id">
+      <ImageChip
+        v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
+        :attachment="attachment"
+      />
+      <VideoChip
+        v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
+        :attachment="attachment"
+      />
+    </template>
+  </div>
+  <div v-if="recordings.length" :class="classToApply">
+    <div v-for="attachment in recordings" :key="attachment.id">
+      <AudioChip
+        class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
+        :attachment="attachment"
+      />
+    </div>
+  </div>
+  <div v-if="files.length" :class="classToApply">
+    <FileChip
+      v-for="attachment in files"
+      :key="attachment.id"
+      :attachment="attachment"
+    />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -0,0 +1,195 @@
+<script setup>
+import {
+  computed,
+  onMounted,
+  useTemplateRef,
+  ref,
+  getCurrentInstance,
+} from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
+import { downloadFile } from '@chatwoot/utils';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { emitter } from 'shared/helpers/mitt';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+  showTranscribedText: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const timeStampURL = computed(() => {
+  return timeStampAppendedURL(attachment.dataUrl);
+});
+
+const audioPlayer = useTemplateRef('audioPlayer');
+
+const isPlaying = ref(false);
+const isMuted = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const playbackSpeed = ref(1);
+
+const { uid } = getCurrentInstance();
+
+const onLoadedMetadata = () => {
+  duration.value = audioPlayer.value?.duration;
+};
+
+const playbackSpeedLabel = computed(() => {
+  return `${playbackSpeed.value}x`;
+});
+
+// There maybe a chance that the audioPlayer ref is not available
+// When the onLoadMetadata is called, so we need to set the duration
+// value when the component is mounted
+onMounted(() => {
+  duration.value = audioPlayer.value?.duration;
+  audioPlayer.value.playbackRate = playbackSpeed.value;
+});
+
+// Listen for global audio play events and pause if it's not this audio
+useEmitter('pause_playing_audio', currentPlayingId => {
+  if (currentPlayingId !== uid && isPlaying.value) {
+    try {
+      audioPlayer.value.pause();
+    } catch {
+      /* ignore pause errors */
+    }
+    isPlaying.value = false;
+  }
+});
+
+const formatTime = time => {
+  if (!time || Number.isNaN(time)) return '00:00';
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const toggleMute = () => {
+  audioPlayer.value.muted = !audioPlayer.value.muted;
+  isMuted.value = audioPlayer.value.muted;
+};
+
+const onTimeUpdate = () => {
+  currentTime.value = audioPlayer.value?.currentTime;
+};
+
+const seek = event => {
+  const time = Number(event.target.value);
+  audioPlayer.value.currentTime = time;
+  currentTime.value = time;
+};
+
+const playOrPause = () => {
+  if (isPlaying.value) {
+    audioPlayer.value.pause();
+    isPlaying.value = false;
+  } else {
+    // Emit event to pause all other audio
+    emitter.emit('pause_playing_audio', uid);
+    audioPlayer.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const onEnd = () => {
+  isPlaying.value = false;
+  currentTime.value = 0;
+  playbackSpeed.value = 1;
+  audioPlayer.value.playbackRate = 1;
+};
+
+const changePlaybackSpeed = () => {
+  const speeds = [1, 1.5, 2];
+  const currentIndex = speeds.indexOf(playbackSpeed.value);
+  const nextIndex = (currentIndex + 1) % speeds.length;
+  playbackSpeed.value = speeds[nextIndex];
+  audioPlayer.value.playbackRate = playbackSpeed.value;
+};
+
+const downloadAudio = async () => {
+  const { fileType, dataUrl, extension } = attachment;
+  downloadFile({ url: dataUrl, type: fileType, extension });
+};
+</script>
+
+<template>
+  <audio
+    ref="audioPlayer"
+    controls
+    class="hidden"
+    playsinline
+    @loadedmetadata="onLoadedMetadata"
+    @timeupdate="onTimeUpdate"
+    @ended="onEnd"
+  >
+    <source :src="timeStampURL" />
+  </audio>
+  <div
+    v-bind="$attrs"
+    class="rounded-xl w-full gap-2 p-1.5 bg-n-alpha-white flex flex-col items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+  >
+    <div class="flex gap-1 w-full flex-1 items-center justify-start">
+      <button class="p-0 border-0 size-8" @click="playOrPause">
+        <Icon
+          v-if="isPlaying"
+          class="size-8"
+          icon="i-teenyicons-pause-small-solid"
+        />
+        <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+      </button>
+      <div class="tabular-nums text-xs">
+        {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+      </div>
+      <div class="flex-1 items-center flex px-2">
+        <input
+          type="range"
+          min="0"
+          :max="duration"
+          :value="currentTime"
+          class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+          @input="seek"
+        />
+      </div>
+      <button
+        class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
+        @click="changePlaybackSpeed"
+      >
+        <span class="text-xs text-n-slate-11 font-medium">
+          {{ playbackSpeedLabel }}
+        </span>
+      </button>
+      <button
+        class="p-0 border-0 size-8 grid place-content-center"
+        @click="toggleMute"
+      >
+        <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+        <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+      </button>
+      <button
+        class="p-0 border-0 size-8 grid place-content-center"
+        @click="downloadAudio"
+      >
+        <Icon class="size-4" icon="i-lucide-download" />
+      </button>
+    </div>
+
+    <div
+      v-if="attachment.transcribedText && showTranscribedText"
+      class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
+    >
+      {{ attachment.transcribedText }}
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/message/chips/File.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getFileInfo } from '@chatwoot/utils';
+
+import FileIcon from 'next/icon/FileIcon.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const fileDetails = computed(() => {
+  return getFileInfo(attachment?.dataUrl || '');
+});
+
+const displayFileName = computed(() => {
+  const { base, type } = fileDetails.value;
+  const truncatedName = (str, maxLength, hasExt) =>
+    str.length > maxLength
+      ? `${str.substring(0, maxLength).trimEnd()}${hasExt ? '..' : '...'}`
+      : str;
+
+  return type
+    ? `${truncatedName(base, 12, true)}.${type}`
+    : truncatedName(base, 14, false);
+});
+
+const textColorClass = computed(() => {
+  const colorMap = {
+    '7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
+    csv: 'text-n-amber-12',
+    doc: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    json: 'text-n-slate-12',
+    odt: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    pdf: 'text-n-slate-12',
+    ppt: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    pptx: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    rar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    rtf: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    tar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    txt: 'text-n-slate-12',
+    xls: 'text-n-teal-12',
+    xlsx: 'text-n-teal-12',
+    zip: 'dark:text-[#EDEEF0] text-[#2F265F]',
+  };
+
+  return colorMap[fileDetails.value.type] || 'text-n-slate-12';
+});
+</script>
+
+<template>
+  <div
+    class="h-9 bg-n-alpha-white gap-2 overflow-hidden items-center flex px-2 rounded-lg border border-n-container"
+  >
+    <FileIcon class="flex-shrink-0" :file-type="fileDetails.type" />
+    <span
+      class="flex-1 min-w-0 text-sm max-w-36"
+      :title="fileDetails.name"
+      :class="textColorClass"
+    >
+      {{ displayFileName }}
+    </span>
+    <a
+      v-tooltip="t('CONVERSATION.DOWNLOAD')"
+      class="flex-shrink-0 size-9 grid place-content-center cursor-pointer text-n-slate-11 hover:text-n-slate-12 transition-colors"
+      :href="attachment.dataUrl"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+    >
+      <Icon icon="i-lucide-download" />
+    </a>
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/message/chips/Image.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+const hasError = ref(false);
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+};
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="hasError"
+      class="flex flex-col items-center justify-center gap-1 text-xs text-center rounded-lg size-full bg-n-alpha-1 text-n-slate-11"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      {{ $t('COMPONENTS.MEDIA.LOADING_FAILED') }}
+    </div>
+    <img
+      v-else
+      class="object-cover w-full h-full skip-context-menu"
+      :src="attachment.dataUrl"
+      @error="handleError"
+    />
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="handleError"
+    @close="() => (showGallery = false)"
+  />
+</template>

research/chatwoot/app/javascript/dashboard/components-next/message/chips/Video.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
+    @click="showGallery = true"
+  >
+    <video
+      :src="attachment.dataUrl"
+      class="w-full h-full object-cover"
+      muted
+      playsInline
+    />
+    <div
+      class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
+    >
+      <div
+        class="size-7 bg-n-slate-1/60 backdrop-blur-sm rounded-full overflow-hidden shadow-[0_5px_15px_rgba(0,0,0,0.4)]"
+      >
+        <Icon
+          icon="i-teenyicons-play-small-solid"
+          class="size-7 text-n-slate-12/80 backdrop-blur"
+        />
+      </div>
+    </div>
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="onError"
+    @close="() => (showGallery = false)"
+  />
+</template>