diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index b56452d8..9dae9335 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -490,5 +490,9 @@
"ollama_api_request_failed": {
"message": "Ollama API request failed",
"description": ""
+ },
+ "WaitingServerReponse": {
+ "message": "Waiting for the server response",
+ "description": ""
}
}
\ No newline at end of file
diff --git a/api_webchat/controller.js b/api_webchat/controller.js
index 5493143a..38993267 100644
--- a/api_webchat/controller.js
+++ b/api_webchat/controller.js
@@ -101,6 +101,7 @@ worker.onmessage = function(event) {
break;
case 'newToken':
messagesArea.handleNewToken(payload.token);
+ messageInput.setStatusMessage('Receiving data...');
break;
case 'tokensDone':
messagesArea.handleTokensDone(promptData);
diff --git a/api_webchat/index.html b/api_webchat/index.html
index 154e7957..7989868d 100644
--- a/api_webchat/index.html
+++ b/api_webchat/index.html
@@ -9,7 +9,7 @@
-
+
diff --git a/api_webchat/messageInput.js b/api_webchat/messageInput.js
index c9cbcce9..3228c558 100644
--- a/api_webchat/messageInput.js
+++ b/api_webchat/messageInput.js
@@ -56,6 +56,16 @@ messagesInputStyle .textContent = `
cursor: pointer;
border-radius: 10px;
}
+ #statusLogger{
+ font-size: 0.8rem;
+ position: absolute;
+ bottom: 1.5em;
+ right: 5em;
+ border: 1px solid lightgrey;
+ border-radius: 5px;
+ padding: 5px;
+ background: #212121;
+ }
@media (prefers-color-scheme: dark) {
#messageInputField {
background-color: #303030;
@@ -115,6 +125,12 @@ stopIcon.appendChild(stopRect);
stopButton.appendChild(stopIcon);
messageInputTemplate.content.appendChild(stopButton);
+const statusLogger = document.createElement('div');
+statusLogger.id = 'statusLogger';
+statusLogger.textContent = '';
+statusLogger.style.display = 'none';
+messageInputTemplate.content.appendChild(statusLogger);
+
class MessageInput extends HTMLElement {
model = '';
@@ -127,6 +143,7 @@ class MessageInput extends HTMLElement {
this._messageInputField = shadowRoot.querySelector('#messageInputField');
this._sendButton = shadowRoot.querySelector('#sendButton');
this._stopButton = shadowRoot.querySelector('#stopButton');
+ this._statusLogger = shadowRoot.querySelector('#statusLogger');
this._messageInputField.addEventListener('keydown', this._handleKeyDown.bind(this));
this._sendButton.addEventListener('click', this._handleClick.bind(this));
@@ -166,6 +183,20 @@ class MessageInput extends HTMLElement {
this._stopButton.setAttribute('disabled', 'disabled');
this._stopButton.style.display = 'none';
this._stopButton.title = browser.i18n.getMessage("chagtp_api_send_button") + ": " + this.model;
+ this.hideStatusMessage();
+ this.setStatusMessage('');
+ }
+
+ setStatusMessage(message) {
+ this._statusLogger.textContent = message;
+ }
+
+ showStatusMessage() {
+ this._statusLogger.style.display = 'block';
+ }
+
+ hideStatusMessage() {
+ this._statusLogger.style.display = 'none';
}
_handleKeyDown(event) {
@@ -200,6 +231,8 @@ class MessageInput extends HTMLElement {
if (this.messagesAreaComponent) {
this.messagesAreaComponent.appendUserMessage(messageContent);
}
+ this.setStatusMessage(browser.i18n.getMessage('WaitingServerReponse') + '...');
+ this.showStatusMessage();
this.worker.postMessage({ type: 'chatMessage', message: messageContent });
}