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 }); }