Skip to content

Commit bf579d8

Browse files
aadamgoughaadamgough
authored
fix(knowledge-ux): fixed ux for knowledge base (#478)
fix(knowledge-ux): fixed ux for knowledge base (#478)
1 parent 9ef2764 commit bf579d8

File tree

9 files changed

+235
-28
lines changed

9 files changed

+235
-28
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const LoopNodeComponent = memo(({ data, selected, id }: NodeProps) => {
9494
const getNestedStyles = () => {
9595
// Base styles
9696
const styles: Record<string, string> = {
97-
backgroundColor: 'transparent',
97+
backgroundColor: 'rgba(0, 0, 0, 0.02)',
9898
}
9999

100100
// Apply nested styles

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const ParallelTool = {
66
name: 'Parallel',
77
description: 'Parallel Execution',
88
icon: SplitIcon,
9-
bgColor: '#8BC34A',
9+
bgColor: '#FEE12B',
1010
data: {
1111
label: 'Parallel',
1212
parallelType: 'collection' as 'collection' | 'count',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export const ParallelNodeComponent = memo(({ data, selected, id }: NodeProps) =>
111111
const getNestedStyles = () => {
112112
// Base styles
113113
const styles: Record<string, string> = {
114-
backgroundColor: 'transparent',
114+
backgroundColor: 'rgba(0, 0, 0, 0.02)',
115115
}
116116

117117
// Apply nested styles

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ export function Code({
8181
(useSubBlockStore((state) => state.getValue(blockId, collapsedStateKey)) as boolean) ?? false
8282
const setCollapsedValue = useSubBlockStore((state) => state.setValue)
8383

84-
const showCollapseButton = subBlockId === 'responseFormat' && code.split('\n').length > 5
84+
const showCollapseButton =
85+
(subBlockId === 'responseFormat' || subBlockId === 'code') && code.split('\n').length > 5
8586

8687
const editorRef = useRef<HTMLDivElement>(null)
8788

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

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
'use client'
22

3-
import { useEffect, useState } from 'react'
4-
import { Circle, CircleOff, FileText, Plus, Search, Trash2, X } from 'lucide-react'
3+
import { useCallback, useEffect, useState } from 'react'
4+
import {
5+
ChevronLeft,
6+
ChevronRight,
7+
Circle,
8+
CircleOff,
9+
FileText,
10+
Plus,
11+
Search,
12+
Trash2,
13+
X,
14+
} from 'lucide-react'
515
import { Button } from '@/components/ui/button'
616
import { Checkbox } from '@/components/ui/checkbox'
717
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -59,18 +69,53 @@ export function Document({
5969
const [isLoadingDocument, setIsLoadingDocument] = useState(true)
6070
const [error, setError] = useState<string | null>(null)
6171

62-
// Use the new chunks hook
72+
// Use the updated chunks hook with pagination
6373
const {
6474
chunks,
6575
isLoading: isLoadingChunks,
6676
error: chunksError,
77+
currentPage,
78+
totalPages,
79+
hasNextPage,
80+
hasPrevPage,
81+
goToPage,
82+
nextPage,
83+
prevPage,
6784
refreshChunks,
6885
updateChunk,
6986
} = useDocumentChunks(knowledgeBaseId, documentId)
7087

7188
// Combine errors
7289
const combinedError = error || chunksError
7390

91+
// Handle pagination navigation
92+
const handlePrevPage = useCallback(() => {
93+
if (hasPrevPage && !isLoadingChunks) {
94+
prevPage()?.catch((err) => {
95+
logger.error('Previous page failed:', err)
96+
})
97+
}
98+
}, [hasPrevPage, isLoadingChunks, prevPage])
99+
100+
const handleNextPage = useCallback(() => {
101+
if (hasNextPage && !isLoadingChunks) {
102+
nextPage()?.catch((err) => {
103+
logger.error('Next page failed:', err)
104+
})
105+
}
106+
}, [hasNextPage, isLoadingChunks, nextPage])
107+
108+
const handleGoToPage = useCallback(
109+
(page: number) => {
110+
if (page !== currentPage && !isLoadingChunks) {
111+
goToPage(page)?.catch((err) => {
112+
logger.error('Go to page failed:', err)
113+
})
114+
}
115+
},
116+
[currentPage, isLoadingChunks, goToPage]
117+
)
118+
74119
// Try to get document from store cache first, then fetch if needed
75120
useEffect(() => {
76121
const fetchDocument = async () => {
@@ -308,7 +353,7 @@ export function Document({
308353
onClick={() => setIsCreateChunkModalOpen(true)}
309354
disabled={document?.processingStatus === 'failed'}
310355
size='sm'
311-
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'
356+
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'
312357
>
313358
<Plus className='h-3.5 w-3.5' />
314359
<span>Create Chunk</span>
@@ -566,6 +611,64 @@ export function Document({
566611
</tbody>
567612
</table>
568613
</div>
614+
615+
{/* Pagination Controls */}
616+
{document?.processingStatus === 'completed' && totalPages > 1 && (
617+
<div className='flex items-center justify-center border-t bg-background px-6 py-4'>
618+
<div className='flex items-center gap-1'>
619+
<Button
620+
variant='ghost'
621+
size='sm'
622+
onClick={handlePrevPage}
623+
disabled={!hasPrevPage || isLoadingChunks}
624+
className='h-8 w-8 p-0'
625+
>
626+
<ChevronLeft className='h-4 w-4' />
627+
</Button>
628+
629+
{/* Page numbers - show a few around current page */}
630+
<div className='mx-4 flex items-center gap-6'>
631+
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
632+
let page: number
633+
if (totalPages <= 5) {
634+
page = i + 1
635+
} else if (currentPage <= 3) {
636+
page = i + 1
637+
} else if (currentPage >= totalPages - 2) {
638+
page = totalPages - 4 + i
639+
} else {
640+
page = currentPage - 2 + i
641+
}
642+
643+
if (page < 1 || page > totalPages) return null
644+
645+
return (
646+
<button
647+
key={page}
648+
onClick={() => handleGoToPage(page)}
649+
disabled={isLoadingChunks}
650+
className={`font-medium text-sm transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 ${
651+
page === currentPage ? 'text-foreground' : 'text-muted-foreground'
652+
}`}
653+
>
654+
{page}
655+
</button>
656+
)
657+
})}
658+
</div>
659+
660+
<Button
661+
variant='ghost'
662+
size='sm'
663+
onClick={handleNextPage}
664+
disabled={!hasNextPage || isLoadingChunks}
665+
className='h-8 w-8 p-0'
666+
>
667+
<ChevronRight className='h-4 w-4' />
668+
</Button>
669+
</div>
670+
</div>
671+
)}
569672
</div>
570673
</div>
571674
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -569,7 +569,7 @@ export function KnowledgeBase({
569569
onClick={handleAddDocuments}
570570
disabled={isUploading}
571571
size='sm'
572-
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)]'
572+
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)]'
573573
>
574574
<Plus className='h-3.5 w-3.5' />
575575
{isUploading ? 'Uploading...' : 'Add Documents'}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export function Knowledge() {
9292
<Button
9393
onClick={() => setIsCreateModalOpen(true)}
9494
size='sm'
95-
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)]'
95+
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)]'
9696
>
9797
<Plus className='h-3.5 w-3.5' />
9898
<span>Create</span>

0 commit comments

Comments
 (0)