feat: reactive isMobileScreen

app/components/chat-list.tsx

@@ -10,7 +10,6 @@ import {
 import { useChatStore } from "../store";
 
 import Locale from "../locales";
-import { isMobileScreen } from "../utils";
 
 export function ChatItem(props: {
   onClick?: () => void;

app/components/chat.tsx

@@ -38,9 +38,9 @@ import {
   copyToClipboard,
   downloadAs,
   getEmojiUrl,
-  isMobileScreen,
   selectOrCopy,
   autoGrowTextArea,
+  useMobileScreen,
 } from "../utils";
 
 import dynamic from "next/dynamic";
@@ -438,6 +438,7 @@ export function Chat(props: {
   const { submitKey, shouldSubmit } = useSubmitHandler();
   const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom();
   const [hitBottom, setHitBottom] = useState(false);
+  const isMobileScreen = useMobileScreen();
 
   const onChatBodyScroll = (e: HTMLElement) => {
     const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20;
@@ -468,7 +469,7 @@ export function Chat(props: {
       const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
       const inputRows = Math.min(
         5,
-        Math.max(2 + Number(!isMobileScreen()), rows),
+        Math.max(2 + Number(!isMobileScreen), rows),
       );
       setInputRows(inputRows);
     },
@@ -508,7 +509,7 @@ export function Chat(props: {
     setBeforeInput(userInput);
     setUserInput("");
     setPromptHints([]);
-    if (!isMobileScreen()) inputRef.current?.focus();
+    if (!isMobileScreen) inputRef.current?.focus();
     setAutoScroll(true);
   };
 
@@ -640,7 +641,7 @@ export function Chat(props: {
 
   // Auto focus
   useEffect(() => {
-    if (props.sideBarShowing && isMobileScreen()) return;
+    if (props.sideBarShowing && isMobileScreen) return;
     inputRef.current?.focus();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -688,7 +689,7 @@ export function Chat(props: {
               }}
             />
           </div>
-          {!isMobileScreen() && (
+          {!isMobileScreen && (
             <div className={styles["window-action-button"]}>
               <IconButton
                 icon={chatStore.config.tightBorder ? <MinIcon /> : <MaxIcon />}
@@ -788,7 +789,7 @@ export function Chat(props: {
                     }
                     onContextMenu={(e) => onRightClick(e, message)}
                     onDoubleClickCapture={() => {
-                      if (!isMobileScreen()) return;
+                      if (!isMobileScreen) return;
                       setUserInput(message.content);
                     }}
                     fontSize={fontSize}

app/components/home.tsx

@@ -17,7 +17,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 
 import { useChatStore } from "../store";
-import { getCSSVar, isMobileScreen } from "../utils";
+import { getCSSVar, useMobileScreen } from "../utils";
 import Locale from "../locales";
 import { Chat } from "./chat";
 
@@ -103,17 +103,14 @@ function useDragSideBar() {
     window.addEventListener("mousemove", handleMouseMove.current);
     window.addEventListener("mouseup", handleMouseUp.current);
   };
+  const isMobileScreen = useMobileScreen();
 
   useEffect(() => {
-    if (isMobileScreen()) {
-      return;
-    }
-
-    document.documentElement.style.setProperty(
-      "--sidebar-width",
-      `${limit(chatStore.config.sidebarWidth ?? 300)}px`,
-    );
-  }, [chatStore.config.sidebarWidth]);
+    const sideBarWidth = isMobileScreen
+      ? "100vw"
+      : `${limit(chatStore.config.sidebarWidth ?? 300)}px`;
+    document.documentElement.style.setProperty("--sidebar-width", sideBarWidth);
+  }, [chatStore.config.sidebarWidth, isMobileScreen]);
 
   return {
     onDragMouseDown,
@@ -148,6 +145,7 @@ function _Home() {
 
   // drag side bar
   const { onDragMouseDown } = useDragSideBar();
+  const isMobileScreen = useMobileScreen();
 
   useSwitchTheme();
 
@@ -158,7 +156,7 @@ function _Home() {
   return (
     <div
       className={`${
-        config.tightBorder && !isMobileScreen()
+        config.tightBorder && !isMobileScreen
           ? styles["tight-container"]
           : styles.container
       }`}