Skip to content

Commit 6ead098

Browse files
iandjxiandjx
authored
Merge pull request #670 from rnadigital/fix/agent-page-ux
 Enhance cleanup and input handling in agent components
2 parents da02312 + e8f2745 commit 6ead098

File tree

5 files changed

+87
-31
lines changed

5 files changed

+87
-31
lines changed

‎webapp/src/components/AgentList2.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,15 @@ export default function AgentList2({ agents, fetchAgents }) {
137137
);
138138
}, [searchTerm]);
139139

140+
// Cleanup effect to reset pointer events when component unmounts
141+
useEffect(() => {
142+
return () => {
143+
document.body.style.pointerEvents = 'auto';
144+
document.body.style.cursor = 'auto';
145+
document.body.style.overflow = 'visible';
146+
};
147+
}, []);
148+
140149
async function deleteAgent(agentId) {
141150
if (!agentId) return;
142151

@@ -326,6 +335,36 @@ export default function AgentList2({ agents, fetchAgents }) {
326335
} else {
327336
setOpenNewAgentSheet(open);
328337
}
338+
339+
// Additional check for pointer events with comprehensive cleanup
340+
setTimeout(() => {
341+
if (document.body.style.pointerEvents === 'none') {
342+
document.body.style.pointerEvents = 'auto';
343+
}
344+
345+
// Additional cleanup
346+
document.body.style.cursor = 'auto';
347+
document.body.style.overflow = 'visible';
348+
349+
// Clean up any remaining overlays
350+
const overlays = document.querySelectorAll('[data-radix-dialog-overlay]');
351+
overlays.forEach(overlay => {
352+
if (overlay instanceof HTMLElement) {
353+
overlay.style.pointerEvents = 'none';
354+
}
355+
});
356+
357+
// Clean up any remaining portals
358+
const portals = document.querySelectorAll('[data-radix-portal]');
359+
portals.forEach(portal => {
360+
if (
361+
portal instanceof HTMLElement &&
362+
!portal.querySelector('[data-radix-dialog-content]')
363+
) {
364+
portal.remove();
365+
}
366+
});
367+
}, 50);
329368
}}
330369
editing={!!selectedAgent}
331370
agentId={selectedAgent?._id}

‎webapp/src/components/AvatarUploader.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,11 +111,10 @@ export default function AvatarUploader({
111111
<label
112112
{...getRootProps({ className: 'dropzone', onClick: e => e.stopPropagation() })}
113113
htmlFor='file'
114-
className='block text-center h-full cursor-pointer'
115-
>
114+
className='block text-center h-full cursor-pointer'>
116115
<input id='file' {...getInputProps({ className: 'w-full h-full' })} />
117116
{isDragActive ? (
118-
<p>Drop the icon here ...</p>
117+
<span>Drop the icon here ...</span>
119118
) : uploading ? (
120119
<ButtonSpinner className='ms-1 mt-9' size={20} />
121120
) : files?.length > 0 ? (

‎webapp/src/components/agents/NewAgentSheet.tsx‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,15 @@ export const AgentSheet = ({
477477
}
478478
}, []);
479479

480+
// Cleanup effect to reset pointer events when component unmounts
481+
useEffect(() => {
482+
return () => {
483+
document.body.style.pointerEvents = 'auto';
484+
document.body.style.cursor = 'auto';
485+
document.body.style.overflow = 'visible';
486+
};
487+
}, []);
488+
480489
function showPreview(e: React.ChangeEvent<HTMLInputElement>) {
481490
const file = e.target.files?.[0];
482491
if (file) {
@@ -496,6 +505,7 @@ export const AgentSheet = ({
496505
open={openEditSheet}
497506
onOpenChange={open => {
498507
setOpenEditSheet(open);
508+
499509
// Reset form state when sheet closes
500510
if (!open) {
501511
setToolState(null);
@@ -506,6 +516,11 @@ export const AgentSheet = ({
506516
setIcon(null);
507517
setAllowDelegation(false);
508518
setVerbose(false);
519+
520+
// Reset body styles when sheet closes
521+
document.body.style.pointerEvents = 'auto';
522+
document.body.style.overflow = 'visible';
523+
document.body.style.cursor = 'auto';
509524
}
510525
}}>
511526
{modal}
@@ -527,7 +542,18 @@ export const AgentSheet = ({
527542
</SheetTrigger>
528543
)}
529544

530-
<SheetContent size='md' className='text-foreground overflow-y-auto'>
545+
<SheetContent
546+
size='md'
547+
className='text-foreground overflow-y-auto max-h-screen'
548+
style={{
549+
pointerEvents: 'auto'
550+
}}
551+
onPointerDownOutside={() => {
552+
document.body.style.pointerEvents = 'auto';
553+
}}
554+
onEscapeKeyDown={() => {
555+
document.body.style.pointerEvents = 'auto';
556+
}}>
531557
<SheetHeader>
532558
<SheetTitle>
533559
<div className='flex items-center gap-2'>
@@ -537,7 +563,7 @@ export const AgentSheet = ({
537563
</p>
538564
</div>
539565
</SheetTitle>
540-
<SheetDescription className='border-t border-gray-200 py-3 px-1'>
566+
<div className='border-t border-gray-200 py-3 px-1'>
541567
<form onSubmit={agentPost}>
542568
<section className='pb-3 flex flex-col gap-4'>
543569
<div className='flex justify-between gap-2'>
@@ -639,9 +665,8 @@ export const AgentSheet = ({
639665
className='bg-gray-50 border border-gray-300'
640666
id='role'
641667
placeholder='e.g. Data Analyst'
642-
defaultValue={selectedAgent?.role || role}
643668
rows={3}
644-
value={autocompleteRole.text || selectedAgent?.role}
669+
value={autocompleteRole.text || selectedAgent?.role || role}
645670
onChange={autocompleteRole.handleChange}
646671
onKeyDown={autocompleteRole.handleKeyDown}
647672
/>
@@ -687,8 +712,7 @@ export const AgentSheet = ({
687712
id='goal'
688713
className='resize-none h-20 bg-gray-50 border-gray-300'
689714
placeholder='Extract actionable insights'
690-
defaultValue={selectedAgent?.goal || goal}
691-
value={autocompleteGoal.text || selectedAgent?.goal}
715+
value={autocompleteGoal.text || selectedAgent?.goal || goal}
692716
onChange={autocompleteGoal.handleChange}
693717
onKeyDown={autocompleteGoal.handleKeyDown}
694718
/>
@@ -713,8 +737,7 @@ export const AgentSheet = ({
713737
id='backstory'
714738
className='resize-none h-28 bg-gray-50 border-gray-300'
715739
placeholder="e.g. You're a data analyst at a large company. You're responsible for analyzing data and providing insights to the business. You're currently working on a project to analyze the performance of our marketing campaigns."
716-
defaultValue={selectedAgent?.backstory || backstory}
717-
value={autocompleteBackstory.text || selectedAgent?.backstory}
740+
value={autocompleteBackstory.text || selectedAgent?.backstory || backstory}
718741
onChange={autocompleteBackstory.handleChange}
719742
onKeyDown={autocompleteBackstory.handleKeyDown}
720743
/>
@@ -731,6 +754,9 @@ export const AgentSheet = ({
731754
</div>
732755

733756
<div className='grid w-full items-center gap-1.5'>
757+
<Label className='text-gray-900 font-medium' htmlFor='model'>
758+
Model
759+
</Label>
734760
<DropdownMenu>
735761
<DropdownMenuTrigger className='bg-background border border-gray-300 flex items-center justify-between bg-gray-50 px-4 py-2 rounded-lg'>
736762
<div className='flex items-center gap-2'>
@@ -772,7 +798,7 @@ export const AgentSheet = ({
772798
</Button>
773799
</section>
774800
</form>
775-
</SheetDescription>
801+
</div>
776802
</SheetHeader>
777803
</SheetContent>
778804
</Sheet>

‎webapp/src/components/variables/VariableTable.tsx‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function VariableTable({
4040
},
4141
() => {},
4242
err => {
43-
toast.error(err);
43+
// toast.error(err);
4444
},
4545
router
4646
);
@@ -89,33 +89,28 @@ export default function VariableTable({
8989
<tr>
9090
<th
9191
scope='col'
92-
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
93-
>
92+
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
9493
Name
9594
</th>
9695
<th
9796
scope='col'
98-
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
99-
>
97+
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
10098
Default Value
10199
</th>
102100
<th
103101
scope='col'
104-
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
105-
>
102+
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
106103
Created By
107104
</th>
108105
<th
109106
scope='col'
110-
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
111-
>
107+
className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
112108
Created On
113109
</th>
114110

115111
<th
116112
scope='col'
117-
className='px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
118-
>
113+
className='px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
119114
Actions
120115
</th>
121116
</tr>
@@ -130,12 +125,10 @@ export default function VariableTable({
130125
deletingMap[variable._id]
131126
? 'bg-red-400'
132127
: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-500 dark:text-gray-50'
133-
)}
134-
>
128+
)}>
135129
<td
136130
className='px-6 py-4 whitespace-nowrap'
137-
onClick={() => router.push(`/${resourceSlug}/variable/${variable._id}/edit`)}
138-
>
131+
onClick={() => router.push(`/${resourceSlug}/variable/${variable._id}/edit`)}>
139132
<div className='text-sm text-gray-900 dark:text-white'>{variable.name}</div>
140133
</td>
141134
<td className='px-6 py-4 whitespace-nowrap'>
@@ -159,8 +152,7 @@ export default function VariableTable({
159152
setDeletingVariable(variable);
160153
setOpen(true);
161154
}}
162-
className='text-red-500 hover:text-red-700'
163-
>
155+
className='text-red-500 hover:text-red-700'>
164156
<TrashIcon className='h-5 w-5' aria-hidden='true' />
165157
</button>
166158
</td>

‎webapp/src/pages/[resourceSlug]/variables.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,15 @@ export default function Variables(props) {
5353

5454
<VariableTable variables={filteredVariables} fetchVariables={fetchVariables} />
5555

56-
{variables.length === 0 && (
56+
{/* {variables.length === 0 && (
5757
<NewButtonSection
5858
link={`/${resourceSlug}/variable/add`}
5959
emptyMessage={'No variables'}
6060
message={'Get started by adding variables.'}
6161
buttonIcon={<PlusIcon className='-ml-0.5 mr-1.5 h-5 w-5' aria-hidden='true' />}
6262
buttonMessage={'Add Variable'}
6363
/>
64-
)}
64+
)} */}
6565
<CreateVariableModal
6666
open={createVariableOpen}
6767
setOpen={setCreateVariableOpen}

0 commit comments

Comments
 (0)