diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx index ba555df4..d48882a1 100644 --- a/frontend/src/modals/AddToolModal.tsx +++ b/frontend/src/modals/AddToolModal.tsx @@ -7,6 +7,7 @@ import { useOutsideAlerter } from '../hooks'; import { ActiveState } from '../models/misc'; import ConfigToolModal from './ConfigToolModal'; import { AvailableToolType } from './types'; +import WrapperComponent from './WrapperModal'; export default function AddToolModal({ message, @@ -88,28 +89,12 @@ export default function AddToolModal({ return ( <> -
-
setModalState('INACTIVE')} + className="h-[85vh] w-[90vw] md:w-[75vw]" > -
- +

{t('settings.tools.selectToolSetup')} @@ -153,8 +138,8 @@ export default function AddToolModal({

-
-
+ + )} void; + tool: AvailableToolType | null; + getUserTools: () => void; +} + export default function ConfigToolModal({ modalState, setModalState, tool, getUserTools, -}: { - modalState: ActiveState; - setModalState: (state: ActiveState) => void; - tool: AvailableToolType | null; - getUserTools: () => void; -}) { +}: ConfigToolModalProps) { const { t } = useTranslation(); const [authKey, setAuthKey] = React.useState(''); @@ -36,63 +38,51 @@ export default function ConfigToolModal({ getUserTools(); }); }; + + // Only render when modal is active + if (modalState !== 'ACTIVE') return null; + return ( -
setModalState('INACTIVE')} + className="sm:w-[512px]" + contentClassName="" > -
-
- -
-

- {t('modals.configTool.title')} -

-

- {t('modals.configTool.type')}:{' '} - {tool?.name} -

-
- - {t('modals.configTool.apiKeyLabel')} - - setAuthKey(e.target.value)} - borderVariant="thin" - placeholder={t('modals.configTool.apiKeyPlaceholder')} - > -
-
- - -
-
+
+

+ {t('modals.configTool.title')} +

+

+ {t('modals.configTool.type')}:{' '} + {tool?.name} +

+
+ setAuthKey(e.target.value)} + borderVariant="thin" + placeholder={t('modals.configTool.apiKeyPlaceholder')} + label={t('modals.configTool.apiKeyLabel')} + />
-
-
+
+ + +
+ + ); }