fix static flag bug

src/App.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import Messages from './components/main/Messages';
+import Landing from './components/main/Landing';
 import TextChat from './components/main/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
+import useDocumentTitle from '~/hooks/useDocumentTitle';
 import { useSelector } from 'react-redux';
 
 const App = () => {
-
   const { messages } = useSelector((state) => state.messages);
-  const convo = useSelector((state) => state.convo);
+  const { title } = useSelector((state) => state.convo);
+
+  useDocumentTitle(title);
 
   return (
     <div className="flex h-screen">
@@ -16,8 +19,14 @@ const App = () => {
       <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
         <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden dark:bg-gray-800">
           <MobileNav />
-          <Messages messages={messages} title={convo.title}/>
+          {messages.length === 0 ? (
-          <TextChat messages={messages}/>
+            <Landing title={title} />
+          ) : (
+            <Messages
+              messages={messages}
+            />
+          )}
+          <TextChat messages={messages} />
         </div>
       </div>
     </div>

src/components/main/Messages.jsx

@@ -1,28 +1,24 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useSelector } from 'react-redux';
-import useDocumentTitle from '~/hooks/useDocumentTitle';
 import useDidMountEffect from '~/hooks/useDidMountEffect';
 import Message from './Message';
 import ScrollToBottom from './ScrollToBottom';
-import Landing from './Landing';
 
-export default function Messages({ title, messages }) {
+const Messages = ({ messages }) => {
-  if (messages.length === 0) {
-    return <Landing title={title}/>;
-  }
-
-  useDocumentTitle(title);
-  const messagesEndRef = useRef(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
+  const scrollableRef = useRef(null);
+  const messagesEndRef = useRef(null);
+
+
+  useEffect(() => {
+    const scrollable = scrollableRef.current;
+    const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
+    setShowScrollButton(hasScrollbar);
+  }, [scrollableRef]);
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
-  if (document.body.clientHeight > window.innerHeight) {
-    setShowScrollButton(true);
-  }
-
   const handleScroll = (e) => {
     const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
     if (bottom) {
@@ -30,7 +26,7 @@ export default function Messages({ title, messages }) {
     } else {
       setShowScrollButton(true);
     }
-  }
+  };
 
   const scrollHandler = (e) => {
     e.preventDefault();
@@ -38,27 +34,33 @@ export default function Messages({ title, messages }) {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto " onScroll={handleScroll}>
+    <div
+      className="flex-1 overflow-y-auto "
+      ref={scrollableRef}
+      onScroll={handleScroll}
+    >
       {/* <div className="flex-1 overflow-hidden"> */}
-        <div className="h-full dark:bg-gray-800">
+      <div className="h-full dark:bg-gray-800">
-          <div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
+        <div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
-            {messages.map((message, i) => (
+          {messages.map((message, i) => (
-              <Message
+            <Message
-                key={i}
+              key={i}
-                sender={message.sender}
+              sender={message.sender}
-                text={message.text}
+              text={message.text}
-                last={i === messages.length - 1}
+              last={i === messages.length - 1}
-                error={!!message.error ? true : false}
+              error={!!message.error ? true : false}
-              />
-            ))}
-            {showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
-            <div
-              className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
-              ref={messagesEndRef}
             />
-          </div>
+          ))}
+          {showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
+          <div
+            className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
+            ref={messagesEndRef}
+          />
         </div>
+      </div>
       {/* </div> */}
     </div>
   );
-}
+};
+
+export default Messages

src/components/main/TextChat.jsx

@@ -123,7 +123,7 @@ export default function TextChat({ messages }) {
                 onKeyDown={handleKeyDown}
                 onChange={changeHandler}
                 placeholder=""
-                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-7"
+                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
               />
               <SubmitButton submitMessage={submitMessage} />
             </div>