<template>
    <div class="flex items-center justify-between p-1">
        <h1 class="flex items-center">
            <i class="pi pi-comments mr-2"></i>
            <span>Chat with WizardAI</span>
        </h1>
    </div>
        <div class="flex items-center justify-between p-1">
        <h2>
            <span>
                Contextualized on 
            </span><br/>
            <span>
                Project: <strong>{{ userPrefStore.user.selectedProject.fe_name }}</strong>
            </span><br/>
            <span v-if="userPrefStore.user.selectedApplication">
                 Application: <strong>{{ userPrefStore.user.selectedApplication.fe_name}}</strong>
            </span>
        </h2>
    </div>
    <div className="card">
        <ChatClient />
    </div>
</template>

<script setup>
import ChatClient from '@/components/ChatClient.vue';
import { UserPrefStore } from '@/stores/UserPrefStore.js';
import { onMounted, computed, watch, ref} from 'vue';

const userPrefStore = UserPrefStore();

onMounted(() => {
    console.log('userPrefStore', userPrefStore);
});



</script>

<style >

 
</style>