<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>