fix: re-render if isMobileScreen() changes

Before this change, even with "tight border" enabled, resizing the window from
mobile to non-mobile does not use tight border.

After this change, the "tight border" config is respected as expected.

app/components/chat.tsx

@@ -20,6 +20,7 @@ import {
   ROLES,
   createMessage,
 } from "../store";
+import { useScreen } from "../store/screen";
 
 import {
   copyToClipboard,
@@ -348,6 +349,8 @@ export function Chat(props: {
   const { scrollRef, setAutoScroll } = useScrollToBottom();
   const [hitBottom, setHitBottom] = useState(false);
 
+  const isMobile = useScreen(screen => screen.isMobile);
+
   const onChatBodyScroll = (e: HTMLElement) => {
     const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20;
     setHitBottom(isTouchBottom);
@@ -409,7 +412,7 @@ export function Chat(props: {
     chatStore.onUserInput(userInput).then(() => setIsLoading(false));
     setUserInput("");
     setPromptHints([]);
-    if (!isMobileScreen()) inputRef.current?.focus();
+    if (!isMobile) inputRef.current?.focus();
     setAutoScroll(true);
   };
 
@@ -499,7 +502,7 @@ export function Chat(props: {
 
   // Auto focus
   useEffect(() => {
-    if (props.sideBarShowing && isMobileScreen()) return;
+    if (props.sideBarShowing && isMobile) return;
     inputRef.current?.focus();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -635,7 +638,7 @@ export function Chat(props: {
                       style={{ fontSize: `${fontSize}px` }}
                       onContextMenu={(e) => onRightClick(e, message)}
                       onDoubleClickCapture={() => {
-                        if (!isMobileScreen()) return;
+                        if (!isMobile) return;
                         setUserInput(message.content);
                       }}
                     >

app/components/home.tsx

@@ -17,7 +17,8 @@ import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 
 import { useChatStore } from "../store";
-import { isMobileScreen } from "../utils";
+import { useScreen } from "../store/screen";
+
 import Locale from "../locales";
 import { Chat } from "./chat";
 
@@ -99,6 +100,7 @@ function _Home() {
   // setting
   const [openSettings, setOpenSettings] = useState(false);
   const config = useChatStore((state) => state.config);
+  const isMobile = useScreen(screen => screen.isMobile);
 
   useSwitchTheme();
 
@@ -109,7 +111,7 @@ function _Home() {
   return (
     <div
       className={`${
-        config.tightBorder && !isMobileScreen()
+        config.tightBorder && !isMobile
           ? styles["tight-container"]
           : styles.container
       }`}

app/store/screen.ts

@@ -0,0 +1,20 @@
+import { create } from "zustand";
+import { isMobileScreen } from "../utils";
+
+interface Screen {
+  isMobile: boolean;
+  update: () => void;
+}
+
+export const useScreen = create<Screen>(set => {
+  const state = {
+    isMobile: isMobileScreen(),
+    update: () => set({ isMobile: isMobileScreen() }),
+  };
+  if (typeof window !== "undefined") {
+    window.addEventListener("resize", e => {
+      state.update();
+    });
+  }
+  return state;
+});

app/utils.ts

@@ -49,6 +49,9 @@ export function isIOS() {
 }
 
 export function isMobileScreen() {
+  if (typeof window === "undefined") {
+    return false;
+  }
   return window.innerWidth <= 600;
 }