feat: setup instagram

app/javascript/dashboard/components-next/message/bubbles/Image.vue

@@ -29,12 +29,19 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['error']);
+
 const attachment = computed(() => {
   return props.attachments[0];
 });
 
 const hasError = ref(false);
 
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
 const downloadAttachment = async () => {
   const response = await fetch(attachment.value.dataUrl);
   const blob = await response.blob();
@@ -51,7 +58,7 @@ const downloadAttachment = async () => {
 
 <template>
   <BaseBubble class="overflow-hidden relative group">
-    <img :src="attachment.thumbUrl" @click="onClick" @error="hasError = true" />
+    <img :src="attachment.thumbUrl" @click="onClick" @error="handleError" />
     <div
       class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
     >

app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import Icon from 'next/icon/Icon.vue';
+import ImageBubble from './Image.vue';
+import VideoBubble from './Video.vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } 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({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const { variant } = useMessageContext();
+const hasImgStoryError = ref(false);
+const hasVideoStoryError = ref(false);
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+
+const onImageLoadError = () => {
+  hasImgStoryError.value = true;
+  emit('error');
+};
+
+const onVideoLoadError = () => {
+  hasVideoStoryError.value = true;
+  emit('error');
+};
+</script>
+
+<template>
+  <BaseBubble class="p-3 overflow-hidden">
+    <div v-if="content" class="mb-2" v-html="formattedContent" />
+    <img
+      v-if="!hasImgStoryError"
+      class="rounded-lg max-w-80"
+      :src="attachment.dataUrl"
+      @error="onImageLoadError"
+    />
+    <video
+      v-else-if="!hasVideoStoryError"
+      class="rounded-lg max-w-80"
+      controls
+      :src="attachment.dataUrl"
+      @error="onVideoLoadError"
+    />
+    <div
+      v-else
+      class="flex items-center bg-n-alpha-1 gap-1 text-center px-5 py-4 rounded-lg"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
+      </p>
+    </div>
+  </BaseBubble>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Video.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
 import { ATTACHMENT_TYPES } from '../constants';
@@ -29,6 +29,13 @@ const props = defineProps({
     required: true,
   },
 });
+const emit = defineEmits(['error']);
+const hasError = ref(false);
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
 
 const attachment = computed(() => {
   return props.attachments[0];
@@ -54,7 +61,7 @@ const isReel = computed(() => {
         'max-w-48': isReel,
         'max-w-full': !isReel,
       }"
-      @error="hasError = true"
+      @error="handleError"
     />
   </BaseBubble>
 </template>