[feat]: Made input resizable + newline support (#359)

block · Nov 27, 2024 · a726cb3 · a726cb3
1 parent 80a14ce
commit a726cb3
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 13 deletions.
diff --git a/ui/desktop/src/components/Input.tsx b/ui/desktop/src/components/Input.tsx
@@ -1,27 +1,70 @@
-import React from 'react';
-import { Button } from './ui/button'
-import Send from './ui/Send'
+import React, { useRef, useState, useEffect } from 'react';
+import { Button } from './ui/button';
+import Send from './ui/Send';
 
 interface InputProps {
   handleSubmit: (e: React.FormEvent) => void;
-  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   input: string;
   disabled?: boolean;
 }
 
 export default function Input({ handleSubmit, handleInputChange, input, disabled = false }: InputProps) {
+  const [value, setValue] = useState(input);
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  const useAutosizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: string) => {
+    useEffect(() => {
+      if (textAreaRef) {
+        textAreaRef.style.height = "0px"; // Reset height
+        const scrollHeight = textAreaRef.scrollHeight;
+        textAreaRef.style.height = Math.min(scrollHeight, maxHeight) + "px";
+      }
+    }, [textAreaRef, value]);
+  };
+
+  const minHeight = "1rem";
+  const maxHeight = 10 * 24;
+
+  useAutosizeTextArea(textAreaRef.current, value);
+
+  const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = evt.target?.value;
+    setValue(val);
+    handleInputChange(evt);
+  };
+
+  const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (evt.key === 'Enter' && !evt.shiftKey) {
+      evt.preventDefault();
+      handleSubmit(new CustomEvent('submit', { detail: { value } })); // Trigger custom form submit
+      setValue(''); // Clear textarea
+    }
+  };
+
   return (
-    <form onSubmit={handleSubmit} className="flex relative bg-white h-[57px] px-[16px] rounded-b-2xl">
-      <input 
-        type="text" 
+    <form onSubmit={(e) => {
+      handleSubmit(e);
+      setValue('');
+    }} className="flex relative bg-white h-auto px-[16px] pr-[38px] py-[1rem] rounded-b-2xl">
+      <textarea
+        id="dynamic-textarea"
         placeholder="What should goose do?"
-        value={input}
-        onChange={handleInputChange}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
         disabled={disabled}
-        className={`w-full outline-none border-none focus:ring-0 bg-transparent p-0 text-14 ${
+        ref={textAreaRef}
+        rows={1}
+        style={{
+          minHeight: `${minHeight}px`,
+          maxHeight: `${maxHeight}px`,
+          overflowY: 'auto'
+        }}
+        className={`w-full outline-none border-none focus:ring-0 bg-transparent p-0 text-14 resize-none ${
           disabled ? 'cursor-not-allowed opacity-50' : ''
         }`}
-      />  
+      />
       <Button
         type="submit"
         size="icon"
@@ -35,4 +78,4 @@ export default function Input({ handleSubmit, handleInputChange, input, disabled
       </Button>
     </form>
   );
-}
+}
diff --git a/ui/desktop/src/components/UserMessage.tsx b/ui/desktop/src/components/UserMessage.tsx
@@ -11,7 +11,7 @@ export default function UserMessage({ message }) {
     <div className="flex justify-end mb-[16px]">
       <div className="flex-col">
         <div className="flex bg-user-bubble text-white rounded-2xl p-4">
-          <ReactMarkdown>{message.content}</ReactMarkdown>
+          <ReactMarkdown className="whitespace-pre-wrap">{message.content}</ReactMarkdown>
         </div>
         {urls.length > 0 && (
           <div className="flex mt-2">