From 765647b0039390b9981718ff80f50b9837dee382 Mon Sep 17 00:00:00 2001 From: Zach Lasiuk <18421034+zachlasiuk@users.noreply.github.com> Date: Wed, 18 Sep 2024 09:23:39 -0500 Subject: [PATCH 1/2] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 929b2b0485..fb65046964 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ The Arm Learning Paths website is available at https://learn.arm.com/ -# Arm Learning Paths +# Arm Learning Paths This repository contains the source files for the Arm Learning Paths static website, serving learning based technical content for Arm software developers. From 081bec8a2416c9aeb5ea5c589a8ebde063f63641 Mon Sep 17 00:00:00 2001 From: Zach Lasiuk Date: Fri, 27 Sep 2024 10:31:39 -0500 Subject: [PATCH 2/2] added updated timeout and char limit --- assets/css/demo.css | 7 +++ .../demo-components/demo--kubectl.html | 2 +- .../llm-chatbot/demo-stats--llm-chatbot.html | 2 +- .../llm-chatbot/javascript--llm-chatbot.html | 49 ++++++++++++++++--- 4 files changed, 51 insertions(+), 9 deletions(-) diff --git a/assets/css/demo.css b/assets/css/demo.css index fc9ef0340d..12cd344e37 100644 --- a/assets/css/demo.css +++ b/assets/css/demo.css @@ -245,6 +245,13 @@ white-space: pre-wrap; } +.char-limit-mesg { + font-size: 14px!important; + margin-top: 4px; + font-style: italic; +} + + #notification-popup { diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/demo--kubectl.html b/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/demo--kubectl.html index a38b0ef363..463301e192 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/demo--kubectl.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/demo--kubectl.html @@ -45,7 +45,7 @@

Demo

Reset chat

- Run +
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/demo-stats--llm-chatbot.html b/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/demo-stats--llm-chatbot.html index b8eefb0f77..d7fe1f9d93 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/demo-stats--llm-chatbot.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/demo-stats--llm-chatbot.html @@ -26,7 +26,7 @@

Arm KleidiAI Demo

- + diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/javascript--llm-chatbot.html b/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/javascript--llm-chatbot.html index 5b68d478f0..e1068ae189 100644 --- a/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/javascript--llm-chatbot.html +++ b/themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/javascript--llm-chatbot.html @@ -320,16 +320,28 @@ // Add the user's input to the chat history, and spawn a new thinking chatbot response placeholder function addUserMessage_andChatbotPlaceholder(user_input) { const all_messages_div = document.getElementById('all-messages-div'); - + const text_area = document.querySelector('#user-input-for-demo'); + const user_div = document.createElement('div'); user_div.classList.add('user-message'); const user_span_for_message = document.createElement('span'); user_div.appendChild(user_span_for_message); - user_span_for_message.textContent = user_input; + + if (Array.from(user_input).length >= text_area.maxLength) { + const user_text_limit_update = document.createElement('div'); + user_text_limit_update.classList.add('char-limit-mesg'); + user_div.appendChild(user_text_limit_update); + user_text_limit_update.textContent = "Char limit reached - truncated to 10,000."; + } + + all_messages_div.insertBefore(user_div, all_messages_div.firstChild); + + + const chatbot_div = document.createElement('div'); chatbot_div.classList.add('chatbot-message'); @@ -397,6 +409,16 @@ } +function tellUserServerIsThinking() { + document.getElementById('all_messages_div') + const current_chatbot_message = document.querySelector("#all-messages-div .chatbot-message"); + if (current_chatbot_message) { + const ads_loader_element = current_chatbot_message.querySelector("span ads-loader"); + + ads_loader_element.setAttribute('label','Still thinking, one moment...') + } +} + // Event listener additions to key demo components document.addEventListener("DOMContentLoaded", function() { @@ -442,11 +464,10 @@ // User enters any text in textinput text_area.addEventListener('input', function() { - //this.style.height = 'auto'; - //this.style.height = (this.scrollHeight > this.clientHeight ? this.scrollHeight : this.clientHeight) + 'px'; adjustInputHeight(); toggleButton(); // enable input button }); + // User hits enter in textinput text_area.addEventListener('keydown', function(event) { if (event.key === 'Enter') { @@ -541,10 +562,23 @@ // Set timeout const controller = new AbortController(); - let timeout; - function resetTimeout() { + let timeout; // for server timeout + let tell_user_timeout; // to inform user the UI is thinking + const timeout_duration = 5000; // 5 seconds by default + const tell_user_timeout_duration = 6000; // 6 seconds by default + function resetTimeout(duration = timeout_duration) { clearTimeout(timeout); - timeout = setTimeout(() => controller.abort(), 5000); // Adjust the timeout duration as needed + clearTimeout(tell_user_timeout); + + + timeout = setTimeout(() => controller.abort(), duration); + + if (duration > 5000) { + tell_user_timeout = setTimeout(() => { + tellUserServerIsThinking(); + }, tell_user_timeout_duration); // trigger at 6 seconds + } + } resetTimeout(); // Start the timeout right before sending @@ -592,6 +626,7 @@ } else if (return_json.value == 'STREAM_STARTING') { hidePopup(); + resetTimeout(15000); // Set timeout to 15 seconds } } else if (return_json.message_type === 'chunk') {