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. 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') {