---
title: CLI
tags:
	- ui
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_cli" %}

{% extends "hippie/_app_frame.njk" %}

{% block body %}
	<div id="cli">
		<div id="history">
			<pre>Previous prompt</pre>
		</div>
		<div id="line">
			<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
			<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
		</div>
	</div>
{% endblock %}

{%- block script %}
	{{ super() }}
	<script>
		function resizeTextArea(textarea) {
			const {style, value} = textarea;

			style.height = style.minHeight = 'auto';
			style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
			style.height = `${textarea.scrollHeight}px`;
		}

		const textarea = document.getElementById('prompt');

		document
			.body
			.addEventListener('click', () => {
				textarea.focus();
			});

		textarea.addEventListener('input', () => {
			resizeTextArea(textarea);
		});

		window.addEventListener("keydown", (event) => {
			if (event.key === 'Enter' && !event.shiftKey) {
				event.preventDefault();

				const p = document.createElement("pre");

				p.textContent = event.target.value;
				document
					.getElementById("history")
					.appendChild(p);
				// window.scrollTo(0, document.body.scrollHeight);

				event.target.value = '';
			}
		});
	</script>
{% endblock %}