{"version":3,"file":"ChatMessageComposer-d1bcd15a.js","sources":["../../../node_modules/@heroicons/vue/20/solid/esm/PaperClipIcon.js","../../../app/javascript/components/chat/ChatMessageComposer.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      d: \"M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","<template>\n  <div>\n    <div\n      v-if=\"quotedMessage\"\n      class=\"flex cursor-pointer justify-between rounded-tl rounded-tr bg-gray-700/50 px-4 py-2 text-xs text-gray-200\"\n    >\n      <div class=\"flex w-full flex-1 items-center space-x-1 text-xs font-semibold leading-4\">\n        <span class=\"text-gray-400\">Replying to </span>\n        <span class=\"whitespace-nowrap text-gray-100\">{{ quotedMessage.user.name }}</span>\n      </div>\n      <div @click=\"$emit('remove-quoted-message')\">\n        <XMarkIcon class=\"h-4 w-4 text-gray-100 hover:text-white\"></XMarkIcon>\n      </div>\n    </div>\n    <form class=\"flex flex-col\">\n      <div class=\"rounded-t bg-gray-700/50\" v-if=\"uploadFiles.length > 0\">\n        <UploadsPreview\n          :files=\"uploadFiles\"\n          :external=\"external\"\n          @remove-file=\"uploadFiles = uploadFiles.filter(f => f.name !== $event)\"\n        />\n      </div>\n      <div class=\"flex items-start rounded bg-gray-800 px-2 py-1\">\n        <div class=\"flex items-center space-x-1 py-1\">\n          <div\n            class=\"flex items-center justify-center rounded bg-gray-600 py-3 hover:bg-gray-500\"\n            :class=\"external ? 'h-3 w-7' : 'h-5 w-9'\"\n          >\n            <PaperClipIcon\n              class=\"cursor-pointer text-gray-100\"\n              :class=\"external ? 'h-3.5 w-3.5' : 'h-4 w-4'\"\n              @click=\"triggerFileSelector()\"\n            />\n          </div>\n          <div\n            tabindex=\"0\"\n            class=\"flex cursor-pointer items-center justify-center rounded bg-gray-600 py-3 hover:bg-gray-500\"\n            :id=\"`gif-button-${channelId}`\"\n            :class=\"external ? 'h-3 w-8' : 'h-5 w-10'\"\n            @click=\"$emit('show:gifs')\"\n          >\n            <span class=\"font-bold leading-5\" :class=\"external ? 'text-xs' : 'text-sm'\">GIF</span>\n          </div>\n        </div>\n        <input ref=\"file\" type=\"file\" style=\"display: none\" @change=\"onFileChange\" multiple />\n        <div class=\"flex w-full items-center px-2\">\n          <textarea\n            :id=\"composerId\"\n            v-model=\"message\"\n            :placeholder=\"'Send Message'\"\n            ref=\"resizeText\"\n            :rows=\"1\"\n            :class=\"[\n              'overflow-y-auto border-none py-2 text-sm focus:outline-none',\n              external ? 'max-h-[90px]' : 'max-h-[150px]'\n            ]\"\n            @input=\"resizeComposer()\"\n            @keydown.enter.exact.prevent=\"sendMessage($event)\"\n          ></textarea>\n        </div>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { onMounted, ref, onBeforeUnmount, watch } from 'vue';\nimport UploadsPreview from './ChatUploadsPreview.vue';\nimport useEmitter from '@/composeables/emitter';\nimport { PaperClipIcon, XMarkIcon } from '@heroicons/vue/20/solid';\nimport { flashMessage } from '@/composeables/helpers';\n\nconst $emitter = useEmitter();\nconst $emit = defineEmits(['show:gifs', 'message:send', 'scroll-to-bottom']);\n\nconst props = defineProps({\n  quotedMessage: Object,\n  external: Boolean,\n  channelId: String\n});\n\n// FILES\nconst uploadFiles = ref([]);\nconst file = ref(null);\nfunction onFileChange(e) {\n  const files = e.target.files;\n  if (uploadFiles.value.length + files.length > 10) {\n    flashMessage({\n      type: 'error',\n      message: 'You can only upload 10 files at a time!'\n    });\n  } else if (Array.from(files).some(f => f.size > 8388608)) {\n    flashMessage({\n      type: 'error',\n      message: 'Max file size is 8MB.'\n    });\n  } else {\n    if (uploadFiles.value.length > 0) {\n      Array.from(files).map(f => uploadFiles.value.push(f));\n    } else {\n      uploadFiles.value = Array.from(files);\n    }\n  }\n  document.getElementById(composerId.value).focus();\n}\n\nfunction triggerFileSelector() {\n  file.value.click();\n}\n\nonMounted(() => {\n  $emitter.$on('files-added', files => {\n    uploadFiles.value = [...uploadFiles.value, ...files];\n  });\n});\n\n// MESSAGE\nconst resizeText = ref(null);\nconst message = ref('');\nconst composerId = ref(`composer_${Math.random()}`);\nwatch(\n  () => props.quotedMessage,\n  (newVal, oldVal) => {\n    if (props.quotedMessage) {\n      document.getElementById(composerId.value).focus();\n    }\n  }\n);\n\nonMounted(() => {\n  const messageInput = document.getElementById(composerId.value);\n  messageInput.focus();\n  if (ResizeObserver) {\n    new ResizeObserver(() => {\n      if (document.activeElement === messageInput) {\n        $emit('scroll-to-bottom');\n      }\n    }).observe(messageInput);\n  }\n});\nfunction sendMessage(e) {\n  e.preventDefault();\n  if ((message.value && message.value.trim() != '') || uploadFiles.value.length > 0) {\n    $emit('message:send', { text: message.value, files: uploadFiles.value });\n    uploadFiles.value = [];\n    resizeText.value.style.height = '36px';\n    message.value = null;\n  }\n}\nfunction resizeComposer() {\n  let element = resizeText.value;\n  element.style.height = '36px';\n  element.style.height = element.scrollHeight + 'px';\n}\n\n// GIF SELECTION\nfunction toggleGifSelection(e) {\n  const messageInput = document.getElementById(composerId.value);\n  var gifButton = document.getElementById(`gif-button-${props.channelId}`);\n  if (e.key == 'Tab' && (gifButton === document.activeElement || messageInput == document.activeElement)) {\n    $emit('show:gifs');\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keyup', toggleGifSelection);\n});\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keyup', toggleGifSelection);\n  $emitter.$off('files-added');\n});\n</script>\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","$emitter","useEmitter","uploadFiles","ref","file","onFileChange","e","files","flashMessage","f","composerId","triggerFileSelector","onMounted","resizeText","message","watch","props","newVal","oldVal","messageInput","$emit","sendMessage","resizeComposer","element","toggleGifSelection","gifButton","onBeforeUnmount"],"mappings":"gXAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,MACnB,EAAK,CACDC,EAAoB,OAAQ,CAC1B,YAAa,UACb,EAAG,kTACH,YAAa,SACnB,CAAK,CACL,CAAG,CACH,qtBCyDMC,EAAWC,EAAU,EAUrBC,EAAcC,EAAI,CAAA,CAAE,EACpBC,EAAOD,EAAI,IAAI,EACrB,SAASE,EAAaC,EAAG,CACvB,MAAMC,EAAQD,EAAE,OAAO,MACnBJ,EAAY,MAAM,OAASK,EAAM,OAAS,GAC5CC,EAAa,CACX,KAAM,QACN,QAAS,yCACf,CAAK,EACQ,MAAM,KAAKD,CAAK,EAAE,KAAKE,GAAKA,EAAE,KAAO,OAAO,EACrDD,EAAa,CACX,KAAM,QACN,QAAS,uBACf,CAAK,EAEGN,EAAY,MAAM,OAAS,EAC7B,MAAM,KAAKK,CAAK,EAAE,IAAIE,GAAKP,EAAY,MAAM,KAAKO,CAAC,CAAC,EAEpDP,EAAY,MAAQ,MAAM,KAAKK,CAAK,EAGxC,SAAS,eAAeG,EAAW,KAAK,EAAE,MAAK,CACjD,CAEA,SAASC,GAAsB,CAC7BP,EAAK,MAAM,OACb,CAEAQ,EAAU,IAAM,CACdZ,EAAS,IAAI,cAAeO,GAAS,CACnCL,EAAY,MAAQ,CAAC,GAAGA,EAAY,MAAO,GAAGK,CAAK,CACvD,CAAG,CACH,CAAC,EAGD,MAAMM,EAAaV,EAAI,IAAI,EACrBW,EAAUX,EAAI,EAAE,EAChBO,EAAaP,EAAI,YAAY,KAAK,OAAM,CAAE,EAAE,EAClDY,EACE,IAAMC,EAAM,cACZ,CAACC,EAAQC,IAAW,CACdF,EAAM,eACR,SAAS,eAAeN,EAAW,KAAK,EAAE,MAAK,CAElD,CACH,EAEAE,EAAU,IAAM,CACd,MAAMO,EAAe,SAAS,eAAeT,EAAW,KAAK,EAC7DS,EAAa,MAAK,EACd,gBACF,IAAI,eAAe,IAAM,CACnB,SAAS,gBAAkBA,GAC7BC,EAAM,kBAAkB,CAEhC,CAAK,EAAE,QAAQD,CAAY,CAE3B,CAAC,EACD,SAASE,EAAYf,EAAG,CACtBA,EAAE,eAAc,GACXQ,EAAQ,OAASA,EAAQ,MAAM,QAAU,IAAOZ,EAAY,MAAM,OAAS,KAC9EkB,EAAM,eAAgB,CAAE,KAAMN,EAAQ,MAAO,MAAOZ,EAAY,KAAK,CAAE,EACvEA,EAAY,MAAQ,GACpBW,EAAW,MAAM,MAAM,OAAS,OAChCC,EAAQ,MAAQ,KAEpB,CACA,SAASQ,GAAiB,CACxB,IAAIC,EAAUV,EAAW,MACzBU,EAAQ,MAAM,OAAS,OACvBA,EAAQ,MAAM,OAASA,EAAQ,aAAe,IAChD,CAGA,SAASC,EAAmBlB,EAAG,CAC7B,MAAMa,EAAe,SAAS,eAAeT,EAAW,KAAK,EAC7D,IAAIe,EAAY,SAAS,eAAe,cAAcT,EAAM,SAAS,EAAE,EACnEV,EAAE,KAAO,QAAUmB,IAAc,SAAS,eAAiBN,GAAgB,SAAS,gBACtFC,EAAM,WAAW,CAErB,CAEA,OAAAR,EAAU,IAAM,CACd,OAAO,iBAAiB,QAASY,CAAkB,CACrD,CAAC,EAEDE,EAAgB,IAAM,CACpB,OAAO,oBAAoB,QAASF,CAAkB,EACtDxB,EAAS,KAAK,aAAa,CAC7B,CAAC","x_google_ignoreList":[0]}