diff --git a/src/components/Chat/ReportIssueDialog.tsx b/src/components/Chat/ReportIssueDialog.tsx index 21118267d..34ab76c89 100644 --- a/src/components/Chat/ReportIssueDialog.tsx +++ b/src/components/Chat/ReportIssueDialog.tsx @@ -1,10 +1,8 @@ -import { IconX } from '@tabler/icons-react'; import { ChangeEvent, FC, FormEvent, useCallback, - useEffect, useRef, useState, } from 'react'; @@ -24,6 +22,8 @@ import { UIActions } from '@/src/store/ui/ui.reducers'; import { errorsMessages } from '@/src/constants/errors'; +import Modal from '@/src/components/Common/Modal'; + import EmptyRequiredInputMessage from '../Common/EmptyRequiredInputMessage'; const reportIssue = async (fields: Omit) => { @@ -45,7 +45,6 @@ interface Props { export const ReportIssueDialog: FC = ({ isOpen, onClose }) => { const { t } = useTranslation(Translation.Settings); - const modalRef = useRef(null); const titleInputRef = useRef(null); const descriptionInputRef = useRef(null); @@ -116,25 +115,6 @@ export const ReportIssueDialog: FC = ({ isOpen, onClose }) => { [description, dispatch, handleClose, t, title], ); - useEffect(() => { - const handleMouseDown = (e: MouseEvent) => { - if (modalRef.current && !modalRef.current.contains(e.target as Node)) { - window.addEventListener('mouseup', handleMouseUp); - } - }; - - const handleMouseUp = () => { - window.removeEventListener('mouseup', handleMouseUp); - handleClose(); - }; - - window.addEventListener('mousedown', handleMouseDown); - - return () => { - window.removeEventListener('mousedown', handleMouseDown); - }; - }, [handleClose]); - // Render nothing if the dialog is not open. if (!isOpen) { return <>; @@ -147,74 +127,71 @@ export const ReportIssueDialog: FC = ({ isOpen, onClose }) => { // Render the dialog. return ( -
-
- - -
+ {t('Title')} + * + + + +
+ +
+ + + +
+
+
- -
- - - -
- -
- - - -
-
- -
-
-
+ + + ); }; diff --git a/src/components/Chat/RequestApiKeyDialog.tsx b/src/components/Chat/RequestApiKeyDialog.tsx index 5aec0c007..f467ac502 100644 --- a/src/components/Chat/RequestApiKeyDialog.tsx +++ b/src/components/Chat/RequestApiKeyDialog.tsx @@ -1,10 +1,9 @@ -import { IconCheck, IconX } from '@tabler/icons-react'; +import { IconCheck } from '@tabler/icons-react'; import { ChangeEvent, FC, FormEvent, useCallback, - useEffect, useRef, useState, } from 'react'; @@ -24,6 +23,8 @@ import { UIActions } from '@/src/store/ui/ui.reducers'; import { errorsMessages } from '@/src/constants/errors'; +import Modal from '@/src/components/Common/Modal'; + import EmptyRequiredInputMessage from '../Common/EmptyRequiredInputMessage'; const requestApiKey = async ( @@ -59,7 +60,6 @@ export const RequestAPIKeyDialog: FC = ({ isOpen, onClose }) => { const dispatch = useAppDispatch(); - const modalRef = useRef(null); const projectNameInputRef = useRef(null); const streamNameInputRef = useRef(null); const techLeadEmailInputRef = useRef(null); @@ -225,25 +225,6 @@ export const RequestAPIKeyDialog: FC = ({ isOpen, onClose }) => { ], ); - useEffect(() => { - const handleMouseDown = (e: MouseEvent) => { - if (modalRef.current && !modalRef.current.contains(e.target as Node)) { - window.addEventListener('mouseup', handleMouseUp); - } - }; - - const handleMouseUp = () => { - window.removeEventListener('mouseup', handleMouseUp); - handleClose(); - }; - - window.addEventListener('mousedown', handleMouseDown); - - return () => { - window.removeEventListener('mousedown', handleMouseDown); - }; - }, [handleClose]); - // Render nothing if the dialog is not open. if (!isOpen) { return <>; @@ -260,370 +241,364 @@ export const RequestAPIKeyDialog: FC = ({ isOpen, onClose }) => { }); return ( -
-
- - -
- {t('Request API Key')} -
- -
- -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
- -
- {t('Also please acknowledge that your API usage should comply with:')} -
- - - -
- - +
+ +
+ + + +
+ +
+ + + +
+ +
+ - -
- -
- - + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ - -
- -
- - - -
- -
- -
-
-
+ + + https://platform.openai.com/tokenizer + + , + + https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/ + + * + + + + + +
+ {t('Also please acknowledge that your API usage should comply with:')} +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+ ); }; diff --git a/src/components/Common/FooterMessage.tsx b/src/components/Common/FooterMessage.tsx index 2e1d97164..cdf09d33b 100644 --- a/src/components/Common/FooterMessage.tsx +++ b/src/components/Common/FooterMessage.tsx @@ -17,10 +17,10 @@ export const FooterMessage = () => { const footerHtmlMessage = useAppSelector( SettingsSelectors.selectFooterHtmlMessage, ); - const enabledFeatures = useAppSelector( SettingsSelectors.selectEnabledFeatures, ); + const [isRequestAPIDialogOpen, setIsRequestAPIDialogOpen] = useState(false); const [isReportIssueDialogOpen, setIsReportIssueDialogOpen] = useState(false); const router = useRouter(); @@ -30,9 +30,10 @@ export const FooterMessage = () => { const hash = window.location.hash; if (hash === requestApiKeyHash) { + setIsReportIssueDialogOpen(false); setIsRequestAPIDialogOpen(true); - } - if (hash === reportAnIssueHash) { + } else if (hash === reportAnIssueHash) { + setIsRequestAPIDialogOpen(false); setIsReportIssueDialogOpen(true); } }; @@ -60,7 +61,7 @@ export const FooterMessage = () => { setIsRequestAPIDialogOpen(false); router.replace(router.basePath); }} - > + /> )} {enabledFeatures.has(Feature.ReportAnIssue) && ( @@ -70,7 +71,7 @@ export const FooterMessage = () => { setIsReportIssueDialogOpen(false); router.replace(router.basePath); }} - > + /> )} ) : null; diff --git a/src/components/Common/Modal.tsx b/src/components/Common/Modal.tsx index 28ad70d29..5eb7cf933 100644 --- a/src/components/Common/Modal.tsx +++ b/src/components/Common/Modal.tsx @@ -10,6 +10,7 @@ import { } from '@floating-ui/react'; import { IconX } from '@tabler/icons-react'; import { + FormEvent, FormHTMLAttributes, KeyboardEventHandler, MouseEvent, @@ -33,6 +34,10 @@ interface Props extends FormHTMLAttributes { hideClose?: boolean; onKeyDownOverlay?: KeyboardEventHandler; dismissProps?: UseDismissProps; + form?: { + noValidate: boolean; + onSubmit: (e: FormEvent) => void; + }; } export default function Modal({ @@ -48,6 +53,7 @@ export default function Modal({ hideClose = false, onKeyDownOverlay, dismissProps, + form, }: Props) { const { refs, context } = useFloating({ open: isOpen, @@ -67,6 +73,8 @@ export default function Modal({ [onClose], ); + const Tag = form ? 'form' : 'div'; + return ( {isOpen && ( @@ -80,7 +88,7 @@ export default function Modal({ onKeyDown={onKeyDownOverlay} > -
{!hideClose && (
) : (
-
+
{enabledFeatures.has(Feature.Header) &&
}
{enabledFeatures.has(Feature.ConversationsSection) && }