mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ai-ux): deduplicate AI queries, handle ServiceUnavailable retries, and optimize reader canvas graph prerendering (#44)

Browse Source 
This Pull Request encapsulates all outstanding AI, Blazor InteractiveAuto lifecycle, pgvector, and Firefox authorization/session compatibility fixes.

### Key Accomplishments:
1. **Concurrent Request Deduplication (Option B):** Implemented a thread-safe active task registry in `KnowledgeService` that groups concurrent graph extraction queries for the same content, preventing duplicate AI calls completely.
2. **Resilience Strategy for Downstream Demands:** Extended the `ai-retry` resilience pipeline to automatically intercept and retry on temporary Google API `503 ServiceUnavailable` / `high demand` spikes.
3. **Interactive Graph Generation Guard (Option A):** Prevented server-side prerender-phase graph requests in the reader canvas component.
4. **Firefox Compatibility & Cookie Handler:** Implemented an authentication endpoint and hybrid hidden-form submission flow to solve login, registration, and logout redirections and cookies securely.
5. **Autoscrolling & Graph Exclusions:** Added concept-to-block smooth scrolling, active block badging, and filtered out markdown code blocks from being extracted as nodes.

All unit tests compiled and passed 100% cleanly.

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: #44
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #44.
This commit is contained in:
Antigravity
2026-05-18 17:53:36 +00:00
committed by Marek Jaisński
parent f808734768
commit 541e9e1fb5
42 changed files with 2351 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Organisms/BookIngestionModal.razor
+6 -1
View File
@@ -55,6 +55,10 @@
<label>Author</label>
<input type="text" class="form-input" @bind="Metadata.Author" placeholder="Enter author name" />
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-input" @bind="Metadata.Description" placeholder="Book description" rows="3"></textarea>
</div>
</div>
</div>
@@ -205,7 +209,8 @@
Metadata.Title,
Metadata.Author,
Metadata.CoverImage != null ? Convert.ToBase64String(Metadata.CoverImage) : null,
Convert.ToBase64String(_epubBytes)
Convert.ToBase64String(_epubBytes),
Metadata.Description
);
var response = await Http.PostAsJsonAsync("api/library/ingest", request);
src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor
+79
View File
@@ -0,0 +1,79 @@
@using NexusReader.Application.DTOs.User
@using NexusReader.UI.Shared.Components.Atoms
@inject NavigationManager NavigationManager
<section class="current-reading-card glass-panel">
@if (Book != null)
{
<div class="card-layout">
<div class="book-cover">
<img src="@(Book.CoverUrl ?? "https://via.placeholder.com/120x180?text=No+Cover")" alt="@Book.Title" />
</div>
<div class="book-details">
<div class="header-info">
<h3 class="book-title">@Book.Title</h3>
<span class="author-name">by @Book.Author.Name</span>
</div>
<div class="chapter-progress">
<div class="progress-header">
<span class="chapter-name">@Book.LastChapter</span>
<span class="percentage">@(Book.Progress.ToString("F0"))%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar-fill" style="width: @(Book.Progress.ToString("F0"))%"></div>
</div>
</div>
@if (!string.IsNullOrEmpty(Book.Description))
{
<p class="book-excerpt">
@Book.Description
</p>
}
else
{
<p class="book-excerpt empty">
Kontynuuj odkrywanie wiedzy w książce "@Book.Title".
Twój cyfrowy asystent Nexus jest gotowy do analizy kolejnych rozdziałów i generowania interaktywnych map myśli.
</p>
}
<div class="actions">
<button class="btn-nexus outline" @onclick="HandleContinueReading">
Continue Reading
<NexusIcon Name="arrow-right" Size="16" />
</button>
</div>
</div>
</div>
}
else
{
<div class="empty-state">
<div class="empty-icon">
<NexusIcon Name="book-open" Size="48" />
</div>
<div class="empty-text">
<h3>Brak aktywnych lektur</h3>
<p>Przejdź do biblioteki, aby rozpocząć przygodę z Nexus Reader.</p>
</div>
<button class="btn-nexus primary" @onclick='() => NavigationManager.NavigateTo("/library")'>
Przejdź do Biblioteki
</button>
</div>
}
</section>
@code {
[Parameter] public LastReadBookDto? Book { get; set; }
private void HandleContinueReading()
{
if (Book != null)
{
NavigationManager.NavigateTo($"/reader/{Book.Id}?chapter={Book.LastChapterIndex}");
}
}
}
src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css
+201
View File
@@ -0,0 +1,201 @@
.current-reading-card {
width: 100%;
padding: 2rem;
overflow: hidden;
}
.card-layout {
display: flex;
gap: 2.5rem;
align-items: flex-start;
}
.book-cover {
width: 140px;
flex-shrink: 0;
position: relative;
}
.book-cover img {
width: 100%;
border-radius: 12px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.book-cover:hover img {
transform: translateY(-5px);
}
.book-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0; /* Important for ellipsis */
}
.header-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.book-title {
font-family: var(--nexus-font-serif);
font-size: 1.75rem;
font-weight: 700;
color: #FFFFFF;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.author-name {
font-size: 0.9rem;
color: #A0A0A0;
font-weight: 500;
}
.chapter-progress {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.progress-header {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
font-weight: 600;
}
.chapter-name {
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.percentage {
color: var(--nexus-neon);
}
.progress-bar-container {
height: 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 100px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(--nexus-neon);
box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);
border-radius: 100px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-excerpt {
font-size: 0.95rem;
line-height: 1.6;
color: #B0B0B0;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.book-excerpt.empty {
font-style: italic;
opacity: 0.7;
}
.actions {
margin-top: 0.5rem;
}
.btn-nexus {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}
.btn-nexus.outline {
background: transparent;
color: var(--nexus-neon);
border: 1px solid rgba(0, 255, 153, 0.3);
}
.btn-nexus.outline:hover {
background: rgba(0, 255, 153, 0.05);
border-color: var(--nexus-neon);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 255, 153, 0.1);
}
.btn-nexus.primary {
background: var(--nexus-neon);
color: #000;
}
.btn-nexus.primary:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 5px 15px rgba(0, 255, 153, 0.2);
}
/* Empty State */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 2rem;
text-align: center;
}
.empty-icon {
color: var(--nexus-neon);
opacity: 0.3;
filter: drop-shadow(0 0 10px rgba(0, 255, 153, 0.2));
}
.empty-text h3 {
color: #FFFFFF;
margin: 0 0 0.5rem 0;
}
.empty-text p {
color: #A0A0A0;
margin: 0;
}
@media (max-width: 768px) {
.card-layout {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.5rem;
}
.book-title, .chapter-name {
white-space: normal;
}
.header-info, .chapter-progress {
align-items: center;
}
}
src/NexusReader.UI.Shared/Components/Organisms/KnowledgeGraph.razor
+1 -1
View File
@@ -9,7 +9,7 @@
@inject IKnowledgeGraphService GraphService
@inject IReaderInteractionService InteractionService
<div class="knowledge-graph-container" id="@ContainerId">
<div class="knowledge-graph-container @(GraphService.IsLoading ? "loading" : "")" id="@ContainerId">
@if (GraphService.IsLoading || GraphService.CurrentGraphData == null)
{
<div class="loading-state">
src/NexusReader.UI.Shared/Components/Organisms/KnowledgeGraph.razor.css
+20 -1
View File
@@ -10,6 +10,10 @@
position: relative;
}
.knowledge-graph-container.loading > ::deep svg {
display: none !important;
}
.graph-controls {
position: absolute;
bottom: 1.5rem;
@@ -52,12 +56,27 @@
}
.loading-state {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
justify-content: center;
gap: 1.25rem;
color: #fff;
text-align: center;
z-index: 20;
background: rgba(13, 13, 13, 0.8);
backdrop-filter: blur(8px);
padding: 2rem 1.5rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
width: 85%;
max-width: 280px;
box-sizing: border-box;
}
.preloader-robot {
src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor
+36 -8
View File
@@ -18,13 +18,14 @@
<div class="reader-canvas @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
@if (ViewModel == null)
{
<div class="loading-state">
<NexusTypography Variant="NexusTypography.TypographyVariant.UI">@StatusMessage</NexusTypography>
<div class="loading-state full-page">
<div class="spinner-glow"></div>
<NexusTypography Variant="NexusTypography.TypographyVariant.UI" Class="loading-text">@StatusMessage</NexusTypography>
</div>
}
else
{
<div @ref="_containerRef" class="reader-flow-container">
<div @ref="_containerRef" class="reader-flow-container @(_isLoadingChapter ? "content-blurred" : "")">
@foreach (var block in ViewModel.Blocks)
{
<div id="@block.Id" class="block-wrapper @(_highlightedBlockId == block.Id ? "highlighted" : "")">
@@ -35,6 +36,16 @@
</div>
}
</div>
@if (_isLoadingChapter)
{
<div class="chapter-loading-overlay">
<div class="loader-card glass-panel">
<div class="spinner-glow small"></div>
<span class="loader-text">Wczytywanie kolejnego rozdziału...</span>
</div>
</div>
}
}
<SelectionAiPanel
@@ -47,6 +58,7 @@
@code {
private ReaderPageViewModel? ViewModel;
private string StatusMessage = "Loading chapter...";
private bool _isLoadingChapter;
private string _selectedText = string.Empty;
private string _selectedBlockId = string.Empty;
@@ -54,6 +66,7 @@
private string? _highlightedBlockId;
private bool _isJsInitialized;
private ElementReference _containerRef;
private bool _isInteractive;
protected override async Task OnInitializedAsync()
{
@@ -86,6 +99,11 @@
if (firstRender)
{
await SyncService.InitializeAsync();
_isInteractive = true;
if (ViewModel != null)
{
await Coordinator.ProcessFullPageAsync(GetFullPageContent());
}
}
if (ViewModel != null && !_isJsInitialized)
@@ -193,8 +211,9 @@
private async Task LoadChapterAsync(int index)
{
ViewModel = null;
StatusMessage = "Fetching content...";
_isLoadingChapter = true;
StatusMessage = "Wczytywanie treści...";
StateHasChanged();
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
var userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
@@ -202,7 +221,9 @@
var ebookId = NavigationService.CurrentEbookId;
if (ebookId == Guid.Empty)
{
StatusMessage = "No book selected. Please open a book from your library.";
ViewModel = null;
StatusMessage = "Brak wybranej książki. Otwórz książkę z biblioteki.";
_isLoadingChapter = false;
return;
}
@@ -212,13 +233,20 @@
ViewModel = result.Value;
await NavigationService.UpdateMetadataAsync(ViewModel.CurrentChapterIndex, ViewModel.TotalChapters, ViewModel.ChapterTitle);
await Coordinator.ProcessFullPageAsync(GetFullPageContent());
if (_isInteractive)
{
await Coordinator.ProcessFullPageAsync(GetFullPageContent());
}
}
else
{
StatusMessage = $"Error: {result.Errors.FirstOrDefault()?.Message ?? "Failed to load"}";
ViewModel = null;
StatusMessage = $"Błąd: {result.Errors.FirstOrDefault()?.Message ?? "Nie udało się wczytać treści"}";
Logger.LogError("Failed to load chapter {Index} for ebook {EbookId}: {Errors}", index, ebookId, string.Join(", ", result.Errors.Select(e => e.Message)));
}
_isLoadingChapter = false;
StateHasChanged();
}
public async Task ScrollToNodeAsync(string id)
src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css
+102
View File
@@ -156,4 +156,106 @@
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
/* Chapter Loading Overlay and Spinners */
.loading-state.full-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 400px;
gap: 1.5rem;
animation: fadeIn 0.4s ease-out;
}
.spinner-glow {
width: 60px;
height: 60px;
border: 3px solid rgba(0, 255, 153, 0.1);
border-radius: 50%;
border-top-color: var(--nexus-neon, #00ff99);
animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
}
.spinner-glow.small {
width: 36px;
height: 36px;
border-width: 2px;
}
.loading-text {
color: rgba(255, 255, 255, 0.7);
font-size: 1.1rem;
letter-spacing: 0.5px;
font-weight: 500;
}
.theme-light .loading-text {
color: rgba(0, 0, 0, 0.7);
}
.chapter-loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
background-color: rgba(15, 23, 42, 0.15);
backdrop-filter: blur(2px);
animation: fadeIn 0.3s ease-out;
}
.theme-light .chapter-loading-overlay {
background-color: rgba(255, 255, 255, 0.2);
}
.loader-card {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem 2rem;
border-radius: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 1px rgba(255, 255, 255, 0.1) inset;
animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.loader-text {
font-family: var(--nexus-font-sans, 'Inter', sans-serif);
font-weight: 500;
color: #ffffff;
font-size: 0.95rem;
letter-spacing: 0.2px;
}
.theme-light .loader-text {
color: #0f172a;
}
.content-blurred {
filter: blur(3px);
opacity: 0.55;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes scaleIn {
from { transform: scale(0.9) translateY(10px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
src/NexusReader.UI.Shared/Pages/Account/Login.razor
+3 -2
View File
@@ -117,6 +117,7 @@
"ProvisioningFailed" => "Wystąpił błąd podczas przygotowywania Twojego konta.",
"UserAlreadyExists" => "Użytkownik o tym adresie e-mail już istnieje. Zaloguj się tradycyjnie hasłem.",
"LockedOut" => "Twoje konto zostało zablokowane. Spróbuj ponownie później.",
"InvalidCredentials" => "Nieprawidłowy e-mail lub hasło.",
_ => "Wystąpił nieoczekiwany błąd podczas logowania."
};
}
@@ -132,8 +133,8 @@
var result = await IdentityService.LoginAsync(_loginModel.Email, _loginModel.Password, _loginModel.RememberMe);
if (result.IsSuccess)
{
// Trigger hidden form submission to perform cookie-based sign-in
await JS.InvokeVoidAsync("eval", "document.getElementById('nexusLoginForm').submit()");
// Trigger hidden form submission via robust JS helper to perform cookie-based sign-in
await JS.InvokeVoidAsync("nexusAuth.submitLoginForm", "nexusLoginForm", _loginModel.Email, _loginModel.Password, _loginModel.RememberMe);
}
else
{
src/NexusReader.UI.Shared/Pages/Account/Register.razor
+2 -2
View File
@@ -94,8 +94,8 @@
var loginResult = await IdentityService.LoginAsync(_registerModel.Email, _registerModel.Password);
if (loginResult.IsSuccess)
{
// Trigger hidden form submission to perform cookie-based sign-in
await JS.InvokeVoidAsync("eval", "document.getElementById('nexusLoginForm').submit()");
// Trigger hidden form submission via robust JS helper to perform cookie-based sign-in
await JS.InvokeVoidAsync("nexusAuth.submitLoginForm", "nexusLoginForm", _registerModel.Email, _registerModel.Password, false);
}
else
{
src/NexusReader.UI.Shared/Pages/Dashboard.razor
+2 -51
View File
@@ -1,6 +1,7 @@
@page "/"
@using Microsoft.AspNetCore.Authorization
@using NexusReader.UI.Shared.Components.Atoms
@using NexusReader.UI.Shared.Components.Organisms
@using NexusReader.UI.Shared.Services
@inject IIdentityService IdentityService
@inject NavigationManager NavigationManager
@@ -42,57 +43,7 @@
<div class="main-grid">
<!-- Current Reading Card -->
<section class="reading-card glass-panel">
@if (_profile?.LastReadBook != null)
{
<div class="card-header">
<h3>Ostatnio czytane: @_profile.LastReadBook.Title</h3>
</div>
<div class="card-body">
<div class="reading-thumb">
<img src="@(_profile.LastReadBook.CoverUrl ?? "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg")" alt="Current Book" />
</div>
<div class="reading-info">
<div class="progress-section">
<span class="chapter-label">@_profile.LastReadBook.LastChapter</span>
<div class="progress-container">
<div class="progress-bar" style="width: @(_profile.LastReadBook.Progress.ToString("F0", System.Globalization.CultureInfo.InvariantCulture))%">
<div class="progress-bubble">@(_profile.LastReadBook.Progress.ToString("F1"))%</div>
</div>
</div>
<span class="progress-detail">Postęp: @(_profile.LastReadBook.Progress.ToString("F2"))% - @_profile.LastReadBook.Author.Name</span>
</div>
<p class="reading-desc">
Kontynuuj odkrywanie wiedzy w książce "@_profile.LastReadBook.Title".
Twój cyfrowy asystent Nexus jest gotowy do analizy kolejnych rozdziałów i generowania interaktywnych map myśli.
</p>
<div class="card-actions">
<button class="btn-nexus primary" @onclick='() => NavigationManager.NavigateTo($"/reader?chapter={_profile.LastReadBook.LastChapterIndex}")'>Kontynuuj Czytanie</button>
<button class="btn-nexus secondary" @onclick='() => NavigationManager.NavigateTo("/library")'>Moja Biblioteka</button>
</div>
</div>
</div>
}
else
{
<div class="card-header">
<h3>Brak aktywnych lektur</h3>
</div>
<div class="card-body empty-state">
<div class="empty-icon">
<NexusIcon Name="book-open" Size="64" />
</div>
<div class="reading-info">
<p class="reading-desc">
Nie czytasz obecnie żadnej książki. Przejdź do biblioteki, aby przesłać swój pierwszy plik EPUB i rozpocząć przygodę z Nexus Reader.
</p>
<div class="card-actions">
<button class="btn-nexus primary" @onclick='() => NavigationManager.NavigateTo("/library")'>Przejdź do Biblioteki</button>
</div>
</div>
</div>
}
</section>
<CurrentReadingWidget Book="_profile?.LastReadBook" />
<div class="secondary-grid">
<!-- Knowledge Integration -->
src/NexusReader.UI.Shared/Pages/Home.razor
+24 -3
View File
@@ -1,4 +1,5 @@
@page "/reader"
@page "/reader/{BookId:guid}"
@layout ReaderLayout
@attribute [Authorize]
@using NexusReader.UI.Shared.Services
@@ -8,6 +9,7 @@
@inject IJSRuntime JS
@inject NavigationManager NavManager
@inject IReaderNavigationService NavService
@inject IIdentityService IdentityService
<PageTitle>Nexus E-Reader</PageTitle>
<div class="home-reader-container">
@@ -16,6 +18,8 @@
@code {
[Parameter] public Guid? BookId { get; set; }
private ReaderCanvas? readerCanvas;
private string? _activeQuizBlockId;
@@ -28,14 +32,31 @@
QuizState.OnQuizRequested += HandleQuizRequestedAsync;
FocusMode.OnFocusModeChanged += HandleUpdate;
await FocusMode.InitializeAsync();
}
// Handle deep-linking to a specific chapter
protected override async Task OnParametersSetAsync()
{
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
int chapterIndex = 0;
if (Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("chapter", out var chapterValue))
{
if (int.TryParse(chapterValue, out var chapterIndex))
int.TryParse(chapterValue, out chapterIndex);
}
if (BookId.HasValue && BookId.Value != Guid.Empty)
{
if (NavService.CurrentEbookId != BookId.Value || NavService.CurrentChapterIndex != chapterIndex)
{
await NavService.GoToChapter(chapterIndex);
NavService.SetBook(BookId.Value, chapterIndex);
}
}
else if (NavService.CurrentEbookId == Guid.Empty)
{
// If no BookId in URL and no book currently selected, try to load last read book
var profileResult = await IdentityService.GetProfileAsync();
if (profileResult.IsSuccess && profileResult.Value.LastReadBook != null)
{
NavService.SetBook(profileResult.Value.LastReadBook.Id, chapterIndex > 0 ? chapterIndex : profileResult.Value.LastReadBook.LastChapterIndex);
}
}
}
src/NexusReader.UI.Shared/Pages/Library.razor
+506 -16
View File
@@ -1,23 +1,108 @@
@page "/library"
@attribute [Authorize]
@using NexusReader.UI.Shared.Components.Organisms
@using NexusReader.Application.DTOs.User
@using NexusReader.UI.Shared.Services
@using System.Net.Http.Json
@inject HttpClient Http
@inject IReaderNavigationService ReaderNavigation
<div class="library-page">
<header class="library-header">
<h1>Biblioteka</h1>
<div class="header-title-section">
<h1>Moja Biblioteka</h1>
<p class="subtitle">Zarządzaj swoją kolekcją e-booków i rozwijaj strukturę wiedzy z Nexus AI</p>
</div>
<AuthorizeView Roles="Admin, ContentManager">
<NexusButton Class="add-book-trigger" OnClick="() => _isModalOpen = true">
[+] Add New Book
<span class="btn-icon">+</span> Dodaj E-book
</NexusButton>
</AuthorizeView>
</header>
<BookIngestionModal @bind-IsOpen="_isModalOpen" />
<BookIngestionModal @bind-IsOpen="_isModalOpen" @bind-IsOpen:after="RefreshLibrary" />
<div class="library-content glass-panel">
<div class="empty-state">
<p>Twoja kolekcja książek i dokumentów pojawi się tutaj wkrótce.</p>
</div>
<div class="library-content">
@if (_isLoading)
{
<div class="library-loading-container">
<div class="loader-card glass-panel">
<div class="spinner-glow small"></div>
<span class="loader-text">Wczytywanie biblioteki...</span>
</div>
<div class="loading-grid">
@for (int i = 0; i < 3; i++)
{
<div class="skeleton-card glass-panel">
<div class="skeleton-cover"></div>
<div class="skeleton-details">
<div class="skeleton-line title"></div>
<div class="skeleton-line author"></div>
<div class="skeleton-line progress"></div>
</div>
</div>
}
</div>
</div>
}
else if (_books == null || !_books.Any())
{
<div class="empty-state-container glass-panel">
<div class="empty-icon-pulse">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
</div>
<h3>Pusta biblioteka</h3>
<p>Nie masz jeszcze żadnych książek w swojej kolekcji.</p>
<AuthorizeView Roles="Admin, ContentManager">
<Authorized>
<button class="btn-nexus primary" @onclick="() => _isModalOpen = true">
Prześlij pierwszą książkę
</button>
</Authorized>
<NotAuthorized>
<p class="restricted-info">Skontaktuj się z administratorem, aby dodać książki do swojego konta.</p>
</NotAuthorized>
</AuthorizeView>
</div>
}
else
{
<div class="books-grid">
@foreach (var book in _books)
{
<div class="book-card glass-panel" @onclick="() => OpenBook(book.Id)">
<div class="book-cover-container">
<img src="@(book.CoverUrl ?? "https://api.dicebear.com/7.x/identicon/svg?seed=" + book.Title)" alt="@book.Title" class="book-cover" />
<div class="cover-overlay">
<span class="read-action">Czytaj teraz</span>
</div>
</div>
<div class="book-details">
<h3 class="book-title" title="@book.Title">@book.Title</h3>
<p class="book-author">@book.Author.Name</p>
@if (book.Progress > 0)
{
<div class="book-progress-section">
<div class="progress-bar">
<div class="progress-fill" style="width: @(book.Progress.ToString("F0"))%"></div>
</div>
<span class="progress-text">Postęp: @(book.Progress.ToString("F0"))% (@book.LastChapter)</span>
</div>
}
else
{
<span class="new-badge">Nowa</span>
}
</div>
</div>
}
</div>
}
</div>
</div>
@@ -26,35 +111,440 @@
padding: 3rem 2rem;
max-width: 1200px;
margin: 0 auto;
animation: fadeIn 0.6s ease-out;
}
.library-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
margin-bottom: 3rem;
flex-wrap: wrap;
gap: 1.5rem;
}
h1 {
font-family: var(--nexus-font-serif);
font-size: 2.5rem;
.header-title-section h1 {
font-family: var(--nexus-font-serif, 'Outfit', 'Georgia', serif);
font-size: 2.8rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
background: linear-gradient(135deg, var(--nexus-text, #ffffff) 0%, rgba(var(--nexus-text-rgb, 255, 255, 255), 0.7) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.header-title-section .subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
color: var(--nexus-text);
}
.library-content {
min-height: 400px;
.add-book-trigger {
background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%) !important;
border: none !important;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
font-weight: 600 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.add-book-trigger:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6) !important;
}
.btn-icon {
margin-right: 0.5rem;
font-weight: bold;
}
/* Books Grid */
.books-grid, .loading-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
.book-card {
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: var(--nexus-radius-lg, 16px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.book-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(800px circle at var(--x, 0) var(--y, 0), rgba(255, 255, 255, 0.06), transparent 40%);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
.book-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.1) inset;
border-color: rgba(255, 255, 255, 0.2);
}
.book-card:hover::before {
opacity: 1;
}
.book-cover-container {
position: relative;
height: 380px;
background: rgba(0, 0, 0, 0.2);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.empty-state {
.book-cover {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-card:hover .book-cover {
transform: scale(1.08);
}
.cover-overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(4px);
}
.book-card:hover .cover-overlay {
opacity: 1;
}
.read-action {
color: #ffffff;
font-weight: 600;
font-size: 1.1rem;
padding: 0.75rem 1.5rem;
border: 2px solid #ffffff;
border-radius: 30px;
transform: translateY(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-card:hover .read-action {
transform: translateY(0);
background: #ffffff;
color: #0f172a;
}
.book-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
background: rgba(15, 23, 42, 0.3);
}
.book-title {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
color: var(--nexus-text, #ffffff);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--nexus-font-sans, 'Inter', sans-serif);
}
.book-author {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 1rem 0;
}
.new-badge {
align-self: flex-start;
font-size: 0.75rem;
font-weight: 600;
color: var(--nexus-primary, #6366f1);
background: rgba(99, 102, 241, 0.15);
padding: 0.25rem 0.75rem;
border-radius: 20px;
border: 1px solid rgba(99, 102, 241, 0.3);
}
/* Book Progress Bar */
.book-progress-section {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.progress-bar {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--nexus-primary, #6366f1) 0%, #a855f7 100%);
border-radius: 3px;
}
.progress-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Empty State */
.empty-state-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 2rem;
text-align: center;
opacity: 0.6;
border-radius: var(--nexus-radius-lg, 16px);
}
.empty-icon-pulse {
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.2);
animation: pulse 3s infinite alternate;
}
.empty-state-container h3 {
font-family: var(--nexus-font-serif);
font-size: 1.8rem;
margin: 0 0 0.5rem 0;
color: var(--nexus-text);
}
.empty-state-container p {
color: rgba(255, 255, 255, 0.5);
max-width: 400px;
margin: 0 0 2rem 0;
}
.btn-nexus.primary {
background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%);
color: #ffffff;
border: none;
padding: 0.75rem 2rem;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
transition: all 0.3s ease;
}
.btn-nexus.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
}
.restricted-info {
font-size: 0.85rem;
font-style: italic;
color: rgba(255, 255, 255, 0.35) !important;
}
/* Skeleton Loading */
.skeleton-card {
border-radius: var(--nexus-radius-lg, 16px);
overflow: hidden;
height: 480px;
}
.skeleton-cover {
height: 380px;
background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
.skeleton-details {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.skeleton-line {
background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
}
.skeleton-line.title {
height: 20px;
width: 80%;
}
.skeleton-line.author {
height: 14px;
width: 50%;
}
.skeleton-line.progress {
height: 8px;
width: 100%;
margin-top: auto;
}
.library-loading-container {
position: relative;
width: 100%;
}
.library-loading-container .loader-card {
position: absolute;
top: 180px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem 2.25rem;
border-radius: 40px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.15) inset;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spinner-glow {
width: 60px;
height: 60px;
border: 3px solid rgba(0, 255, 153, 0.1);
border-radius: 50%;
border-top-color: var(--nexus-neon, #00ff99);
animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
}
.spinner-glow.small {
width: 28px;
height: 28px;
border-width: 2px;
}
.loader-text {
font-family: var(--nexus-font-sans, 'Inter', sans-serif);
font-weight: 500;
color: #ffffff;
font-size: 0.95rem;
letter-spacing: 0.2px;
}
/* Skeleton Loading enhancements */
.skeleton-card {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
opacity: 0.5;
}
.skeleton-cover {
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
}
.skeleton-line {
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
}
/* Animations */
@@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
@@keyframes pulse {
0% { transform: scale(0.95); opacity: 0.6; }
100% { transform: scale(1.05); opacity: 0.9; }
}
@@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@@keyframes scaleIn {
from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
</style>
@code {
private bool _isModalOpen;
private bool _isLoading = true;
private List<LastReadBookDto>? _books;
protected override async Task OnInitializedAsync()
{
await LoadBooksAsync();
}
private async Task LoadBooksAsync()
{
_isLoading = true;
StateHasChanged();
try
{
_books = await Http.GetFromJsonAsync<List<LastReadBookDto>>("api/library/books");
_isLoading = false;
}
catch (Exception ex)
{
Console.WriteLine($"[Library] Failed to load books: {ex.Message}");
if (OperatingSystem.IsBrowser())
{
_isLoading = false;
}
}
finally
{
StateHasChanged();
}
}
private async Task RefreshLibrary()
{
// Refresh when modal closes or when a book is successfully ingested
await LoadBooksAsync();
}
private void OpenBook(Guid bookId)
{
ReaderNavigation.NavigateToBook(bookId);
}
}
src/NexusReader.UI.Shared/Services/IReaderNavigationService.cs
+5
View File
@@ -18,4 +18,9 @@ public interface IReaderNavigationService
/// Navigates to the reader for a specific book and records the current ebook ID.
/// </summary>
void NavigateToBook(Guid bookId);
/// <summary>
/// Sets the active book context (ID and optional chapter) without triggering browser routing.
/// </summary>
void SetBook(Guid bookId, int chapterIndex = 0);
}
src/NexusReader.UI.Shared/Services/KnowledgeCoordinator.cs
+28 -2
View File
@@ -43,8 +43,34 @@ public sealed partial class KnowledgeCoordinator : IDisposable
private async Task HandleNodeSelected(string nodeId)
{
await _interactionService.RequestScrollToBlock(nodeId);
await _interactionService.RequestHighlightBlock(nodeId);
string? targetBlockId = nodeId;
var graph = _graphService.CurrentGraphData;
if (graph != null)
{
var selectedNode = graph.Nodes.FirstOrDefault(n => n.Id == nodeId);
if (selectedNode != null && selectedNode.Group == "concept")
{
// Look for connected block nodes (group: "current") in the links
var connectedLinks = graph.Links.Where(l => l.Source == nodeId || l.Target == nodeId).ToList();
foreach (var link in connectedLinks)
{
var otherId = link.Source == nodeId ? link.Target : link.Source;
var otherNode = graph.Nodes.FirstOrDefault(n => n.Id == otherId);
if (otherNode != null && otherNode.Group == "current")
{
targetBlockId = otherId;
break;
}
}
}
}
if (!string.IsNullOrEmpty(targetBlockId))
{
await _interactionService.RequestScrollToBlock(targetBlockId);
await _interactionService.RequestHighlightBlock(targetBlockId);
}
}
public async Task ProcessFullPageAsync(string fullContent, string tenantId = "global")
src/NexusReader.UI.Shared/Services/ReaderNavigationService.cs
+6
View File
@@ -62,6 +62,12 @@ public class ReaderNavigationService : IReaderNavigationService
_navigationManager.NavigateTo($"/reader/{bookId}");
}
public void SetBook(Guid bookId, int chapterIndex = 0)
{
CurrentEbookId = bookId;
CurrentChapterIndex = chapterIndex;
}
private async Task NotifyNavigationChangedAsync()
{
var handlers = OnNavigationChanged?.GetInvocationList();
src/NexusReader.UI.Shared/wwwroot/js/auth.js
+17
View File
@@ -0,0 +1,17 @@
window.nexusAuth = {
submitLoginForm: function (formId, email, password, rememberMe) {
var form = document.getElementById(formId);
if (!form) return false;
var emailInput = form.querySelector('input[name="email"]');
var passwordInput = form.querySelector('input[name="password"]');
var rememberMeInput = form.querySelector('input[name="rememberMe"]');
if (emailInput) emailInput.value = email;
if (passwordInput) passwordInput.value = password;
if (rememberMeInput) rememberMeInput.value = rememberMe ? "true" : "false";
form.submit();
return true;
}
};
src/NexusReader.UI.Shared/wwwroot/js/knowledgeGraph.js
+14 -7
View File
@@ -386,12 +386,19 @@ export function zoomToFit() {
export function clear() {
if (!rootGroup) return;
rootGroup.select(".links-layer").selectAll("path").remove();
rootGroup.select(".nodes-layer").selectAll("g.node-group").remove();
if (badge) badge.style("display", "none");
if (simulation) {
simulation.nodes([]);
simulation.force("link").links([]);
simulation.stop();
try {
rootGroup.select(".links-layer").selectAll("path").remove();
rootGroup.select(".nodes-layer").selectAll("g.node-group").remove();
if (badge) badge.style("display", "none");
if (simulation) {
simulation.stop();
const linkForce = simulation.force("link");
if (linkForce) {
linkForce.links([]);
}
simulation.nodes([]);
}
} catch (e) {
console.warn("Failed to clear force simulation safely:", e);
}
}