Bygge chatbots

💡 Slik fungerer samtalehistorikk:
Runde 1: Send [bruker: "Hei"] → få svar
Runde 2: Send [bruker: "Hei", assistent: "Hei!", bruker: "Hva heter du?"] → få svar
Runde 3: Send alle tidligere meldinger + ny melding → få svar

Claude "husker" fordi du sender hele historikken hver gang.

💡 chat.php — backend:

session_start();
header("Content-Type: application/json");

$api_key    = getenv("ANTHROPIC_API_KEY");
$handling   = $_POST["handling"] ?? "send";

if ($handling === "nullstill") {
    $_SESSION["historikk"] = [];
    echo json_encode(["ok" => true]);
    exit;
}

$melding = trim($_POST["melding"] ?? "");
if (!$melding) { echo json_encode(["feil" => "Tom melding"]); exit; }

if (!isset($_SESSION["historikk"])) $_SESSION["historikk"] = [];

$_SESSION["historikk"][] = ["role" => "user", "content" => $melding];

$historikk = array_slice($_SESSION["historikk"], -20);

$data = [
    "model"      => "claude-sonnet-4-20250514",
    "max_tokens" => 1024,
    "system"     => "Du er en hjelpsom assistent for Kvisvik Nettutvikling. Svar alltid på norsk.",
    "messages"   => $historikk
];

$ch = curl_init("https://api.anthropic.com/v1/messages");
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => json_encode($data),
    CURLOPT_HTTPHEADER     => [
        "x-api-key: $api_key",
        "anthropic-version: 2023-06-01",
        "content-type: application/json"
    ]
]);

$respons = json_decode(curl_exec($ch), true);
$svar    = $respons["content"][0]["text"] ?? "Feil i API-kall";

$_SESSION["historikk"][] = ["role" => "assistant", "content" => $svar];

echo json_encode(["svar" => $svar, "ant_meldinger" => count($_SESSION["historikk"])]);

💡 chat.html — frontend:

<div id="chat-vindu"></div>
<input id="melding-felt" placeholder="Skriv melding...">
<button onclick="sendMelding()">Send</button>
<button onclick="nullstill()">Ny samtale</button>

<script>
async function sendMelding() {
    var melding = document.getElementById("melding-felt").value.trim();
    if (!melding) return;
    leggTilMelding("Du", melding);
    document.getElementById("melding-felt").value = "";

    var fd = new FormData();
    fd.append("melding", melding);

    var res  = await fetch("chat.php", { method: "POST", body: fd });
    var data = await res.json();
    leggTilMelding("Claude", data.svar);
}

function leggTilMelding(avsender, tekst) {
    var div = document.createElement("div");
    div.innerHTML = "<strong>" + avsender + ":</strong> " + tekst;
    document.getElementById("chat-vindu").appendChild(div);
}

async function nullstill() {
    var fd = new FormData();
    fd.append("handling", "nullstill");
    await fetch("chat.php", { method: "POST", body: fd });
    document.getElementById("chat-vindu").innerHTML = "";
}

document.getElementById("melding-felt").addEventListener("keydown", function(e) {
    if (e.key === "Enter") sendMelding();
});
</script>

CREATE TABLE chat_historikk (
    id          INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    sesjon_id   VARCHAR(64) NOT NULL,
    rolle       ENUM("user","assistant") NOT NULL,
    innhold     TEXT NOT NULL,
    opprettet   DATETIME DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_sesjon (sesjon_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;