Files
git.stella-ops.org/docs/features/unchecked/web/ai-chat-panel-ui.md

2.5 KiB

AI Chat Panel UI

Module

Web

Status

IMPLEMENTED

Description

Full Advisory AI chat panel with message rendering, action buttons, object link chips, evidence drilldown, and explanation panels is implemented in the Angular frontend.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/features/advisory-ai/
  • Components:
    • autofix-button (src/Web/StellaOps.Web/src/app/features/advisory-ai/autofix-button.component.ts)
    • action-button (src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/action-button.component.ts)
    • chat-message (src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat-message.component.ts)
    • chat (src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat.component.ts)
    • object-link-chip (src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/object-link-chip.component.ts)
    • evidence-drilldown (src/Web/StellaOps.Web/src/app/features/advisory-ai/evidence-drilldown.component.ts)
    • explain-button (src/Web/StellaOps.Web/src/app/features/advisory-ai/explain-button.component.ts)
    • explanation-panel (src/Web/StellaOps.Web/src/app/features/advisory-ai/explanation-panel.component.ts)
    • plain-language-toggle (src/Web/StellaOps.Web/src/app/features/advisory-ai/plain-language-toggle.component.ts)
    • pr-tracker (src/Web/StellaOps.Web/src/app/features/advisory-ai/pr-tracker.component.ts)
    • remediation-plan-preview (src/Web/StellaOps.Web/src/app/features/advisory-ai/remediation-plan-preview.component.ts)
  • Services:
    • chat (src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat.service.ts)
  • Models:
    • src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat.models.ts
  • Source: Feature matrix scan

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to /triage/artifacts/:artifactId
    • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
  • Core verification:
    • Verify the panel/drawer opens on trigger (click, keyboard shortcut)
    • Verify the panel displays the correct detail data for the selected item
    • Verify the panel can be closed (X button, Escape key, backdrop click)
  • Edge cases:
    • Verify graceful handling when backend API is unavailable (error state)
    • Verify responsive layout at different viewport sizes
    • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)