fix: scroll behavior, browser back navigation, and weather widget sizing (#1336)

components/chat.tsx

@@ -2,7 +2,7 @@
 
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import useSWR, { useSWRConfig } from "swr";
 import { unstable_serialize } from "swr/infinite";
@@ -50,12 +50,25 @@ export function Chat({
   autoResume: boolean;
   initialLastContext?: AppUsage;
 }) {
+  const router = useRouter();
+
   const { visibilityType } = useChatVisibility({
     chatId: id,
     initialVisibilityType,
   });
 
   const { mutate } = useSWRConfig();
+
+  // Handle browser back/forward navigation
+  useEffect(() => {
+    const handlePopState = () => {
+      // When user navigates back/forward, refresh to sync with URL
+      router.refresh();
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [router]);
   const { setDataStream } = useDataStream();
 
   const [input, setInput] = useState<string>("");

components/messages.tsx

@@ -44,51 +44,57 @@ function PureMessages({
   useDataStream();
 
   return (
-    <div
+    <div className="relative flex-1">
-      className="relative flex-1 touch-pan-y overflow-y-auto"
+      <div
-      ref={messagesContainerRef}
+        className="absolute inset-0 touch-pan-y overflow-y-auto"
-    >
+        ref={messagesContainerRef}
-      <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
+      >
-        {messages.length === 0 && <Greeting />}
+        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
+          {messages.length === 0 && <Greeting />}
 
-        {messages.map((message, index) => (
+          {messages.map((message, index) => (
-          <PreviewMessage
+            <PreviewMessage
-            chatId={chatId}
+              chatId={chatId}
-            isLoading={status === "streaming" && messages.length - 1 === index}
+              isLoading={
-            isReadonly={isReadonly}
+                status === "streaming" && messages.length - 1 === index
-            key={message.id}
+              }
-            message={message}
+              isReadonly={isReadonly}
-            regenerate={regenerate}
+              key={message.id}
-            requiresScrollPadding={
+              message={message}
-              hasSentMessage && index === messages.length - 1
+              regenerate={regenerate}
-            }
+              requiresScrollPadding={
-            setMessages={setMessages}
+                hasSentMessage && index === messages.length - 1
-            vote={
+              }
-              votes
+              setMessages={setMessages}
-                ? votes.find((vote) => vote.messageId === message.id)
+              vote={
-                : undefined
+                votes
-            }
+                  ? votes.find((vote) => vote.messageId === message.id)
+                  : undefined
+              }
+            />
+          ))}
+
+          {status === "submitted" && <ThinkingMessage />}
+
+          <div
+            className="min-h-[24px] min-w-[24px] shrink-0"
+            ref={messagesEndRef}
           />
-        ))}
+        </div>
-
-        {status === "submitted" && <ThinkingMessage />}
-
-        <div
-          className="min-h-[24px] min-w-[24px] shrink-0"
-          ref={messagesEndRef}
-        />
       </div>
 
-      {!isAtBottom && (
+      <button
-        <button
+        aria-label="Scroll to bottom"
-          aria-label="Scroll to bottom"
+        className={`-translate-x-1/2 absolute bottom-4 left-1/2 z-10 rounded-full border bg-background p-2 shadow-lg transition-all hover:bg-muted ${
-          className="-translate-x-1/2 absolute bottom-40 left-1/2 z-10 rounded-full border bg-background p-2 shadow-lg transition-colors hover:bg-muted"
+          isAtBottom
-          onClick={() => scrollToBottom("smooth")}
+            ? "pointer-events-none scale-0 opacity-0"
-          type="button"
+            : "pointer-events-auto scale-100 opacity-100"
-        >
+        }`}
-          <ArrowDownIcon className="size-4" />
+        onClick={() => scrollToBottom("smooth")}
-        </button>
+        type="button"
-      )}
+      >
+        <ArrowDownIcon className="size-4" />
+      </button>
     </div>
   );
 }

components/suggested-actions.tsx

@@ -37,7 +37,7 @@ function PureSuggestedActions({ chatId, sendMessage }: SuggestedActionsProps) {
           <Suggestion
             className="h-auto w-full whitespace-normal p-3 text-left"
             onClick={(suggestion) => {
-              window.history.replaceState({}, "", `/chat/${chatId}`);
+              window.history.pushState({}, "", `/chat/${chatId}`);
               sendMessage({
                 role: "user",
                 parts: [{ type: "text", text: suggestion }],

components/weather.tsx

@@ -330,7 +330,7 @@ export function Weather({
   return (
     <div
       className={cx(
-        "relative flex w-full flex-col gap-6 overflow-hidden rounded-3xl p-6 shadow-lg backdrop-blur-sm",
+        "relative flex w-full flex-col gap-3 overflow-hidden rounded-2xl p-4 shadow-lg backdrop-blur-sm",
         {
           "bg-gradient-to-br from-sky-400 via-blue-500 to-blue-600": isDay,
         },
@@ -343,44 +343,44 @@ export function Weather({
       <div className="absolute inset-0 bg-white/10 backdrop-blur-sm" />
 
       <div className="relative z-10">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-2 flex items-center justify-between">
-          <div className="font-medium text-sm text-white/80">{location}</div>
+          <div className="font-medium text-white/80 text-xs">{location}</div>
           <div className="text-white/60 text-xs">
             {format(new Date(weatherAtLocation.current.time), "MMM d, h:mm a")}
           </div>
         </div>
 
-        <div className="mb-6 flex items-center justify-between">
+        <div className="mb-3 flex items-center justify-between">
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-3">
             <div
               className={cx("text-white/90", {
                 "text-yellow-200": isDay,
                 "text-blue-200": !isDay,
               })}
             >
-              {isDay ? <SunIcon size={48} /> : <MoonIcon size={48} />}
+              {isDay ? <SunIcon size={32} /> : <MoonIcon size={32} />}
             </div>
-            <div className="font-light text-5xl text-white">
+            <div className="font-light text-3xl text-white">
               {n(weatherAtLocation.current.temperature_2m)}
-              <span className="text-2xl text-white/80">
+              <span className="text-lg text-white/80">
                 {weatherAtLocation.current_units.temperature_2m}
               </span>
             </div>
           </div>
 
           <div className="text-right">
-            <div className="font-medium text-sm text-white/90">
+            <div className="font-medium text-white/90 text-xs">
               H: {n(currentHigh)}°
             </div>
-            <div className="text-sm text-white/70">L: {n(currentLow)}°</div>
+            <div className="text-white/70 text-xs">L: {n(currentLow)}°</div>
           </div>
         </div>
 
-        <div className="rounded-2xl bg-white/10 p-4 backdrop-blur-sm">
+        <div className="rounded-xl bg-white/10 p-3 backdrop-blur-sm">
-          <div className="mb-3 font-medium text-sm text-white/80">
+          <div className="mb-2 font-medium text-white/80 text-xs">
             Hourly Forecast
           </div>
-          <div className="flex justify-between gap-2">
+          <div className="flex justify-between gap-1">
             {displayTimes.map((time, index) => {
               const hourTime = new Date(time);
               const isCurrentHour =
@@ -389,7 +389,7 @@ export function Weather({
               return (
                 <div
                   className={cx(
-                    "flex min-w-0 flex-1 flex-col items-center gap-2 rounded-lg px-1 py-2",
+                    "flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-1.5",
                     {
                       "bg-white/20": isCurrentHour,
                     }
@@ -406,10 +406,10 @@ export function Weather({
                       "text-blue-200": !isDay,
                     })}
                   >
-                    <CloudIcon size={20} />
+                    <CloudIcon size={16} />
                   </div>
 
-                  <div className="font-medium text-sm text-white">
+                  <div className="font-medium text-white text-xs">
                     {n(displayTemperatures[index])}°
                   </div>
                 </div>
@@ -418,7 +418,7 @@ export function Weather({
           </div>
         </div>
 
-        <div className="mt-4 flex justify-between text-white/60 text-xs">
+        <div className="mt-2 flex justify-between text-white/60 text-xs">
           <div>
             Sunrise:{" "}
             {format(new Date(weatherAtLocation.daily.sunrise[0]), "h:mm a")}

hooks/use-scroll-to-bottom.tsx

@@ -1,102 +1,119 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import useSWR from "swr";
-
-type ScrollFlag = ScrollBehavior | false;
 
 export function useScrollToBottom() {
   const containerRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const isAtBottomRef = useRef(true);
+  const isUserScrollingRef = useRef(false);
 
-  const { data: scrollBehavior = false, mutate: setScrollBehavior } =
+  // Keep ref in sync with state
-    useSWR<ScrollFlag>("messages:should-scroll", null, { fallbackData: false });
+  useEffect(() => {
+    isAtBottomRef.current = isAtBottom;
+  }, [isAtBottom]);
 
-  const handleScroll = useCallback(() => {
+  const checkIfAtBottom = useCallback(() => {
     if (!containerRef.current) {
-      return;
+      return true;
     }
     const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-
+    return scrollTop + clientHeight >= scrollHeight - 100;
-    // Check if we are within 100px of the bottom (like v0 does)
-    setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 100);
   }, []);
 
-  useEffect(() => {
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
     if (!containerRef.current) {
       return;
     }
-
+    containerRef.current.scrollTo({
-    const container = containerRef.current;
+      top: containerRef.current.scrollHeight,
-
+      behavior,
-    const resizeObserver = new ResizeObserver(() => {
-      requestAnimationFrame(() => {
-        handleScroll();
-      });
     });
+  }, []);
 
-    const mutationObserver = new MutationObserver(() => {
+  // Handle user scroll events
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          handleScroll();
-        });
-      });
-    });
-
-    resizeObserver.observe(container);
-    mutationObserver.observe(container, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["style", "class", "data-state"],
-    });
-
-    handleScroll();
-
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [handleScroll]);
-
   useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
     }
 
-    container.addEventListener("scroll", handleScroll);
+    let scrollTimeout: ReturnType<typeof setTimeout>;
-    handleScroll(); // Check initial state
 
+    const handleScroll = () => {
+      // Mark as user scrolling
+      isUserScrollingRef.current = true;
+      clearTimeout(scrollTimeout);
+
+      // Update isAtBottom state
+      const atBottom = checkIfAtBottom();
+      setIsAtBottom(atBottom);
+      isAtBottomRef.current = atBottom;
+
+      // Reset user scrolling flag after scroll ends
+      scrollTimeout = setTimeout(() => {
+        isUserScrollingRef.current = false;
+      }, 150);
+    };
+
+    container.addEventListener("scroll", handleScroll, { passive: true });
     return () => {
       container.removeEventListener("scroll", handleScroll);
+      clearTimeout(scrollTimeout);
     };
-  }, [handleScroll]);
+  }, [checkIfAtBottom]);
 
+  // Auto-scroll when content changes
   useEffect(() => {
-    if (scrollBehavior && containerRef.current) {
+    const container = containerRef.current;
-      const container = containerRef.current;
+    if (!container) {
-      const scrollOptions: ScrollToOptions = {
+      return;
-        top: container.scrollHeight,
-        behavior: scrollBehavior,
-      };
-      container.scrollTo(scrollOptions);
-      setScrollBehavior(false);
     }
-  }, [scrollBehavior, setScrollBehavior]);
 
-  const scrollToBottom = useCallback(
+    const scrollIfNeeded = () => {
-    (currentScrollBehavior: ScrollBehavior = "smooth") => {
+      // Only auto-scroll if user was at bottom and isn't actively scrolling
-      setScrollBehavior(currentScrollBehavior);
+      if (isAtBottomRef.current && !isUserScrollingRef.current) {
-    },
+        requestAnimationFrame(() => {
-    [setScrollBehavior]
+          container.scrollTo({
-  );
+            top: container.scrollHeight,
+            behavior: "instant",
+          });
+          setIsAtBottom(true);
+          isAtBottomRef.current = true;
+        });
+      }
+    };
+
+    // Watch for DOM changes
+    const mutationObserver = new MutationObserver(scrollIfNeeded);
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    // Watch for size changes
+    const resizeObserver = new ResizeObserver(scrollIfNeeded);
+    resizeObserver.observe(container);
+
+    // Also observe children for size changes
+    for (const child of container.children) {
+      resizeObserver.observe(child);
+    }
+
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, []);
 
   function onViewportEnter() {
     setIsAtBottom(true);
+    isAtBottomRef.current = true;
   }
 
   function onViewportLeave() {
     setIsAtBottom(false);
+    isAtBottomRef.current = false;
   }
 
   return {

tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {