fix(knowledge-ux): fixed ux for knowledge base

apps/sim/app/w/[id]/components/loop-node/loop-node.tsx

@@ -94,7 +94,7 @@ export const LoopNodeComponent = memo(({ data, selected, id }: NodeProps) => {
   const getNestedStyles = () => {
     // Base styles
     const styles: Record<string, string> = {
-      backgroundColor: 'transparent',
+      backgroundColor: 'rgba(0, 0, 0, 0.02)',
     }
 
     // Apply nested styles

apps/sim/app/w/[id]/components/parallel-node/parallel-config.ts

@@ -6,7 +6,7 @@ export const ParallelTool = {
   name: 'Parallel',
   description: 'Parallel Execution',
   icon: SplitIcon,
-  bgColor: '#8BC34A',
+  bgColor: '#FEE12B',
   data: {
     label: 'Parallel',
     parallelType: 'collection' as 'collection' | 'count',

apps/sim/app/w/[id]/components/parallel-node/parallel-node.tsx

@@ -111,7 +111,7 @@ export const ParallelNodeComponent = memo(({ data, selected, id }: NodeProps) =>
   const getNestedStyles = () => {
     // Base styles
     const styles: Record<string, string> = {
-      backgroundColor: 'transparent',
+      backgroundColor: 'rgba(0, 0, 0, 0.02)',
     }
 
     // Apply nested styles

apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx

@@ -81,7 +81,8 @@ export function Code({
     (useSubBlockStore((state) => state.getValue(blockId, collapsedStateKey)) as boolean) ?? false
   const setCollapsedValue = useSubBlockStore((state) => state.setValue)
 
-  const showCollapseButton = subBlockId === 'responseFormat' && code.split('\n').length > 5
+  const showCollapseButton =
+    (subBlockId === 'responseFormat' || subBlockId === 'code') && code.split('\n').length > 5
 
   const editorRef = useRef<HTMLDivElement>(null)
 

apps/sim/app/w/knowledge/[id]/[documentId]/document.tsx

@@ -1,7 +1,17 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { Circle, CircleOff, FileText, Plus, Search, Trash2, X } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  CircleOff,
+  FileText,
+  Plus,
+  Search,
+  Trash2,
+  X,
+} from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -59,18 +69,53 @@ export function Document({
   const [isLoadingDocument, setIsLoadingDocument] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Use the new chunks hook
+  // Use the updated chunks hook with pagination
   const {
     chunks,
     isLoading: isLoadingChunks,
     error: chunksError,
+    currentPage,
+    totalPages,
+    hasNextPage,
+    hasPrevPage,
+    goToPage,
+    nextPage,
+    prevPage,
     refreshChunks,
     updateChunk,
   } = useDocumentChunks(knowledgeBaseId, documentId)
 
   // Combine errors
   const combinedError = error || chunksError
 
+  // Handle pagination navigation
+  const handlePrevPage = useCallback(() => {
+    if (hasPrevPage && !isLoadingChunks) {
+      prevPage()?.catch((err) => {
+        logger.error('Previous page failed:', err)
+      })
+    }
+  }, [hasPrevPage, isLoadingChunks, prevPage])
+
+  const handleNextPage = useCallback(() => {
+    if (hasNextPage && !isLoadingChunks) {
+      nextPage()?.catch((err) => {
+        logger.error('Next page failed:', err)
+      })
+    }
+  }, [hasNextPage, isLoadingChunks, nextPage])
+
+  const handleGoToPage = useCallback(
+    (page: number) => {
+      if (page !== currentPage && !isLoadingChunks) {
+        goToPage(page)?.catch((err) => {
+          logger.error('Go to page failed:', err)
+        })
+      }
+    },
+    [currentPage, isLoadingChunks, goToPage]
+  )
+
   // Try to get document from store cache first, then fetch if needed
   useEffect(() => {
     const fetchDocument = async () => {
@@ -308,7 +353,7 @@ export function Document({
                   onClick={() => setIsCreateChunkModalOpen(true)}
                   disabled={document?.processingStatus === 'failed'}
                   size='sm'
-                  className='flex items-center gap-1 bg-[#701FFC] font-[480] text-primary-foreground shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)] disabled:cursor-not-allowed disabled:opacity-50'
+                  className='flex items-center gap-1 bg-[#701FFC] font-[480] text-white shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)] disabled:cursor-not-allowed disabled:opacity-50'
                 >
                   <Plus className='h-3.5 w-3.5' />
                   <span>Create Chunk</span>
@@ -566,6 +611,64 @@ export function Document({
                     </tbody>
                   </table>
                 </div>
+
+                {/* Pagination Controls */}
+                {document?.processingStatus === 'completed' && totalPages > 1 && (
+                  <div className='flex items-center justify-center border-t bg-background px-6 py-4'>
+                    <div className='flex items-center gap-1'>
+                      <Button
+                        variant='ghost'
+                        size='sm'
+                        onClick={handlePrevPage}
+                        disabled={!hasPrevPage || isLoadingChunks}
+                        className='h-8 w-8 p-0'
+                      >
+                        <ChevronLeft className='h-4 w-4' />
+                      </Button>
+
+                      {/* Page numbers - show a few around current page */}
+                      <div className='mx-4 flex items-center gap-6'>
+                        {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+                          let page: number
+                          if (totalPages <= 5) {
+                            page = i + 1
+                          } else if (currentPage <= 3) {
+                            page = i + 1
+                          } else if (currentPage >= totalPages - 2) {
+                            page = totalPages - 4 + i
+                          } else {
+                            page = currentPage - 2 + i
+                          }
+
+                          if (page < 1 || page > totalPages) return null
+
+                          return (
+                            <button
+                              key={page}
+                              onClick={() => handleGoToPage(page)}
+                              disabled={isLoadingChunks}
+                              className={`font-medium text-sm transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 ${
+                                page === currentPage ? 'text-foreground' : 'text-muted-foreground'
+                              }`}
+                            >
+                              {page}
+                            </button>
+                          )
+                        })}
+                      </div>
+
+                      <Button
+                        variant='ghost'
+                        size='sm'
+                        onClick={handleNextPage}
+                        disabled={!hasNextPage || isLoadingChunks}
+                        className='h-8 w-8 p-0'
+                      >
+                        <ChevronRight className='h-4 w-4' />
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </div>

apps/sim/app/w/knowledge/[id]/base.tsx

@@ -569,7 +569,7 @@ export function KnowledgeBase({
                     onClick={handleAddDocuments}
                     disabled={isUploading}
                     size='sm'
-                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-primary-foreground shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
+                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-white shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
                   >
                     <Plus className='h-3.5 w-3.5' />
                     {isUploading ? 'Uploading...' : 'Add Documents'}

apps/sim/app/w/knowledge/knowledge.tsx

@@ -92,7 +92,7 @@ export function Knowledge() {
                   <Button
                     onClick={() => setIsCreateModalOpen(true)}
                     size='sm'
-                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-primary-foreground shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
+                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-white shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
                   >
                     <Plus className='h-3.5 w-3.5' />
                     <span>Create</span>