Прокрутите внизу в приложении Vuejs не работает ⇐ Html

[Anonymous]

Я создаю приложение Chatbot, которое транслирует контент из API REST, и оно работает совершенно нормально, но прокрутка внизу не делает то, что ожидается, генерируется прокрутка, и мне приходится вручную прокрутить, чтобы увидеть потоковую передачу ответов. < /p>
async sendMsg() {
const messageToSend = this.newMessage.trim();
this.newMessage = '';

const botName = "Prometheus";
const usermessagePayload = {
content: messageToSend,
sender: 'user',
receiver: botName,
time: util.formatDate.format(new Date(), 'hh:mm:ss'),
sources: []
};

this.$store.commit('SEND_MESSAGE', usermessagePayload);

try {
const path = `https:///privategptstream?prompt=${messageToSend}`;
console.log("Sending message:", messageToSend);

const response = await fetch(path);
const reader = response.body.getReader();

const initialanswerPayload = {
content: '',
sender: botName,
receiver: 'user',
time: util.formatDate.format(new Date(), 'hh:mm:ss'),
isNewMessage: true
}

this.$store.commit('APPEND_MESSAGE_CHUNK', initialanswerPayload);

while (true) {
const { done, value } = await reader.read();
if (done) break;

const chunk = new TextDecoder("utf-8").decode(value);
const answerPayload = {
content: chunk,
sender: botName,
receiver: 'user',
time: util.formatDate.format(new Date(), 'hh:mm:ss'),
isNewMessage: false
}

// Append the chunk to the last message in the conversation
this.$store.commit('APPEND_MESSAGE_CHUNK', answerPayload);
this.$nextTick(() => {
setTimeout(() => {
this.scrollToBottom();
}, 100); // Adjust the delay as needed
});
}

console.log("Streaming complete");
} catch (error) {
console.error("Error streaming the answer:", error);
this.showSnackbar('Failed to get an answer from the server.');
}
},

scrollToBottom() {
const chatContainer = this.$refs.chatContainer;
chatContainer.scrollTop = chatContainer.scrollHeight;
console.log("chatcontainer scrollTop:" + chatContainer.scrollTop );
console.log("chatcontainer scrollHeight:" + chatContainer.scrollHeight );

},


















{{ message.content }}


{{ message.content }}


This bot can help you with a variety of tasks, such as answering questions, providing information, and more.
Try one of the options below and type in your question or make use of the predefined prompts.









{{ item.icon }}
{{ item.title }}


{{ item.summary }}











{{ prompt.text }}






mdi-delete
Clear Conversation






mdi-send






{{ snackbar.message }}

Close








Подробнее здесь: https://stackoverflow.com/questions/780 ... ot-working