Gå til innhold

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