shift/main.js

const startTime = Date.now();

var conversation = null;

class Conversation {
    constructor(name) {
        this.messages = [];
        this.name = name;
        this.score = 1.0;
    }

    setInteractive(isInteractive) {
        const children = document.getElementById("textbox").children;
        for (let i = 0; i < children.length; i++) {
            children[i].disabled = !isInteractive;
        }
    }

    initialize(initialMessages) {
        document.title = this.name;
        document.getElementById("header-title").innerHTML = this.name;

        this.messages = initialMessages;
    }

    // for the user to send their own messages
    sendUserMessage(text) {

        const message = new UserMessage(text);
        message.updateStatus("envoy&eacute");

        setTimeout(() => {
            message.updateStatus("livr&eacute");
            this.render();
            setTimeout(() => {
                message.updateStatus("lu");
                this.render();
                setTimeout(()=> {
                    setTimeout(() => {
                        this.messages.push(new AgentMessage("merde alors"));
                        this.render();
                    }, 2000);
                }, 500);
            }, 3000);
        }, 1000);
        //this.messages.push(message);
        this.messages.push(message);
        //this.messages.push(new AgentMessage(messageText));
        this.render();
    }

    // update the current HTML based on messages
    render() {
        // clear stale HTML 
        getMessageList().innerHTML = "";

        // if there are multiple 'read' messages, we only want the last one to display
        // the status. the other ones must have been read, so clear their statuses.
        let foundReadMessage = false;
        for (let i = this.messages.length - 1; i >= 0; i--) {
            const message = this.messages[i];
            if (!message.getIsOurs())
                continue;

            // if we haven't found a read message yet, let's check to see if we have now
            if (!foundReadMessage) {
                if (message.status == "lu") {
                    foundReadMessage = true;
                    continue;
                }
            } else {
                // we have found a read message, which means all messages above it should
                // have empty status
                message.updateStatus("");
            }
        }

        // render message elements
        for (let i = 0; i < this.messages.length; i++)
        {
            const messageRoot = document.getElementById("messages");
            const newMessage = this.messages[i];
            messageRoot.appendChild(newMessage.getElement());
        }
    }
}

function getMessageList() {
    return document.getElementById("messages");
}

class AgentMessage {
    constructor(text, senderName) {
        this.text = text;
        this.senderName = senderName;
    }

    getIsOurs() {
        return false;
    }

    getElement() {
        const liElem = document.createElement("li");
        liElem.className = "message";

        const contentElem = document.createElement("span");
        contentElem.className = "message-content rounded-rectangle theirs";
        liElem.appendChild(contentElem);

        if (this.senderName) {
            const nameElem = document.createElement("h3");
            nameElem.innerHTML = this.senderName;
            contentElem.appendChild(nameElem);
        }

        const textElem = document.createElement("span");
        textElem.className = "message-text";
        textElem.innerHTML = this.text;
        contentElem.appendChild(textElem);

        return liElem;
    }
}

class UserMessage {
    constructor(text) {
        this.createdTime = Date.now();
        this.text = text;
        this.status = "";
    }

    getIsOurs() {
        return true;
    }

    getElement() {
        const liElem = document.createElement("li");
        liElem.className = "message";

        const contentElem = document.createElement("span");
        contentElem.className = "message-content rounded-rectangle ours";
        liElem.appendChild(contentElem);

        const textElem = document.createElement("span");
        textElem.className = "message-text";
        textElem.innerHTML = this.text;
        contentElem.appendChild(textElem);

        const statusElem = document.createElement("p");
        statusElem.className = "message-status";
        statusElem.innerHTML = this.status;
        liElem.appendChild(statusElem);

        return liElem;
    }

    updateStatus(newStatus) {
        this.status = newStatus;
    }
}

class SystemMessage {
    constructor(text) {
        this.text = text;
    }

    getIsOurs() {
        return false;
    }

    getElement() {
        const liElem = document.createElement("li");
        liElem.className = "system-message";
        liElem.innerHTML = this.text;

        return liElem;
    }
}

function setTypingIndicator(isTyping) {
    document.getElementById("typing-indicator").innerHTML = isTyping
        ? `${conversation.contactName} is typing...`
        : "";
}

// add the message at the index to the displayed messages
function addMessage(message) {
    getMessageList().innerHTML += message.getHtml();
    
    // scroll as far as we can so that messages aren't hidden
    window.scrollTo(0, document.body.scrollHeight);
}

function updatePings() {
    const title = conversation.name;
    let newTitle = conversation.pings > 0
        ? `(${conversation.pings}) ${title}`
        : title;
    
    document.title = newTitle;
}

function clearPings() {
    conversation.pings = 0;
    updatePings();
}

// returns a decimal value between min and max
function getRandomInRange(min, max) {
    const range = max - min;
    return min + Math.random() * range;
}

function updateChat(message) {
    addMessage(message);
    const previewText = conversation.getTypedMessageText();
    document.getElementById("textbox-input").value = previewText;
    updatePings();
}

function pressSendButton() {
    const textBox = document.getElementById("textbox-input");

    // get the content of the text box
    const text = textBox.value;
    if (!text)
        return;

    if (event.type == "keydown" && event.key != "Enter")
    {
        textBox.value = text;
        return;
    }

    // we have interacted with the page so remove all pings
    clearPings();

    textBox.value = "";

    conversation.sendUserMessage(text);
    conversation.render();

    // TODO: start process of receiving next message from server (or fake it for now)
}

function onMessageReceived(message) {
    updateChat(message);
    setTypingIndicator(false);
}

function onMessageSent(message) {
    updateChat(message);
}

function readConversationJson(path, callback) {
    fetch(path)
        .then(response => response.json())
        .then(json => callback(json));
}

function showConversation(path) {

    const mainPanel = document.getElementById("main-panel");
    const conversationListElem = document.getElementById("side-panel");

    readConversationJson(path, json => {
        conversation = new Conversation(json.title);
        const jsonMessages = json.messages;
        const participants = json.characters;

        let initialMessages = [];

        for (let i = 0; i < jsonMessages.length; i++) {
            const data = jsonMessages[i];
            const text = data.text;
            if (data.character == -1) {
                const message = new SystemMessage(text);
                initialMessages.push(message);
            } else if (data.character == 0) {
                const message = new UserMessage(text);
                message.updateStatus("lu");
                initialMessages.push(message);
            } else {
                const message = participants.length > 2 
                    ? new AgentMessage(text, participants[data.character])
                    : new AgentMessage(text);
                initialMessages.push(message);
            }
        }

        conversation.initialize(initialMessages);
        conversation.setInteractive(json.interactive);
        conversation.render();
    });
}

setTypingIndicator(false);

showConversation("sncf.json");