cleanup checkbox in dark mode

Author: waleed

apps/docs/content/docs/en/blocks/guardrails.mdx

@@ -10,6 +10,16 @@ import { Video } from '@/components/ui/video'
 
 The Guardrails block validates and protects your AI workflows by checking content against multiple validation types. Ensure data quality, prevent hallucinations, detect PII, and enforce format requirements before content moves through your workflow.
 
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/guardrails.png"
+    alt="Guardrails Block"
+    width={500}
+    height={350}
+    className="my-6"
+  />
+</div>
+
 ## Overview
 
 The Guardrails block enables you to:
@@ -96,6 +106,10 @@ Uses Retrieval-Augmented Generation (RAG) with LLM scoring to detect when AI-gen
 
 Detects personally identifiable information using Microsoft Presidio. Supports 40+ entity types across multiple countries and languages.
 
+<div className="mx-auto w-3/5 overflow-hidden rounded-lg">
+  <Video src="guardrails.mp4" width={500} height={350} />
+</div>
+
 **How It Works:**
 1. Scans content for PII entities using pattern matching and NLP
 2. Returns detected entities with locations and confidence scores
@@ -204,6 +218,10 @@ Additional outputs by type:
   </ol>
 </div>
 
+<div className="mx-auto w-3/5 overflow-hidden rounded-lg">
+  <Video src="guardrails-example.mp4" width={500} height={350} />
+</div>
+
 ### Validate Email Format
 
 <div className="mb-4 rounded-md border p-4">

apps/docs/public/static/blocks/guardrails.png

@@ -29,7 +29,6 @@ export async function POST(request: NextRequest) {
       piiLanguage,
     } = body
 
-    // Validate required fields
     if (!validationType) {
       return NextResponse.json({
         success: true,
@@ -42,8 +41,6 @@ export async function POST(request: NextRequest) {
       })
     }
 
-    // Handle empty or missing input - but allow empty strings for JSON validation
-    // (empty string is invalid JSON, which is a valid validation result)
     if (input === undefined || input === null) {
       return NextResponse.json({
         success: true,
@@ -56,7 +53,6 @@ export async function POST(request: NextRequest) {
       })
     }
 
-    // Validate validationType
     if (
       validationType !== 'json' &&
       validationType !== 'regex' &&
@@ -74,7 +70,6 @@ export async function POST(request: NextRequest) {
       })
     }
 
-    // For regex validation, ensure regex pattern is provided
     if (validationType === 'regex' && !regex) {
       return NextResponse.json({
         success: true,
@@ -87,7 +82,6 @@ export async function POST(request: NextRequest) {
       })
     }
 
-    // For hallucination validation, ensure model is provided
     if (validationType === 'hallucination' && !model) {
       return NextResponse.json({
         success: true,
@@ -100,15 +94,13 @@ export async function POST(request: NextRequest) {
       })
     }
 
-    // Convert input to string for validation
     const inputStr = convertInputToString(input)
 
     logger.info(`[${requestId}] Executing validation locally`, {
       validationType,
       inputType: typeof input,
     })
 
-    // Execute validation
     const validationResult = await executeValidation(
       validationType,
       inputStr,
@@ -146,7 +138,6 @@ export async function POST(request: NextRequest) {
     })
   } catch (error: any) {
     logger.error(`[${requestId}] Guardrails validation failed`, { error })
-    // Return validation failure instead of 500 error
     return NextResponse.json({
       success: true,
       output: {

apps/sim/app/api/guardrails/validate/route.ts

@@ -1,11 +1,17 @@
 'use client'
 
-import React, { useState, useMemo } from 'react'
-import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { useMemo, useState } from 'react'
+import { Settings2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Settings2 } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
 
 interface GroupedCheckboxListProps {
   blockId: string
@@ -35,20 +41,20 @@ export function GroupedCheckboxList({
 
   // Get preview value or use store value
   const previewValue = isPreview && subBlockValues ? subBlockValues[subBlockId]?.value : undefined
-  const selectedValues = (isPreview ? previewValue : storeValue) as string[] || []
+  const selectedValues = ((isPreview ? previewValue : storeValue) as string[]) || []
 
   // Group options by their group property
   const groupedOptions = useMemo(() => {
     const groups: Record<string, { label: string; id: string }[]> = {}
-    
+
     options.forEach((option) => {
       const groupName = option.group || 'Other'
       if (!groups[groupName]) {
         groups[groupName] = []
       }
       groups[groupName].push({ label: option.label, id: option.id })
     })
-    
+
     return groups
   }, [options])
 
@@ -79,41 +85,45 @@ export function GroupedCheckboxList({
 
   const SelectedCountDisplay = () => {
     if (noneSelected) {
-      return <span className="text-muted-foreground text-sm">None selected</span>
+      return <span className='text-muted-foreground text-sm'>None selected</span>
     }
     if (allSelected) {
-      return <span className="text-sm">All selected</span>
+      return <span className='text-sm'>All selected</span>
     }
-    return <span className="text-sm">{selectedValues.length} selected</span>
+    return <span className='text-sm'>{selectedValues.length} selected</span>
   }
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline" className="w-full justify-between font-normal" disabled={disabled}>
-          <span className="flex items-center gap-2">
-            <Settings2 className="h-4 w-4" />
-            Configure PII Types
+        <Button
+          variant='outline'
+          className='h-10 w-full justify-between border-input bg-background px-3 font-normal text-sm hover:bg-accent hover:text-accent-foreground'
+          disabled={disabled}
+        >
+          <span className='flex items-center gap-2 text-muted-foreground'>
+            <Settings2 className='h-4 w-4' />
+            <span>Configure PII Types</span>
           </span>
           <SelectedCountDisplay />
         </Button>
       </DialogTrigger>
       <DialogContent
-        className="max-w-2xl max-h-[80vh] flex flex-col"
+        className='flex max-h-[80vh] max-w-2xl flex-col'
         onWheel={(e) => e.stopPropagation()}
       >
         <DialogHeader>
           <DialogTitle>Select PII Types to Detect</DialogTitle>
-          <p className="text-sm text-muted-foreground">
+          <p className='text-muted-foreground text-sm'>
             Choose which types of personally identifiable information to detect and block.
           </p>
         </DialogHeader>
 
         {/* Header with Select All and Clear */}
-        <div className="flex items-center justify-between border-b pb-3">
-          <div className="flex items-center gap-2">
+        <div className='flex items-center justify-between border-b pb-3'>
+          <div className='flex items-center gap-2'>
             <Checkbox
-              id="select-all"
+              id='select-all'
               checked={allSelected}
               onCheckedChange={(checked) => {
                 if (checked) {
@@ -125,37 +135,40 @@ export function GroupedCheckboxList({
               disabled={disabled}
             />
             <label
-              htmlFor="select-all"
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+              htmlFor='select-all'
+              className='cursor-pointer font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
             >
               Select all entities
             </label>
           </div>
           <Button
-            variant="ghost"
-            size="sm"
+            variant='ghost'
+            size='sm'
             onClick={handleClear}
             disabled={disabled || noneSelected}
+            className='w-[85px]'
           >
-            Clear
+            <span className='flex items-center gap-1'>
+              Clear{!noneSelected && <span>({selectedValues.length})</span>}
+            </span>
           </Button>
         </div>
 
         {/* Scrollable grouped checkboxes */}
         <div
-          className="flex-1 overflow-y-auto pr-4"
+          className='flex-1 overflow-y-auto pr-4'
           onWheel={(e) => e.stopPropagation()}
           style={{ maxHeight: '60vh' }}
         >
-          <div className="space-y-6">
+          <div className='space-y-6'>
             {Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
               <div key={groupName}>
-                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+                <h3 className='mb-3 font-semibold text-muted-foreground text-xs uppercase tracking-wider'>
                   {groupName}
                 </h3>
-                <div className="space-y-3">
+                <div className='space-y-3'>
                   {groupOptions.map((option) => (
-                    <div key={option.id} className="flex items-center gap-2">
+                    <div key={option.id} className='flex items-center gap-2'>
                       <Checkbox
                         id={`${subBlockId}-${option.id}`}
                         checked={selectedValues.includes(option.id)}
@@ -164,7 +177,7 @@ export function GroupedCheckboxList({
                       />
                       <label
                         htmlFor={`${subBlockId}-${option.id}`}
-                        className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                        className='cursor-pointer text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
                       >
                         {option.label}
                       </label>
@@ -179,4 +192,3 @@ export function GroupedCheckboxList({
     </Dialog>
   )
 }
-

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/grouped-checkbox-list.tsx

@@ -6,11 +6,11 @@ export { ConditionInput } from './condition-input'
 export { CredentialSelector } from './credential-selector/credential-selector'
 export { DocumentSelector } from './document-selector/document-selector'
 export { Dropdown } from './dropdown'
-export { GroupedCheckboxList } from './grouped-checkbox-list'
 export { EvalInput } from './eval-input'
 export { FileSelectorInput } from './file-selector/file-selector-input'
 export { FileUpload } from './file-upload'
 export { FolderSelectorInput } from './folder-selector/components/folder-selector-input'
+export { GroupedCheckboxList } from './grouped-checkbox-list'
 export { InputMapping } from './input-mapping/input-mapping'
 export { KnowledgeBaseSelector } from './knowledge-base-selector/knowledge-base-selector'
 export { LongInput } from './long-input'