PLAN: Startskjerm & Hurtigvalg for AI Chatbot (Fase 4 / Versjon 2)

Dette dokumentet beskriver neste fase av AI Chatbot-utviklingen. Funksjonene skal bygges slik at de er 100% valgfrie for hver enkelt golfklubb-admin å skru av og på via CMS-panelet (ai_chatbot.asp).

---

1. Konsept og Funksjonalitet

• Startskjerm (Pre-chat): Velkomstkort med store knapper (eks: "Klubbinfo", "Medlem?") som legger seg over chatten før samtalen starter.
• Hurtigvalg (Quick Replies): Små klikkbare piller/knapper over skrivefeltet for vanlige spørsmål (eks: "Prismatch"). Trykk = send melding automatisk.

---

2. Hvilke filer skal endres, og hvordan? (Kode-eksempler)

Her er de konkrete filene vi vil endre i Versjon 2, med eksempler på nøyaktig hvordan koden må oppdateres.

A) SKI/CSADMIN/ai_chatbot.asp (Backend Admin)

Vi må oppdatere SQL-sjekken i toppen for å legge til nye kolonner hvis de ikke finnes. I tillegg må vi legge til HTML-skjemafelt (checkboxes og tekstfelt) for klubbadministratoren.

Eksempel på SQL-oppdatering i filen:

' Kodesnutt som legges til for å utvide tabellen uten å slette eksisterende data:
On Error Resume Next
dbConn.Execute("IF NOT EXISTS(SELECT * FROM sys.columns WHERE Name = N'UseStartScreen' AND Object_ID = Object_ID(N'AI_Chatbot_Settings')) " & _
               "BEGIN ALTER TABLE AI_Chatbot_Settings ADD " & _
               "UseStartScreen BIT DEFAULT 0, " & _
               "StartScreenBtn1 VARCHAR(255), " & _
               "StartScreenBtn2 VARCHAR(255), " & _
               "UseQuickReplies BIT DEFAULT 0, " & _
               "QuickRepliesList VARCHAR(1000) END")
On Error GoTo 0

B) SKI/common-front/ai_chatbot_loader.asp (Inkluderingsfil for nettsiden)

Her må vi lese de nye verdiene fra databasen og sende dem videre til selve HTML-widgeten. Det løser vi enklest ved å printe ut egne script-variabler globalt før HTML-koden rendres.

Eksempel på endring i filen:

' Inne i sjekken der vi i dag laster widgeten:
If ais_Active = "1" Then
    ' Send variablene inn i HTML som et lite JS-objekt
    Response.Write "<script>"
    Response.Write "window.aiClubSettings = {"
    Response.Write "  useStartScreen: " & LCase(ai_rs("UseStartScreen") = "1") & ","
    Response.Write "  btn1: '" & ai_rs("StartScreenBtn1") & "',"
    Response.Write "  quickReplies: '" & ai_rs("QuickRepliesList") & "'"
    Response.Write "};"
    Response.Write "</script>"

    ' ... Last inn ai_chat_widget.html her som før ...
End If

C) ai_chat_widget.html (Frontend / UI)

Her må vi bygge ny HTML for Startskjermen (en div som skjuler meldingsloggen inntil en knapp er trykket) og en div for hurtig-knappene. Vi oppdaterer JavaScriptet i filen for å lytte til de nye variablene vi nettopp sendte via .asp-filen.

Eksempel på ny HTML struktur:

<!-- Startskjerm overlay (Dette legges over chat-loggen) -->
<div id="ai-start-screen" style="display: none; padding: 20px;">
  <h3>Hva gjelder henvendelsen?</h3>
  <button class="ai-start-btn" onclick="startChat('Medlem')">Medlem</button>
  <button class="ai-start-btn" onclick="startChat('Gjest')">Klubben (Gjest)</button>
</div>

<!-- Hurtigvalg (Legges over input-feltet) -->
<div id="ai-quick-replies" style="display: flex; gap: 5px; padding: 5px;"></div>

Eksempel på JavaScript logikk for hurtigvalgene (Chips):

// Hvis Hurtigvalg er slått på, generer chips dynamisk:
if (window.aiClubSettings && window.aiClubSettings.quickReplies) {
    const list = window.aiClubSettings.quickReplies.split(",");
    const container = document.getElementById("ai-quick-replies");

    list.forEach(item => {
        let btn = document.createElement("button");
        btn.innerText = item.trim();
        btn.className = "ai-chip-btn"; // Litt rund CSS-styling

        btn.onclick = () => {
            document.getElementById("ai-chat-input").value = item.trim();
            // trigger sendMessage() funksjonen automatisk her
        };
        container.appendChild(btn);
    });
}

---

Oppsummering av Neste Steg for Versjon 2:

Når vi begynner med utviklingen vil jeg manuelt ta oss gjennom disse tre filene, legge inn koden nøyaktig som over, og deretter style dem slik at de matcher resten av designet sømløst. Alt er da tilpasset og bygget 100 % for ditt CMS.