Skip to content

Commit f43f7db

Browse files
KristianMariyanovKristianMariyanov
committed
chore: added search pill and appbar component; fix data source for search and value prop pages
1 parent e6a7528 commit f43f7db

23 files changed

+284
-38
lines changed

‎blazor-progress-rag-demo/Pages/AISearch.razor‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,11 @@
5858
<div class="k-mt-10 k-d-flex k-flex-col k-align-items-center k-w-full k-max-w-screen-lg">
5959
<div class="k-font-size-sm k-color-subtle k-mb-4">Popular searches:</div>
6060

61-
<div class="k-d-flex k-justify-content-center k-w-full">
62-
<TelerikChipList Data="@PopularSearchItems"
63-
TextField="Text"
64-
SelectionMode="@ChipListSelectionMode.Single"
65-
SelectedItemsChanged="@((IEnumerable<PopularSearchItem> items) => OnChipSelected(items))"
66-
Rounded="@ThemeConstants.Chip.Rounded.Full"
67-
Size="@ThemeConstants.Chip.Size.Medium"
68-
Class="k-justify-content-center" />
61+
<div class="k-d-flex k-justify-content-center k-flex-wrap k-gap-2 k-w-full">
62+
@foreach (var item in PopularSearchItems)
63+
{
64+
<SearchPill Text="@item.Text" OnClick="@(() => OnPillClick(item.Text))" />
65+
}
6966
</div>
7067
</div>
7168
}
@@ -93,14 +90,11 @@
9390
<div class="k-mt-10 k-d-flex k-flex-col k-align-items-center k-w-full k-max-w-screen-lg">
9491
<div class="k-font-size-sm k-color-subtle k-mb-4">Related searches:</div>
9592

96-
<div class="k-d-flex k-justify-content-center k-w-full">
97-
<TelerikChipList Data="@PopularSearchItems"
98-
TextField="Text"
99-
SelectionMode="@ChipListSelectionMode.Single"
100-
SelectedItemsChanged="@((IEnumerable<PopularSearchItem> items) => OnChipSelected(items))"
101-
Rounded="@ThemeConstants.Chip.Rounded.Full"
102-
Size="@ThemeConstants.Chip.Size.Medium"
103-
Class="k-justify-content-center" />
93+
<div class="k-d-flex k-justify-content-center k-flex-wrap k-gap-2 k-w-full">
94+
@foreach (var item in PopularSearchItems)
95+
{
96+
<SearchPill Text="@item.Text" OnClick="@(() => OnPillClick(item.Text))" />
97+
}
10498
</div>
10599
</div>
106100
}
@@ -138,7 +132,7 @@
138132

139133
try
140134
{
141-
SearchResult = await NucliaService.AskAsync(SearchQuery, (text) =>
135+
SearchResult = await NucliaService.AskVerseAsync(SearchQuery, (text) =>
142136
{
143137
if (SearchResult != null)
144138
{
@@ -154,13 +148,9 @@
154148
}
155149
}
156150

157-
private async Task OnChipSelected(IEnumerable<PopularSearchItem> items)
151+
private async Task OnPillClick(string text)
158152
{
159-
var selected = items.FirstOrDefault();
160-
if (selected != null)
161-
{
162-
SearchQuery = selected.Text;
163-
await HandleSearch();
164-
}
153+
SearchQuery = text;
154+
await HandleSearch();
165155
}
166156
}

‎blazor-progress-rag-demo/Pages/AgenticRagValue.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@
191191

192192
try
193193
{
194-
await NucliaService.AskAsync(prompt, (chunk) =>
194+
await NucliaService.AskVerseAsync(prompt, (chunk) =>
195195
{
196196
GeneratedValueProposition = chunk;
197197
InvokeAsync(StateHasChanged);

‎blazor-progress-rag-demo/Pages/Index.razor‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,6 @@
22
@inject NavigationManager NavigationManager
33

44
<div class="k-d-flex k-flex-column k-overflow-hidden" style="height: 100vh;">
5-
@* Header *@
6-
<header class="k-d-flex k-align-items-center k-px-6 k-bg-surface k-border-b k-border-solid k-border-border" style="height: 54px; flex-shrink: 0; z-index: 10;">
7-
<div class="k-d-flex k-align-items-center k-gap-3">
8-
<img src="https://www.progress.com/assets/images/icons/progress-mark-icon.svg" alt="Progress Logo"
9-
style="width: 24px; height: 24px;" />
10-
<h1 class="k-h6 !k-m-0">Progress Agentic RAG + Telerik DevTools</h1>
11-
</div>
12-
</header>
135

146
<div class="k-pos-relative k-overflow-x-hidden k-overflow-y-auto k-d-flex k-flex-column k-align-items-center k-justify-content-between k-px-md-9 k-px-xs-3"
157
style="height: calc(100vh - 54px);">

‎blazor-progress-rag-demo/Shared/AppBarComponent.razor‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
@inject NavigationManager NavigationManager
2+
@implements IDisposable
3+
4+
<TelerikMediaQuery Media="(max-width: 1024px)" OnChange="@((matches) => isMobile = matches)" />
5+
6+
@if (IsHomePage)
7+
{
8+
<TelerikAppBar PositionMode="@AppBarPositionMode.Sticky"
9+
Class="custom-appbar">
10+
<AppBarSection Class="k-justify-content-center k-gap-2 k-w-full k-flex-lg-row k-flex-col">
11+
<div class="appbar-home-logo-container" @onclick="GoHome">
12+
<img src="images/progress-logo.svg" alt="Progress Logo" class="appbar-logo-image" />
13+
</div>
14+
<p class="!k-m-0 k-font-weight-medium k-text-center appbar-home-title">
15+
Progress Agentic RAG + Telerik DevTools
16+
</p>
17+
</AppBarSection>
18+
</TelerikAppBar>
19+
}
20+
else
21+
{
22+
<TelerikAppBar PositionMode="@AppBarPositionMode.Sticky"
23+
Class="@($"custom-appbar {(isMobile ? "mobile" : "")}")">
24+
<AppBarSection>
25+
<div class="appbar-brand-container" @onclick="GoHome">
26+
<div class="@($"appbar-logo-container {(isMobile ? "mobile" : "")}")">
27+
<img src="@(isMobile ? "images/progress-logo-compact.svg" : "images/progress-logo.svg")"
28+
alt="Progress Logo"
29+
class="appbar-logo-image" />
30+
</div>
31+
<span class="@($"k-font-weight-medium appbar-title {(isMobile ? "mobile" : "")}")">
32+
Agentic RAG + Telerik DevTools
33+
</span>
34+
</div>
35+
</AppBarSection>
36+
37+
<AppBarSpacer />
38+
39+
<AppBarSection>
40+
@if (!isMobile)
41+
{
42+
<div class="appbar-nav-container">
43+
@foreach (var item in NavItems)
44+
{
45+
<NavLink class="nav-link" href="@item.Path" Match="NavLinkMatch.All" ActiveClass="k-active">
46+
@item.Label
47+
</NavLink>
48+
}
49+
</div>
50+
}
51+
else
52+
{
53+
<div id="menu-button"
54+
class="appbar-mobile-menu-button"
55+
@onclick="@(() => popoverRef?.Show())">
56+
MENU
57+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
58+
<path d="M4 18L20 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
59+
<path d="M4 12L20 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
60+
<path d="M4 6L20 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
61+
</svg>
62+
</div>
63+
64+
<TelerikPopover @ref="popoverRef"
65+
AnchorSelector="#menu-button"
66+
ShowOn="@PopoverShowOn.Click"
67+
Position="@PopoverPosition.Bottom"
68+
Class="mobile-menu-popup">
69+
<PopoverContent>
70+
<div class="appbar-mobile-menu-content">
71+
@foreach (var item in NavItems)
72+
{
73+
<div class="@GetMobileMenuItemClass(item.Path)"
74+
@onclick="@(() => NavigateTo(item.Path))">
75+
@item.Label
76+
</div>
77+
}
78+
</div>
79+
</PopoverContent>
80+
</TelerikPopover>
81+
}
82+
</AppBarSection>
83+
</TelerikAppBar>
84+
}
85+
86+
@code {
87+
private bool isMobile;
88+
private TelerikPopover? popoverRef;
89+
90+
private bool IsHomePage => NavigationManager.Uri == NavigationManager.BaseUri;
91+
92+
private List<NavItem> NavItems = new()
93+
{
94+
new NavItem { Label = "Intelligent Search", Path = "ai-search" },
95+
new NavItem { Label = "Finance Analysis", Path = "financial-analysis" },
96+
new NavItem { Label = "Knowledge Assistant", Path = "knowledge-assistant" },
97+
new NavItem { Label = "Agentic RAG Value", Path = "agentic-rag-value" }
98+
};
99+
100+
protected override void OnInitialized()
101+
{
102+
NavigationManager.LocationChanged += OnLocationChanged;
103+
}
104+
105+
private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
106+
{
107+
StateHasChanged();
108+
}
109+
110+
public void Dispose()
111+
{
112+
NavigationManager.LocationChanged -= OnLocationChanged;
113+
}
114+
115+
private void GoHome()
116+
{
117+
NavigationManager.NavigateTo("/");
118+
}
119+
120+
private void NavigateTo(string path)
121+
{
122+
NavigationManager.NavigateTo(path);
123+
popoverRef?.Hide();
124+
}
125+
126+
private string GetMobileMenuItemClass(string path)
127+
{
128+
var isActive = NavigationManager.ToAbsoluteUri(path).ToString().Equals(NavigationManager.Uri, StringComparison.OrdinalIgnoreCase);
129+
return $"appbar-mobile-menu-item {(isActive ? "active" : "")}";
130+
}
131+
132+
private class NavItem
133+
{
134+
public string Label { get; set; } = "";
135+
public string Path { get; set; } = "";
136+
}
137+
}

‎blazor-progress-rag-demo/Shared/MainLayout.razor‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22

33
<PageTitle>blazor-progress-rag-demo</PageTitle>
44

5-
<main>
6-
<article class="content px-4">
7-
@Body
8-
</article>
9-
</main>
5+
<AppBarComponent />
6+
7+
<main>
8+
<article class="content px-4">
9+
@Body
10+
</article>
11+
</main>

‎blazor-progress-rag-demo/Shared/SearchPill.razor‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<button @onclick="OnClick" disabled="@Disabled" class="search-pill">
2+
@Text
3+
</button>
4+
5+
@code {
6+
[Parameter]
7+
public string Text { get; set; } = string.Empty;
8+
9+
[Parameter]
10+
public EventCallback<MouseEventArgs> OnClick { get; set; }
11+
12+
[Parameter]
13+
public bool Disabled { get; set; } = false;
14+
}

‎blazor-progress-rag-demo/wwwroot/css/site.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -490,3 +490,114 @@ html, body, #root {
490490
@media (min-width: 1400px) {
491491
/* Add xxl breakpoint styles here */
492492
}
493+
494+
495+
/* AppBar Component Styles */
496+
.custom-appbar {
497+
background: #ffffff;
498+
border-bottom: none;
499+
box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08);
500+
overflow: hidden;
501+
padding: 15px 32px;
502+
}
503+
504+
.custom-appbar.mobile {
505+
padding: 15px 12px;
506+
}
507+
508+
.appbar-logo-container {
509+
height: 24px;
510+
width: 102px;
511+
position: relative;
512+
cursor: pointer;
513+
}
514+
515+
.appbar-logo-container.mobile {
516+
width: 24px;
517+
}
518+
519+
.appbar-logo-image {
520+
display: block;
521+
max-width: none;
522+
width: 100%;
523+
height: 100%;
524+
}
525+
526+
.appbar-title {
527+
font-size: 20px;
528+
line-height: 1;
529+
color: var(--gray/light/black, #000000);
530+
letter-spacing: var(--kendo-letter-spacing, 0px);
531+
margin: 0 !important;
532+
}
533+
534+
.appbar-title.mobile {
535+
font-size: 14px;
536+
}
537+
538+
.appbar-nav-container {
539+
display: flex;
540+
gap: 24px;
541+
align-items: center;
542+
}
543+
544+
.appbar-mobile-menu-button {
545+
display: flex;
546+
align-items: center;
547+
gap: 8px;
548+
cursor: pointer;
549+
font-size: 16px;
550+
font-weight: 400;
551+
color: #000000;
552+
}
553+
554+
.appbar-mobile-menu-content {
555+
background-color: #ffffff;
556+
border-radius: 8px;
557+
padding: 8px;
558+
min-width: 200px;
559+
}
560+
561+
.appbar-mobile-menu-item {
562+
padding: 12px 16px;
563+
cursor: pointer;
564+
border-radius: 4px;
565+
font-size: 16px;
566+
font-weight: 400;
567+
color: #A1B0C7;
568+
background-color: transparent;
569+
transition: all 0.2s ease;
570+
}
571+
572+
.appbar-mobile-menu-item.active {
573+
font-weight: 600;
574+
color: #000000;
575+
}
576+
577+
.appbar-mobile-menu-item:hover {
578+
background-color: #f5f5f5;
579+
color: #000000;
580+
}
581+
582+
.appbar-home-logo-container {
583+
height: 24px;
584+
width: 102px;
585+
position: relative;
586+
cursor: pointer;
587+
}
588+
589+
.appbar-home-title {
590+
font-size: 20px;
591+
line-height: 1;
592+
color: var(--gray/light/black, #000000);
593+
letter-spacing: var(--kendo-letter-spacing, 0px);
594+
margin: 0 !important;
595+
}
596+
597+
.appbar-brand-container {
598+
display: flex;
599+
align-items: center;
600+
gap: 8px;
601+
cursor: pointer;
602+
}
603+

‎blazor-progress-rag-demo/wwwroot/background.svg‎ renamed to ‎blazor-progress-rag-demo/wwwroot/images/background.svg‎

File renamed without changes.

‎blazor-progress-rag-demo/wwwroot/book-open.svg‎ renamed to ‎blazor-progress-rag-demo/wwwroot/images/book-open.svg‎

File renamed without changes.

‎blazor-progress-rag-demo/wwwroot/bot.svg‎ renamed to ‎blazor-progress-rag-demo/wwwroot/images/bot.svg‎

File renamed without changes.

0 commit comments

Comments
 (0)