feat(ai-ux): deduplicate AI queries, handle ServiceUnavailable retries, and optimize reader canvas graph prerendering (#44)
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:
@@ -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);
|
||||
|
||||
@@ -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}");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
Reference in New Issue
Block a user