init: initial commit

src/lib/Input.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+ import { tick } from "svelte"
+ import { send } from "./chat";
+
+ let input = "";
+ async function keydown(e: KeyboardEvent) {
+     if(e.key === "Enter") {
+	 send(input);
+	 e.preventDefault();
+	 await tick();
+	 input = "";
+     }
+ }
+</script>
+
+<div class="container">
+    <textarea bind:value="{input}" on:keydown={keydown} class="input" />
+</div>
+
+<style>
+ .container {
+     height: calc(2 * var(--message-line-height));
+     display: flex;
+     padding: 16px;
+     padding-top: 0;
+     margin-top: -12px;
+     z-index: 100;
+     position: relative
+ }
+
+ .container::before, .container::after {
+     content: "";
+     z-index: 99;
+     background: linear-gradient(180deg, rgba(var(--base-800-rgb),0) 0%, rgb(var(--base-800-rgb)) 75%);
+     width: 24px;
+     position: absolute;
+     height: 16px;
+ }
+
+ .container::before { left: 0;  }
+ .container::after  { right: 0; }
+
+ .input {
+     flex-grow: 1;
+     resize: none;
+     border-radius: 16px;
+     border: none;
+     z-index: 100;
+     padding: 8px;
+     background: var(--base-700);
+     color: var(--base-300);
+ }
+
+ .input:focus {
+     outline: none;
+ }
+</style>