static/js/index.js

// mapping of tab to its contents
const TABS = {
    "chat-tab": "chat-tab-contents",
    "explore-tab": "explore-tab-contents"
};

// switch to the specified tab
function switchTab(newTab) {
    Object.keys(TABS).forEach(tabId => {
        const tabElement = document.getElementById(tabId);
        if (tabElement) {
            tabElement.classList.remove("tab-active");
        }
    });

    // Hide all tab contents
    Object.values(TABS).forEach(contentId => {
        const contentElement = document.getElementById(contentId);
        if (contentElement) {
            contentElement.classList.add("hidden");
        }
    });

    // Activate the new tab if it exists in the mapping
    if (newTab in TABS) {
        const newTabElement = document.getElementById(newTab);
        const newContentElement = document.getElementById(TABS[newTab]);

        if (newTabElement) newTabElement.classList.add("tab-active");
        if (newContentElement) newContentElement.classList.remove("hidden");
    }
}

function addMessage(message, role = "user") {
    const chatContainer = document.getElementById("chat-messages-container");

    const chatDiv = document.createElement("div");
    chatDiv.classList.add("chat");

    if (role === "user")
        chatDiv.classList.add("chat-end");
    else if (role === "bot")
        chatDiv.classList.add("chat-start");
    else
        chatDiv.classList.add("chat-start");

    const bubbleDiv = document.createElement("div");
    bubbleDiv.classList.add("chat-bubble");

    if (role === "user")
        bubbleDiv.classList.add("chat-bubble-primary");
    else if (role === "bot")
        bubbleDiv.classList.add("chat-bubble-secondary");
    else
        bubbleDiv.classList.add("chat-bubble-secondary");

    bubbleDiv.textContent = message;

    chatDiv.appendChild(bubbleDiv);
    chatContainer.appendChild(chatDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}


function escapeString(str) {
    return str
        .replace(/\\/g, '\\\\')   // Escape backslashes
        .replace(/"/g, '\\"')     // Escape double quotes
        .replace(/\n/g, '\\n')    // Escape newlines
        .replace(/\r/g, '\\r')    // Escape carriage returns
        .replace(/\t/g, '\\t');   // Escape tabs
}

// extract entities from the given input text
async function extractEntities(text) {
    let escaped_text = escapeString(text);

    try {
        let graph_data_req = await fetch("/extract_entities", {
            method: "POST",
            headers: new Headers({
                "Content-Type": "application/json"
            }),
            body: JSON.stringify({
                content: escaped_text
            })
        })

        let graph_data = await graph_data_req.json();

        console.log(graph_data);

        var options = {};
        var network = new vis.Network(document.getElementById('grapha'), graph_data, options);
        addMessage("I've created a knowledge graph based on what you've provided me. Check the explore tab !", "bot");
    } catch (e) {
        console.error("Error while trying to extract entities into a KG", e);
    }
}


document.addEventListener('DOMContentLoaded', _ => {
    document.getElementById('chat-send-input').addEventListener('click', (ev) => {
        let textbox = document.getElementById('chat-input');
        let text = textbox.value;

        addMessage(text, "user");
        extractEntities(text);
        textbox.value = "";
    });
})