Restore the placeholder when the editable input is emptied out after modification.

This also avoids using `placeholder` on elements where it's nonstandard, like `<div>`s.

1 files changed, 11 insertions, 1 deletions

diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index b230939..cdb855e 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -4,6 +4,16 @@
   let value = $state('');
   let disabled = $state(false);
 
+  // Entering and removing text from the input area leaves a stray line break behind. This effect
+  // looks for that scenario and removes it, restoring the "empty" state (and bringing the
+  // placeholder back again in the process).
+  $effect(() => {
+    const trimmed = value.trim();
+    if (trimmed !== value && trimmed === '') {
+      value = trimmed;
+    }
+  });
+
   async function onsubmit(event) {
     event.preventDefault();
     disabled = true;
@@ -48,7 +58,7 @@
     bind:innerText={value}
     {onkeydown}
     {onpaste}
-    placeholder="Say something..."
+    data-placeholder="Say something..."
   ></div>
   <button type="submit">&raquo;</button>
 </form>