improvement(knowledge): inline field validation, toast for server errors

Author: TheodoreSpeaks

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

@@ -22,7 +22,7 @@ import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { type FieldErrors, useForm } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import type { StrategyOptions } from '@/lib/chunkers/types'
 import { KNOWLEDGE_BASE_DESCRIPTION_MAX_LENGTH } from '@/lib/knowledge/constants'
@@ -142,11 +142,14 @@ export const CreateBaseModal = memo(function CreateBaseModal({
     onOpenChange(open)
   }
 
-  const { register, handleSubmit, reset, watch, setValue } = useForm<
-    FormInputValues,
-    unknown,
-    FormValues
-  >({
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<FormInputValues, unknown, FormValues>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
       name: '',
@@ -220,15 +223,6 @@ export const CreateBaseModal = memo(function CreateBaseModal({
   const isSubmitting =
     createKnowledgeBaseMutation.isPending || deleteKnowledgeBaseMutation.isPending || isUploading
 
-  const onInvalid = (formErrors: FieldErrors<FormInputValues>) => {
-    const firstMessage = Object.values(formErrors).find(
-      (fieldError) => typeof fieldError?.message === 'string'
-    )?.message
-    toast.error(
-      typeof firstMessage === 'string' ? firstMessage : 'Please fix the errors and try again'
-    )
-  }
-
   const onSubmit = async (data: FormValues) => {
     try {
       const strategyOptions: StrategyOptions | undefined =
@@ -293,7 +287,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
     <ChipModal open={open} onOpenChange={handleClose} srTitle='Create Knowledge Base' size='lg'>
       <ChipModalHeader onClose={() => handleClose(false)}>Create Knowledge Base</ChipModalHeader>
 
-      <form onSubmit={handleSubmit(onSubmit, onInvalid)} className='flex min-h-0 flex-1 flex-col'>
+      <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
         <button type='submit' hidden disabled={isSubmitting || !nameValue?.trim()} />
         <ChipModalBody>
           <input
@@ -305,10 +299,11 @@ export const CreateBaseModal = memo(function CreateBaseModal({
             readOnly
           />
 
-          <ChipModalField type='custom' title='Name'>
+          <ChipModalField type='custom' title='Name' error={errors.name?.message}>
             <ChipInput
               placeholder='Enter knowledge base name'
               {...register('name')}
+              error={Boolean(errors.name)}
               autoComplete='off'
               autoCorrect='off'
               autoCapitalize='off'
@@ -317,36 +312,49 @@ export const CreateBaseModal = memo(function CreateBaseModal({
             />
           </ChipModalField>
 
-          <ChipModalField type='custom' title='Description'>
+          <ChipModalField type='custom' title='Description' error={errors.description?.message}>
             <ChipTextarea
               placeholder='Describe this knowledge base (optional)'
               rows={4}
               {...register('description')}
+              error={Boolean(errors.description)}
             />
           </ChipModalField>
 
           <div className='flex gap-3'>
-            <ChipModalField type='custom' title='Min Chunk Size (characters)' className='flex-1'>
+            <ChipModalField
+              type='custom'
+              title='Min Chunk Size (characters)'
+              className='flex-1'
+              error={errors.minChunkSize?.message}
+            >
               <ChipInput
                 type='number'
                 min={1}
                 max={2000}
                 step={1}
                 placeholder='100'
                 {...register('minChunkSize', { valueAsNumber: true })}
+                error={Boolean(errors.minChunkSize)}
                 autoComplete='off'
                 data-form-type='other'
               />
             </ChipModalField>
 
-            <ChipModalField type='custom' title='Max Chunk Size (tokens)' className='flex-1'>
+            <ChipModalField
+              type='custom'
+              title='Max Chunk Size (tokens)'
+              className='flex-1'
+              error={errors.maxChunkSize?.message}
+            >
               <ChipInput
                 type='number'
                 min={100}
                 max={4000}
                 step={1}
                 placeholder='1024'
                 {...register('maxChunkSize', { valueAsNumber: true })}
+                error={Boolean(errors.maxChunkSize)}
                 autoComplete='off'
                 data-form-type='other'
               />
@@ -357,6 +365,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
             type='custom'
             title='Overlap (tokens)'
             hint='1 token ≈ 4 characters. Max chunk size and overlap are in tokens.'
+            error={errors.overlapSize?.message}
           >
             <ChipInput
               type='number'
@@ -365,6 +374,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
               step={1}
               placeholder='200'
               {...register('overlapSize', { valueAsNumber: true })}
+              error={Boolean(errors.overlapSize)}
               autoComplete='off'
               data-form-type='other'
             />
@@ -390,10 +400,12 @@ export const CreateBaseModal = memo(function CreateBaseModal({
                 type='custom'
                 title='Regex Pattern'
                 hint='Text will be split at each match of this regex pattern.'
+                error={errors.regexPattern?.message}
               >
                 <ChipInput
                   placeholder='e.g. \\n\\n or (?<=\\})\\s*(?=\\{)'
                   {...register('regexPattern')}
+                  error={Boolean(errors.regexPattern)}
                   autoComplete='off'
                   data-form-type='other'
                 />
@@ -512,7 +524,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
                     : 'Creating...'
                 : 'Creating...'
               : 'Create',
-            onClick: handleSubmit(onSubmit, onInvalid),
+            onClick: handleSubmit(onSubmit),
             disabled: isSubmitting || !nameValue?.trim(),
           }}
         />

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

@@ -7,7 +7,6 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  toast,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { KNOWLEDGE_BASE_DESCRIPTION_MAX_LENGTH } from '@/lib/knowledge/constants'
@@ -39,6 +38,8 @@ export const EditKnowledgeBaseModal = memo(function EditKnowledgeBaseModal({
 }: EditKnowledgeBaseModalProps) {
   const [name, setName] = useState(initialName)
   const [description, setDescription] = useState(initialDescription)
+  const [nameError, setNameError] = useState<string | null>(null)
+  const [descriptionError, setDescriptionError] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   /**
@@ -51,24 +52,38 @@ export const EditKnowledgeBaseModal = memo(function EditKnowledgeBaseModal({
     if (open) {
       setName(initialName)
       setDescription(initialDescription)
+      setNameError(null)
+      setDescriptionError(null)
     }
   }
 
-  const validate = (): string | null => {
-    if (!name.trim()) return 'Name is required'
-    if (name.trim().length > 100) return 'Name must be less than 100 characters'
+  const validate = (): boolean => {
+    let valid = true
+
+    if (!name.trim()) {
+      setNameError('Name is required')
+      valid = false
+    } else if (name.trim().length > 100) {
+      setNameError('Name must be less than 100 characters')
+      valid = false
+    } else {
+      setNameError(null)
+    }
+
     if (description.length > KNOWLEDGE_BASE_DESCRIPTION_MAX_LENGTH) {
-      return `Description must be ${KNOWLEDGE_BASE_DESCRIPTION_MAX_LENGTH} characters or less`
+      setDescriptionError(
+        `Description must be ${KNOWLEDGE_BASE_DESCRIPTION_MAX_LENGTH} characters or less`
+      )
+      valid = false
+    } else {
+      setDescriptionError(null)
     }
-    return null
+
+    return valid
   }
 
   const handleSubmit = async () => {
-    const validationError = validate()
-    if (validationError) {
-      toast.error(validationError)
-      return
-    }
+    if (!validate()) return
 
     setIsSubmitting(true)
 
@@ -96,6 +111,7 @@ export const EditKnowledgeBaseModal = memo(function EditKnowledgeBaseModal({
           onChange={setName}
           placeholder='Enter knowledge base name'
           required
+          error={nameError ?? undefined}
           autoComplete='off'
         />
         <ChipModalField
@@ -105,6 +121,7 @@ export const EditKnowledgeBaseModal = memo(function EditKnowledgeBaseModal({
           onChange={setDescription}
           placeholder='Describe this knowledge base (optional)'
           rows={4}
+          error={descriptionError ?? undefined}
         />
         {chunkingConfig && (
           <ChipModalField type='custom' title='Chunking Configuration'>