paperless-ngx/src-ui/src/app/components/app-frame/ai-status-indicator/ai-status-indicator.component.html
copilot-swe-agent[bot] 09979d0156 feat: implement AI Status Indicator in navbar
- Created AIStatus data model with TypeScript interfaces
- Implemented AIStatusService with polling mechanism
- Created AIStatusIndicatorComponent with icon, tooltip, and animations
- Added component to navbar between notifications and user menu
- Includes unit tests for service and component
- Shows AI active/inactive state with visual indicators
- Displays statistics: documents scanned, suggestions applied
- Shows pending deletion requests with badge
- Processing animation when AI is active
- Link to AI configuration settings
- Non-intrusive design following existing patterns

Co-authored-by: dawnsystem <42047891+dawnsystem@users.noreply.github.com>
2025-11-15 15:55:59 +00:00

77 lines
2.4 KiB
HTML

<li class="nav-item ai-status-container">
<button
class="btn border-0 position-relative"
[ngbPopover]="aiStatusPopover"
popoverClass="ai-status-popover"
placement="bottom"
container="body"
triggers="mouseenter:mouseleave">
<i-bs
width="1.3em"
height="1.3em"
[name]="iconName"
[class]="iconClass">
</i-bs>
@if (hasAlerts) {
<span class="badge rounded-pill bg-danger position-absolute top-0 end-0 translate-middle-y">
{{ aiStatus.pending_deletion_requests }}
</span>
}
</button>
</li>
<ng-template #aiStatusPopover>
<div class="ai-status-tooltip">
<h6 class="mb-2 border-bottom pb-2">
<i-bs name="robot" width="1em" height="1em" class="me-1"></i-bs>
<span i18n>AI Scanner Status</span>
</h6>
<div class="status-info">
<div class="status-row mb-2">
<span class="status-label" i18n>Status:</span>
<span [class]="aiStatus.active ? 'text-success' : 'text-muted'">
{{ aiStatus.active ? 'Active' : 'Inactive' }}
@if (aiStatus.processing) {
<span class="badge bg-primary ms-1" i18n>Processing</span>
}
</span>
</div>
@if (aiStatus.active) {
<div class="status-row mb-2">
<span class="status-label" i18n>Scanned Today:</span>
<span class="fw-bold">{{ aiStatus.documents_scanned_today }}</span>
</div>
<div class="status-row mb-2">
<span class="status-label" i18n>Suggestions Applied:</span>
<span class="fw-bold">{{ aiStatus.suggestions_applied }}</span>
</div>
@if (aiStatus.pending_deletion_requests > 0) {
<div class="status-row mb-2">
<span class="status-label text-danger" i18n>Pending Deletions:</span>
<span class="fw-bold text-danger">{{ aiStatus.pending_deletion_requests }}</span>
</div>
}
@if (aiStatus.last_scan) {
<div class="status-row mb-2 small text-muted">
<span class="status-label" i18n>Last Scan:</span>
<span>{{ aiStatus.last_scan | date: 'short' }}</span>
</div>
}
}
</div>
<div class="mt-3 pt-2 border-top">
<button
class="btn btn-sm btn-outline-primary w-100"
(click)="navigateToSettings()"
i18n>
Configure AI Scanner
</button>
</div>
</div>
</ng-template>