improvement(emcn): modal padding, api, chat, form

Author: emir-karabeg

apps/sim/app/api/form/utils.test.ts

@@ -358,7 +358,6 @@ describe('Form API Utils', () => {
       const { DEFAULT_FORM_CUSTOMIZATIONS } = await import('@/app/api/form/utils')
 
       expect(DEFAULT_FORM_CUSTOMIZATIONS).toEqual({
-        primaryColor: '#3972F6',
         welcomeMessage: '',
         thankYouTitle: 'Thank you!',
         thankYouMessage: 'Your response has been submitted successfully.',

apps/sim/app/api/form/utils.ts

@@ -195,9 +195,9 @@ export interface FormCustomizations {
 
 /**
  * Default form customizations
+ * Note: primaryColor is intentionally undefined to allow thank you screen to use its green default
  */
 export const DEFAULT_FORM_CUSTOMIZATIONS: FormCustomizations = {
-  primaryColor: '#3972F6',
   welcomeMessage: '',
   thankYouTitle: 'Thank you!',
   thankYouMessage: 'Your response has been submitted successfully.',

apps/sim/app/form/[identifier]/components/form-field.tsx

@@ -21,6 +21,7 @@ interface FormFieldProps {
   primaryColor?: string
   label?: string
   description?: string
+  required?: boolean
 }
 
 function formatFileSize(bytes: number): string {
@@ -36,6 +37,7 @@ export function FormField({
   primaryColor,
   label,
   description,
+  required,
 }: FormFieldProps) {
   const [isDragging, setIsDragging] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -50,6 +52,7 @@ export function FormField({
 
   const displayLabel = label || formatLabel(field.name)
   const placeholder = description || field.description || ''
+  const isRequired = required ?? field.required
 
   const handleFileDrop = useCallback(
     (e: React.DragEvent) => {
@@ -216,7 +219,7 @@ export function FormField({
     <div className='space-y-2'>
       <Label className={`${inter.className} font-medium text-[14px] text-foreground`}>
         {displayLabel}
-        {field.required && <span className='ml-0.5 text-red-500'>*</span>}
+        {isRequired && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
       </Label>
       {renderInput()}
     </div>

apps/sim/app/form/[identifier]/components/thank-you-screen.tsx

@@ -10,19 +10,29 @@ interface ThankYouScreenProps {
   primaryColor?: string
 }
 
+/** Default green color matching --brand-tertiary-2 */
+const DEFAULT_THANK_YOU_COLOR = '#32bd7e'
+
+/** Legacy blue default that should be treated as "no custom color" */
+const LEGACY_BLUE_DEFAULT = '#3972F6'
+
 export function ThankYouScreen({ title, message, primaryColor }: ThankYouScreenProps) {
+  // Treat legacy blue default as no custom color, fall back to green
+  const thankYouColor =
+    primaryColor && primaryColor !== LEGACY_BLUE_DEFAULT ? primaryColor : DEFAULT_THANK_YOU_COLOR
+
   return (
     <main className='flex flex-1 flex-col items-center justify-center p-4'>
       <div className='flex flex-col items-center text-center'>
         <div
           className='flex h-20 w-20 items-center justify-center rounded-full'
-          style={{ backgroundColor: `${primaryColor}15` }}
+          style={{ backgroundColor: `${thankYouColor}15` }}
         >
-          <CheckCircle2 className='h-10 w-10' style={{ color: primaryColor }} />
+          <CheckCircle2 className='h-10 w-10' style={{ color: thankYouColor }} />
         </div>
         <h2
           className={`${soehne.className} mt-6 font-medium text-[32px] tracking-tight`}
-          style={{ color: primaryColor }}
+          style={{ color: thankYouColor }}
         >
           {title}
         </h2>

apps/sim/app/form/[identifier]/form.tsx

@@ -244,7 +244,7 @@ export default function Form({ identifier }: { identifier: string }) {
             <ThankYouScreen
               title={thankYouData.title}
               message={thankYouData.message}
-              primaryColor={primaryColor}
+              primaryColor={formConfig?.customizations?.primaryColor}
             />
           </div>
           {formConfig?.showBranding !== false ? (
@@ -307,6 +307,7 @@ export default function Form({ identifier }: { identifier: string }) {
                       primaryColor={primaryColor}
                       label={config?.label}
                       description={config?.description}
+                      required={config?.required}
                     />
                   )
                 })

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx

@@ -123,7 +123,7 @@ export function CreateChunkModal({
           <ModalHeader>Create Chunk</ModalHeader>
 
           <form>
-            <ModalBody className='!pb-[16px]'>
+            <ModalBody>
               <div className='flex flex-col gap-[8px]'>
                 {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -399,7 +399,7 @@ export function DocumentTagsModal({
           </div>
         </ModalHeader>
 
-        <ModalBody className='!pb-[16px]'>
+        <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='space-y-[8px]'>
               <Label>Tags</Label>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx

@@ -260,7 +260,7 @@ export function EditChunkModal({
           </ModalHeader>
 
           <form>
-            <ModalBody className='!pb-[16px]'>
+            <ModalBody>
               <div className='flex flex-col gap-[8px]'>
                 {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx

@@ -224,7 +224,7 @@ export function AddDocumentsModal({
       <ModalContent>
         <ModalHeader>Add Documents</ModalHeader>
 
-        <ModalBody className='!pb-[16px]'>
+        <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='space-y-[12px]'>
               {fileError && (
@@ -242,8 +242,8 @@ export function AddDocumentsModal({
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
                   className={cn(
-                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--c-575757)] border-dashed py-[10px]',
-                    isDragging && 'border-[var(--brand-primary-hex)]'
+                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                    isDragging && 'border-[var(--surface-7)]'
                   )}
                 >
                   <input

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -313,7 +313,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
             </div>
           </ModalHeader>
 
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[8px]'>
                 <Label>
@@ -458,7 +458,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
       <Modal open={deleteTagDialogOpen} onOpenChange={setDeleteTagDialogOpen}>
         <ModalContent size='sm'>
           <ModalHeader>Delete Tag</ModalHeader>
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div className='space-y-[8px]'>
               <p className='text-[12px] text-[var(--text-secondary)]'>
                 Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
@@ -497,7 +497,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
       <Modal open={viewDocumentsDialogOpen} onOpenChange={setViewDocumentsDialogOpen}>
         <ModalContent size='sm'>
           <ModalHeader>Documents using "{selectedTag?.displayName}"</ModalHeader>
-          <ModalBody className='!pb-[16px]'>
+          <ModalBody>
             <div className='space-y-[8px]'>
               <p className='text-[12px] text-[var(--text-tertiary)]'>
                 {selectedTagUsage?.documentCount || 0} document