static/js/chatbot.js

updateValue = function(id, value) {
	document.getElementById(id).innerText = value;
}

htmlToElement = function(html) {
	let template = document.createElement('template');
	html = html.trim(); // Never return a text node of whitespace as the result
	template.innerHTML = html;
	return template.content;
}

let websocket = null;
let currentPersonaID = null;
let persona_ids = {};

pageSetup = function() {
	// const users = document.querySelector('.users');
	const userInput = document.querySelector('.user-input');
	const userInputButton = document.querySelector('.user-input-button');
	const serverMessageValue = document.querySelector('.server-message-value');
	const messages = document.getElementById('chat-messages');
	const friends = document.getElementById('friends');
	websocket = new WebSocket("wss://gpt2-chat.ai-research.id/");
	//websocket = new WebSocket("ws://localhost:8502/");
	let persona_list;

	let getParameters = function() {
		return {
			"do_sample": document.getElementById("doSample").checked,
			"min_length": parseInt(document.getElementById("minLength").value),
			"max_length": parseInt(document.getElementById("maxLength").value),
			"temperature": parseFloat(document.getElementById("temperature").value),
			"top_k": parseInt(document.getElementById("topK").value),
			"top_p": parseFloat(document.getElementById("topP").value),
		};
	}

	let createMessage = function (message, image, bot) {
		let message_template = "";
		if(bot) {
			message_template += '<div class="message">';
			message_template += '  <img alt="" src="' + image + '" />';
		}
		else {
			message_template += '<div class="message right">';
			message_template += '  <img alt="" src="https://static.ai-research.id/images/generated_photos_m_001.jpg" />';
		}
		message_template += '  <div class="bubble">' + message;
		message_template += '    <div class="corner"></div>';
		message_template += '  </div>';
		message_template += '</div>';
		return message_template;
	}

	let createFriends = function (persona_list) {
		html_template = '';
		for (let i=0; i<persona_list.length;  i++) {
			html_template += '<div class="friend">';
			html_template += '  <img alt="" src="' + persona_list[i]["image"] + '" />';
			html_template += '  <p>';
			html_template += '    <strong>' + persona_list[i]["name"] + '</strong>';
			html_template += '    <span>' + persona_list[i]["email"]+ '</span>';
			html_template += '    <span class="persona_id">' + persona_list[i]["id"]+ '</span>';
			html_template += '  </p>';
			html_template += '  <div class="status available"></div>';
			html_template += '</div>';
		}
		return html_template;
	}

	let hoverMesssagePhoto = function (persona_id) {
		let id = '#chat_message_' + persona_id;
		let message_photo = $(id + ' .message:last-child img');
		message_photo.hover(function () {
			let profile_photo_zoom = $('#photo-block img');
			profile_photo_zoom[0].src = message_photo[0].src;
			$('#photo-block').fadeIn();
		}, function () {
			$('#photo-block').fadeOut(800);
		})
	}

	let processUserInput = function (userInput) {
		let parameters = getParameters();
		parameters["action"] = "talk";
		parameters["persona_id"] = currentPersonaID;
		parameters["utterance"] = userInput.value;
		websocket.send(JSON.stringify(parameters));
		let message = createMessage(userInput.value, persona_ids[currentPersonaID]["image"], false);
		const element = htmlToElement(message).firstChild;
		userInput.value = "";
		let chat_message = $('#chat_message_' + currentPersonaID)[0];
		chat_message.appendChild(element);
		const margin_top = element.childNodes[3].offsetHeight - 25;
		element.childNodes[1].style = "margin-top:" + margin_top + "px";
		chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
		hoverMesssagePhoto(currentPersonaID);
	}

	userInputButton.onclick = function () {
		processUserInput(userInput);
	}

	userInput.addEventListener("keyup", function(event) {
		if (event.keyCode === 13) {
			// Cancel the default action, if needed
			event.preventDefault();
			processUserInput(userInput);
		}
	});

	websocket.onmessage = function (event) {
		let data = JSON.parse(event.data);
		switch (data.type) {
			case 'connection':
				console.log(data.value)
				websocket.send(JSON.stringify({action: 'dialog', personality: []}));
				break;
			case 'state':
				console.log("stat: " + data.value)
				break;
			case 'users':
				serverMessageValue.textContent = (
					data.count.toString() + " user" +
					(data.count === 1 ? "" : "s") + " online");
				break;
			case 'dialog':
				console.log(data.message)
				break;
			case 'talk':
			case 'persona_greeting':
				let message = createMessage(data.message, persona_ids[currentPersonaID]["image"], true);
				const element = htmlToElement(message).firstChild;
				let chat_message = $('#chat_message_' + currentPersonaID)[0];
				chat_message.appendChild(element);
				margin_top = element.childNodes[3].offsetHeight - 25;
				element.childNodes[1].style = "margin-top:" + margin_top + "px";
				chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
				hoverMesssagePhoto(currentPersonaID);
				break;
			case 'personality':
				const elements = document.querySelectorAll(".bot-personality input")
				for (let i = 0; i < Math.min(elements.length, data.message.length); i++) {
					elements[i].value = data.message[i];
				}
				break;
			case 'persona_list':
				persona_list = data.message;
				for(i=0; i<persona_list.length; i++) {
					persona_ids[persona_list[i]["id"]] = persona_list[i];
				}
				html_template = createFriends(persona_list);
				friends.appendChild(htmlToElement(html_template));
				document_ready();
				break;
			case 'personality_reply':
				serverMessageValue.textContent = data.message
				setTimeout(function() {
					websocket.send(JSON.stringify({action: 'get_users'}));
				}, 3000);
				break;
			default:
				console.error(
					"unsupported event", data);
		}
	};
}

let document_ready = function () {
	$("#searchfield").focus(function(){
		if($(this).val() == "Search contacts..."){
			$(this).val("");
		}
	});
	$("#searchfield").focusout(function(){
		if($(this).val() == ""){
			$(this).val("Search contacts...");

		}
	});

	$("#sendmessage input").focus(function(){
		if($(this).val() == "Send message..."){
			$(this).val("");
		}
	});
	$("#sendmessage input").focusout(function(){
		if($(this).val() == ""){
			$(this).val("Send message...");

		}
	});
	$("#searchfield").keyup(function(){
		if($(this).val() === ""){
			$('.friend').each(function(index){
				$( this ).fadeIn();
			})
		}
		else {
			const searchtext = $(this).val().toLowerCase();
			$('.friend strong').each(function(index){
				console.log(index + ": " + $( this ).parent().parent().text());
				if($(this).text().toLowerCase().search(searchtext) !== -1)
					$( this ).parent().parent().fadeIn();
				else
					$( this ).parent().parent().fadeOut();
			})
		}
	});

	$(".friend").each(function(){
		$(this).click(function(){
			let childOffset = $(this).offset();
			let parentOffset = $(this).parent().parent().offset();
			let childTop = childOffset.top - parentOffset.top;
			let clone = $(this).find('img').eq(0).clone();
			let top = childTop+12+"px";
			currentPersonaID = this.children[1].children[2].innerHTML;

			let chat_message = $('#chat_message_' + currentPersonaID);
			if(chat_message.length === 0) {
				html_template = '<div id="' + 'chat_message_' + currentPersonaID + '" class="chat_messages"></div>';
				$('#chat-block').children().first().append(html_template)
				chat_message = $('#chat_message_' + currentPersonaID);
				websocket.send(JSON.stringify({action: 'persona_chosen', persona_id: currentPersonaID}));
			}
			else {
				chat_message.show(400, function () {
					chat_message[0].scrollIntoView({behavior: "auto", block: "end", inline: "nearest"});
				});
			}

			$(clone).css({'top': top}).addClass("floatingImg").appendTo("#chatbox");

			setTimeout(function(){$("#profile p").addClass("animate");$("#profile").addClass("animate");}, 100);
			setTimeout(function(){
				chat_message.addClass("animate");
				$('.cx, .cy').addClass('s1');
				setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
				setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
			}, 150);

			let profile_photo = $('.floatingImg');
			profile_photo.animate({
				'width': "68px",
				'left':'15px',
				'top':'20px'
			}, 200);

			profile_photo.hover(function () {
				var profile_photo_zoom = $('#photo-block img');
				console.log(profile_photo_zoom);
				profile_photo_zoom[0].src = profile_photo[0].src;
				$('#photo-block').fadeIn();
			}, function () {
				$('#photo-block').fadeOut(800);
			});

			var name = $(this).find("p strong").html();
			var email = $(this).find("p span").html();
			$("#profile p").html(name);
			$("#profile span").html(email);

			$(".message").not(".right").find("img").attr("src", $(clone).attr("src"));
			$('#friendslist').fadeOut();
			$('#chat-block').show();
			$('#config-block').hide();
			$('#chatview').fadeIn();


			$('#close').unbind("click").click(function(){
				chat_message.removeClass("animate");
				chat_message.hide();
				$("#profile, #profile p").removeClass("animate");
				$('.cx, .cy').removeClass("s1 s2 s3");
				$('.floatingImg').animate({
					'width': "40px",
					'top':top,
					'left': '12px'
				}, 200, function(){$('.floatingImg').remove()});

				setTimeout(function(){
					$('#chatview').fadeOut();
					$('#friendslist').fadeIn();
				}, 50);
			});

			personalities = ["", "", "", "", ""];

			$('#personalities').unbind("click").click(function(){
				personality_input = document.querySelectorAll(".bot-personality input")
				for (let i = 0; i < Math.min(personality_input.length, persona_ids[currentPersonaID]["personality"].length); i++) {
					personality_input[i].value = persona_ids[currentPersonaID]["personality"][i+3];
				}
				setTimeout(function(){
					$('#server_view').fadeOut(400, function () {
						$('#server_view').fadeIn();
					});
					$('#parameters_view').fadeOut(400, function (){
						$('#about_view').fadeOut(400, function () {
							$('#personalities_view').fadeIn();
						});
					});
					$('#about_view').fadeOut(400);
					$('#chat-block').fadeOut(400, function (){
						$('#config-block').fadeIn();
					});

				}, 50);
				const elements = document.querySelectorAll(".bot-personality input")
				for (let i = 0; i < Math.min(elements.length, 5); i++) {
					personalities[i] = elements[i].value;
				}
			});

			$('#personalities_cancel').unbind("click").click(function(){
				const elements = document.querySelectorAll(".bot-personality input")
				for (let i = 0; i < Math.min(elements.length, 5); i++) {
					elements[i].value = personalities[i];
				}
				setTimeout(function(){
					$('#config-block').fadeOut(400, function (){
						$('#chat-block').fadeIn();
					});
				}, 50);
			});

			$('#personalities_update').unbind("click").click(function(){
				const elements = document.querySelectorAll(".bot-personality input")
				let data = {
					"action": "personality",
					"persona_id": currentPersonaID,
					"message": []
				}
				// persona_ids[currentPersonaID]["personality"]
				for (let i = 0; i < Math.min(elements.length, 5); i++) {
					if(elements[i].value.length >0)
						persona_ids[currentPersonaID]["personality"][i+3] = elements[i].value;
						data.message.push(elements[i].value);
				}
				websocket.send(JSON.stringify(data));
				setTimeout(function(){
					$('#config-block').fadeOut(400, function (){
						$('#chat-block').fadeIn();
					});
				}, 500);
			});

			$('#parameters').unbind("click").click(function(){
				setTimeout(function(){
					$('#server_view').fadeOut(400, function () {
						$('#server_view').fadeIn();
					});
					$('#personalities_view').fadeOut(400, function (){
						$('#about_view').fadeOut(400, function () {
							$('#parameters_view').fadeIn();
						});
					});
					$('#chat-block').fadeOut(400, function () {
						$('#config-block').fadeIn();
					});
				}, 50);
			});

			$('#parameters_ok').unbind("click").click(function(){
				setTimeout(function(){
					$('#config-block').fadeOut(400, function (){
						$('#chat-block').fadeIn();
					});

				}, 50);
			});

			$('#about').unbind("click").click(function(){
				setTimeout(function(){
					$('#server_view').fadeOut(400, function () {
						$('#server_view').fadeIn();
					});
					$('#personalities_view').fadeOut(400, function (){
						$('#parameters_view').fadeOut(400, function (){
							$('#about_view').fadeIn();
						});
					});
					$('#chat-block').fadeOut(400, function () {
						$('#config-block').fadeIn();
					});
				}, 50);
			});

			$('#about_close').unbind("click").click(function(){
				setTimeout(function(){
					$('#config-block').fadeOut(400, function (){
						$('#chat-block').fadeIn();
					});

				}, 50);
			});

		});
	});

	// $("#friends")[0].firstElementChild.click()
};