Integrating a Chatbot into My Storyline Project

I've used the API to get this working within storyline using this code:

const player = GetPlayer();

// You should change the following 3 variables. Make sure that the text is enclosed by quotation marks.
const systemRequest = "XXXXX";
const userInputVariable = "Message_to_Colleague";
const aiOutputVariable = "gptresponse";
const colleagueChatVariable = "Colleague_Chat";

const userEntry = player.GetVar(userInputVariable);
const token = player.GetVar("OpenAI_API");
const auth = "Bearer " + token;

console.log("Authorization:", auth); // Log the entire Authorization header

function sendRequest() {
    fetch("https://api.openai.com/v1/chat/completions", {
        method: 'POST',
        headers: {
            'Authorization': auth,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            "model": "gpt-3.5-turbo",
            "messages": [
              {
                "role": "system",
                "content": systemRequest
              },
              {
                "role": "user",
                "content": userEntry
              }
            ]
        })
    }).then(response => {
        if (!response.ok) {
            return response.json().then(err => {
                throw new Error(`HTTP error! status: ${response.status}, message: ${err.error?.message || "Unknown error"}`);
            });
        }
        return response.json();
    }).then(data => {
        console.log("Response Data:", data); // Log the response data
        let aiText = data.choices[0].message.content;
        player.SetVar(aiOutputVariable, aiText);
        
        // Format and update the Colleague_Chat variable
        let formattedMessage = "<b>Q: </b>" + userEntry + "<br><b>A: </b>" + aiText;
        let currentChat = player.GetVar(colleagueChatVariable) || ""; // Get current chat history
        let updatedChat = currentChat + "<br>" + formattedMessage; // Append new message
        
        player.SetVar(colleagueChatVariable, updatedChat);

sendRequest();

The slide is just a regular text input box, textbox and button plus the appropriate variables in storyline.

The API is populated from a seperate XML file that's uploaded to the VLE seperately. That gives us more control over how and when students can use the chatGPT function and combined with the resource being available only to a select set of students, it's pretty secure.