Prevent re-render chat

Author: SPWwj

addon/chat/docker-compose.yml

@@ -32,7 +32,7 @@ services:
       - MongoDbSettings__ConnectionString=mongodb://mongodb:27017
       - MongoDbSettings__DatabaseName=Chatio
       - Redis__ConnectionString=redis:6379,password=your_redis_password,abortConnect=false
-      - OpenAiSettings__ApiKey=your_key
+      - OpenAiSettings__ApiKey=your-key
       - OpenAiSettings__DefaultChatModel=gpt-4-turbo-preview
       - OpenAiSettings__DefaultEmbeddingModel=text-embedding-3-small
       - OpenAiSettings__DefaultTemperature=1.0

frontend/src/presentation/pages/CollaborationRoomPage.module.css

@@ -23,7 +23,34 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
 }
+
+.contentArea {
+    position: relative;
+    flex: 1;
+}
+
+.questionDetail,
+.chatFrame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
 .verticalSeparator,
 .horizontalSeparator {
     transition: background-color 0.1s ease;

frontend/src/presentation/pages/CollaborationRoomPage.tsx

@@ -11,7 +11,7 @@ import ToggleButton from "presentation/components/buttons/ToggleButton";
 import ChatFrame from "presentation/components/iframe/ChatFrame";
 
 const CollaborationRoomPage: React.FC = () => {
-    const { roomId } = useParams();
+    const { roomId } = useParams<{ roomId: string }>();
     const [showChat, setShowChat] = useState(false);
     const resizeTimeoutRef = useRef<NodeJS.Timeout>();
 
@@ -60,7 +60,14 @@ const CollaborationRoomPage: React.FC = () => {
             <div className={styles.questionContainer} style={{ width: questionPosition }}>
                 <div className={styles.questionContent}>
                     <ToggleButton showChat={showChat} onClick={() => setShowChat(!showChat)} />
-                    {showChat ? <ChatFrame roomId={roomId} /> : <QuestionDetail question={initialQuestions[0]} />}
+                    <div className={styles.contentArea}>
+                        <div className={`${styles.questionDetail} ${showChat ? styles.hidden : ""}`}>
+                            <QuestionDetail question={initialQuestions[0]} />
+                        </div>
+                        <div className={`${styles.chatFrame} ${showChat ? styles.visible : styles.hidden}`}>
+                            <ChatFrame roomId={roomId} />
+                        </div>
+                    </div>
                 </div>
             </div>