Fix up input to be a contenteditable div

1 files changed, 14 insertions, 4 deletions

diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 69a8298..1f4ba99 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,7 +1,10 @@
 <script>
   let { sendMessage = async (message) => {} } = $props();
 
+  let form = $state(null);
   let value = $state('');
+  // This doesn't seem to work with a contenteditable two-way bound svelte
+  // thing:
   let disabled = $state(false);
 
   async function onsubmit(event) {
@@ -9,7 +12,7 @@
     disabled = true;
     try {
       await sendMessage(value);
-      event.target.reset();
+      value = '';
     } finally {
       disabled = false;
     }
@@ -19,12 +22,19 @@
     let modifier = event.shiftKey || event.altKey || event.ctrlKey || event.metaKey;
     if (!modifier && event.key === 'Enter') {
       event.preventDefault();
-      event.target.form.requestSubmit();
+      form?.requestSubmit?.();
     }
   }
 </script>
 
-<form {onsubmit}>
-  <textarea {onkeydown} bind:value {disabled} placeholder="Say something..."></textarea>
+<form {onsubmit} bind:this={form}>
+  <div
+    contenteditable="plaintext-only"
+    class="textarea"
+    bind:textContent={value}
+    {onkeydown}
+    {disabled}
+    placeholder="Say something..."
+  ></div>
   <button type="submit">&raquo;</button>
 </form>