Untitled

<template>
  <ion-page class="chat-page">
    <app-header-default />
    <ion-content>
      <div v-if="!loaded" class="chat-page__loader">
        <ion-spinner name="crescent" />
      </div>
      <weavy-chat uid="prime-fpl-beta" class="chat-page__container" :class="{ loading: !loaded }" />
    </ion-content>
  </ion-page>
</template>

<script setup>
  import { ref, onMounted } from "vue"
  import { IonPage, IonContent, IonSpinner } from "@ionic/vue"
  // import { Weavy, Chat } from "@weavy/dropin-js"

  import { use_api_store } from "@/stores/api"

  import AppHeaderDefault from "@/components/app/app-header-default"

  const { main_api } = use_api_store()

  let loaded = ref(false)
  let weavy_loader = {}

  onMounted(async () => {
    if (!window.Weavy) await init_weavy()

    console.log("-->", window.Weavy, window.Chat)

    window.Weavy.url = "https://f751233661f7481ea47b82d018056496.weavy.io"
    window.Weavy.tokenFactory = async (refresh) => {
      const { data: access_token } = await main_api.get(`/users/me/chat`)
      loaded.value = true
      return access_token
    }
  })

  async function init_weavy() {
    return new Promise((resolve, reject) => {
      weavy_loader = document.createElement("script")
      weavy_loader.setAttribute("src", `https://cdn.jsdelivr.net/npm/@weavy/dropin-js/dist/weavy.js`)
      weavy_loader.setAttribute("crossorigin", "anonymous")
      weavy_loader.async = true
      console.log("weavy-loader", weavy_loader)
      document.head.appendChild(weavy_loader)
      weavy_loader.addEventListener("load", () => {
        resolve()
      })
    })
  }
</script>

<style lang="scss">
  .chat-page {
    height: 100%;

    &__container {
      height: 100%;
      &.loading {
        display: none;
      }
    }
    &__loader {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
    }
  }
</style>