DevExpress-Examples · pollyndos · Jan 7, 2025 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
@@ -1,9 +1,9 @@
 @page "/grid"
-@page "/"
 @using DevExpress.AI.Samples.Blazor.Data;
 @using DevExpress.AI.Samples.Blazor.Services
 @using DevExpress.AIIntegration.Blazor.Chat
 @using DevExpress.AIIntegration.OpenAI.Services
+@using Markdig
 
 @inject IssuesDataService IssuesDataService
 
@@ -83,7 +83,7 @@
     IGrid grid;
     IAIChat chat;
     MarkupString ToHtml(string text) {
-        return (MarkupString)Markdig.Markdown.ToHtml(text);
+        return (MarkupString)Markdown.ToHtml(text);
     }
     IEnumerable<Issue> DataSource { get; set; }
     IEnumerable<Project> ProjectList { get; set; }
@@ -121,17 +121,17 @@
         return new MarkupString(html);
     }
     public MarkupString GetIssuePriorityIconHtml(IssuePriority priority) {
-        string priorytyClass = "warning";
+        string priorityClass = "warning";
         string title = "Medium";
         if(priority == IssuePriority.High) {
-            priorytyClass = "danger";
+            priorityClass = "danger";
             title = " High ";
         }
         if(priority == IssuePriority.Low) {
-            priorytyClass = "info";
+            priorityClass = "info";
             title = " Low ";
         }
-        string html = string.Format("<span class='badge priority-{0} py-1 px-2' title='{1} Priority'>{1}</span>", priorytyClass,
+        string html = string.Format("<span class='badge priority-{0} py-1 px-2' title='{1} Priority'>{1}</span>", priorityClass,
         title);
         return new MarkupString(html);
     }

@@ -0,0 +1,38 @@
+@page "/"
+
+<PageTitle>Welcome</PageTitle>
+
+<div class="main-content">
+    <DxGridLayout CssClass="welcome-gridlayout" RowSpacing="3rem">
+        <Rows>
+            <DxGridLayoutRow Height="auto" Areas="header"></DxGridLayoutRow>
+            <DxGridLayoutRow Height="auto" Areas="cards"></DxGridLayoutRow>
+        </Rows>
+        <Items>
+            <DxGridLayoutItem Area="header" CssClass="title">
+                <Template>
+                    <div class="title-header-text">AI Assistant + DevExpress Blazor Components</div>
+                    <div class="title-content-text">Select a component to open a page with an integrated AI Assistant</div>
+                </Template>
+            </DxGridLayoutItem>
+            <DxGridLayoutItem Area="cards" CssClass="welcome-cards">
+                <Template>
+                    <NavLink class="welcome-card" href="/grid">
+                        <svg class="welcome-card-img" alt="grid card">
+                            <use href="cards.svg#grid"></use>
+                        </svg>
+                        <div class="welcome-card-text">Grid</div>
+                        <div class="welcome-card-back"></div>
+                    </NavLink>
+                    <NavLink class="welcome-card" href="/reportviewer">
+                        <svg class="welcome-card-img" alt="report viewer card">
+                            <use href="cards.svg#reports"></use>
+                        </svg>
+                        <div class="welcome-card-text">Report Viewer</div>
+                        <div class="welcome-card-back"></div>
+                    </NavLink>
+                </Template>
+            </DxGridLayoutItem>
+        </Items>
+    </DxGridLayout>
+</div>
@@ -1,4 +1,4 @@
-@page "/report"
+@page "/reportviewer"
 @using Azure.AI.OpenAI.Assistants
 @using DevExpress.Blazor.Reporting
 @using DevExpress.XtraReports

@@ -1,11 +1,11 @@
-@using System.Text.RegularExpressions
-@using DevExpress.AI.Samples.Blazor.Models
-@using AIIntegration.Services.Chat
+@using DevExpress.AI.Samples.Blazor.Models
 @using DevExpress.AIIntegration.Blazor.Chat
+@using System.Text.RegularExpressions
 @using DevExpress.AIIntegration.OpenAI.Services
 @using Markdig
 
-<DxAIChat CssClass="my-report-chat" ResponseContentFormat="ResponseContentFormat.Markdown" Initialized="ChatInitialized">
+
+<DxAIChat CssClass="my-report-chat" Initialized="ChatInitialized">
     <MessageContentTemplate>
         <div class="my-chat-content">
             @ToHtml(context.Content)
@@ -16,7 +16,7 @@
 @code {
     [Parameter] public UserAssistantTabContentModel Model { get; set; }
     string ClearAnnotations(string text) {
-    //To clear out the annotations in a response from assistant.
+    //To clear out annotations in a response from the assistant.
         return Regex.Replace(text, @"\【.*?】", "");
     }
 
@@ -32,4 +32,4 @@
             });
         }
     }
-}
+}
@@ -6,14 +6,6 @@
     <ImplicitUsings>enable</ImplicitUsings>
     <EmitLegacyAssetsFileItems>True</EmitLegacyAssetsFileItems>
   </PropertyGroup>
-
-  <ItemGroup>
-    <None Remove="Data\Example.docx" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <EmbeddedResource Include="Data\Example.docx" />
-  </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Azure.AI.OpenAI" Version="2.1.0-beta.2" />
     <PackageReference Include="Azure.AI.OpenAI.Assistants" Version="1.0.0-beta.4" />

@@ -1,30 +1,25 @@
 using DevExpress.Blazor.Reporting.Models;
 using DevExpress.XtraReports.UI;
 
-namespace DevExpress.AI.Samples.Blazor.Models
-{
-    public class UserAssistantTabContentModel : ITabContentModel
-    {
+namespace DevExpress.AI.Samples.Blazor.Models {
+    public class UserAssistantTabContentModel : ITabContentModel {
         public TabContentKind Kind => TabContentKind.Custom;
         Func<XtraReport> GetReport;
         bool reportReady = false;
         public bool GetVisible() => reportReady && (GetReport()?.PrintingSystem?.PageCount ?? 0) > 0;
 
-        public UserAssistantTabContentModel(Func<XtraReport> getReport)
-        {
+        public UserAssistantTabContentModel(Func<XtraReport> getReport) {
             GetReport = getReport;
         }
 
-        public MemoryStream GetReportData()
-        {
+        public MemoryStream GetReportData() {
             var ms = new MemoryStream();
             GetReport()?.PrintingSystem.ExportToPdf(ms);
             ms.Position = 0;
             return ms;
         }
 
-        public Task InitializeAsync()
-        {
+        public Task InitializeAsync() {
             reportReady = false;
             return Task.CompletedTask;
         }

@@ -7,10 +7,6 @@
   },
   "AllowedHosts": "*",
   "ConnectionStrings": {
-    "NWindConnectionString": "XpoProvider=SQLite;Data Source=DataSources/nwind.db",
-    "VehiclesDBConnectionString": "XpoProvider=SQLite;Data Source=DataSources/vehicles.db",
-    "HomesConnectionString": "XpoProvider=SQLite;Data Source=DataSources/homes.db",
-    "ContactsConnectionString": "XpoProvider=SQLite;Data Source=DataSources/Contacts.db",
     "DevAvConnectionString": "XpoProvider=SQLite;Data Source=DataSources/devav.sqlite3",
     "CountriesConnectionString": "XpoProvider=SQLite;Data Source=DataSources/Countries.db",
     "IssuesConnectionString": "Data Source=DataSources/issue-list.db"

@@ -6,7 +6,7 @@
 
 .my-list {
     height: 100vh;
-    width: 420px;
+    width: 200px;
 }
 
 .my-report {
@@ -90,4 +90,107 @@
     height: 17px;
     background-image: url("./bug.svg");
     vertical-align: middle;
+}
+
+.welcome-gridlayout {
+    margin: auto;
+    width: auto;
+    height: auto;
+}
+
+    .welcome-gridlayout .dxbl-gridlayout-root {
+        align-content: center;
+        justify-content: center;
+    }
+
+.title {
+    text-align: center;
+}
+
+.welcome-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    justify-content: center;
+}
+
+.welcome-card {
+    width: 26.25rem;
+    height: 15rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.2s;
+    border-radius: 1rem;
+    color: black;
+    gap: 1.5rem;
+    text-decoration: none;
+    position: relative;
+}
+
+    .welcome-card:hover {
+        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
+    }
+
+    .welcome-card .welcome-card-img {
+        width: 6.5rem;
+        height: 6.5rem;
+    }
+
+    .welcome-card .welcome-card-text {
+        font-size: 1.75rem;
+        font-weight: 600;
+        letter-spacing: 0em;
+        text-align: center;
+        text-decoration: unset;
+    }
+
+    .welcome-card .welcome-card-back {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: #212529;
+        opacity: 0.05;
+        border-radius: 1rem;
+        z-index: -2;
+    }
+
+.title {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-bottom: 0.625rem;
+}
+
+    .title.title-secondary {
+        padding-top: 0.313rem;
+        padding-bottom: 0;
+        color: rgb(33, 37, 41);
+    }
+
+.title-header-text {
+    font-size: 2.5rem;
+    line-height: 3rem;
+    font-weight: 600;
+    letter-spacing: 0rem;
+    padding: 0.3125rem 0;
+}
+
+.title-content-text {
+    font-size: 1.75rem;
+    font-weight: 400;
+    line-height: 2.5rem;
+    letter-spacing: 0rem;
+}
+
+.main-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
 }