<script setup>
import InputChat from '../components/InputChat.vue'
import Chat from '../components/Chat.vue'
import Layout from "@/components/Layout.vue";
import Sidebar from "@/components/Sidebar.vue";
import ChatVue from '@/components/Chat.vue';
import { ChatManager } from '../../lib/ChatManager';
import { ref, watch } from 'vue';
const manager = new ChatManager()
const historys = ref(manager.historys)
watch( historys ,(newHistory)=>{
console.log("Watch execute");
console.log(newHistory)
console.log(historys.value);
},{deep:true})
const handleSentMessage = (value)=>{
console.log(value + "Parent receive yet");
manager.sentChat(value)
}
</script>
<template>
<Layout>
<template #sidebar>
<Sidebar />
</template>
<template #chat>
<Chat :history="manager.history"/>
</template>
<template #input-chat>
<InputChat @sent-message = "handleSentMessage"/>
</template>
</Layout>
</template>
export class ChatManager {
constructor() {
this.url = import.meta.env.VITE_API_URL || 'http://localhost:11434/api'
this.historys = [];
}
async sentChat(message){
const messageTemplate = {
request:{
role:"user",
content: ''
},
response:{
role:'assistant',
content:''
}
}
try {
messageTemplate.request.content = message
this.historys.push(messageTemplate)
const response = await fetch(`${this.url}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "llama2",
messages: [
{
role: "user",
content: message
}
],
stream: false
})
});
const data = await response.json();
console.log(data)
this.historys[this.historys.length-1].response.content = data.message.content
this.historys[this.historys.length-1].response.role = data.message.role
return data;
}
catch(error){
console.log(error);
}
}
}
It is puzzling why the watch function does not trigger when the history changes. I expect it to execute whenever a change occurs in the history. Can someone provide assistance please?