LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 00:53:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

(refactor:modals) reuse wrapper modal

Browse Source
This commit is contained in:
ManishMadan2882
2025-02-19 04:35:33 +05:30
parent 4e948d8bff
commit 3aa85bb51c
4 changed files with 52 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/modals/AddActionModal.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import Exit from '../assets/exit.svg';
import WrapperModal from './WrapperModal';
import Input from '../components/Input';
import { ActiveState } from '../models/misc';
@@ -35,67 +35,53 @@ export default function AddActionModal({
setModalState('INACTIVE');
};
// Only render when modal is active
if (modalState !== 'ACTIVE') return null;
return (
<div
className={`${
modalState === 'ACTIVE' ? 'visible' : 'hidden'
} fixed top-0 left-0 z-30 h-screen w-screen bg-gray-alpha flex items-center justify-center`}
<WrapperModal
close={() => setModalState('INACTIVE')}
className="sm:w-[512px]"
>
<article className="flex w-11/12 sm:w-[512px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
<div className="relative">
<button
className="absolute top-3 right-4 m-2 w-3"
onClick={() => {
setModalState('INACTIVE');
}}
>
<img className="filter dark:invert" src={Exit} />
</button>
<div className="p-6">
<h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
New Action
</h2>
<div className="mt-6 relative px-3">
<span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
Action Name
</span>
<Input
type="text"
value={actionName}
onChange={(e) => setActionName(e.target.value)}
borderVariant="thin"
placeholder={'Enter name'}
/>
<p className="mt-1 text-gray-500 text-xs">
Use only letters, numbers, underscores, and hyphens (e.g.,
`get_user_data`, `send-report`).
</p>
{functionNameError && (
<p className="mt-1 text-red-500 text-xs">
Invalid function name format. Use only letters, numbers,
underscores, and hyphens.
</p>
)}
</div>
<div className="mt-8 flex flex-row-reverse gap-1 px-3">
<button
onClick={handleAddAction}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
>
Add
</button>
<button
onClick={() => {
setModalState('INACTIVE');
}}
className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
>
{t('modals.configTool.closeButton')}
</button>
</div>
</div>
<div>
<h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
New Action
</h2>
<div className="mt-6 px-3">
<Input
type="text"
value={actionName}
onChange={(e) => setActionName(e.target.value)}
borderVariant="thin"
placeholder="Enter name"
label="Action Name"
/>
<p className="mt-1 text-gray-500 text-xs">
Use only letters, numbers, underscores, and hyphens (e.g.,
`get_user_data`, `send-report`).
</p>
{functionNameError && (
<p className="mt-1 text-red-500 text-xs">
Invalid function name format. Use only letters, numbers,
underscores, and hyphens.
</p>
)}
</div>
</article>
</div>
<div className="mt-8 flex flex-row-reverse gap-1 px-3">
<button
onClick={handleAddAction}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
>
Add
</button>
<button
onClick={() => setModalState('INACTIVE')}
className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
>
{t('modals.configTool.closeButton')}
</button>
</div>
</div>
</WrapperModal>
);
}

4
frontend/src/modals/ConfigToolModal.tsx
View File

@@ -45,10 +45,8 @@ export default function ConfigToolModal({
return (
<WrapperModal
close={() => setModalState('INACTIVE')}
className="sm:w-[512px]"
contentClassName=""
>
<div className="p-6">
<div>
<h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
{t('modals.configTool.title')}
</h2>

2
frontend/src/modals/CreateAPIKeyModal.tsx
View File

@@ -73,7 +73,7 @@ export default function CreateAPIKeyModal({
handleFetchPrompts();
}, []);
return (
<WrapperModal close={close}>
<WrapperModal close={close} className='p-4'>
<div className="mb-6">
<span className="text-xl text-jet dark:text-bright-gray">
{t('modals.createAPIKey.label')}

8
frontend/src/modals/WrapperModal.tsx
View File

@@ -14,8 +14,8 @@ export default function WrapperModal({
children,
close,
isPerformingTask = false,
className = 'sm:w-[512px]', // Default width, but can be overridden
contentClassName = 'p-8', // Default padding, but can be overridden
className = '', // Default width, but can be overridden
contentClassName = '', // Default padding, but can be overridden
}: WrapperModalPropsType) {
const modalRef = useRef<HTMLDivElement>(null);
@@ -49,7 +49,7 @@ export default function WrapperModal({
<div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
<div
ref={modalRef}
className={`relative w-11/12 rounded-2xl bg-white dark:bg-[#26272E] ${className}`}
className={`relative w-11/12 sm:w-[512px] p-8 rounded-2xl bg-white dark:bg-[#26272E] ${className}`}
>
{!isPerformingTask && (
<button
@@ -59,7 +59,7 @@ export default function WrapperModal({
<img className="filter dark:invert" src={Exit} alt="Close" />
</button>
)}
<div className={contentClassName}>
<div className={`${contentClassName}`}>
{children}
</div>
</div>