New impl to useEffect

Author: msmygit

dist/build/static/js/bundle.min.js

@@ -1,6 +1,6 @@
 import { Send } from "lucide-react";
 import { extractMessageFromOutput, getAnimationOrigin, getChatPosition } from "../utils";
-import React, { useEffect, useRef, useState, MouseEvent } from "react";
+import React, { useEffect, useRef, useState, MouseEvent, useCallback } from "react";
 import { ChatMessageType } from "../../types/chatWidget";
 import ChatMessage from "./chatMessage";
 import { sendMessage } from "../../controllers";
@@ -205,31 +205,8 @@ export default function ChatWindow({
     }, 100);
   }, [messages, open]);
 
-  // Resize event handlers
-  const handleResizeStart = (e: MouseEvent<HTMLDivElement>) => {
-    if (!resizable) return;
-    
-    e.preventDefault();
-    setIsResizing(true);
-    
-    // Store initial mouse position
-    resizeStartPos.current = {
-      x: e.clientX,
-      y: e.clientY
-    };
-    
-    // Store initial size
-    initialSize.current = {
-      width: currentWidth || width,
-      height: currentHeight || height
-    };
-    
-    // Add resize event listeners
-    document.addEventListener('mousemove', handleResizeMove);
-    document.addEventListener('mouseup', handleResizeEnd);
-  };
-  
-  const handleResizeMove = (e: MouseEvent | any) => {
+  // Define resize handlers with useCallback to prevent unnecessary re-renders
+  const handleResizeMove = useCallback((e: MouseEvent | any) => {
     if (!isResizing) return;
 
     // Calculate the change in mouse position
@@ -246,24 +223,52 @@ export default function ChatWindow({
 
     setCurrentWidth(newWidth);
     setCurrentHeight(newHeight);
-  };
+  }, [isResizing, min_width, max_width, min_height, max_height]);
 
-  const handleResizeEnd = () => {
+  const handleResizeEnd = useCallback(() => {
     setIsResizing(false);
 
     // Clean up event listeners
     document.removeEventListener('mousemove', handleResizeMove);
     document.removeEventListener('mouseup', handleResizeEnd);
-  };
+  }, [handleResizeMove]);
 
-  // Add resize event listeners on mount and remove on unmount
+  // Add a useEffect to manage event listener cleanup
   useEffect(() => {
+    const currentHandleResizeMove = handleResizeMove;
+    const currentHandleResizeEnd = handleResizeEnd;
+    
     return () => {
-      document.removeEventListener('mousemove', handleResizeMove);
-      document.removeEventListener('mouseup', handleResizeEnd);
+      document.removeEventListener('mousemove', currentHandleResizeMove);
+      document.removeEventListener('mouseup', currentHandleResizeEnd);
     };
   }, [handleResizeMove, handleResizeEnd]);
 
+  const handleResizeStart = useCallback((e: MouseEvent<HTMLDivElement>) => {
+    if (!resizable) return;
+    
+    e.preventDefault();
+    setIsResizing(true);
+    
+    // Store initial mouse position
+    resizeStartPos.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    
+    // Store initial size
+    initialSize.current = {
+      width: currentWidth || width,
+      height: currentHeight || height
+    };
+    
+    // Add resize event listeners
+    document.addEventListener('mousemove', handleResizeMove);
+    document.addEventListener('mouseup', handleResizeEnd);
+  }, [resizable, currentWidth, currentHeight, width, height, handleResizeMove, handleResizeEnd]);
+  
+  // The cleanup for event listeners is now handled in the useEffect above
+  
 
   return (
     <div