From 4e0eef4398864078cc43de168433fcb2066cb32c Mon Sep 17 00:00:00 2001
From: Jun Wu <quark@lihdd.net>
Date: Wed, 5 Apr 2023 23:48:04 -0700
Subject: [PATCH] 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 |  9 ++++++---
 app/components/home.tsx |  6 ++++--
 app/store/screen.ts     | 20 ++++++++++++++++++++
 app/utils.ts            |  3 +++
 4 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 app/store/screen.ts

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 90c88d97b..5512a0f5e 100644
--- a/app/components/chat.tsx
+++ b/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);
                       }}
                     >
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 9e57cb870..56a90b2b4 100644
--- a/app/components/home.tsx
+++ b/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
       }`}
diff --git a/app/store/screen.ts b/app/store/screen.ts
new file mode 100644
index 000000000..be0d847de
--- /dev/null
+++ b/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;
+});
diff --git a/app/utils.ts b/app/utils.ts
index 9fcb11820..729d9966b 100644
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -49,6 +49,9 @@ export function isIOS() {
 }
 
 export function isMobileScreen() {
+  if (typeof window === "undefined") {
+    return false;
+  }
   return window.innerWidth <= 600;
 }