Chat component + Markdown component

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

@@ -62,6 +62,7 @@ internal override IEnumerable<NavItem> GetNavItems()
 
             #endregion Grid
 
+            new (){ Id = "514", Text = "Markdown", Href = "/markdown", IconName = IconName.MarkdownFill, ParentId = "5" },
             new (){ Id = "514", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
             new (){ Id = "515", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
             new (){ Id = "516", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },

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

@@ -0,0 +1,21 @@
+@page "/ai/open-ai-chat"
+
+<PageTitle>@title</PageTitle>
+
+<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
+
+<h1>Blazor Open AI Chat</h1>
+<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
+
+<CarbonAds />
+
+<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
+<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>
+<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
+
+@code{
+    private string pageUrl = "/ai/open-ai-chat";
+    private string title = "Blazor Open AI Chat Component";
+    private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
+    private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
+}

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

@@ -0,0 +1,4 @@
+<AIChat MaximumTokens="200"
+        Temperature="0.7"
+        TopP="0.95"
+        Style="max-height:400px" />

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

@@ -1,66 +1,85 @@
-<Grid TItem="Employee1"
+<Grid TItem="Product"
       Class="table table-hover border-top"
-      Data="employees"
+      Data="products"
       AllowDetailView="true">
 
     <GridColumns>
-        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
+        <GridColumn TItem="Product" HeaderText="Id" PropertyName="Id">
             @context.Id
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
+        <GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name">
             @context.Name
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
-            @context.Designation
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
-            @context.DOJ
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
+        <GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive">
             @context.IsActive
         </GridColumn>
     </GridColumns>
 
-    <GridDetailView TItem="Employee1">
-        <div class="row">
-            <div class="col-2 fw-bold">Id</div>
-            <div class="col">@context.Id</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">Name</div>
-            <div class="col">@context.Name</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">Designation</div>
-            <div class="col">@context.Designation</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">DOJ</div>
-            <div class="col">@context.DOJ</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">IsActive</div>
-            <div class="col">@context.IsActive</div>
-        </div>
+    <GridDetailView TItem="Product">
+
+        <Grid TItem="Ingredient"
+              Class="table table-hover border-top"
+              Data="GetIngredients(context.Id)">
+
+            <GridColumns>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Id" PropertyName="Id">
+                    @emp1.Id
+                </GridColumn>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Description" PropertyName="Description">
+                    @emp1.Description
+                </GridColumn>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Unit" PropertyName="Unit">
+                    @emp1.Unit
+                </GridColumn>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Quantity" PropertyName="Quantity">
+                    @emp1.Quantity
+                </GridColumn>
+            </GridColumns>
+
+        </Grid>
+
     </GridDetailView>
 
 </Grid>
 
 @code {
-    private List<Employee1> employees = new List<Employee1> {
-        new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
-        new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
-        new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
-        new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
-        new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
+    private List<Product> products = new List<Product> {
+        new Product { Id = 1, Name = "Product 1", IsActive = true },
+        new Product { Id = 2, Name = "Product 2", IsActive = true },
+        new Product { Id = 3, Name = "Product 3", IsActive = true },
+        new Product { Id = 4, Name = "Product 4", IsActive = true },
+        new Product { Id = 5, Name = "Product 5", IsActive = true }
     };
 
-    public record class Employee1
+    private List<Ingredient> ingredients = new List<Ingredient> {
+       new Ingredient { Id = 105, ProductId = 1, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
+       new Ingredient { Id = 106, ProductId = 1, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
+       new Ingredient { Id = 107, ProductId = 1, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
+       new Ingredient { Id = 108, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
+       new Ingredient { Id = 109, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
+       new Ingredient { Id = 110, ProductId = 2, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
+       new Ingredient { Id = 111, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
+       new Ingredient { Id = 112, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
+       new Ingredient { Id = 113, ProductId = 4, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
+       new Ingredient { Id = 114, ProductId = 5, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
+       new Ingredient { Id = 115, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
+    };
+
+    private IEnumerable<Ingredient> GetIngredients(int productId) => ingredients.Where(i => i.ProductId == productId);
+
+    public record class Product
     {
         public int Id { get; set; }
         public string? Name { get; set; }
-        public string? Designation { get; set; }
-        public DateOnly DOJ { get; set; }
         public bool IsActive { get; set; }
     }
+
+    public record class Ingredient
+    {
+        public int Id { get; set; }
+        public int ProductId { get; set; }
+        public string? Description { get; set; }
+        public string? Unit { get; set; }
+        public int Quantity { get; set; }
+    }
 }

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

@@ -0,0 +1,66 @@
+<Grid TItem="Employee1"
+      Class="table table-hover border-top"
+      Data="employees"
+      AllowDetailView="true">
+
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
+    <GridDetailView TItem="Employee1">
+        <div class="row">
+            <div class="col-2 fw-bold">Id</div>
+            <div class="col">@context.Id</div>
+        </div>
+        <div class="row">
+            <div class="col-2 fw-bold">Name</div>
+            <div class="col">@context.Name</div>
+        </div>
+        <div class="row">
+            <div class="col-2 fw-bold">Designation</div>
+            <div class="col">@context.Designation</div>
+        </div>
+        <div class="row">
+            <div class="col-2 fw-bold">DOJ</div>
+            <div class="col">@context.DOJ</div>
+        </div>
+        <div class="row">
+            <div class="col-2 fw-bold">IsActive</div>
+            <div class="col">@context.IsActive</div>
+        </div>
+    </GridDetailView>
+
+</Grid>
+
+@code {
+    private List<Employee1> employees = new List<Employee1> {
+        new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+        new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+        new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+        new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+        new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
+    };
+
+    public record class Employee1
+    {
+        public int Id { get; set; }
+        public string? Name { get; set; }
+        public string? Designation { get; set; }
+        public DateOnly DOJ { get; set; }
+        public bool IsActive { get; set; }
+    }
+}

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

@@ -13,6 +13,10 @@
 <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>
 <Demo Type="typeof(Grid_Demo_14_A_DetailView)" Tabs="false" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Dynamic data" PageUrl="@pageUrl" HashTagName="dynamic-data" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Grid_Demo_14_B_DetailView_Dynamic_Data)" Tabs="false" />
+
 @code {
     private const string pageUrl = "/grid/detail-view";
     private const string title = "Blazor Grid Component - Detail View";

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

@@ -130,6 +130,11 @@
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Image" class="me-2" /> Images <Badge Color="BadgeColor.Danger">New</Badge></h4>
             </a>
         </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/markdown">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown <Badge Color="BadgeColor.Danger">New</Badge></h4>
+            </a>
+        </div>
         <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/modals">
                 <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Modals</h4>
@@ -233,6 +238,20 @@
     </div>
 </div>
 
+<div class="container bd-gutter masthead-followup">
+    <div class="col-lg-7 mb-4 mx-auto text-md-center">
+        <h2 class="mb-3 fw-semibold lh-sm">AI Components</h2>
+    </div>
+
+    <div class="row g-3 mt-5">
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ai/open-ai-chat">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ChatRightTextFill" class="me-2" /> Open AI Chat </h4>
+            </a>
+        </div>
+    </div>
+</div>
+
 <div class="container bd-gutter masthead-followup mb-5">
     <div class="col-lg-7 mb-4 mx-auto text-md-center">
         <h2 class="mb-3 fw-semibold lh-sm">Form Components</h2>

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

@@ -0,0 +1,45 @@
+@page "/markdown"
+
+<PageTitle>@title</PageTitle>
+
+<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
+
+<h1>Blazor Markdown</h1>
+<div class="lead mb-3">Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.</div>
+
+<CarbonAds />
+
+@* <SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_01_Examples)" Tabs="true" /> *@
+
+<SectionHeading Size="HeadingSize.H2" Text="Headers" PageUrl="@pageUrl" HashTagName="headers" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_02_Headers)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Paragraphs and line breaks" PageUrl="@pageUrl" HashTagName="paragraphs-and-line-breaks" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_03_Paragraphs_and_Line_Breaks)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Blockquotes" PageUrl="@pageUrl" HashTagName="blockquotes" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_04_Blockquotes)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Horizontal rules" PageUrl="@pageUrl" HashTagName="horizontal-rules" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_05_Horizontal_Rules)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Emphasis (bold, italics, strikethrough)" PageUrl="@pageUrl" HashTagName="emphasis-bold-italics-strikethrough" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_06_Emphasis_bold_italics_strikethrough)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Code highlighting" PageUrl="@pageUrl" HashTagName="code-highlighting" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_07_Code_Highlighting)" Tabs="true" />
+
+@code{
+    private string pageUrl = "/markdown";
+    private string title = "Blazor Markdown Component";
+    private string description = "Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.";
+    private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
+}

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

@@ -0,0 +1,15 @@
+<Markdown>
+    <b>Test</b>
+    # Heading level 1
+    ## Heading level 2
+    ### Heading level 3
+    #### Heading level 4
+    ##### Heading level 5
+    ###### Heading level 6  
+
+
+    __bold text__
+    **bold text**
+    _italic text_
+    *italic text*
+</Markdown>

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

@@ -0,0 +1,7 @@
+<Markdown>
+    # This is a H1 header
+    ## This is a H2 header
+    ### This is a H3 header
+    #### This is a H4 header
+    ##### This is a H5 header
+</Markdown>

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_03_Paragraphs_and_Line_Breaks.razor

@@ -0,0 +1,8 @@
+<Markdown>
+    Add lines between your text with the **Enter** key.    
+    Your text gets better spaced and makes it easier to read.
+
+
+    Add lines between your text with the **Enter** key.
+    Your text gets better spaced and makes it easier to read.
+</Markdown>

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_04_Blockquotes.razor

@@ -0,0 +1,6 @@
+<Markdown>
+    > Single line quote
+    >> Nested quote
+    >> multiple line
+    >> quote
+</Markdown>

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_05_Horizontal_Rules.razor

@@ -0,0 +1,6 @@
+<Markdown>
+    above
+
+    ----
+    below
+</Markdown>

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_06_Emphasis_bold_italics_strikethrough.razor

@@ -0,0 +1,5 @@
+<Markdown>
+    Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
+    **_Bold, italicized text_**
+    **~~Bold, strike-through text~~**
+</Markdown>

BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_07_Code_Highlighting.razor

@@ -0,0 +1,11 @@
+<Markdown>
+    ```js
+    const count = records.length;
+    ```
+</Markdown>
+
+<Markdown>
+    ```csharp
+    Console.WriteLine("Hello, World!");
+    ```
+</Markdown>