11 | About
12 |
13 |
14 | {e}
")); 46 | } 47 | onMessageAdded(); 48 | } 49 | } -------------------------------------------------------------------------------- /src/AspireAIBlazorChatBot.Web/Components/Chatbot/Chatbot.razor: -------------------------------------------------------------------------------- 1 | @rendermode @(new InteractiveServerRenderMode(prerender: false)) 2 | @using Microsoft.AspNetCore.Components.Authorization 3 | @using AspireApp.WebApp.Chatbot 4 | @using Microsoft.Extensions.AI 5 | @inject IJSRuntime JS 6 | @inject NavigationManager Nav 7 | 8 | @inject AuthenticationStateProvider AuthenticationStateProvider 9 | @inject ILogger Logger 10 | @inject IConfiguration Configuration 11 | @inject IServiceProvider ServiceProvider 12 | 13 |
14 |
15 |
16 |
44 |
45 | @code {
46 | bool missingConfiguration;
47 | ChatState? chatState;
48 | ElementReference textbox;
49 | ElementReference chat;
50 | string? messageToSend;
51 | bool thinking;
52 | IJSObjectReference? jsModule;
53 |
54 | protected override async Task OnInitializedAsync()
55 | {
56 | IChatClient chatClient = ServiceProvider.GetService
17 | @if (chatState is not null)
18 | {
19 | foreach (var message in chatState.ChatMessages.Where(m => m.Role == ChatRole.Assistant || m.Role == ChatRole.User))
20 | {
21 | if (!string.IsNullOrEmpty(message.Contents[0].ToString()))
22 | {
23 |
24 | }
25 | }
26 | }
27 | else if (missingConfiguration)
28 | {
29 |
30 | }
31 |
32 | @if (thinking)
33 | {
34 |
38 |
39 |
43 | [@Configuration["Aspire:OllamaSharp:ollama:Models:0"]] is Thinking...
35 | } 36 | 37 |
5 |
8 |
9 |
10 |
15 | @Body
16 |
17 |
19 |
20 |
21 |
26 |
--------------------------------------------------------------------------------
/src/AspireAIBlazorChatBot.Web/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 {
41 | justify-content: space-between;
42 | }
43 |
44 | .top-row ::deep a, .top-row ::deep .btn-link {
45 | margin-left: 0;
46 | }
47 | }
48 |
49 | @media (min-width: 641px) {
50 | .page {
51 | flex-direction: row;
52 | }
53 |
54 | .sidebar {
55 | width: 250px;
56 | height: 100vh;
57 | position: sticky;
58 | top: 0;
59 | }
60 |
61 | .top-row {
62 | position: sticky;
63 | top: 0;
64 | z-index: 1;
65 | }
66 |
67 | .top-row.auth ::deep a:first-child {
68 | flex: 1;
69 | text-align: right;
70 | width: 0;
71 | }
72 |
73 | .top-row, article {
74 | padding-left: 2rem !important;
75 | padding-right: 1.5rem !important;
76 | }
77 | }
78 |
79 | #blazor-error-ui {
80 | background: lightyellow;
81 | bottom: 0;
82 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
83 | display: none;
84 | left: 0;
85 | padding: 0.6rem 1.25rem 0.7rem 1.25rem;
86 | position: fixed;
87 | width: 100%;
88 | z-index: 1000;
89 | }
90 |
91 | #blazor-error-ui .dismiss {
92 | cursor: pointer;
93 | position: absolute;
94 | right: 0.75rem;
95 | top: 0.5rem;
96 | }
97 |
--------------------------------------------------------------------------------
/src/AspireAIBlazorChatBot.Web/Components/Layout/NavMenu.razor:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
30 |
--------------------------------------------------------------------------------
/src/AspireAIBlazorChatBot.Web/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.37);
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 |
--------------------------------------------------------------------------------
/src/AspireAIBlazorChatBot.Web/Components/Pages/Counter.razor:
--------------------------------------------------------------------------------
1 | @page "/counter"
2 | @rendermode InteractiveServer
3 |
4 | Counter
7 | 8 |Current count: @currentCount
9 | 10 | 11 | 12 | @code { 13 | private int currentCount = 0; 14 | 15 | private void IncrementCount() 16 | { 17 | currentCount++; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/AspireAIBlazorChatBot.Web/Components/Pages/Error.razor: -------------------------------------------------------------------------------- 1 | @page "/Error" 2 | @using System.Diagnostics 3 | 4 |Error.
7 |An error occurred while processing your request.
8 | 9 | @if (ShowRequestId) 10 | { 11 |
12 | Request ID: @requestId
13 |
Development Mode
17 |18 | Swapping to Development environment will display more detailed information about the error that occurred. 19 |
20 |21 | The Development environment shouldn't be enabled for deployed applications. 22 | It can result in displaying sensitive information from exceptions to end users. 23 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 24 | and restarting the app. 25 |
26 | 27 | @code{ 28 | [CascadingParameter] 29 | public HttpContext? HttpContext { get; set; } 30 | 31 | private string? requestId; 32 | private bool ShowRequestId => !string.IsNullOrEmpty(requestId); 33 | 34 | protected override void OnInitialized() 35 | { 36 | requestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/AspireAIBlazorChatBot.Web/Components/Pages/Home.razor: -------------------------------------------------------------------------------- 1 | @rendermode InteractiveServer 2 | @page "/" 3 | @using AspireApp.WebApp.Chatbot 4 | 5 | @inject IConfiguration Configuration 6 | 7 |Hello, world!
10 | 11 | Let's test local models with Ollama! 12 | 13 |14 | 15 |
-
16 |
- 17 | Model Name: 18 | @ollamaSLMName 19 | 20 |
- 21 | Ollama Url: 22 | @ollamaUrl 23 | 24 |
- 25 | Ollama Model List: 26 | @ollamaModelUrlModelList 27 | 28 |
- 29 | 30 | 31 |
-
32 |
@MessageProcessor.ProcessMessageToHTML(modelStatus)
33 |
34 |
Weather
10 | 11 |This component demonstrates showing data loaded from a backend API service.
12 | 13 | @if (forecasts == null) 14 | { 15 |Loading...
16 | } 17 | else 18 | { 19 || Date | 23 |Temp. (C) | 24 |Temp. (F) | 25 |Summary | 26 |
|---|---|---|---|
| @forecast.Date.ToShortDateString() | 33 |@forecast.TemperatureC | 34 |@forecast.TemperatureF | 35 |@forecast.Summary | 36 |
{responseArray[i]}
"; 32 | } 33 | 34 | 35 | return responseHtml; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/AspireAIBlazorChatBot.Web/Program.cs: -------------------------------------------------------------------------------- 1 | using AspireAIBlazorChatBot.Web; 2 | using AspireAIBlazorChatBot.Web.Components; 3 | using Microsoft.Extensions.AI; 4 | 5 | var builder = WebApplication.CreateBuilder(args); 6 | 7 | // Add service defaults & Aspire components. 8 | builder.AddServiceDefaults(); 9 | builder.AddRedisOutputCache("cache"); 10 | 11 | // Add services to the container. 12 | builder.Services.AddRazorComponents() 13 | .AddInteractiveServerComponents(); 14 | 15 | builder.Services.AddHttpClient