Refactor NewAgentSheet and VariableTable components for improved UI and cleanup

- Simplified body style resets in NewAgentSheet when the sheet closes, removing unnecessary timeout logic.
- Enhanced VariableTable by commenting out error toast for better error handling and cleaning up JSX for consistency.
- Updated className attributes for better readability and structure in VariableTable.

Author: iandjx

webapp/src/components/agents/NewAgentSheet.tsx

@@ -517,29 +517,10 @@ export const AgentSheet = ({
 					setAllowDelegation(false);
 					setVerbose(false);
 
-					// Force reset pointer events and cursor with delay
-					setTimeout(() => {
-						// Force reset pointer events if they're blocked
-						if (document.body.style.pointerEvents === 'none') {
-							document.body.style.pointerEvents = 'auto';
-						}
-
-						// Force reset overflow if it's hidden
-						if (document.body.style.overflow === 'hidden') {
-							document.body.style.overflow = 'visible';
-						}
-
-						// Additional cleanup for cursor
-						document.body.style.cursor = 'auto';
-
-						// Force cleanup of any remaining overlays
-						const overlays = document.querySelectorAll('[data-radix-dialog-overlay]');
-						overlays.forEach(overlay => {
-							if (overlay instanceof HTMLElement) {
-								overlay.style.pointerEvents = 'none';
-							}
-						});
-					}, 100);
+					// Reset body styles when sheet closes
+					document.body.style.pointerEvents = 'auto';
+					document.body.style.overflow = 'visible';
+					document.body.style.cursor = 'auto';
 				}
 			}}>
 			{modal}
@@ -563,10 +544,9 @@ export const AgentSheet = ({
 
 			<SheetContent
 				size='md'
-				className='text-foreground overflow-y-auto'
+				className='text-foreground overflow-y-auto max-h-screen'
 				style={{
-					pointerEvents: 'auto',
-					overflow: 'visible'
+					pointerEvents: 'auto'
 				}}
 				onPointerDownOutside={() => {
 					document.body.style.pointerEvents = 'auto';
@@ -774,6 +754,9 @@ export const AgentSheet = ({
 								</div>
 
 								<div className='grid w-full items-center gap-1.5'>
+									<Label className='text-gray-900 font-medium' htmlFor='model'>
+										Model
+									</Label>
 									<DropdownMenu>
 										<DropdownMenuTrigger className='bg-background border border-gray-300 flex items-center justify-between bg-gray-50 px-4 py-2 rounded-lg'>
 											<div className='flex items-center gap-2'>

webapp/src/components/variables/VariableTable.tsx

@@ -40,7 +40,7 @@ export default function VariableTable({
 				},
 				() => {},
 				err => {
-					toast.error(err);
+					// toast.error(err);
 				},
 				router
 			);
@@ -89,33 +89,28 @@ export default function VariableTable({
 						<tr>
 							<th
 								scope='col'
-								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
-							>
+								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
 								Name
 							</th>
 							<th
 								scope='col'
-								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
-							>
+								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
 								Default Value
 							</th>
 							<th
 								scope='col'
-								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
-							>
+								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
 								Created By
 							</th>
 							<th
 								scope='col'
-								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
-							>
+								className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
 								Created On
 							</th>
 
 							<th
 								scope='col'
-								className='px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'
-							>
+								className='px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-50'>
 								Actions
 							</th>
 						</tr>
@@ -130,12 +125,10 @@ export default function VariableTable({
 									deletingMap[variable._id]
 										? 'bg-red-400'
 										: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-500 dark:text-gray-50'
-								)}
-							>
+								)}>
 								<td
 									className='px-6 py-4 whitespace-nowrap'
-									onClick={() => router.push(`/${resourceSlug}/variable/${variable._id}/edit`)}
-								>
+									onClick={() => router.push(`/${resourceSlug}/variable/${variable._id}/edit`)}>
 									<div className='text-sm text-gray-900 dark:text-white'>{variable.name}</div>
 								</td>
 								<td className='px-6 py-4 whitespace-nowrap'>
@@ -159,8 +152,7 @@ export default function VariableTable({
 											setDeletingVariable(variable);
 											setOpen(true);
 										}}
-										className='text-red-500 hover:text-red-700'
-									>
+										className='text-red-500 hover:text-red-700'>
 										<TrashIcon className='h-5 w-5' aria-hidden='true' />
 									</button>
 								</td>

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

@@ -53,15 +53,15 @@ export default function Variables(props) {
 
 			<VariableTable variables={filteredVariables} fetchVariables={fetchVariables} />
 
-			{variables.length === 0 && (
+			{/* {variables.length === 0 && (
 				<NewButtonSection
 					link={`/${resourceSlug}/variable/add`}
 					emptyMessage={'No variables'}
 					message={'Get started by adding variables.'}
 					buttonIcon={<PlusIcon className='-ml-0.5 mr-1.5 h-5 w-5' aria-hidden='true' />}
 					buttonMessage={'Add Variable'}
 				/>
-			)}
+			)} */}
 			<CreateVariableModal
 				open={createVariableOpen}
 				setOpen={setCreateVariableOpen}