10 |
11 | Chat
12 | New Chat
14 |
15 |
16 |
52 |
53 |
54 | Send
60 |
61 |
62 | Error.
5 |An error occurred while processing your request.
6 | 7 |Development Mode
8 |9 | Swapping to Development environment will display more detailed information about the error that occurred. 10 |
11 |12 | The Development environment shouldn't be enabled for deployed applications. 13 | It can result in displaying sensitive information from exceptions to end users. 14 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 15 | and restarting the app. 16 |
17 | -------------------------------------------------------------------------------- /Dotnet/src/BlazorAI/Components/Pages/Extensions/ChatExtensions.cs: -------------------------------------------------------------------------------- 1 | using BlazorAI.Components.Models; 2 | using Markdig; 3 | using Microsoft.AspNetCore.Components; 4 | using Microsoft.FluentUI.AspNetCore.Components; 5 | using Microsoft.JSInterop; 6 | 7 | namespace BlazorAI.Components.Pages; 8 | 9 | #pragma warning disable SKEXP0001 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed. 10 | #pragma warning disable SKEXP0050 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed. 11 | #pragma warning disable SKEXP0010 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed. 12 | #pragma warning disable SKEXP0040 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed. 13 | #pragma warning disable SKEXP0020 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed. 14 | 15 | public partial class Chat 16 | { 17 | private const int MIN_ROWS = 2; 18 | private const int MAX_ROWS = 6; 19 | private string newMessage = string.Empty; 20 | private int textRows = 0; 21 | bool loading = false; 22 | private FluentButton submitButton; 23 | private FluentTextArea inputTextArea; 24 | private int messagesLastScroll = 0; 25 | private bool displayToolMessages = false; 26 | 27 | [Inject] 28 | private IKeyCodeService KeyCodeService { get; set; } 29 | 30 | [Inject] 31 | IJSRuntime JsRuntime { get; set; } = null!; 32 | 33 | [Inject] 34 | public AppState AppState { get; set; } = null!; 35 | 36 | 37 | private MarkdownPipeline pipeline = new MarkdownPipelineBuilder() 38 | .UseAdvancedExtensions() 39 | .UseBootstrap() 40 | .UseEmojiAndSmiley() 41 | .Build(); 42 | 43 | protected override async Task OnInitializedAsync() 44 | { 45 | // This is used by Blazor to capture the user input for shortcut keys. 46 | KeyCodeService.Clear(); 47 | KeyCodeService.RegisterListener(OnKeyDownAsync); 48 | // Initialize the chat history here 49 | await InitializeSemanticKernel(); 50 | } 51 | 52 | protected override async Task OnAfterRenderAsync(bool firstRender) 53 | { 54 | await base.OnAfterRenderAsync(firstRender); 55 | await JsRuntime.InvokeVoidAsync("highlightCode"); 56 | 57 | if (!firstRender && chatHistory != null && chatHistory.Any() && messagesLastScroll != chatHistory.Count) 58 | { 59 | messagesLastScroll = chatHistory.Count; 60 | await JsRuntime.InvokeVoidAsync("scrollToBottom"); 61 | } 62 | } 63 | 64 | protected string MessageInput 65 | { 66 | get => newMessage; 67 | set 68 | { 69 | newMessage = value; 70 | CalculateTextRows(value); 71 | } 72 | } 73 | 74 | private void ClearChat() 75 | { 76 | chatHistory?.Clear(); 77 | } 78 | 79 | private void CalculateTextRows(string value) 80 | { 81 | textRows = Math.Max(value.Split('\n').Length, value.Split('\r').Length); 82 | textRows = Math.Max(textRows, MIN_ROWS); 83 | textRows = Math.Min(textRows, MAX_ROWS); 84 | } 85 | 86 | private async Task OnKeyDownAsync(FluentKeyCodeEventArgs args) 87 | { 88 | if (args.CtrlKey && args.Value == "Enter") 89 | { 90 | Console.WriteLine("Ctrl+Enter Pressed"); 91 | await InvokeAsync(async () => 92 | { 93 | StateHasChanged(); 94 | await Task.Delay(180); 95 | Console.WriteLine("Value in TextArea: {0}", MessageInput); 96 | await submitButton.OnClick.InvokeAsync(); 97 | }); 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /Dotnet/src/BlazorAI/Components/Pages/MultiAgent.razor: -------------------------------------------------------------------------------- 1 | @page "/multiagent" 2 | 3 |
7 |
8 | Multi-Agent Chat
9 | New Chat
11 |
12 |
13 |
51 |
52 |
53 | Send
59 |
60 |
61 |
4 |
7 |
8 |
9 |
14 | @Body
15 |
16 |
17 |
18 |
19 |
24 |
--------------------------------------------------------------------------------
/Dotnet/src/eShopLite/Store/Components/Layout/MainLayout.razor.css:
--------------------------------------------------------------------------------
1 | .page {
2 | position: relative;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | main {
8 | flex: 1;
9 | }
10 |
11 | .sidebar {
12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13 | }
14 |
15 | .top-row {
16 | background-color: #f7f7f7;
17 | border-bottom: 1px solid #d6d5d5;
18 | justify-content: flex-end;
19 | height: 3.5rem;
20 | display: flex;
21 | align-items: center;
22 | }
23 |
24 | .top-row ::deep a, .top-row ::deep .btn-link {
25 | white-space: nowrap;
26 | margin-left: 1.5rem;
27 | text-decoration: none;
28 | }
29 |
30 | .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31 | text-decoration: underline;
32 | }
33 |
34 | .top-row ::deep a:first-child {
35 | overflow: hidden;
36 | text-overflow: ellipsis;
37 | }
38 |
39 | @media (max-width: 640.98px) {
40 | .top-row:not(.auth) {
41 | display: none;
42 | }
43 |
44 | .top-row.auth {
45 | justify-content: space-between;
46 | }
47 |
48 | .top-row ::deep a, .top-row ::deep .btn-link {
49 | margin-left: 0;
50 | }
51 | }
52 |
53 | @media (min-width: 641px) {
54 | .page {
55 | flex-direction: row;
56 | }
57 |
58 | .sidebar {
59 | width: 250px;
60 | height: 100vh;
61 | position: sticky;
62 | top: 0;
63 | }
64 |
65 | .top-row {
66 | position: sticky;
67 | top: 0;
68 | z-index: 1;
69 | }
70 |
71 | .top-row.auth ::deep a:first-child {
72 | flex: 1;
73 | text-align: right;
74 | width: 0;
75 | }
76 |
77 | .top-row, article {
78 | padding-left: 2rem !important;
79 | padding-right: 1.5rem !important;
80 | }
81 | }
82 |
83 | #blazor-error-ui {
84 | background: lightyellow;
85 | bottom: 0;
86 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
87 | display: none;
88 | left: 0;
89 | padding: 0.6rem 1.25rem 0.7rem 1.25rem;
90 | position: fixed;
91 | width: 100%;
92 | z-index: 1000;
93 | }
94 |
95 | #blazor-error-ui .dismiss {
96 | cursor: pointer;
97 | position: absolute;
98 | right: 0.75rem;
99 | top: 0.5rem;
100 | }
101 |
--------------------------------------------------------------------------------
/Dotnet/src/eShopLite/Store/Components/Layout/NavMenu.razor:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
31 |
--------------------------------------------------------------------------------
/Dotnet/src/eShopLite/Store/Components/Layout/NavMenu.razor.css:
--------------------------------------------------------------------------------
1 | .navbar-toggler {
2 | appearance: none;
3 | cursor: pointer;
4 | width: 3.5rem;
5 | height: 2.5rem;
6 | color: white;
7 | position: absolute;
8 | top: 0.5rem;
9 | right: 1rem;
10 | border: 1px solid rgba(255, 255, 255, 0.1);
11 | background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
12 | }
13 |
14 | .navbar-toggler:checked {
15 | background-color: rgba(255, 255, 255, 0.5);
16 | }
17 |
18 | .top-row {
19 | height: 3.5rem;
20 | background-color: rgba(0,0,0,0.4);
21 | }
22 |
23 | .navbar-brand {
24 | font-size: 1.1rem;
25 | }
26 |
27 | .bi {
28 | display: inline-block;
29 | position: relative;
30 | width: 1.25rem;
31 | height: 1.25rem;
32 | margin-right: 0.75rem;
33 | top: -1px;
34 | background-size: cover;
35 | }
36 |
37 | .bi-house-door-fill {
38 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
39 | }
40 |
41 | .bi-plus-square-fill {
42 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
43 | }
44 |
45 | .bi-list-nested {
46 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
47 | }
48 |
49 | .nav-item {
50 | font-size: 0.9rem;
51 | padding-bottom: 0.5rem;
52 | }
53 |
54 | .nav-item:first-of-type {
55 | padding-top: 1rem;
56 | }
57 |
58 | .nav-item:last-of-type {
59 | padding-bottom: 1rem;
60 | }
61 |
62 | .nav-item ::deep a {
63 | color: #d7d7d7;
64 | border-radius: 4px;
65 | height: 3rem;
66 | display: flex;
67 | align-items: center;
68 | line-height: 3rem;
69 | }
70 |
71 | .nav-item ::deep a.active {
72 | background-color: rgba(255,255,255,0.25);
73 | color: white;
74 | }
75 |
76 | .nav-item ::deep a:hover {
77 | background-color: rgba(255,255,255,0.1);
78 | color: white;
79 | }
80 |
81 | .nav-scrollable {
82 | display: none;
83 | }
84 |
85 | .navbar-toggler:checked ~ .nav-scrollable {
86 | display: block;
87 | }
88 |
89 | @media (min-width: 641px) {
90 | .navbar-toggler {
91 | display: none;
92 | }
93 |
94 | .nav-scrollable {
95 | /* Never collapse the sidebar for wide screens */
96 | display: block;
97 |
98 | /* Allow sidebar to scroll for tall menus */
99 | height: calc(100vh - 3.5rem);
100 | overflow-y: auto;
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/Dotnet/src/eShopLite/Store/Components/Pages/Home.razor:
--------------------------------------------------------------------------------
1 | @page "/"
2 |
3 |
10 | Source Code
11 |
12 |
13 | Home
6 | 7 | Welcome to the best e-commerce platform in the world - eShopLite! 8 | -------------------------------------------------------------------------------- /Dotnet/src/eShopLite/Store/Components/Pages/Products.razor: -------------------------------------------------------------------------------- 1 | @page "/products" 2 | @using DataEntities 3 | @using Store.Services 4 | @inject ProductService ProductService 5 | @inject IConfiguration Configuration 6 | @attribute [StreamRendering(true)] 7 | 8 |Products
11 | 12 |Here are some of our amazing outdoor products that you can purchase.
13 | 14 | @if (products == null) 15 | { 16 |Loading...
17 | } 18 | else 19 | { 20 || Image | 24 |Name | 25 |Description | 26 |Price | 27 |
|---|---|---|---|
 |
35 | @product.Name | 36 |@product.Description | 37 |@product.Price | 38 |
Search Products
11 | 12 |Search our amazing outdoor products that you can purchase.
13 | 14 |
15 |
16 |
21 |
26 |
27 |
28 | @if (products == null)
29 | {
30 |
17 |
18 |
19 |
20 | 21 |
@aiResponse
22 | 23 | @* Uncomment this to show elapsed time *@ 24 | @*Elapsed Time: [@elapsedTime]
*@ 25 |Loading...
31 | } 32 | else 33 | { 34 || Image | 38 |Name | 39 |Description | 40 |Price | 41 |
|---|---|---|---|
|
49 | @product.Name | 50 |@product.Description | 51 |@product.Price | 52 |