feat: [#232] Added a bigger UI for Goal input (#242)

* feat(#232): added a bigger textarea input for Goal.

* fix: added a padding top for goal input on mobile.

* feat: added shift+enter should to create new line.

* fix: disabled resizing goal input.

src/components/Input.tsx

@@ -8,15 +8,15 @@ import type { toolTipProperties } from "./types";
 interface InputProps {
   left?: React.ReactNode;
   value: string | number;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
   placeholder?: string;
   disabled?: boolean;
   setValue?: (value: string) => void;
   type?: string;
   attributes?: { [key: string]: string | number | string[] }; // attributes specific to input type
   toolTipProperties?: toolTipProperties;
   inputRef?: React.RefObject<HTMLInputElement>;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
 }
 
 const Input = (props: InputProps) => {
@@ -41,6 +41,10 @@ const Input = (props: InputProps) => {
     return type === "range";
   };
 
+  const isTypeTextArea = () => {
+    return type === "textarea";
+  };
+
   let inputElement;
   const options = attributes?.options;
 
@@ -58,6 +62,22 @@ const Input = (props: InputProps) => {
         onChange={setValue}
       />
     );
+  } else if (isTypeTextArea()) {
+    inputElement = (
+      <textarea
+        className={clsx(
+          "border:black delay-50 w-full resize-none h-20 rounded-xl bg-[#3a3a3a] text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] py-3 md:text-lg border-[2px] border-white/10 px-2",
+          disabled && " cursor-not-allowed hover:border-white/10",
+          left && "md:rounded-l-none"
+        )}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={onKeyDown}
+        {...attributes}
+      />
+    );
   } else {
     inputElement = (
       <input

src/components/Label.tsx

@@ -9,13 +9,18 @@ interface LabelProps {
 }
 
 const Label = ({ type, left, toolTipProperties }: LabelProps) => {
+  const isTypeTextArea = () => {
+    return type === "textarea";
+  };
+
   return (
     <Tooltip
       child={
         <div
           className={`center flex items-center rounded-xl rounded-r-none ${
             type !== "range" ? "border-r-0 border-white/10 md:border-[2px]" : ""
-          }  py-2 text-sm font-semibold tracking-wider transition-all sm:py-3 md:pl-3 md:text-lg`}
+          }  py-2 text-sm font-semibold tracking-wider transition-all sm:py-3 md:pl-3 md:text-lg 
+          ${isTypeTextArea() && 'md:h-20'}`}
         >
           {left}
         </div>

src/pages/index.tsx

@@ -88,9 +88,12 @@ const Home: NextPage = () => {
     agent.run().then(console.log).catch(console.error);
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && !disableDeployAgent) {
-      handleNewGoal()
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter'&& !disableDeployAgent) {
+      if (!e.shiftKey) {
+        // Only Enter is pressed, execute the function
+        handleNewGoal();
+      }
     }
   }
 
@@ -222,6 +225,7 @@ const Home: NextPage = () => {
                   onChange={(e) => setGoalInput(e.target.value)}
                   onKeyDown={(e) => handleKeyPress(e)}
                   placeholder="Make the world a better place."
+                  type='textarea'
                 />
               </Expand>
             </div>