highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-03-30 04:31:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Ensure proper modal fallback (#2906)

Browse Source 
* modal fallback

* nit

* k

* k
This commit is contained in:
pablodanswer 2024-10-25 10:59:43 -07:00 committed by GitHub
parent 4ca38201d1
commit 76415aff41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 35 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx
View File

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

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

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

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

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

6
web/src/app/chat/modal/FeedbackModal.tsx
View File

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

6
web/src/app/chat/modal/MakePublicAssistantModal.tsx
View File

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

9
web/src/app/chat/modal/SetDefaultModelModal.tsx
View File

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

6
web/src/app/chat/modal/ShareChatSessionModal.tsx
View File

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

6
web/src/components/Modal.tsx
View File

@ -54,9 +54,9 @@ export function Modal({
e.stopPropagation(); 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 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"} ${noPadding ? "" : "p-10"}
${className || ""}`} ${className || ""}`}
> >
@ -88,7 +88,7 @@ export function Modal({
{!hideDividerForTitle && <Divider />} {!hideDividerForTitle && <Divider />}
</> </>
)} )}
{children} <div className="max-h-[60vh] overflow-y-scroll">{children}</div>
</div> </div>
</div> </div>
</div> </div>

6
web/src/components/modals/DeleteEntityModal.tsx
View File

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

6
web/src/components/modals/GenericConfirmModal.tsx
View File

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

63
web/src/components/modals/ModalWrapper.tsx
View File

@ -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>
);
};

6
web/src/components/modals/NoAssistantModal.tsx
View File

@ -1,8 +1,8 @@
import { ModalWrapper } from "@/components/modals/ModalWrapper"; import { Modal } from "@/components/Modal";
export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => { export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
return ( 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"> <h2 className="text-3xl font-bold text-gray-800 mb-4">
No Assistant Available No Assistant Available
@ -32,6 +32,6 @@ export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
</p> </p>
)} )}
</> </>
</ModalWrapper> </Modal>
); );
}; };