feat(infra): Docker-compose configuration and environment-specific security guards for Beta deployment to Test environment (#56)
This pull request introduces the dedicated containerized infrastructure and configuration for deploying NexusReader's beta version in the Test environment. ### Summary of Changes 1. **Docker Infrastructure & Secrets**: - **`docker-compose.test.yml`**: Configured dedicated database and auxiliary services (PostgreSQL 17, Qdrant, Neo4j) on isolated, non-standard ports to ensure zero conflict with the existing server configurations. - **`.env.test.template`**: Provided an environment variable template showing required setups, including mandatory database passwords, API keys, and admin custom passwords. - **`.gitignore`**: Excluded local `.env` files to prevent accidental commits of production or staging secrets. 2. **Database Hardening**: - Configured Neo4j with basic authentication (`IDriver` instantiation uses basic auth when credentials are provided in configuration). - Configured PostgreSQL to use mandatory authentication. - Configured the admin seeder (`DbInitializer.cs`) to dynamically use `NEXUS_ADMIN_PASSWORD` from environment variables, falling back to a default password in local Development only. 3. **Feature-Flagged Restrictions**: - **`appsettings.Test.json`**: Implemented `Features:AllowRegistration` and `Features:AllowPasswordReset` flags set to `false`. - **Middleware Enforcement (`Program.cs`)**: Intercepts requests to `/identity/register` and `/identity/forgotPassword` (and their MVC/form variations) and rejects them with a `403 Forbidden` response in restricted environments. - **OAuth Provisioning Guard (`Program.cs`)**: Blocks new account provisioning via Google OAuth callback by checking the `Features:AllowRegistration` configuration, redirecting users to the login page with a descriptive error. - **UI Protection (`Login.razor`, `Register.razor`)**: Conditionally hides registration/password reset links and intercepts manual navigation attempts to `/account/register` by redirecting to login with a warning. --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #56 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #56.
This commit is contained in:
@@ -10,6 +10,7 @@
|
||||
<line x1="8" y1="2" x2="8" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<line x1="16" y1="6" x2="16" y2="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
break;
|
||||
case "share":
|
||||
case "share-2":
|
||||
<circle cx="18" cy="5" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<circle cx="6" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
@@ -45,6 +46,7 @@
|
||||
<line x1="3" y1="9" x2="21" y2="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<line x1="9" y1="21" x2="9" y2="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
break;
|
||||
case "book":
|
||||
case "book-open":
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
@@ -86,6 +88,17 @@
|
||||
case "log-out":
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
break;
|
||||
case "chevron-left":
|
||||
<polyline points="15 18 9 12 15 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
break;
|
||||
case "chevron-right":
|
||||
<polyline points="9 18 15 12 9 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
break;
|
||||
case "x":
|
||||
case "close":
|
||||
<line x1="18" y1="6" x2="6" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
break;
|
||||
default:
|
||||
<!-- Fallback circle -->
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
|
||||
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 8.1 KiB |
@@ -0,0 +1,41 @@
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
@inject PersistentComponentState ApplicationState
|
||||
@inject AuthenticationStateProvider AuthenticationStateProvider
|
||||
@implements IDisposable
|
||||
|
||||
@code {
|
||||
private PersistingComponentStateSubscription _subscription;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
_subscription = ApplicationState.RegisterOnPersisting(PersistAuthenticationStateAsync);
|
||||
}
|
||||
|
||||
private async Task PersistAuthenticationStateAsync()
|
||||
{
|
||||
var authenticationState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
|
||||
var principal = authenticationState.User;
|
||||
|
||||
if (principal.Identity?.IsAuthenticated == true)
|
||||
{
|
||||
var email = principal.FindFirst(System.Security.Claims.ClaimTypes.Email)?.Value ?? principal.Identity.Name;
|
||||
var tenantId = principal.FindFirst("TenantId")?.Value ?? "global";
|
||||
var roles = string.Join(",", principal.FindAll(System.Security.Claims.ClaimTypes.Role).Select(c => c.Value));
|
||||
|
||||
if (email != null)
|
||||
{
|
||||
ApplicationState.PersistAsJson("UserInfo", new UserInfo
|
||||
{
|
||||
Email = email,
|
||||
TenantId = tenantId,
|
||||
Roles = roles
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_subscription.Dispose();
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using NexusReader.UI.Shared.Models
|
||||
@using NexusReader.Application.DTOs.AI
|
||||
@inject KnowledgeCoordinator Coordinator
|
||||
@inject IReaderInteractionService InteractionService
|
||||
|
||||
@@ -27,14 +27,21 @@
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="parsing-state shimmer" style="@(IsParsing && !IsIndexing ? "display:flex;" : "display:none;")">
|
||||
<div class="parsing-state shimmer" style="@(IsParsing ? "display:flex;" : "display:none;")">
|
||||
<div class="shimmer-content">
|
||||
<div class="spinner"></div>
|
||||
<p>Scanning metadata...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ingesting-state shimmer" style="@(IsIngesting ? "display:flex;" : "display:none;")">
|
||||
<div class="shimmer-content">
|
||||
<div class="spinner"></div>
|
||||
<p>Saving book to library...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verification-state" style="@(IsVerifying && !IsParsing && !IsIndexing ? "display:flex;" : "display:none;")">
|
||||
<div class="verification-state" style="@(IsVerifying ? "display:flex;" : "display:none;")">
|
||||
@if (Metadata != null)
|
||||
{
|
||||
<div class="verification-layout">
|
||||
@@ -70,8 +77,8 @@
|
||||
<div class="actions">
|
||||
<NexusButton Class="btn-secondary" OnClick="Reset" Disabled="IsIngesting">Back</NexusButton>
|
||||
<NexusButton Class="@($"btn-primary {(IsIngesting ? "btn-loading" : "")}")"
|
||||
OnClick="SaveToLibrary"
|
||||
Disabled="IsIngesting">
|
||||
OnClick="SaveToLibrary"
|
||||
Disabled="IsIngesting">
|
||||
@(IsIngesting ? "" : "Save to Library")
|
||||
</NexusButton>
|
||||
</div>
|
||||
@@ -79,9 +86,9 @@
|
||||
</div>
|
||||
|
||||
<div class="upload-state @(_isDragging ? "drag-over" : "")"
|
||||
style="@(!IsParsing && !IsVerifying && !IsIndexing ? "display:flex;" : "display:none;")"
|
||||
@ondragenter="OnDragEnter"
|
||||
@ondragleave="OnDragLeave">
|
||||
style="@(IsUploadActive ? "display:flex;" : "display:none;")"
|
||||
@ondragenter="OnDragEnter"
|
||||
@ondragleave="OnDragLeave">
|
||||
<div class="drop-zone">
|
||||
<InputFile id="epub-upload" OnChange="HandleFileSelected" accept=".epub" class="file-input-cover" />
|
||||
<div class="drop-zone-content">
|
||||
@@ -143,6 +150,7 @@
|
||||
private string? ErrorMessage { get; set; }
|
||||
private byte[]? _epubBytes;
|
||||
private bool _disposed;
|
||||
private bool IsUploadActive => !IsParsing && !IsVerifying && !IsIngesting && !IsIndexing;
|
||||
|
||||
// Allow up to 50 MB
|
||||
private const long MaxFileSize = 50 * 1024 * 1024;
|
||||
@@ -163,6 +171,8 @@
|
||||
|
||||
if (!_disposed)
|
||||
{
|
||||
// Dispatch the state change to the Blazor synchronization context
|
||||
// because this event is triggered asynchronously from a SignalR / WebSocket background thread.
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
@@ -177,6 +187,8 @@
|
||||
if (IngestedBookId != Guid.Empty)
|
||||
{
|
||||
var bookId = IngestedBookId;
|
||||
// Dispatch UI updates and navigation back to the Blazor thread
|
||||
// to avoid thread affinity issues and potential UI lockups in MAUI/Web applications.
|
||||
await InvokeAsync(async () => {
|
||||
if (_disposed) return;
|
||||
await CloseModal();
|
||||
|
||||
@@ -118,8 +118,9 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Parsing State */
|
||||
.parsing-state {
|
||||
/* Parsing and Ingesting States */
|
||||
.parsing-state,
|
||||
.ingesting-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -158,7 +159,8 @@
|
||||
filter: drop-shadow(0 0 8px rgba(0, 255, 153, 0.3));
|
||||
}
|
||||
|
||||
.parsing-state p {
|
||||
.parsing-state p,
|
||||
.ingesting-state p {
|
||||
color: var(--nexus-text);
|
||||
font-family: var(--nexus-font-mono, monospace);
|
||||
font-size: 0.9rem;
|
||||
@@ -371,10 +373,11 @@
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
border-top-color: #000;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: var(--nexus-neon, #00ffaa);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
filter: drop-shadow(0 0 4px var(--nexus-neon, #00ffaa));
|
||||
}
|
||||
|
||||
/* Indexing State */
|
||||
|
||||
@@ -0,0 +1,367 @@
|
||||
@using NexusReader.Application.DTOs.AI
|
||||
@using NexusReader.Application.Abstractions.Services
|
||||
@using NexusReader.Application.DTOs.User
|
||||
@using NexusReader.UI.Shared.Components.Atoms
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using NexusReader.UI.Shared.Models
|
||||
@using System.Net.Http.Json
|
||||
@namespace NexusReader.UI.Shared.Components.Organisms
|
||||
@inject HttpClient Http
|
||||
@inject IKnowledgeService KnowledgeService
|
||||
@inject IReaderNavigationService NavigationService
|
||||
|
||||
<div class="global-intelligence-sheet @(IsOpen ? "is-open" : "")">
|
||||
<div class="sheet-backdrop" @onclick="HandleClose"></div>
|
||||
<div class="sheet-content">
|
||||
<div class="sheet-drag-handle"></div>
|
||||
|
||||
<header class="sheet-header">
|
||||
<div class="header-main">
|
||||
<div class="ai-avatar-badge">
|
||||
<NexusIcon Name="robot" Size="20" Class="neon-glow" />
|
||||
</div>
|
||||
<div class="header-info">
|
||||
<h3>Asystent AI Nexus</h3>
|
||||
<p class="subtitle">Zadawaj pytania do swojej biblioteki</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="close-btn" @onclick="HandleClose" aria-label="Zamknij">
|
||||
<NexusIcon Name="close" Size="20" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="sheet-body">
|
||||
<div class="chat-thread" id="mobile-chat-thread">
|
||||
@if (_chatMessages.Count == 0)
|
||||
{
|
||||
<div class="welcome-container">
|
||||
<div class="welcome-glow-icon">
|
||||
<NexusIcon Name="brain" Size="32" Class="neon-glow" />
|
||||
</div>
|
||||
<h4>Zadaj pytanie asystentowi</h4>
|
||||
<p>KM-RAG przeszukuje całą treść książki, wyciąga semantyczne powiązania i generuje precyzyjne odpowiedzi wraz z przypisami źródłowymi.</p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var message in _chatMessages)
|
||||
{
|
||||
<div class="message-row @(message.Sender == "User" ? "user-row" : "ai-row")" @key="message.Id">
|
||||
<div class="message-avatar">
|
||||
@if (message.Sender == "User")
|
||||
{
|
||||
<NexusIcon Name="user" Size="16" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<NexusIcon Name="robot" Size="16" />
|
||||
}
|
||||
</div>
|
||||
<div class="message-bubble @(message.Sender == "User" ? "user-bubble" : "ai-bubble")">
|
||||
<div class="message-meta">
|
||||
<span class="sender-name">@(message.Sender == "User" ? "Ty" : "Asystent")</span>
|
||||
<span class="message-time">@message.Timestamp.ToString("HH:mm")</span>
|
||||
</div>
|
||||
<div class="message-text">
|
||||
@foreach (var segment in message.Segments)
|
||||
{
|
||||
@if (segment.IsCitation)
|
||||
{
|
||||
<span class="nexus-mobile-citation" @onclick="() => HandleCitationClick(segment.CitationId)">
|
||||
[@segment.CitationId]
|
||||
</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
@RenderMarkdown(segment.Text)
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="message-row ai-row">
|
||||
<div class="message-avatar">
|
||||
<NexusIcon Name="robot" Size="16" />
|
||||
</div>
|
||||
<div class="message-bubble ai-bubble pending-bubble">
|
||||
<div class="message-meta">
|
||||
<span class="sender-name">Asystent</span>
|
||||
<span class="message-time">Generowanie...</span>
|
||||
</div>
|
||||
<div class="message-text">
|
||||
<div class="typing-indicator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<span class="loading-label">Analiza grafu pojęć...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="sheet-footer">
|
||||
<div class="scope-indicator">
|
||||
<NexusIcon Name="map" Size="12" />
|
||||
<span>Obszar: <strong>@(string.IsNullOrEmpty(_activeBookTitle) ? "Cała biblioteka" : _activeBookTitle)</strong></span>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<input type="text"
|
||||
class="nexus-mobile-input"
|
||||
placeholder="Zadaj pytanie..."
|
||||
@bind="_question"
|
||||
@bind:event="oninput"
|
||||
@onkeyup="HandleKeyUp"
|
||||
disabled="@_isLoading" />
|
||||
|
||||
<button class="send-btn @(string.IsNullOrWhiteSpace(_question) || _isLoading ? "disabled" : "")"
|
||||
disabled="@(string.IsNullOrWhiteSpace(_question) || _isLoading)"
|
||||
@onclick="AskQuestionAsync">
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="btn-spinner"></div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<NexusIcon Name="send" Size="18" />
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@if (_selectedCitation != null)
|
||||
{
|
||||
<div class="citation-modal-overlay" @onclick="CloseCitationModal">
|
||||
<div class="citation-modal glass-panel" @onclick:stopPropagation>
|
||||
<div class="modal-header">
|
||||
<span class="book-title"><NexusIcon Name="map" Size="14" /> @_selectedCitation.SourceBook</span>
|
||||
<button class="close-btn" @onclick="CloseCitationModal" aria-label="Close">
|
||||
<NexusIcon Name="close" Size="16" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@if (!string.IsNullOrEmpty(_selectedCitation.Author))
|
||||
{
|
||||
<p class="citation-author"><strong>Autor:</strong> @_selectedCitation.Author</p>
|
||||
}
|
||||
@if (_selectedCitation.PageNumber.HasValue)
|
||||
{
|
||||
<p class="citation-page"><strong>Strona:</strong> @_selectedCitation.PageNumber.Value</p>
|
||||
}
|
||||
<p class="citation-snippet">"@_selectedCitation.Snippet"</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-nexus" @onclick="CloseCitationModal">Zamknij</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private static readonly System.Text.RegularExpressions.Regex CitationRegex = new(
|
||||
@"\[Source ID:\s*([^\]]+)\]|\[([a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12})\]",
|
||||
System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.Compiled);
|
||||
|
||||
private static readonly System.Text.RegularExpressions.Regex BoldRegex = new(
|
||||
@"\*\*(.*?)\*\*",
|
||||
System.Text.RegularExpressions.RegexOptions.Compiled);
|
||||
|
||||
private static readonly System.Text.RegularExpressions.Regex ItalicRegex = new(
|
||||
@"\*(.*?)\*",
|
||||
System.Text.RegularExpressions.RegexOptions.Compiled);
|
||||
|
||||
private static readonly System.Text.RegularExpressions.Regex CodeBlockRegex = new(
|
||||
@"```(?:[a-zA-Z0-9+#]+)?\s*([\s\S]*?)\s*```",
|
||||
System.Text.RegularExpressions.RegexOptions.Compiled);
|
||||
|
||||
private static readonly System.Text.RegularExpressions.Regex InlineCodeRegex = new(
|
||||
@"`(.*?)`",
|
||||
System.Text.RegularExpressions.RegexOptions.Compiled);
|
||||
|
||||
[Parameter] public bool IsOpen { get; set; }
|
||||
[Parameter] public EventCallback OnClose { get; set; }
|
||||
[Parameter] public string? TenantId { get; set; }
|
||||
|
||||
private string _question = string.Empty;
|
||||
private bool _isLoading;
|
||||
private string _activeBookTitle = string.Empty;
|
||||
private List<ChatMessage> _chatMessages = new();
|
||||
private CitationDto? _selectedCitation;
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
if (IsOpen && string.IsNullOrEmpty(_activeBookTitle) && NavigationService.CurrentEbookId != Guid.Empty)
|
||||
{
|
||||
_activeBookTitle = NavigationService.ChapterTitle ?? "Aktywna książka";
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleClose()
|
||||
{
|
||||
if (OnClose.HasDelegate)
|
||||
{
|
||||
await OnClose.InvokeAsync();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleKeyUp(KeyboardEventArgs e)
|
||||
{
|
||||
if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(_question) && !_isLoading)
|
||||
{
|
||||
await AskQuestionAsync();
|
||||
}
|
||||
}
|
||||
|
||||
private void HandleCitationClick(string citationId)
|
||||
{
|
||||
_selectedCitation = _chatMessages
|
||||
.SelectMany(m => m.Citations)
|
||||
.FirstOrDefault(c => c.CitationId.Equals(citationId, StringComparison.OrdinalIgnoreCase))
|
||||
?? new CitationDto
|
||||
{
|
||||
CitationId = citationId,
|
||||
SourceBook = "Grounded Document Chunk",
|
||||
Snippet = "Context snippet retrieved from vector search node."
|
||||
};
|
||||
}
|
||||
|
||||
private void CloseCitationModal()
|
||||
{
|
||||
_selectedCitation = null;
|
||||
}
|
||||
|
||||
private async Task AskQuestionAsync()
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(_question) || _isLoading) return;
|
||||
|
||||
var userQuestion = _question;
|
||||
_question = string.Empty;
|
||||
_isLoading = true;
|
||||
|
||||
_chatMessages.Add(new ChatMessage
|
||||
{
|
||||
Sender = "User",
|
||||
Text = userQuestion,
|
||||
Segments = new List<ResponseSegment> { new ResponseSegment { Text = userQuestion, IsCitation = false } }
|
||||
});
|
||||
|
||||
StateHasChanged();
|
||||
|
||||
try
|
||||
{
|
||||
Guid? ebookId = null;
|
||||
if (NavigationService.CurrentEbookId != Guid.Empty)
|
||||
{
|
||||
ebookId = NavigationService.CurrentEbookId;
|
||||
}
|
||||
|
||||
var tenantId = TenantId ?? "global";
|
||||
|
||||
var result = await KnowledgeService.AskQuestionAsync(userQuestion, tenantId, ebookId);
|
||||
if (result.IsSuccess)
|
||||
{
|
||||
var response = result.Value;
|
||||
_chatMessages.Add(new ChatMessage
|
||||
{
|
||||
Sender = "AI",
|
||||
Text = response.Answer,
|
||||
Segments = ParseSegments(response.Answer),
|
||||
Citations = response.Citations
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
var errMsg = $"Błąd: {result.Errors.FirstOrDefault()?.Message ?? "Wystąpił nieznany problem."}";
|
||||
_chatMessages.Add(new ChatMessage
|
||||
{
|
||||
Sender = "AI",
|
||||
Text = errMsg,
|
||||
Segments = new List<ResponseSegment> { new ResponseSegment { Text = errMsg, IsCitation = false } }
|
||||
});
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
var errMsg = $"Błąd sieci/API: {ex.Message}";
|
||||
_chatMessages.Add(new ChatMessage
|
||||
{
|
||||
Sender = "AI",
|
||||
Text = errMsg,
|
||||
Segments = new List<ResponseSegment> { new ResponseSegment { Text = errMsg, IsCitation = false } }
|
||||
});
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isLoading = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private List<ResponseSegment> ParseSegments(string text)
|
||||
{
|
||||
var segments = new List<ResponseSegment>();
|
||||
if (string.IsNullOrEmpty(text)) return segments;
|
||||
|
||||
var matches = CitationRegex.Matches(text);
|
||||
|
||||
int lastIndex = 0;
|
||||
foreach (System.Text.RegularExpressions.Match match in matches)
|
||||
{
|
||||
if (match.Index > lastIndex)
|
||||
{
|
||||
segments.Add(new ResponseSegment
|
||||
{
|
||||
Text = text.Substring(lastIndex, match.Index - lastIndex),
|
||||
IsCitation = false
|
||||
});
|
||||
}
|
||||
|
||||
var citationId = match.Groups[1].Success
|
||||
? match.Groups[1].Value.Trim()
|
||||
: match.Groups[2].Value.Trim();
|
||||
|
||||
segments.Add(new ResponseSegment
|
||||
{
|
||||
IsCitation = true,
|
||||
CitationId = citationId
|
||||
});
|
||||
|
||||
lastIndex = match.Index + match.Length;
|
||||
}
|
||||
|
||||
if (lastIndex < text.Length)
|
||||
{
|
||||
segments.Add(new ResponseSegment
|
||||
{
|
||||
Text = text.Substring(lastIndex),
|
||||
IsCitation = false
|
||||
});
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
|
||||
private MarkupString RenderMarkdown(string text)
|
||||
{
|
||||
if (string.IsNullOrEmpty(text)) return new MarkupString(string.Empty);
|
||||
|
||||
var html = System.Net.WebUtility.HtmlEncode(text);
|
||||
html = BoldRegex.Replace(html, "<strong>$1</strong>");
|
||||
html = ItalicRegex.Replace(html, "<em>$1</em>");
|
||||
html = CodeBlockRegex.Replace(html, "<pre class=\"nexus-mobile-code-block\"><code>$1</code></pre>");
|
||||
html = InlineCodeRegex.Replace(html, "<code class=\"nexus-mobile-inline-code\">$1</code>");
|
||||
html = html.Replace("\n", "<br />");
|
||||
|
||||
return new MarkupString(html);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,545 @@
|
||||
.global-intelligence-sheet {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
pointer-events: none;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
.global-intelligence-sheet.is-open {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.sheet-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.global-intelligence-sheet.is-open .sheet-backdrop {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sheet-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
background: rgba(18, 18, 18, 0.85);
|
||||
backdrop-filter: blur(24px);
|
||||
border-top: 1px solid rgba(0, 255, 153, 0.3);
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.global-intelligence-sheet.is-open .sheet-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.sheet-drag-handle {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
margin: 10px auto 4px auto;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ai-avatar-badge {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, rgba(0, 255, 153, 0.15) 0%, rgba(0, 240, 255, 0.15) 100%);
|
||||
border: 1px solid rgba(0, 255, 153, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ai-avatar-badge ::deep i {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
}
|
||||
|
||||
.header-info h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-info .subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.sheet-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.chat-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.welcome-container {
|
||||
text-align: center;
|
||||
padding: 4rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.welcome-glow-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 255, 153, 0.05);
|
||||
border: 1px solid rgba(0, 255, 153, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.25rem;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 153, 0.1);
|
||||
}
|
||||
|
||||
.welcome-glow-icon ::deep i {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
}
|
||||
|
||||
.welcome-container h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 550;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.welcome-container p {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
line-height: 1.5;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
max-width: 88%;
|
||||
}
|
||||
|
||||
.message-row.user-row {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.message-row.ai-row {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-row .message-avatar {
|
||||
background-color: rgba(0, 255, 153, 0.1);
|
||||
border: 1px solid rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
.message-avatar ::deep i {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.user-row .message-avatar ::deep i {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-bubble {
|
||||
background-color: rgba(0, 255, 153, 0.08);
|
||||
border: 1px solid rgba(0, 255, 153, 0.2);
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
.ai-bubble {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sender-name {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.user-bubble .sender-name {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
}
|
||||
|
||||
.ai-bubble .sender-name {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.message-text strong {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nexus-mobile-citation {
|
||||
background-color: rgba(0, 240, 255, 0.15);
|
||||
border: 1px solid rgba(0, 240, 255, 0.3);
|
||||
color: #00F0FF;
|
||||
border-radius: 4px;
|
||||
padding: 1px 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-left: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nexus-mobile-code-block {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-left: 3px solid var(--nexus-neon, #00FF99);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin: 0.5rem 0;
|
||||
overflow-x: auto;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.nexus-mobile-inline-code {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: #FF7B72;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Typing indicator */
|
||||
.typing-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
|
||||
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: scale(0); }
|
||||
40% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.loading-label {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
padding: 0.75rem 1rem 1.5rem 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background-color: rgba(10, 10, 10, 0.5);
|
||||
}
|
||||
|
||||
.scope-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.scope-indicator ::deep i {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nexus-mobile-input {
|
||||
flex: 1;
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 0.65rem 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
color: #FFFFFF;
|
||||
outline: none;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nexus-mobile-input:focus {
|
||||
border-color: rgba(0, 255, 153, 0.4);
|
||||
background-color: rgba(255, 255, 255, 0.07);
|
||||
box-shadow: 0 0 8px rgba(0, 255, 153, 0.15);
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #00FF99 0%, #00F0FF 100%);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0b0c10;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.send-btn.disabled {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0,0,0,0.1);
|
||||
border-top: 2px solid #000000;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Citation Modal Overlay & Glassmorphic Card */
|
||||
.citation-modal-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
animation: fadeIn 0.25s ease-out;
|
||||
}
|
||||
|
||||
.citation-modal {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
background: rgba(20, 20, 20, 0.85);
|
||||
border: 1px solid rgba(0, 240, 255, 0.25);
|
||||
box-shadow: 0 0 30px rgba(0, 240, 255, 0.15);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.citation-modal .modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.citation-modal .book-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.citation-modal .book-title ::deep i {
|
||||
color: #00F0FF;
|
||||
}
|
||||
|
||||
.citation-modal .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.citation-modal .modal-body {
|
||||
padding: 1rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.citation-modal .citation-author,
|
||||
.citation-modal .citation-page {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.citation-modal .citation-author strong,
|
||||
.citation-modal .citation-page strong {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.citation-modal .citation-snippet {
|
||||
font-style: italic;
|
||||
background: rgba(0, 240, 255, 0.04);
|
||||
border-left: 2px solid #00F0FF;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0.25rem 0 0 0;
|
||||
}
|
||||
|
||||
.citation-modal .modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.citation-modal .btn-nexus {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 255, 153, 0.2) 100%);
|
||||
border: 1px solid rgba(0, 240, 255, 0.4);
|
||||
color: #FFFFFF;
|
||||
font-weight: 550;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.citation-modal .btn-nexus:hover {
|
||||
background: linear-gradient(135deg, rgba(0, 240, 255, 0.35) 0%, rgba(0, 255, 153, 0.35) 100%);
|
||||
border-color: rgba(0, 240, 255, 0.6);
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
@using NexusReader.UI.Shared.Components.Atoms
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using NexusReader.UI.Shared.Models
|
||||
@using NexusReader.Application.Utilities
|
||||
@namespace NexusReader.UI.Shared.Components.Organisms
|
||||
@inject IReaderInteractionService InteractionService
|
||||
@inject IReaderStateService StateService
|
||||
|
||||
<div class="nexus-unified-mobile-toolbar">
|
||||
<!-- LEFT SLOT: Progress & Section Checkpoints -->
|
||||
<div class="toolbar-slot left-slot" @onclick="ToggleCheckpoints" title="Rozdziały i checkpoints">
|
||||
<div class="progress-ring-wrapper">
|
||||
<svg class="progress-ring" width="38" height="38">
|
||||
<circle class="progress-ring-track" stroke="rgba(255,255,255,0.06)" stroke-width="2.5" fill="transparent" r="16" cx="19" cy="19" />
|
||||
<circle class="progress-ring-indicator" stroke="var(--nexus-neon, #00FF99)" stroke-width="2.5" fill="transparent" r="16" cx="19" cy="19"
|
||||
stroke-dasharray="100.53" stroke-dashoffset="@GetDashOffset()" />
|
||||
</svg>
|
||||
<span class="progress-text">@ScrollPercentage%</span>
|
||||
</div>
|
||||
<div class="progress-info">
|
||||
<span class="slot-label">Postęp</span>
|
||||
<span class="slot-desc">Checkpoints</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CENTER SLOT: Global AI Assistant Glowing Trigger -->
|
||||
<div class="toolbar-slot center-slot">
|
||||
<button class="btn-nexus-ai-core" @onclick="HandleAssistantClick" aria-label="Asystent AI">
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="pulse-ring-outer"></div>
|
||||
<NexusIcon Name="robot" Size="22" Class="ai-core-icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT SLOT: Context View Toggles -->
|
||||
<div class="toolbar-slot right-slot">
|
||||
<button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Reader ? "active" : "")"
|
||||
@onclick="() => ChangeTab(MobileReaderTab.Reader)"
|
||||
aria-label="Tekst">
|
||||
<NexusIcon Name="book-open" Size="18" />
|
||||
<span>Tekst</span>
|
||||
</button>
|
||||
<button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Graph ? "active" : "")"
|
||||
@onclick="() => ChangeTab(MobileReaderTab.Graph)"
|
||||
aria-label="Graf">
|
||||
<NexusIcon Name="share-2" Size="18" />
|
||||
<span>Graf</span>
|
||||
</button>
|
||||
<button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Concepts ? "active" : "")"
|
||||
@onclick="() => ChangeTab(MobileReaderTab.Concepts)"
|
||||
aria-label="Mapa">
|
||||
<NexusIcon Name="map" Size="18" />
|
||||
<span>Mapa</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SECTION CHECKPOINTS OVERLAY -->
|
||||
<div class="checkpoints-overlay @(IsCheckpointsOpen ? "is-open" : "")">
|
||||
<div class="checkpoints-backdrop" @onclick="ToggleCheckpoints"></div>
|
||||
<div class="checkpoints-sheet">
|
||||
<div class="sheet-drag-handle"></div>
|
||||
<header class="checkpoints-header">
|
||||
<h4>Checkpoints Sekcji</h4>
|
||||
<button class="close-checkpoints-btn" @onclick="ToggleCheckpoints">
|
||||
<NexusIcon Name="close" Size="16" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="checkpoints-body">
|
||||
@if (Checkpoints == null || !Checkpoints.Any())
|
||||
{
|
||||
<div class="empty-checkpoints">
|
||||
<NexusIcon Name="info" Size="20" />
|
||||
<p>Brak punktów kontrolnych w tym rozdziale.</p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="checkpoints-list">
|
||||
@foreach (var cp in Checkpoints)
|
||||
{
|
||||
var isCurrent = cp == StateService.CurrentBlockId;
|
||||
<div class="checkpoint-item @(isCurrent ? "active" : "")" @onclick="() => SelectCheckpoint(cp)">
|
||||
<div class="checkpoint-indicator">
|
||||
<div class="indicator-dot"></div>
|
||||
<div class="indicator-line"></div>
|
||||
</div>
|
||||
<div class="checkpoint-details">
|
||||
<span class="checkpoint-id">@cp.ToUpper()</span>
|
||||
<span class="checkpoint-label">@(isCurrent ? "Aktualna sekcja" : "Przejdź do sekcji")</span>
|
||||
</div>
|
||||
<NexusIcon Name="chevron-right" Size="14" Class="arrow-icon" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public int ScrollPercentage { get; set; }
|
||||
[Parameter] public MobileReaderTab ActiveTab { get; set; }
|
||||
[Parameter] public EventCallback<MobileReaderTab> OnTabChanged { get; set; }
|
||||
[Parameter] public EventCallback OnAssistantClick { get; set; }
|
||||
[Parameter] public List<string> Checkpoints { get; set; } = new();
|
||||
|
||||
private bool IsCheckpointsOpen { get; set; }
|
||||
|
||||
|
||||
private double GetDashOffset()
|
||||
{
|
||||
// Circumference of r=16 is 2 * pi * 16 = 100.53
|
||||
double circumference = 100.53;
|
||||
double progress = Math.Clamp(ScrollPercentage, 0, 100);
|
||||
return circumference - (progress / 100.0) * circumference;
|
||||
}
|
||||
|
||||
private void ToggleCheckpoints()
|
||||
{
|
||||
IsCheckpointsOpen = !IsCheckpointsOpen;
|
||||
}
|
||||
|
||||
private async Task SelectCheckpoint(string checkpointId)
|
||||
{
|
||||
IsCheckpointsOpen = false;
|
||||
// Scroll to the targeted block
|
||||
await InteractionService.RequestScrollToBlock(checkpointId);
|
||||
// Ensure user is on the text reading tab to see the scroll happen
|
||||
if (ActiveTab != MobileReaderTab.Reader)
|
||||
{
|
||||
await ChangeTab(MobileReaderTab.Reader);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ChangeTab(MobileReaderTab tab)
|
||||
{
|
||||
if (OnTabChanged.HasDelegate)
|
||||
{
|
||||
await OnTabChanged.InvokeAsync(tab);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleAssistantClick()
|
||||
{
|
||||
if (OnAssistantClick.HasDelegate)
|
||||
{
|
||||
await OnAssistantClick.InvokeAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,362 @@
|
||||
.nexus-unified-mobile-toolbar {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
height: 64px;
|
||||
background: rgba(18, 18, 18, 0.75);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(0, 255, 153, 0.2);
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
||||
box-sizing: border-box;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
.toolbar-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* LEFT SLOT: Progress circular ring */
|
||||
.left-slot {
|
||||
justify-content: flex-start;
|
||||
gap: 0.65rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.progress-ring-wrapper {
|
||||
position: relative;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring-indicator {
|
||||
transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slot-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.slot-desc {
|
||||
font-size: 0.6rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* CENTER SLOT: Glowing AI Core Button */
|
||||
.center-slot {
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-nexus-ai-core {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #00FF99 0%, #00F0FF 100%);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0B0C10;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 153, 0.4);
|
||||
transform: translateY(-8px);
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.btn-nexus-ai-core:active {
|
||||
transform: translateY(-6px) scale(0.95);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.3);
|
||||
}
|
||||
|
||||
.ai-core-icon {
|
||||
color: #0b0c10;
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
|
||||
}
|
||||
|
||||
/* Pulse effects */
|
||||
.pulse-ring {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(0, 255, 153, 0.4);
|
||||
opacity: 0;
|
||||
animation: corePulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pulse-ring-outer {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 240, 255, 0.2);
|
||||
opacity: 0;
|
||||
animation: corePulseOuter 2.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes corePulse {
|
||||
0% { transform: scale(0.95); opacity: 0; }
|
||||
50% { opacity: 0.8; }
|
||||
100% { transform: scale(1.15); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes corePulseOuter {
|
||||
0% { transform: scale(0.9); opacity: 0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { transform: scale(1.25); opacity: 0; }
|
||||
}
|
||||
|
||||
/* RIGHT SLOT: Layout Switching */
|
||||
.right-slot {
|
||||
justify-content: flex-end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
background-color: rgba(0, 255, 153, 0.06);
|
||||
}
|
||||
|
||||
.nav-toggle-btn ::deep .nexus-icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active ::deep .nexus-icon {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.nav-toggle-btn span {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* SECTION CHECKPOINTS OVERLAY */
|
||||
.checkpoints-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkpoints-overlay.is-open {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.checkpoints-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(3px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.checkpoints-overlay.is-open .checkpoints-backdrop {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.checkpoints-sheet {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
background: rgba(15, 15, 15, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checkpoints-overlay.is-open .checkpoints-sheet {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.checkpoints-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.checkpoints-header h4 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-checkpoints-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255,255,255,0.5);
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkpoints-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.empty-checkpoints {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
.empty-checkpoints p {
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.checkpoints-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.checkpoint-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.checkpoint-item:active {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.checkpoint-item.active {
|
||||
background-color: rgba(0, 255, 153, 0.04);
|
||||
border-color: rgba(0, 255, 153, 0.15);
|
||||
}
|
||||
|
||||
.checkpoint-indicator {
|
||||
width: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.checkpoint-item.active .indicator-dot {
|
||||
background-color: var(--nexus-neon, #00FF99);
|
||||
box-shadow: 0 0 8px rgba(0, 255, 153, 0.6);
|
||||
}
|
||||
|
||||
.checkpoint-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checkpoint-id {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.checkpoint-item.active .checkpoint-id {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
}
|
||||
|
||||
.checkpoint-label {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
color: rgba(255,255,255,0.25);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.checkpoint-item:active .arrow-icon {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
@@ -2,8 +2,9 @@
|
||||
@using NexusReader.Application.Queries.Reader
|
||||
@using Microsoft.JSInterop
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using NexusReader.UI.Shared.Models
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
@implements IDisposable
|
||||
@implements IAsyncDisposable
|
||||
@inject IMediator Mediator
|
||||
@inject IJSRuntime JS
|
||||
@inject IThemeService ThemeService
|
||||
@@ -11,11 +12,36 @@
|
||||
@inject IReaderNavigationService NavigationService
|
||||
@inject KnowledgeCoordinator Coordinator
|
||||
@inject IReaderInteractionService InteractionService
|
||||
@inject IReaderStateService StateService
|
||||
@inject ISyncService SyncService
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@inject IQuizStateService QuizService
|
||||
@inject IPlatformService PlatformService
|
||||
@inject NavigationManager Navigation
|
||||
@inject ILogger<ReaderCanvas> Logger
|
||||
|
||||
<div class="reader-canvas @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
|
||||
@if (_isMobile && ViewModel != null)
|
||||
{
|
||||
<header class="nexus-mobile-reader-header">
|
||||
<button class="nexus-mobile-escape-btn" @onclick="HandleEscape" aria-label="Powrót do pulpitu">
|
||||
<NexusIcon Name="chevron-left" Size="18" />
|
||||
<span>Pulpit</span>
|
||||
</button>
|
||||
<div class="nexus-mobile-chapter-navigation">
|
||||
<button class="nexus-chapter-nav-btn prev" @onclick="NavigationService.GoToPreviousChapter" disabled="@(NavigationService.CurrentChapterIndex == 0)" aria-label="Poprzedni rozdział">
|
||||
<NexusIcon Name="chevron-left" Size="14" />
|
||||
</button>
|
||||
<div class="nexus-mobile-chapter-title">
|
||||
@ViewModel.ChapterTitle
|
||||
</div>
|
||||
<button class="nexus-chapter-nav-btn next" @onclick="NavigationService.GoToNextChapter" disabled="@(NavigationService.CurrentChapterIndex >= NavigationService.TotalChapters - 1)" aria-label="Następny rozdział">
|
||||
<NexusIcon Name="chevron-right" Size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
|
||||
@if (ViewModel == null)
|
||||
{
|
||||
<div class="loading-state full-page">
|
||||
@@ -53,6 +79,8 @@
|
||||
BlockId="@_selectedBlockId"
|
||||
Coordinates="@_selectionCoords"
|
||||
FullPageContent="@GetFullPageContent()" />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@code {
|
||||
@@ -68,17 +96,31 @@
|
||||
private ElementReference _containerRef;
|
||||
private bool _isInteractive;
|
||||
private string? _currentActiveBlockId;
|
||||
private bool _isMobile = false;
|
||||
private DotNetObjectReference<ReaderCanvas>? _selfReference;
|
||||
private IJSObjectReference? _viewportModule;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await Coordinator.ClearAsync();
|
||||
ThemeService.OnThemeChanged += HandleUpdate;
|
||||
NavigationService.OnNavigationChanged += OnNavigationChanged;
|
||||
QuizService.OnQuizUpdated += HandleUpdate;
|
||||
|
||||
InteractionService.OnScrollToBlockRequested += HandleScrollRequested;
|
||||
InteractionService.OnHighlightBlockRequested += HandleHighlightRequested;
|
||||
InteractionService.OnTextSelected += HandleTextSelected;
|
||||
SyncService.OnProgressReceived += HandleSyncProgressReceived;
|
||||
|
||||
var context = PlatformService.GetDeviceContext();
|
||||
if (context.IsSuccess)
|
||||
{
|
||||
_isMobile = context.Value.DeviceType switch
|
||||
{
|
||||
DeviceType.Phone or DeviceType.Tablet => true,
|
||||
_ => false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
@@ -99,12 +141,15 @@
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
_selfReference = DotNetObjectReference.Create(this);
|
||||
await SyncService.InitializeAsync();
|
||||
_isInteractive = true;
|
||||
if (ViewModel != null)
|
||||
{
|
||||
await Coordinator.ProcessFullPageAsync(GetFullPageContent(), ebookId: ViewModel.EbookId);
|
||||
}
|
||||
|
||||
await InitViewportDetectionAsync();
|
||||
}
|
||||
|
||||
if (ViewModel != null && !_isJsInitialized)
|
||||
@@ -115,12 +160,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
private async ValueTask<IJSObjectReference> EnsureViewportModuleAsync()
|
||||
{
|
||||
if (_viewportModule == null)
|
||||
{
|
||||
_viewportModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/viewport.js");
|
||||
}
|
||||
return _viewportModule;
|
||||
}
|
||||
|
||||
private async Task InitViewportDetectionAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
var module = await EnsureViewportModuleAsync();
|
||||
var isMobileViewport = await module.InvokeAsync<bool>("isMobileViewport");
|
||||
await OnViewportChanged(isMobileViewport);
|
||||
if (_selfReference != null)
|
||||
{
|
||||
await module.InvokeVoidAsync("registerViewportObserver", _selfReference);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogWarning(ex, "Failed to initialize viewport detection in ReaderCanvas.");
|
||||
}
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task OnViewportChanged(bool isMobile)
|
||||
{
|
||||
if (_isMobile != isMobile)
|
||||
{
|
||||
_isMobile = isMobile;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task InitializeSelectionListenerAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/selectionHandler.js");
|
||||
await module.InvokeVoidAsync("initSelectionListener", DotNetObjectReference.Create(this), _containerRef);
|
||||
if (_selfReference != null)
|
||||
{
|
||||
await module.InvokeVoidAsync("initSelectionListener", _selfReference, _containerRef);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
@@ -128,12 +213,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
private IJSObjectReference? _scrollListenerReference;
|
||||
|
||||
private async Task InitializeObserverAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/readerObserver.js");
|
||||
await module.InvokeVoidAsync("initObserver", DotNetObjectReference.Create(this), ".reader-flow-container", ".block-wrapper");
|
||||
if (_selfReference != null)
|
||||
{
|
||||
await module.InvokeVoidAsync("initObserver", _selfReference, ".reader-flow-container", ".block-wrapper");
|
||||
_scrollListenerReference = await module.InvokeAsync<IJSObjectReference>("initScrollListener", _selfReference, ".reader-flow-container");
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
@@ -141,10 +232,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task HandleScrollPercentChanged(int percent)
|
||||
{
|
||||
StateService.CurrentScrollPercentage = percent;
|
||||
await InteractionService.NotifyScrollPercentChanged(percent);
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task HandleBlockReached(string blockId, string content)
|
||||
{
|
||||
_currentActiveBlockId = blockId;
|
||||
StateService.CurrentBlockId = blockId;
|
||||
await InteractionService.NotifyBlockReached(blockId);
|
||||
await Coordinator.OnBlockReachedAsync(blockId, content);
|
||||
|
||||
if (ViewModel != null)
|
||||
@@ -244,6 +344,13 @@
|
||||
ViewModel = result.Value;
|
||||
await NavigationService.UpdateMetadataAsync(ViewModel.CurrentChapterIndex, ViewModel.TotalChapters, ViewModel.ChapterTitle);
|
||||
|
||||
// Populate checkpoints!
|
||||
var checkpoints = ViewModel.Blocks
|
||||
.Where(b => !string.IsNullOrEmpty(b.Id) && b.Id.Contains("seg"))
|
||||
.Select(b => b.Id)
|
||||
.ToList();
|
||||
StateService.CurrentCheckpoints = checkpoints;
|
||||
|
||||
if (_isInteractive)
|
||||
{
|
||||
await Coordinator.ProcessFullPageAsync(GetFullPageContent(), ebookId: ViewModel.EbookId);
|
||||
@@ -259,16 +366,25 @@
|
||||
_isLoadingChapter = false;
|
||||
StateHasChanged();
|
||||
|
||||
if (result.IsSuccess && !string.IsNullOrEmpty(NavigationService.PendingScrollBlockId))
|
||||
if (result.IsSuccess)
|
||||
{
|
||||
var targetBlockId = NavigationService.PendingScrollBlockId;
|
||||
NavigationService.PendingScrollBlockId = null; // Clear it to prevent multiple scrolls
|
||||
_currentActiveBlockId = targetBlockId;
|
||||
if (!string.IsNullOrEmpty(NavigationService.PendingScrollBlockId))
|
||||
{
|
||||
var targetBlockId = NavigationService.PendingScrollBlockId;
|
||||
NavigationService.PendingScrollBlockId = null; // Clear it to prevent multiple scrolls
|
||||
_currentActiveBlockId = targetBlockId;
|
||||
|
||||
// Give the browser slightly more than one frame to render the loaded blocks
|
||||
await Task.Delay(150);
|
||||
await ScrollToNodeAsync(targetBlockId);
|
||||
await InteractionService.RequestHighlightBlock(targetBlockId);
|
||||
// Give the browser slightly more than one frame to render the loaded blocks
|
||||
await Task.Delay(150);
|
||||
await ScrollToNodeAsync(targetBlockId);
|
||||
await InteractionService.RequestHighlightBlock(targetBlockId);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Reset scroll to top now that the new content DOM is rendered
|
||||
await Task.Delay(50); // Give the browser a frame to render the new chapter content
|
||||
await ScrollToTopAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,7 +392,8 @@
|
||||
{
|
||||
try
|
||||
{
|
||||
await JS.InvokeVoidAsync("eval", $"document.getElementById('{id}')?.scrollIntoView({{ behavior: 'smooth', block: 'center' }});");
|
||||
var module = await EnsureViewportModuleAsync();
|
||||
await module.InvokeVoidAsync("scrollIntoView", id);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
@@ -284,16 +401,73 @@
|
||||
}
|
||||
}
|
||||
|
||||
public async Task ScrollToTopAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
var module = await EnsureViewportModuleAsync();
|
||||
await module.InvokeVoidAsync("scrollToTop", ".reader-canvas");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogWarning(ex, "Failed to scroll reader canvas to top.");
|
||||
}
|
||||
}
|
||||
|
||||
private Task HandleUpdate() => InvokeAsync(StateHasChanged);
|
||||
|
||||
public void Dispose()
|
||||
private void HandleEscape()
|
||||
{
|
||||
if (ViewModel != null)
|
||||
{
|
||||
Navigation.NavigateTo("/");
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleAssistantFabClick()
|
||||
{
|
||||
await InteractionService.RequestAssistant();
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
ThemeService.OnThemeChanged -= HandleUpdate;
|
||||
NavigationService.OnNavigationChanged -= OnNavigationChanged;
|
||||
QuizService.OnQuizUpdated -= HandleUpdate;
|
||||
|
||||
InteractionService.OnScrollToBlockRequested -= HandleScrollRequested;
|
||||
InteractionService.OnHighlightBlockRequested -= HandleHighlightRequested;
|
||||
InteractionService.OnTextSelected -= HandleTextSelected;
|
||||
SyncService.OnProgressReceived -= HandleSyncProgressReceived;
|
||||
|
||||
try
|
||||
{
|
||||
if (_viewportModule != null)
|
||||
{
|
||||
if (_selfReference != null)
|
||||
{
|
||||
await _viewportModule.InvokeVoidAsync("unregisterViewportObserver", _selfReference);
|
||||
}
|
||||
await _viewportModule.DisposeAsync();
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogDebug(ex, "Teardown of viewport observer module failed in ReaderCanvas disposal.");
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
if (_scrollListenerReference != null)
|
||||
{
|
||||
await _scrollListenerReference.DisposeAsync();
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogDebug(ex, "Teardown of scroll listener reference failed in ReaderCanvas disposal.");
|
||||
}
|
||||
|
||||
_selfReference?.Dispose();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -258,4 +258,118 @@
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
/* MOBILE READER UI OVERRIDES */
|
||||
@media (max-width: 768px) {
|
||||
.reader-canvas {
|
||||
padding-top: 54px !important;
|
||||
padding-bottom: 80px !important; /* Ensure content is clear of bottom toolbar */
|
||||
}
|
||||
|
||||
.reader-flow-container {
|
||||
padding-bottom: 4rem; /* Safe breathing room */
|
||||
}
|
||||
}
|
||||
|
||||
.nexus-mobile-reader-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 50px;
|
||||
background: rgba(18, 18, 18, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-reader-header {
|
||||
background: rgba(249, 249, 249, 0.8);
|
||||
border-bottom-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.nexus-mobile-escape-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s ease;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.nexus-mobile-escape-btn:active {
|
||||
background-color: rgba(0, 255, 153, 0.08);
|
||||
}
|
||||
|
||||
.nexus-mobile-chapter-navigation {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nexus-mobile-chapter-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-chapter-title {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nexus-chapter-nav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nexus-chapter-nav-btn:hover:not(:disabled) {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.nexus-chapter-nav-btn:disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.theme-light .nexus-chapter-nav-btn {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@@ -4,9 +4,39 @@
|
||||
@using NexusReader.Application.Abstractions.Services
|
||||
@using NexusReader.UI.Shared.Services
|
||||
|
||||
<div class="hub-container">
|
||||
@if (!_isFullyLoaded)
|
||||
{
|
||||
<div class="app-preloader" style="backdrop-filter: blur(15px); background: rgba(18, 18, 18, 0.95); z-index: 100000;">
|
||||
<div class="preloader-spinner"></div>
|
||||
<div class="preloader-text">Synchronizing Secure Session...</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="hub-container @(_isMobileMenuOpen ? "mobile-menu-open" : "")">
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<!-- Mobile Sticky Top-bar -->
|
||||
<div class="nexus-mobile-topbar">
|
||||
<button class="hamburger-btn" @onclick="ToggleMobileMenu" aria-label="Toggle Menu">
|
||||
<NexusIcon Name="menu" Size="24" />
|
||||
</button>
|
||||
<div class="mobile-logo">
|
||||
<NexusIcon Name="diamond" Size="20" Class="logo-icon pulsing-logo" />
|
||||
<span class="logo-text">Nexus</span>
|
||||
</div>
|
||||
<div class="mobile-user-pill">
|
||||
<div class="user-avatar-mini">
|
||||
@context.User.Identity?.Name?[0].ToString().ToUpper()
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Backdrop overlay -->
|
||||
@if (_isMobileMenuOpen)
|
||||
{
|
||||
<div class="mobile-sidebar-backdrop" @onclick="CloseMobileMenu"></div>
|
||||
}
|
||||
|
||||
<aside class="hub-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
@@ -16,48 +46,49 @@
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<NavLink class="nav-item" href="/" Match="NavLinkMatch.All">
|
||||
<NavLink class="nav-item" href="/" Match="NavLinkMatch.All" @onclick="CloseMobileMenu">
|
||||
<div class="nav-icon">
|
||||
<NexusIcon Name="home" Size="18" />
|
||||
</div>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="/library">
|
||||
<NavLink class="nav-item" href="/library" @onclick="CloseMobileMenu">
|
||||
<div class="nav-icon">
|
||||
<NexusIcon Name="book-open" Size="18" />
|
||||
</div>
|
||||
<span class="nav-text">Library</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="/concepts-map">
|
||||
<NavLink class="nav-item" href="/concepts-map" @onclick="CloseMobileMenu">
|
||||
<div class="nav-icon">
|
||||
<NexusIcon Name="map" Size="18" />
|
||||
</div>
|
||||
<span class="nav-text">Concepts Map</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="/intelligence">
|
||||
<NavLink class="nav-item" href="/intelligence" @onclick="CloseMobileMenu">
|
||||
<div class="nav-icon">
|
||||
<NexusIcon Name="cpu" Size="18" />
|
||||
</div>
|
||||
<span class="nav-text">Global AI Q&A</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="/profile">
|
||||
<NavLink class="nav-item" href="/profile" @onclick="CloseMobileMenu">
|
||||
<div class="nav-icon">
|
||||
<NexusIcon Name="message-square" Size="18" />
|
||||
</div>
|
||||
<span class="nav-text">Profile</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="/settings">
|
||||
<NavLink class="nav-item" href="/settings" @onclick="CloseMobileMenu">
|
||||
<div class="nav-icon">
|
||||
<NexusIcon Name="settings" Size="18" />
|
||||
</div>
|
||||
<span class="nav-text">Settings</span>
|
||||
</NavLink>
|
||||
<NavLink class="nav-item" href="/concenters">
|
||||
<NavLink class="nav-item" href="/concenters" @onclick="CloseMobileMenu">
|
||||
<div class="nav-icon">
|
||||
<NexusIcon Name="target" Size="18" />
|
||||
</div>
|
||||
<span class="nav-text">Concenters</span>
|
||||
</NavLink>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
@@ -90,6 +121,8 @@
|
||||
[Inject] private NavigationManager NavigationManager { get; set; } = default!;
|
||||
|
||||
private bool _isSyncing = false;
|
||||
private bool _isMobileMenuOpen = false;
|
||||
private bool _isFullyLoaded = false;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
@@ -104,8 +137,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
protected override void OnAfterRender(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
_isFullyLoaded = true;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private void ToggleMobileMenu()
|
||||
{
|
||||
_isMobileMenuOpen = !_isMobileMenuOpen;
|
||||
}
|
||||
|
||||
private void CloseMobileMenu()
|
||||
{
|
||||
_isMobileMenuOpen = false;
|
||||
}
|
||||
|
||||
private async Task HandleLogout()
|
||||
{
|
||||
CloseMobileMenu();
|
||||
await IdentityService.LogoutAsync();
|
||||
NavigationManager.NavigateTo("/account/logout-form", true);
|
||||
}
|
||||
|
||||
@@ -190,4 +190,157 @@
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
.nexus-mobile-topbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nexus-mobile-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
background: rgba(18, 18, 18, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 0 1.25rem;
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
.hamburger-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s;
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.hamburger-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pulsing-logo {
|
||||
animation: pulse-glow 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 5px rgba(0, 255, 153, 0.4));
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 12px rgba(0, 255, 153, 0.8));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-user-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avatar-mini {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, var(--nexus-neon) 0%, #0099ff 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: #121212;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
.mobile-sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
z-index: 190;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
::deep .hub-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
background: #141414;
|
||||
z-index: 200;
|
||||
transform: translateX(-100%);
|
||||
will-change: transform;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mobile-menu-open ::deep .hub-sidebar {
|
||||
transform: translateX(0);
|
||||
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hub-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hub-main {
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.hub-content {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
::deep .sidebar-header {
|
||||
padding: 1.5rem 1.25rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
::deep .sidebar-nav {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
::deep .nav-item {
|
||||
padding: 0.9rem 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
min-height: 48px; /* Touch target */
|
||||
}
|
||||
|
||||
::deep .sidebar-footer {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@inherits LayoutComponentBase
|
||||
@using NexusReader.Application.Abstractions.Services
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using NexusReader.UI.Shared.Models
|
||||
@using NexusReader.UI.Shared.Components.Molecules
|
||||
@using NexusReader.UI.Shared.Components.Organisms
|
||||
@using NexusReader.Application.Queries.Graph
|
||||
@@ -9,14 +10,16 @@
|
||||
@inject IFocusModeService FocusMode
|
||||
@inject IQuizStateService QuizService
|
||||
@inject IReaderInteractionService InteractionService
|
||||
@inject IReaderStateService StateService
|
||||
@inject IKnowledgeGraphService GraphService
|
||||
@inject IJSRuntime JS
|
||||
@inject IIdentityService IdentityService
|
||||
@inject NavigationManager NavigationManager
|
||||
@inject Microsoft.Extensions.Logging.ILogger<ReaderLayout> Logger
|
||||
@implements IDisposable
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<div class="app-container @_platformClass @(FocusMode.IsFocusModeActive ? "focus-mode-active" : "")">
|
||||
|
||||
<div class="app-container @_platformClass @(FocusMode.IsFocusModeActive ? "focus-mode-active" : "") @($"active-mobile-tab-{_activeMobileTab.ToString().ToLower()}")">
|
||||
<div class="reader-pane">
|
||||
<main>
|
||||
@Body
|
||||
@@ -30,108 +33,208 @@
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="resizer" id="sidebar-resizer"></div>
|
||||
@if (!_isMobile)
|
||||
{
|
||||
<div class="resizer" id="sidebar-resizer"></div>
|
||||
|
||||
<div class="intelligence-sidebar">
|
||||
<IntelligenceToolbar />
|
||||
<div class="intelligence-content">
|
||||
<div class="intelligence-header">
|
||||
<div class="ai-title">
|
||||
<NexusIcon Name="robot" Size="20"
|
||||
Class="@($"neon-glow {(QuizService.HasNewQuiz ? "quiz-available" : "")}")" />
|
||||
<span>Asystent AI</span>
|
||||
<div class="intelligence-sidebar">
|
||||
<IntelligenceToolbar />
|
||||
<div class="intelligence-content">
|
||||
<div class="intelligence-header">
|
||||
<div class="ai-title">
|
||||
<NexusIcon Name="robot" Size="20"
|
||||
Class="@($"neon-glow {(QuizService.HasNewQuiz ? "quiz-available" : "")}")" />
|
||||
<span>Asystent AI</span>
|
||||
</div>
|
||||
<button class="close-btn">×</button>
|
||||
</div>
|
||||
<button class="close-btn">×</button>
|
||||
</div>
|
||||
|
||||
@if (_activeTab == SidebarTab.Knowledge)
|
||||
{
|
||||
<div class="intelligence-scroll-area stacked-layout">
|
||||
@if (!_isMobile)
|
||||
{
|
||||
@if (_activeTab == SidebarTab.Knowledge)
|
||||
{
|
||||
<div class="intelligence-scroll-area stacked-layout">
|
||||
<div class="visual-workspace">
|
||||
<KnowledgeGraph />
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="contextual-intelligence-panel">
|
||||
<div class="panel-header">
|
||||
<NexusIcon Name="brain" Size="18" Class="neon-accent-icon" />
|
||||
<span class="panel-title">Contextual Intelligence Panel</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
@if (_selectedNode != null)
|
||||
{
|
||||
<div class="node-details">
|
||||
<div class="node-header-section">
|
||||
<span class="node-group-badge @(_selectedNode.Group.ToLower())">@(_selectedNode.Group.ToUpper())</span>
|
||||
<h3 class="node-label">@_selectedNode.Label</h3>
|
||||
|
||||
<div class="contextual-intelligence-panel">
|
||||
<div class="panel-header">
|
||||
<NexusIcon Name="brain" Size="18" Class="neon-accent-icon" />
|
||||
<span class="panel-title">Contextual Intelligence Panel</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
@if (_selectedNode != null)
|
||||
{
|
||||
<div class="node-details">
|
||||
<div class="node-header-section">
|
||||
<span class="node-group-badge @(_selectedNode.Group.ToLower())">@(_selectedNode.Group.ToUpper())</span>
|
||||
<h3 class="node-label">@_selectedNode.Label</h3>
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(_selectedNode.Description))
|
||||
{
|
||||
<div class="detail-section">
|
||||
<p class="node-description">@_selectedNode.Description</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrEmpty(_selectedNode.Summary))
|
||||
{
|
||||
<div class="detail-section summary-section">
|
||||
<h4 class="section-title neon-sub-header">Podsumowanie</h4>
|
||||
<p class="node-summary">@_selectedNode.Summary</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (_selectedNode.KeyTerms != null && _selectedNode.KeyTerms.Any())
|
||||
{
|
||||
<div class="detail-section key-terms-section">
|
||||
<h4 class="section-title neon-sub-header">Kluczowe Pojęcia</h4>
|
||||
<ul class="key-terms-list">
|
||||
@foreach (var term in _selectedNode.KeyTerms)
|
||||
{
|
||||
<li class="key-term-item">
|
||||
<span class="term-bullet">•</span>
|
||||
<span class="term-text">@term</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(_selectedNode.Description))
|
||||
{
|
||||
<div class="detail-section">
|
||||
<p class="node-description">@_selectedNode.Description</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrEmpty(_selectedNode.Summary))
|
||||
{
|
||||
<div class="detail-section summary-section">
|
||||
<h4 class="section-title neon-sub-header">Podsumowanie</h4>
|
||||
<p class="node-summary">@_selectedNode.Summary</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (_selectedNode.KeyTerms != null && _selectedNode.KeyTerms.Any())
|
||||
{
|
||||
<div class="detail-section key-terms-section">
|
||||
<h4 class="section-title neon-sub-header">Kluczowe Pojęcia</h4>
|
||||
<ul class="key-terms-list">
|
||||
@foreach (var term in _selectedNode.KeyTerms)
|
||||
{
|
||||
<li class="key-term-item">
|
||||
<span class="term-bullet">•</span>
|
||||
<span class="term-text">@term</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="no-node-selected">
|
||||
<div class="placeholder-glow"></div>
|
||||
<p class="placeholder-text">Wybierz węzeł na wykresie, aby wyświetlić szczegóły architektoniczne.</p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="no-node-selected">
|
||||
<div class="placeholder-glow"></div>
|
||||
<p class="placeholder-text">Wybierz węzeł na wykresie, aby wyświetlić szczegóły architektoniczne.</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button class="open-quiz-btn neon-glow-btn @(QuizService.HasNewQuiz ? "quiz-pulse-btn" : "")" @onclick="() => SetActiveTab(SidebarTab.Quiz)">
|
||||
<NexusIcon Name="quiz" Size="18" />
|
||||
<span>OPEN KNOWLEDGE QUIZ</span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="intelligence-scroll-area quiz-layout">
|
||||
<div class="quiz-nav">
|
||||
<button class="back-to-graph-btn" @onclick="() => SetActiveTab(SidebarTab.Knowledge)">
|
||||
<NexusIcon Name="arrow-left" Size="16" />
|
||||
<span>← Powrót do wykresu</span>
|
||||
<div class="sidebar-footer">
|
||||
<button class="open-quiz-btn neon-glow-btn @(QuizService.HasNewQuiz ? "quiz-pulse-btn" : "")" @onclick="() => SetActiveTab(SidebarTab.Quiz)">
|
||||
<NexusIcon Name="quiz" Size="18" />
|
||||
<span>OPEN KNOWLEDGE QUIZ</span>
|
||||
</button>
|
||||
</div>
|
||||
<KnowledgeCheck />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="intelligence-scroll-area quiz-layout">
|
||||
<div class="quiz-nav">
|
||||
<button class="back-to-graph-btn" @onclick="() => SetActiveTab(SidebarTab.Knowledge)">
|
||||
<NexusIcon Name="arrow-left" Size="16" />
|
||||
<span>← Powrót do wykresu</span>
|
||||
</button>
|
||||
</div>
|
||||
<KnowledgeCheck />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Mobile full-bleed containers mapped to bottom tab navigation -->
|
||||
<div class="nexus-mobile-reader-tabs">
|
||||
<!-- Tab 2: Graph -->
|
||||
<div class="nexus-mobile-tab-content graph-tab @(_activeMobileTab == MobileReaderTab.Graph ? "active" : "")">
|
||||
<KnowledgeGraph />
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Concepts/Quiz -->
|
||||
<div class="nexus-mobile-tab-content insight-tab @(_activeMobileTab == MobileReaderTab.Concepts ? "active" : "")">
|
||||
<div class="mobile-insight-container">
|
||||
<div class="mobile-insight-header">
|
||||
<div class="mobile-insight-nav">
|
||||
<button class="mobile-insight-nav-btn @(_activeTab == SidebarTab.Knowledge ? "active" : "")" @onclick="() => SetActiveTab(SidebarTab.Knowledge)">
|
||||
<NexusIcon Name="brain" Size="16" />
|
||||
<span>Podgląd pojęcia</span>
|
||||
</button>
|
||||
<button class="mobile-insight-nav-btn quiz-btn @(_activeTab == SidebarTab.Quiz ? "active" : "") @(QuizService.HasNewQuiz ? "quiz-pulse" : "")" @onclick="() => SetActiveTab(SidebarTab.Quiz)">
|
||||
<NexusIcon Name="quiz" Size="16" />
|
||||
<span>Quiz wiedzy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-insight-body">
|
||||
@if (_activeTab == SidebarTab.Knowledge)
|
||||
{
|
||||
<div class="contextual-intelligence-panel">
|
||||
<div class="panel-body">
|
||||
@if (_selectedNode != null)
|
||||
{
|
||||
<div class="node-details">
|
||||
<div class="node-header-section">
|
||||
<span class="node-group-badge @(_selectedNode.Group.ToLower())">@(_selectedNode.Group.ToUpper())</span>
|
||||
<h3 class="node-label">@_selectedNode.Label</h3>
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(_selectedNode.Description))
|
||||
{
|
||||
<div class="detail-section">
|
||||
<p class="node-description">@_selectedNode.Description</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrEmpty(_selectedNode.Summary))
|
||||
{
|
||||
<div class="detail-section summary-section">
|
||||
<h4 class="section-title neon-sub-header">Podsumowanie</h4>
|
||||
<p class="node-summary">@_selectedNode.Summary</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (_selectedNode.KeyTerms != null && _selectedNode.KeyTerms.Any())
|
||||
{
|
||||
<div class="detail-section key-terms-section">
|
||||
<h4 class="section-title neon-sub-header">Kluczowe Pojęcia</h4>
|
||||
<ul class="key-terms-list">
|
||||
@foreach (var term in _selectedNode.KeyTerms)
|
||||
{
|
||||
<li class="key-term-item">
|
||||
<span class="term-bullet">•</span>
|
||||
<span class="term-text">@term</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="no-node-selected">
|
||||
<div class="placeholder-glow"></div>
|
||||
<p class="placeholder-text">Wybierz pojęcie na wykresie, aby wyświetlić jego podsumowanie.</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="mobile-quiz-wrapper">
|
||||
<KnowledgeCheck />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MobileReaderToolbar
|
||||
ScrollPercentage="@_scrollPercentage"
|
||||
ActiveTab="@_activeMobileTab"
|
||||
OnTabChanged="SetMobileTab"
|
||||
OnAssistantClick="OpenAssistant"
|
||||
Checkpoints="@StateService.CurrentCheckpoints" />
|
||||
|
||||
<GlobalIntelligence IsOpen="@_isAssistantOpen" OnClose="CloseAssistant" TenantId="@context.User.FindFirst("TenantId")?.Value" />
|
||||
}
|
||||
</Authorized>
|
||||
<Authorizing>
|
||||
<div class="app-preloader">
|
||||
@@ -161,6 +264,22 @@
|
||||
|
||||
private string _platformClass = "platform-desktop";
|
||||
private bool _isMobile = false;
|
||||
private DotNetObjectReference<ReaderLayout>? _selfReference;
|
||||
private IJSObjectReference? _viewportModule;
|
||||
|
||||
private bool _isAssistantOpen;
|
||||
|
||||
private int _scrollPercentage
|
||||
{
|
||||
get => StateService.CurrentScrollPercentage;
|
||||
set => StateService.CurrentScrollPercentage = value;
|
||||
}
|
||||
|
||||
private MobileReaderTab _activeMobileTab
|
||||
{
|
||||
get => StateService.ActiveTab;
|
||||
set => StateService.ActiveTab = value;
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
@@ -169,6 +288,8 @@
|
||||
QuizService.OnQuizRequested += HandleQuizRequestedAsync;
|
||||
|
||||
InteractionService.OnNodeSelected += HandleNodeSelectedAsync;
|
||||
InteractionService.OnAssistantRequested += HandleAssistantRequestedAsync;
|
||||
InteractionService.OnScrollPercentChanged += HandleScrollPercentChanged;
|
||||
GraphService.OnGraphUpdated += HandleGraphUpdatedAsync;
|
||||
|
||||
var context = PlatformService.GetDeviceContext();
|
||||
@@ -190,9 +311,51 @@
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void SetMobileTab(MobileReaderTab tab)
|
||||
{
|
||||
_activeMobileTab = tab;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void OpenAssistant()
|
||||
{
|
||||
_isAssistantOpen = true;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private void CloseAssistant()
|
||||
{
|
||||
_isAssistantOpen = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task HandleScrollPercentChanged(int percent)
|
||||
{
|
||||
_scrollPercentage = percent;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
private async Task HandleQuizRequestedAsync(string blockId)
|
||||
{
|
||||
_activeTab = SidebarTab.Quiz;
|
||||
if (_isMobile)
|
||||
{
|
||||
_activeMobileTab = MobileReaderTab.Concepts;
|
||||
}
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
private async Task HandleAssistantRequestedAsync()
|
||||
{
|
||||
if (_isMobile)
|
||||
{
|
||||
OpenAssistant();
|
||||
}
|
||||
else
|
||||
{
|
||||
_activeMobileTab = MobileReaderTab.Concepts;
|
||||
_activeTab = SidebarTab.Quiz;
|
||||
}
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
@@ -203,6 +366,11 @@
|
||||
{
|
||||
_selectedNode = GraphService.CurrentGraphData.Nodes.FirstOrDefault(n => n.Id == nodeId);
|
||||
}
|
||||
if (_isMobile)
|
||||
{
|
||||
_activeMobileTab = MobileReaderTab.Concepts;
|
||||
_activeTab = SidebarTab.Knowledge;
|
||||
}
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
@@ -226,17 +394,76 @@
|
||||
{
|
||||
Logger.LogError(ex, "Failed to initialize layout resizer JS module.");
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
_viewportModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/viewport.js");
|
||||
await InitViewportDetectionAsync();
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogError(ex, "Failed to import viewport utilities JS module.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task InitViewportDetectionAsync()
|
||||
{
|
||||
if (_viewportModule == null) return;
|
||||
try
|
||||
{
|
||||
_selfReference = DotNetObjectReference.Create(this);
|
||||
var isMobileViewport = await _viewportModule.InvokeAsync<bool>("isMobileViewport");
|
||||
await OnViewportChanged(isMobileViewport);
|
||||
await _viewportModule.InvokeVoidAsync("registerViewportObserver", _selfReference);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogWarning(ex, "Failed to initialize viewport detection.");
|
||||
}
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task OnViewportChanged(bool isMobile)
|
||||
{
|
||||
if (_isMobile != isMobile)
|
||||
{
|
||||
_isMobile = isMobile;
|
||||
_platformClass = _isMobile ? "platform-mobile" : "platform-desktop";
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
|
||||
private Task HandleUpdate() => InvokeAsync(StateHasChanged);
|
||||
|
||||
public void Dispose()
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
FocusMode.OnFocusModeChanged -= HandleUpdate;
|
||||
QuizService.OnQuizUpdated -= HandleUpdate;
|
||||
QuizService.OnQuizRequested -= HandleQuizRequestedAsync;
|
||||
InteractionService.OnNodeSelected -= HandleNodeSelectedAsync;
|
||||
InteractionService.OnAssistantRequested -= HandleAssistantRequestedAsync;
|
||||
InteractionService.OnScrollPercentChanged -= HandleScrollPercentChanged;
|
||||
GraphService.OnGraphUpdated -= HandleGraphUpdatedAsync;
|
||||
|
||||
try
|
||||
{
|
||||
if (_viewportModule != null)
|
||||
{
|
||||
if (_selfReference != null)
|
||||
{
|
||||
await _viewportModule.InvokeVoidAsync("unregisterViewportObserver", _selfReference);
|
||||
}
|
||||
await _viewportModule.DisposeAsync();
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogDebug(ex, "Teardown of viewport observer module failed during component disposal.");
|
||||
}
|
||||
|
||||
_selfReference?.Dispose();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -467,4 +467,184 @@ main {
|
||||
.back-to-graph-btn:hover {
|
||||
color: var(--nexus-neon, #00f0ff);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile-First Platform Customization */
|
||||
.platform-mobile {
|
||||
grid-template-columns: 1fr !important;
|
||||
height: 100vh !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.platform-mobile .reader-pane {
|
||||
width: 100vw !important;
|
||||
height: 100vh !important; /* full viewport height */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Three-tab mobile views depending on the active mobile tab class */
|
||||
.app-container.platform-mobile.active-mobile-tab-reader .reader-pane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-container.platform-mobile.active-mobile-tab-graph .nexus-mobile-reader-tabs .graph-tab {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-container.platform-mobile.active-mobile-tab-concepts .nexus-mobile-reader-tabs .insight-tab {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Mobile full-bleed tabs container */
|
||||
.nexus-mobile-reader-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.platform-mobile .nexus-mobile-reader-tabs {
|
||||
display: none; /* Keep hidden by default */
|
||||
width: 100vw;
|
||||
height: 100vh; /* full viewport height */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #0d0d0d;
|
||||
overflow: hidden;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.app-container.platform-mobile.active-mobile-tab-graph .nexus-mobile-reader-tabs,
|
||||
.app-container.platform-mobile.active-mobile-tab-concepts .nexus-mobile-reader-tabs {
|
||||
display: block; /* Show only when graph or concepts tabs are active */
|
||||
}
|
||||
|
||||
.nexus-mobile-tab-content {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Active tab display with smooth slide-up / fade-in transition */
|
||||
.nexus-mobile-tab-content.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: tab-transition 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes tab-transition {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Inside Mobile Graph Tab: full bleed and responsive */
|
||||
.nexus-mobile-tab-content.graph-tab {
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.nexus-mobile-tab-content.graph-tab ::deep .knowledge-graph-container {
|
||||
height: 100% !important;
|
||||
min-height: 100% !important;
|
||||
}
|
||||
|
||||
.nexus-mobile-tab-content.graph-tab ::deep .graph-controls {
|
||||
bottom: 6.5rem !important;
|
||||
right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.nexus-mobile-tab-content.graph-tab ::deep svg {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* Mobile Insight container & tabs */
|
||||
.mobile-insight-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-insight-header {
|
||||
background: rgba(13, 13, 13, 0.95);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 0.75rem 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-insight-nav {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mobile-insight-nav-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-family: var(--nexus-font-sans, "Outfit", sans-serif);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.mobile-insight-nav-btn.active {
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
color: var(--nexus-neon, #00f0ff);
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
|
||||
}
|
||||
|
||||
.mobile-insight-nav-btn.quiz-btn.quiz-pulse {
|
||||
animation: quiz-pulse-btn-anim 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes quiz-pulse-btn-anim {
|
||||
0% { color: rgba(255, 255, 255, 0.5); }
|
||||
50% { color: #f43f5e; text-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }
|
||||
100% { color: rgba(255, 255, 255, 0.5); }
|
||||
}
|
||||
|
||||
.mobile-insight-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.mobile-insight-body .contextual-intelligence-panel {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mobile-insight-body .contextual-intelligence-panel .panel-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.mobile-quiz-wrapper {
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Obsolescence managed: consolidated mobile toolbar and sheet styled inside respective components */
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
using NexusReader.Application.DTOs.AI;
|
||||
|
||||
namespace NexusReader.UI.Shared.Models;
|
||||
|
||||
/// <summary>
|
||||
/// Defines the active tab state for the unified mobile reader toolbar.
|
||||
/// </summary>
|
||||
public enum MobileReaderTab
|
||||
{
|
||||
Reader,
|
||||
Graph,
|
||||
Concepts
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Screen coordinates for text selection popup positioning.
|
||||
/// </summary>
|
||||
public record SelectionCoordinates(double Top, double Left, double Width);
|
||||
|
||||
/// <summary>
|
||||
/// Represents a message in the KM-RAG global and mobile intelligence chat threads.
|
||||
/// </summary>
|
||||
public class ChatMessage
|
||||
{
|
||||
public string Id { get; set; } = Guid.NewGuid().ToString();
|
||||
public string Sender { get; set; } = string.Empty; // "User" or "AI"
|
||||
public string Text { get; set; } = string.Empty;
|
||||
public DateTime Timestamp { get; set; } = DateTime.UtcNow;
|
||||
public List<ResponseSegment> Segments { get; set; } = new();
|
||||
public List<CitationDto> Citations { get; set; } = new();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Represents a parsed segment of an intelligence response, potentially referencing a citation.
|
||||
/// </summary>
|
||||
public class ResponseSegment
|
||||
{
|
||||
public string Text { get; set; } = string.Empty;
|
||||
public bool IsCitation { get; set; }
|
||||
public string CitationId { get; set; } = string.Empty;
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
@inject IIdentityService IdentityService
|
||||
@inject NavigationManager NavigationManager
|
||||
@inject IJSRuntime JS
|
||||
@inject FeatureSettings FeatureSettings
|
||||
|
||||
<div class="login-page-container">
|
||||
<div class="mesh-bg"></div>
|
||||
@@ -80,8 +81,14 @@
|
||||
</EditForm>
|
||||
|
||||
<div class="auth-footer">
|
||||
<a href="/account/forgot-password" class="auth-link">Zapomniałem hasła?</a>
|
||||
<p class="auth-switch">Nie masz konta? <a href="/account/register">Zarejestruj się</a></p>
|
||||
@if (_allowPasswordReset)
|
||||
{
|
||||
<a href="/account/forgot-password" class="auth-link">Zapomniałem hasła?</a>
|
||||
}
|
||||
@if (_allowRegistration)
|
||||
{
|
||||
<p class="auth-switch">Nie masz konta? <a href="/account/register">Zarejestruj się</a></p>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="auth-legal">
|
||||
@@ -95,20 +102,33 @@
|
||||
<input type="hidden" name="email" value="@_loginModel.Email" />
|
||||
<input type="hidden" name="password" value="@_loginModel.Password" />
|
||||
<input type="hidden" name="rememberMe" value="@(_loginModel.RememberMe ? "true" : "false")" />
|
||||
<input type="hidden" name="returnUrl" value="@ReturnUrl" />
|
||||
</form>
|
||||
|
||||
@code {
|
||||
[CascadingParameter]
|
||||
private Task<AuthenticationState>? AuthStateTask { get; set; }
|
||||
|
||||
[Parameter]
|
||||
[SupplyParameterFromQuery(Name = "error")]
|
||||
public string? ErrorCode { get; set; }
|
||||
|
||||
[Parameter]
|
||||
[SupplyParameterFromQuery(Name = "returnUrl")]
|
||||
public string? ReturnUrl { get; set; }
|
||||
|
||||
private LoginModel _loginModel = new();
|
||||
private string? _errorMessage;
|
||||
private bool _isSubmitting;
|
||||
private bool _showPassword;
|
||||
private bool _allowRegistration;
|
||||
private bool _allowPasswordReset;
|
||||
|
||||
protected override void OnInitialized()
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_allowRegistration = FeatureSettings.AllowRegistration;
|
||||
_allowPasswordReset = FeatureSettings.AllowPasswordReset;
|
||||
|
||||
if (!string.IsNullOrEmpty(ErrorCode))
|
||||
{
|
||||
_errorMessage = ErrorCode switch
|
||||
@@ -118,9 +138,19 @@
|
||||
"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.",
|
||||
"RegistrationDisabled" => "Rejestracja jest wyłączona w tym środowisku.",
|
||||
_ => "Wystąpił nieoczekiwany błąd podczas logowania."
|
||||
};
|
||||
}
|
||||
|
||||
if (AuthStateTask != null)
|
||||
{
|
||||
var authState = await AuthStateTask;
|
||||
if (authState.User.Identity?.IsAuthenticated == true)
|
||||
{
|
||||
NavigationManager.NavigateTo(string.IsNullOrEmpty(ReturnUrl) ? "/" : ReturnUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleLogin()
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
@inject IIdentityService IdentityService
|
||||
@inject NavigationManager NavigationManager
|
||||
@inject IJSRuntime JS
|
||||
@inject FeatureSettings FeatureSettings
|
||||
|
||||
<div class="login-page-container">
|
||||
<div class="mesh-bg"></div>
|
||||
@@ -81,6 +82,15 @@
|
||||
private string? _errorMessage;
|
||||
private bool _isSubmitting;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
var allowRegistration = FeatureSettings.AllowRegistration;
|
||||
if (!allowRegistration)
|
||||
{
|
||||
NavigationManager.NavigateTo("/account/login?error=RegistrationDisabled", replace: true);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleRegister()
|
||||
{
|
||||
_isSubmitting = true;
|
||||
|
||||
@@ -528,3 +528,81 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Mobile Dashboard Overrides */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-content {
|
||||
padding: 1.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
padding: 1.5rem 1rem;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.profile-visual {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.status-pills {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 1.25rem !important;
|
||||
}
|
||||
|
||||
.secondary-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 1.25rem !important;
|
||||
}
|
||||
|
||||
/* Force all widgets to take 100% width and fit inside parent container nicely */
|
||||
.glass-panel {
|
||||
width: 100% !important;
|
||||
padding: 1.25rem !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Expand touch-targets to 48px min height for interactive elements */
|
||||
.btn-nexus, .quiz-option, .satellite, .logout-btn, .nav-item, .quiz-item {
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
@using NexusReader.Application.Abstractions.Services
|
||||
@using NexusReader.Application.DTOs.User
|
||||
@using NexusReader.UI.Shared.Components.Atoms
|
||||
@using NexusReader.UI.Shared.Models
|
||||
@using System.Net.Http.Json
|
||||
@inject HttpClient Http
|
||||
@inject IKnowledgeService KnowledgeService
|
||||
@@ -145,22 +146,7 @@
|
||||
private List<LastReadBookDto>? _books;
|
||||
private List<ChatMessage> _chatMessages = new();
|
||||
|
||||
public class ChatMessage
|
||||
{
|
||||
public string Id { get; set; } = Guid.NewGuid().ToString();
|
||||
public string Sender { get; set; } = string.Empty; // "User" or "AI"
|
||||
public string Text { get; set; } = string.Empty;
|
||||
public DateTime Timestamp { get; set; } = DateTime.UtcNow;
|
||||
public List<ResponseSegment> Segments { get; set; } = new();
|
||||
public List<CitationDto> Citations { get; set; } = new();
|
||||
}
|
||||
|
||||
public class ResponseSegment
|
||||
{
|
||||
public string Text { get; set; } = string.Empty;
|
||||
public bool IsCitation { get; set; }
|
||||
public string CitationId { get; set; } = string.Empty;
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
|
||||
@@ -2,104 +2,113 @@
|
||||
@inject ILogger<SerilogDemo> Logger
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
#if DEBUG
|
||||
<div class="serilog-demo-container">
|
||||
<div class="header-card glass-panel">
|
||||
<div class="header-content">
|
||||
<NexusIcon Name="cpu" Size="36" Class="header-icon" />
|
||||
<div class="header-text">
|
||||
<h1>Serilog Logging Infrastructure</h1>
|
||||
<p class="subtitle">Production-grade diagnostic pipeline for unified native & web logs</p>
|
||||
@if (_isDebug)
|
||||
{
|
||||
<div class="serilog-demo-container">
|
||||
<div class="header-card glass-panel">
|
||||
<div class="header-content">
|
||||
<NexusIcon Name="cpu" Size="36" Class="header-icon" />
|
||||
<div class="header-text">
|
||||
<h1>Serilog Logging Infrastructure</h1>
|
||||
<p class="subtitle">Production-grade diagnostic pipeline for unified native & web logs</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-badge">
|
||||
<span class="status-dot green"></span>
|
||||
<span class="status-text">Pipeline Active</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-badge">
|
||||
<span class="status-dot green"></span>
|
||||
<span class="status-text">Pipeline Active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-grid">
|
||||
<!-- Native .NET Logging Panel -->
|
||||
<div class="control-card glass-panel">
|
||||
<div class="demo-grid">
|
||||
<!-- Native .NET Logging Panel -->
|
||||
<div class="control-card glass-panel">
|
||||
<div class="card-header">
|
||||
<NexusIcon Name="terminal" Size="20" Class="card-icon" />
|
||||
<h2>Native .NET Logs (C#)</h2>
|
||||
</div>
|
||||
<p class="card-desc">Trigger structured C# logs using Dependency Injected ILogger.</p>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-info" @onclick="LogInfo">
|
||||
<NexusIcon Name="info" Size="16" />
|
||||
Log Info
|
||||
</button>
|
||||
<button class="btn btn-warning" @onclick="LogWarning">
|
||||
<NexusIcon Name="alert-triangle" Size="16" />
|
||||
Log Warning
|
||||
</button>
|
||||
<button class="btn btn-error" @onclick="LogError">
|
||||
<NexusIcon Name="x-circle" Size="16" />
|
||||
Log Error Exception
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blazor / JS Interop Bridge Panel -->
|
||||
<div class="control-card glass-panel">
|
||||
<div class="card-header">
|
||||
<NexusIcon Name="globe" Size="20" Class="card-icon js-icon" />
|
||||
<h2>Blazor / JS WebView Logs</h2>
|
||||
</div>
|
||||
<p class="card-desc">Trigger logs from JavaScript to verify the interop error capture bridge.</p>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-js-info" @onclick="TriggerJsLog">
|
||||
<NexusIcon Name="message-square" Size="16" />
|
||||
Trigger console.log()
|
||||
</button>
|
||||
<button class="btn btn-js-error" @onclick="TriggerJsException">
|
||||
<NexusIcon Name="zap" Size="16" />
|
||||
Trigger JS Exception
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Log Config Panel -->
|
||||
<div class="config-card glass-panel">
|
||||
<div class="card-header">
|
||||
<NexusIcon Name="terminal" Size="20" Class="card-icon" />
|
||||
<h2>Native .NET Logs (C#)</h2>
|
||||
<NexusIcon Name="settings" Size="20" Class="card-icon" />
|
||||
<h2>Pipeline Diagnostics</h2>
|
||||
</div>
|
||||
<p class="card-desc">Trigger structured C# logs using Dependency Injected ILogger.</p>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-info" @onclick="LogInfo">
|
||||
<NexusIcon Name="info" Size="16" />
|
||||
Log Info
|
||||
</button>
|
||||
<button class="btn btn-warning" @onclick="LogWarning">
|
||||
<NexusIcon Name="alert-triangle" Size="16" />
|
||||
Log Warning
|
||||
</button>
|
||||
<button class="btn btn-error" @onclick="LogError">
|
||||
<NexusIcon Name="x-circle" Size="16" />
|
||||
Log Error Exception
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blazor / JS Interop Bridge Panel -->
|
||||
<div class="control-card glass-panel">
|
||||
<div class="card-header">
|
||||
<NexusIcon Name="globe" Size="20" Class="card-icon js-icon" />
|
||||
<h2>Blazor / JS WebView Logs</h2>
|
||||
</div>
|
||||
<p class="card-desc">Trigger logs from JavaScript to verify the interop error capture bridge.</p>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-js-info" @onclick="TriggerJsLog">
|
||||
<NexusIcon Name="message-square" Size="16" />
|
||||
Trigger console.log()
|
||||
</button>
|
||||
<button class="btn btn-js-error" @onclick="TriggerJsException">
|
||||
<NexusIcon Name="zap" Size="16" />
|
||||
Trigger JS Exception
|
||||
</button>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<span class="label">Rolling Daily File Sandbox Path</span>
|
||||
<span class="value code-value">AppDataDirectory/logs/log-*.txt</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="label">Active Configuration Provider</span>
|
||||
<span class="value">Serilog.Settings.Configuration (appsettings.json)</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="label">Native Apple Console Sink</span>
|
||||
<span class="value">Serilog.Sinks.Debug (conditional compilation)</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="label">Native Android Logcat Sink</span>
|
||||
<span class="value">AndroidLogcatSink (direct JNI bindings)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Log Config Panel -->
|
||||
<div class="config-card glass-panel">
|
||||
<div class="card-header">
|
||||
<NexusIcon Name="settings" Size="20" Class="card-icon" />
|
||||
<h2>Pipeline Diagnostics</h2>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<span class="label">Rolling Daily File Sandbox Path</span>
|
||||
<span class="value code-value">AppDataDirectory/logs/log-*.txt</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="label">Active Configuration Provider</span>
|
||||
<span class="value">Serilog.Settings.Configuration (appsettings.json)</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="label">Native Apple Console Sink</span>
|
||||
<span class="value">Serilog.Sinks.Debug (conditional compilation)</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="label">Native Android Logcat Sink</span>
|
||||
<span class="value">AndroidLogcatSink (direct JNI bindings)</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="serilog-demo-container">
|
||||
<div class="glass-panel" style="text-align: center; padding: 3rem;">
|
||||
<h2>Diagnostics Unavailable</h2>
|
||||
<p>This page is only available in DEBUG builds.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
#else
|
||||
<div class="serilog-demo-container">
|
||||
<div class="glass-panel" style="text-align: center; padding: 3rem;">
|
||||
<h2>Diagnostics Unavailable</h2>
|
||||
<p>This page is only available in DEBUG builds.</p>
|
||||
</div>
|
||||
</div>
|
||||
#endif
|
||||
|
||||
}
|
||||
|
||||
@code {
|
||||
// Compile-time check ensures _isDebug is baked as false in Release/Test/Production builds,
|
||||
// which completely bypasses/strips rendering of the diagnostic UI and avoids exposing internal controls.
|
||||
#if DEBUG
|
||||
private readonly bool _isDebug = true;
|
||||
#else
|
||||
private readonly bool _isDebug = false;
|
||||
#endif
|
||||
|
||||
private void LogInfo()
|
||||
{
|
||||
Logger.LogInformation("Structured native log triggered by user from SerilogDemo. Button: LogInfo");
|
||||
@@ -124,12 +133,32 @@
|
||||
|
||||
private async Task TriggerJsLog()
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("console.log", "Intercepted JS console statement from Blazor WebView interop trigger!");
|
||||
try
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("console.log", "Intercepted JS console statement from Blazor WebView interop trigger!");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogWarning(ex, "Failed to execute console.log from diagnostic panel.");
|
||||
}
|
||||
}
|
||||
|
||||
private async Task TriggerJsException()
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("eval", "throw new Error('Simulated runtime JS Exception triggered from Blazor UI button click!');");
|
||||
try
|
||||
{
|
||||
// Triggers a TypeError by invoking a non-existent method, which is completely CSP-compliant and works without eval()
|
||||
await JSRuntime.InvokeVoidAsync("window.nonExistentFunctionTriggeringException");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogError(ex, "Simulated runtime JS Exception triggered and captured in Blazor UI");
|
||||
try
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("console.error", $"Simulated JS Exception: {ex.Message}");
|
||||
}
|
||||
catch { }
|
||||
}
|
||||
}
|
||||
#endif
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<AuthenticationStatePersister />
|
||||
|
||||
<ErrorBoundary @ref="_errorBoundary">
|
||||
<ChildContent>
|
||||
<Router AppAssembly="@typeof(Routes).Assembly">
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
/// <summary>
|
||||
/// Strongly-typed feature settings for the client UI layer.
|
||||
/// Used to decouple the UI from raw IConfiguration to prevent exposure of sensitive settings.
|
||||
/// </summary>
|
||||
public class FeatureSettings
|
||||
{
|
||||
public bool AllowRegistration { get; set; } = true;
|
||||
public bool AllowPasswordReset { get; set; } = true;
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
using NexusReader.UI.Shared.Models;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public interface IReaderInteractionService
|
||||
@@ -6,11 +8,16 @@ public interface IReaderInteractionService
|
||||
event Func<string, Task>? OnScrollToBlockRequested;
|
||||
event Func<string, Task>? OnHighlightBlockRequested;
|
||||
event Func<string, string, SelectionCoordinates, Task>? OnTextSelected;
|
||||
event Func<Task>? OnAssistantRequested;
|
||||
event Func<int, Task>? OnScrollPercentChanged;
|
||||
event Func<string, Task>? OnBlockReached;
|
||||
|
||||
Task NotifyNodeSelected(string nodeId);
|
||||
Task RequestScrollToBlock(string blockId);
|
||||
Task RequestHighlightBlock(string blockId);
|
||||
Task NotifyTextSelected(string text, string blockId, SelectionCoordinates coords);
|
||||
Task RequestAssistant();
|
||||
Task NotifyScrollPercentChanged(int percent);
|
||||
Task NotifyBlockReached(string blockId);
|
||||
}
|
||||
|
||||
public record SelectionCoordinates(double Top, double Left, double Width);
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
using NexusReader.UI.Shared.Models;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
/// <summary>
|
||||
/// Service to maintain local UI state for the reader, separating state from event bus.
|
||||
/// </summary>
|
||||
public interface IReaderStateService
|
||||
{
|
||||
int CurrentScrollPercentage { get; set; }
|
||||
List<string> CurrentCheckpoints { get; set; }
|
||||
string CurrentBlockId { get; set; }
|
||||
MobileReaderTab ActiveTab { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
using System;
|
||||
using System.Text.Json;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
/// <summary>
|
||||
/// A lightweight, Native AOT-friendly JWT validator that decodes the payload of a JWT token
|
||||
/// to verify expiration without standard library dependencies.
|
||||
/// </summary>
|
||||
public static class JwtTokenValidator
|
||||
{
|
||||
public static bool IsExpired(string? token)
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(token)) return true;
|
||||
|
||||
try
|
||||
{
|
||||
var parts = token.Split('.');
|
||||
if (parts.Length != 3) return true;
|
||||
|
||||
var payload = parts[1];
|
||||
|
||||
// Pad the base64 string
|
||||
var padLength = 4 - (payload.Length % 4);
|
||||
if (padLength < 4)
|
||||
{
|
||||
payload += new string('=', padLength);
|
||||
}
|
||||
|
||||
// Base64URL to standard Base64 conversion
|
||||
payload = payload.Replace('-', '+').Replace('_', '/');
|
||||
|
||||
var bytes = Convert.FromBase64String(payload);
|
||||
using var jsonDoc = JsonDocument.Parse(bytes);
|
||||
|
||||
if (jsonDoc.RootElement.TryGetProperty("exp", out var expElement))
|
||||
{
|
||||
var exp = expElement.GetInt64();
|
||||
var expTime = DateTimeOffset.FromUnixTimeSeconds(exp);
|
||||
|
||||
// Allow a small 10-second clock skew buffer
|
||||
return expTime <= DateTimeOffset.UtcNow.AddSeconds(10);
|
||||
}
|
||||
}
|
||||
catch
|
||||
{
|
||||
return true; // Treat invalid token as expired
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@ using Microsoft.Extensions.Logging;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
public sealed partial class KnowledgeCoordinator : IDisposable, IAsyncDisposable
|
||||
{
|
||||
private readonly IKnowledgeService _knowledgeService;
|
||||
private readonly IKnowledgeGraphService _graphService;
|
||||
@@ -16,6 +16,9 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
private readonly IPlatformService _platformService;
|
||||
private readonly IReaderInteractionService _interactionService;
|
||||
private readonly ILogger<KnowledgeCoordinator> _logger;
|
||||
|
||||
private CancellationTokenSource? _graphCts;
|
||||
private CancellationTokenSource? _quizCts;
|
||||
|
||||
public string CurrentFullPageContent { get; private set; } = string.Empty;
|
||||
|
||||
@@ -75,9 +78,38 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
}
|
||||
}
|
||||
|
||||
private void CancelAndDisposeCts(ref CancellationTokenSource? cts)
|
||||
{
|
||||
var localCts = cts;
|
||||
cts = null;
|
||||
if (localCts != null)
|
||||
{
|
||||
try
|
||||
{
|
||||
localCts.Cancel();
|
||||
}
|
||||
catch (ObjectDisposedException) { }
|
||||
finally
|
||||
{
|
||||
localCts.Dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public async Task ProcessFullPageAsync(string fullContent, string tenantId = "global", Guid? ebookId = null)
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(fullContent)) return;
|
||||
if (string.IsNullOrWhiteSpace(fullContent))
|
||||
{
|
||||
CancelAndDisposeCts(ref _graphCts);
|
||||
await _graphService.Clear();
|
||||
await _graphService.SetLoading(false);
|
||||
CurrentFullPageContent = string.Empty;
|
||||
return;
|
||||
}
|
||||
|
||||
CancelAndDisposeCts(ref _graphCts);
|
||||
_graphCts = new CancellationTokenSource();
|
||||
var token = _graphCts.Token;
|
||||
|
||||
CurrentFullPageContent = fullContent;
|
||||
LogGeneratingGraph(tenantId);
|
||||
@@ -87,7 +119,9 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
|
||||
try
|
||||
{
|
||||
var result = await _knowledgeService.GetGraphDataAsync(fullContent, tenantId, ebookId);
|
||||
var result = await _knowledgeService.GetGraphDataAsync(fullContent, tenantId, ebookId, token);
|
||||
token.ThrowIfCancellationRequested();
|
||||
|
||||
if (result.IsSuccess)
|
||||
{
|
||||
var packet = result.Value;
|
||||
@@ -103,10 +137,17 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
|
||||
await _graphService.SetLoading(false);
|
||||
}
|
||||
catch (OperationCanceledException)
|
||||
{
|
||||
_logger.LogInformation("[KnowledgeCoordinator] Graph generation task was canceled.");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
await _graphService.SetLoading(false);
|
||||
LogGraphError(ex, tenantId);
|
||||
if (!token.IsCancellationRequested)
|
||||
{
|
||||
await _graphService.SetLoading(false);
|
||||
LogGraphError(ex, tenantId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,11 +159,17 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
|
||||
public async Task<Result<KnowledgePacket>> RequestSummaryAndQuizAsync(string content, string tenantId = "global")
|
||||
{
|
||||
CancelAndDisposeCts(ref _quizCts);
|
||||
_quizCts = new CancellationTokenSource();
|
||||
var token = _quizCts.Token;
|
||||
|
||||
await _quizService.SetHydrating(true);
|
||||
LogRequestingSummary(tenantId);
|
||||
try
|
||||
{
|
||||
var result = await _knowledgeService.GetSummaryAndQuizAsync(content, tenantId);
|
||||
var result = await _knowledgeService.GetSummaryAndQuizAsync(content, tenantId, cancellationToken: token);
|
||||
token.ThrowIfCancellationRequested();
|
||||
|
||||
if (result.IsSuccess)
|
||||
{
|
||||
var packet = result.Value;
|
||||
@@ -138,10 +185,19 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
LogSummaryWarning(tenantId);
|
||||
return Result.Fail(result.Errors);
|
||||
}
|
||||
catch (OperationCanceledException)
|
||||
{
|
||||
_logger.LogInformation("[KnowledgeCoordinator] Quiz and summary generation task was canceled.");
|
||||
return Result.Fail("Task canceled");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
LogSummaryError(ex, tenantId);
|
||||
return Result.Fail(new Error("Error requesting summary and quiz").CausedBy(ex));
|
||||
if (!token.IsCancellationRequested)
|
||||
{
|
||||
LogSummaryError(ex, tenantId);
|
||||
return Result.Fail(new Error("Error requesting summary and quiz").CausedBy(ex));
|
||||
}
|
||||
return Result.Fail("Task canceled");
|
||||
}
|
||||
finally
|
||||
{
|
||||
@@ -151,6 +207,9 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
|
||||
public async Task ClearAsync()
|
||||
{
|
||||
CancelAndDisposeCts(ref _graphCts);
|
||||
CancelAndDisposeCts(ref _quizCts);
|
||||
|
||||
CurrentFullPageContent = string.Empty;
|
||||
await _graphService.Clear();
|
||||
await _quizService.SetQuiz(null, null);
|
||||
@@ -159,6 +218,27 @@ public sealed partial class KnowledgeCoordinator : IDisposable
|
||||
public void Dispose()
|
||||
{
|
||||
_interactionService.OnNodeSelected -= HandleNodeSelected;
|
||||
|
||||
CancelAndDisposeCts(ref _graphCts);
|
||||
CancelAndDisposeCts(ref _quizCts);
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
_interactionService.OnNodeSelected -= HandleNodeSelected;
|
||||
|
||||
CancelAndDisposeCts(ref _graphCts);
|
||||
CancelAndDisposeCts(ref _quizCts);
|
||||
|
||||
try
|
||||
{
|
||||
await _graphService.Clear();
|
||||
await _quizService.SetQuiz(null, null);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogWarning(ex, "Error clearing services during KnowledgeCoordinator disposal.");
|
||||
}
|
||||
}
|
||||
|
||||
[LoggerMessage(Level = LogLevel.Information, Message = "[KnowledgeCoordinator] Generating full page graph for tenant: {TenantId}")]
|
||||
|
||||
@@ -4,20 +4,24 @@ using Microsoft.AspNetCore.Components.Authorization;
|
||||
using NexusReader.Application.Abstractions.Services;
|
||||
using NexusReader.Application.Constants;
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public class NexusAuthenticationStateProvider : AuthenticationStateProvider
|
||||
{
|
||||
private readonly INativeStorageService _storageService;
|
||||
private readonly PersistentComponentState _persistentState;
|
||||
|
||||
// SECURITY NOTE: We currently store roles in local storage to persist state across refreshes.
|
||||
// In a production SaaS environment, consider using ProtectedBrowserStorage (Blazor Server)
|
||||
// or encrypted storage/JWT claims validation to prevent client-side role tampering.
|
||||
private const string TokenKey = StorageKeys.AuthToken;
|
||||
|
||||
public NexusAuthenticationStateProvider(INativeStorageService storageService)
|
||||
public NexusAuthenticationStateProvider(INativeStorageService storageService, PersistentComponentState persistentState)
|
||||
{
|
||||
_storageService = storageService;
|
||||
_persistentState = persistentState;
|
||||
}
|
||||
|
||||
public void ClearCache()
|
||||
@@ -34,11 +38,23 @@ public class NexusAuthenticationStateProvider : AuthenticationStateProvider
|
||||
{
|
||||
if (_cachedState != null) return _cachedState;
|
||||
|
||||
// 0. Hydrate state from SSR if available in PersistentComponentState
|
||||
if (_persistentState.TryTakeFromJson<UserInfo>("UserInfo", out var userInfo) && userInfo != null)
|
||||
{
|
||||
// Save to local storage for subsequent client-only transitions/refreshes
|
||||
await _storageService.SaveSecureString(StorageKeys.UserEmail, userInfo.Email);
|
||||
await _storageService.SaveSecureString(StorageKeys.UserTenant, userInfo.TenantId);
|
||||
await _storageService.SaveSecureString(StorageKeys.UserRoles, userInfo.Roles);
|
||||
|
||||
_cachedState = CreateState(userInfo.Email, userInfo.TenantId, "FederatedHydration", userInfo.Roles);
|
||||
return _cachedState;
|
||||
}
|
||||
|
||||
var tokenResult = await _storageService.GetSecureString(TokenKey);
|
||||
var token = tokenResult.IsSuccess ? tokenResult.Value : null;
|
||||
|
||||
// 1. Try Token-based auth
|
||||
if (!string.IsNullOrWhiteSpace(token))
|
||||
if (!string.IsNullOrWhiteSpace(token) && !JwtTokenValidator.IsExpired(token))
|
||||
{
|
||||
var emailResult = await _storageService.GetSecureString(StorageKeys.UserEmail);
|
||||
var tenantIdResult = await _storageService.GetSecureString(StorageKeys.UserTenant);
|
||||
@@ -116,3 +132,10 @@ public class NexusAuthenticationStateProvider : AuthenticationStateProvider
|
||||
NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(guest)));
|
||||
}
|
||||
}
|
||||
|
||||
public class UserInfo
|
||||
{
|
||||
public string Email { get; set; } = string.Empty;
|
||||
public string TenantId { get; set; } = string.Empty;
|
||||
public string Roles { get; set; } = string.Empty;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
using NexusReader.UI.Shared.Models;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public sealed class ReaderInteractionService : IReaderInteractionService
|
||||
@@ -6,6 +8,9 @@ public sealed class ReaderInteractionService : IReaderInteractionService
|
||||
public event Func<string, Task>? OnScrollToBlockRequested;
|
||||
public event Func<string, Task>? OnHighlightBlockRequested;
|
||||
public event Func<string, string, SelectionCoordinates, Task>? OnTextSelected;
|
||||
public event Func<Task>? OnAssistantRequested;
|
||||
public event Func<int, Task>? OnScrollPercentChanged;
|
||||
public event Func<string, Task>? OnBlockReached;
|
||||
|
||||
public async Task NotifyNodeSelected(string nodeId)
|
||||
{
|
||||
@@ -26,4 +31,20 @@ public sealed class ReaderInteractionService : IReaderInteractionService
|
||||
{
|
||||
if (OnTextSelected != null) await OnTextSelected(text, blockId, coords);
|
||||
}
|
||||
|
||||
public async Task RequestAssistant()
|
||||
{
|
||||
if (OnAssistantRequested != null) await OnAssistantRequested();
|
||||
}
|
||||
|
||||
public async Task NotifyScrollPercentChanged(int percent)
|
||||
{
|
||||
if (OnScrollPercentChanged != null) await OnScrollPercentChanged(percent);
|
||||
}
|
||||
|
||||
public async Task NotifyBlockReached(string blockId)
|
||||
{
|
||||
if (OnBlockReached != null) await OnBlockReached(blockId);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
using NexusReader.UI.Shared.Models;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
/// <summary>
|
||||
/// Thread-safe implementation of IReaderStateService.
|
||||
/// Thread safety is ensured via lock-guarded property getters/setters.
|
||||
/// UI updates originating from the JS event loop (via JSInvokable) are synchronized at Blazor's InvokeAsync(StateHasChanged) render boundary.
|
||||
/// </summary>
|
||||
public sealed class ReaderStateService : IReaderStateService
|
||||
{
|
||||
private readonly object _lock = new();
|
||||
private int _scrollPercent;
|
||||
private List<string> _checkpoints = new();
|
||||
private string _blockId = string.Empty;
|
||||
private MobileReaderTab _activeTab = MobileReaderTab.Reader;
|
||||
|
||||
public int CurrentScrollPercentage
|
||||
{
|
||||
get { lock (_lock) return _scrollPercent; }
|
||||
set { lock (_lock) _scrollPercent = value; }
|
||||
}
|
||||
|
||||
public List<string> CurrentCheckpoints
|
||||
{
|
||||
get { lock (_lock) return _checkpoints; }
|
||||
set { lock (_lock) _checkpoints = value ?? new(); }
|
||||
}
|
||||
|
||||
public string CurrentBlockId
|
||||
{
|
||||
get { lock (_lock) return _blockId; }
|
||||
set { lock (_lock) _blockId = value ?? string.Empty; }
|
||||
}
|
||||
|
||||
public MobileReaderTab ActiveTab
|
||||
{
|
||||
get { lock (_lock) return _activeTab; }
|
||||
set { lock (_lock) _activeTab = value; }
|
||||
}
|
||||
}
|
||||
@@ -16,6 +16,7 @@
|
||||
@using NexusReader.UI.Shared.Components.Organisms
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using Microsoft.Extensions.Logging
|
||||
@using Microsoft.Extensions.Configuration
|
||||
@using NexusReader.Application.Abstractions.Services
|
||||
@using NexusReader.Application.DTOs.User
|
||||
@using NexusReader.Application.Queries.Reader
|
||||
|
||||
@@ -113,6 +113,85 @@ let svgElement;
|
||||
|
||||
let node, link, rootGroup, badge, width, height, currentDotNetHelper, resizeObserver;
|
||||
|
||||
let isMobileMode = false;
|
||||
let activeNodeId = null;
|
||||
|
||||
const getNodeGlyph = d => {
|
||||
if (!d) return 'C';
|
||||
const type = getNodeType(d);
|
||||
const group = getNodeGroup(d);
|
||||
if (type === 'rule') return '§';
|
||||
if (type === 'definition') return 'D';
|
||||
if (type === 'table') return 'T';
|
||||
if (type === 'section') return 'S';
|
||||
if (group === 'bridge') return 'B';
|
||||
if (group === 'current') return '★';
|
||||
return 'C';
|
||||
};
|
||||
|
||||
function updateNodeAppearances() {
|
||||
if (!node) return;
|
||||
|
||||
node.each(function(d) {
|
||||
const g = d3.select(this);
|
||||
const rect = g.select(".node-pill");
|
||||
const text = g.select("text");
|
||||
|
||||
const isCurrent = getNodeGroup(d) === 'current';
|
||||
const isSelected = activeNodeId && d.id === activeNodeId;
|
||||
const showFull = !isMobileMode || isSelected || isCurrent;
|
||||
|
||||
if (showFull) {
|
||||
rect.transition().duration(250)
|
||||
.attr("x", -getPillWidth(d) / 2)
|
||||
.attr("width", getPillWidth(d))
|
||||
.attr("height", 30)
|
||||
.attr("rx", 15)
|
||||
.attr("y", -15);
|
||||
|
||||
text.text(getDisplayLabel(d))
|
||||
.attr("font-size", isCurrent || isSelected ? "0.85rem" : "0.8rem")
|
||||
.attr("font-weight", isCurrent || isSelected ? "600" : "normal");
|
||||
} else {
|
||||
rect.transition().duration(250)
|
||||
.attr("x", -15)
|
||||
.attr("width", 30)
|
||||
.attr("height", 30)
|
||||
.attr("rx", 15)
|
||||
.attr("y", -15);
|
||||
|
||||
text.text(getNodeGlyph(d))
|
||||
.attr("font-size", "0.9rem")
|
||||
.attr("font-weight", "bold");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function setMobileMode(isMobile) {
|
||||
isMobileMode = isMobile;
|
||||
if (!simulation) return;
|
||||
|
||||
if (isMobile) {
|
||||
simulation.force("charge", d3.forceManyBody().strength(-60));
|
||||
simulation.force("link").distance(180);
|
||||
simulation.force("collide", d3.forceCollide().radius(d => {
|
||||
const isCurrent = getNodeGroup(d) === 'current';
|
||||
const isSelected = activeNodeId && d.id === activeNodeId;
|
||||
if (isCurrent || isSelected) {
|
||||
return (getPillWidth(d) / 2) + 15;
|
||||
}
|
||||
return 20;
|
||||
}));
|
||||
} else {
|
||||
simulation.force("charge", d3.forceManyBody().strength(-400));
|
||||
simulation.force("link").distance(120);
|
||||
simulation.force("collide", d3.forceCollide().radius(d => (getPillWidth(d) / 2) + 20));
|
||||
}
|
||||
|
||||
updateNodeAppearances();
|
||||
simulation.alpha(0.3).restart();
|
||||
}
|
||||
|
||||
export function mount(containerId, data, dotNetHelper) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
@@ -121,6 +200,9 @@ export function mount(containerId, data, dotNetHelper) {
|
||||
width = container.clientWidth || 400;
|
||||
height = container.clientHeight || 400;
|
||||
|
||||
// Clean up any existing SVG to prevent duplicates
|
||||
container.querySelectorAll("svg").forEach(el => el.remove());
|
||||
|
||||
// Create SVG
|
||||
svgElement = d3.select(container).append("svg")
|
||||
.attr("viewBox", [0, 0, width, height])
|
||||
@@ -204,11 +286,21 @@ export function mount(containerId, data, dotNetHelper) {
|
||||
});
|
||||
resizeObserver.observe(container);
|
||||
|
||||
isMobileMode = window.innerWidth < 768;
|
||||
|
||||
simulation = d3.forceSimulation()
|
||||
.force("link", d3.forceLink().id(d => d.id).distance(120))
|
||||
.force("charge", d3.forceManyBody().strength(-400))
|
||||
.force("link", d3.forceLink().id(d => d.id).distance(isMobileMode ? 180 : 120))
|
||||
.force("charge", d3.forceManyBody().strength(isMobileMode ? -60 : -400))
|
||||
.force("center", d3.forceCenter(width / 2, height / 2))
|
||||
.force("collide", d3.forceCollide().radius(d => (getPillWidth(d) / 2) + 20));
|
||||
.force("collide", d3.forceCollide().radius(d => {
|
||||
if (isMobileMode) {
|
||||
const isCurrent = getNodeGroup(d) === 'current';
|
||||
const isSelected = activeNodeId && d.id === activeNodeId;
|
||||
if (isCurrent || isSelected) return (getPillWidth(d) / 2) + 15;
|
||||
return 20;
|
||||
}
|
||||
return (getPillWidth(d) / 2) + 20;
|
||||
}));
|
||||
|
||||
simulation.on("tick", () => {
|
||||
if (link) {
|
||||
@@ -222,6 +314,8 @@ export function mount(containerId, data, dotNetHelper) {
|
||||
|
||||
if (node) {
|
||||
node.attr("transform", d => {
|
||||
if (d.x === undefined || isNaN(d.x) || !isFinite(d.x)) d.x = width / 2;
|
||||
if (d.y === undefined || isNaN(d.y) || !isFinite(d.y)) d.y = height / 2;
|
||||
// Keep within bounds with padding
|
||||
const pillWidth = getPillWidth(d);
|
||||
const halfWidth = pillWidth / 2;
|
||||
@@ -252,10 +346,12 @@ export function updateData(data) {
|
||||
// Keep existing node positions if they match by ID
|
||||
const oldNodes = new Map(simulation.nodes().map(d => [d.id, d]));
|
||||
data.nodes.forEach(d => {
|
||||
if (d.x !== undefined && (!isFinite(d.x) || isNaN(d.x))) d.x = undefined;
|
||||
if (d.y !== undefined && (!isFinite(d.y) || isNaN(d.y))) d.y = undefined;
|
||||
if (oldNodes.has(d.id)) {
|
||||
const old = oldNodes.get(d.id);
|
||||
d.x = old.x;
|
||||
d.y = old.y;
|
||||
if (old.x !== undefined && isFinite(old.x) && !isNaN(old.x)) d.x = old.x;
|
||||
if (old.y !== undefined && isFinite(old.y) && !isNaN(old.y)) d.y = old.y;
|
||||
d.vx = old.vx;
|
||||
d.vy = old.vy;
|
||||
}
|
||||
@@ -317,22 +413,14 @@ export function updateData(data) {
|
||||
|
||||
g.append("rect")
|
||||
.attr("class", "node-pill")
|
||||
.attr("x", d => -getPillWidth(d) / 2)
|
||||
.attr("y", -15)
|
||||
.attr("width", d => getPillWidth(d))
|
||||
.attr("height", 30)
|
||||
.attr("rx", 15)
|
||||
.attr("fill", "rgba(20, 20, 20, 0.95)")
|
||||
.attr("stroke", d => getCategoryStyle(d).color)
|
||||
.attr("stroke-width", d => getNodeGroup(d) === 'current' ? 2 : 1.2);
|
||||
|
||||
g.append("text")
|
||||
.text(d => getDisplayLabel(d))
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", 5)
|
||||
.attr("fill", d => getCategoryStyle(d).textColor)
|
||||
.attr("font-size", "0.8rem")
|
||||
.attr("font-weight", d => getNodeGroup(d) === 'current' ? '600' : 'normal');
|
||||
.attr("fill", d => getCategoryStyle(d).textColor);
|
||||
|
||||
g.append("title")
|
||||
.text(d => d.description ? `${d.label}\n\n${d.description}` : d.label);
|
||||
@@ -345,6 +433,8 @@ export function updateData(data) {
|
||||
exit => exit.transition().duration(500).style("opacity", 0).remove()
|
||||
);
|
||||
|
||||
updateNodeAppearances();
|
||||
|
||||
simulation.nodes(data.nodes);
|
||||
simulation.force("link").links(validLinks);
|
||||
simulation.alpha(0.5).restart();
|
||||
@@ -377,6 +467,7 @@ function drag(simulation) {
|
||||
export function setActiveNode(nodeId) {
|
||||
if (!svgElement || !node) return;
|
||||
|
||||
activeNodeId = nodeId;
|
||||
// Safety check: ensure we only target the first occurrence if IDs are duplicated
|
||||
const targetNode = node.filter(d => d.id === nodeId);
|
||||
if (targetNode.empty()) {
|
||||
@@ -387,6 +478,7 @@ export function setActiveNode(nodeId) {
|
||||
|
||||
const firstMatch = targetNode.filter((d, i) => i === 0);
|
||||
const d = firstMatch.datum();
|
||||
if (!d || d.x === undefined || d.y === undefined || isNaN(d.x) || !isFinite(d.x) || isNaN(d.y) || !isFinite(d.y)) return;
|
||||
|
||||
// Reset all active classes
|
||||
rootGroup.selectAll(".node-pill").classed("nexus-node-active", false);
|
||||
@@ -399,6 +491,20 @@ export function setActiveNode(nodeId) {
|
||||
// Dim others (only exact matches for nodeId will be fully opaque)
|
||||
dimNodes(nodeId);
|
||||
|
||||
// Dynamic collision update if in mobile mode to expand active node
|
||||
if (isMobileMode && simulation) {
|
||||
simulation.force("collide", d3.forceCollide().radius(d => {
|
||||
const isCurrent = getNodeGroup(d) === 'current';
|
||||
const isSelected = activeNodeId && d.id === activeNodeId;
|
||||
if (isCurrent || isSelected) {
|
||||
return (getPillWidth(d) / 2) + 15;
|
||||
}
|
||||
return 20;
|
||||
}));
|
||||
}
|
||||
|
||||
updateNodeAppearances();
|
||||
|
||||
// Smooth transition to the first matching node
|
||||
svgElement.transition().duration(1000).call(
|
||||
zoomBehavior.transform,
|
||||
@@ -441,12 +547,25 @@ export function handleResize(containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container || !svgElement || !simulation) return;
|
||||
|
||||
width = container.clientWidth;
|
||||
height = container.clientHeight;
|
||||
const newWidth = container.clientWidth;
|
||||
const newHeight = container.clientHeight;
|
||||
|
||||
// If container is hidden (size is 0), skip resize to avoid collapsing coordinates to (0,0) or NaN
|
||||
if (newWidth <= 0 || newHeight <= 0) return;
|
||||
|
||||
width = newWidth;
|
||||
height = newHeight;
|
||||
|
||||
svgElement.attr("viewBox", [0, 0, width, height]);
|
||||
simulation.force("center", d3.forceCenter(width / 2, height / 2));
|
||||
simulation.alpha(0.3).restart();
|
||||
|
||||
const prevMobileMode = isMobileMode;
|
||||
isMobileMode = window.innerWidth < 768;
|
||||
if (isMobileMode !== prevMobileMode) {
|
||||
setMobileMode(isMobileMode);
|
||||
} else {
|
||||
simulation.alpha(0.3).restart();
|
||||
}
|
||||
}
|
||||
|
||||
export function scrollToNode(id) {
|
||||
@@ -480,21 +599,26 @@ export function zoomReset() {
|
||||
|
||||
export function zoomToFit() {
|
||||
if (!node || node.empty() || !svgElement || !zoomBehavior) return;
|
||||
if (width <= 0 || height <= 0 || isNaN(width) || isNaN(height)) return;
|
||||
|
||||
// Get the actual bounding box of the nodes
|
||||
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
||||
node.each(d => {
|
||||
const pw = getPillWidth(d) / 2;
|
||||
minX = Math.min(minX, d.x - pw);
|
||||
maxX = Math.max(maxX, d.x + pw);
|
||||
minY = Math.min(minY, d.y - 15);
|
||||
maxY = Math.max(maxY, d.y + 15);
|
||||
if (d && d.x !== undefined && d.y !== undefined && isFinite(d.x) && isFinite(d.y)) {
|
||||
const pw = getPillWidth(d) / 2;
|
||||
minX = Math.min(minX, d.x - pw);
|
||||
maxX = Math.max(maxX, d.x + pw);
|
||||
minY = Math.min(minY, d.y - 15);
|
||||
maxY = Math.max(maxY, d.y + 15);
|
||||
}
|
||||
});
|
||||
|
||||
if (minX === Infinity) return;
|
||||
if (minX === Infinity || maxX === minX || maxY === minY) return;
|
||||
|
||||
const graphWidth = maxX - minX;
|
||||
const graphHeight = maxY - minY;
|
||||
if (graphWidth <= 0 || graphHeight <= 0 || isNaN(graphWidth) || isNaN(graphHeight)) return;
|
||||
|
||||
const midX = (minX + maxX) / 2;
|
||||
const midY = (minY + maxY) / 2;
|
||||
|
||||
@@ -505,6 +629,8 @@ export function zoomToFit() {
|
||||
1.2 // Max scale
|
||||
);
|
||||
|
||||
if (isNaN(scale) || !isFinite(scale) || scale <= 0) return;
|
||||
|
||||
svgElement.transition().duration(750).call(
|
||||
zoomBehavior.transform,
|
||||
d3.zoomIdentity
|
||||
|
||||
@@ -20,3 +20,43 @@ export function initObserver(dotNetHelper, containerSelector, itemSelector) {
|
||||
|
||||
return observer;
|
||||
}
|
||||
|
||||
export function initScrollListener(dotNetHelper, scrollContainerSelector) {
|
||||
const container = document.querySelector(scrollContainerSelector);
|
||||
if (!container) return null;
|
||||
|
||||
let isThrottled = false;
|
||||
|
||||
const onScroll = () => {
|
||||
if (isThrottled) return;
|
||||
isThrottled = true;
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const scrollTop = container.scrollTop;
|
||||
const scrollHeight = container.scrollHeight;
|
||||
const clientHeight = container.clientHeight;
|
||||
|
||||
let percentage = 0;
|
||||
if (scrollHeight > clientHeight) {
|
||||
percentage = Math.round((scrollTop / (scrollHeight - clientHeight)) * 100);
|
||||
}
|
||||
|
||||
// Ensure bounds
|
||||
percentage = Math.max(0, Math.min(100, percentage));
|
||||
|
||||
dotNetHelper.invokeMethodAsync('HandleScrollPercentChanged', percentage);
|
||||
isThrottled = false;
|
||||
});
|
||||
};
|
||||
|
||||
container.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial calculation after a brief layout delay
|
||||
setTimeout(onScroll, 100);
|
||||
|
||||
return {
|
||||
dispose: () => {
|
||||
container.removeEventListener('scroll', onScroll);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* Viewport and scrolling utilities for NexusReader.
|
||||
* Avoids eval() usage, supports CSP, AOT-safety, and prevents memory leaks.
|
||||
*/
|
||||
|
||||
export function isMobileViewport() {
|
||||
return window.innerWidth < 768;
|
||||
}
|
||||
|
||||
export function registerViewportObserver(dotNetHelper) {
|
||||
let currentIsMobile = window.innerWidth < 768;
|
||||
|
||||
const listener = () => {
|
||||
const isMobile = window.innerWidth < 768;
|
||||
if (isMobile !== currentIsMobile) {
|
||||
currentIsMobile = isMobile;
|
||||
dotNetHelper.invokeMethodAsync('OnViewportChanged', isMobile);
|
||||
}
|
||||
};
|
||||
|
||||
// Store listener directly on the JS object wrapper of the DotNetObjectReference for elegant cleanup
|
||||
dotNetHelper._viewportListener = listener;
|
||||
window.addEventListener('resize', listener);
|
||||
}
|
||||
|
||||
export function unregisterViewportObserver(dotNetHelper) {
|
||||
if (dotNetHelper && dotNetHelper._viewportListener) {
|
||||
window.removeEventListener('resize', dotNetHelper._viewportListener);
|
||||
delete dotNetHelper._viewportListener;
|
||||
}
|
||||
}
|
||||
|
||||
export function scrollIntoView(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// NOTE: Assumes the selector matches the active scroll container (default '.reader-canvas').
|
||||
// Scoping is flexible to avoid issues if SSR pre-render or animated layouts render multiple wrappers.
|
||||
export function scrollToTop(selector = '.reader-canvas') {
|
||||
const el = document.querySelector(selector);
|
||||
if (el) {
|
||||
el.scrollTop = 0;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user