Skip to content

Commit a5bcc4c

Browse files
gvreddy04gvreddy04
authored
Chat component + Markdown component (#893)
* AI Chat component + Markdown component
1 parent 386dda9 commit a5bcc4c

31 files changed

+927
-51
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ internal override IEnumerable<NavItem> GetNavItems()
6262

6363
#endregion Grid
6464

65+
new (){ Id = "514", Text = "Markdown", Href = "/markdown", IconName = IconName.MarkdownFill, ParentId = "5" },
6566
new (){ Id = "514", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
6667
new (){ Id = "515", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
6768
new (){ Id = "516", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },

‎BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@page "/ai/open-ai-chat"
2+
3+
<PageTitle>@title</PageTitle>
4+
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6+
7+
<h1>Blazor Open AI Chat</h1>
8+
<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
9+
10+
<CarbonAds />
11+
12+
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
13+
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
14+
<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
15+
16+
@code{
17+
private string pageUrl = "/ai/open-ai-chat";
18+
private string title = "Blazor Open AI Chat Component";
19+
private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
20+
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
21+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChat_Demo_01_Examples.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<AIChat MaximumTokens="200"
2+
Temperature="0.7"
3+
TopP="0.95"
4+
Style="max-height:400px" />

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor‎

Lines changed: 60 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,85 @@
1-
<Grid TItem="Employee1"
1+
<Grid TItem="Product"
22
Class="table table-hover border-top"
3-
Data="employees"
3+
Data="products"
44
AllowDetailView="true">
55

66
<GridColumns>
7-
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
7+
<GridColumn TItem="Product" HeaderText="Id" PropertyName="Id">
88
@context.Id
99
</GridColumn>
10-
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
10+
<GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name">
1111
@context.Name
1212
</GridColumn>
13-
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
14-
@context.Designation
15-
</GridColumn>
16-
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
17-
@context.DOJ
18-
</GridColumn>
19-
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
13+
<GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive">
2014
@context.IsActive
2115
</GridColumn>
2216
</GridColumns>
2317

24-
<GridDetailView TItem="Employee1">
25-
<div class="row">
26-
<div class="col-2 fw-bold">Id</div>
27-
<div class="col">@context.Id</div>
28-
</div>
29-
<div class="row">
30-
<div class="col-2 fw-bold">Name</div>
31-
<div class="col">@context.Name</div>
32-
</div>
33-
<div class="row">
34-
<div class="col-2 fw-bold">Designation</div>
35-
<div class="col">@context.Designation</div>
36-
</div>
37-
<div class="row">
38-
<div class="col-2 fw-bold">DOJ</div>
39-
<div class="col">@context.DOJ</div>
40-
</div>
41-
<div class="row">
42-
<div class="col-2 fw-bold">IsActive</div>
43-
<div class="col">@context.IsActive</div>
44-
</div>
18+
<GridDetailView TItem="Product">
19+
20+
<Grid TItem="Ingredient"
21+
Class="table table-hover border-top"
22+
Data="GetIngredients(context.Id)">
23+
24+
<GridColumns>
25+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Id" PropertyName="Id">
26+
@emp1.Id
27+
</GridColumn>
28+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Description" PropertyName="Description">
29+
@emp1.Description
30+
</GridColumn>
31+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Unit" PropertyName="Unit">
32+
@emp1.Unit
33+
</GridColumn>
34+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Quantity" PropertyName="Quantity">
35+
@emp1.Quantity
36+
</GridColumn>
37+
</GridColumns>
38+
39+
</Grid>
40+
4541
</GridDetailView>
4642

4743
</Grid>
4844

4945
@code {
50-
private List<Employee1> employees = new List<Employee1> {
51-
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
52-
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
53-
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
54-
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
55-
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
46+
private List<Product> products = new List<Product> {
47+
new Product { Id = 1, Name = "Product 1", IsActive = true },
48+
new Product { Id = 2, Name = "Product 2", IsActive = true },
49+
new Product { Id = 3, Name = "Product 3", IsActive = true },
50+
new Product { Id = 4, Name = "Product 4", IsActive = true },
51+
new Product { Id = 5, Name = "Product 5", IsActive = true }
5652
};
5753

58-
public record class Employee1
54+
private List<Ingredient> ingredients = new List<Ingredient> {
55+
new Ingredient { Id = 105, ProductId = 1, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
56+
new Ingredient { Id = 106, ProductId = 1, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
57+
new Ingredient { Id = 107, ProductId = 1, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
58+
new Ingredient { Id = 108, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
59+
new Ingredient { Id = 109, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
60+
new Ingredient { Id = 110, ProductId = 2, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
61+
new Ingredient { Id = 111, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
62+
new Ingredient { Id = 112, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
63+
new Ingredient { Id = 113, ProductId = 4, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
64+
new Ingredient { Id = 114, ProductId = 5, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
65+
new Ingredient { Id = 115, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
66+
};
67+
68+
private IEnumerable<Ingredient> GetIngredients(int productId) => ingredients.Where(i => i.ProductId == productId);
69+
70+
public record class Product
5971
{
6072
public int Id { get; set; }
6173
public string? Name { get; set; }
62-
public string? Designation { get; set; }
63-
public DateOnly DOJ { get; set; }
6474
public bool IsActive { get; set; }
6575
}
76+
77+
public record class Ingredient
78+
{
79+
public int Id { get; set; }
80+
public int ProductId { get; set; }
81+
public string? Description { get; set; }
82+
public string? Unit { get; set; }
83+
public int Quantity { get; set; }
84+
}
6685
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_B_DetailView_Dynamic_Data.razor‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<Grid TItem="Employee1"
2+
Class="table table-hover border-top"
3+
Data="employees"
4+
AllowDetailView="true">
5+
6+
<GridColumns>
7+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
8+
@context.Id
9+
</GridColumn>
10+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
11+
@context.Name
12+
</GridColumn>
13+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
14+
@context.Designation
15+
</GridColumn>
16+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
17+
@context.DOJ
18+
</GridColumn>
19+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
20+
@context.IsActive
21+
</GridColumn>
22+
</GridColumns>
23+
24+
<GridDetailView TItem="Employee1">
25+
<div class="row">
26+
<div class="col-2 fw-bold">Id</div>
27+
<div class="col">@context.Id</div>
28+
</div>
29+
<div class="row">
30+
<div class="col-2 fw-bold">Name</div>
31+
<div class="col">@context.Name</div>
32+
</div>
33+
<div class="row">
34+
<div class="col-2 fw-bold">Designation</div>
35+
<div class="col">@context.Designation</div>
36+
</div>
37+
<div class="row">
38+
<div class="col-2 fw-bold">DOJ</div>
39+
<div class="col">@context.DOJ</div>
40+
</div>
41+
<div class="row">
42+
<div class="col-2 fw-bold">IsActive</div>
43+
<div class="col">@context.IsActive</div>
44+
</div>
45+
</GridDetailView>
46+
47+
</Grid>
48+
49+
@code {
50+
private List<Employee1> employees = new List<Employee1> {
51+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
52+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
53+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
54+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
55+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
56+
};
57+
58+
public record class Employee1
59+
{
60+
public int Id { get; set; }
61+
public string? Name { get; set; }
62+
public string? Designation { get; set; }
63+
public DateOnly DOJ { get; set; }
64+
public bool IsActive { get; set; }
65+
}
66+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
<div class="mb-3">To enable detail view, set the <code>AllowDetailView</code> parameter to <b>true</b>. In the following example, existing <code>&lt;GridColumn&gt;</code> tags are nested under <code>&lt;GridColumns&gt;</code> tag to distinguish them from <code>&lt;GridDetailView&gt;</code>.</div>
1414
<Demo Type="typeof(Grid_Demo_14_A_DetailView)" Tabs="false" />
1515

16+
<SectionHeading Size="HeadingSize.H2" Text="Dynamic data" PageUrl="@pageUrl" HashTagName="dynamic-data" />
17+
<div class="mb-3"></div>
18+
<Demo Type="typeof(Grid_Demo_14_B_DetailView_Dynamic_Data)" Tabs="false" />
19+
1620
@code {
1721
private const string pageUrl = "/grid/detail-view";
1822
private const string title = "Blazor Grid Component - Detail View";

‎BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@
130130
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Image" class="me-2" /> Images <Badge Color="BadgeColor.Danger">New</Badge></h4>
131131
</a>
132132
</div>
133+
<div class="col-sm-4 mb-2">
134+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/markdown">
135+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown <Badge Color="BadgeColor.Danger">New</Badge></h4>
136+
</a>
137+
</div>
133138
<div class="col-sm-4 mb-2">
134139
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/modals">
135140
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Modals</h4>
@@ -233,6 +238,20 @@
233238
</div>
234239
</div>
235240

241+
<div class="container bd-gutter masthead-followup">
242+
<div class="col-lg-7 mb-4 mx-auto text-md-center">
243+
<h2 class="mb-3 fw-semibold lh-sm">AI Components</h2>
244+
</div>
245+
246+
<div class="row g-3 mt-5">
247+
<div class="col-sm-4 mb-2">
248+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ai/open-ai-chat">
249+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ChatRightTextFill" class="me-2" /> Open AI Chat </h4>
250+
</a>
251+
</div>
252+
</div>
253+
</div>
254+
236255
<div class="container bd-gutter masthead-followup mb-5">
237256
<div class="col-lg-7 mb-4 mx-auto text-md-center">
238257
<h2 class="mb-3 fw-semibold lh-sm">Form Components</h2>

‎BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@page "/markdown"
2+
3+
<PageTitle>@title</PageTitle>
4+
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6+
7+
<h1>Blazor Markdown</h1>
8+
<div class="lead mb-3">Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.</div>
9+
10+
<CarbonAds />
11+
12+
@* <SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
13+
<div class="mb-3"></div>
14+
<Demo Type="typeof(Markdown_Demo_01_Examples)" Tabs="true" /> *@
15+
16+
<SectionHeading Size="HeadingSize.H2" Text="Headers" PageUrl="@pageUrl" HashTagName="headers" />
17+
<div class="mb-3"></div>
18+
<Demo Type="typeof(Markdown_Demo_02_Headers)" Tabs="true" />
19+
20+
<SectionHeading Size="HeadingSize.H2" Text="Paragraphs and line breaks" PageUrl="@pageUrl" HashTagName="paragraphs-and-line-breaks" />
21+
<div class="mb-3"></div>
22+
<Demo Type="typeof(Markdown_Demo_03_Paragraphs_and_Line_Breaks)" Tabs="true" />
23+
24+
<SectionHeading Size="HeadingSize.H2" Text="Blockquotes" PageUrl="@pageUrl" HashTagName="blockquotes" />
25+
<div class="mb-3"></div>
26+
<Demo Type="typeof(Markdown_Demo_04_Blockquotes)" Tabs="true" />
27+
28+
<SectionHeading Size="HeadingSize.H2" Text="Horizontal rules" PageUrl="@pageUrl" HashTagName="horizontal-rules" />
29+
<div class="mb-3"></div>
30+
<Demo Type="typeof(Markdown_Demo_05_Horizontal_Rules)" Tabs="true" />
31+
32+
<SectionHeading Size="HeadingSize.H2" Text="Emphasis (bold, italics, strikethrough)" PageUrl="@pageUrl" HashTagName="emphasis-bold-italics-strikethrough" />
33+
<div class="mb-3"></div>
34+
<Demo Type="typeof(Markdown_Demo_06_Emphasis_bold_italics_strikethrough)" Tabs="true" />
35+
36+
<SectionHeading Size="HeadingSize.H2" Text="Code highlighting" PageUrl="@pageUrl" HashTagName="code-highlighting" />
37+
<div class="mb-3"></div>
38+
<Demo Type="typeof(Markdown_Demo_07_Code_Highlighting)" Tabs="true" />
39+
40+
@code{
41+
private string pageUrl = "/markdown";
42+
private string title = "Blazor Markdown Component";
43+
private string description = "Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.";
44+
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
45+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_01_Examples.razor‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Markdown>
2+
<b>Test</b>
3+
# Heading level 1
4+
## Heading level 2
5+
### Heading level 3
6+
#### Heading level 4
7+
##### Heading level 5
8+
###### Heading level 6
9+
10+
11+
__bold text__
12+
**bold text**
13+
_italic text_
14+
*italic text*
15+
</Markdown>

‎BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_02_Headers.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<Markdown>
2+
# This is a H1 header
3+
## This is a H2 header
4+
### This is a H3 header
5+
#### This is a H4 header
6+
##### This is a H5 header
7+
</Markdown>

0 commit comments

Comments
 (0)