{"version":3,"file":"ChatAttachmentPreview-e37fb2ee.js","sources":["../../../app/javascript/components/chat/ChatAttachmentPreview.vue"],"sourcesContent":["<template>\n  <div class=\"py-1\">\n    <div v-if=\"attachment.type == 'giphy'\" :style=\"`height: ${imageHeight}px`\" class=\"giphy-content\">\n      <ImagePreviewer :custom-style=\"`height: ${imageHeight}px; width: ${external ? '150px' : '250px'}`\">\n        <template #img>\n          <img\n            :src=\"attachment.thumb_url\"\n            :style=\"`display: block; max-height: ${imageHeight}px; width: auto; height: auto`\"\n          />\n        </template>\n      </ImagePreviewer>\n    </div>\n    <div v-else-if=\"attachment.title && attachment.og_scrape_url\" :url=\"attachment.og_scrape_url\" class=\"og-content\">\n      <template v-if=\"validUrl\">\n        <div\n          :class=\"displayColumn ? 'flex-col' : 'justify-between space-x-2'\"\n          class=\"mt-1 flex space-y-2 rounded !bg-gray-700/50 p-4\"\n          :style=\"external ? 'width: 15rem' : 'width: 25rem'\"\n        >\n          <div class=\"space-y-2\">\n            <div v-if=\"attachment.author_name\" class=\"author-name mb-2 line-clamp-1 text-xs text-gray-400\">\n              {{ attachment.author_name }}\n            </div>\n            <a\n              :href=\"attachment.title_link\"\n              class=\"line-clamp-2 cursor-pointer font-semibold text-blue-500 hover:underline\"\n              >{{ attachment.title }}</a\n            >\n            <div v-if=\"attachment.type != 'video'\" class=\"text-gray- line-clamp-6 text-xs\">{{ attachment.text }}</div>\n          </div>\n          <img\n            v-if=\"attachment.image_url || attachment.thumb_url\"\n            class=\"w-full rounded text-xxs\"\n            :style=\"!displayColumn ? 'display: block; max-width:80px; max-height:80px; width: auto; height: auto;' : ''\"\n            :src=\"attachment.image_url || attachment.thumb_url\"\n            :alt=\"attachment.title\"\n            @load=\"$emitter.$emit('scroll-to-bottom')\"\n          />\n        </div>\n      </template>\n    </div>\n    <img\n      v-else-if=\"attachment.og_scrape_url\"\n      class=\"rounded\"\n      :src=\"attachment.og_scrape_url\"\n      :style=\"`max-height:${imageHeight}px; height:auto; width:auto`\"\n      @load=\"$emitter.$emit('scroll-to-bottom')\"\n    />\n    <ImagePreviewer\n      v-else-if=\"attachment.type === 'image'\"\n      class=\"image-content\"\n      :custom-style=\"`height: ${imageHeight}px; width: ${external ? '250px' : '400px'}`\"\n    >\n      <template #img>\n        <img\n          :src=\"attachment.image_url ? `${attachment.image_url}&w=400` : ''\"\n          :alt=\"attachment.title\"\n          class=\"cursor-pointer rounded\"\n          :style=\"`max-height:${imageHeight}px; height:auto; width:auto`\"\n          @load=\"$emitter.$emit('scroll-to-bottom')\"\n          @click=\"$store.dispatch('setImageForPreview', attachment.image_url)\"\n        />\n      </template>\n    </ImagePreviewer>\n    <video\n      v-else-if=\"attachment.type === 'video' && !attachment.og_scrape_url\"\n      playsinline\n      controls\n      height=\"225\"\n      preload=\"metadata\"\n      class=\"video-content max-h-64 max-w-sm rounded\"\n      :class=\"external ? 'w-56' : ''\"\n      :src=\"attachment.asset_url\"\n    ></video>\n    <div\n      v-else-if=\"attachment.type === 'file' && attachment.mime_type && attachment.mime_type.startsWith('audio/')\"\n      class=\"audio-content\"\n    >\n      <audio controls :src=\"attachment.asset_url\" :class=\"external ? 'w-56' : ''\" />\n    </div>\n    <div v-else-if=\"attachment.type === 'file'\">\n      <div\n        class=\"flex h-10 items-center justify-between rounded !bg-gray-700/50 px-2\"\n        :class=\"external ? 'w-56' : 'w-64'\"\n      >\n        <a\n          :href=\"attachment.asset_url\"\n          class=\"whitespace-nowrap text-sm font-medium text-blue-600 underline\"\n          ref=\"asset_url\"\n        >\n          {{ truncate(attachment.title, external ? 20 : 25) }}\n        </a>\n        <div class=\"cursor-pointer\" @click=\"$refs.asset_url.click()\">\n          <ArrowDownTrayIcon class=\"h-4 w-4\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script setup>\nimport { useStore } from 'vuex';\nimport { nextTick, ref, onMounted } from 'vue';\nimport useEmitter from '@/composeables/emitter';\nimport { truncate } from '@/composeables/filters';\nimport { ArrowDownTrayIcon } from '@heroicons/vue/20/solid';\nimport ImagePreviewer from '@/components/ImagePreviewer.vue';\n\nconst $store = useStore();\nconst $emitter = useEmitter();\n\nconst props = defineProps({\n  attachment: Object,\n  external: Boolean\n});\n\nonMounted(() => {\n  nextTick(() => {\n    $emitter.$emit('scroll-to-bottom');\n  });\n\n  let url = props.attachment.image_url || props.attachment.thumb_url;\n  if (url && !url.includes('giphy')) {\n    var img = new Image();\n    img.src = url;\n    img.addEventListener('load', function () {\n      displayColumn.value =\n        img.naturalHeight != 0 && img.naturalWidth != 0 && img.naturalWidth <= img.naturalHeight ? false : true;\n    });\n  }\n  const regex = /https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/;\n  validUrl.value = regex.test(props.attachment.og_scrape_url);\n});\nconst displayColumn = ref(true);\nconst imageHeight = ref(props.external ? 150 : 250);\nconst validUrl = ref(false);\n</script>\n"],"names":["$store","useStore","$emitter","useEmitter","onMounted","nextTick","url","props","img","displayColumn","regex","validUrl","ref","imageHeight"],"mappings":"+uBA2GMA,EAASC,EAAQ,EACjBC,EAAWC,EAAU,EAO3BC,EAAU,IAAM,CACdC,EAAS,IAAM,CACbH,EAAS,MAAM,kBAAkB,CACrC,CAAG,EAED,IAAII,EAAMC,EAAM,WAAW,WAAaA,EAAM,WAAW,UACzD,GAAID,GAAO,CAACA,EAAI,SAAS,OAAO,EAAG,CACjC,IAAIE,EAAM,IAAI,MACdA,EAAI,IAAMF,EACVE,EAAI,iBAAiB,OAAQ,UAAY,CACvCC,EAAc,MACZ,EAAAD,EAAI,eAAiB,GAAKA,EAAI,cAAgB,GAAKA,EAAI,cAAgBA,EAAI,cACnF,CAAK,CACF,CACD,MAAME,EAAQ,4FACdC,EAAS,MAAQD,EAAM,KAAKH,EAAM,WAAW,aAAa,CAC5D,CAAC,EACD,MAAME,EAAgBG,EAAI,EAAI,EACxBC,EAAcD,EAAIL,EAAM,SAAW,IAAM,GAAG,EAC5CI,EAAWC,EAAI,EAAK"}