Skip to content

Commit 424f5d1

Browse files
Merge branch 'development' into 983303-updatedmention-d
2 parents 8565473 + 6cc0d2e commit 424f5d1

40 files changed

+644
-959
lines changed

blazor-toc.html

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -682,8 +682,8 @@
682682
<li><a href="/blazor/ai-assistview/assist-view">Assist view</a></li>
683683
<li>AI Integrations
684684
<ul>
685-
<li><a href="/blazor/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a></li>
686-
<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Integration with Azure Open AI</a></li>
685+
<li><a href="/blazor/ai-assistview/ai-integrations/gemini-integration">Google Gemini</a></li>
686+
<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Azure Open AI</a></li>
687687
</ul>
688688
</li>
689689
<li><a href="/blazor/ai-assistview/toolbar-items">Toolbar items</a></li>
@@ -1445,12 +1445,6 @@
14451445
</ul>
14461446
</li>
14471447
<li><a href="/blazor/chat-ui/messages">Messages</a></li>
1448-
<li>AI Integrations
1449-
<ul>
1450-
<li><a href="/blazor/chat-ui/ai-integrations/gemini-integration">Integration with Google Gemini</a></li>
1451-
<li><a href="/blazor/chat-ui/ai-integrations/openai-integration">Integration with Open AI</a></li>
1452-
</ul>
1453-
</li>
14541448
<li><a href="/blazor/chat-ui/timebreak">Time break</a></li>
14551449
<li><a href="/blazor/chat-ui/timestamp">Timestamp</a></li>
14561450
<li><a href="/blazor/chat-ui/typing-indicator">Typing indicator</a></li>

blazor/ai-assistview/ai-integrations/gemini-integration.md

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ control: AI AssistView
77
documentation: ug
88
---
99

10-
# Integration of Gemini AI With Blazor AI AssistView component
10+
# Gemini AI With Blazor AI AssistView component
1111

1212
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in applications.
1313

1414
## Prerequisites
1515

16-
* Google account to generate an API key for accessing Gemini AI
17-
* Syncfusion AI AssistView for Blazor package (Syncfusion.Blazor.InteractiveChat) installed in the project
18-
* Markdig package available in the project for Markdown-to-HTML conversion (required by the sample code)
16+
* Google account to generate an API key for accessing [Gemini AI](https://ai.google.dev/gemini-api/docs/quickstart)
17+
* Syncfusion AI AssistView for Blazor package [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project.
18+
* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code).
1919

2020
## Getting Started with the AI AssistView Component
2121

@@ -29,31 +29,31 @@ Install the Syncfusion Blazor package in the application.
2929

3030
```bash
3131

32-
Install-Package Syncfusion.Blazor.InteractiveChat
32+
Nuget\Install-Package Syncfusion.Blazor.InteractiveChat
3333

3434
```
3535

3636
Install the Gemini AI package in the application.
3737

3838
```bash
3939

40-
Install-Package Mscc.GenerativeAI
40+
Nuget\Install-Package Mscc.GenerativeAI
4141

4242
```
4343

4444
## Generate API Key
4545

46-
1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with a Google account. Create a new account if needed.
46+
1. Go to [Google AI Studio](https://aistudio.google.com/app/api-keys) and sign in with a google account. Create a new account if needed.
4747

48-
2. Select Get API Key from the left menu or the top-right of the dashboard.
48+
2. Select `Get API key` from the left menu or the top-right of the dashboard.
4949

50-
3. Choose Create API Key. Select an existing Google Cloud project or create a new one, then proceed.
50+
3. Choose `Create API key`. Select an existing google cloud project or create a new one, then proceed.
5151

5252
4. After creating or selecting a project, an API key is generated and displayed. Copy the key and store it securely, as it may be shown only once.
5353

5454
> Security note: Do not commit API keys to version control. Use environment variables, a secret manager, or a server-side proxy in production.
5555
56-
## Integration Gemini AI with AI AssistView
56+
## Gemini AI with AI AssistView
5757

5858
* Add the generated API key in the following line.
5959

@@ -66,6 +66,11 @@ const string GeminiApiKey = 'Place your API key here';
6666
{% tabs %}
6767
{% highlight razor %}
6868

69+
@using Syncfusion.Blazor.InteractiveChat
70+
@using Syncfusion.Blazor.Navigations
71+
@using Mscc.GenerativeAI
72+
@using Markdig
73+
6974
<div class="aiassist-container" style="height: 350px; width: 650px;">
7075
<SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
7176
<AssistViews>

blazor/ai-assistview/ai-integrations/openai-integration.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ control: AI AssistView
77
documentation: ug
88
---
99

10-
# Integration of Azure OpenAI With Blazor AI AssistView component
10+
# Azure OpenAI With Blazor AI AssistView component
1111

1212
The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your applications.
1313

1414
## Prerequisites
1515

16-
- An Azure account with access to `Azure Open AI` services and a generated API key.
17-
- Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in the project
16+
- An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key.
17+
- Syncfusion AI AssistView for Blazor [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed in the project
1818

1919
## Getting Started with the AI AssistView Component
2020

@@ -49,15 +49,15 @@ Note: The sample below uses HttpClient directly and does not require the Azure/O
4949

5050
1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource.
5151

52-
2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL.
52+
2. Under Resource Management, select keys and endpoint to retrieve your API key and endpoint URL.
5353

54-
3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration.
54+
3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration.
5555

5656
4. Store these values securely, as they will be used in your application.
5757

5858
> `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.
5959
60-
## Integration Azure OpenAI with AI AssistView
60+
## Azure OpenAI with AI AssistView
6161

6262
- Configure your Azure OpenAI endpoint, API key, and deployment name in your **Program.cs** (or using your preferred configuration mechanism).
6363

blazor/ai-developer-tools/copilot-extension.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Before using this extension, ensure you have:
3232
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
3333
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
3434
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
35-
* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation)
35+
* An active [API KEY](https://syncfusion.com/account/api-key)
3636

3737
## Unlimited Access
3838

blazor/ai-developer-tools/mcp-server.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor
2424
Before using [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant), ensure you have:
2525

2626
* Required [node](https://nodejs.org/en/) version >= 18
27-
* A [compatible MCP client](https://modelcontextprotocol.io/clients) ([Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio](https://www.syncfusion.com/code-studio/), VS Code with GitHub Copilot, etc.)
27+
* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio](https://www.syncfusion.com/code-studio/), etc.)
2828
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
2929
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
3030
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
3131
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
32-
* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation)
32+
* An active [API KEY](https://syncfusion.com/account/api-key)
3333

3434
## Unlimited Access
3535

@@ -54,7 +54,7 @@ Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to co
5454
- **Arguments**: -y
5555
- **Server name**: syncfusionBlazorAssistant
5656

57-
You need to add your [Syncfusion API key](https://staging.syncfusion.com/account/user-token-generation) as an env parameter in the configuration file:
57+
You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file:
5858

5959
```json
6060
"env": {

blazor/ai-developer-tools/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ To use the AI Developer Tools, you need:
2727
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
2828
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
2929
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
30-
* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation)
30+
* An active [API KEY](https://syncfusion.com/account/api-key)
3131
* A [Blazor application that includes SyncfusionBlazor](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
3232

3333
## Unlimited Access

blazor/chart/category-axis.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ The category labels are positioned between ticks by default, but the [LabelPlace
9999

100100
## Range and interval
101101

102-
The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Maximum), and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Interval) properties can be used to customize the range of the [Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html#Syncfusion_Blazor_Charts_ValueType_Category) axis.
102+
Customize the category axis range using the [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Minimum), [Maximum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Maximum), and [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Interval) properties of the [Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html#Syncfusion_Blazor_Charts_ValueType_Category) axis.
103103

104104
```cshtml
105105
@@ -142,7 +142,7 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha
142142

143143
## Indexed category axis
144144

145-
The category axis can also be rendered using the data source index values. This can be achieved by setting the [IsIndexed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_IsIndexed) property in the axis to **true**.
145+
Render the category axis using data source index values by setting the [IsIndexed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_IsIndexed) property to **true**. This aligns category positions based on index rather than distinct category text.
146146

147147
```cshtml
148148
@@ -191,10 +191,10 @@ The category axis can also be rendered using the data source index values. This
191191

192192
![Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)
193193

194-
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.
194+
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its feature highlights, and explore the [Blazor Chart example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know the various chart types and how to represent time-dependent data, showing trends at equal intervals.
195195

196196
## See also
197197

198198
* [Data Label](./data-labels)
199199
* [Tooltip](./tool-tip)
200-
* [Marker](./data-markers)
200+
* [Marker](./data-markers)

blazor/chart/chart-dimensions.md

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
11
---
22
layout: post
33
title: Chart Dimensions in Blazor Charts Component | Syncfusion
4-
description: Checkout and learn here all about Chart Dimensions in Syncfusion Blazor Charts component and much more.
4+
description: Learn how to configure chart dimensions in the Syncfusion Blazor Charts component, including sizing by container, explicit pixel sizes, and percentage-based width and height.
55
platform: Blazor
66
control: Chart
77
documentation: ug
88
---
99

1010
# Chart Dimensions in Blazor Charts Component
1111

12-
N>
13-
* When no size is specified, the default height and width are 450px and 600px, respectively.
14-
* To avoid delayed rendering, architectural changes were made to the Chart when the width/height were specified [in percentages](#In-Percentage) or [through style settings](#Size-for-Container) applied in the component's parent. As a result, the Chart is initially rendered with the default width and height and then redrawn by adjusting only the size of the Chart in a responsive manner. By including the following script in the header tag, the redrawn scenario can now be avoided.
12+
N>
13+
When dimensions are defined using [percentages](#in-percentage) or [through style settings](#size-for-container), the chart initially renders at default size, then redraws responsively based on dimensions. To avoid this redraw, include the following script in the section of your HTML page.
1514

1615
```html
1716
<head>
1817
...
19-
<!--- To avoid the redraw scenario, add the CDN link below. --->
18+
<!-- To avoid the redraw scenario, add the CDN link below. -->
2019
<script src="https://cdn.syncfusion.com/blazor/syncfusion-blazor-base.min.js"></script>
2120
</head>
2221
```
2322

2423
## Size for container
2524

26-
The chart can be scaled to fit the container. As shown below, the size can be set using CSS.
25+
The chart can scale to fit its container. Set the size using CSS on the container element, as shown below.
2726

2827
```cshtml
2928
@@ -67,11 +66,11 @@ The chart can be scaled to fit the container. As shown below, the size can be s
6766

6867
## Size for chart
6968

70-
The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties specify the size of the chart in pixels or percentages directly.
69+
The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties set the chart size directly, using pixel or percentage values.
7170

7271
### In pixel
7372

74-
The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties can be set in pixel as shown below.
73+
Set [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) in pixels, as shown below.
7574

7675
```cshtml
7776
@@ -113,7 +112,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha
113112

114113
### In percentage
115114

116-
By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) properties in percentage, the chart gets its dimension with respect to its container. For example, when the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) is set to **50%**, the chart is half the height of its container.
115+
Setting [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) in percentages sizes the chart relative to its container. For example, setting [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Height) to **50%** renders the chart at half the container's height.
117116

118117
```cshtml
119118
@@ -153,10 +152,10 @@ By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusio
153152

154153
![Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)
155154

156-
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
155+
N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page and the [Blazor Chart example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to explore chart types and time-dependent data.
157156

158157
## See also
159158

160-
* [Data Label](./data-labels)
159+
* [Data label](./data-labels)
161160
* [Tooltip](./tool-tip)
162-
* [Marker](./data-markers)
161+
* [Marker](./data-markers)

0 commit comments

Comments
 (0)