Skip to content

Commit 380c306

Browse files
committed
chore: update viewer images for AI Insights
- updated the images and descriptions for: - HTML5 SASS viewer - NARV - NBV - WPF viewer - changed the overview image. - refactored the Overview and Feature Concept sections. - added Customization section with code snippets. WIP! part of: #5332
1 parent c1cf1e1 commit 380c306

File tree

11 files changed

+49
-19
lines changed

11 files changed

+49
-19
lines changed
-21.9 KB
Loading

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/overview.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,13 @@ The toolbar of the HTML5 report viewer provides basic functionality for interact
4444
<th style="text-align: center">Icon</th>
4545
<th>Purpose</th>
4646
</tr>
47-
<tr>
48-
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="m320 32 54.3 137.7L512 224l-137.7 54.3L320 416l-54.3-137.7L128 224l137.7-54.3zM94 350 0 384l94 34 34 94 34-94 94-34-94-34-34-94zM70.6 70.6 0 96l70.5 25.5L96 192l25.5-70.5L192 96l-70.5-25.5L96 0 70.5 70.5Z"></path></svg></td>
49-
<td>Opens/Closes the AI Prompt Dialog when the [AI-Powered Insights]({%slug telerikreporting/designing-reports/adding-interactivity-to-reports/ai-powered-insights%}) functionality has been enabled.</td>
50-
</tr>
5147
<tr>
5248
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="M479.9 416c-57.7-56.6-136.7-96-223.9-96v128L32 256 256 64v128c122.2 0 221.5 102.4 223.9 224z"></path></svg></td>
53-
<td>Navigate Backward</td>
49+
<td>Navigates Backward</td>
5450
</tr>
5551
<tr>
5652
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="M256 192V64l224 192-224 192V320c-87.2 0-166.2 39.4-223.9 96C34.5 294.4 133.9 192 256 192z"></path></svg></td>
57-
<td>Navigate Forward</td>
53+
<td>Navigates Forward</td>
5854
</tr>
5955
<tr>
6056
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z"></path></svg></td>
@@ -106,15 +102,19 @@ The toolbar of the HTML5 report viewer provides basic functionality for interact
106102
</tr>
107103
<tr>
108104
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="M448 480V96h-32v352H128c-17.6 0-32-14.4-32-32s14.4-32 32-32h256V32H128c-35.2 0-64 28.8-64 64v320c0 23.6 12.9 44.2 32 55.3 9.4 5.5 20.4 8.7 32 8.7zM128 64h224v288H128zm192 64H160V96h160zm0 128H160v-32h160zm-32-64H160v-32h128z"></path></svg></td>
109-
<td>Toggle the Document Map</td>
105+
<td>Toggles the Document Map</td>
110106
</tr>
111107
<tr>
112108
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="M64 64v32l160 160v224l64-64V256L448 96V64z"></path></svg></td>
113-
<td>Toggle the Parameters Area</td>
109+
<td>Toggles the Parameters Area</td>
114110
</tr>
115111
<tr>
116112
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="M365.3 320h-22.7l-26.7-26.7C338.5 265.7 352 230.4 352 192c0-88.4-71.6-160-160-160S32 103.6 32 192s71.6 160 160 160c38.4 0 73.7-13.5 101.3-36.1l26.7 26.7v22.7L434.7 480l45.3-45.3L365.3 320zM64 192c0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128S64 262.7 64 192z"></path></svg></td>
117-
<td>Open the Search Dialog</td>
113+
<td>Opens the Search Dialog</td>
114+
</tr>
115+
<tr>
116+
<td><svg style="height: 35px; padding: 5px; display: block; margin: auto;" viewBox="0 0 512 512"><path d="m320 32 54.3 137.7L512 224l-137.7 54.3L320 416l-54.3-137.7L128 224l137.7-54.3zM94 350 0 384l94 34 34 94 34-94 94-34-94-34-34-94zM70.6 70.6 0 96l70.5 25.5L96 192l25.5-70.5L192 96l-70.5-25.5L96 0 70.5 70.5Z"></path></svg></td>
117+
<td>Toggles the AI Prompt Dialog when the [AI-Powered Insights]({%slug telerikreporting/designing-reports/adding-interactivity-to-reports/ai-powered-insights%}) functionality has been enabled.</td>
118118
</tr>
119119
</table>
120120
</body>
Loading
-54.7 KB
Loading

embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/overview.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ The Native Angular Report Viewer is a native Angular component built with [Kendo
3535
</tr>
3636
<tr>
3737
<td><svg style="height: 35px; padding: 5px;" viewBox="0 0 512 512"><path d="M479.9 416c-57.7-56.6-136.7-96-223.9-96v128L32 256 256 64v128c122.2 0 221.5 102.4 223.9 224z"></path></svg></td>
38-
<td>Navigate Backward</td>
38+
<td>Navigates Backward</td>
3939
</tr>
4040
<tr>
4141
<td><svg style="height: 35px; padding: 5px;" viewBox="0 0 512 512"><path d="M256 192V64l224 192-224 192V320c-87.2 0-166.2 39.4-223.9 96C34.5 294.4 133.9 192 256 192z"></path></svg></td>
42-
<td>Navigate Forward</td>
42+
<td>Navigates Forward</td>
4343
</tr>
4444
<tr>
4545
<td><svg style="height: 35px; padding: 5px;" viewBox="0 0 512 512"><path d="M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm128 306.7L338.7 384 256 301.3 173.3 384 128 338.7l82.7-82.7-82.7-82.7 45.3-45.3 82.7 82.7 82.7-82.7 45.3 45.3-82.7 82.7 82.7 82.7z"></path></svg></td>
@@ -91,15 +91,19 @@ The Native Angular Report Viewer is a native Angular component built with [Kendo
9191
</tr>
9292
<tr>
9393
<td><svg style="height: 35px; padding: 5px;" viewBox="0 0 512 512"><path d="M365.3 320h-22.7l-26.7-26.7C338.5 265.7 352 230.4 352 192c0-88.4-71.6-160-160-160S32 103.6 32 192s71.6 160 160 160c38.4 0 73.7-13.5 101.3-36.1l26.7 26.7v22.7L434.7 480l45.3-45.3L365.3 320zM64 192c0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128S64 262.7 64 192z"></path></svg></td>
94-
<td>Open the Search Dialog</td>
94+
<td>Opens the Search Dialog</td>
9595
</tr>
96+
<tr>
97+
<td><svg style="height: 35px; padding: 5px;" viewBox="0 0 512 512"><path d="m320 32 54.3 137.7L512 224l-137.7 54.3L320 416l-54.3-137.7L128 224l137.7-54.3zM94 350 0 384l94 34 34 94 34-94 94-34-94-34-34-94zM70.6 70.6 0 96l70.5 25.5L96 192l25.5-70.5L192 96l-70.5-25.5L96 0 70.5 70.5Z"></path></svg></td>
98+
<td>Toggles the AI Prompt Dialog when the [AI-Powered Insights]({%slug telerikreporting/designing-reports/adding-interactivity-to-reports/ai-powered-insights%}) functionality has been enabled.</td>
99+
</tr>
96100
<tr>
97101
<td><svg style="height: 35px; padding: 5px;" viewBox="0 0 512 512"><path d="M448 32H32v448h448V32h-32zm0 416H64V64h384v384zM96 96h96v320H96z"></path></svg></td>
98-
<td>Show/hide the Document Map</td>
102+
<td>Toggles the Document Map</td>
99103
</tr>
100104
<tr>
101105
<td><svg style="height: 35px; padding: 5px;" viewBox="0 0 512 512"><path d="M64 480h416V32H32v448h32zm0-416h384v384H64V64zm256 32h96v320h-96z"></path></svg></td>
102-
<td>Show/hide the Parameters Area</td>
106+
<td>Toggles the Parameters Area</td>
103107
</tr>
104108
</table>
105109

embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ The Native Blazor Report Viewer is a native Blazor component that can be used in
4848
|__Zoom Out__|Allows the user to decrease the zoom level of the report content.
4949
|__Switch the Scale mode__|Switches the report view scale mode between fitting the report to the entire page view port or to the viewer's view port.
5050
|__Search__|Allows searching in the report content.
51+
|__AI Prompt__|Toggles the AI Prompt Dialog when the [AI-Powered Insights]({%slug telerikreporting/designing-reports/adding-interactivity-to-reports/ai-powered-insights%}) functionality has been enabled.
5152

5253
## Requirements
5354

-53.1 KB
Loading

embedding-reports/display-reports-in-applications/wpf-application/overview.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ The toolbar of the WPF Report Viewer provides basic functionality for interactin
3232
* Show/Hide document map
3333
* Show/Hide parameters area
3434
* Zooming
35+
* Search in report contents
36+
* Show/Hide the AI Prompt Dialog. Currently supported only when the viewer is connected to a remote Telerik Reporting REST Service that has the [AI-Powered Insights]({%slug telerikreporting/designing-reports/adding-interactivity-to-reports/ai-powered-insights%}) functionality enabled.
3537

3638
To use the WPF Report Viewer, you need a WPF application. To create such, you need the following tools installed:
3739

interactivity/AI-powered-insights.md

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,18 @@ position: 1
1010

1111
# AI-Powered Insights Overview
1212

13-
The AI-powered insights during report preview provide comprehensive capabilities, including response generation, prompt creation, AI output interaction, and execution of predefined commands.
13+
**AI Insights** is an AI-powered feature available during the report preview. It enables users to execute predefined or custom prompts on the core data of the previewed report, uncovering valuable insights, generating summaries, or answering specific questions. The feature also supports fine-tuning of the embedded Retrieval-Augmented Generation (RAG) algorithms, optimizing them to deliver accurate responses while minimizing token consumption.
1414

15-
![The UI of the AI system after configuration.](images/UIOfTheAI.png)
15+
![The UI of the AI system after configuration.](images/angular-report-viewer-with-ai-insights.png)
1616

1717
## Feature Concept
1818

19-
To bring the power of Generative AI (GenAI) into reporting workflows, we are introducing a **AI Prompt** that integrates seamlessly with our [HTML5-based Report Viewers]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}) and the [WPF Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/wpf-application/overview%}). This feature is designed to enhance productivity and user experience by enabling intelligent interactions with report content.
19+
To bring the power of Generative AI (GenAI) into reporting workflows, we are introducing a **AI Prompt** dialog that integrates seamlessly in the report viewers. The dialog provides a convenient UI for sending predefined or custom prompts to an AI model, configured in the Reporting REST Service. The prompts and responses returned from the AI model are displayed in the Output panel of the dialog, allowing for easier tracking of the conversation.
2020

21-
>note The **AI Prompt** functionality will be made available for the other [Report Viewers]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/overview%}) as well, in the releases to come.
21+
22+
**TODO**: explain about the context that is kept within one report and is cleared when changing the report parameters or navigating to another report.
23+
24+
The feature is supported by all [web report viewers]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}) and by the [WPF Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/wpf-application/overview%}) connected to a remote Reporting REST Service.
2225

2326
### Key Features:
2427

@@ -130,6 +133,27 @@ Below is an example of how to configure the project for the `AzureOpenAI` option
130133
</Telerik.Reporting>
131134
````
132135

136+
137+
## Customization
138+
The workflow of instantiating the AI Client and passing a request to it can be customized by overriding the following methods of the [ReportsController](/api/telerik.reporting.services.webapi.reportscontrollerbase) class:
139+
* [CreateAIThread(string, string, ClientReportSource)](/api/telerik.reporting.services.webapi.reportscontrollerbase#Telerik_Reporting_Services_WebApi_ReportsControllerBase_CreateAIThread_System_String_System_String_Telerik_Reporting_Services_WebApi_ClientReportSource_) - called when the AI Prompt dialog is to be displayed. In this method the AI Client is instantiated either using the settings provided in the application configuration file, or by using the AIClientFactory instance provided with the Reporting REST Service Configuration (see [Extensibility]({%slug telerikreporting/designing-reports/adding-interactivity-to-reports/ai-powered-insights%}#extensibility) below. Providing custom logic in the method allows to control the UI properties of the AI Prompt dialog: changing or disabling the consent message, enabling/disabling custom prompts, etc. This logic can be based on the currently previewed report, represented by the property **ClientReportSource**.
140+
141+
{{source=CodeSnippets\MvcCS\Controllers\ReportsController.cs region=ReportsController_CreateAIThread_CheckReportSource}}
142+
143+
144+
* [UpdateAIPrompts(ClientReportSource, AIThreadInfo)](/api/telerik.reporting.services.webapi.reportscontrollerbase#collapsible-Telerik_Reporting_Services_WebApi_ReportsControllerBase_UpdateAIPrompts_Telerik_Reporting_Services_WebApi_ClientReportSource_Telerik_Reporting_Services_Engine_AIThreadInfo_) - called internally during the execution of **CreateAIThread()** method. Provides easier access to the predefined prompts, allowing to alter or disable them based on a custom logic like the role of the currently logged user, or on the currently previewed report, represented by the property **ClientReportSource**.
145+
146+
{{source=CodeSnippets\MvcCS\Controllers\ReportsController.cs region=ReportsController_CreateAIThread_UpdateAIPrompts}}
147+
148+
149+
* [GetAIResponse(string, string, string, string, AIQueryArgs)](/api/telerik.reporting.services.webapi.reportscontrollerbase#Telerik_Reporting_Services_WebApi_ReportsControllerBase_GetAIResponse_System_String_System_String_System_String_System_String_Telerik_Reporting_Services_Engine_AIQueryArgs_) - called every time when a prompt is sent to the AI model. Allows for examining or altering the prompt sent from the client, inspecting the state of the RAG optimization, or checking the estimated amount of tokens that the prompt will consume, by implementing a callback function assigned to the [ConfirmationCallback](/api/telerik.reporting.services.engine.aiqueryargs#collapsible-Telerik_Reporting_Services_Engine_AIQueryArgs_ConfirmationCallBack) property.
150+
151+
{{source=CodeSnippets\MvcCS\Controllers\ReportsController.cs region=ReportsController_CreateAIThread_ModifyPrompt}}
152+
153+
{{source=CodeSnippets\MvcCS\Controllers\ReportsController.cs region=ReportsController_CreateAIThread_ConfirmationCallback_TokenCount}}
154+
155+
{{source=CodeSnippets\MvcCS\Controllers\ReportsController.cs region=ReportsController_CreateAIThread_ConfirmationCallback_RAGOptimization}}
156+
133157
## Extensibility
134158

135159
If necessary, the Reporting engine can use a custom `Telerik.Reporting.AI.IClient` implementation, which can be registered in the Reporting REST Service configuration:
@@ -148,7 +172,6 @@ static Telerik.Reporting.AI.IClient GetCustomAIClient()
148172
}
149173
````
150174

151-
>note The configured predefined prompts can be modified at runtime by overriding the `UpdateAIPrompts` method of the [ReportsController](/api/telerik.reporting.services.webapi.reportscontrollerbase) class.
152175

153176
## See Also
154177

interactivity/images/UIOfTheAI.png

-68.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)