Dynamic chat input height

apps/browser/components/Chat.tsx

@@ -14,19 +14,19 @@ import Disclaimer from "@/components/modals/Disclaimer";
 import Logo from "@/components/Logo";
 import Button from "@/components/Button";
 import ChatInputButton from "@/components/ChatInputButton";
-import TextField from "@/components/TextField";
 import React, { useState, ChangeEvent } from "react";
 import { UploadSimple } from "@phosphor-icons/react";
 import { useAtom } from "jotai";
 import clsx from "clsx";
 import { InMemoryFile } from "@nerfzael/memory-fs";
+import TextAreaField from "./inputs/TextAreaField";
 
 export interface ChatLog {
   title: string;
   content?: string;
   user: string;
   color?: string;
-  created_at?: string
+  created_at?: string;
 }
 
 export interface ChatProps {
@@ -44,21 +44,22 @@ const Chat: React.FC<ChatProps> = ({
   isRunning,
   onGoalSubmit,
   onUpload,
-  status
+  status,
 }: ChatProps) => {
   const [{ id: chatId, name: chatName }] = useAtom(chatInfoAtom);
   const [showDisclaimer, setShowDisclaimer] = useAtom(showDisclaimerAtom);
   const [, setError] = useAtom(errorAtom);
   const [welcomeModalOpen, setWelcomeModalOpen] = useAtom(welcomeModalAtom);
   const [signInModalOpen] = useAtom(signInModalAtom);
-  const [settingsModalOpen] = useAtom(settingsModalAtom)
+  const [settingsModalOpen] = useAtom(settingsModalAtom);
 
   const [message, setMessage] = useState<string>("");
 
   const { getInputProps, open } = useWorkspaceUploadDrop(onUpload);
   const firstTimeUser = useFirstTimeUser();
 
-  const shouldShowExamplePrompts = !chatId || (!logs.length && !isStarting && !isRunning);
+  const shouldShowExamplePrompts =
+    !chatId || (!logs.length && !isStarting && !isRunning);
 
   const handleGoalSubmit = async (goal: string): Promise<void> => {
     if (firstTimeUser) {
@@ -79,7 +80,7 @@ const Chat: React.FC<ChatProps> = ({
       return;
     }
     open();
-  }
+  };
 
   return (
     <main
@@ -90,7 +91,12 @@ const Chat: React.FC<ChatProps> = ({
       {shouldShowExamplePrompts ? (
         <Logo wordmark={false} className="mb-16 w-16" />
       ) : (
-        <ChatLogs status={status}  chatName={chatName ?? "New Session"} isRunning={isStarting || isRunning} logs={logs} />
+        <ChatLogs
+          status={status}
+          chatName={chatName ?? "New Session"}
+          isRunning={isStarting || isRunning}
+          logs={logs}
+        />
       )}
 
       <div
@@ -102,32 +108,37 @@ const Chat: React.FC<ChatProps> = ({
         )}
       >
         {shouldShowExamplePrompts && (
-          <ExamplePrompts
-            onClick={handleGoalSubmit}
-          />
+          <ExamplePrompts onClick={handleGoalSubmit} />
         )}
         <div
           className={clsx(
             "mb-4 flex w-full items-center justify-center gap-4 self-center",
             shouldShowExamplePrompts ? "max-w-[42rem] " : "max-w-[56rem]"
           )}
         >
-          <TextField
-            type="text"
+          <TextAreaField
+            rows={1}
             value={message}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              setMessage(event.target.value)
+            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+              setMessage(event.target.value);
             }}
             onKeyDown={(event: React.KeyboardEvent) => {
-              if (event.key === "Enter" && !isStarting && !isRunning) {
-                return handleGoalSubmit(message);
+              if (!event.shiftKey && event.key === "Enter") {
+                event.preventDefault();
+                if (!isStarting && !isRunning) {
+                  return handleGoalSubmit(message);
+                }
               }
             }}
             placeholder="Ask Evo anything..."
-            className="!rounded-lg !p-4 !pl-12"
+            className="max-h-[200px] resize-none !rounded-lg !p-4 !pl-12"
             leftAdornment={
               <>
-                <Button variant="icon" className="!text-white" onClick={onUploadOpen}>
+                <Button
+                  variant="icon"
+                  className="!text-white"
+                  onClick={onUploadOpen}
+                >
                   <UploadSimple size={20} />
                 </Button>
                 <input {...getInputProps()} />
@@ -146,7 +157,12 @@ const Chat: React.FC<ChatProps> = ({
         </div>
       </div>
       <Disclaimer
-        isOpen={showDisclaimer && !welcomeModalOpen && !signInModalOpen && !settingsModalOpen}
+        isOpen={
+          showDisclaimer &&
+          !welcomeModalOpen &&
+          !signInModalOpen &&
+          !settingsModalOpen
+        }
         onClose={() => setShowDisclaimer(false)}
       />
     </main>

apps/browser/components/Sidebar.tsx

@@ -8,7 +8,7 @@ import { useWorkspaceUploadUpdate } from "@/lib/hooks/useWorkspaceUploadUpdate";
 import Logo from "@/components/Logo";
 import Avatar from "@/components/Avatar";
 import Button from "@/components/Button";
-import TextField from "@/components/TextField";
+import TextField from "@/components/inputs/TextField";
 import DropdownAccount from "@/components/DropdownAccount";
 import Workspace from "@/components/Workspace";
 import React, { memo, useEffect, useRef, useState } from "react";

apps/browser/components/inputs/BaseInput.tsx

@@ -0,0 +1,55 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+
+export interface BaseInputProps {
+  label?: string;
+  error?: string;
+  leftAdornment?: ReactNode;
+  leftAdornmentClassnames?: string;
+  rightAdornment?: ReactNode;
+  rightAdornmentClassnames?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+const BaseInput = ({
+  label,
+  error,
+  leftAdornmentClassnames,
+  leftAdornment,
+  rightAdornmentClassnames,
+  rightAdornment,
+  children,
+}: BaseInputProps) => {
+  return (
+    <div className={"w-full space-y-1"}>
+      {label && <label className="text-sm font-semibold">{label}</label>}
+      <div className="relative w-full">
+        {leftAdornment && (
+          <div
+            className={clsx(
+              "absolute bottom-4 left-4",
+              leftAdornmentClassnames
+            )}
+          >
+            {leftAdornment}
+          </div>
+        )}
+        {children}
+        {rightAdornment && (
+          <div
+            className={clsx(
+              "absolute bottom-4 right-4",
+              rightAdornmentClassnames
+            )}
+          >
+            {rightAdornment}
+          </div>
+        )}
+      </div>
+      {error && <div className="text-xs text-red-500">{error}</div>}
+    </div>
+  );
+};
+
+export default BaseInput;

apps/browser/components/inputs/Checkbox.tsx

@@ -0,0 +1,55 @@
+// Checkbox.tsx
+import clsx from "clsx";
+import BaseInput from "./BaseInput";
+import {
+  ChangeEvent,
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  useState,
+} from "react";
+
+interface CheckboxProps
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label?: string;
+  error?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  error,
+  className,
+  ...props
+}) => {
+  const [isChecked, setIsChecked] = useState(props.checked);
+
+  const handleCheck = () => {
+    const newValue = !isChecked;
+    setIsChecked(newValue);
+    if (props.onChange) {
+      const event = {
+        target: {
+          type: "checkbox",
+          checked: newValue,
+        },
+      } as ChangeEvent<HTMLInputElement>;
+      props.onChange(event);
+    }
+  };
+
+  return (
+    <div className={clsx("space-y-1", className)}>
+      {label && <label className="text-sm font-semibold">{label}</label>}
+      <div
+        className={clsx("checkbox", { checked: isChecked }, className)}
+        onClick={handleCheck}
+      >
+        <div className={clsx("checkmark", { hidden: !isChecked })} />
+      </div>
+    </div>
+  );
+};
+
+export default Checkbox;