Gå til innhold

ePortal-håndbok

KAI-komponenter

kontias/ePortal

KAI-komponenter¶

KAI-komponentene gir felles presentasjon av AI-assistanse, AI-generert innhold og valideringsresultater. De skal gjøre det tydelig når ePortal viser forslag eller analyser som kommer fra KAI.

Feature-tabell¶

Komponent	Selector	Hovedfunksjoner	Import
AiChatComponent	`app-ai-chat`	Chatpanel, mode, context, forslag, actions, datauttrekk	`AiChatModule`
KaiValidationResultComponent	`app-kai-validation-result`	Dockbart valideringspanel, severity, record-lenker, apply fix	Standalone
KaiDisclosureComponent	`app-kai-disclosure`	Badge/banner som forklarer AI-generert eller AI-assistert innhold	Standalone
KAI interne subkomponenter	`kai-suggested-actions`, `kai-kpi-row`, `kai-data-table`, `kai-chart`	Renderes av chatflyten	Deklarert i `AiChatModule`

AI-chat¶

Del	Sti
Komponent	`ui/ePortal.ui/src/app/shared/components/ai-chat/ai-chat.component.ts`
Modul	`ui/ePortal.ui/src/app/shared/components/ai-chat/ai-chat.module.ts`

app-ai-chat brukes når en side skal tilby KAI-chat med kontekst fra fagmodulen. Komponenten støtter flere modes og kan enten vises som flytende panel eller sidepanel.

Brukseksempel¶

<app-ai-chat
  [context]="chatContext"
  position="bottom-right"
  [initialExpanded]="false"
  [hasAccess]="canUseKai"
  mode="controller"
  [allowModeSwitch]="canSwitchKaiMode"
  (highlightRecords)="highlightRows($event)"
  (anomaliesDetected)="showAnomalies($event)"
  (actionPerformed)="handleKaiAction($event)">
</app-ai-chat>

chatContext: AIChatContext = {
  fromDate: this.periodStart,
  toDate: this.periodEnd,
  employeeNo: this.employeeNo,
  moduleContext: 'time',
  data: this.rows,
};

API¶

Type	Navn	Default	Beskrivelse
Input	`context`	påkrevd	Periode, ansatt, modul og valgfri data.
Input	`position`	`bottom-right`	`bottom-right`, `bottom-left` eller `side`.
Input	`initialExpanded`	`false`	Starter åpnet.
Input	`hasAccess`	`true`	Skjuler/deaktiverer chat hvis bruker mangler tilgang.
Input	`mode`	`controller`	Chatmodus.
Input	`allowModeSwitch`	`false`	Lar bruker bytte modus.
Output	`highlightRecords`		Emitter rad-id-er som bør markeres.
Output	`anomaliesDetected`		Emitter anomalirapport.
Output	`chatToggled`		Emitter åpen/lukket state.
Output	`dockToggled`		Emitter dock-state.
Output	`actionPerformed`		Emitter valgt KAI-handling og data.

KAI validation result¶

Del	Sti
Komponent	`ui/ePortal.ui/src/app/shared/components/kai-validation-result/kai-validation-result.component.ts`

Komponenten viser en liste av valideringsbrudd med severity, berørte rader og valgfri automatisk retting.

Brukseksempel¶

<app-kai-validation-result
  [violations]="validationViolations"
  [summary]="validationSummary"
  [title]="'Kai.Validation.Title' | translate"
  [initialDocked]="true"
  [allowDocking]="true"
  [allowDragging]="true"
  (showRecords)="focusRecords($event)"
  (applyFix)="applyValidationFix($event)"
  (close)="hideValidationPanel()">
</app-kai-validation-result>

openValidationResult(): void {
  this.validationPanel.open(this.validationViolations, this.validationSummary);
}

API¶

Type	Navn	Default	Beskrivelse
Input	`violations`	`[]`	Valideringsbrudd.
Input	`summary`	`null`	Summering av totaler og severity.
Input	`title`	`''`	Tittel, vanligvis oversatt i parent.
Input	`showAsInline`	`false`	Inline-visning i stedet for panel.
Input	`initialDocked`	`true`	Starter docked.
Input	`allowDocking`	`true`	Tillater dock/undock.
Input	`allowDragging`	`true`	Tillater dragging når undocked.
Output	`showRecords`		Emitter berørte record-id-er.
Output	`applyFix`		Emitter valgt violation for retting.
Output	`close`		Panel lukkes.
Output	`dockChanged`		Dock-state endres.

KAI disclosure¶

Del	Sti
Komponent	`ui/ePortal.ui/src/app/shared/components/kai-disclosure/kai-disclosure.component.ts`

Bruk disclosure-komponenten når en tekst, analyse eller handling er foreslått, assistert eller generert av KAI.

<app-kai-disclosure
  mode="badge"
  variant="suggested"
  [compact]="true">
</app-kai-disclosure>

Type	Navn	Default	Beskrivelse
Input	`mode`	`badge`	`badge` eller `banner`.
Input	`variant`	`suggested`	`generated`, `suggested` eller `assisted`.
Input	`compact`	`false`	Kompakt visning.

Interne chat-renderere¶

Selector	Bruk
`kai-suggested-actions`	Viser `actions` fra chatrespons og emitter valgt prompt via `actionSelected`.
`kai-kpi-row`	Viser KPI-kort fra `cards`.
`kai-data-table`	Viser tabell-`payload`, bruker valgfri `exportData` og emitter `export` med eksportdatasett.
`kai-chart`	Viser chart-`payload` med ngx-charts datastruktur.

Disse brukes primært av app-ai-chat. Bruk dem bare direkte hvis ny side allerede følger KAI chat-kontraktene.

Kjente fallgruver¶

Fallgruve	Riktig mønster
Vise AI-generert innhold uten disclosure	Legg inn `app-kai-disclosure`.
La chat være tilgjengelig uten tilgangssjekk	Bind `hasAccess` til faktisk rettighet.
Håndtere `applyFix` inne i validation-komponenten	Parent eier domenelogikk og lagring.
Sende store datasett ukritisk i `context.data`	Send bare data KAI trenger for siden eller perioden.

Relaterte sider¶