diff --git a/ej2-asp-core-mvc/Release-notes/31.1.17.md b/ej2-asp-core-mvc/Release-notes/31.1.17.md index 5ee3eebf6f..4686fe8f43 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.17.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.17.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.17 Release Notes -{% include release-info.html date="September 05, 2025" version="v31.1.17" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="60541" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} diff --git a/ej2-asp-core-mvc/Release-notes/31.1.18.md b/ej2-asp-core-mvc/Release-notes/31.1.18.md index 7b6d52ead5..daf80b302c 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.18.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.18.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.18 Release Notes -{% include release-info.html date="September 10, 2025" version="v31.1.18" passed="96429" failed="0" %} +{% include release-info.html date="September 10, 2025" version="v31.1.18" passed="60544" failed="0" %} {% directory path: _includes/release-notes/v31.1.18 %} @@ -21,58 +21,58 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | | App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 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 | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | -| Checkbox | 37 | 37 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | -| Combo Box | 137 | 137 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | | Common | 849 | 849 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2754 | 2754 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19893 | 19893 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 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 | 3468 | 3468 | 0 | All Passed | -| HeatMap Chart | 478 | 478 | 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 | 83 | 83 | 0 | All Passed | -| Maps | 1244 | 1244 | 0 | All Passed | -| Mention | 39 | 39 | 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 | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 18612 | 18612 | 0 | All Passed | | Pivot Table | 5297 | 5297 | 0 | All Passed | | Progress Bar | 81 | 81 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | | Query Builder | 480 | 480 | 0 | All Passed | -| RadioButton | 45 | 45 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | | RangeNavigator | 140 | 140 | 0 | All Passed | | Rating | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 0 | All Passed | | sidebar | 88 | 88 | 0 | All Passed | | Signature | 105 | 105 | 0 | All Passed | @@ -81,9 +81,8 @@ documentation: ug | SmithChart | 49 | 49 | 0 | All Passed | | Sparkline | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | | Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | | Tab | 69 | 69 | 0 | All Passed | @@ -92,8 +91,8 @@ documentation: ug | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | -| Treemap | 264 | 264 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/31.1.20.md b/ej2-asp-core-mvc/Release-notes/31.1.20.md index 952cb10c22..cf0a56816a 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.20.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.20.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.20 Release Notes -{% include release-info.html date="September 17, 2025" version="v31.1.20" passed="98403" failed="0" %} +{% include release-info.html date="September 17, 2025" version="v31.1.20" passed="60591" failed="0" %} {% directory path: _includes/release-notes/v31.1.20 %} @@ -21,34 +21,34 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | | App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 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 | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | -| Checkbox | 37 | 37 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | -| Combo Box | 137 | 137 | 0 | All Passed | -| Common | 2436 | 2436 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 849 | 849 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2756 | 2756 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19893 | 19893 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 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 | 3513 | 3513 | 0 | All Passed | | HeatMap Chart | 635 | 635 | 0 | All Passed | | Image Editor | 1653 | 1653 | 0 | All Passed | @@ -57,22 +57,21 @@ documentation: ug | LinearGauge | 426 | 426 | 0 | All Passed | | Listbox | 115 | 115 | 0 | All Passed | | ListView | 83 | 83 | 0 | All Passed | -| Maps | 1365 | 1365 | 0 | All Passed | -| Mention | 39 | 39 | 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 | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 18612 | 18612 | 0 | All Passed | | Pivot Table | 5297 | 5297 | 0 | All Passed | -| Progress Bar | 81 | 81 | 0 | All Passed | +| Progress Bar | 79 | 79 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | | Query Builder | 480 | 480 | 0 | All Passed | -| RadioButton | 45 | 45 | 0 | All Passed | +| RadioButton | 36 | 36 | 0 | All Passed | | RangeNavigator | 140 | 140 | 0 | All Passed | | Rating | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 0 | All Passed | | sidebar | 88 | 88 | 0 | All Passed | | Signature | 105 | 105 | 0 | All Passed | @@ -81,9 +80,8 @@ documentation: ug | SmithChart | 49 | 49 | 0 | All Passed | | Sparkline | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | | Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | | Tab | 69 | 69 | 0 | All Passed | @@ -92,8 +90,8 @@ documentation: ug | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | | Treemap | 326 | 326 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/31.1.21.md b/ej2-asp-core-mvc/Release-notes/31.1.21.md index 773190ee94..16e925464f 100644 --- a/ej2-asp-core-mvc/Release-notes/31.1.21.md +++ b/ej2-asp-core-mvc/Release-notes/31.1.21.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.21 Release Notes -{% include release-info.html date="September 23, 2025" version="v31.1.21" passed="103560" failed="0" %} +{% include release-info.html date="September 23, 2025" version="v31.1.21" passed="61308" failed="0" %} {% directory path: _includes/release-notes/v31.1.21 %} @@ -36,15 +36,14 @@ documentation: ug | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | | Combo Box | 136 | 136 | 0 | All Passed | -| Common | 2506 | 2506 | 0 | All Passed | +| Common | 849 | 849 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2799 | 2799 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 18967 | 18967 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | | Dialog | 58 | 58 | 0 | All Passed | -| Document Editor | 4997 | 4997 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | | Dropdown Tree | 105 | 105 | 0 | All Passed | @@ -64,7 +63,6 @@ documentation: ug | Multicolumn Combo Box | 254 | 254 | 0 | All Passed | | Multiselect Dropdown | 390 | 390 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 19130 | 19130 | 0 | All Passed | | Pivot Table | 5298 | 5298 | 0 | All Passed | | Progress Bar | 79 | 79 | 0 | All Passed | | Progress Button | 132 | 132 | 0 | All Passed | @@ -84,7 +82,6 @@ documentation: ug | Speech To Text | 200 | 200 | 0 | All Passed | | Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 0 | All Passed | | Stepper | 91 | 91 | 0 | All Passed | | Stock Chart | 379 | 379 | 0 | All Passed | | Tab | 69 | 69 | 0 | All Passed | @@ -93,8 +90,8 @@ documentation: ug | Time Picker | 180 | 180 | 0 | All Passed | | Timeline | 213 | 213 | 0 | All Passed | | Toast | 139 | 139 | 0 | All Passed | -| Toolbar | 132 | 132 | 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 +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/31.1.22.md b/ej2-asp-core-mvc/Release-notes/31.1.22.md new file mode 100644 index 0000000000..fdf00cc603 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/31.1.22.md @@ -0,0 +1,97 @@ +--- +title: Essential Studio® for ##Platform_Name## Release Notes - v31.1.22 +description: Learn here about the controls in the Essential Studio® for ##Platform_Name## Weekly Release - Release Notes - v31.1.22 +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio® for ##Platform_Name## - v31.1.22 Release Notes + +{% include release-info.html date="October 01, 2025" version="v31.1.22" passed="61802" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.22 %} + +{% 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 | 164 | 164 | 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 | 4605 | 4605 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 2800 | 2800 | 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 | 191 | 191 | 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 | 390 | 390 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5298 | 5298 | 0 | All Passed | +| Progress Bar | 79 | 79 | 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 | 4564 | 4564 | 0 | All Passed | +| schedule | 4609 | 4609 | 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 | 57 | 57 | 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 | 677 | 677 | 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-asp-core-mvc/Release-notes/31.1.23.md b/ej2-asp-core-mvc/Release-notes/31.1.23.md new file mode 100644 index 0000000000..b0b3f6356b --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/31.1.23.md @@ -0,0 +1,97 @@ +--- +title: Essential Studio® for ##Platform_Name## Release Notes - v31.1.23 +description: Learn here about the controls in the Essential Studio® for ##Platform_Name## Weekly Release - Release Notes - v31.1.23 +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio® for ##Platform_Name## - v31.1.23 Release Notes + +{% include release-info.html date="October 07, 2025" version="v31.1.23" passed="62050" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.23 %} + +{% 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 | 164 | 164 | 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 | 4605 | 4605 | 0 | All Passed | +| Chat UI | 184 | 184 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | +| Common | 904 | 904 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 2800 | 2800 | 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 | 191 | 191 | 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 | 5298 | 5298 | 0 | All Passed | +| Progress Bar | 67 | 67 | 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-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md index 176524cd30..6ef19fb383 100644 --- a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md +++ b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.MVC/31.1.17.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.17 Release Notes -{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="249186" failed="0" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="60541" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} @@ -21,70 +21,77 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 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 | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | | Common | 849 | 849 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2754 | 2754 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19272 | 19272 | 0 | All Passed | -| Document Editor | 4224 | 4224 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 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 | 3468 | 3468 | 0 | All Passed | -| HeatMap Chart | 478 | 478 | 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 | -| Maps | 1244 | 1244 | 0 | All Passed | +| ListView | 83 | 83 | 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 | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 19094 | 19094 | 0 | All Passed | | Pivot Table | 5294 | 5294 | 0 | All Passed | +| Progress Bar | 79 | 79 | 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 | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 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 | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 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 | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | -| Treemap | 264 | 264 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | -| DocIO | 39837 | 39837 | 0 | All Passed | -| PDF | 14696 | 14696 | 0 | All Passed | -| Presentation | 50987 | 50987 | 0 | All Passed | -| XlsIO | 44112 | 44112 | 0 | All Passed | \ No newline at end of file +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md index 82846d9673..6ef19fb383 100644 --- a/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md +++ b/ej2-asp-core-mvc/Release-notes/EJ2_ASP.NETCORE/31.1.17.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for ##Platform_Name## - v31.1.17 Release Notes -{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="202140" failed="0" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="60541" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} @@ -21,71 +21,77 @@ documentation: ug |---------------|------------|--------|--------|---------| | 3D Chart | 232 | 232 | 0 | All Passed | | 3D Circular Chart | 374 | 374 | 0 | All Passed | -| Accordion | 106 | 106 | 0 | All Passed | +| Accordion | 205 | 205 | 0 | All Passed | | AI Assist View | 429 | 429 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | | AutoComplete | 200 | 200 | 0 | All Passed | | Breadcrumb | 160 | 160 | 0 | All Passed | -| Bullet Chart | 165 | 165 | 0 | All Passed | -| Button | 145 | 145 | 0 | All Passed | +| Bullet Chart | 164 | 164 | 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 | 4080 | 4080 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | | CircularGauge | 429 | 429 | 0 | All Passed | | ColorPicker | 130 | 130 | 0 | All Passed | | Common | 849 | 849 | 0 | All Passed | +| Combo Box | 136 | 136 | 0 | All Passed | | Context Menu | 105 | 105 | 0 | All Passed | | Data Grid | 2754 | 2754 | 0 | All Passed | | Date Picker | 425 | 425 | 0 | All Passed | -| Date Range Picker | 420 | 420 | 0 | All Passed | +| Date Range Picker | 519 | 519 | 0 | All Passed | | Date Time Picker | 323 | 323 | 0 | All Passed | -| Diagram | 19272 | 19272 | 0 | All Passed | -| Document Editor | 4224 | 4224 | 0 | All Passed | +| Diagram | 12813 | 12813 | 0 | All Passed | +| Dialog | 58 | 58 | 0 | All Passed | | DropDown Button | 132 | 132 | 0 | All Passed | | Dropdown List | 191 | 191 | 0 | All Passed | -| Dropdown Tree | 106 | 106 | 0 | All Passed | -| File Manager | 2196 | 2196 | 0 | All Passed | -| Floating Action Button | 174 | 174 | 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 | 3468 | 3468 | 0 | All Passed | -| HeatMap Chart | 478 | 478 | 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 | -| Maps | 1244 | 1244 | 0 | All Passed | +| ListView | 83 | 83 | 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 | 373 | 373 | 0 | All Passed | | OTP Input | 240 | 240 | 0 | All Passed | -| PDF Viewer | 19094 | 19094 | 0 | All Passed | | Pivot Table | 5294 | 5294 | 0 | All Passed | +| Progress Bar | 79 | 79 | 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 | 197 | 197 | 0 | All Passed | | Ribbon | 496 | 496 | 0 | All Passed | -| Rich Text Editor | 4591 | 4591 | 0 | All Passed | +| Rich Text Editor | 4564 | 4564 | 0 | All Passed | | schedule | 4609 | 4609 | 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 | 56 | 56 | 0 | All Passed | | Speech To Text | 200 | 200 | 0 | All Passed | -| Speed Dial | 366 | 366 | 0 | All Passed | +| Speed Dial | 122 | 122 | 0 | All Passed | | Split Button | 144 | 144 | 0 | All Passed | -| Spreadsheet | 10393 | 10393 | 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 | 132 | 132 | 0 | All Passed | +| Toolbar | 112 | 112 | 0 | All Passed | | ToolTip | 131 | 131 | 0 | All Passed | | TreeGrid | 3656 | 3656 | 0 | All Passed | -| Treemap | 264 | 264 | 0 | All Passed | -| Treeview | 371 | 371 | 0 | All Passed | -| DocIO | 16538 | 16538 | 0 | All Passed | -| Metafilerenderer | 863 | 863 | 0 | All Passed | -| PDF | 13522 | 13522 | 0 | All Passed | -| Presentation | 54312 | 54312 | 0 | All Passed | -| XlsIO | 17351 | 17351 | 0 | All Passed | \ No newline at end of file +| Treemap | 326 | 326 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..7fb68f5cdb --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/gemini-integration.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Gemini AI with ASP.NET MVC AI AssistView control + +The AI AssistView control integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences. + +## Prerequisites + +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +1. Install the `Gemini AI` nuget package in the application. + +```bash + +NuGet\Install-Package Mscc.GenerativeAI + +``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +## Generate API Key + +1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. + +2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. + +3. **Project Selection**: Choose an existing Google Cloud project or create a new one. + +4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once. + +> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production. + +## Gemini AI with AI AssistView + +Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control. + +* Add your Gemini API key securely in the configuration: + +```bash + +string apiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Gemini AI](../images/gemini-ai.png) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md new file mode 100644 index 0000000000..079305de41 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/ollama-llm-integration.md @@ -0,0 +1,76 @@ +--- +layout: post +title: LLM Model in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of LLM Model in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: LLM Model +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate LLM via Ollama with ASP.NET MVC AI AssistView control + +The AI AssistView control integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your ASP.NET MVC application. The control acts as a user interface where user prompts are sent to the selected LLM model via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* [Ollama](https://ollama.com) installed to run and manage LLM models locally. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependency + +To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console. + +## Configuring Ollama + +Install the LLM Model package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Microsoft.Extensions.AI + +NuGet\Install-Package Microsoft.Extensions.AI.Ollama + +``` + +## Configure AI AssistView with Ollama in ASP.NET MVC + +Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control. + +Add services in `Program.cs` file + +```bash + +using Microsoft.Extensions.AI; + +builder.Services.AddControllersWithViews(); +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAll", + builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()); +}); +builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1")) + .UseDistributedCache() + .UseLogging(); + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/razor %} +{% endhighlight %} +{% highlight c# tabtitle="llm-model.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs %} +{% endhighlight %} +{% endtabs %} + +![LLM Model](../images/llm-model.png) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md new file mode 100644 index 0000000000..bf6bb87746 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/ai-integrations/openai-integration.md @@ -0,0 +1,92 @@ +--- +layout: post +title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure OpenAI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Azure OpenAI with ASP.NET MVC AI AssistView control + +The AI AssistView control integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The control acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +Install the required packages: + +1. Install the `OpenAI` and `Azure` nuget packages in the application. + +```bash + +NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core + +``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs. + +## Configure Azure OpenAI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. + +2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL. + +3. Note the following values: + - API key + - Endpoint (for example, https://.openai.azure.com/) + - API version (must be supported by your resource) + - Deployment name (for example, gpt-4o-mini) + +4. Store these values securely, as they will be used in your application. + +> `Security Note`: expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. + +## Azure OpenAI with AI AssistView + +Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control. + +* Update the following configuration values with your Azure OpenAI details: + +```bash + +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs %} +{% endhighlight %} +{% endtabs %} + +![Azure OpenAI](../images/open-ai.png) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..b2927f46d9 --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/gemini-integration.md @@ -0,0 +1,79 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Gemini AI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Gemini AI with ASP.NET Core AI AssistView control + +The AI AssistView control integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences. + +## Prerequisites + +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +1. Install the `Gemini AI` nuget package in the application. + +```bash + +NuGet\Install-Package Mscc.GenerativeAI + +``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +## Generate API Key + +1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. + +2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. + +3. **Project Selection**: Choose an existing Google Cloud project or create a new one. + +4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once. + +> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production. + +## Gemini AI with AI AssistView + +Modify the `index.cshtml` file to integrate the Gemini AI with the AI AssistView control. + +* Add your Gemini API key securely in the configuration: + +```bash + +string apiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs %} +{% endhighlight %} +{% endtabs %} + +![Gemini AI](../images/gemini-ai.png) + \ No newline at end of file diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md new file mode 100644 index 0000000000..3a7403ca0e --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/ollama-llm-integration.md @@ -0,0 +1,76 @@ +--- +layout: post +title: LLM Model in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of LLM Model in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: LLM Model +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate LLM via Ollama with ASP.NET Core AI AssistView control + +The AI AssistView control integrates with [LLM via Ollama](https://ollama.com) to enable advanced conversational AI features in your ASP.NET Core application. The control acts as a user interface where user prompts are sent to the selected LLM model via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* [Ollama](https://ollama.com) installed to run and manage LLM models locally. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependency + +To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console. + +## Configuring Ollama + +Install the LLM Model package in the application using Package Manager Console. + +```bash + +NuGet\Install-Package Microsoft.Extensions.AI + +NuGet\Install-Package Microsoft.Extensions.AI.Ollama + +``` + +## Configure AI AssistView with Ollama in ASP.NET Core + +Modify the `index.cshtml` file to integrate the Ollama with the AI AssistView control. + +Add services in `Program.cs` file + +```bash + +using Microsoft.Extensions.AI; + +builder.Services.AddControllersWithViews(); +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAll", + builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()); +}); +builder.Services.AddChatClient(new OllamaChatClient(new Uri("http://localhost:11434/"), "deepseek-r1")) + .UseDistributedCache() + .UseLogging(); + +``` + +{% tabs %} +{% highlight tagHelper tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="llm-model.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs %} +{% endhighlight %} +{% endtabs %} + +![LLM Model](../images/llm-model.png) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md new file mode 100644 index 0000000000..4d98aea12a --- /dev/null +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/ai-integrations/openai-integration.md @@ -0,0 +1,92 @@ +--- +layout: post +title: Azure OpenAI in ##Platform_Name## AI AssistView Control | Syncfusion +description: Checkout and learn about Integration of Azure OpenAI in Syncfusion ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Azure OpenAI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Azure OpenAI with ASP.NET Core AI AssistView control + +The AI AssistView control integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The control acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +Install the required packages: + +1. Install the `OpenAI` and `Azure` nuget packages in the application. + +```bash + +NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core + +``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs. + +## Configure Azure OpenAI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. + +2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL. + +3. Note the following values: + - API key + - Endpoint (for example, https://.openai.azure.com/) + - API version (must be supported by your resource) + - Deployment name (for example, gpt-4o-mini) + +4. Store these values securely, as they will be used in your application. + +> `Security Note`: expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. + +## Azure OpenAI with AI AssistView + +Modify the `index.cshtml` file to integrate the Azure OpenAI with the AI AssistView control. + +* Update the following configuration values with your Azure OpenAI details: + +```bash + +string endpoint = "Your_Azure_OpenAI_Endpoint"; +string apiKey = "Your_Azure_OpenAI_API_Key"; +string deploymentName = "Your_Deployment_Name"; + +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gemini.cs" %} +{% include code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs %} +{% endhighlight %} +{% endtabs %} + +![Azure OpenAI](../images/open-ai.png) diff --git a/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png new file mode 100644 index 0000000000..2e2a91dd08 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/gemini-ai.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/llm-model.png b/ej2-asp-core-mvc/ai-assistview/images/llm-model.png new file mode 100644 index 0000000000..7b29ce3d57 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/llm-model.png differ diff --git a/ej2-asp-core-mvc/ai-assistview/images/open-ai.png b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png new file mode 100644 index 0000000000..7b29ce3d57 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/open-ai.png differ diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md new file mode 100644 index 0000000000..9bccca5958 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-bot-framework.md @@ -0,0 +1,240 @@ +--- +layout: post +title: Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Microsoft Bot +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Microsoft Bot Framework with ASP.NET MVC Chat UI control + +The Chat UI control integrates seamlessly with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring Direct Line in Azure, and integrating the Chat UI in the application. + +## Prerequisites + +Before starting, ensure you have the following: + +* **Node.js**: Version 16 or higher with npm. + +* [Microsoft Azure Account](https://portal.azure.com/#home) : Required to create and host the bot. + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* **Deployed Azure Bot**: A bot should be created and published using the [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0), which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +* Install backend dependencies for bot communication using NuGet: + +```bash + +Install-Package Microsoft.Bot.Connector.DirectLine +Install-Package Newtonsoft.Json + +``` + +## Configure the Azure Bot + +1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. + +2. Enable the direct line channel: + * Go to `Channels` > `Direct Line` > `Default-Site`. + * Copy one of the displayed secret keys. + +3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). + +> `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. + +## Set Up Token Server + +Create a Web API controller in your ASP.NET MVC project to handle direct line token generation. Add `Controllers/TokenController.cs`: + +{% tabs %} +{% highlight cs tabtitle="TokenController.cs" %} + +using System; +using System.Configuration; +using System.Net; +using System.Net.Http; +using System.Threading.Tasks; +using System.Web.Http; +using Newtonsoft.Json; + +namespace YourNamespace.Controllers +{ + public class TokenController : ApiController + { + private static readonly HttpClient _httpClient = new HttpClient(); + [HttpPost] + [Route("api/token/directline/token")] + public async Task GenerateToken() + { + var directLineSecret = ConfigurationManager.AppSettings["DirectLineSecret"]; + if (string.IsNullOrEmpty(directLineSecret)) + { + return BadRequest("Direct Line secret is not configured."); + } + try + { + var request = new HttpRequestMessage(HttpMethod.Post, "https://directline.botframework.com/v3/directline/tokens/generate"); + request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", directLineSecret); + var response = await _httpClient.SendAsync(request); + response.EnsureSuccessStatusCode(); + var responseContent = await response.Content.ReadAsStringAsync(); + dynamic tokenResponse = JsonConvert.DeserializeObject(responseContent); + return Ok(new { token = tokenResponse.token }); + } + catch (HttpRequestException ex) + { + return InternalServerError(new Exception("Failed to generate Direct Line token.", ex)); + } + } + } +} + +{% endhighlight %} +{% endtabs %} + +Add the Direct Line secret to `Web.config`: + +{% tabs %} +{% highlight js tabtitle=".env" %} + + + + +{% endhighlight %} +{% endtabs %} + +>`Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments. + +## Configure ChatUI + +Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the direct line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. + +Modify the `Views/Home/Index.cshtml` file to integrate the Syncfusion Chat UI with the direct line API: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "You" }; + var botUserModel = new ChatUIUser { Id = "bot", User = "Bot" }; +} + +
+ @Html.EJS().ChatUI("chatUI").User(currentUserModel).MessageSend("onMessageSend").Created("onCreated").Render() +
+ + + + + +{% endhighlight %} +{% endtabs %} + +>Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, include the Bot Framework Web Chat script for Direct Line functionality. Register the Syncfusion script manager in `_Layout.cshtml`. + +## Configure Web.config for CORS (if needed) + +To enable CORS for API requests, add to `Web.config` under ``: + +{% tabs %} +{% highlight js tabtitle="Web.config.js" %} + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Run and Test + +### Start the Application: + +Run the project in Visual Studio or use IIS Express. +Open your app in the browser (e.g., `http://localhost:port`) to interact with your Microsoft Bot Framework chatbot. + +## Troubleshooting + +* `Token Server Error (500)`: Ensure the `DirectLineSecret` in `Web.config` is correct and the token endpoint is accessible. +* `CORS Error`: Verify the CORS configuration in `Web.config` allows requests from your frontend URL. +* `Bot is Not Responding`: + - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it’s running correctly. + - Check the bot’s `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. +* `Connection Fails on Load`: Verify the token controller is running and accessible. Check the browser console for network errors. +* `Token Expiration`: Direct Line tokens are short-lived. The Direct Line client typically handles token refresh, but if issues persist, restart the Direct Line connection. \ No newline at end of file diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md new file mode 100644 index 0000000000..27cd2df364 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/bot-integrations/integration-with-dialogflow.md @@ -0,0 +1,215 @@ +--- +layout: post +title: Integration of Dialogflow in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Dialogflow in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Dialogflow +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Google Dialogflow with ASP.NET MVC Chat UI control + +The Chat UI control integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your ASP.NET MVC applications. The control acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* **Node.js**: Version 16 or higher with npm. + +* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) installed. + +* Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +* Install backend dependencies for Dialogflow and server setup using NuGet: + +```bash + +Install-Package Google.Cloud.Dialogflow.V2 +Install-Package Newtonsoft.Json + +``` + +## Set Up the Dialogflow Agent + +1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). + +2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. + +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a service account with the dialogflow API client role, and download the JSON key file. + +> `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. + +## Configure Node.js Backend + +Create `backend/service-acct.json` with your Dialogflow service account credentials: + +{% tabs %} +{% highlight js tabtitle="service-acct.json" %} + +{ + "type": "service_account", + "project_id": "your-dialogflow-project-id", + "private_key_id": "abc123xyz...", + "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", + "client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", + ... +} + +{% endhighlight %} +{% endtabs %} + +Set up a Web API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: + +{% tabs %} +{% highlight cs tabtitle="ChatController.cs" %} + +using Google.Cloud.Dialogflow.V2; +using Google.Apis.Auth.OAuth2; +using System; +using System.Configuration; +using System.Threading.Tasks; +using System.Web.Http; + +namespace YourNamespace.Controllers +{ + public class ChatController : ApiController + { + private readonly SessionsClient _sessionsClient; + private readonly string _projectId; + public ChatController() + { + var credential = GoogleCredential.FromFile("service-acct.json"); + _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); + _projectId = ConfigurationManager.AppSettings["DialogflowProjectId"]; // Or hardcode from JSON + } + [HttpPost] + [Route("api/chat/message")] + public async Task SendMessage([FromBody] MessageRequest request) + { + var sessionId = request.SessionId ?? "default-session"; + var session = SessionName.FromProjectSession(_projectId, sessionId); + var queryInput = new QueryInput + { + Text = new TextInput + { + Text = request.Text, + LanguageCode = "en-US" + } + }; + try + { + var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); + var reply = response.QueryResult.FulfillmentText; + return Ok(new { reply }); + } + catch (Exception ex) + { + return InternalServerError(new Exception("Error connecting to Dialogflow.", ex)); + } + } + } + public class MessageRequest + { + public string Text { get; set; } + public string SessionId { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +> Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to Web.config if needed: + +## Configure message send + +Use the Chat UI `messageSend` event to exchanges message. Each time a user sends a message, this event will be invoked with details of the sent message. + +### Forward Message to backend: + +In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to dialogflow and returns the response. + +### Displaying Bot response: + +Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. + +Modify the `Views/Home/Index.cshtml` file to integrate the Syncfusion Chat UI with the dialogflow backend: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "Albert" }; + var botUserModel = new ChatUIUser { Id = "user2", User = "Bot", AvatarUrl = "https://ej2.syncfusion.com/demos/src/chat-ui/images/bot.png" }; +} + +
+ @Html.EJS().ChatUI("chatUI").HeaderText("Bot").HeaderIconCss("e-header-icon").User(currentUserModel).MessageSend("onMessageSend").Render() +
+ + + + +{% endhighlight %} +{% endtabs %} + +> Ensure to include Syncfusion scripts and styles in `_Layout.cshtml` as per the getting started guide. Also, register the Syncfusion script manager in `_Layout.cshtml`. + +## Run and Test + +### Start the Application: + +Run the project in Visual Studio or use IIS Express. + +Open your app in the browser and chat with your dialogflow-powered bot. + +![ChatUI with Dialogflow](../images/dialogflow.png) + +## Troubleshooting: + +* `Permission Denied`: Ensure the service account has the `Dialogflow API Client` role in the Google Cloud Console. +* `CORS Error`: If using separate origins, configure CORS in Web.config (e.g., add custom headers under ). +* `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. +* `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. +* `Network Issues`: Confirm the application is running and the frontend is pointing to the correct API URL. +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md new file mode 100644 index 0000000000..a5a29b7f24 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-bot-framework.md @@ -0,0 +1,272 @@ +--- +layout: post +title: Microsoft Bot in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Microsoft Bot in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Microsoft Bot +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Microsoft Bot Framework with ASP.NET Core Chat UI control + +The Chat UI control integrates seamlessly with a [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0) bot hosted on Azure, enabling a custom chat interface for seamless user interaction. The process involves setting up a secure backend token server, configuring Direct Line in Azure, and integrating the Chat UI in the application. + +## Prerequisites + +Before starting, ensure you have the following: + +* **Node.js**: Version 16 or higher with npm. + +* [Microsoft Azure Account](https://portal.azure.com/#home) : Required to create and host the bot. + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* **Deployed Azure Bot**: A bot should be created and published using the [Microsoft Bot Framework](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0), which is accessible via an Azure App Service. Refer to Microsoft's Bot Creation Guide. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +* Install backend dependencies for bot communication using NuGet: + +```bash + +dotnet add package Microsoft.Bot.Connector.DirectLine +dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson + +``` + +## Configure the Azure Bot + +1. In the [Azure Portal](https://portal.azure.com/#home), navigate to your bot resource. + +2. Enable the direct line channel: + * Go to `Channels` > `Direct Line` > `Default-Site`. + * Copy one of the displayed secret keys. + +3. Verify the messaging endpoint in the configuration section (e.g., https://your-bot-service.azurewebsites.net/api/messages). + +> `Security Note`: Never expose the Direct Line secret key in frontend code. Use a backend token server to handle it securely. + +## Set Up Token Server + +Create a controller in your ASP.NET Core project to handle direct line token generation. Add `Controllers/TokenController.cs`: + +{% tabs %} +{% highlight cs tabtitle="TokenController.cs" %} + +using Microsoft.AspNetCore.Mvc; +using System.Net.Http; +using System.Threading.Tasks; +using Newtonsoft.Json; + +namespace YourNamespace.Controllers +{ + [ApiController] + [Route("api/[controller]")] + public class TokenController : ControllerBase + { + private readonly IConfiguration _configuration; + private readonly HttpClient _httpClient; + + public TokenController(IConfiguration configuration, IHttpClientFactory httpClientFactory) + { + _configuration = configuration; + _httpClient = httpClientFactory.CreateClient(); + } + + [HttpPost("directline/token")] + public async Task GenerateToken() + { + var directLineSecret = _configuration["DirectLine:Secret"]; + if (string.IsNullOrEmpty(directLineSecret)) + { + return BadRequest(new { error = "Direct Line secret is not configured." }); + } + + try + { + var request = new HttpRequestMessage(HttpMethod.Post, "https://directline.botframework.com/v3/directline/tokens/generate"); + request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", directLineSecret); + + var response = await _httpClient.SendAsync(request); + response.EnsureSuccessStatusCode(); + + var responseContent = await response.Content.ReadAsStringAsync(); + var tokenResponse = JsonConvert.DeserializeObject(responseContent); + return Ok(new { token = tokenResponse.token }); + } + catch (HttpRequestException ex) + { + return StatusCode(500, new { error = "Failed to generate Direct Line token.", details = ex.Message }); + } + } + } +} + +{% endhighlight %} +{% endtabs %} + +Add the Direct Line secret to `appsettings.json`: + +{% tabs %} +{% highlight js tabtitle="appsettings.json" %} + +{ + "DirectLine": { + "Secret": "PASTE_YOUR_DIRECT_LINE_SECRET_HERE" + } +} + +{% endhighlight %} +{% endtabs %} + +> `Security Note`: Store the Direct Line secret in a secure configuration, such as Azure Key Vault, for production environments.| + +## Configure ChatUI + +Use the Chat UI `messageSend` event to handle message exchanges. This event is triggered before a message is sent, allowing you to forward it to the bot via the Direct Line API. Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. +Create `Views/Home/Index.cshtml` (assuming MVC) to integrate the Syncfusion Chat UI with the Direct Line API: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat + +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "You" }; + var botUserModel = new ChatUIUser { Id = "bot", User = "Bot" }; +} + +
+ + + +
+ + + + + +{% endhighlight %} +{% endtabs %} + +> Ensure Syncfusion scripts and styles are included in `_Layout.cshtml` as per the getting started guide. Also, register `` in `_Layout.cshtml`. Include the Bot Framework Web Chat script for Direct Line functionality. + +## Configure Program.cs + +Ensure CORS and HttpClient are configured in `Program.cs`: + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddControllers().AddNewtonsoftJson(); +builder.Services.AddHttpClient(); +builder.Services.AddCors(options => +{ + options.AddPolicy("AllowAll", builder => + { + builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); + }); +}); + +var app = builder.Build(); + +app.UseCors("AllowAll"); +app.UseRouting(); +app.MapControllers(); + +app.Run(); + +{% endhighlight %} +{% endtabs %} + +## Run and Test + +### Start the Application: + +Navigate to your project folder and run: + +```bash + +dotnet run + +``` + +Open your app in the browser Hosted link to interact with your Microsoft Bot Framework chatbot. + +## Troubleshooting + +* `Token Server Error (500)`: Ensure the DirectLine:Secret in appsettings.json is correct and the token endpoint is accessible. +* `CORS Error`: Verify the CORS policy in Program.cs allows requests from your frontend URL. +* `Bot is Not Responding`: + - Test the bot in the Azure Portal using the `Test in Web Chat` feature to ensure it's running correctly. + - Check the bot's `Messaging endpoint` in the Configuration section and ensure it is correct and accessible. +* `Connection Fails on Load`: Verify the token controller is running and accessible. Check the browser console for network errors. +* `Token Expiration`: direct line tokens are short-lived. The direct line client typically handles token refresh, but if issues persist, restart the direct line connection. diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md new file mode 100644 index 0000000000..afe7e44cda --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/bot-integrations/integration-with-dialogflow.md @@ -0,0 +1,214 @@ +--- +layout: post +title: Integration of Dialogflow in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Integration of Dialogflow in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Integration of Dialogflow +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Integrate Google Dialogflow with ASP.NET Core Chat UI control + +The Chat UI control integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your ASP.NET Core applications. The control acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* **Node.js**: Version 16 or higher with npm. + +* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/). + +* **Syncfusion Chat UI**: Package [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core) installed. + +* Dialogflow Service Account with the `Dialogflow API Client` role and its JSON key file. + +## Set Up the AI AssistView control + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView control in the application and that prerequisites are met. + +## Install Dependencies + +* Install backend dependencies for Dialogflow and server setup using NuGet: + +```bash + +dotnet add package Google.Cloud.Dialogflow.V2 +dotnet add package Microsoft.AspNetCore.Mvc.NewtonsoftJson + +``` + +## Set Up the Dialogflow Agent + +1. In the dialogflow console, create an [agent](https://cloud.google.com/agent-assist/docs), set a name (e.g., `MyChatBot`), and configure the default language (e.g., English - `en`). + +2. Add intents with training phrases and responses (e.g., greetings, FAQs). Test using the dialogflow simulator. + +3. In the Google Cloud Console, go to `APIs & Services` > `Credentials`, create a service account with the dialogflow API client role, and download the JSON key file. + +> `Security Note`: Never commit the JSON key file to version control. Use environment variables or a secret manager (e.g., Google Cloud Secret Manager) for production. + +## Configure Node.js Backend + +Create `backend/service-acct.json` with your Dialogflow service account credentials: + +{% tabs %} +{% highlight js tabtitle="service-acct.json" %} +{ + "type": "service_account", + "project_id": "your-dialogflow-project-id", + "private_key_id": "abc123xyz...", + "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEv...", + "client_email": "dialogflow-agent@your-dialogflow-project-id.iam.gserviceaccount.com", + ... +} +{% endhighlight %} +{% endtabs %} + +Set up an API controller in `Controllers/ChatController.cs` to handle Dialogflow requests: + +{% tabs %} +{% highlight cs tabtitle="ChatController.cs" %} + +using Google.Cloud.Dialogflow.V2; +using Google.Apis.Auth.OAuth2; +using Microsoft.AspNetCore.Mvc; +using System.Threading.Tasks; + +namespace YourNamespace.Controllers +{ + [ApiController] + [Route("api/[controller]")] + public class ChatController : ControllerBase + { + private readonly SessionsClient _sessionsClient; + private readonly string _projectId; + public ChatController(IConfiguration configuration) + { + var credential = GoogleCredential.FromFile("service-acct.json"); + _sessionsClient = SessionsClient.Create(credential.ToChannelCredentials()); + _projectId = "your-dialogflow-project-id"; // Or from configuration + } + [HttpPost("message")] + public async Task SendMessage([FromBody] MessageRequest request) + { + var sessionId = request.SessionId ?? "default-session"; + var session = SessionName.FromProjectSession(_projectId, sessionId); + var queryInput = new QueryInput + { + Text = new TextInput + { + Text = request.Text, + LanguageCode = "en-US" + } + }; + try + { + var response = await _sessionsClient.DetectIntentAsync(new DetectIntentRequest { Session = session.ToString(), QueryInput = queryInput }); + var reply = response.QueryResult.FulfillmentText; + return Ok(new { reply }); + } + catch (Exception ex) + { + return StatusCode(500, new { reply = "Error connecting to Dialogflow." }); + } + } + } + public class MessageRequest + { + public string Text { get; set; } + public string SessionId { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +> Use a unique `sessionId` (e.g., Guid) for each user to maintain conversation context. Add the projectId to appsettings.json if needed. + +## Configure message send + +Use the Chat UI `messageSend` event to exchanges message. Each time a user sends a message, this event will be invoked with details of the sent message. + +### Forward Message to backend: + +In the `messageSend` event handler, send a POST request to your backend API endpoint (`/api/chat/message`). The backend forwards the message to dialogflow and returns the response. + +### Displaying Bot response: + +Use the `addMessage` method to programmatically add the bot's reply to the Chat UI. + +Create `Views/Home/Index.cshtml` to integrate the Syncfusion Chat UI with the dialogflow backend: + +{% tabs %} +{% highlight Html tabtitle="Index.cshtml" %} + +@using Syncfusion.EJ2.InteractiveChat +@{ + var currentUserModel = new ChatUIUser { Id = "user1", User = "Albert" }; + var botUserModel = new ChatUIUser { Id = "user2", User = "Bot", AvatarUrl = "https://ej2.syncfusion.com/demos/src/chat-ui/images/bot.png" }; +} +
+ +
+ + + +{% endhighlight %} +{% endtabs %} + +> Ensure to include Syncfusion scripts and styles in _Layout.cshtml as per the getting started guide. Also, register ` in _Layout.cshtml.` + +## Run and Test + +### Start the Application: + +Navigate to your project folder and run: + +```bash + +dotnet run + +``` + +Open your app in the browser and chat with your dialogflow-powered bot. + +![ChatUI with Dialogflow](../images/dialogflow.png) + +## Troubleshooting: + +* `Permission Denied`: Ensure the service account has the `Dialogflow API Client` role in the Google Cloud Console. +* `CORS Error`: Configure CORS in Program.cs if needed (e.g., app.UseCors()). +* `No Response`: Test intents in the Dialogflow Console simulator to ensure they are configured correctly. +* `Quota Exceeded`: Check Dialogflow API quotas in the Google Cloud Console. +* `Network Issues`: Confirm the application is running and the API URL is correct. +* `Invalid Credentials`: Verify the service account JSON or configuration settings are correctly set up. diff --git a/ej2-asp-core-mvc/chat-ui/images/dialogflow.png b/ej2-asp-core-mvc/chat-ui/images/dialogflow.png new file mode 100644 index 0000000000..8b96f608e9 Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/dialogflow.png differ diff --git a/ej2-asp-core-mvc/chat-ui/images/gemini.png b/ej2-asp-core-mvc/chat-ui/images/gemini.png new file mode 100644 index 0000000000..d548f62208 Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/gemini.png differ diff --git a/ej2-asp-core-mvc/chat-ui/images/openai.png b/ej2-asp-core-mvc/chat-ui/images/openai.png new file mode 100644 index 0000000000..3f56e695a9 Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/openai.png differ diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs new file mode 100644 index 0000000000..7eb7a85b01 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminicore.cs @@ -0,0 +1,79 @@ +using Mscc.GenerativeAI; + +namespace WebApplication4.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + // Initialize toolbar items + ViewModel.Items = new List + { + new ToolbarItemModel + { + iconCss = "e-icons e-refresh", + align = "Right", + } + }; + + // Initialize prompt suggestions + ViewModel.PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + } + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini25Flash); //Replace your model name here + + var response = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(response?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", response.Text); + return new JsonResult(response.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } + } diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs new file mode 100644 index 0000000000..f6b81bda01 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/geminimvc.cs @@ -0,0 +1,65 @@ +using Mscc.GenerativeAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ViewBag.Items = Items; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + return View(); + } + + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } + + + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini25Flash); //Replace your model name here + + var responseText = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(responseText?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", responseText?.Text); + return Json(responseText?.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor new file mode 100644 index 0000000000..c635693166 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/razor @@ -0,0 +1,111 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Syncfusion.EJ2 + +@{ + ViewData["Title"] = "AI Assistance with OpenAI"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).StopRespondingClick("stopRespondingClick").Render() +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper new file mode 100644 index 0000000000..5d1ce9f210 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/gemini-ai/tagHelper @@ -0,0 +1,107 @@ +@using Syncfusion.EJ2.InteractiveChat +@{ + ViewData["Title"] = "AI Assistance with Gemini"; +} + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs new file mode 100644 index 0000000000..c607b6fd0a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-core.cs @@ -0,0 +1,92 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + private readonly IChatClient _chatClient; + private readonly ILogger _logger; + + public HomeController(IChatClient chatClient, ILogger logger) + { + _chatClient = chatClient; + _logger = logger; + } + + public IActionResult Index() + { + var viewModel = new IndexViewModel(); + // Initialize toolbar items + viewModel.Items = new List + { + new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" } + }; + // Initialize prompt suggestions + viewModel.PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + return View(viewModel); + } + + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + // Use Ollama via IChatClient (from Program.cs) + var chatCompletion = await _chatClient.CompleteAsync(request.Prompt); + var responseText = chatCompletion.Message.Contents.FirstOrDefault()?.ToString(); + + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Ollama API returned no text."); + return BadRequest("No response from Ollama."); + } + + _logger.LogInformation("Ollama response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Ollama call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + + public IActionResult Error() + { + return View(); + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + [JsonPropertyName("prompt")] + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs new file mode 100644 index 0000000000..c118feda00 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/llm-model-mvc.cs @@ -0,0 +1,85 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using Mscc.GenerativeAI; +using Syncfusion.EJ2.Layouts; +using System.Text.Json.Serialization; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + private readonly IChatClient _chatClient; + private readonly ILogger _logger; + + public HomeController(IChatClient chatClient, ILogger logger) + { + _chatClient = chatClient; + _logger = logger; + } + + public IActionResult Index() + { + // Initialize toolbar items (like reference) + var items = new List + { + new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" } + }; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + ViewBag.Items = items; + + return View(); + } + + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + // Use Ollama via IChatClient + var chatCompletion = await _chatClient.CompleteAsync(request.Prompt); + var responseText = chatCompletion.Message.Contents.FirstOrDefault()?.ToString(); + + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Ollama API returned no text."); + return BadRequest("No response from Ollama."); + } + + _logger.LogInformation("Ollama response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Ollama call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class PromptRequest + { + [JsonPropertyName("prompt")] + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/razor new file mode 100644 index 0000000000..9b603a439e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/razor @@ -0,0 +1,90 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Syncfusion.EJ2 + +@{ + ViewData["Title"] = "AI Assistance"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).Render() +
+ + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper new file mode 100644 index 0000000000..7abe5633da --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/llm-model/tagHelper @@ -0,0 +1,85 @@ +@model AssistViewDemo.Controllers.IndexViewModel +@{ + ViewData["Title"] = "AI Assistance"; +} + +
+ + + +
+ + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs new file mode 100644 index 0000000000..5bc65aba86 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaicore.cs @@ -0,0 +1,89 @@ +using OpenAI; +using Azure; +using Azure.AI.OpenAI; +namespace WebApplication4.Pages +{ + public class IndexModel : PageModel + { + + public IndexViewModel ViewModel { get; set; } = new IndexViewModel(); + public void OnGet() + { + // Initialize toolbar items + ViewModel.Items = new List + { + new ToolbarItemModel + { + iconCss = "e-icons e-refresh", + align = "Right", + } + }; + + // Initialize prompt suggestions + ViewModel.PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + } + + public async Task OnPostGetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return new JsonResult(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } + + public class IndexViewModel + { + public List Items { get; set; } = new List(); + public string[] PromptSuggestionData { get; set; } + } + + public class PromptRequest + { + public string Prompt { get; set; } + } + + public class ToolbarItemModel + { + public string align { get; set; } + public string iconCss { get; set; } + } + } diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs new file mode 100644 index 0000000000..fdb042b819 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/openaimvc.cs @@ -0,0 +1,75 @@ +using OpenAI; +using OpenAI.Chat; +using Azure; +using Azure.AI.OpenAI; + +namespace AssistViewDemo.Controllers +{ + public class HomeController : Controller + { + + public List Items { get; set; } = new List(); + + public IActionResult Index() + { + Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" }); + ViewBag.Items = Items; + var PromptSuggestionData = new string[] + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + ViewBag.PromptSuggestionData = PromptSuggestionData; + return View(); + } + public class ToolbarItemModel + { + public string iconCss { get; set; } + public string align { get; set; } + } + [HttpPost] + public async Task GetAIResponse([FromBody] PromptRequest request) + { + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + // Azure OpenAI configuration + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure OpenAI."); + } + + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure OpenAI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor new file mode 100644 index 0000000000..561e97b36f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/razor @@ -0,0 +1,102 @@ +@using Syncfusion.EJ2.InteractiveChat + +@{ + ViewData["Title"] = "AI Assistance with OpenAI"; +} + +
+ @Html.EJS().AIAssistView("aiAssistView").BannerTemplate("#bannerContent").PromptSuggestions(ViewBag.PromptSuggestionData).PromptRequest("onPromptRequest").Created("onCreated").ToolbarSettings(new AIAssistViewToolbarSettings() +{ + Items = ViewBag.Items, + ItemClicked = "toolbarItemClicked" +}).StopRespondingClick("stopRespondingClick").Render() +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper new file mode 100644 index 0000000000..103c1b2da7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/ai-integrations/open-ai/tagHelper @@ -0,0 +1,107 @@ +@using Syncfusion.EJ2.InteractiveChat +@{ + ViewData["Title"] = "AI Assistance with Gemini"; +} + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs new file mode 100644 index 0000000000..08e0eb9fc7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/gemini.cs @@ -0,0 +1,62 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using Mscc.GenerativeAI; +using Syncfusion.EJ2.InteractiveChat; +using Newtonsoft.Json; + +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); +public HomeController(ILogger logger) +{ + _logger = logger; +} +public IActionResult Index() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-refresh", tooltip = "Refresh" }); + ViewBag.HeaderToolbar = HeaderToolbar; + var currentUser = new ChatUIUser { Id = "user1", User = "You" }; + var aiUser = new ChatUIUser { Id = "ai", User = "Gemini" }; + ViewBag.CurrentUser = currentUser; + ViewBag.AIUser = aiUser; + + return View(); +} + +[HttpPost] +public async Task GetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); // Replace Your Model Name Here + + var responseText = await model.GenerateContent(request.Prompt); + if (string.IsNullOrEmpty(responseText?.Text)) + { + _logger.LogError("Gemini AI API returned no text."); + return BadRequest("No response from Gemini AI."); + } + _logger.LogInformation("Gemini AI response received: {Response}", responseText.Text); + return Json(responseText.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini AI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string tooltip { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor new file mode 100644 index 0000000000..08eaac9cd2 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/gemini/razor @@ -0,0 +1,87 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Newtonsoft.Json +@using Syncfusion.EJ2 +@{ + ViewData["Title"] = "AI Chat with Gemini AI"; +} + +
+ @Html.EJS().ChatUI("chatUI").User(ViewBag.CurrentUser).HeaderText("Chat with Gemini AI").HeaderToolbar(new ChatUIToolbarSettings() { Items = ViewBag.HeaderToolbar, ItemClicked = "itemClicked" }).HeaderIconCss("e-icons e-ai-chat").EmptyChatTemplate("#emptyChatTemplate").MessageSend("onMessageSend").Created("onCreated").Render() +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs new file mode 100644 index 0000000000..835a39f831 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/openai.cs @@ -0,0 +1,75 @@ +using System.Diagnostics; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.AI; +using OpenAI; +using OpenAI.Chat; +using Syncfusion.EJ2.InteractiveChat; +using Newtonsoft.Json; +using Azure.AI.OpenAI; +using Azure; +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); +public HomeController(ILogger logger) +{ + _logger = logger; +} + +public IActionResult Index() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-refresh", tooltip = "Refresh" }); + ViewBag.HeaderToolbar = HeaderToolbar; + var currentUser = new ChatUIUser { Id = "user1", User = "You" }; + var aiUser = new ChatUIUser { Id = "ai", User = "Azure Open AI" }; + ViewBag.CurrentUser = currentUser; + ViewBag.AIUser = aiUser; + + return View(); +} + +[HttpPost] +public async Task GetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + + string responseText = completion.Value.Content[0].Text; + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure OpenAI API returned no text."); + return BadRequest("No response from Azure Open AI."); + } + _logger.LogInformation("Azure OpenAI response received: {Response}", responseText); + return Json(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure Open AI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string tooltip { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor new file mode 100644 index 0000000000..ec39532a80 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-MVC/openai/razor @@ -0,0 +1,87 @@ +@using Syncfusion.EJ2.InteractiveChat +@using Newtonsoft.Json +@using Syncfusion.EJ2 +@{ + ViewData["Title"] = "AI Chat with Azure Open AI"; +} + +
+ @Html.EJS().ChatUI("chatUI").User(ViewBag.CurrentUser).HeaderText("Chat with Azure Open AI").HeaderToolbar(new ChatUIToolbarSettings() { Items = ViewBag.HeaderToolbar, ItemClicked = "itemClicked" }).HeaderIconCss("e-icons e-ai-chat").EmptyChatTemplate("#emptyChatTemplate").MessageSend("onMessageSend").Created("onCreated").Render() +
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs new file mode 100644 index 0000000000..b0ef1d5362 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/gemini.cs @@ -0,0 +1,62 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using Mscc.GenerativeAI; // Correct namespace for Mscc.GenerativeAI package +using System.Threading.Tasks; + +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); + +public IndexModel(ILogger logger) +{ + _logger = logger; +} + +public void OnGet() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", type = "Button", iconCss = "e-icons e-refresh" }); + HeaderToolbar = HeaderToolbar; +} + +public async Task OnPostGetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string apiKey = ""; // Replace with your key + var googleAI = new GoogleAI(apiKey: apiKey); + var model = googleAI.GenerativeModel(model: Model.Gemini15Flash); // Replace Your Model Name Here + + var response = await model.GenerateContent(request.Prompt); + + if (string.IsNullOrEmpty(response?.Text)) + { + _logger.LogError("Gemini API returned no text."); + return BadRequest("No response from Gemini."); + } + + _logger.LogInformation("Gemini response received: {Response}", response.Text); + return new JsonResult(response.Text); + } + catch (Exception ex) + { + _logger.LogError("Exception in Gemini call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class PromptRequest +{ + public string Prompt { get; set; } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string type { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper new file mode 100644 index 0000000000..fa35b8f30f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/gemini/tagHelper @@ -0,0 +1,101 @@ +@page +@model IndexModel +@{ + ViewData["Title"] = "Chat UI with Gemini"; +} + + +
+ + + + +
+ +@section Scripts { + +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs new file mode 100644 index 0000000000..afb07f147b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/openai.cs @@ -0,0 +1,73 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using System.Threading.Tasks; +using OpenAI.Chat; +using OpenAI; +using Azure; +using Azure.AI.OpenAI; +private readonly ILogger _logger; +public List HeaderToolbar { get; set; } = new List(); + +public IndexModel(ILogger logger) +{ + _logger = logger; +} + +public void OnGet() +{ + HeaderToolbar.Add(new ToolbarItemModel { align = "Right", type = "Button", iconCss = "e-icons e-refresh" }); + HeaderToolbar = HeaderToolbar; +} + +public async Task OnPostGetAIResponse([FromBody] PromptRequest request) +{ + try + { + _logger.LogInformation("Received request with prompt: {Prompt}", request?.Prompt); + + if (string.IsNullOrEmpty(request?.Prompt)) + { + _logger.LogWarning("Prompt is null or empty."); + return BadRequest("Prompt cannot be empty."); + } + + string endpoint = "Your_Azure_OpenAI_Endpoint"; // Replace with your Azure OpenAI endpoint + string apiKey = "YOUR_AZURE_OPENAI_API_KEY"; // Replace with your Azure OpenAI API key + string deploymentName = "YOUR_DEPLOYMENT_NAME"; // Replace with your Azure OpenAI deployment name (e.g., gpt-4o-mini) + + var credential = new AzureKeyCredential(apiKey); + var client = new AzureOpenAIClient(new Uri(endpoint), credential); + var chatClient = client.GetChatClient(deploymentName); + + var chatCompletionOptions = new ChatCompletionOptions(); + var completion = await chatClient.CompleteChatAsync( + new[] { new UserChatMessage(request.Prompt) }, + chatCompletionOptions + ); + string responseText = completion.Value.Content[0].Text; + + if (string.IsNullOrEmpty(responseText)) + { + _logger.LogError("Azure Open AI API returned no text."); + return BadRequest("No response from Azure Open AI."); + } + + _logger.LogInformation("Azure Open AI response received: {Response}", responseText); + return new JsonResult(responseText); + } + catch (Exception ex) + { + _logger.LogError("Exception in Azure Open AI call: {Message}", ex.Message); + return BadRequest($"Error generating response: {ex.Message}"); + } +} +public class PromptRequest +{ + public string Prompt { get; set; } +} +public class ToolbarItemModel +{ + public string align { get; set; } + public string iconCss { get; set; } + public string type { get; set; } +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper new file mode 100644 index 0000000000..ad95de3f5f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/ai-integrations/Asp.net-core/openai/tagHelper @@ -0,0 +1,98 @@ +@page +@model IndexModel +@{ + ViewData["Title"] = "Chat UI with Azure Open AI"; +} + + +
+ + + + +
+ +@section Scripts { + +} diff --git a/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/razor b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/razor new file mode 100644 index 0000000000..7c643cd891 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/razor @@ -0,0 +1,9 @@ +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + +@Html.EJS().DatePicker("datepicker") + .ServerTimezoneOffset(serverTimezoneOffset) + .Value(initialDate) + .Render() diff --git a/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/tagHelper new file mode 100644 index 0000000000..79f54501f7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/tagHelper @@ -0,0 +1,7 @@ + +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/timezone.cs b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/timezone.cs new file mode 100644 index 0000000000..a4db34d06a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datepicker/timezone-cs1/timezone.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; + +namespace EJ2CoreSampleBrowser.Controllers +{ + public class HomeController : Controller + { + public ActionResult Datepicker() + { + ViewBag.serverTimezoneOffset=5.5; + ViewBag.initalDate=new Date(); + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/razor b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/razor new file mode 100644 index 0000000000..0de998bc68 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/razor @@ -0,0 +1,9 @@ +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + +@Html.EJS().DateTimePicker("datetimepicker") + .ServerTimezoneOffset(serverTimezoneOffset) + .Value(initialDate) + .Render() diff --git a/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/tagHelper new file mode 100644 index 0000000000..79f54501f7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/tagHelper @@ -0,0 +1,7 @@ + +@{ + var serverTimezoneOffset = 5.5; + var initialDate = new Date(); +} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/timezone.cs b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/timezone.cs new file mode 100644 index 0000000000..789ffb657a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/datetimepicker/timezone-cs1/timezone.cs @@ -0,0 +1,18 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; + +namespace EJ2CoreSampleBrowser.Controllers +{ + public class HomeController : Controller + { + public ActionResult DateTimepicker() + { + ViewBag.serverTimezoneOffset=5.5; + ViewBag.initalDate=new Date(); + return View(); + } + } +} diff --git a/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md b/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md index 9effedceeb..51d6078b84 100644 --- a/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md +++ b/ej2-asp-core-mvc/datepicker/EJ2_ASP.MVC/timezone-behavior.md @@ -14,7 +14,7 @@ The DatePicker component displays and maintains the selected date value based on N> if the system time zone is changed dynamically after a value is selected, the DatePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DatePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DatePicker component */ -let datepicker: DatePicker = new DatePicker({ - placeholder: "Select Date", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datepicker.appendTo('#datepicker'); +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datepicker/timezone-cs1/razor %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md b/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md index 9effedceeb..59d74e8696 100644 --- a/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md +++ b/ej2-asp-core-mvc/datepicker/EJ2_ASP.NETCORE/timezone-behavior.md @@ -14,7 +14,7 @@ The DatePicker component displays and maintains the selected date value based on N> if the system time zone is changed dynamically after a value is selected, the DatePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DatePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DatePicker component */ -let datepicker: DatePicker = new DatePicker({ - placeholder: "Select Date", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datepicker.appendTo('#datepicker'); +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datepicker/timezone-cs1/tagHelper %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md index e41385de28..f89a699b60 100644 --- a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md +++ b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.MVC/timezone-behavior.md @@ -14,7 +14,7 @@ The DateTimePicker component displays and maintains the selected date and time v N> if the system time zone is changed dynamically after a value is selected, the DateTimePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DateTimePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DateTimePicker component */ -let datetimepicker: DateTimePicker = new DateTimePicker({ - placeholder: "Select Date Time", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datetimepicker.appendTo('#datetimepicker'); +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datetimepicker/timezone-cs1/razor %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md index 0dd0647856..c41cf8cf1b 100644 --- a/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md +++ b/ej2-asp-core-mvc/datetimepicker/EJ2_ASP.NETCORE/timezone-behavior.md @@ -14,7 +14,7 @@ The DateTimePicker component displays and maintains the selected date and time v N> if the system time zone is changed dynamically after a value is selected, the DateTimePicker will **not update or shift** the selected value. The component preserves the original selection, ensuring a stable and reliable user experience. -## `serverTimezoneOffset` +## serverTimezoneOffset The `serverTimezoneOffset` property allows you to specify the server's time zone offset from UTC in **hours** or **fractional hours**. This is useful when binding values from the server to ensure they are interpreted correctly on the client side. @@ -26,16 +26,10 @@ The `serverTimezoneOffset` property allows you to specify the server's time zone N> The `serverTimezoneOffset` property is applicable **only for pre-bound values** (i.e., values set during initialization or data binding). It does **not affect** values selected by the user during runtime. -### Example +The following example demonstrates how to configure the serverTimezoneOffset property -```ts -import { DateTimePicker } from '@syncfusion/ej2-calendars'; - -/* Initialize the DateTimePicker component */ -let datetimepicker: DateTimePicker = new DateTimePicker({ - placeholder: "Select Date Time", - width: "250px", - serverTimezoneOffset: 5.5 // Example: UTC+5:30 for IST -}); - -datetimepicker.appendTo('#datetimepicker'); \ No newline at end of file +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/datetimepicker/timezone-cs1/tagHelper %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/paste-cleanup.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/paste-cleanup.md index 050be0a6dc..a8393ba785 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/paste-cleanup.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/paste-cleanup.md @@ -1,6 +1,6 @@ --- layout: post -title: Paste Cleanup in ##Platform_Name## Rich Text Editor Component +title: Paste Cleanup in ##Platform_Name## Syncfusion Rich Text Editor Component description: Learn here all about Paste Cleanup in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Paste Cleanup @@ -8,50 +8,61 @@ publishingplatform: ##Platform_Name## documentation: ug --- - # Paste Cleanup in ##Platform_Name## Rich Text Editor Control -The Rich Text Editor simplifies the conversion of Microsoft Word content to HTML format, preserving formatting and styles. The `PasteCleanup` settings property allows you to control the formatting and styles when pasting content into the editor. The following settings are available to clean up the content: +The Rich Text Editor simplifies the conversion of Microsoft Word content to HTML format, preserving formatting and styles. The `pasteCleanup` settings property (see [pasteCleanupSettingsModel](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_PasteCleanupSettings)) allows you to control the formatting and styles when pasting content into the editor. The following settings are available to clean up the content: | API | Description | Default Value | Type | |:----------------:|:---------:|:-----------------------------:|:---------:| -| [Prompt](#Prompt) | Invokes a Prompt dialog with paste options when pasting content into the editor| false | boolean | -| [PlainText](#plain-text) | Paste the content as plain text| false | boolean | -| [KeepFormat](#keep-format) | Maintains the same format as the copied content| true | boolean | -| [DeniedTags](#denied-tags) | Ignores specified tags when pasting HTML content| null | string[] | -| [DeniedAttrs](#denied-attributes) | Filters out specified attributes from the pasted content| null | string[] | -| [AllowedStyleProps](#allowed-style-properties) | Accepts specified style attributes and removes others from the pasted content| ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', 'height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width', 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width'] | string[] | +| [Prompt](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorPasteCleanupSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorPasteCleanupSettings_Prompt) | Displays a dialog box when content is pasted, allowing users to choose how the content should be inserted—either as plain text, with formatting, or cleaned HTML. | false | boolean | +| [PlainText](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorPasteCleanupSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorPasteCleanupSettings_PlainText) | Paste the content as plain text| false | boolean | +| [KeepFormat](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorPasteCleanupSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorPasteCleanupSettings_KeepFormat) | Retains the original formatting of the pasted content, including styles, fonts, and structure.| true | boolean | +| [DeniedTags](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorPasteCleanupSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorPasteCleanupSettings_DeniedTags) | Specifies a list of HTML tags to be removed from the pasted content, such as `