-
+<<<<<<< HEAD
- 2025 Volume 3 - 31.* +======= +
- 2025 Volume 3 - 31.* +>>>>>>> remotes/origin/development
- 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.* diff --git a/ej2-react/Release-notes/31.2.2.md b/ej2-react/Release-notes/31.2.2.md new file mode 100644 index 000000000..295aa9c87 --- /dev/null +++ b/ej2-react/Release-notes/31.2.2.md @@ -0,0 +1,97 @@ +--- +title: Essential Studio for React Release Notes +description: Learn here about the controls in the Essential Studio for React 2025 Volume 2 SP Release - Release Notes +platform: ej2-react +documentation: ug +--- + +# Essential Studio for React - v31.2.2 Release Notes + +{% include release-info.html date="October 14, 2025" version="v31.2.2" passed="63079" failed="0" %} + +{% directory path: _includes/release-notes/v31.2.2 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | +| AI Assist View | 431 | 431 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 168 | 168 | 0 | All Passed | +| Button | 144 | 144 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 4744 | 4744 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 139 | 139 | 0 | All Passed | +| Common | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 3662 | 3662 | 0 | All Passed | +| Date Picker | 426 | 426 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | +| Date Time Picker | 324 | 324 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 193 | 193 | 0 | All Passed | +| Dropdown Tree | 105 | 105 | 0 | All Passed | +| File Manager | 2187 | 2187 | 0 | All Passed | +| Floating Action Button | 132 | 132 | 0 | All Passed | +| Gantt | 3515 | 3515 | 0 | All Passed | +| HeatMap Chart | 635 | 635 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 642 | 642 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 426 | 426 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1368 | 1368 | 0 | All Passed | +| Mention | 35 | 35 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 417 | 417 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5303 | 5303 | 0 | All Passed | +| Progress Bar | 81 | 81 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 623 | 623 | 0 | All Passed | +| Rich Text Editor | 5095 | 5095 | 0 | All Passed | +| schedule | 4608 | 4608 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 58 | 58 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | +| Split Button | 144 | 144 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 54 | 54 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3786 | 3786 | 0 | All Passed | +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md index c14740f76..2504fe1f6 100644 --- a/ej2-react/ai-assistview/ai-integrations/gemini-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/gemini-integration.md @@ -45,7 +45,11 @@ npm install @google/generative-ai ## Generate API Key +<<<<<<< HEAD 1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account. +======= +1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your google account. If you don’t have one, create a new account. +>>>>>>> remotes/origin/development 2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard. @@ -88,4 +92,8 @@ npm start ``` +<<<<<<< HEAD Open the hosted link to interact with the Gemini AI for dynamic response. +======= +Open the hosted link to interact with the Gemini AI for dynamic response +>>>>>>> remotes/origin/development diff --git a/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md new file mode 100644 index 000000000..cb51f7cdf --- /dev/null +++ b/ej2-react/ai-assistview/ai-integrations/ollama-llm-integration.md @@ -0,0 +1,113 @@ +--- +layout: post +title: LLM Model With React AI AssistView component | Syncfusion +description: Checkout and learn about Integration of LLM Model With React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + +# LLM via Ollama With AI AssistView component + +The Syncfusion AI AssistView supports integration with [LLM via Ollama](https://ollama.com), enabling advanced conversational AI features in your applications. The component acts as a UI for a support bot, where user prompts are sent to the selected AI service via API calls. + +## Prerequisites + +* Requires `Node.js` (v16 or higher) and `npm`. +* [Ollama](https://ollama.com) application should be installed to run and manage LLM models locally. +* Syncfusion AI AssistView for React `@syncfusion/ej2-react-interactive-chat` installed in your react project. + +## Step 1: Getting Started with the AI AssistView component + +Before integrating LLM model, ensure that the Syncfusion AI AssistView component is correctly rendered in your application: + +[ React Getting Started Guide](../getting-started) + +## Step 2: Install Dependencies + +* Install the Syncfusion AI AssistView in your project + +```bash + +npm install @syncfusion/ej2-react-interactive-chat --save + +``` + +* Download and install `Ollama` based on your operating system: + +{% tabs %} +{% highlight ts tabtitle="Windows" %} + +1. Visit [Windows](https://ollama.com/download) +2. Click `Download for Windows` to get the `.exe installer`. +3. Run `OllamaSetup.exe` and follow the wizard to install. + +{% endhighlight %} + +{% highlight ts tabtitle="MAC" %} + +1. Visit [macOS](https://ollama.com/download/mac) +2. Click `Download for macOS` to get `.dmg file` +3. Install it by following the wizard. + +{% endhighlight %} + +{% highlight ts tabtitle="Linux" %} + +1. Visit [Linux](https://ollama.com/download/linux) +2. Run the below command to install Ollama in your system + +```bash + +curl -fsSL https://ollama.com/install.sh | sh + +``` + +{% endhighlight %} +{% endtabs %} + +## Step 3: Install and Run an Ollama Model + +1. Download and run a model using the following command. Replace `deepseek-r1` with your preferred model (e.g., `llama3`, `phi4`). See the [Ollama model](https://ollama.com/search) library for available models + +```bash + +ollama run deepseek-r1 + +``` + +2. Once the model download is complete, start the Ollama server to make the model accessible: + +```bash + +ollama serve + +``` + +## Step 4: Configure AI AssistView in React + +Create `src/App.js` to connect the Syncfusion AI AssistView to the LLM model: + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/llm-model" %} + +## Step 5: Run and Test + +Run the application in the browser using the following command. + +```bash + +npm start + +``` + +Open the hosted link to interact with your AI model where you can enter prompts and receive responses from the Ollama model. diff --git a/ej2-react/ai-assistview/ai-integrations/openai-integration.md b/ej2-react/ai-assistview/ai-integrations/openai-integration.md index d98a52a70..107d97e66 100644 --- a/ej2-react/ai-assistview/ai-integrations/openai-integration.md +++ b/ej2-react/ai-assistview/ai-integrations/openai-integration.md @@ -15,7 +15,11 @@ The Syncfusion AI AssistView supports integration with [Azure Open AI](https://m ## Getting Started with the AI AssistView component +<<<<<<< HEAD Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView component is correctly rendered in your React app: +======= +Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView Component is correctly rendered in your React app: +>>>>>>> remotes/origin/development [React Getting Started Guide](../getting-started) diff --git a/ej2-react/ai-assistview/speech/speech-to-text.md b/ej2-react/ai-assistview/speech/speech-to-text.md new file mode 100644 index 000000000..a26a0b39f --- /dev/null +++ b/ej2-react/ai-assistview/speech/speech-to-text.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Speech-to-Text With React AI AssistView component | Syncfusion +description: Checkout and learn about configuration of Speech-to-Text With Azure OpenAI in React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + +# Speech-to-Text in React AI AssistView + +The Syncfusion React AI AssistView component supports `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API), enabling conversion of spoken words into text using the device's microphone. + +## Prerequisites + +Before integrating `Speech-to-Text`, ensure the following: + +1. The Syncfusion AI AssistView component is properly set up in your React application. + - [React Getting Started Guide](../getting-started) + +2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With React AI AssistView component](../ai-integrations/openai-integration.md) + +## Configure Speech-to-Text + +To enable Speech-to-Text functionality, modify the `src/App.jsx` or `src/App.tsx` file to incorporate the Web Speech API. The [SpeechToText](https://ej2.syncfusion.com/react/documentation/speech-to-text/getting-started) component listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/ai-assistview/speech/stt/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/ai-assistview/speech/stt/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/speech/stt" %} + +## See Also + +* [Text-to-Speech](./text-to-speech.md) diff --git a/ej2-react/ai-assistview/speech/text-to-speech.md b/ej2-react/ai-assistview/speech/text-to-speech.md new file mode 100644 index 000000000..002829f42 --- /dev/null +++ b/ej2-react/ai-assistview/speech/text-to-speech.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Text-to-Speech With React AI AssistView component | Syncfusion +description: Checkout and learn about configuration of Text-to-Speech With Azure OpenAI in React AI AssistView component of Syncfusion Essential JS 2 and more details. +platform: ej2-react +control: AI AssistView +documentation: ug +domainurl: ##DomainURL## +--- + +# Text-to-Speech in React AI AssistView + +The Syncfusion React AI AssistView component supports `Text-to-Speech` (TTS) functionality using the browser's Web Speech API specifically using the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface to convert AI-generated response into spoken audio. + +## Prerequisites + +Before integrating `Text-to-Speech`, ensure the following: + +1. The Syncfusion AI AssistView component is properly set up in your React application. + - [React Getting Started Guide](../getting-started) + +2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With React AI AssistView component](../ai-integrations/openai-integration.md) + +## Configure Text-to-Speech + +To enable Text-to-Speech functionality, modify the `src/App.jsx` or `src/App.tsx` file to incorporate the Web Speech API. A custom `Read Aloud` button is added to the response toolbar using the [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/#responsetoolbarsettings) property. When clicked, the [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/responseToolbarSettings/#itemclicked) event extracts plain text from the generated AI response and use the browser SpeechSynthesis API to read it aloud. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/ai-assistview/speech/tts/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/ai-assistview/speech/tts/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ai-assistview/speech/tts" %} + +## See Also + +* [Speech-to-Text](./speech-to-text.md) diff --git a/ej2-react/ai-coding-assistants/copilot-extension.md b/ej2-react/ai-coding-assistants/copilot-extension.md index d59e34e51..022afa1fc 100644 --- a/ej2-react/ai-coding-assistants/copilot-extension.md +++ b/ej2-react/ai-coding-assistants/copilot-extension.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD --- layout: post title: SyncfusionReact GitHub Copilot Extension | Syncfusion @@ -98,3 +99,105 @@ To remove the extension from your account: * [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) * [Github Copilot Documentation](https://docs.github.com/en/copilot) +======= +--- +layout: post +title: SyncfusionReact GitHub Copilot Extension | Syncfusion +description: Learn how the SyncfusionReact GitHub Copilot extension enhances your React development with intelligent code suggestions, best practices, contextual guidance. +control: Getting started with SyncfusionReact copilot extension +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# SyncfusionReact GitHub Copilot Extension + +## Overview + +The [SyncfusionReact GitHub Copilot Extension](https://github.com/apps/syncfusionreact) provides intelligent assistance for developers using Syncfusion's React component libraries. This extension seamlessly integrates with GitHub Copilot to enhance your development workflow. + +### What is a GitHub Copilot Extension? + +A GitHub Copilot extension enhances Copilot's capabilities by integrating specialized, third-party tools and knowledge directly into the chat interface. It allows Copilot to access specific data, APIs, and services—such as a component vendor's official documentation—to provide more accurate, context-aware, and relevant assistance for a developer's specific technology stack. + +### Key Benefits + +* Smart code suggestions for Syncfusion® React components. +* Best practice guidance for component usage and configuration. +* Context-aware troubleshooting for complex scenarios. + +## Prerequisites + +Before using this extension, ensure you have: + +* [Github copilot](https://github.com/copilot/) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this copilot extension. There are no restrictions on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Installation + +* Visit the [SyncfusionReact GitHub App](https://github.com/apps/syncfusionreact) and click **Install**. +* Grant the required read-access permissions to allow the extension to function with Copilot chat. +* Click **Install & Authorize**. +* Sign in with your Syncfusion® account to authenticate and link the extension to your GitHub account. The API key is automatically retrieved upon successful authentication. +* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension. + +## Getting Started + +* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot. +* Type `@` in the chat prompt and select the `SyncfusionReact` from the list of extensions. +* Enter a query related to Syncfusion® React components (e.g., configuration, implementation, or troubleshooting). + +### Mode availability in VS code + +Syncfusion® Copilot extension provide full access to all AI interaction modes — Ask, Edit, and Agent — when integrated with VS code. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. + +## Example Queries + +Here are some examples of queries you can use with the Syncfusion® Copilot extensions: + +* "@SyncfusionReact Create a Syncfusion data grid with paging and sorting" +* "@SyncfusionReact How do I implement a responsive Syncfusion chart with tooltips?" +* "@SyncfusionReact Show me a Syncfusion Kanban board implementation with drag and drop" + +## Uninstallation + +To remove the extension from your account: + +* Go to [GitHub App Installations](https://github.com/settings/installations/). +* Locate the `SyncfusionReact` extension in the list. +* Click `Configure`, then select `Uninstall`. + +## Support + +* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/essential-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) +* Live chat + +## See also + +* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) +* [Github Copilot Documentation](https://docs.github.com/en/copilot) +>>>>>>> remotes/origin/development diff --git a/ej2-react/ai-coding-assistants/mcp-server.md b/ej2-react/ai-coding-assistants/mcp-server.md index 0a1e81750..360d10d9e 100644 --- a/ej2-react/ai-coding-assistants/mcp-server.md +++ b/ej2-react/ai-coding-assistants/mcp-server.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD --- layout: post title: SyncfusionReactAssistant MCP Server | Syncfusion @@ -210,3 +211,217 @@ Product support is available through the following mediums. ## See also * [Syncfusion React Documentation](https://ej2.syncfusion.com/react/documentation) +======= +--- +layout: post +title: SyncfusionReactAssistant MCP Server | Syncfusion +description: Learn how to configure and use SyncfusionReactAssistant MCP server for intelligent code generation, documentation, and troubleshooting in React apps. +control: Getting started with SyncfusionReactAssistant MCP Server +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# SyncfusionReactAssistant MCP Server + +## Overview + +The [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent assistance for developers using Syncfusion's React component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building React applications with Syncfusion® components. + +### Key Benefits + +* Intelligent code generation for Syncfusion® React components. +* Detailed component documentation and usage examples. +* Troubleshooting assistance for common integration challenges. + +## Prerequisites + +Before using [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant), ensure you have: + +* Required [node](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Installation and setup + +Before you can invoke the `SyncfusionReactAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients: + +### Generic MCP Server Settings + +- **npm package name**: `@syncfusion/react-assistant` +- **Type**: stdio (standard input/output transport) +- **Command**: npx +- **Arguments**: -y +- **Server name**: syncfusionReactAssistant + +You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: + +```json +"env": { + "Syncfusion_API_Key": "YOUR_API_KEY" +} +``` + +[SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment: + +### Syncfusion® Code Studio + +* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace and navigate to the `Custom Servers` tab. +* Enter the Server Name as `react-mcp`, choose Server Type as npm package, and set the NPM Package name to `@syncfusion/react-assistant`. +* Add an environment variable as `Syncfusion_API_Key` and value as your [Syncfusion API key](https://syncfusion.com/account/api-key), then click **Install Server**. +* Once installed, the server will appear in the User Installed Server list, and will be added to the **config.yaml** file. +* The server is now ready for use in Code Studio. For more details, refer to the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/customservers#npm-server). + +### VS Code (GitHub Copilot MCP) + +1. To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder. + +```json +{ + "servers": { + "syncfusion-react-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +2. After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) server directly from the settings interface without additional commands. + +3. Confirm that [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to: + * `SyncfusionReactAssistant is running...` (in VS Code) + +### Cursor + +To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder. + +```json +{ + "mcpServers": { + "syncfusion-react-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +### JetBrains IDEs + +1. Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP). +2. Click + Add to add a new MCP server configuration. +3. In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config: + +```json +{ + "mcpServers": { + "syncfusion-react-assistant": { + "command": "npx", + "args": [ + "-y", + "@syncfusion/react-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +4. Click OK and Apply. + +> For more detailed information about configuring MCP servers in various clients, refer to the official documentations. + * [VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) + * [Cursor](https://docs.cursor.com/en/context/mcp#using-mcp-json) + * [JetBrains](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server) + * [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) + +## Usage + +To activate the SyncfusionReactAssistant MCP server: + +1. Start your prompt with one of the following: + * 'SyncfusionReactAssistant' + * '/syncfusion-react-assistant' + * '/syncfusion-react' + * '@syncfusion-react' + * '@ask_syncfusion_react' + * 'ej2-react' + + In VS Code, you can also use #SyncfusionReactAssistant to explicitly invoke the MCP server. + +2. Grant the SyncfusionReactAssistant MCP server a permission to run for this session, workspace, or always. +3. For best results, start a new chat for each new topic to maintain clean context. + +### Mode availability + +Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion React Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. + +### Example Queries + +Here are some effective ways to use [SyncfusionReactAssistant](https://www.npmjs.com/package/@syncfusion/react-assistant): + + * "Create a Syncfusion React Grid component with paging, sorting and filtering" + * "How do I implement data binding with Syncfusion React scheduler?" + * "Show me how to create a dashboard with multiple Syncfusion components" + +## Troubleshooting + +If you encounter issues: + + * Verify your API key is correctly configured. + * Ensure the MCP server is enabled in your client's tools selection. + * Check that you're using a compatible MCP client version. + * Try restarting your development environment. + +## Support + +Product support is available through the following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/essential-js2) +* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript) +* Live chat + +## See also + +* [Syncfusion React Documentation](https://ej2.syncfusion.com/react/documentation) +>>>>>>> remotes/origin/development diff --git a/ej2-react/ai-coding-assistants/overview.md b/ej2-react/ai-coding-assistants/overview.md index 4e5f2aa89..d96619e6f 100644 --- a/ej2-react/ai-coding-assistants/overview.md +++ b/ej2-react/ai-coding-assistants/overview.md @@ -1,3 +1,4 @@ +<<<<<<< HEAD --- layout: post title: Syncfusion AI Coding Assistant Overview | Syncfusion @@ -71,3 +72,78 @@ The Syncfusion® AI Coding Assistant is desi * Add the [SyncfusionReactAssistant MCP Server](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/mcp-server) to an MCP-enabled client * Install the [SyncfusionReact GitHub Copilot Extension](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/copilot-extension) * [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) +======= +--- +layout: post +title: Syncfusion AI Coding Assistant Overview | Syncfusion +description: Learn how Syncfusion AI Coding Assistant boost React productivity by generating accurate code snippets, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistant Overview +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Syncfusion® AI Coding Assistant Overview + +The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building React applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. + +AI Coding Assistant: + +* **The SyncfusionReactAssistant MCP Server** + Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). +* **SyncfusionReact GitHub Copilot Extension** + Augments GitHub Copilot with Syncfusion-specific support for rapid component setup and contextual guidance in the IDE. + +## Getting Started + +To use the AI Coding Assistant, you need: + +* A [Syncfusion® user account](https://www.syncfusion.com/account) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) +* A [React application that includes SyncfusionReact](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) + +## Unlimited Access + +Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Best Practices + +* Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your React application. +* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. +* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. +* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://ej2.syncfusion.com/react/documentation) or [support](https://support.syncfusion.com/support/tickets/create). + +> Always check AI-generated content and code for accuracy before using it. + +## Recommendations + +* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. +* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. + +## Privacy & Data Handling + +The Syncfusion® AI Coding Assistant is designed with privacy in mind: + +* The tools do not access your project files or workspace directly. +* User prompts are not stored by any of the tools or used for any other purpose. +* Prompts are not used to train Syncfusion® models. +* The assistant generates context, while the final output is handled by your selected AI model. + +## See also + +* Add the [SyncfusionReactAssistant MCP Server](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/mcp-server) to an MCP-enabled client +* Install the [SyncfusionReact GitHub Copilot Extension](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/copilot-extension) +* [Syncfusion® React Documentation](https://ej2.syncfusion.com/react/documentation) +>>>>>>> remotes/origin/development diff --git a/ej2-react/chart/chart-types/area.md b/ej2-react/chart/chart-types/area.md index 26b8d6da6..942d5df5a 100644 --- a/ej2-react/chart/chart-types/area.md +++ b/ej2-react/chart/chart-types/area.md @@ -278,6 +278,11 @@ The [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPo ## See Also +<<<<<<< HEAD * [Data label](./data-labels) * [Tooltip](./tool-tip) +======= +* [Data label](./data-labels/) +* [Tooltip](./tool-tip/) +>>>>>>> remotes/origin/development * [Use SVG Linear Gradient](https://support.syncfusion.com/kb/article/21513/how-to-use-svg-linear-gradient-for-react-area-chart-with-css) \ No newline at end of file diff --git a/ej2-react/chart/chart-types/bar.md b/ej2-react/chart/chart-types/bar.md index 26a25a608..5b1a88667 100644 --- a/ej2-react/chart/chart-types/bar.md +++ b/ej2-react/chart/chart-types/bar.md @@ -406,6 +406,11 @@ The [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPo ## See also +<<<<<<< HEAD * [Data label](./data-labels) * [Tooltip](./tool-tip) +======= +* [Data label](./data-labels/) +* [Tooltip](./tool-tip/) +>>>>>>> remotes/origin/development * [Color a Particular Bar](https://support.syncfusion.com/kb/article/21515/how-to-color-a-particular-bar-in-react-chart-component) \ No newline at end of file diff --git a/ej2-react/chart/data-labels.md b/ej2-react/chart/data-labels.md index c7e7d0ac2..4447a00ef 100644 --- a/ej2-react/chart/data-labels.md +++ b/ej2-react/chart/data-labels.md @@ -282,6 +282,11 @@ You can calculate the percentage value based on the sum for each series using th ## See Also +<<<<<<< HEAD * [Show total stacking values in data label](./how-to#show-the-total-value-for-stacking-series-in-data-label) * [Prevent the data label when the data value is 0](./how-to#prevent-the-data-label-when-the-data-value-is-0) +======= +* [Show total stacking values in data label](./how-to/#show-the-total-value-for-stacking-series-in-data-label) +* [Prevent the data label when the data value is 0](./how-to/#prevent-the-data-label-when-the-data-value-is-0) +>>>>>>> remotes/origin/development * [Display Data Labels in Lakh](https://support.syncfusion.com/kb/article/21250/how-to-display-data-labels-in-lakh-in-react-accumulation-chart) \ No newline at end of file diff --git a/ej2-react/chart/data-markers.md b/ej2-react/chart/data-markers.md index a3ffd2212..b095907d5 100644 --- a/ej2-react/chart/data-markers.md +++ b/ej2-react/chart/data-markers.md @@ -146,5 +146,10 @@ Marker can be filled with the series color by setting the [`isFilled`](https://e ## See Also +<<<<<<< HEAD * [Customize the marker with different shape](./how-to#customize-the-marker-with-different-shape) -* [Highlight a Marker in Multicolored Line Series](https://support.syncfusion.com/kb/article/21514/how-to-highlight-a-specific-marker-in-a-multicolored-line-series-in-react-chart) \ No newline at end of file +* [Highlight a Marker in Multicolored Line Series](https://support.syncfusion.com/kb/article/21514/how-to-highlight-a-specific-marker-in-a-multicolored-line-series-in-react-chart) +======= +* [Customize the marker with different shape](./how-to/#customize-the-marker-with-different-shape) +* [Highlight a Marker in Multicolored Line Series](https://support.syncfusion.com/kb/article/21514/how-to-highlight-a-specific-marker-in-a-multicolored-line-series-in-react-chart) +>>>>>>> remotes/origin/development diff --git a/ej2-react/chart/legend.md b/ej2-react/chart/legend.md index 4978cecba..d48ce47f1 100644 --- a/ej2-react/chart/legend.md +++ b/ej2-react/chart/legend.md @@ -400,5 +400,9 @@ The [`layout`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSe ## See Also +<<<<<<< HEAD * [Customize each shape in legend](./how-to#customize-each-shape-in-legend) +======= +* [Customize each shape in legend](./how-to/#customize-each-shape-in-legend) +>>>>>>> remotes/origin/development * [Add Custom Legend Using SVG](https://support.syncfusion.com/kb/article/21530/how-to-add-custom-legend-using-svg-in-react-chart) \ No newline at end of file diff --git a/ej2-react/chat-ui/messages.md b/ej2-react/chat-ui/messages.md index 658baa492..a071807eb 100644 --- a/ej2-react/chat-ui/messages.md +++ b/ej2-react/chat-ui/messages.md @@ -349,7 +349,7 @@ The Chat UI component supports `Markdown` formatting for messages, enabling rich To enable Markdown rendering, a third-party library that converts Markdown syntax to HTML is required. -- Include the `marked` library: +- Include the `marked` library: ```bash diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx index 992da505b..c529a1da3 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.jsx @@ -15,6 +15,10 @@ function App() { 'How can I improve my time management skills?' ]; const bannerTemplate = ''; +<<<<<<< HEAD +======= + +>>>>>>> remotes/origin/development const toolbarItemClicked = (args) => { if (args.item.iconCss === 'e-icons e-refresh') { assistInstance.current.prompts = []; @@ -47,7 +51,11 @@ function App() { }; const onPromptRequest = (args) => { +<<<<<<< HEAD const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); //Replace Your Model Name Here +======= + const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); // Replace Your Model Name Here +>>>>>>> remotes/origin/development model.generateContent(args.prompt) .then(result => { const responseText = result.response.text().trim() || 'No respons received.'; diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx index 89fd2c73d..ebdddbe68 100644 --- a/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/gemini-ai/app/index.tsx @@ -15,7 +15,12 @@ function App() { 'How do I prioritize my tasks?', 'How can I improve my time management skills?' ]; +<<<<<<< HEAD const bannerTemplate = ''; +======= + const bannerTemplate: string = ''; + +>>>>>>> remotes/origin/development const toolbarItemClicked = (args: ToolbarItemClickArgs): void => { if (args.item.iconCss === 'e-icons e-refresh') { if (assistInstance.current) { @@ -52,7 +57,11 @@ function App() { }; const onPromptRequest = (args: { prompt: string }): void => { +<<<<<<< HEAD const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); //Replace Your Model Name Here +======= + const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' }); // Replace Your Model Name Here +>>>>>>> remotes/origin/development model.generateContent(args.prompt) .then((result: GenerateContentResult) => { const responseText: string = result.response.text().trim() || 'No response received.'; diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx new file mode 100644 index 000000000..ecd7eb2ee --- /dev/null +++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/app/index.jsx @@ -0,0 +1,91 @@ +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; +import { marked } from 'marked'; + +function App() { + const assistInstance = React.useRef(null); + let stopStreaming = false; + const suggestions = [ + 'How do I prioritize my tasks?', + 'How can I improve my time management skills?' + ]; + const bannerTemplate = ''; + + const toolbarItemClicked = (args) => { + if (args.item.iconCss === 'e-icons e-refresh') { + assistInstance.current.prompts = []; + assistInstance.current.promptSuggestions = suggestions; + stopStreaming = true; + } + }; + + const assistViewToolbarSettings = { + items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }], + itemClicked: toolbarItemClicked + }; + + const streamResponse = async (response) => { + let lastResponse = ''; + const responseUpdateRate = 10; + let i = 0; + const responseLength = response.length; + while (i < responseLength && !stopStreaming) { + lastResponse += response[i]; + i++; + if (i % responseUpdateRate === 0 || i === responseLength) { + const htmlResponse = marked.parse(lastResponse); + assistInstance.current.addPromptResponse(htmlResponse, i === responseLength); + assistInstance.current.scrollToBottom(); + } + await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect + } + assistInstance.current.promptSuggestions = suggestions; + }; + + const onPromptRequest = (args) => { + const defaultResponse = '⚠️ Something went wrong while connecting to the AI service. Please check your Ollama application running background.'; + fetch('http://localhost:11434/api/generate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + model: 'deepseek-r1', + prompt: `### Instruction:\nRespond in up to 5 lines.\n\n### Input:\n${args.prompt || 'Hi'}`, + stream: false, + }), + }) + .then(response => { + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + return response.json(); + }) + .then(reply => { + const responseText = reply.response?.trim() || 'No response received.'; + stopStreaming = false; + streamResponse(responseText); + }) + .catch(error => { + assistInstance.current.addPromptResponse(defaultResponse, true); + assistInstance.current.promptSuggestions = suggestions; + stopStreaming = true; + }); + }; + + const handleStopResponse = () => { + stopStreaming = true; + }; + + return ( +
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js
new file mode 100644
index 000000000..f8fd474a2
--- /dev/null
+++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js",
+ "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js",
+ "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",
+ "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+ "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js",
+ "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js"
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx
index 84a3717f5..6e2dcc4f3 100644
--- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx
+++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.jsx
@@ -17,7 +17,12 @@ function App() {
'How can I improve my time management skills?',
];
+<<<<<<< HEAD
const bannerTemplate = '';
+=======
+ const bannerTemplate =
+ '';
+>>>>>>> remotes/origin/development
const toolbarItemClicked = (args) => {
if (args.item.iconCss === 'e-icons e-refresh' && assistInstance.current) {
diff --git a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx
index cb5cd2519..78cfdf247 100644
--- a/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx
+++ b/ej2-react/code-snippet/ai-assistview/ai-integrations/open-ai/app/index.tsx
@@ -15,7 +15,12 @@ function App() {
'How do I prioritize my tasks?',
'How can I improve my time management skills?'
];
+<<<<<<< HEAD
const bannerTemplate = ''; const toolbarItemClicked = (args:ToolbarItemClickedEventArgs) => {
+=======
+ const bannerTemplate = '';
+ const toolbarItemClicked = (args:ToolbarItemClickedEventArgs) => {
+>>>>>>> remotes/origin/development
if (args.item.iconCss === 'e-icons e-refresh') {
assistInstance.current.prompts = [];
assistInstance.current.promptSuggestions = suggestions;
diff --git a/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.jsx b/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.jsx
new file mode 100644
index 000000000..951068a4a
--- /dev/null
+++ b/ej2-react/code-snippet/ai-assistview/speech/stt/app/index.jsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import * as ReactDOM from "react-dom";
+import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs';
+import { marked } from 'marked';
+
+let azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key'; // Your_Azure_OpenAI_API_Key
+let azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint'; // Your_Azure_OpenAI_Endpoint
+let azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version'; // Your_Azure_OpenAI_API_Version
+let azureDeploymentName = 'Your_Deployment_Name'; // Your_Deployment_Name
+let stopStreaming = false;
+
+function App() {
+ let assistInstance = React.useRef(null);
+ let speechToTextObj = React.useRef(null);
+ let assistviewFooter = React.useRef(null);
+ let assistviewSendButton = React.useRef(null);
+
+ const assistViewToolbarSettings = {
+ items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }],
+ itemClicked: (args) => toolbarItemClicked(args)
+ };
+
+ const promptToolbarSettings = {
+ itemClicked: (args) => {
+ if (args.item.iconCss === "e-icons e-assist-edit") {
+ assistviewFooter.current.innerHTML = assistInstance.current.prompts[args.dataIndex].prompt;
+ toggleButtons();
+ }
+ }
+ };
+
+ const bannerTemplate = () => {
+ return (
+ Loading....
+
+
+ Click the below mic-button to convert your voice to text.
+
+ );
+ };
+
+ const footerTemplate = () => {
+ return (
+
+
+
+ );
+ };
+
+ const streamResponse = async (response) => {
+ let lastResponse = "";
+ const responseUpdateRate = 10;
+ let i = 0;
+ const responseLength = response.length;
+ while (i < responseLength && !stopStreaming) {
+ lastResponse += response[i];
+ i++;
+ if (i % responseUpdateRate === 0 || i === responseLength) {
+ const htmlResponse = marked.parse(lastResponse);
+ assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength);
+ assistInstance.current?.scrollToBottom();
+ }
+ await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect
+ }
+ toggleButtons();
+ };
+
+ const onPromptRequest = (args) => {
+ const url =
+ azureOpenAIEndpoint.replace(/\/$/, '') +
+ `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
+ `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`;
+
+ fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'api-key': azureOpenAIApiKey,
+ },
+ body: JSON.stringify({
+ messages: [{ role: 'user', content: args.prompt }],
+ temperature: 0.7,
+ max_tokens: 500
+ }),
+ })
+ .then(response => response.json())
+ .then(reply => {
+ const responseText = reply.choices[0].message.content.trim() || 'No response received.';
+ stopStreaming = false;
+ streamResponse(responseText);
+ })
+ .catch((error) => {
+ assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true);
+ stopStreaming = true;
+ toggleButtons();
+ });
+ };
+
+ const toolbarItemClicked = (args) => {
+ if (args.item.iconCss === 'e-icons e-refresh') {
+ assistInstance.current.prompts = [];
+ }
+ };
+
+ const sendIconClicked = () => {
+ assistInstance.current.executePrompt(assistviewFooter.current.innerText);
+ assistviewFooter.current.innerText = '';
+ };
+
+ const onTranscriptChange = (args) => {
+ if (assistviewFooter.current) {
+ assistviewFooter.current.innerText = args.transcript;
+ }
+ };
+
+ const onListeningStop = () => {
+ toggleButtons();
+ };
+
+ const onCreated = () => {
+ toggleButtons();
+ };
+
+ const toggleButtons = () => {
+ const assistviewFooterEle = assistviewFooter.current;
+ const sendButtonEle = assistviewSendButton.current?.element;
+ const speechButtonEle = speechToTextObj.current?.element;
+ if (!assistviewFooterEle || !sendButtonEle || !speechButtonEle) {
+ return;
+ }
+ const hasText = assistviewFooterEle.innerText.trim() !== '';
+ sendButtonEle.classList.toggle('visible', hasText);
+ speechButtonEle.classList.toggle('visible', !hasText);
+ if (!hasText && (assistviewFooterEle.innerHTML.trim() === '' || assistviewFooterEle.innerHTML === '
+
+ ')) { + assistviewFooterEle.innerHTML = ''; + } + }; + + const handleKeyDown = (event) => { + if (event.key === 'Enter' && !event.shiftKey) { + sendIconClicked(); + event.preventDefault(); + } + }; + + const handleStopResponse = () => { + stopStreaming = true; + toggleButtons(); + }; + + React.useEffect(() => { + // Defer toggleButtons until after mount to ensure refs are ready + toggleButtons(); + }, []); + + return ( +
+
+ );
+}
+
+ReactDOM.render(
+
+ Click the below mic-button to convert your voice to text.
+
+ );
+ };
+
+ const footerTemplate = () => {
+ return (
+
+
+
+ );
+ };
+
+ const streamResponse = async (response: string) => {
+ let lastResponse = "";
+ const responseUpdateRate = 10;
+ let i = 0;
+ const responseLength = response.length;
+ while (i < responseLength && !stopStreaming) {
+ lastResponse += response[i];
+ i++;
+ if (i % responseUpdateRate === 0 || i === responseLength) {
+ const htmlResponse = marked.parse(lastResponse);
+ assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength);
+ assistInstance.current?.scrollToBottom();
+ }
+ await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect
+ }
+ toggleButtons();
+ };
+
+ const onPromptRequest = (args: PromptRequestEventArgs) => {
+ const url =
+ azureOpenAIEndpoint.replace(/\/$/, '') +
+ `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
+ `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`;
+
+ fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'api-key': azureOpenAIApiKey,
+ },
+ body: JSON.stringify({
+ messages: [{ role: 'user', content: args.prompt }],
+ temperature: 0.7,
+ max_tokens: 500
+ }),
+ })
+ .then(response => response.json())
+ .then(reply => {
+ const responseText = reply.choices[0].message.content.trim() || 'No response received.';
+ stopStreaming = false;
+ streamResponse(responseText);
+ })
+ .catch((error: unknown) => {
+ assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true);
+ stopStreaming = true;
+ toggleButtons();
+ });
+ };
+
+ const toolbarItemClicked = (args: ToolbarItemClickedEventArgs) => {
+ if (args.item.iconCss === 'e-icons e-refresh') {
+ assistInstance.current.prompts = [];
+ }
+ };
+
+ const sendIconClicked = () => {
+ assistInstance.current.executePrompt(assistviewFooter.current.innerText);
+ assistviewFooter.current.innerText = '';
+ };
+
+ const onTranscriptChange = (args: any) => {
+ if (assistviewFooter.current) {
+ assistviewFooter.current.innerText = args.transcript;
+ }
+ };
+
+ const onListeningStop = () => {
+ toggleButtons();
+ };
+
+ const onCreated = () => {
+ toggleButtons();
+ };
+
+ const toggleButtons = () => {
+ const assistviewFooterEle = assistviewFooter.current;
+ const sendButtonEle = assistviewSendButton.current?.element;
+ const speechButtonEle = speechToTextObj.current?.element;
+ if (!assistviewFooterEle || !sendButtonEle || !speechButtonEle) {
+ return;
+ }
+ const hasText = assistviewFooterEle.innerText.trim() !== '';
+ sendButtonEle.classList.toggle('visible', hasText);
+ speechButtonEle.classList.toggle('visible', !hasText);
+ if (!hasText && (assistviewFooterEle.innerHTML.trim() === '' || assistviewFooterEle.innerHTML === '
+
+ ')) { + assistviewFooterEle.innerHTML = ''; + } + }; + + const handleKeyDown = (event) => { + if (event.key === 'Enter' && !event.shiftKey) { + sendIconClicked(); + event.preventDefault(); + } + }; + + const handleStopResponse = () => { + stopStreaming = true; + toggleButtons(); + }; + + React.useEffect(() => { + // Defer toggleButtons until after mount to ensure refs are ready + toggleButtons(); + }, []); + + return ( +
+
+ );
+}
+
+ReactDOM.render(
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/ai-assistview/speech/stt/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/speech/stt/systemjs.config.js
new file mode 100644
index 000000000..a407cba76
--- /dev/null
+++ b/ej2-react/code-snippet/ai-assistview/speech/stt/systemjs.config.js
@@ -0,0 +1,48 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js",
+ "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js",
+ "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",
+ "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+ "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.jsx b/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.jsx
new file mode 100644
index 000000000..21d9f3560
--- /dev/null
+++ b/ej2-react/code-snippet/ai-assistview/speech/tts/app/index.jsx
@@ -0,0 +1,141 @@
+import * as React from 'react';
+import * as ReactDOM from "react-dom";
+import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
+import { marked } from 'marked';
+
+let azureOpenAIApiKey = ''; // Your_Azure_OpenAI_API_Key
+let azureOpenAIEndpoint = ''; // Your_Azure_OpenAI_Endpoint
+let azureOpenAIApiVersion = ''; // Your_Azure_OpenAI_API_Version
+let azureDeploymentName = ''; // Your_Deployment_Name
+let stopStreaming = false;
+
+function App() {
+ let assistInstance = React.useRef(null);
+ let currentUtterance = null;
+
+ const assistViewToolbarSettings = {
+ items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }],
+ itemClicked: (args) => toolbarItemClicked(args)
+ };
+
+ const responseToolbarSettings = {
+ items: [
+ { type: 'Button', iconCss: 'e-icons e-assist-copy', tooltip: 'Copy' },
+ { type: 'Button', iconCss: 'e-icons e-audio', tooltip: 'Read Aloud' },
+ { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' },
+ { type: 'Button', iconCss: 'e-icons e-assist-dislike', tooltip: 'Need Improvement' },
+ ],
+ itemClicked: (args) => onResponseToolbarItemClicked(args)
+ };
+
+ const bannerTemplate = () => {
+ return (
+ Loading....
+
+
+ Ready to assist voice enabled !
+
+ );
+ };
+
+ const streamResponse = async (response) => {
+ let lastResponse = "";
+ const responseUpdateRate = 10;
+ let i = 0;
+ const responseLength = response.length;
+ while (i < responseLength && !stopStreaming) {
+ lastResponse += response[i];
+ i++;
+ if (i % responseUpdateRate === 0 || i === responseLength) {
+ const htmlResponse = marked.parse(lastResponse);
+ assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength);
+ assistInstance.current?.scrollToBottom();
+ }
+ await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect
+ }
+ };
+
+ const onPromptRequest = (args) => {
+ const url =
+ azureOpenAIEndpoint.replace(/\/$/, '') +
+ `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
+ `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`;
+
+ fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'api-key': azureOpenAIApiKey,
+ },
+ body: JSON.stringify({
+ messages: [{ role: 'user', content: args.prompt }],
+ temperature: 0.7,
+ max_tokens: 500
+ }),
+ })
+ .then(response => response.json())
+ .then(reply => {
+ const responseText = reply.choices[0].message.content.trim() || 'No response received.';
+ stopStreaming = false;
+ streamResponse(responseText);
+ })
+ .catch((error) => {
+ assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true);
+ stopStreaming = true;
+ });
+ };
+
+ const toolbarItemClicked = (args) => {
+ if (args.item.iconCss === 'e-icons e-refresh') {
+ assistInstance.current.prompts = [];
+ }
+ };
+
+ const onResponseToolbarItemClicked = (args) => {
+ const responseHtml = assistInstance.current?.prompts[args.dataIndex].response;
+ if (responseHtml) {
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = responseHtml;
+ const text = (tempDiv.textContent || tempDiv.innerText || '').trim();
+ if (args.item.iconCss === 'e-icons e-audio' || args.item.iconCss === 'e-icons e-assist-stop') {
+ if (currentUtterance) {
+ speechSynthesis.cancel();
+ currentUtterance = null;
+ assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio';
+ assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud';
+ } else {
+ const utterance = new SpeechSynthesisUtterance(text);
+ utterance.onend = () => {
+ currentUtterance = null;
+ assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio';
+ assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud';
+ };
+ speechSynthesis.speak(utterance);
+ currentUtterance = utterance;
+ assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-assist-stop';
+ assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Stop';
+ }
+ }
+ }
+ };
+
+ const handleStopResponse = () => {
+ stopStreaming = true;
+ };
+
+
+ return (
+
+
+ );
+}
+
+ReactDOM.render(
+
+ Ready to assist voice enabled !
+
+ );
+ };
+
+ const streamResponse = async (response: string) => {
+ let lastResponse = "";
+ const responseUpdateRate = 10;
+ let i = 0;
+ const responseLength = response.length;
+ while (i < responseLength && !stopStreaming) {
+ lastResponse += response[i];
+ i++;
+ if (i % responseUpdateRate === 0 || i === responseLength) {
+ const htmlResponse = marked.parse(lastResponse);
+ assistInstance.current?.addPromptResponse(htmlResponse, i === responseLength);
+ assistInstance.current?.scrollToBottom();
+ }
+ await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect
+ }
+ };
+
+ const onPromptRequest = (args: PromptRequestEventArgs) => {
+ const url =
+ azureOpenAIEndpoint.replace(/\/$/, '') +
+ `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
+ `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`;
+
+ fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'api-key': azureOpenAIApiKey,
+ },
+ body: JSON.stringify({
+ messages: [{ role: 'user', content: args.prompt }],
+ temperature: 0.7,
+ max_tokens: 500
+ }),
+ })
+ .then(response => response.json())
+ .then(reply => {
+ const responseText = reply.choices[0].message.content.trim() || 'No response received.';
+ stopStreaming = false;
+ streamResponse(responseText);
+ })
+ .catch((error: unknown) => {
+ assistInstance.current.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true);
+ stopStreaming = true;
+ });
+ };
+
+ const toolbarItemClicked = (args: ToolbarItemClickedEventArgs) => {
+ if (args.item.iconCss === 'e-icons e-refresh') {
+ assistInstance.current.prompts = [];
+ }
+ };
+
+ const onResponseToolbarItemClicked = (args: ToolbarItemClickedEventArgs) => {
+ const responseHtml = assistInstance.current?.prompts[args.dataIndex].response;
+ if (responseHtml) {
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = responseHtml;
+ const text = (tempDiv.textContent || tempDiv.innerText || '').trim();
+ if (args.item.iconCss === 'e-icons e-audio' || args.item.iconCss === 'e-icons e-assist-stop') {
+ if (currentUtterance) {
+ speechSynthesis.cancel();
+ currentUtterance = null;
+ assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio';
+ assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud';
+ } else {
+ const utterance = new SpeechSynthesisUtterance(text);
+ utterance.onend = () => {
+ currentUtterance = null;
+ assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-audio';
+ assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Read Aloud';
+ };
+ speechSynthesis.speak(utterance);
+ currentUtterance = utterance;
+ assistInstance.current.responseToolbarSettings.items[1].iconCss = 'e-icons e-assist-stop';
+ assistInstance.current.responseToolbarSettings.items[1].tooltip = 'Stop';
+ }
+ }
+ }
+ };
+
+ const handleStopResponse = () => {
+ stopStreaming = true;
+ };
+
+ return (
+
+
+ );
+}
+
+ReactDOM.render(
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/ai-assistview/speech/tts/systemjs.config.js b/ej2-react/code-snippet/ai-assistview/speech/tts/systemjs.config.js
new file mode 100644
index 000000000..f8fd474a2
--- /dev/null
+++ b/ej2-react/code-snippet/ai-assistview/speech/tts/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-interactive-chat": "syncfusion:ej2-react-interactive-chat/dist/ej2-react-interactive-chat.umd.min.js",
+ "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js",
+ "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js",
+ "@syncfusion/ej2-react-notifications": "syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+ "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js",
+ "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js"
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+});
+
+System.import('app');
\ No newline at end of file
diff --git a/ej2-react/diagram/accessibility.md b/ej2-react/diagram/accessibility.md
index fc68e3406..2284cfe5d 100644
--- a/ej2-react/diagram/accessibility.md
+++ b/ej2-react/diagram/accessibility.md
@@ -1,18 +1,18 @@
---
layout: post
-title: Accessibility in React Diagram component | Syncfusion®
-description: Learn here all about Accessibility in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more.
+title: Accessibility in React Diagram Component | Syncfusion®
+description: Learn here all about Accessibility in Syncfusion® React Diagram Component of Syncfusion Essential® JS 2 and more.
control: Accessibility
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
---
-# Accessibility in React Diagram component
+# Accessibility in React Diagram Component
-Diagram provides built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. WAI-ARIA Accessibility supports are achieved through the attributes like `aria-label`. It helps to provides information about elements in a document for assistive technology.
+The Diagram component provides built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. WAI-ARIA accessibility support is achieved through attributes like `aria-label`, which provide information about elements in a document for assistive technologies such as screen readers.
-The accessibility compliance for the diagram component is outlined below.
+The following table outlines accessibility compliance for the Diagram component:
| Accessibility Criteria | Compatibility |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
@@ -38,16 +38,16 @@ The accessibility compliance for the diagram component is outlined below.
Loading....
+ 
- The component does not meet the requirement.* PageEditable
* Default -## Node constraints +## Node Constraints -Node constraints allows to enable or disable the following behaviors of node. They are as follows: +Node constraints control the behavior and interactions available for individual nodes within the diagram. | Constraints | Description | | -------- | -------- | -|None|Disable all node Constraints| -|Select|Enables or disables the node to be selected.| -|Drag|Enables or disables the node to be dragged.| -|Rotate|Enables or disables the node to be rotated.| -|Shadow|Enables or disables the node to display shadow.| -|PointerEvents|Enables or disables the node to provide pointer option.| -|Delete|Enables or disables node to be deleted.| -|InConnect|Enables or disables node to provide in connect option.| -|OutConnect|Enables or disables node to provide out connect option.| -|AllowDrop|Enables node to provide allow to drop option.| -|Individual|Enables node to provide individual resize option | -|ResizeNorthEast|Enable or disable to resize NorthEast side of the node.| -|ResizeEast|Enable or disable to resize East side of the node.| -|ResizeSouthEast|Enable or disable to resize SouthEast side of the node.| -|ResizeSouth|Enable or disable to resize South side of the node.| -|ResizeSouthWest|Enable or disable to resize SouthWest side of the node.| -|ResizeWest|Enable or disable to resize West side of the node.| -|ResizeNorthWest|Enable or disable to resize NorthWest side of the node.| -|ResizeNorth|Enable or disable to resize North side of the node.| -|AspectRatio|Enables the Aspect ratio of the node.| -|ReadOnly|Enables the ReadOnly support for annotation in the node.| -|HideThumbs|Enable to hide all resize thumbs for the node.| -|Tooltip|Enables or disables tooltip for the Nodes.| -|InheritTooltip|Enables or disables inherit tooltip option from the parent object.| -|Resize|Enables or Disables the expansion or compression of a node.| -|Inherit|Enables the node to inherit the interaction option from the parent object.| -|Expandable|Enables node to provide Expandable option| -|AllowMovingOutsideLane| Enables or disables child in parent for the swimLane node | +|None|Disables all node constraints.| +|Select|Enables node selection capability.| +|Drag|Enables node dragging functionality.| +|Rotate|Enables node rotation capability.| +|Shadow|Enables shadow display for the node.| +|PointerEvents|Enables pointer event handling for the node.| +|Delete|Enables node deletion capability.| +|InConnect|Enables incoming connections to the node.| +|OutConnect|Enables outgoing connections from the node.| +|AllowDrop|Enables drop operations on the node.| +|Individual|Enables individual resize handles for the node.| +|ResizeNorthEast|Enables resizing from the northeast corner.| +|ResizeEast|Enables resizing from the east side.| +|ResizeSouthEast|Enables resizing from the southeast corner.| +|ResizeSouth|Enables resizing from the south side.| +|ResizeSouthWest|Enables resizing from the southwest corner.| +|ResizeWest|Enables resizing from the west side.| +|ResizeNorthWest|Enables resizing from the northwest corner.| +|ResizeNorth|Enables resizing from the north side.| +|AspectRatio|Maintains aspect ratio during resize operations.| +|ReadOnly|Enables read-only mode for node annotations.| +|HideThumbs|Hides all resize thumbs for the node.| +|Tooltip|Enables tooltip display for the node.| +|InheritTooltip|Inherits tooltip settings from parent objects.| +|Resize|Enables overall resize functionality for the node.| +|Inherit|Inherits interaction settings from parent objects.| +|Expandable|Enables expand/collapse functionality for the node.| +|AllowMovingOutsideLane|Allows movement outside swim lane boundaries.| |Default|Enables all default constraints for the node.| -The following example illustrates how to disable rotation using the node constraints. +The following example demonstrates how to disable rotation using node constraints: ```ts let nodes: NodeModel[] = [ @@ -163,7 +164,7 @@ const root = ReactDOM.createRoot(document.getElementById("diagram")); root.render(
* InheritTooltip
* Default -## Connector constraints +## Connector Constraints -Connector constraints allow to enable or disable certain behaviors of connectors. +Connector constraints control the behavior and interactions available for connectors within the diagram. | Constraints | Description | | -------- | -------- | -|None|Disable all connector Constraints.| -|Select|Enables or disables connector to be selected.| -|Delete|Enables or disables connector to be deleted.| -|Drag|Enables or disables connector to be dragged.| -|DragSourceEnd|Enables connectors source end to be selected.| -|DragTargetEnd|Enables connectors target end to be selected.| -|DragSegmentThumb|Enables control point and end point of every segment in a connector for editing.| -|Interaction|Enables or disables Interaction for the connector.| -|AllowDrop|Enables allow drop support to the connector.| -|Bridging|Enables bridging to the connector.| -|InheritBridging|Enables to inherit bridging option from the parent object.| -|BridgeObstacle| Enables or Disables Bridge Obstacles with overlapping of connectors.| -|PointerEvents|Enables to set the pointer events.| -|ConnectToNearByNode|Enables to connect to the nearest node.| -|ConnectToNearByPort|Enables to connect to the nearest port.| -|Tooltip|Enables or disables tooltip for the connectors.| -|LineRouting| Enables or disables routing to the connector.| -|InheritLineRouting|Enables or disables routing to the connector. | -|InheritTooltip|Enables or disables inherit tooltip option from the parent object -|ConnectToNearByElement|Enables to connect to the nearest elements.| -|InheritSegmentThumbShape|Enables or disables to inherit the value of segmentThumbShape.| -|ReadOnly|Enables or disables readonly for the connector.| -|Default|Enables all constraints for the connector.| - - -The following code illustrates how to disable selection by using connector constraints. +|None|Disables all connector constraints.| +|Select|Enables connector selection capability.| +|Delete|Enables connector deletion capability.| +|Drag|Enables connector dragging functionality.| +|DragSourceEnd|Enables dragging of the connector's source endpoint.| +|DragTargetEnd|Enables dragging of the connector's target endpoint.| +|DragSegmentThumb|Enables dragging of segment control points.| +|Interaction|Enables general interaction capabilities for the connector.| +|AllowDrop|Enables drop operations on the connector.| +|Bridging|Enables bridging functionality for the connector.| +|InheritBridging|Inherits bridging settings from parent objects.| +|BridgeObstacle|Enables the connector to act as a bridge obstacle.| +|PointerEvents|Enables pointer event handling for the connector.| +|ConnectToNearByNode|Enables automatic connection to nearby nodes.| +|ConnectToNearByPort|Enables automatic connection to nearby ports.| +|Tooltip|Enables tooltip display for the connector.| +|LineRouting|Enables line routing functionality for the connector.| +|InheritLineRouting|Inherits line routing settings from parent objects.| +|InheritTooltip|Inherits tooltip settings from parent objects.| +|ConnectToNearByElement|Enables automatic connection to nearby elements.| +|InheritSegmentThumbShape|Inherits segment thumb shape from parent objects.| +|ReadOnly|Enables read-only mode for the connector.| +|Default|Enables all default constraints for the connector.| + +The following code demonstrates how to disable selection using connector constraints: ```ts let connectors: ConnectorModel[] = [{ @@ -323,7 +323,7 @@ root.render(
* InheritSegmentThumbShape
* Default -## Port constraints +## Port Constraints -The constraints property of the Port allows you to enable or disable the following behaviors of port. +Port constraints control the behavior and connection capabilities of ports attached to nodes. | Constraints | Description | | -------- | -------- | -|None|Disable all port Constraints.| -|Draw|Enables to create the connection when mouse hover on the port.| -|Drag|Enables or disables port dragging| -|InConnect|Enables or disables to connect only the target end of connector.| -|OutConnect|Enables or disables to connect only the source end of connector.| -|ToolTip|Enables or disables the Tooltip for the ports.| -|InheritTooltip|Enables or disables the Tooltip for the ports.| -|Default|Enables all constraints for the port.| +|None|Disables all port constraints.| +|Draw|Enables connection creation when hovering over the port.| +|Drag|Enables port dragging functionality.| +|InConnect|Enables incoming connections to the port only.| +|OutConnect|Enables outgoing connections from the port only.| +|ToolTip|Enables tooltip display for the port.| +|InheritTooltip|Inherits tooltip settings from parent objects.| +|Default|Enables all default constraints for the port.| The following code illustrates how to disable creating connections with a port. @@ -478,7 +478,7 @@ let nodes: NodeModel[] = [ ]; ``` -The following code example shows how to modify the port constraints to accept target connection alone. +The following code example shows how to configure port constraints to accept only incoming connections: ```ts let nodes: NodeModel[] = [ @@ -530,19 +530,19 @@ N> By default, the following constraints are enabled for the port,
* InConnect
* OutConnect -## Annotation constraints +## Annotation Constraints -The constraints property of the Annotations allows you to enable or disable certain behaviors of annotation. +Annotation constraints control the behavior and edit ability of text annotations on nodes and connectors. | Constraints | Description | | -------- | -------- | -|ReadOnly|Enables or disables the ReadOnly Constraints,| -|InheritReadOnly|Enables or disables to inherit the ReadOnly option from the parent object.| -|Select|Enables or Disable select support for the annotation| -|Drag|Enables or Disable drag support for the annotation| -|Resize| Enables or Disable resize support for the annotation | -|Rotate| Enables or Disable rotate support for the annotation| -|Interaction|Enables interaction of annotation| +|ReadOnly|Enables read-only mode for the annotation.| +|InheritReadOnly|Inherits read-only settings from parent objects.| +|Select|Enables selection capability for the annotation.| +|Drag|Enables dragging functionality for the annotation.| +|Resize|Enables resize capability for the annotation.| +|Rotate|Enables rotation capability for the annotation.| +|Interaction|Enables general interaction capabilities for the annotation.| |None|Disables all constraints for the annotation.| The read-only mode for the annotation is enabled by settings ReadOnly constraints to the annotation. @@ -614,28 +614,28 @@ Refer sample below For more details about annotation constraints, refer to [`AnnotationConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/annotationConstraints#AnnotationConstraints). -## Selector constraints +## Selector Constraints -Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector constraints. The part of selector is categorized as follows: +Selector constraints control the visibility and behavior of selection handles and thumbs that appear when elements are selected. | Constraints | Description | | -------- | -------- | -|None|Hides all the selector elements.| -|ConnectorSourceThumb|Shows or hides the source thumb of the connector.| -|ConnectorTargetThumb|Shows or hides the target thumb of the connector.| -|ResizeSouthEast|Shows or hides the bottom right resize handle of the selector.| -|ResizeSouthWest|Shows or hides the bottom left resize handle of the selector.| -|ResizeNorthEast|Shows or hides the top right resize handle of the selector.| -|ResizeNorthWest|Shows or hides the top left resize handle of the selector.| -|ResizeEast|Shows or hides the middle right resize handle of the selector.| -|ResizeWest|Shows or hides the middle left resize handle of the selector.| -|ResizeSouth|Shows or hides the bottom center resize handle of the selector.| -|ResizeNorth|Shows or hides the top center resize handle of the selector.| -|Rotate|Shows or hides the rotate handle of the selector.| -|UserHandle|Shows or hides the user handles of the selector.| -|ToolTip| Shows or hides the default tooltip for the drag, resize, and rotate operation of nodes and connectors. | -|ResizeAll|Shows or hides all resize handles of the selector.| -|All|Shows all handles of the selector.| +|None|Hides all selector elements.| +|ConnectorSourceThumb|Shows or hides the connector's source thumb.| +|ConnectorTargetThumb|Shows or hides the connector's target thumb.| +|ResizeSouthEast|Shows or hides the bottom-right resize handle.| +|ResizeSouthWest|Shows or hides the bottom-left resize handle.| +|ResizeNorthEast|Shows or hides the top-right resize handle.| +|ResizeNorthWest|Shows or hides the top-left resize handle.| +|ResizeEast|Shows or hides the middle-right resize handle.| +|ResizeWest|Shows or hides the middle-left resize handle.| +|ResizeSouth|Shows or hides the bottom-center resize handle.| +|ResizeNorth|Shows or hides the top-center resize handle.| +|Rotate|Shows or hides the rotation handle.| +|UserHandle|Shows or hides custom user handles.| +|ToolTip|Shows or hides tooltips during drag, resize, and rotate operations.| +|ResizeAll|Shows or hides all resize handles.| +|All|Shows all available handles.| The following code illustrates how to hide rotator. @@ -719,32 +719,32 @@ Refer sample below For more information about selector constraints, refer to [`SelectorConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/selectorConstraints). -N> By default, the following constraints are enabled for the selected items, +N> By default, the following constraints are enabled for the selected items:
* Rotate -
* UserHandel +
* UserHandle
* ResizeAll
* All
* ToolTip -## Snap constraints +## Snap Constraints -Snap constraints control the visibility of gridlines and enable/disable snapping. +Snap constraints control the visibility of gridlines and enable or disable snapping functionality for precise element positioning. The following list of snapping constraints are used to enable or disable certain features of snapping. | Constraints | Description | | -------- | -------- | -|None|Disable snapping for the nodes/connectors in diagram.| -|ShowHorizontalLines|Displays only the horizontal gridlines in diagram.| -|ShowVerticalLines|Displays only the Vertical gridlines in diagram.| -|ShowLines|Display both Horizontal and Vertical gridlines.| -|SnapToHorizontalLines|Enables the object to snap only with horizontal gridlines.| -|SnapToVerticalLines|Enables the object to snap only with Vertical gridlines.| -|SnapToLines|Enables the object to snap with both horizontal and Vertical gridlines.| -|SnapToObject|Enables the object to snap with the other objects in the diagram.| -|All|Shows gridlines and enables snapping.| - -The following code illustrates how to show only horizontal gridlines. +|None|Disables snapping for all diagram elements.| +|ShowHorizontalLines|Displays horizontal gridlines in the diagram.| +|ShowVerticalLines|Displays vertical gridlines in the diagram.| +|ShowLines|Displays both horizontal and vertical gridlines.| +|SnapToHorizontalLines|Enables snapping to horizontal gridlines only.| +|SnapToVerticalLines|Enables snapping to vertical gridlines only.| +|SnapToLines|Enables snapping to both horizontal and vertical gridlines.| +|SnapToObject|Enables snapping to other objects in the diagram.| +|All|Shows gridlines and enables all snapping functionality.| + +The following code demonstrates how to show only horizontal gridlines: {% raw %} @@ -803,7 +803,7 @@ Refer sample below For more information about snap constraints, refer to [`SnapConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/snapConstraints). -N> By default, the following constraints are enabled for the snap functionality in the diagram, +N> By default, the following constraints are enabled for the snap functionality:
* ShowLines
* ShowVerticalLines
* ShowHorizontalLines @@ -813,17 +813,16 @@ N> By default, the following constraints are enabled for the snap functionality
* SnapToObject
* All -## Boundary constraints - -Boundary constraints defines a boundary for the diagram inside which the interaction should be done. +## Boundary Constraints +Boundary constraints define the interaction boundaries for diagram elements, controlling where users can perform operations. The following list of constraints are used to enable or disable certain features of boundary interactions of the diagram. | Constraints | Description | | -------- | -------- | -|Infinity|Allow the interactions to take place at the infinite height and width.| -|Diagram|Allow the interactions to take place around the diagram height and width.| -|Page|Allow the interactions to take place around the page height and width.| +|Infinity|Allows interactions at infinite height and width.| +|Diagram|Limits interactions within the diagram's height and width.| +|Page|Limits interactions within the page boundaries.| The following code illustrates how to limit the interaction done inside a diagram within a page. @@ -860,13 +859,13 @@ Refer sample below {% previewsample "page.domainurl/code-snippet/diagram/constraints/constraints-cs7" %} -For more information about selector constraints, refer to [`BoundaryConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/boundaryConstraints). +For more information about boundary constraints, refer to [`BoundaryConstraints`](https://ej2.syncfusion.com/react/documentation/api/diagram/boundaryConstraints). -## Inherit behaviors +## Inherit Behaviors -Some of the behaviors can be defined through both the specific object (node/connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. +When behaviors are defined at both the specific object level (node/connector) and diagram level, inheritance options determine the actual behavior applied. -The following code example illustrates how to inherit the line bridging behavior from the diagram model. +The following code example demonstrates how to inherit line bridging behavior from the diagram model: ```ts let connectors: ConnectorModel[] = [{ @@ -901,36 +900,36 @@ const root = ReactDOM.createRoot(document.getElementById('diagram')); root.render(