ChatUI: Create the getting started with the Blazor ChatUI sample

SyncfusionExamples · Dec 23, 2024 · e9addc3 · e9addc3
1 parent 58b79c6
commit e9addc3
Show file tree

Hide file tree

Showing 16 changed files with 53 additions and 61 deletions.
diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/BlazorWebApp.Client.csproj b/ChatUI/BlazorWebApp/BlazorWebApp.Client/BlazorWebApp.Client.csproj
@@ -1,15 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
     <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.11" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0" />
     <PackageReference Include="Syncfusion.Blazor.InteractiveChat" Version="28.1.35" />
     <PackageReference Include="Syncfusion.Blazor.Themes" Version="28.1.35" />
   </ItemGroup>

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/MainLayout.razor b/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/MainLayout.razor
@@ -16,8 +16,8 @@
     </main>
 </div>
 
-<div id="blazor-error-ui">
+<div id="blazor-error-ui" data-nosnippet>
     An unhandled error has occurred.
-    <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
+    <a href="." class="reload">Reload</a>
+    <span class="dismiss">🗙</span>
 </div>
diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/MainLayout.razor.css b/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/MainLayout.razor.css
@@ -77,9 +77,11 @@ main {
 }
 
 #blazor-error-ui {
+    color-scheme: light only;
     background: lightyellow;
     bottom: 0;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
     display: none;
     left: 0;
     padding: 0.6rem 1.25rem 0.7rem 1.25rem;

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/NavMenu.razor b/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/NavMenu.razor
@@ -7,7 +7,7 @@
 <input type="checkbox" title="Navigation menu" class="navbar-toggler" />
 
 <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="flex-column">
+    <nav class="nav flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/NavMenu.razor.css b/ChatUI/BlazorWebApp/BlazorWebApp.Client/Layout/NavMenu.razor.css
@@ -16,7 +16,7 @@
 }
 
 .top-row {
-    height: 3.5rem;
+    min-height: 3.5rem;
     background-color: rgba(0,0,0,0.4);
 }
 

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/Pages/Home.razor b/ChatUI/BlazorWebApp/BlazorWebApp.Client/Pages/Home.razor
@@ -1,7 +1,7 @@
 @page "/"
 
 <!-- SfChatUI component that sets up the Blazor chat interface with various configurations -->
-<SfChatUI HeaderText="Testing Collaboration - Product & QA"
+<SfChatUI HeaderText="Feature Testing Collaboration"
           ShowTimeBreak="true" TimestampFormat="MMMM hh:mm tt" User="ProductManager"
           Width="400px" Height="500px" Messages="ChatUserMessages">
     <!-- Empty chat template to display when no messages are present -->
@@ -18,17 +18,20 @@
 <style>
     .empty-chat-text {
         font-size: 15px;
-        text-align: center;
-        margin-top: 90px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 35%;
+        justify-content: center;
     }
 </style>
 
 @code {
 
     // Defining static user models for the participants in the chat
-    private static UserModel ProductManager = new UserModel() { ID = "User1", User = "Product Manager" };
-    private static UserModel Tester = new UserModel() { ID = "User2", User = "Tester" };
-    private static UserModel Developer = new UserModel() { ID = "User3", User = "Developer" };
+    private static UserModel ProductManager = new UserModel() { ID = "User1", User = "Thomas Cooper" };
+    private static UserModel Tester = new UserModel() { ID = "User2", User = "James Carter" };
+    private static UserModel Developer = new UserModel() { ID = "User3", User = "David Morgan", AvatarUrl = "images/Developer.jpg" };
 
     // List of messages to display in the chat
     private List<ChatMessage> ChatUserMessages = new List<ChatMessage>()
@@ -46,7 +49,7 @@
         new ChatMessage() { Text = "Just a heads up, I’m working on the fixes for the reported bugs.",
             Author = Developer, Timestamp = new DateTime(2024,12,24,9,05,0) },
 
-        new ChatMessage() { Text = "Thanks, Developer! I’ll check them and make sure the fixes align with the test cases.",
+        new ChatMessage() { Text = "Thanks, David Morgan! I’ll check them and make sure the fixes align with the test cases.",
             Author = ProductManager, Timestamp = new DateTime(2024,12,24,10,45,0) },
 
         new ChatMessage() { Text = "I’ll review the test cases and update any changes if needed.",
@@ -62,3 +65,4 @@
             Author = Developer, Timestamp = new DateTime(2024,12,24,12,15,0) }
     };
 }
+
diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/Pages/Weather.razor b/ChatUI/BlazorWebApp/BlazorWebApp.Client/Pages/Weather.razor
@@ -16,8 +16,8 @@ else
         <thead>
             <tr>
                 <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
+                <th aria-label="Temperature in Celsius">Temp. (C)</th>
+                <th aria-label="Temperature in Farenheit">Temp. (F)</th>
                 <th>Summary</th>
             </tr>
         </thead>

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.Client/_Imports.razor b/ChatUI/BlazorWebApp/BlazorWebApp.Client/_Imports.razor
@@ -7,4 +7,4 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
 @using BlazorWebApp.Client
-@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.InteractiveChat
diff --git a/ChatUI/BlazorWebApp/BlazorWebApp.sln b/ChatUI/BlazorWebApp/BlazorWebApp.sln
@@ -3,24 +3,24 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.12.35527.113 d17.12
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorWebApp", "BlazorWebApp\BlazorWebApp.csproj", "{FD131A3D-E9DE-4B51-95DE-B86FEE54D101}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorWebApp", "BlazorWebApp\BlazorWebApp.csproj", "{1D867BC3-B49B-481F-AC65-E0221E44636A}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorWebApp.Client", "BlazorWebApp.Client\BlazorWebApp.Client.csproj", "{AFEE238E-64C3-44EE-8F4A-ADDE80B64959}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorWebApp.Client", "BlazorWebApp.Client\BlazorWebApp.Client.csproj", "{ABA1455B-2C8C-45BC-BB84-A6E2ED2CBF8E}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{FD131A3D-E9DE-4B51-95DE-B86FEE54D101}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{FD131A3D-E9DE-4B51-95DE-B86FEE54D101}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{FD131A3D-E9DE-4B51-95DE-B86FEE54D101}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{FD131A3D-E9DE-4B51-95DE-B86FEE54D101}.Release|Any CPU.Build.0 = Release|Any CPU
-		{AFEE238E-64C3-44EE-8F4A-ADDE80B64959}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{AFEE238E-64C3-44EE-8F4A-ADDE80B64959}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{AFEE238E-64C3-44EE-8F4A-ADDE80B64959}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{AFEE238E-64C3-44EE-8F4A-ADDE80B64959}.Release|Any CPU.Build.0 = Release|Any CPU
+		{1D867BC3-B49B-481F-AC65-E0221E44636A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1D867BC3-B49B-481F-AC65-E0221E44636A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1D867BC3-B49B-481F-AC65-E0221E44636A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1D867BC3-B49B-481F-AC65-E0221E44636A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{ABA1455B-2C8C-45BC-BB84-A6E2ED2CBF8E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{ABA1455B-2C8C-45BC-BB84-A6E2ED2CBF8E}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{ABA1455B-2C8C-45BC-BB84-A6E2ED2CBF8E}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{ABA1455B-2C8C-45BC-BB84-A6E2ED2CBF8E}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp/BlazorWebApp.csproj b/ChatUI/BlazorWebApp/BlazorWebApp/BlazorWebApp.csproj
@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>
     <ProjectReference Include="..\BlazorWebApp.Client\BlazorWebApp.Client.csproj" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.11" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="9.0.0" />
   </ItemGroup>
 
 </Project>
diff --git a/ChatUI/BlazorWebApp/BlazorWebApp/Components/App.razor b/ChatUI/BlazorWebApp/BlazorWebApp/Components/App.razor
@@ -5,9 +5,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
-    <link rel="stylesheet" href="app.css" />
-    <link rel="stylesheet" href="BlazorWebApp.styles.css" />
+    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["BlazorWebApp.styles.css"]" />
+    <ImportMap />
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp/Program.cs b/ChatUI/BlazorWebApp/BlazorWebApp/Program.cs
@@ -5,7 +5,6 @@
 var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddSyncfusionBlazor();
 
-
 // Add services to the container.
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents()
@@ -27,9 +26,10 @@
 
 app.UseHttpsRedirection();
 
-app.UseStaticFiles();
+
 app.UseAntiforgery();
 
+app.MapStaticAssets();
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode()
     .AddInteractiveWebAssemblyRenderMode()

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp/Properties/launchSettings.json b/ChatUI/BlazorWebApp/BlazorWebApp/Properties/launchSettings.json
@@ -1,20 +1,12 @@
 {
-  "$schema": "http://json.schemastore.org/launchsettings.json",
-    "iisSettings": {
-      "windowsAuthentication": false,
-      "anonymousAuthentication": true,
-      "iisExpress": {
-        "applicationUrl": "http://localhost:16041",
-        "sslPort": 44301
-      }
-    },
+  "$schema": "https://json.schemastore.org/launchsettings.json",
     "profiles": {
       "http": {
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-        "applicationUrl": "http://localhost:5149",
+        "applicationUrl": "http://localhost:5142",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }
@@ -24,15 +16,7 @@
         "dotnetRunMessages": true,
         "launchBrowser": true,
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-        "applicationUrl": "https://localhost:7008;http://localhost:5149",
-        "environmentVariables": {
-          "ASPNETCORE_ENVIRONMENT": "Development"
-        }
-      },
-      "IIS Express": {
-        "commandName": "IISExpress",
-        "launchBrowser": true,
-        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+        "applicationUrl": "https://localhost:7238;http://localhost:5142",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }

diff --git a/ChatUI/BlazorWebApp/BlazorWebApp/wwwroot/app.css b/ChatUI/BlazorWebApp/BlazorWebApp/wwwroot/app.css
@@ -49,3 +49,12 @@ h1:focus {
 .darker-border-checkbox.form-check-input {
     border-color: #929292;
 }
+
+.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
+    color: var(--bs-secondary-color);
+    text-align: end;
+}
+
+.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
+    text-align: start;
+}
diff --git a/ChatUI/BlazorWebApp/BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css b/ChatUI/BlazorWebApp/BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css
diff --git a/ChatUI/BlazorWebApp/BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css.map b/ChatUI/BlazorWebApp/BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css.map