fix: input resize bug (#472)

* fix: input resize bug
* fix: add placeholder text

src/leapfrogai_ui/src/lib/components/LFTextArea.svelte

@@ -83,7 +83,6 @@ The invalid prop can still be passed to this component to validate for other con
   let lengthInvalidText = 'Character limit reached';
   $: limitReached = $value.length === Number(env.PUBLIC_MESSAGE_LENGTH_LIMIT);
 
-  let inputHeight = '';
   function resizeTextArea() {
     if (ref) {
       ref.style.height = '1px';
@@ -92,8 +91,6 @@ The invalid prop can still be passed to this component to validate for other con
   }
 
   onMount(() => {
-    const style = getComputedStyle(document.documentElement);
-    inputHeight = style.getPropertyValue('--message-input-height').trim();
     resizeTextArea();
   });
 </script>
@@ -145,9 +142,9 @@ The invalid prop can still be passed to this component to validate for other con
       style="--maxRows:{maxRows};"
       maxlength={maxCount + 1 ?? undefined}
       {...$$restProps}
-      on:change
-      on:input={resizeTextArea}
+      on:keyup={resizeTextArea}
       on:keydown={(e) => {
+        resizeTextArea();
         // Allow user to type up to maxCount, but only show error once trying to add more
         // characters after hitting this limit
 
@@ -169,12 +166,11 @@ The invalid prop can still be passed to this component to validate for other con
           showLengthError = true; // throw error
         } else {
           if (e.key === 'Enter' && !e.shiftKey && ref) {
-            ref.style.height = inputHeight; // reset input size if there were multiple lines
+            resizeTextArea();
             onSubmit(e);
           }
         }
       }}
-      on:keyup
       on:focus
       on:blur
       on:paste

src/leapfrogai_ui/src/routes/(dashboard)/chat/[[conversation_id]]/+page.svelte

@@ -175,6 +175,7 @@
         value={input}
         {onSubmit}
         ariaLabel="message input"
+        placeholder="Type your message here..."
         bind:showLengthError={lengthInvalid}
       />