Skip to content

Commit 55d66d6

Browse files
Merge branch 'development' into 983303-getting-started-d
2 parents fa05578 + 6cc0d2e commit 55d66d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+648
-960
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/appearance/themes.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@ The following list of themes are included in the Syncfusion<sup style="font-size
3636
|Microsoft Office Fabric Dark | fabric-dark.css |
3737
|High Contrast | highcontrast.css |
3838

39-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bootstrap Theme is designed based on Bootstrap v3, whereas the Bootsrap4 theme is designed based on Bootstrap v4.
39+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bootstrap Theme is designed based on Bootstrap v3.
40+
41+
N> The Syncfusion® Bootstrap4 theme is designed based on Bootstrap v4, specifically version 4.3. While it is built on v4.3, it remains compatible with Bootstrap v4.6 applications.
42+
There are no significant differences between Bootstrap v4.3 and v4.6 that affect our components. Therefore, using Bootstrap v4.3 will not impact functionality, as it performs equivalently to Bootstrap v4.6.
4043

4144
## Optimized CSS Themes
4245

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)