Ensure proper modal fallback (#2906)

* modal fallback

* nit

* k

* k

web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx

@@ -173,7 +173,6 @@ export function ProviderCreationModal({
 
   return (
     <Modal
-      width="max-w-3xl"
       title={`Configure ${selectedProvider.provider_type}`}
       onOutsideClick={onCancel}
       icon={selectedProvider.icon}

web/src/app/admin/prompt-library/modals/AddPromptModal.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
 import { Button } from "@tremor/react";
 
 import { BookstackIcon } from "@/components/icons/icons";
 import { AddPromptModalProps } from "../interfaces";
 import { TextFormField } from "@/components/admin/connectors/Field";
+import { Modal } from "@/components/Modal";
 
 const AddPromptSchema = Yup.object().shape({
   title: Yup.string().required("Title is required"),
@@ -15,7 +15,7 @@ const AddPromptSchema = Yup.object().shape({
 
 const AddPromptModal = ({ onClose, onSubmit }: AddPromptModalProps) => {
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+    <Modal onOutsideClick={onClose} width="max-w-xl">
       <Formik
         initialValues={{
           title: "",
@@ -57,7 +57,7 @@ const AddPromptModal = ({ onClose, onSubmit }: AddPromptModalProps) => {
           </Form>
         )}
       </Formik>
-    </ModalWrapper>
+    </Modal>
   );
 };
 

web/src/app/admin/prompt-library/modals/EditPromptModal.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Button, Textarea, TextInput } from "@tremor/react";
+
 import { useInputPrompt } from "../hooks";
 import { EditPromptModalProps } from "../interfaces";
 
@@ -25,20 +26,20 @@ const EditPromptModal = ({
 
   if (error)
     return (
-      <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+      <Modal onOutsideClick={onClose} width="max-w-xl">
         <p>Failed to load prompt data</p>
-      </ModalWrapper>
+      </Modal>
     );
 
   if (!promptData)
     return (
-      <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+      <Modal onOutsideClick={onClose} width="max-w-xl">
         <p>Loading...</p>
-      </ModalWrapper>
+      </Modal>
     );
 
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+    <Modal onOutsideClick={onClose} width="max-w-xl">
       <Formik
         initialValues={{
           prompt: promptData.prompt,
@@ -131,7 +132,7 @@ const EditPromptModal = ({
           </Form>
         )}
       </Formik>
-    </ModalWrapper>
+    </Modal>
   );
 };
 

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

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { FeedbackType } from "../types";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { FilledLikeIcon } from "@/components/icons/icons";
 
 const predefinedPositiveFeedbackOptions =
@@ -49,7 +49,7 @@ export const FeedbackModal = ({
       : predefinedNegativeFeedbackOptions;
 
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-3xl">
+    <Modal onOutsideClick={onClose} width="max-w-3xl">
       <>
         <h2 className="text-2xl text-emphasis font-bold mb-4 flex">
           <div className="mr-1 my-auto">
@@ -112,6 +112,6 @@ export const FeedbackModal = ({
           </button>
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 };

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

@@ -1,4 +1,4 @@
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Button, Divider, Text } from "@tremor/react";
 
 export function MakePublicAssistantModal({
@@ -11,7 +11,7 @@ export function MakePublicAssistantModal({
   onClose: () => void;
 }) {
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-3xl">
+    <Modal onOutsideClick={onClose} width="max-w-3xl">
       <div className="space-y-6">
         <h2 className="text-2xl font-bold text-emphasis">
           {isPublic ? "Public Assistant" : "Make Assistant Public"}
@@ -67,6 +67,6 @@ export function MakePublicAssistantModal({
           </div>
         )}
       </div>
-    </ModalWrapper>
+    </Modal>
   );
 }

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

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useRef } from "react";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Text } from "@tremor/react";
 import { getDisplayNameForModel, LlmOverride } from "@/lib/hooks";
 import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
@@ -123,10 +123,7 @@ export function SetDefaultModelModal({
   );
 
   return (
-    <ModalWrapper
-      onClose={onClose}
-      modalClassName="rounded-lg  bg-white max-w-xl"
-    >
+    <Modal onOutsideClick={onClose} width="rounded-lg  bg-white max-w-xl">
       <>
         <div className="flex mb-4">
           <h2 className="text-2xl text-emphasis font-bold flex my-auto">
@@ -203,6 +200,6 @@ export function SetDefaultModelModal({
           </div>
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Button, Callout, Divider, Text } from "@tremor/react";
 import { Spinner } from "@/components/Spinner";
 import { ChatSessionSharedStatus } from "../interfaces";
@@ -57,7 +57,7 @@ export function ShareChatSessionModal({
   );
 
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-3xl">
+    <Modal onOutsideClick={onClose} width="max-w-3xl">
       <>
         <div className="flex mb-4">
           <h2 className="text-2xl text-emphasis font-bold flex my-auto">
@@ -154,6 +154,6 @@ export function ShareChatSessionModal({
           )}
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 }

web/src/components/Modal.tsx

@@ -54,9 +54,9 @@ export function Modal({
             e.stopPropagation();
           }
         }}
-        className={`bg-background text-emphasis rounded shadow-2xl 
+        className={`bg-background  text-emphasis rounded shadow-2xl 
           transform transition-all duration-300 ease-in-out
-          ${width ?? "w-11/12 max-w-5xl"}
+          ${width ?? "w-11/12 max-w-4xl"}
           ${noPadding ? "" : "p-10"}
           ${className || ""}`}
       >
@@ -88,7 +88,7 @@ export function Modal({
               {!hideDividerForTitle && <Divider />}
             </>
           )}
-          {children}
+          <div className="max-h-[60vh] overflow-y-scroll">{children}</div>
         </div>
       </div>
     </div>

web/src/components/modals/DeleteEntityModal.tsx

@@ -1,6 +1,6 @@
 import { FiTrash, FiX } from "react-icons/fi";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
 import { BasicClickable } from "@/components/BasicClickable";
+import { Modal } from "../Modal";
 
 export const DeleteEntityModal = ({
   onClose,
@@ -16,7 +16,7 @@ export const DeleteEntityModal = ({
   additionalDetails?: string;
 }) => {
   return (
-    <ModalWrapper onClose={onClose}>
+    <Modal onOutsideClick={onClose}>
       <>
         <div className="flex mb-4">
           <h2 className="my-auto text-2xl font-bold">Delete {entityType}?</h2>
@@ -37,6 +37,6 @@ export const DeleteEntityModal = ({
           </div>
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 };

web/src/components/modals/GenericConfirmModal.tsx

@@ -1,5 +1,5 @@
 import { FiCheck } from "react-icons/fi";
-import { ModalWrapper } from "./ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { BasicClickable } from "@/components/BasicClickable";
 
 export const GenericConfirmModal = ({
@@ -16,7 +16,7 @@ export const GenericConfirmModal = ({
   onConfirm: () => void;
 }) => {
   return (
-    <ModalWrapper onClose={onClose}>
+    <Modal onOutsideClick={onClose}>
       <div className="max-w-full">
         <div className="flex mb-4">
           <h2 className="my-auto text-2xl font-bold whitespace-normal overflow-wrap-normal">
@@ -37,6 +37,6 @@ export const GenericConfirmModal = ({
           </div>
         </div>
       </div>
-    </ModalWrapper>
+    </Modal>
   );
 };

web/src/components/modals/ModalWrapper.tsx

@@ -1,63 +0,0 @@
-"use client";
-import { XIcon } from "@/components/icons/icons";
-import { isEventWithinRef } from "@/lib/contains";
-import { useRef } from "react";
-
-export const ModalWrapper = ({
-  children,
-  bgClassName,
-  modalClassName,
-  onClose,
-}: {
-  children: JSX.Element;
-  bgClassName?: string;
-  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) &&
-      !isEventWithinRef(e.nativeEvent, modalRef)
-    ) {
-      onClose();
-    }
-  };
-  return (
-    <div
-      onMouseDown={handleMouseDown}
-      className={`fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm 
-        flex items-center justify-center z-50 transition-opacity duration-300 ease-in-out
-        ${bgClassName || ""}`}
-    >
-      <div
-        ref={modalRef}
-        onClick={(e) => {
-          if (onClose) {
-            e.stopPropagation();
-          }
-        }}
-        className={`bg-background text-emphasis p-10 rounded shadow-2xl 
-          w-11/12 max-w-3xl transform transition-all duration-300 ease-in-out
-          relative ${modalClassName || ""}`}
-      >
-        {onClose && (
-          <div className="absolute top-2 right-2">
-            <button
-              onClick={onClose}
-              className="cursor-pointer text-text-500 hover:text-text-700 transition-colors duration-200 p-2"
-              aria-label="Close modal"
-            >
-              <XIcon className="w-5 h-5" />
-            </button>
-          </div>
-        )}
-
-        <div className="flex w-full flex-col justify-stretch">{children}</div>
-      </div>
-    </div>
-  );
-};

web/src/components/modals/NoAssistantModal.tsx

@@ -1,8 +1,8 @@
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 
 export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
   return (
-    <ModalWrapper modalClassName="bg-white max-w-2xl rounded-lg shadow-xl text-center">
+    <Modal width="bg-white max-w-2xl rounded-lg shadow-xl text-center">
       <>
         <h2 className="text-3xl font-bold text-gray-800 mb-4">
           No Assistant Available
@@ -32,6 +32,6 @@ export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
           </p>
         )}
       </>
-    </ModalWrapper>
+    </Modal>
   );
 };