feat: implement semantic search, knowledge unit extraction, and visualization components

2026-05-03 15:59:30 +02:00
parent 94ecc7a404
commit 1f187b5125
24 changed files with 844 additions and 21 deletions
@@ -0,0 +1,39 @@
+@namespace NexusReader.UI.Shared.Components.Atoms
+
+<div class="nexus-search-container @(IsActive ? "active" : "")">
+    <div class="search-wrapper">
+        <i class="nexus-icon @IconClass"></i>
+        <input type="text" 
+               @bind="SearchValue" 
+               @bind:event="oninput"
+               @onkeypress="HandleKeyPress"
+               placeholder="@Placeholder" 
+               class="nexus-search-input" />
+        @if (!string.IsNullOrEmpty(SearchValue))
+        {
+            <button class="clear-btn" @onclick="ClearSearch">×</button>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Placeholder { get; set; } = "Search your library...";
+    [Parameter] public string IconClass { get; set; } = "bi bi-search";
+    [Parameter] public EventCallback<string> OnSearch { get; set; }
+    
+    private string SearchValue { get; set; } = string.Empty;
+    private bool IsActive => !string.IsNullOrEmpty(SearchValue);
+
+    private async Task HandleKeyPress(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter")
+        {
+            await OnSearch.InvokeAsync(SearchValue);
+        }
+    }
+
+    private void ClearSearch()
+    {
+        SearchValue = string.Empty;
+    }
+}
@@ -0,0 +1,57 @@
+.nexus-search-container {
+    width: 100%;
+    max-width: 500px;
+    margin: 1rem auto;
+    transition: all 0.3s ease;
+}
+
+.search-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--nexus-card, #141414);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 0.5rem 1rem;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.nexus-search-container.active .search-wrapper,
+.search-wrapper:focus-within {
+    border-color: var(--nexus-neon, #00ff99);
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
+}
+
+.nexus-icon {
+    color: rgba(255, 255, 255, 0.5);
+    margin-right: 0.75rem;
+    font-size: 1.1rem;
+}
+
+.nexus-search-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: white;
+    font-family: 'Inter', sans-serif;
+    font-size: 0.95rem;
+    outline: none;
+}
+
+.nexus-search-input::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+.clear-btn {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.4);
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 0 0.5rem;
+    transition: color 0.2s ease;
+}
+
+.clear-btn:hover {
+    color: var(--nexus-neon, #00ff99);
+}