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

corretly handling input state

Browse source
This commit is contained in:
mic 2024-07-21 23:15:05 +02:00
parent 4c529df6f2
commit 6d9bb7cf7c
3 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
api_webchat/controller.js
View file

@ -51,14 +51,14 @@ worker.onmessage = function(event) {
const { type, payload } = event.data; const { type, payload } = event.data;
switch (type) { switch (type) {
case 'messageSent': case 'messageSent':
//messageInput.handleMessageSent(); messageInput.handleMessageSent();
break; break;
case 'newToken': case 'newToken':
messagesArea.handleNewToken(payload.token); messagesArea.handleNewToken(payload.token);
break; break;
case 'tokensDone': case 'tokensDone':
messagesArea.handleTokensDone(promptData); messagesArea.handleTokensDone(promptData);
messageInput.handleMessageSent(); messageInput.enableInput();
break; break;
case 'error': case 'error':
messagesArea.appendBotMessage(payload); messagesArea.appendBotMessage(payload);

8
api_webchat/messageInput.js
View file

@ -109,7 +109,12 @@ class MessageInput extends HTMLElement {
} }
handleMessageSent() { handleMessageSent() {
console.log("handleMessageSent"); console.log("[ThunderAI] handleMessageSent");
this._messageInputField.value = '';
}
enableInput() {
console.log("[ThunderAI] enableInput");
this._messageInputField.value = ''; this._messageInputField.value = '';
this._sendButton.removeAttribute('disabled'); this._sendButton.removeAttribute('disabled');
this._messageInputField.removeAttribute('disabled'); this._messageInputField.removeAttribute('disabled');
@ -130,6 +135,7 @@ class MessageInput extends HTMLElement {
this._sendButton.setAttribute('disabled', 'disabled'); this._sendButton.setAttribute('disabled', 'disabled');
this._messageInputField.setAttribute('disabled', 'disabled'); this._messageInputField.setAttribute('disabled', 'disabled');
let messageContent = this._messageInputField.value; let messageContent = this._messageInputField.value;
this._messageInputField.value = '';
if (this.messagesAreaComponent) { if (this.messagesAreaComponent) {
this.messagesAreaComponent.appendUserMessage(messageContent); this.messagesAreaComponent.appendUserMessage(messageContent);
} }

14
api_webchat/messagesArea.js
View file

@ -49,6 +49,7 @@ messagesAreaStyle.textContent = `
} }
.action-buttons { .action-buttons {
line-height: 1.3; line-height: 1.3;
text-align: center;
} }
@keyframes fadeIn { @keyframes fadeIn {
to { to {
@ -60,6 +61,9 @@ messagesAreaStyle.textContent = `
font-size: 1rem; font-size: 1rem;
margin-top: 20px; margin-top: 20px;
} }
hr {
width: 100%;
}
`; `;
messagesAreaTemplate.content.appendChild(messagesAreaStyle); messagesAreaTemplate.content.appendChild(messagesAreaStyle);
@ -103,6 +107,7 @@ class MessagesArea extends HTMLElement {
handleTokensDone(promptData = null) { handleTokensDone(promptData = null) {
this.flushAccumulatingMessage(); this.flushAccumulatingMessage();
this.addActionButtons(promptData); this.addActionButtons(promptData);
this.addDivider();
} }
appendUserMessage(messageText, source="You") { appendUserMessage(messageText, source="You") {
@ -146,7 +151,8 @@ class MessagesArea extends HTMLElement {
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'); const actionButton = document.createElement('button');
actionButton.textContent = 'Send'; actionButton.textContent = 'Use this answer';
//actionButton.textContent = browser.i18n.getMessage("chatgpt_win_get_answer");
actionButton.addEventListener('click', () => { actionButton.addEventListener('click', () => {
alert('action: ' + promptData.action); alert('action: ' + promptData.action);
}); });
@ -155,6 +161,12 @@ class MessagesArea extends HTMLElement {
this.scrollToBottom(); this.scrollToBottom();
} }
addDivider() {
const divider = document.createElement('hr');
this.messages.appendChild(divider);
this.scrollToBottom();
}
flushAccumulatingMessage() { flushAccumulatingMessage() {
if (this.accumulatingMessageEl) { if (this.accumulatingMessageEl) {
// Collect all tokens in a full text // Collect all tokens in a full text