v29.1.33 is released

Author: pipeline

config.json

@@ -131,7 +131,6 @@
 		"dropdown-button",
 		"virtualize",
 		"textarea",
-		"keytip",
-		null
+		"keytip"
 	]
 }

index.html

@@ -393,7 +393,7 @@ <h1 class='sb-sample-text' role="heading" aria-level="1"></h1>
                     <div class="sb-footer">
                         <div class="sb-footer-left">
                             <div class="sb-footer-links">
-                                <a href="http://ej2.syncfusion.com/react/documentation" target="_blank" aria-label="Documentation - Opens in a new window">
+                                <a href="http://ej2.syncfusion.com/react/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/react-js2" target="_blank" aria-label="Forum - Opens in a new window">
@@ -445,6 +445,12 @@ <h1 class='sb-sample-text' role="heading" aria-level="1"></h1>
         </div>
 
     </div>
+    <script>
+        // Hide the "FREE TRIAL" button on localhost
+        if (window.location.hostname === "localhost") {
+            document.getElementById('download-now').style.display = 'none';
+        }
+    </script>
     <script id="template" type="text/x-template">
         <a href="${link}" target="_blank">${name}</a>
     </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-react-samples",
-  "version": "28.1.33",
+  "version": "29.1.33",
   "description": "Examples of React UI Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",

sampleName.json

@@ -826,27 +826,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",
             "tool-bar": "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",
@@ -913,6 +923,7 @@
         "Samples": {
             "default":"Default Functionalities",
             "custom-views": "Custom Views",
+            "streaming": "Streaming Response",
             "template": "Template",
 	        "dialog": "Dialog"
         }
@@ -921,6 +932,7 @@
         "ControlName": "Chat UI",
         "Samples": {
             "default":"Default Functionalities",
+            "loadOn-demand": "Load On-demand",
             "template": "Template",
 	        "api": "API",
             "chat-integration": "Use Case"
@@ -1102,7 +1114,7 @@
             "default": "Default Functionalities",
 	   		"formula": "Formula",
             "protect-sheet": "Protect Sheet",
-			"freeze-panes": "Freeze Panes",
+			"freeze-pane": "Freeze Panes",
 			"data-validation": "Data Validation",
 			"hyperlink": "Hyperlink",
 			"cell-data-binding": "Cell Data Binding",
@@ -1114,7 +1126,7 @@
 			"chart": "Chart",
 			"image": "Image",
  			"cell-template": "Cell Template",
-			"note": "Note",
+			"notes": "Note",
 			"print": "Print"
         }
     },
@@ -1312,5 +1324,13 @@
             "file-upload-with-forms": "Form Support",
             "custom-drop-area": "Custom Drop Area"
         }
+    },
+    "speech-to-text": {
+        "ControlName": "Speech TocText",
+        "Samples": {
+            "default": "Default Functionalities",
+            "use-case": "Use Case",
+            "integration": "Ai-Assistview"
+        }
     }
 }

src/ai-assistview/config.tsx

@@ -25,6 +25,20 @@ export const AIAssistViewSampleOrder: Object = [
       { 'displayName': 'promptResponseData.json', 'path': 'src/ai-assistview/promptResponseData.json' }
     ]
   },
+  { 'path': 'ai-assistview/streaming',
+    'component': 'Streaming',
+    'name': 'Streaming Response',
+    'description':'Showcases the AI AssistView component in React, highlighting the streaming support how response is updated in chunks.',
+    'order': '01',
+    'type': 'new',
+    'category': 'AI AssistView',
+    'api':'{"AIAssitView": ["promptRequest", "promptSuggestions", "bannerTemplate", "toolbarSettings"] }',
+    'sourceFiles': [
+      { 'displayName': 'streaming.tsx', 'path': 'src/ai-assistview/streaming.tsx' },
+      { 'displayName': 'streaming.jsx', 'path': 'src/ai-assistview/streaming.jsx' },
+      { 'displayName': 'promptResponseData.json', 'path': 'src/ai-assistview/promptResponseData.json' }
+    ]
+  },
   { 'path': 'ai-assistview/template',
     'component': 'Template',
     'name': 'Template',

src/ai-assistview/default.tsx

@@ -29,7 +29,7 @@ export class Default extends SampleBase<{}, {}> {
 
   assistInstance: AIAssistViewComponent;
 
-  bannerTemplate: `<div class="banner-content">
+  bannerTemplate: string = `<div class="banner-content">
     <div class="e-icons e-assistview-icon"></div>
     <h3>AI Assistance</h3>
     <i>To get started, provide input or choose a suggestion.</i>
@@ -50,7 +50,7 @@ export class Default extends SampleBase<{}, {}> {
       <div className='control-pane'>
         <div className="control-section">
             <div className="default-aiassistview"> 
-                <AIAssistViewComponent id="aiAssistView" bannerTemplate={this.bannerTemplate} promptSuggestions={this.suggestion} promptRequest={this.promptRequest} ref={aiassistView => (this.assistInstance = aiassistView)}></AIAssistViewComponent>
+                <AIAssistViewComponent id="aiAssistView" toolbarSettings={this.assistViewToolbarSettings} bannerTemplate={this.bannerTemplate} promptSuggestions={this.suggestion} promptRequest={this.promptRequest} ref={aiassistView => (this.assistInstance = aiassistView)}></AIAssistViewComponent>
             </div>
         </div>
 

src/ai-assistview/promptResponseData.json

@@ -36,5 +36,44 @@
     "defaultSuggestions": [
         "How do I set daily goals in my work day?",
         "Steps to publish a e-book with marketing strategy"
+    ],
+    "streamingSuggestions": [
+        "What are the main features of the AI AssistView component?",
+        "What is Markdown and how is it used?"
+    ],
+    "streamingPromptResponseData": [
+        {
+            "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;\n\nclass Program\n{\n    static bool IsPrime(int n)\n    {\n        if (n <= 1) return false;\n        for (int i = 2; i <= Math.Sqrt(n); i++)\n            if (n % i == 0) return false;\n        return true;\n    }\n\n    static void Main()\n    {\n        Console.WriteLine(IsPrime(11)); // True\n    }\n}\n</code></pre>"
+        },
+        {
+            "prompt": "Generate Fibonacci sequence C# example?",
+            "response": "<pre><code class=\"csharp language-csharp\">using System;\n\nclass Program\n{\n    static void Fibonacci(int n)\n    {\n        int a = 0, b = 1, c;\n        for (int i = 0; i < n; i++)\n        {\n            Console.Write(a + \" \");\n            c = a + b;\n            a = b;\n            b = c;\n        }\n    }\n\n    static void Main()\n    {\n        Fibonacci(10); // 0 1 1 2 3 5 8 13 21 34\n    }\n}\n</code></pre>"
+        }
     ]
 }

src/ai-assistview/streaming-functional.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { updateSampleSection } from '../common/sample-base';
+import './streaming.css';
+import { AIAssistViewComponent, PromptRequestEventArgs, ToolbarSettingsModel } from '@syncfusion/ej2-react-interactive-chat';
+import * as data from './promptResponseData.json';
+import * as Marked from 'marked';
+
+const Streaming = () => {
+    useEffect(() => {
+        updateSampleSection();
+    }, []);
+
+    const streamingAIAssistView = useRef<AIAssistViewComponent>(null);
+    let stopStreaming: boolean = false;
+    const bannerTemplate: string = `<div class="banner-content">
+        <div class="e-icons e-assistview-icon"></div>
+        <h3>AI Assistance</h3>
+        <i>To get started, provide input or choose a suggestion.</i>
+    </div>`;
+
+    const prompts: any[] = data["streamingPromptResponseData"];
+
+    const suggestion: string[] = data["streamingSuggestions"];
+
+    const toolbarItemClicked = (args) => {
+        if (args.item.iconCss === 'e-icons e-refresh') {
+            streamingAIAssistView.current.prompts = [];
+            streamingAIAssistView.current.promptSuggestions = suggestion;
+        }
+    };
+
+    const assistViewToolbarSettings: ToolbarSettingsModel = {
+        items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }],
+        itemClicked: toolbarItemClicked
+    };
+
+    const handleStopResponse = () => {
+        stopStreaming = true
+    }
+
+    const onPromptRequest = (args: PromptRequestEventArgs) => {
+        let lastResponse: string = "";
+        let streamingResponse: any = prompts.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 = 10;
+        async function streamResponse(response) {
+            let i = 0;
+            const responseLength = response.length;
+            while (i < responseLength && !stopStreaming) {
+                lastResponse += response[i];
+                i++;
+                if (i % responseUpdateRate === 0 || i === responseLength) {
+                    const htmlResponse = Marked.marked(lastResponse);
+                    streamingAIAssistView.current.addPromptResponse(htmlResponse, i === responseLength);
+                    streamingAIAssistView.current.scrollToBottom();
+                }
+                await new Promise(resolve => setTimeout(resolve, 15)); // Delay before the next chunk
+            }
+            streamingAIAssistView.current.promptSuggestions = streamingResponse?.suggestions || suggestion;
+        }
+        if (streamingResponse) {
+            stopStreaming = false;
+            streamResponse(streamingResponse.response);
+        } else {
+            streamingAIAssistView.current.addPromptResponse(defaultResponse, true);
+            streamingAIAssistView.current.promptSuggestions = suggestion;
+        }
+    }
+
+    return (
+        <div className='control-pane'>
+            <div className="control-section">
+                <div className="stream-aiassistview">
+                    <AIAssistViewComponent id="streamAssistView" ref={streamingAIAssistView} promptSuggestions={suggestion} toolbarSettings={assistViewToolbarSettings} promptRequest={onPromptRequest} stopRespondingClick={handleStopResponse} bannerTemplate={bannerTemplate}></AIAssistViewComponent>
+                </div>
+            </div>
+
+            <div id="action-description">
+                <p>
+                This sample demonstrates the streaming response update in the <code>AI AssistView</code> component.
+                </p>
+            </div>
+            <div id="description">
+                <p> 
+                    In this example, the <code>AI AssistView</code> component 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>
+        </div>
+    );
+}
+export default Streaming;

src/ai-assistview/streaming.css

@@ -0,0 +1,23 @@
+.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%;
+    }
+}