v29.1.33 is released

Author: pipeline

config.json

@@ -181,7 +181,6 @@
 		"textarea",
 		"aiassistview",
 		"ai",
-		"assistview",
-		null
+		"assistview"
 	]
 }

gulpfile.js

@@ -542,4 +542,4 @@ gulp.task('serve', function(done) {
         };
         bs.init(options, done);
     });
-});
+});

index.html

@@ -455,7 +455,7 @@ <h1 class='sb-sample-text' aria-level="1" role="heading">Data Grid</h1>
                 <div class="sb-footer">
                     <div class="sb-footer-left">
                         <div class="sb-footer-links">
-                            <a href="https://ej2.syncfusion.com/documentation/" target="_blank" aria-label="Documentation (Opens in a new window)">
+                            <a href="https://ej2.syncfusion.com/documentation/introduction" target="_blank" aria-label="Documentation (Opens in a new window)">
                                 <div class="sb-footer-link">Documentation</div>
                             </a>
                             <a href="https://www.syncfusion.com/forums/essential-js2" target="_blank" aria-label="Forum (Opens in a new window)">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-samples",
-  "version": "28.1.33",
+  "version": "29.1.33",
   "description": "Samples for Syncfusion Essential JS 2",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",

sampleOrder.json

@@ -639,6 +639,7 @@
         "Samples": {
             "default": "Default Functionalities",
             "custom-views": "Custom Views",
+            "streaming": "Streaming Response",
             "template": "Template",
             "dialog": "Dialog"
         }
@@ -887,27 +888,37 @@
     "pivot-table": {
         "ControlName": "Pivot Table",
         "Samples": {
+            "overview": "Overview",
             "default": "Default Functionalities",
+            "classic-layout": "Classic Layout",
+            "live-data": "Live Data",
             "local": "Local Data",
             "remote": "Remote Data",
+            "server-side-aggregation": "Server-Side Aggregation",
             "olap": "OLAP",
+            "performance": "Performance",
             "pivot-chart": "Pivot Chart",
             "external-binding": "External Binding",
+            "heatmap": "HeatMap",
             "field-list": "Field List",
             "grouping-bar": "Grouping Bar",
             "conditional-formatting": "Conditional Formatting",
             "selection": "Selection",
+            "drill-down": "Drill Down",
             "summary-customization": "Show/Hide Totals",
             "grouping": "Grouping",
             "toolbar": "Toolbar",
+            "keyboard-navigation": "Keyboard Navigation",
             "calculated-field": "Calculated Field",
             "aggregation": "Aggregation",
             "sorting": "Default Sorting",
+            "custom-sorting": "Custom Sorting",
             "value-sorting": "Value Sorting",
             "filtering": "Default Filtering",
             "label-filtering": "Label Filtering",
             "value-filtering": "Value Filtering",
             "virtual-scrolling": "Virtual Scrolling",
+            "paging": "Paging",
             "cell-template": "Cell Template",
             "drill-through": "Drill Through",
             "editing": "Editing",
@@ -1155,12 +1166,15 @@
         "Samples": {
             "default": "Default Functionalities",
             "formula": "Formula",
+	    "protect-sheet": "Protect Sheet",
             "cell-data-binding": "Cell Data Binding",
             "remote-data-binding": "Remote Data Binding",
             "cell-formatting": "Cell Formatting",
             "number-formatting": "Number Formatting",
             "sorting-and-filtering": "Sorting and Filtering",
-            "cell-template": "Cell Template"
+            "cell-template": "Cell Template",
+	    "notes": "Note",
+	    "print": "Print"
         }
     },
     "speed-dial": {
@@ -1383,9 +1397,18 @@
         "ControlName": "Chat UI",
         "Samples": {
             "default": "Default Functionalities",
+            "loadOn-demand": "Load On-demand",
             "template": "Template",
             "api": "API",
             "chat-integration": "Use Case"
         }
+    },
+    "speech-to-text": {
+        "ControlName": "Speech To Text",
+        "Samples": {
+            "default": "Default Functionalities",
+            "use-case": "Use Case",
+            "integration": "Assist View"
+        }
     }
 }

src/ai-assistview/promptResponseData.ts

@@ -30,4 +30,83 @@ export let defaultPromptResponseData: any = [
 export let defaultSuggestions: any = [
     "How do I set daily goals in my work day?", 
     "Steps to publish a e-book with marketing strategy"
+];
+
+export let streamingData: any = [
+    {
+        prompt: "What are the main features of the AI AssistView component?",
+        response: "The AI AssistView component offers several powerful features that enhance user interaction:\n\n- **Customizable Views:** Allows for custom templates to be used for banners, prompts, responses, and suggestions.\n- **Streaming Responses:** Provides real-time feedback as data is processed, enhancing immediacy and user engagement.\n- **Interactive Toolbar:** Easily integrates custom toolbar items, such as buttons and inputs, enhancing functionality.\n- **Seamless Integration:** Connects with AI services to provide advanced processing and intelligent responses.",
+        suggestions: [ "How can I customize the appearance of AI AssistView?", "What are the benefits of using Markdown?" ]
+    },
+    {
+        prompt: "How can I customize the appearance of AI AssistView?",
+        response: "Customizing AI AssistView enables you to tailor the look and functionality to suit specific needs:\n\n- **Template Customization:** Modify templates for prompts, responses, and more.\n- **CSS Styling:** Apply custom styles to align with your application’s visual theme.\n- **Theme Support:** Utilize built-in themes or create your own for consistent styling.\n- **Banner and Toolbar Configurations:** Adjust content and tools for personalized UI experiences.",
+        suggestions: [ "What customization options are available in AI AssistView?", "Prime number checking C# example?" ]
+    },
+    {
+        prompt: "What is Markdown and how is it used?",
+        response: "Markdown is a straightforward syntax used primarily for formatting text documents:\n\n- **Headers:** Create headings with `#`, `##`, `###` for different levels.\n- **Emphasis:** Use `*text*` for italic and `**text**` for bold.\n- **Links and Images:** `[Link](URL)`, `![Alt Text](ImageURL)` to include links and images.\n- **Lists and Code Blocks:** Use `-` for lists and triple backticks ``` for code blocks.\n\nMarkdown’s simplicity and readability make it ideal for writing documentation.",
+        suggestions: [ "What are the benefits of using Markdown?", "What customization options are available in AI AssistView?" ]
+    },
+    {
+        prompt: "What customization options are available in AI AssistView?",
+        response: "AI AssistView provides extensive customization options for tailored user interactions:\n\n- **Templates:** Use `<PromptItemTemplate>`, `<ResponseItemTemplate>`, etc., for customized display.\n- **Custom Toolbar Items:** Add buttons and other controls via `AssistViewToolbar`.\n- **Dynamic Content:** Update content based on user actions or external events.\n- **Styling:** Full CSS support for styling individual components and layouts.",
+        suggestions: ["What are the main features of the AI AssistView component?", "Generate Fibonacci sequence C# example?"]
+    },
+    {
+        prompt: "What are the benefits of using Markdown?",
+        response: "Markdown provides several benefits, especially in documentation and writing:\n\n- **Ease of Use:** Its syntax is simple and quick to learn, increasing productivity.\n- **Readability:** Plain text format ensures content is easy to read and edit.\n- **Flexibility:** Can be converted to HTML, PDF, and other formats easily.\n- **Collaboration:** Widely supported in various tools for collaborative writing and documentation.",
+        suggestions: ["Prime number checking C# example?", "Generate Fibonacci sequence C# example?"]
+    },
+    {
+        prompt: "Prime number checking C# example?",
+        response: `<pre><code class=\"csharp language-csharp\">using System;
+
+        class Program
+        {
+            static bool IsPrime(int n)
+            {
+                if (n <= 1) return false;
+                for (int i = 2; i <= Math.Sqrt(n); i++)
+                    if (n % i == 0) return false;
+                return true;
+            }
+
+            static void Main()
+            {
+                Console.WriteLine(IsPrime(11)); // True
+            }
+        }
+        </code></pre>`
+    },
+    {
+        prompt: "Generate Fibonacci sequence C# example?",
+        response: `<pre><code class=\"csharp language-csharp\">using System;
+
+        class Program
+        {
+            static void Fibonacci(int n)
+            {
+                int a = 0, b = 1, c;
+                for (int i = 0; i < n; i++)
+                {
+                    Console.Write(a + \" \");
+                    c = a + b;
+                    a = b;
+                    b = c;
+                }
+            }
+
+            static void Main()
+            {
+                Fibonacci(10); // 0 1 1 2 3 5 8 13 21 34
+            }
+        }
+        </code></pre>`
+    }
+];
+
+export let streamingSuggestions: any = [
+    "What are the main features of the AI AssistView component?",
+    "What is Markdown and how is it used?"
 ];

src/ai-assistview/sample.json

@@ -3,6 +3,7 @@
     "directory": "ai-assistview",
     "category": "Interactive Chat",
     "ftName": "AIAssitView",
+    "type": "update",
     "samples": [
         {
             "url": "default",
@@ -28,6 +29,19 @@
                 { "displayName": "promptResponseData.ts", "path":"src/ai-assistview/promptResponseData.ts" }
             ]
         },
+        {
+            "url": "streaming",
+            "name": "Streaming Response",
+            "category": "AI AssistView",
+            "type": "new",
+            "api":{ "AIAssitView": ["promptRequest", "promptSuggestions", "bannerTemplate", "toolbarSettings"] },
+            "description": "Showcases the AiAssistView control with its streaming support.",
+            "sourceFiles": [
+                { "displayName": "streaming.ts", "path":"src/ai-assistview/streaming.ts" },
+                { "displayName": "streaming.html", "path":"src/ai-assistview/streaming.html" },
+                { "displayName": "promptResponseData.ts", "path":"src/ai-assistview/promptResponseData.ts" }   
+            ]
+        },
         {
             "url": "template",
             "name": "Template",

src/ai-assistview/streaming.html

@@ -0,0 +1,57 @@
+<div class="control-section">
+    <div class="stream-aiassistview"> 
+        <div id="streamAssistView"></div>
+    </div>
+</div>
+
+<script id="bannerContent" type="text/x-jsrender">
+    <div class="banner-content">
+        <div class="e-icons e-assistview-icon"></div>
+        <h3>AI Assistance</h3>
+        <i>
+            Update real-time responses with chunked streaming updates.
+        </i>
+    </div>
+</script>
+
+<style>
+
+    .stream-aiassistview {
+        height: 600px;
+        width: 60vw;
+        margin: 0 auto;
+    }
+    
+    .stream-aiassistview .banner-content .e-assistview-icon:before {
+        font-size: 35px;
+    }
+    
+    .stream-aiassistview .banner-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 330px;
+        text-align: center;
+    }
+    
+    @media only screen and (max-width: 750px) {
+        .stream-aiassistview {
+            width: 100%;
+        }
+    }
+    
+    </style>
+
+<div id="action-description">
+    <p>
+        This sample demonstrates the streaming response update in the <code>AI AssistView</code> control.
+    </p>
+</div>
+<div id="description">
+    <p> In this example, the <code>AI AssistView</code> control dynamically updates responses in a streaming manner using the <code>addPromptResponse</code> method, while the <code>scrollToBottom</code> method ensures automatic scrolling. The <code>bannerTemplate</code> allows customization of the banner content, and <code>toolbarSettings</code> enables custom toolbar items, including a right-aligned Refresh button. Additionally, <code>promptSuggestions</code> offers AI-generated prompt suggestions, while <code>promptRequest</code> processes prompt requests when triggered.   
+    </p> 
+    <p>   
+      This implementation provides an interactive AI chat experience with real-time streaming updates, enhanced by Markdown-to-HTML conversion using the <code>Marked</code> plugin.   
+   </p>
+</div>
+

src/ai-assistview/streaming.ts

@@ -0,0 +1,65 @@
+import { loadCultureFiles } from '../common/culture-loader';
+import { AIAssistView, PromptRequestEventArgs, ToolbarItemClickedEventArgs } from "@syncfusion/ej2-interactive-chat";
+import { streamingSuggestions, streamingData } from './promptResponseData';
+import * as Marked from 'marked';
+
+/**
+ * streaming sample
+ */
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+
+    let stopStreaming: boolean = false;
+    let streamingAIAssistView: AIAssistView = new AIAssistView({
+        promptSuggestions: streamingSuggestions,
+        promptRequest: onPromptRequest,
+        bannerTemplate: "#bannerContent",
+        toolbarSettings: {
+            items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }],
+            itemClicked: toolbarItemClicked
+        },
+        stopRespondingClick: handleStopResponse
+    });
+    streamingAIAssistView.appendTo('#streamAssistView');
+
+    function handleStopResponse(): void {
+        stopStreaming = true;
+    }
+    function onPromptRequest(args: PromptRequestEventArgs) {
+        let lastResponse: string = "";
+        let streamingResponse: any = streamingData.find((data: any) => data.prompt === args.prompt);
+        const defaultResponse = "For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+        const responseUpdateRate: number = 10; // Update scroll and streaming response every 10 characters
+        async function streamResponse(response: string) {
+            let i = 0;
+            const responseLength: number = response.length;
+            while (i < responseLength && !stopStreaming) {
+                lastResponse += response[i];
+                i++;
+                if (i % responseUpdateRate === 0 || i === responseLength) {
+                    const htmlResponse: string = Marked.marked(lastResponse);
+                    streamingAIAssistView.addPromptResponse(htmlResponse, i === responseLength);
+                    streamingAIAssistView.scrollToBottom();
+                }
+                await new Promise(resolve => setTimeout(resolve, 15)); // Delay before the next chunk
+            }
+            streamingAIAssistView.promptSuggestions = streamingResponse?.suggestions || streamingSuggestions;
+        }
+    
+        if (streamingResponse) {
+            stopStreaming = false;
+            streamResponse(streamingResponse.response);
+        } else {
+            streamingAIAssistView.addPromptResponse(defaultResponse, true);
+            streamingAIAssistView.promptSuggestions = streamingSuggestions;
+        }
+    }
+
+    function toolbarItemClicked(args: ToolbarItemClickedEventArgs) {
+        if (args.item.iconCss === 'e-icons e-refresh') {
+            streamingAIAssistView.prompts = [];
+            streamingAIAssistView.promptSuggestions = streamingSuggestions;
+        }
+    }
+};

src/ai-assistview/template.html

@@ -45,6 +45,12 @@ <h3><span class="e-icons e-assistview-icon"></span>AI Assistance</h3>
     .response-header .e-assistview-icon:before {
         margin-right: 10px;
     }
+    
+    .template-aiassistview .e-rtl .banner-content .e-assistview-icon:before,
+    .template-aiassistview .e-rtl .responseItemContent .e-assistview-icon:before
+    {
+        margin-left: 10px;
+    }
 
     .template-aiassistview .banner-content {
         display: flex;