982586: added the streaming response

Author: TamilRamGanesan-SF5080

ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/razor

@@ -19,7 +19,7 @@
         <i>To get started, provide input or choose a suggestion.</i>
     </div>
 </script>
-
+<script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
 <script>
 
     var assistObj = null;
@@ -50,10 +50,23 @@
                     throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                 }
 
-                responseText = await response.json();
-                assistObj.addPromptResponse(marked.parse(responseText));
+                const data = await response.json();
+                responseText = data; // Adjust to data.response if the JSON is { response: "text" }
+                let current = '';
+                let i = 0;
+                const typingSpeed = 15; // ms per character; adjust as needed
+                const interval = setInterval(() => {
+                    if (i < responseText.length) {
+                        current += responseText.charAt(i);
+                        assistObj.addPromptResponse(marked.parse(current), false);
+                        i++;
+                    } else {
+                        assistObj.addPromptResponse(marked.parse(current), true);
+                        clearInterval(interval);
+                    }
+                }, typingSpeed);
             } catch (error) {
-                assistObj.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please try again later.');
+                assistObj.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please try again later.', true);
             }
         }, 2000); // Match the 2000ms delay from the reference sample
     }

ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper

@@ -1,17 +1,13 @@
 @model AssistViewDemo.Controllers.IndexViewModel
 @{
-    ViewData["Title"] = "AI Assistance with Ollama";
+    ViewData["Title"] = "AI Assistance";
 }
 
-<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/28.1.41/material.css" />
-<script src="https://cdn.syncfusion.com/ej2/28.1.41/dist/ej2.min.js"></script>
-
 <div class="aiassist-container" style="height: 350px; width: 650px;">
-    <ejs-aiassistview id="aiAssistView" bannerTemplate="#bannerContent" promptSuggestions="@Model.PromptSuggestionData" promptRequest="onPromptRequest" created="onCreated">
+    <ejs-aiassistview id="aiAssistView" bannerTemplate="#bannerContent" promptSuggestions="@Model.PromptSuggestionData" promptRequest="onPromptRequest" created="onCreated" stopRespondingClick="handleStopResponse">
         <e-aiassistview-toolbarsettings items="@Model.Items" itemClicked="toolbarItemClicked"></e-aiassistview-toolbarsettings>
     </ejs-aiassistview>
 </div>
-
 <script id="bannerContent" type="text/x-jsrender">
     <div class="banner-content">
         <div class="e-icons e-assistview-icon"></div>
@@ -28,14 +24,16 @@
     function onCreated() {
         assistObj = this;
     }
-
+    var stopStreaming = false;
+    function handleStopResponse() {
+        stopStreaming = true;
+    }
     function toolbarItemClicked(args) {
-            if (args.item.iconCss === 'e-icons e-refresh') {
-                this.prompts = [];
-                this.promptSuggestions = suggestions;
-            }
+        if (args.item.iconCss === 'e-icons e-refresh') {
+            this.prompts = [];
+            this.promptSuggestions = suggestions;
         }
-
+    }
     function onPromptRequest(args) {
         setTimeout(async () => {
             let responseText = '';
@@ -45,20 +43,30 @@
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ prompt: args.prompt })
                 });
-
                 if (!response.ok) {
                     throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                 }
-
-                responseText = await response.json();
-                assistObj.addPromptResponse(marked.parse(responseText));
+                const data = await response.json();
+                responseText = data; // Adjust to data.response if the JSON is { response: "text" }
+                let current = '';
+                let i = 0;
+                const typingSpeed = 15; // ms per character; adjust as needed
+                const interval = setInterval(() => {
+                    if (i < responseText.length && !stopStreaming) {
+                        current += responseText.charAt(i);
+                        assistObj.addPromptResponse(marked.parse(current), false);
+                        i++;
+                    } else {
+                        assistObj.addPromptResponse(marked.parse(current), true);
+                        clearInterval(interval);
+                    }
+                }, typingSpeed);
             } catch (error) {
-                assistObj.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please try again later.');
+                assistObj.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please try again later.', true);
             }
         }, 2000); // Match the 2000ms delay from the reference sample
     }
 </script>
-
 <style>
     .aiassist-container .e-view-container {
         margin: auto;