Kuno - KI Portalen

Kuno KI-portal bygget med Next.js, TypeScript og Tailwind CSS.

Formål

Dette er en frontend-fokusert demo designet for å demonstrere UI/UX, interaksjoner, tilgjengelighet og flyt. Den fungerer med mock-data out-of-the-box, og kan kobles til Azure AI Foundry via en sikker server-endpoint i Next.js.

Koble til Azure AI Foundry

1. Opprett filen .env.local i prosjektroten (du kan kopiere fra .env.local.example).
2. Sett verdier for:
   • AZURE_OPENAI_ENDPOINT
   • AZURE_OPENAI_API_KEY
   • AZURE_OPENAI_DEPLOYMENT
   • AZURE_OPENAI_API_VERSION (valgfritt, standard er 2024-10-21)
   • KUNO_SCOPE_<SCOPE_ID>_TERMS (valgfritt, kommaseparerte nøkkelord per datagrunnlag)
   • KUNO_SCOPE_<SCOPE_ID>_SEARCH_FILTER (valgfritt, OData-filter per datagrunnlag for Azure AI Search metadata-oppslag)

Eksempel for Elevundersøkelsen:

• KUNO_SCOPE_ELEVUNDERSOKELSEN_TERMS=elevundersøkelsen,elevundersøkelse
• KUNO_SCOPE_ELEVUNDERSOKELSEN_SEARCH_FILTER=search.ismatch('elevundersøkelsen', 'metadata_storage_name')

Bakoverkompatibilitet:

• KUNO_SCOPE_ELEV_TERMS og KUNO_SCOPE_ELEV_SEARCH_FILTER støttes fortsatt for Elevundersøkelsen.

3. Start appen med npm run dev.
4. Send en melding i chatten. Frontend kaller da POST /api/chat, som videresender sikkert til Foundry.

Viktig sikkerhet

• API-nøkkel ligger kun på serveren (i .env.local), ikke i browser-kode.
• Klienten kaller kun lokal Next.js-route (src/app/api/chat/route.ts).
• Ikke bruk NEXT_PUBLIC_ for hemmelige nøkler.

Tech Stack

• Framework: Next.js 15 (App Router)
• Språk: TypeScript
• Styling: Tailwind CSS + CSS-variabler
• Komponenter: shadcn/ui (Radix UI primitives)
• State Management: Zustand
• Markdown: react-markdown
• Ikoner: Navikt/udir
• i18n: next-intl (nb-NO)

Funksjoner

Layout

• Toppbar: Logo, søk, tema-bryter, innstillinger
• Venstre sidebar: Historikk, modus-velger, filtre
• Hovedområde: Chat med meldinger, oppfølgingsspørsmål, streaming
• Høyre panel: Kilder, tekstutdrag, kvalitetsnotater, preview og nedlastning

Funksjoner

• Chat-streaming (ord-for-ord)
• Mock kilder med relevans-score når foundry ikke er aktiv
• Usikkerhetsindikatorer (lav/middels/høy)
• Scope-filter for datagrunnlag med tematiske kategorier (f.eks. Elevundersøkelsen, Lærerundersøkelser, Barnehageforskning)
• Tre moduser: Chat, Språkvask og Pressesvar (Kun Chat er utviklet, Pressesvar er bare en tanke)
• Historikk med samtaler
• Light/Dark/System tema
• Responsivt design (mobilvennelig)
• Tilgjengelighetsfunksjoner (tekststørrelse, kildetall, høy kontrast, dysleksivennlig font ++)
• Respekterer prefers-reduced-motion

Prosjektstruktur

src/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Hovedside
│   └── globals.css         # Global styling
├── components/
│   ├── chat/               # Chat-komponenter
│   │   ├── message.tsx
│   │   ├── chat-input.tsx
│   │   ├── loading-dots.tsx
│   │   └── follow-ups.tsx
│   ├── layout/             # Layout-komponenter
│   │   ├── demo-banner.tsx
│   │   ├── top-bar.tsx
│   │   ├── side-panel.tsx
│   │   └── insight-panel.tsx
│   ├── sidebar/            # Sidebar-komponenter
│   │   ├── history-list.tsx
│   │   ├── mode-toggle.tsx
│   │   └── filters.tsx
│   ├── insight/            # Innsiktspanel-komponenter
│   │   ├── source-list.tsx
│   │   ├── chunk-viewer.tsx
│   │   └── quality-note.tsx
│   ├── ui/                 # shadcn/ui komponenter
│   └── providers/          # React providers
├── store/
│   ├── chat-store.ts       # Zustand chat state
│   └── ui-store.ts         # Zustand UI state
├── lib/
│   ├── utils.ts            # Hjelpefunksjoner
│   └── mock-data.ts        # Mock data
└── types/
    └── index.ts            # TypeScript typer

Design System

Fargepalett

• Primær: Udir grønn 7 #76C69D

• Primær mørk: Udir grønn 8 #5BA27E

• Primær lys: Udir grønn 5 #A9DBC2

• Aksent: Udir grønn 2 #DDF1E7

• Aksent lys: Udir grønn 1 #EEF8F3

• Petrol / mørk grønn: Udir grønn 9 #254B38

• Petrol / ekstra mørk: Udir grønn 10 #112E1F

• Nøytral lysest: #FFFFFF

• Nøytral lys: Udir sort 1 #FBFBFB

• Nøytral bakgrunn: Udir sort 2 #F4F4F4

• Nøytral kant: Udir sort 3 #EAEAEA

• Nøytral dempet: Udir sort 4 #DEDEDE

• Nøytral mellom: Udir sort 5 #C4C4C4

• Nøytral tekst svak: Udir sort 6 #A0A0A0

• Nøytral tekst: Udir sort 7 #757575

• Nøytral mørk: Udir sort 8 #3D4146

• Nøytral mørkest: Udir sort 9 #303030

Støttefarger

Blå

• Blå 1: #EFF7FE
• Blå 2: #E0EFFB
• Blå 3: #D3E6F6
• Blå 4: #C8DEF0
• Blå 5: #BED5E8
• Blå 6: #A9C0D3
• Blå 7: #7F99AE
• Blå 8: #6D889D
• Blå 9: #536D81
• Blå 10: #2F4960
• Blå 11: #263745
• Blå 12: #191D24

Brun

• Brun 1: #FBF7F1
• Brun 2: #FBF3E8
• Brun 3: #F2E8DA
• Brun 4: #ECDBC2
• Brun 5: #E5CEAE
• Brun 6: #D6B689
• Brun 7: #BFA687
• Brun 8: #937A57
• Brun 9: #705C40
• Brun 10: #5E4521
• Brun 11: #261F14

Typografi

• Font: Inter (med system fallback)
• Skala: Tailwind standard

Tema

• Light mode (standard når ingen lagret preferanse finnes)
• Dark mode
• System (følger OS-preferanse)

Nøkkelfunksjoner

Mock Data

Når Foundry ikke nås, er all data (samtaler, kilder, chunks) hardkodet i src/lib/mock-data.ts for sikkerhetshensyn.

State Management

• chat-store.ts: Håndterer samtaler, meldinger, filtre, modus
• ui-store.ts: Håndterer tema, sidebar/panel-tilstand, kommandopalett

Tilgjengelighet

• Semantisk HTML
• ARIA-labels
• Focus management
• Screen reader support
• Respekterer prefers-reduced-motion

Internasjonalisering

Prosjektet bruker next-intl med norsk bokmål (nb-NO) som standard språk. Oversettelser finnes i messages/nb-NO.json.

Responsivt Design

• Mobil (<768px): Sidebar og innsiktspanel starter lukket
• Tablet (768px-1024px): Sidebar synlig, innsiktspanel kan skjules
• Desktop (>1024px): Full layout med alle paneler synlige

Ytelse

• Server-side rendering med Next.js App Router
• Optimalisert bundle med code splitting
• Lazy loading av komponenter hvor relevant
• Optimaliserte animasjoner

Testing

Testing er ikke konfigurert ennå.

Lisens