jason/ThunderAI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding action button after response and collecting the full html response in a var

Browse source
This commit is contained in:
mic 2024-07-21 22:43:28 +02:00
parent 874429e341
commit e7332225ff
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
api_webchat/messagesArea.js
View file

@ -64,6 +64,9 @@ messagesDiv.id = 'messages';
messagesAreaTemplate.content.appendChild(messagesDiv);
class MessagesArea extends HTMLElement {
fullTextHTML = "";
constructor() {
super();
this.accumulatingMessageEl = null;
@ -95,9 +98,11 @@ class MessagesArea extends HTMLElement {
handleTokensDone() {
this.flushAccumulatingMessage();
this.addActionButtons();
}
appendUserMessage(messageText, source="You") {
this.fullTextHTML = "";
console.log("appendUserMessage: " + messageText);
const header = document.createElement('h2');
header.textContent = source;
@ -134,7 +139,14 @@ class MessagesArea extends HTMLElement {
addActionButtons() {
const actionButtons = document.createElement('div');
actionButtons.classList.add('action-buttons');
const actionButton = document.createElement('button');
actionButton.textContent = 'Send';
actionButton.addEventListener('click', () => {
alert(this.fullText);
});
actionButtons.appendChild(actionButton);
this.messages.appendChild(actionButtons);
this.scrollToBottom();
}
flushAccumulatingMessage() {
@ -148,6 +160,8 @@ class MessagesArea extends HTMLElement {
// Convert Markdown to DOM nodes using the markdown-it library
const md = window.markdownit();
const html = md.render(fullText);
this.fullTextHTML += html;
// Create a new DOM parser
const parser = new DOMParser();
@ -162,15 +176,17 @@ class MessagesArea extends HTMLElement {
Array.from(doc.body.childNodes).forEach(node => {
this.accumulatingMessageEl.appendChild(node);
});
this.accumulatingMessageEl = null;
}
}
appendBotMessage(messageText) {
console.log("appendBotMessage: " + messageText);
this.fullTextHTML = messageText;
const lastMessage = this.messages.lastElementChild;
const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user');