Implement the disabled state:

* Suppress input (including paste) while the input is disabled.
* Style the input to make it visible that it's not accepting input.

2 files changed, 20 insertions, 4 deletions

diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 71b7b8f..848321d 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -3,8 +3,6 @@
 
   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) {
@@ -19,21 +17,35 @@
   }
 
   function onkeydown(event) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+
     let modifier = event.shiftKey || event.altKey || event.ctrlKey || event.metaKey;
     if (!modifier && event.key === 'Enter') {
       event.preventDefault();
       form?.requestSubmit?.();
     }
   }
+
+  function onpaste(event) {
+    if (disabled) {
+      event.preventDefault();
+    }
+  }
 </script>
 
 <form {onsubmit} bind:this={form}>
   <div
     contenteditable="plaintext-only"
-    class="textarea"
+    class={{
+      textarea: true,
+      disabled
+    }}
     bind:innerText={value}
     {onkeydown}
-    {disabled}
+    {onpaste}
     placeholder="Say something..."
   ></div>
   <button type="submit">&raquo;</button>
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index 59dda30..907f1bf 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -26,3 +26,7 @@ form.form > button {
 [contenteditable]:empty {
   color: var(--light-text);
 }
+
+.disabled {
+  color: var(--light-text);
+}