Merge pull request #1278 from zachlasiuk/demo-functionality

TEMPLATE: added updated LLM demo timeout and char limit

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. 
 

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 {

themes/arm-design-system-hugo-theme/layouts/partials/demo-components/demo--kubectl.html

@@ -45,7 +45,7 @@ <h2>Demo</h2>
                             <p id="reset-demo-txt">Reset chat</p>
                         </div>
                         <div class="c-col">
-                            <ads-button id="submit-button" level="primary">Run</ads-button>
+                            <ads-button id="submit-button" level="primary"><i id="submit-icon" class="fa-solid fa-arrow-up"></i></ads-button>
                         </div>
                     </div>
             </div>

themes/arm-design-system-hugo-theme/layouts/partials/demo-components/llm-chatbot/demo-stats--llm-chatbot.html

@@ -26,7 +26,7 @@ <h2>Arm KleidiAI Demo</h2>
                 <div id="demo-actions">
                     <div class="c-row">
                         <div class="c-col" id="input-and-submit">
-                            <textarea id="user-input-for-demo" placeholder="Enter message" tabindex="1" rows="1"></textarea>
+                            <textarea id="user-input-for-demo" placeholder="Enter message" maxlength="10000" tabindex="1" rows="1"></textarea>
                             <ads-button id="submit-button" level="primary" tabindex="2" disabled>
                                 <i id="submit-icon" class="fa-solid fa-spinner fa-spin"></i>
                             </ads-button>

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