Auto focus chat input
diff --git a/website/src/components/Chat/ChatForm.tsx b/website/src/components/Chat/ChatForm.tsx
index 97a98ff2ff..47206b35fc 100644
--- a/website/src/components/Chat/ChatForm.tsx
+++ b/website/src/components/Chat/ChatForm.tsx
@@ -1,8 +1,9 @@
-import { Box, CircularProgress, Flex, Textarea } from "@chakra-ui/react";
+import { Box, CircularProgress, Flex, Textarea, useBreakpointValue } from "@chakra-ui/react";
 import { Send } from "lucide-react";
 import { useTranslation } from "next-i18next";
-import { forwardRef, KeyboardEvent, SyntheticEvent, useCallback } from "react";
+import { forwardRef, KeyboardEvent, SyntheticEvent, useCallback, useEffect } from "react";
 import TextareaAutosize from "react-textarea-autosize";
+import { useFallbackRef } from "src/hooks/ui/useFallbackRef";
 import { QueueInfo } from "src/lib/chat_stream";
 
 import { ChatConfigDrawer } from "./ChatConfigMobile";
@@ -15,7 +16,7 @@ type ChatFormProps = {
 };
 
 // eslint-disable-next-line react/display-name
-export const ChatForm = forwardRef<HTMLTextAreaElement, ChatFormProps>((props, ref) => {
+export const ChatForm = forwardRef<HTMLTextAreaElement, ChatFormProps>((props, forwardedRef) => {
   const { isSending, onSubmit: onSubmit, queueInfo } = props;
   const { t } = useTranslation("chat");
   const handleSubmit = useCallback(
@@ -34,6 +35,16 @@ export const ChatForm = forwardRef<HTMLTextAreaElement, ChatFormProps>((props, r
     },
     [onSubmit]
   );
+
+  const ref = useFallbackRef(forwardedRef);
+  const isDeskTop = useBreakpointValue({ base: false, md: true });
+
+  useEffect(() => {
+    if (isDeskTop) {
+      ref.current?.focus();
+    }
+  }, [isDeskTop, ref]);
+
   return (
     <Box as="form" maxWidth={{ base: "3xl", "2xl": "4xl" }} onSubmit={handleSubmit} className="py-2 w-full mx-auto">
       <div className="relative">
diff --git a/website/src/hooks/ui/useFallbackRef.ts b/website/src/hooks/ui/useFallbackRef.ts
new file mode 100644
index 0000000000..0dab2c2f53
--- /dev/null
+++ b/website/src/hooks/ui/useFallbackRef.ts
@@ -0,0 +1,7 @@
+import { ForwardedRef, RefObject, useRef } from "react";
+
+export const useFallbackRef = <T>(maybeRef?: ForwardedRef<T>) => {
+  const ref = useRef(null);
+
+  return (maybeRef || ref) as RefObject<T>;
+};

I decided to only focus on desktop since it is bad practice to auto-focus on mobile, the keyboard on mobile take a lot space, but let's see how the user feedback with it