handleSend with Enter (#57)

Co-authored-by: safipatel1 <safipatel1@gmail.com>

Author: austint903

app/classrooms/[classroomId]/chat/MessageBox.tsx

@@ -104,6 +104,7 @@ export default function MessageBox({
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder="Type your message..."
+          onEnter={handleSend}
         />
         <Button
           onClick={handleSend}

shared/components/ui/chat/chat-input.tsx

@@ -2,23 +2,41 @@ import * as React from "react";
 import { Textarea } from "@shared/components/ui/textarea";
 import { cn } from "@shared/lib/utils";
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 interface ChatInputProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  //leave as optional
+  onEnter?: () => void;
+}
 
 const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(
-  ({ className, ...props }, ref) => (
-    <Textarea
-      autoComplete="off"
-      ref={ref}
-      name="message"
-      className={cn(
-        "flex h-16 max-h-12 w-full resize-none items-center rounded-md bg-background px-4 py-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+  ({ className, onKeyDown, onEnter, ...props }, ref) => {
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      //if it is only the enter key
+      if (event.key === "Enter" && !event.shiftKey) {
+        //prevent new line
+        event.preventDefault();
+        if (onEnter) {
+          onEnter();
+        }
+      }
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+    };
+    return (
+      <Textarea
+        autoComplete="off"
+        ref={ref}
+        name="message"
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "flex h-16 max-h-12 w-full resize-none items-center rounded-md bg-background px-4 py-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
 );
 ChatInput.displayName = "ChatInput";