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

16
api_webchat/messagesArea.js
View file

@ -64,6 +64,9 @@ messagesDiv.id = 'messages';
messagesAreaTemplate.content.appendChild(messagesDiv); messagesAreaTemplate.content.appendChild(messagesDiv);
class MessagesArea extends HTMLElement { class MessagesArea extends HTMLElement {
fullTextHTML = "";
constructor() { constructor() {
super(); super();
this.accumulatingMessageEl = null; this.accumulatingMessageEl = null;
@ -95,9 +98,11 @@ class MessagesArea extends HTMLElement {
handleTokensDone() { handleTokensDone() {
this.flushAccumulatingMessage(); this.flushAccumulatingMessage();
this.addActionButtons();
} }
appendUserMessage(messageText, source="You") { appendUserMessage(messageText, source="You") {
this.fullTextHTML = "";
console.log("appendUserMessage: " + messageText); console.log("appendUserMessage: " + messageText);
const header = document.createElement('h2'); const header = document.createElement('h2');
header.textContent = source; header.textContent = source;
@ -134,7 +139,14 @@ class MessagesArea extends HTMLElement {
addActionButtons() { addActionButtons() {
const actionButtons = document.createElement('div'); const actionButtons = document.createElement('div');
actionButtons.classList.add('action-buttons'); 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.messages.appendChild(actionButtons);
this.scrollToBottom();
} }
flushAccumulatingMessage() { flushAccumulatingMessage() {
@ -149,6 +161,8 @@ class MessagesArea extends HTMLElement {
const md = window.markdownit(); const md = window.markdownit();
const html = md.render(fullText); const html = md.render(fullText);
this.fullTextHTML += html;
// Create a new DOM parser // Create a new DOM parser
const parser = new DOMParser(); const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html'); const doc = parser.parseFromString(html, 'text/html');
@ -171,6 +185,8 @@ class MessagesArea extends HTMLElement {
appendBotMessage(messageText) { appendBotMessage(messageText) {
console.log("appendBotMessage: " + messageText); console.log("appendBotMessage: " + messageText);
this.fullTextHTML = messageText;
const lastMessage = this.messages.lastElementChild; const lastMessage = this.messages.lastElementChild;
const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user'); const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user');