402 lines
16 KiB
JavaScript
402 lines
16 KiB
JavaScript
var conversation_id = false;
|
|
var conversations = [];
|
|
|
|
var assistant_key = false;
|
|
var assistants = [];
|
|
|
|
var tov_key = false;
|
|
const tone_of_voices = [
|
|
{ key: "standard", name: "TOV" },
|
|
|
|
];
|
|
|
|
var thisUser = "";
|
|
|
|
var sending_message = false;
|
|
|
|
var md_converter = new showdown.Converter();
|
|
md_converter.setFlavor('github');
|
|
md_converter.setOption('tables', 'true');
|
|
//md_converter.setOption('smoothLivePreview', 'true');
|
|
md_converter.setOption('disableForced4SpacesIndentedSublists', 'true');
|
|
//md_converter.setOption('simpleLineBreaks', 'true');
|
|
//md_converter.setOption('emoji', 'true');
|
|
|
|
console.log("is this thing on??");
|
|
|
|
function maskUKBankDetails(text) {
|
|
// Enhanced regular expression for UK Sort Code to match various formats: XX-XX-XX, XX XX XX, XXXXXX, or XX*XX*XX
|
|
const sortCodeRegex = /\b(\d{2}[-\s*]\d{2}[-\s*]\d{2}|\d{6})\b/g;
|
|
// Regular expression for UK Bank Account Number: 8 digits
|
|
const accountNumberRegex = /\b\d{8}\b/g;
|
|
// Regular expression for 16-digit card numbers, split or unsplit by any non-digit character
|
|
const cardNumberRegex = /\b(?:\d{4}[-\s*]){3}\d{4}\b|\b\d{16}\b/g;
|
|
// Regular expression for specific cybersecurity-related terms
|
|
const cybersecurityTermsRegex = /\b\w*?(malware|malicious|hack|injection|attack|password|phishing|exploit)\w*?\b/gi;
|
|
|
|
// Replace matched patterns with '######' or appropriate replacement
|
|
return text
|
|
.replace(sortCodeRegex, '######')
|
|
.replace(accountNumberRegex, '######')
|
|
.replace(cardNumberRegex, '############')
|
|
.replace(cybersecurityTermsRegex, '#######');
|
|
}
|
|
|
|
|
|
async function gcp_fetch(url) {
|
|
console.log("running gcp_fetch");
|
|
return await fetch(
|
|
|
|
url,
|
|
|
|
{
|
|
method: "POST",
|
|
mode: "cors",
|
|
headers: { "Content-type": "application/json",
|
|
"authenticateduser": thisUser
|
|
},
|
|
body: JSON.stringify({ "authenticateduser": thisUser })
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
|
|
const toggleSidebar = (e) => {
|
|
e.stopPropagation();
|
|
|
|
if (Array.from(document.getElementById("body").classList).includes("sidebar-hidden")) {
|
|
document.getElementById("body").classList.remove("sidebar-hidden");
|
|
} else {
|
|
document.getElementById("body").classList.add("sidebar-hidden");
|
|
}
|
|
};
|
|
|
|
const getConversations = () => {
|
|
gcp_fetch(make_url + "?GetConversations=True")
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
if (!res?.conversations) return false;
|
|
conversations = res.conversations;
|
|
document.getElementById("conversations-list").innerHTML = res?.conversations
|
|
?.map((conversation) => {
|
|
return conversations_list_item
|
|
?.replaceAll("{CONVERSATION_ID}", conversation?.id)
|
|
?.replaceAll("{CONVERSATION_TITLE}", processConversationTitle(conversation?.title));
|
|
})
|
|
?.join("");
|
|
});
|
|
};
|
|
|
|
const processConversationTitle = (input_title) => {
|
|
let new_title = JSON.parse(JSON.stringify(input_title));
|
|
new_title = new_title.trim();
|
|
if (new_title.startsWith("'") || new_title.startsWith('"')) {
|
|
new_title = new_title.substring(1);
|
|
}
|
|
|
|
if (new_title.endsWith("'") || new_title.endsWith('"')) {
|
|
new_title = new_title.substring(0, new_title.length - 1);
|
|
}
|
|
|
|
return new_title;
|
|
};
|
|
|
|
const getAssistants = () => {
|
|
gcp_fetch(make_url + "?GetAssistants=True")
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
if (!res?.assistants) return false;
|
|
assistants = res.assistants;
|
|
document.getElementById("assistants-list").innerHTML = res?.assistants
|
|
?.map((assistant) => {
|
|
return assistant_list_item?.replaceAll("{ASSISTANT_KEY}", assistant?.key)?.replaceAll("{ASSISTANT_NAME}", assistant?.name);
|
|
})
|
|
?.join("");
|
|
});
|
|
};
|
|
|
|
const getTOVs = () => {
|
|
document.getElementById("tov-list").innerHTML = tone_of_voices
|
|
?.map((tov) => {
|
|
return tov_list_item?.replaceAll("{TOV_ID}", tov?.key)?.replaceAll("{TOV_NAME}", tov?.name);
|
|
})
|
|
?.join("");
|
|
setDefaultToneOfVoice();
|
|
};
|
|
|
|
const setDefaultToneOfVoice = () => {
|
|
tov_key = tone_of_voices[0]?.key;
|
|
|
|
document.getElementById("tov-name").innerHTML = tone_of_voices[0]?.name;
|
|
document.getElementById("tov-name-container").classList.remove("tov-name-container-active");
|
|
document.getElementById("tov-list").classList.add("tov-list-hidden");
|
|
document.getElementById("tov-name").classList.remove("tov-name-placeholder");
|
|
};
|
|
|
|
const goToConversation = (e, new_conversation_id) => {
|
|
e.stopPropagation();
|
|
|
|
console.log("goToConversation");
|
|
|
|
conversation_id = new_conversation_id;
|
|
|
|
const conversation = conversations?.find((e) => e.id === new_conversation_id);
|
|
const assistant = assistants?.find((e) => e.key === conversation?.assistant_key);
|
|
if (!assistant) return false;
|
|
|
|
Array.from(document.getElementsByClassName("conversations-list-btn-active"))?.map((el) => el.classList.remove("conversations-list-btn-active"));
|
|
document.getElementById("conversations-list-item-" + new_conversation_id)?.classList.add("conversations-list-btn-active");
|
|
|
|
document.getElementById("chat").innerHTML = loading_circle;
|
|
|
|
assistant_key = conversation?.assistant_key;
|
|
|
|
document.getElementById("assistant-name").innerHTML = assistants.find((e) => e.key === conversation?.assistant_key)?.name;
|
|
document.getElementById("assistant-name-container").classList.remove("assistant-name-container-active");
|
|
document.getElementById("assistants-list").classList.add("assistants-list-hidden");
|
|
document.getElementById("assistant-name").classList.remove("assistant-name-placeholder");
|
|
|
|
document.getElementById("tov-name").innerHTML = tone_of_voices.find((e) => e.key === conversation?.tov_key)?.name;
|
|
document.getElementById("tov-name-container").classList.remove("tov-name-container-active");
|
|
document.getElementById("tov-list").classList.add("tov-list-hidden");
|
|
document.getElementById("tov-name").classList.remove("tov-name-placeholder");
|
|
|
|
gcp_fetch(make_url + `?GetMessages=True&ConversationID=${encodeURI(conversation_id)}`)
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
if (res?.conversation_id === conversation_id) {
|
|
document.getElementById("chat").innerHTML = chat_message_assistant.replaceAll("{CONTENT}", assistant?.initial_message);
|
|
document.getElementById("chat").innerHTML += res?.messages
|
|
?.map((message) => {
|
|
if (message?.role === "assistant")
|
|
//return chat_message_assistant.replaceAll("{CONTENT}", md_converter?.makeHtml(message?.content));
|
|
return chat_message_assistant.replaceAll("{CONTENT}", message?.content);
|
|
if (message?.role === "user") return chat_message_user.replaceAll("{CONTENT}", md_converter?.makeHtml(message?.content));
|
|
return "";
|
|
})
|
|
?.join("");
|
|
|
|
// Scroll to Last Message
|
|
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
|
|
}
|
|
});
|
|
};
|
|
|
|
const goToCreateNewConversationsPage = () => {
|
|
conversation_id = false;
|
|
assistant_key = false;
|
|
sending_message = false;
|
|
document.getElementById("page-content").innerHTML = chat_new_conversation_html;
|
|
Array.from(document.getElementsByClassName("conversations-list-btn-active"))?.map((el) => el.classList.remove("conversations-list-btn-active"));
|
|
|
|
document.getElementById("message-input").addEventListener("input", () => {
|
|
document.getElementById("message-input").style.height = "auto";
|
|
document.getElementById("message-input").style.height = document.getElementById("message-input").scrollHeight + 6 + "px";
|
|
});
|
|
|
|
document.getElementById("message-input").addEventListener("keydown", (e) => {
|
|
if (e.code === "Enter" && !e?.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
document.getElementById("assistants-list").innerHTML = assistants
|
|
?.map((assistant) => {
|
|
return assistant_list_item?.replaceAll("{ASSISTANT_KEY}", assistant?.key)?.replaceAll("{ASSISTANT_NAME}", assistant?.name);
|
|
})
|
|
?.join("");
|
|
|
|
document.getElementById("tov-list").innerHTML = tone_of_voices
|
|
?.map((tov) => {
|
|
return tov_list_item?.replaceAll("{TOV_ID}", tov?.key)?.replaceAll("{TOV_NAME}", tov?.name);
|
|
})
|
|
?.join("");
|
|
setDefaultToneOfVoice();
|
|
};
|
|
|
|
const startDeletingConversation = (e, conversation_id) => {
|
|
e.stopPropagation();
|
|
|
|
document.getElementById("conversations-list-item-manage-container-" + conversation_id).innerHTML =
|
|
conversations_list_item_manage_delete_options_html?.replaceAll("{CONVERSATION_ID}", conversation_id);
|
|
};
|
|
|
|
const stopDeletingConversation = (e, conversation_id) => {
|
|
e.stopPropagation();
|
|
|
|
document.getElementById("conversations-list-item-manage-container-" + conversation_id).innerHTML =
|
|
conversations_list_item_manage_options_html?.replaceAll("{CONVERSATION_ID}", conversation_id);
|
|
};
|
|
|
|
const deleteConversation = (e, conversation_id) => {
|
|
e.stopPropagation();
|
|
|
|
const conversation = conversations?.find((e) => e?.id === conversation_id);
|
|
if (!conversation) return false;
|
|
|
|
goToCreateNewConversationsPage();
|
|
|
|
gcp_fetch(make_url + `?DeleteConversation=True&ConversationID=${encodeURI(conversation_id)}`)
|
|
.then((res) => res.json())
|
|
.then(() => {
|
|
const conversation_index = conversations?.findIndex((e) => e?.id === conversation_id);
|
|
if (conversation_index === -1) return false;
|
|
conversations.splice(conversation_index, 1);
|
|
|
|
document.getElementById(`conversations-list-item-${conversation_id}`)?.remove();
|
|
});
|
|
};
|
|
|
|
const sendMessage = () => {
|
|
if (!assistant_key) {
|
|
alert("Please Select an Assistant");
|
|
return false;
|
|
}
|
|
|
|
if (!tov_key) {
|
|
alert("Please Select a Tone of Voice");
|
|
return false;
|
|
}
|
|
|
|
const new_assistant_key = JSON.parse(JSON.stringify(assistant_key));
|
|
const new_tov_key = JSON.parse(JSON.stringify(tov_key));
|
|
|
|
if (sending_message) return false;
|
|
sending_message = true;
|
|
|
|
//const message = document.getElementById("message-input")?.value;
|
|
const message = maskUKBankDetails(document.getElementById("message-input")?.value);
|
|
document.getElementById("message-input").value = "";
|
|
|
|
document.getElementById("assistant-name-container").classList.remove("assistant-name-container-active");
|
|
document.getElementById("assistant-name").classList.remove("assistant-name-placeholder");
|
|
document.getElementById("assistants-list").classList.add("assistants-list-hidden");
|
|
|
|
document.getElementById("tov-name-container").classList.remove("tov-name-container-active");
|
|
document.getElementById("tov-name").classList.remove("tov-name-placeholder");
|
|
document.getElementById("tov-list").classList.add("tov-list-hidden");
|
|
|
|
Array.from(document.getElementsByClassName("chat-message-appear"))?.map((el) => el.classList.remove("chat-message-appear"));
|
|
document.getElementById("chat").innerHTML += chat_message_user_new.replaceAll("{CONTENT}", md_converter?.makeHtml(message));
|
|
|
|
// Scroll to Last Message
|
|
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
|
|
|
|
setTimeout(() => {
|
|
Array.from(document.getElementsByClassName("chat-message-appear"))?.map((el) => el.classList.remove("chat-message-appear"));
|
|
|
|
document.getElementById("chat").innerHTML += chat_message_assistant_loading_dots;
|
|
|
|
setTimeout(() => {
|
|
// Scroll to Last Message
|
|
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
|
|
}, 5);
|
|
}, 2000);
|
|
|
|
gcp_fetch(
|
|
make_url +
|
|
`?ConversationID=${encodeURI(conversation_id)}&AssistantKey=${encodeURI(new_assistant_key)}&TOV_Key=${encodeURI(
|
|
new_tov_key
|
|
)}&Message=${encodeURI(message)}`
|
|
)
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
if (sending_message && res?.conversation_id) {
|
|
conversation_id = res?.conversation_id;
|
|
|
|
if (conversations.findIndex((e) => e.id === res?.conversation_id) === -1 && res?.conversation_title) {
|
|
conversations = [
|
|
{ id: res?.conversation_id, title: res?.conversation_title, assistant_key: new_assistant_key, tov_key: new_tov_key },
|
|
].concat(conversations);
|
|
|
|
document.getElementById("conversations-list").innerHTML = conversations
|
|
?.map((conversation) => {
|
|
if (conversation?.id === res?.conversation_id)
|
|
return conversations_list_item_active
|
|
?.replaceAll("{CONVERSATION_ID}", conversation?.id)
|
|
?.replaceAll("{CONVERSATION_TITLE}", processConversationTitle(conversation?.title));
|
|
return conversations_list_item
|
|
?.replaceAll("{CONVERSATION_ID}", conversation?.id)
|
|
?.replaceAll("{CONVERSATION_TITLE}", processConversationTitle(conversation?.title));
|
|
})
|
|
?.join("");
|
|
}
|
|
}
|
|
|
|
sending_message = false;
|
|
Array.from(document.getElementsByClassName("chat-message-appear"))?.map((el) => el.classList.remove("chat-message-appear"));
|
|
Array.from(document.getElementsByClassName("chat-message-loading-dots"))?.map((el) => el.remove());
|
|
//document.getElementById("chat").innerHTML += chat_message_assistant_new.replaceAll("{CONTENT}", md_converter?.makeHtml(res?.message));
|
|
document.getElementById("chat").innerHTML += chat_message_assistant_new.replaceAll("{CONTENT}", res?.message);
|
|
// Scroll to Last Message
|
|
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
|
|
});
|
|
};
|
|
|
|
const toggleAssistantsDropdown = () => {
|
|
if (conversation_id !== false || sending_message) return false;
|
|
|
|
if (Array.from(document.getElementById("assistants-list").classList).includes("assistants-list-hidden")) {
|
|
document.getElementById("assistant-name-container").classList.add("assistant-name-container-active");
|
|
document.getElementById("assistants-list").classList.remove("assistants-list-hidden");
|
|
} else {
|
|
document.getElementById("assistant-name-container").classList.remove("assistant-name-container-active");
|
|
document.getElementById("assistants-list").classList.add("assistants-list-hidden");
|
|
}
|
|
};
|
|
|
|
const selectAssistant = (new_assistant_key) => {
|
|
if (conversation_id !== false || sending_message) return false;
|
|
|
|
const assistant = assistants?.find((e) => e.key === new_assistant_key);
|
|
if (!assistant) return false;
|
|
|
|
assistant_key = new_assistant_key;
|
|
|
|
document.getElementById("assistant-name").innerHTML = assistants.find((e) => e.key === new_assistant_key)?.name;
|
|
document.getElementById("assistant-name-container").classList.remove("assistant-name-container-active");
|
|
document.getElementById("assistant-name").classList.remove("assistant-name-placeholder");
|
|
document.getElementById("assistants-list").classList.add("assistants-list-hidden");
|
|
|
|
document.getElementById("chat").innerHTML = ``;
|
|
setTimeout(() => {
|
|
if (JSON.stringify(assistant_key) === JSON.stringify(new_assistant_key)) {
|
|
document.getElementById("chat").innerHTML = chat_message_assistant_new.replaceAll("{CONTENT}", assistant?.initial_message);
|
|
}
|
|
}, 500);
|
|
};
|
|
|
|
const toggleTOVsDropdown = () => {
|
|
if (conversation_id !== false || sending_message) return false;
|
|
|
|
if (Array.from(document.getElementById("tov-list").classList).includes("tov-list-hidden")) {
|
|
document.getElementById("tov-name-container").classList.add("tov-name-container-active");
|
|
document.getElementById("tov-list").classList.remove("tov-list-hidden");
|
|
} else {
|
|
document.getElementById("tov-name-container").classList.remove("tov-name-container-active");
|
|
document.getElementById("tov-list").classList.add("tov-list-hidden");
|
|
}
|
|
};
|
|
|
|
const selectTOV = (new_tov_key) => {
|
|
if (conversation_id !== false || sending_message) return false;
|
|
|
|
const tov = tone_of_voices?.find((e) => e.key === new_tov_key);
|
|
if (!tov) return false;
|
|
|
|
tov_key = new_tov_key;
|
|
|
|
document.getElementById("tov-name").innerHTML = tone_of_voices.find((e) => e.key === new_tov_key)?.name;
|
|
document.getElementById("tov-name-container").classList.remove("tov-name-container-active");
|
|
document.getElementById("tov-name").classList.remove("tov-name-placeholder");
|
|
document.getElementById("tov-list").classList.add("tov-list-hidden");
|
|
};
|
|
|
|
const onAuthenticated = () => {
|
|
goToCreateNewConversationsPage();
|
|
getConversations();
|
|
getAssistants();
|
|
getTOVs();
|
|
};
|