{"version":3,"file":"ChatNewState-5e825fbf.js","sources":["../../../app/javascript/components/chat/ChatNewState.vue"],"sourcesContent":["<template>\n  <div v-if=\"channel\" class=\"flex h-full flex-1 flex-col items-center justify-center\">\n    <div>\n      <ChatImage\n        class=\"mb-2\"\n        size=\"xl\"\n        :class=\"external ? '' : 'cursor-pointer'\"\n        :show-online=\"true\"\n        :item=\"channel\"\n        :channel-name=\"channelName\"\n        :is-channel=\"true\"\n        @click=\"external ? '' : $emit('toggle:chat-settings')\"\n      />\n    </div>\n    <BaseTooltip>\n      <template #target>\n        <div v-if=\"channel.data.direct_messaging\" class=\"text-xl font-semibold\">{{ truncate(channelName, 40) }}</div>\n        <div v-else class=\"font-semibold\" :class=\"external ? 'text-center text-sm' : 'text-xl'\">\n          Welcome to {{ truncate(channelName, 40) }}\n        </div>\n      </template>\n      <template #default v-if=\"channelName.length > 40\">{{ channelName }}</template>\n    </BaseTooltip>\n    <div class=\"my-3 flex justify-center\" v-if=\"!channel.data.direct_messaging && broadcastChannelAndAdmin(channel)\">\n      <ChatImage\n        v-if=\"totalChannelMembers > 0\"\n        class=\"cursor-pointer\"\n        custom-class=\"text-sm bg-gray-400 text-gray-700\"\n        :item=\"{ name: '+' + totalChannelMembers }\"\n        :style=\"external ? 'margin-right: -60px' : 'margin-right: -70px'\"\n        :size=\"external ? 'sm' : 'md'\"\n        @click=\"external ? '' : $emit('toggle:chat-settings')\"\n      />\n      <div\n        v-for=\"(member, idx) in channelMembers\"\n        :key=\"idx\"\n        :style=\"[idx == channelMembers.length - 1 ? '' : external ? 'margin-right: -60px' : 'margin-right: -70px']\"\n      >\n        <BaseTooltip>\n          <template #target>\n            <ChatImage :item=\"member.user\" :size=\"external ? 'sm' : 'md'\" :class=\"['cursor-pointer']\" />\n          </template>\n          <template #default>{{ member.user.name }}</template>\n        </BaseTooltip>\n      </div>\n    </div>\n    <div\n      v-if=\"!showRequestView && broadcastChannelAndAdmin(channel)\"\n      class=\"text-center text-xs font-medium text-gray-400\"\n    >\n      This chat was created at {{ toChatTime(channel.data.created_at, 'channel') }}.\n    </div>\n    <div\n      v-if=\"hasPermissions && !external && broadcastChannelAndAdmin(channel)\"\n      class=\"mt-3 flex items-center space-x-2 py-8\"\n    >\n      <BaseButton\n        v-if=\"!channel.data.broadcast_channel\"\n        size=\"sm\"\n        @press=\"$emitter.$emit('action:add-members', channel.cid)\"\n      >\n        <UserPlusIcon class=\"h-4 w-4 text-gray-200\" />\n        <span class=\"ml-1 text-xs font-medium text-gray-200\">Add People</span>\n      </BaseButton>\n      <BaseButton size=\"sm\" class=\"group px-5\" @press=\"$emit('toggle:chat-settings')\" type=\"secondary\">\n        <Cog8ToothIcon class=\"h-4 w-4 text-gray-400 group-hover:text-white\" />\n        <span class=\"ml-1 text-xs font-medium text-gray-400 group-hover:text-white\">Settings</span>\n      </BaseButton>\n    </div>\n    <div v-if=\"showRequestView\" class=\"py-2 text-center text-xs font-medium leading-4 text-gray-400\">\n      <div>{{ invitedText }}</div>\n      <div>They won’t know you’ve seen their messages until you accept.</div>\n    </div>\n    <div v-if=\"showRequestView\" class=\"mt-6 flex items-center space-x-2\">\n      <BaseButton size=\"sm\" class=\"space-x-1\" type=\"secondary\" :disabled=\"acceptButtonBusy\" @press=\"onAcceptRequest()\">\n        <CheckIcon class=\"h-4 w-4 text-green-400\" /><span>Accept</span>\n      </BaseButton>\n      <BaseButton\n        size=\"sm\"\n        class=\"space-x-1\"\n        type=\"secondary\"\n        :disabled=\"declineButtonBusy\"\n        @press=\"onDeclineRequest()\"\n      >\n        <XMarkIcon class=\"h-4 w-4 text-red-400\" />\n        <span>Decline</span>\n      </BaseButton>\n    </div>\n  </div>\n</template>\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\nimport { useStore } from 'vuex';\nimport { toChatTime } from '@/composeables/filters';\nimport { getUserName, broadcastChannelAndAdmin } from '@/composeables/chat';\nimport ChatImage from './ChatImage.vue';\nimport { truncate } from '@/composeables/filters';\nimport useEmitter from '@/composeables/emitter';\nimport { UserPlusIcon, Cog8ToothIcon, XMarkIcon, CheckIcon } from '@heroicons/vue/20/solid';\n\nconst $emitter = useEmitter();\nconst $store = useStore();\n\nconst props = defineProps({\n  channel: { type: Object, default: () => ({}) },\n  channelName: { type: String, default: '' },\n  external: { type: Boolean, default: false },\n  showRequestView: { type: Boolean, default: false }\n});\n\n// CHANNEL MEMBERS\nconst channelMembers = ref([]);\nconst totalChannelMembers = ref(0);\n\nfunction setChannelMembers() {\n  let members = Object.values(props.channel.state.members);\n  let users = members ? members.filter(x => !x.invited || (x.invited && !x.invite_rejected_at)) : [];\n  users.sort((a, b) => a.user.name.localeCompare(b.user.name));\n  channelMembers.value = users;\n  totalChannelMembers.value = channelMembers.value.length - 5;\n  channelMembers.value = channelMembers.value.slice(0, 5).reverse();\n}\nconst client = computed(() => $store.getters.client);\nonMounted(() => {\n  setChannelMembers();\n  client.value.on('user.updated', async event => {\n    let members = Object.values(props.channel.state.members).map(x => x.user_id);\n    if (members.includes(event.user.id)) {\n      setChannelMembers();\n    }\n  });\n  props.channel.on('channel.updated', () => {\n    setChannelMembers();\n  });\n});\n\n// INVITED DATA\nconst invitedText = computed(() => {\n  if (props.showRequestView) {\n    let invited = getInvitedBy(props.channel);\n    return !props.channel.data.direct_messaging\n      ? invited + ' invited you to join this chat.'\n      : invited + ' wants to connect.';\n  }\n  return null;\n});\n\nconst streamUser = computed(() => $store.getters.streamUser);\nconst streamUsers = computed(() => $store.getters.streamUsers);\nfunction getInvitedBy(channel) {\n  if (Array.isArray(channel.data.invited_users)) {\n    let invited = channel.data.invited_users.find(x => x.invited_users.includes(streamUser.value.id));\n    return invited ? getUserName(invited.invited_by, streamUsers) : channel.data.created_by.name;\n  }\n  return channel.data.created_by.name;\n}\n\n// ACCEPT AND DECLINE REQUEST\nconst acceptButtonBusy = ref(false);\nfunction onAcceptRequest() {\n  $emitter.$emit('invite:accept', props.channel);\n  acceptButtonBusy.value = true;\n}\n\nconst declineButtonBusy = ref(false);\nfunction onDeclineRequest() {\n  $emitter.$emit('invite:reject', props.channel);\n  declineButtonBusy.value = true;\n}\n\n// OTHERS\nconst hasPermissions = computed(() => {\n  if (\n    props.channel.data.channel_admins &&\n    props.channel.data.channel_admins.includes(streamUser.value.id) &&\n    !props.channel.data.direct_messaging\n  ) {\n    return true;\n  } else {\n    return false;\n  }\n});\n</script>\n"],"names":["$emitter","useEmitter","$store","useStore","channelMembers","ref","totalChannelMembers","setChannelMembers","members","props","users","x","b","client","computed","onMounted","event","invitedText","invited","getInvitedBy","streamUser","channel","getUserName","acceptButtonBusy","onAcceptRequest","declineButtonBusy","onDeclineRequest","hasPermissions"],"mappings":"kjDAoGMA,EAAWC,EAAU,EACrBC,EAASC,EAAQ,EAUjBC,EAAiBC,EAAI,CAAA,CAAE,EACvBC,EAAsBD,EAAI,CAAC,EAEjC,SAASE,GAAoB,CAC3B,IAAIC,EAAU,OAAO,OAAOC,EAAM,QAAQ,MAAM,OAAO,EACnDC,EAAQF,EAAUA,EAAQ,OAAOG,GAAK,CAACA,EAAE,SAAYA,EAAE,SAAW,CAACA,EAAE,kBAAmB,EAAI,CAAA,EAChGD,EAAM,KAAK,CAAC,EAAGE,IAAM,EAAE,KAAK,KAAK,cAAcA,EAAE,KAAK,IAAI,CAAC,EAC3DR,EAAe,MAAQM,EACvBJ,EAAoB,MAAQF,EAAe,MAAM,OAAS,EAC1DA,EAAe,MAAQA,EAAe,MAAM,MAAM,EAAG,CAAC,EAAE,SAC1D,CACA,MAAMS,EAASC,EAAS,IAAMZ,EAAO,QAAQ,MAAM,EACnDa,EAAU,IAAM,CACdR,IACAM,EAAO,MAAM,GAAG,eAAgB,MAAMG,GAAS,CAC/B,OAAO,OAAOP,EAAM,QAAQ,MAAM,OAAO,EAAE,IAAIE,GAAKA,EAAE,OAAO,EAC/D,SAASK,EAAM,KAAK,EAAE,GAChCT,GAEN,CAAG,EACDE,EAAM,QAAQ,GAAG,kBAAmB,IAAM,CACxCF,GACJ,CAAG,CACH,CAAC,EAGD,MAAMU,EAAcH,EAAS,IAAM,CACjC,GAAIL,EAAM,gBAAiB,CACzB,IAAIS,EAAUC,EAAaV,EAAM,OAAO,EACxC,OAAQA,EAAM,QAAQ,KAAK,iBAEvBS,EAAU,qBADVA,EAAU,iCAEf,CACD,OAAO,IACT,CAAC,EAEKE,EAAaN,EAAS,IAAMZ,EAAO,QAAQ,UAAU,EACvCY,EAAS,IAAMZ,EAAO,QAAQ,WAAW,EAC7D,SAASiB,EAAaE,EAAS,CAC7B,GAAI,MAAM,QAAQA,EAAQ,KAAK,aAAa,EAAG,CAC7C,IAAIH,EAAUG,EAAQ,KAAK,cAAc,KAAKV,GAAKA,EAAE,cAAc,SAASS,EAAW,MAAM,EAAE,CAAC,EAChG,OAAOF,EAAUI,EAAYJ,EAAQ,UAAuB,EAAIG,EAAQ,KAAK,WAAW,IACzF,CACD,OAAOA,EAAQ,KAAK,WAAW,IACjC,CAGA,MAAME,EAAmBlB,EAAI,EAAK,EAClC,SAASmB,GAAkB,CACzBxB,EAAS,MAAM,gBAAiBS,EAAM,OAAO,EAC7Cc,EAAiB,MAAQ,EAC3B,CAEA,MAAME,EAAoBpB,EAAI,EAAK,EACnC,SAASqB,GAAmB,CAC1B1B,EAAS,MAAM,gBAAiBS,EAAM,OAAO,EAC7CgB,EAAkB,MAAQ,EAC5B,CAGA,MAAME,EAAiBb,EAAS,IAE5B,GAAAL,EAAM,QAAQ,KAAK,gBACnBA,EAAM,QAAQ,KAAK,eAAe,SAASW,EAAW,MAAM,EAAE,GAC9D,CAACX,EAAM,QAAQ,KAAK,iBAMvB"}