fix(kb): persist chunking config correctly

Author: icecrasher321

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

@@ -20,6 +20,7 @@ interface BaseCardProps {
   createdAt?: string
   updatedAt?: string
   connectorTypes?: string[]
+  chunkingConfig?: { maxSize: number; minSize: number; overlap: number }
   onUpdate?: (id: string, name: string, description: string) => Promise<void>
   onDelete?: (id: string) => Promise<void>
 }
@@ -78,6 +79,7 @@ export function BaseCard({
   description,
   updatedAt,
   connectorTypes = [],
+  chunkingConfig,
   onUpdate,
   onDelete,
 }: BaseCardProps) {
@@ -256,6 +258,7 @@ export function BaseCard({
           knowledgeBaseId={id}
           initialName={title}
           initialDescription={description === 'No description provided' ? '' : description}
+          chunkingConfig={chunkingConfig}
           onSave={handleSave}
         />
       )}

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

@@ -358,25 +358,31 @@ export const CreateBaseModal = memo(function CreateBaseModal({
                     <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
                     <Input
                       id='minChunkSize'
+                      type='number'
+                      min={1}
+                      max={2000}
+                      step={1}
                       placeholder='100'
                       {...register('minChunkSize', { valueAsNumber: true })}
                       className={cn(errors.minChunkSize && 'border-[var(--text-error)]')}
                       autoComplete='off'
                       data-form-type='other'
-                      name='min-chunk-size'
                     />
                   </div>
 
                   <div className='flex flex-col gap-2'>
                     <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
                     <Input
                       id='maxChunkSize'
+                      type='number'
+                      min={100}
+                      max={4000}
+                      step={1}
                       placeholder='1024'
                       {...register('maxChunkSize', { valueAsNumber: true })}
                       className={cn(errors.maxChunkSize && 'border-[var(--text-error)]')}
                       autoComplete='off'
                       data-form-type='other'
-                      name='max-chunk-size'
                     />
                   </div>
                 </div>
@@ -385,12 +391,15 @@ export const CreateBaseModal = memo(function CreateBaseModal({
                   <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
                   <Input
                     id='overlapSize'
+                    type='number'
+                    min={0}
+                    max={500}
+                    step={1}
                     placeholder='200'
                     {...register('overlapSize', { valueAsNumber: true })}
                     className={cn(errors.overlapSize && 'border-[var(--text-error)]')}
                     autoComplete='off'
                     data-form-type='other'
-                    name='overlap-size'
                   />
                   <p className='text-[var(--text-muted)] text-xs'>
                     1 token ≈ 4 characters. Max chunk size and overlap are in tokens.

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

@@ -17,6 +17,7 @@ import {
   Textarea,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import type { ChunkingConfig } from '@/lib/knowledge/types'
 
 const logger = createLogger('EditKnowledgeBaseModal')
 
@@ -26,6 +27,7 @@ interface EditKnowledgeBaseModalProps {
   knowledgeBaseId: string
   initialName: string
   initialDescription: string
+  chunkingConfig?: ChunkingConfig
   onSave: (id: string, name: string, description: string) => Promise<void>
 }
 
@@ -49,6 +51,7 @@ export const EditKnowledgeBaseModal = memo(function EditKnowledgeBaseModal({
   knowledgeBaseId,
   initialName,
   initialDescription,
+  chunkingConfig,
   onSave,
 }: EditKnowledgeBaseModalProps) {
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -137,6 +140,47 @@ export const EditKnowledgeBaseModal = memo(function EditKnowledgeBaseModal({
                   </p>
                 )}
               </div>
+
+              {chunkingConfig && (
+                <div className='flex flex-col gap-2'>
+                  <Label>Chunking Configuration</Label>
+                  <div className='grid grid-cols-3 gap-2'>
+                    <div className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-2)] px-2.5 py-2'>
+                      <p className='text-[var(--text-tertiary)] text-[11px] leading-tight'>
+                        Max Size
+                      </p>
+                      <p className='font-medium text-[var(--text-primary)] text-sm'>
+                        {chunkingConfig.maxSize.toLocaleString()}
+                        <span className='ml-0.5 font-normal text-[var(--text-tertiary)] text-[11px]'>
+                          tokens
+                        </span>
+                      </p>
+                    </div>
+                    <div className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-2)] px-2.5 py-2'>
+                      <p className='text-[var(--text-tertiary)] text-[11px] leading-tight'>
+                        Min Size
+                      </p>
+                      <p className='font-medium text-[var(--text-primary)] text-sm'>
+                        {chunkingConfig.minSize.toLocaleString()}
+                        <span className='ml-0.5 font-normal text-[var(--text-tertiary)] text-[11px]'>
+                          chars
+                        </span>
+                      </p>
+                    </div>
+                    <div className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-2)] px-2.5 py-2'>
+                      <p className='text-[var(--text-tertiary)] text-[11px] leading-tight'>
+                        Overlap
+                      </p>
+                      <p className='font-medium text-[var(--text-primary)] text-sm'>
+                        {chunkingConfig.overlap.toLocaleString()}
+                        <span className='ml-0.5 font-normal text-[var(--text-tertiary)] text-[11px]'>
+                          tokens
+                        </span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </ModalBody>
 

apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx

@@ -602,6 +602,7 @@ export function Knowledge() {
           knowledgeBaseId={activeKnowledgeBase.id}
           initialName={activeKnowledgeBase.name}
           initialDescription={activeKnowledgeBase.description || ''}
+          chunkingConfig={activeKnowledgeBase.chunkingConfig}
           onSave={handleUpdateKnowledgeBase}
         />
       )}