From 2705d83d6cffdd8cde6679e5e6e4610e6eb71545 Mon Sep 17 00:00:00 2001
From: Jeremy <git@jrmyphlmn.com>
Date: Mon, 14 Oct 2024 23:01:46 +0530
Subject: [PATCH] Focus input on submission and fix scroll (#441)

---
 components/custom/chat.tsx                |  5 +--
 components/custom/multimodal-input.tsx    | 13 ++++++--
 components/custom/use-scroll-to-bottom.ts |  2 ++
 components/custom/use-window-size.tsx     | 39 +++++++++++++++++++++++
 components/custom/weather.tsx             | 10 ++++--
 5 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 components/custom/use-window-size.tsx

diff --git a/components/custom/chat.tsx b/components/custom/chat.tsx
index bdd8424..382a89c 100644
--- a/components/custom/chat.tsx
+++ b/components/custom/chat.tsx
@@ -40,15 +40,16 @@ export function Chat({
         >
           {messages.length === 0 && <Overview />}
 
-          {messages.map((message, index) => (
+          {messages.map((message) => (
             <PreviewMessage
-              key={`${id}-${index}`}
+              key={message.id}
               role={message.role}
               content={message.content}
               attachments={message.experimental_attachments}
               toolInvocations={message.toolInvocations}
             />
           ))}
+
           <div
             ref={messagesEndRef}
             className="shrink-0 min-w-[24px] min-h-[24px]"
diff --git a/components/custom/multimodal-input.tsx b/components/custom/multimodal-input.tsx
index e2661db..0f8ca3d 100644
--- a/components/custom/multimodal-input.tsx
+++ b/components/custom/multimodal-input.tsx
@@ -15,6 +15,7 @@ import { toast } from "sonner";
 
 import { ArrowUpIcon, PaperclipIcon, StopIcon } from "./icons";
 import { PreviewAttachment } from "./preview-attachment";
+import useWindowSize from "./use-window-size";
 import { Button } from "../ui/button";
 import { Textarea } from "../ui/textarea";
 
@@ -22,7 +23,7 @@ const suggestedActions = [
   {
     title: "What is the weather",
     label: "in San Francisco?",
-    action: "what is the weather in San Francisco?",
+    action: "What is the weather in San Francisco?",
   },
   {
     title: "Answer like I'm 5,",
@@ -61,6 +62,7 @@ export function MultimodalInput({
   ) => void;
 }) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { width } = useWindowSize();
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -89,7 +91,11 @@ export function MultimodalInput({
     });
 
     setAttachments([]);
-  }, [attachments, handleSubmit, setAttachments]);
+
+    if (width && width > 768) {
+      textareaRef.current?.focus();
+    }
+  }, [attachments, handleSubmit, setAttachments, width]);
 
   const uploadFile = async (file: File) => {
     const formData = new FormData();
@@ -242,7 +248,8 @@ export function MultimodalInput({
         <Button
           className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5"
           onClick={(event) => {
-            handleSubmit(event);
+            event.preventDefault();
+            submitForm();
           }}
           disabled={input.length === 0 || uploadQueue.length > 0}
         >
diff --git a/components/custom/use-scroll-to-bottom.ts b/components/custom/use-scroll-to-bottom.ts
index 44889f2..b75ad53 100644
--- a/components/custom/use-scroll-to-bottom.ts
+++ b/components/custom/use-scroll-to-bottom.ts
@@ -19,6 +19,8 @@ export function useScrollToBottom<T extends HTMLElement>(): [
       observer.observe(container, {
         childList: true,
         subtree: true,
+        attributes: true,
+        characterData: true,
       });
 
       return () => observer.disconnect();
diff --git a/components/custom/use-window-size.tsx b/components/custom/use-window-size.tsx
new file mode 100644
index 0000000..c0934ff
--- /dev/null
+++ b/components/custom/use-window-size.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface WindowSize {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+function useWindowSize(): WindowSize {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount and unmount
+
+  return windowSize;
+}
+
+export default useWindowSize;
diff --git a/components/custom/weather.tsx b/components/custom/weather.tsx
index 7af20b6..28fdb8e 100644
--- a/components/custom/weather.tsx
+++ b/components/custom/weather.tsx
@@ -197,6 +197,10 @@ const SAMPLE = {
   },
 };
 
+function n(num: number): number {
+  return Math.ceil(num);
+}
+
 export function Weather({
   weatherAtLocation = SAMPLE,
 }: {
@@ -270,12 +274,12 @@ export function Weather({
             )}
           />
           <div className="text-4xl font-medium text-blue-50">
-            {weatherAtLocation.current.temperature_2m}
+            {n(weatherAtLocation.current.temperature_2m)}
             {weatherAtLocation.current_units.temperature_2m}
           </div>
         </div>
 
-        <div className="text-blue-50">{`H:${currentHigh}° L:${currentLow}°`}</div>
+        <div className="text-blue-50">{`H:${n(currentHigh)}° L:${n(currentLow)}°`}</div>
       </div>
 
       <div className="flex flex-row justify-between">
@@ -296,7 +300,7 @@ export function Weather({
               )}
             />
             <div className="text-blue-50 text-sm">
-              {displayTemperatures[index]}
+              {n(displayTemperatures[index])}
               {weatherAtLocation.hourly_units.temperature_2m}
             </div>
           </div>