Refactor ChatInterface component to improve resize handle functionality and positioning, enhancing user experience for chat window adjustments.

Author: Dylan Huang

vite-app/src/components/ChatInterface.tsx

@@ -112,33 +112,36 @@ export const ChatInterface = ({ messages }: ChatInterfaceProps) => {
       style={{ width: `${chatWidth}px` }}
     >
       <div
-        className="bg-white border border-gray-200 p-4 overflow-y-auto"
+        className="bg-white border border-gray-200 p-4 overflow-y-auto relative"
         style={{ height: `${chatHeight}px` }}
       >
         {messages.map((message, msgIndex) => (
           <MessageBubble key={msgIndex} message={message} />
         ))}
       </div>
 
-      {/* Horizontal resize handle */}
+      {/* Vertical resize handle - positioned outside the scrollable container */}
       <div
-        ref={resizeHandleRef}
-        className="absolute top-0 right-0 w-1 h-full bg-gray-300 cursor-col-resize hover:bg-gray-400 transition-colors select-none"
-        onMouseDown={startWidthResize}
+        ref={heightResizeHandleRef}
+        className="absolute left-0 w-full h-1 bg-gray-300 cursor-row-resize hover:bg-gray-400 transition-colors select-none"
+        style={{ top: `${chatHeight}px` }}
+        onMouseDown={startHeightResize}
         onDragStart={(e) => e.preventDefault()}
       />
 
-      {/* Vertical resize handle */}
+      {/* Horizontal resize handle */}
       <div
-        ref={heightResizeHandleRef}
-        className="absolute bottom-0 left-0 w-full h-1 bg-gray-300 cursor-row-resize hover:bg-gray-400 transition-colors select-none"
-        onMouseDown={startHeightResize}
+        ref={resizeHandleRef}
+        className="absolute top-0 right-0 w-1 bg-gray-300 cursor-col-resize hover:bg-gray-400 transition-colors select-none"
+        style={{ height: `${chatHeight}px` }}
+        onMouseDown={startWidthResize}
         onDragStart={(e) => e.preventDefault()}
       />
 
-      {/* Corner resize handle */}
+      {/* Corner resize handle - positioned outside the scrollable container */}
       <div
-        className="absolute bottom-0 right-0 w-3 h-3 bg-gray-300 cursor-nw-resize hover:bg-gray-400 transition-colors select-none"
+        className="absolute w-3 h-3 bg-gray-300 cursor-nw-resize hover:bg-gray-400 transition-colors select-none"
+        style={{ top: `${chatHeight - 8}px`, right: "0px" }}
         onMouseDown={startCornerResize}
         onDragStart={(e) => e.preventDefault()}
       />