fix text selection + closing modal

web/src/app/chat/modal/ModalWrapper.tsx

@@ -1,4 +1,6 @@
+"use client";
 import { XIcon } from "@/components/icons/icons";
+import { useRef } from "react";
 
 export const ModalWrapper = ({
   children,
@@ -11,9 +13,21 @@ export const ModalWrapper = ({
   modalClassName?: string;
   onClose?: () => void;
 }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (
+      onClose &&
+      modalRef.current &&
+      !modalRef.current.contains(e.target as Node)
+    ) {
+      onClose();
+    }
+  };
+
   return (
     <div
-      onClick={() => onClose && onClose()}
+      onMouseDown={handleMouseDown}
       className={
         "fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm " +
         "flex items-center justify-center z-50 " +
@@ -21,6 +35,7 @@ export const ModalWrapper = ({
       }
     >
       <div
+        ref={modalRef}
         onClick={(e) => {
           if (onClose) {
             e.stopPropagation();

web/src/components/Modal.tsx

@@ -1,6 +1,8 @@
+"use client";
 import { Divider } from "@tremor/react";
 import { FiX } from "react-icons/fi";
 import { IconProps } from "./icons/icons";
+import { useRef } from "react";
 
 interface ModalProps {
   icon?: ({ size, className }: IconProps) => JSX.Element;
@@ -25,6 +27,17 @@ export function Modal({
   hideDividerForTitle,
   noPadding,
 }: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (
+      onOutsideClick &&
+      modalRef.current &&
+      !modalRef.current.contains(e.target as Node)
+    ) {
+      onOutsideClick();
+    }
+  };
   return (
     <div>
       <div
@@ -32,9 +45,10 @@ export function Modal({
         fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm
         flex items-center justify-center z-50
       `}
-        onClick={onOutsideClick}
+        onMouseDown={handleMouseDown}
       >
         <div
+          ref={modalRef}
           className={`
           bg-background rounded shadow-lg
           relative ${width ?? "w-1/2"} text-sm