<div class="msg-form">
	<div class="msg-input">
		<textarea id="msg-area" rows="1" class="msg-area" placeholder="Введіть повідомлення"></textarea>
	</div>
	<div class="msg-send-btn-wrap">
		<button class="msg-send">
			<svg class="kb-icon" width="24" height="24">
				<use href="#kb-send"></use>
			</svg>
		</button>
	</div>
</div>	

<script>
	let textarea = document.querySelector("#msg-area");
	textarea.addEventListener('input', e => {
		textarea.style.height = 'auto';
		if(!textarea.value) {
			textarea.style.height = "20px";
		} else {
			textarea.style.height = textarea.scrollHeight + 'px';
		}
	});

	textarea.addEventListener('focus', e => {
		e.currentTarget.parentNode.parentNode.classList.add("focused");
	});

	textarea.addEventListener('blur', e => {
		e.currentTarget.parentNode.parentNode.classList.remove("focused");
	});

	textarea.addEventListener('input', e => {
		if(e.currentTarget.value.length) {
			e.currentTarget.parentNode.parentNode.classList.add("ready-to-send");
		} else {
			e.currentTarget.parentNode.parentNode.classList.remove("ready-to-send");
		}
	});

	textarea.addEventListener("keydown", e => {
		if (e.key === "Enter" && !e.shiftKey) {
			e.preventDefault();
			document.querySelector(".msg-send").click();
		}
	});

	document.querySelector(".msg-send").addEventListener("click", e => {
		let msgtext = textarea.value;
		if(!msgtext.length) {
			return;
		}

		if(!document.querySelector(".msg-form").classList.contains("ready-to-send")) {
			return;
		}

		textarea.value = "";
		textarea.innerHTML = "";
		textarea.style.height = "20px";
		

		const chat = document.querySelector(".chat-container");
		chat.appendChild(createRenderBubble("user", true, msgtext).message);
		scrollMsgsContainerDown();


		const msgid = makeAssistantMsg();

		sendMessages(
			msgid,
			prepareUserMessage(msgtext), 
			function(resp, msgid){
				if(resp["status"] != "done") {
					return;
				}

				let specialViewContent = getSpecialViewFromMsg(resp["content"]);
				let content = marked.parse(resp["content"].split("front_special_view")[0]).trim();
				updateMsgContent(msgid, content);
				if(specialViewContent) {
					document.querySelector(".chat-container").appendChild(specialViewContent);
					scrollMsgsContainerDown();
					updateMsgHistory();
				}
			}
		);
	});

	function makeAssistantMsg() {
		const msg = createRenderBubble("assistant", true, "");

		const chat = document.querySelector(".chat-container");
		chat.appendChild(msg.message);
		scrollMsgsContainerDown();

		updateMsgHistory();

		return msg.id;
	}

	function scrollMsgsContainerDown() {
		const container = document.querySelector(".chat-container");
		container.scrollTo({
			top: container.scrollHeight,
			behavior: 'smooth'
		});
	}
</script>