Skip to content

Commit 77bbdc1

Browse files
emir-karabegemir-karabeg
committed
fix(knowledge): ui and infinite load for knowledge
1 parent 96438c3 commit 77bbdc1

File tree

7 files changed

+233
-196
lines changed

7 files changed

+233
-196
lines changed

‎apps/sim/app/api/knowledge/route.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,6 @@ export async function GET(req: NextRequest) {
6464
.groupBy(knowledgeBase.id)
6565
.orderBy(knowledgeBase.createdAt)
6666

67-
// Debug logging
68-
logger.info(`[${requestId}] Knowledge bases with counts:`, {
69-
data: knowledgeBasesWithCounts.map((kb) => ({
70-
id: kb.id,
71-
name: kb.name,
72-
docCount: kb.docCount,
73-
})),
74-
})
75-
76-
logger.info(
77-
`[${requestId}] Retrieved ${knowledgeBasesWithCounts.length} knowledge bases for user ${session.user.id}`
78-
)
79-
8067
return NextResponse.json({
8168
success: true,
8269
data: knowledgeBasesWithCounts,

‎apps/sim/app/api/workflows/sync/route.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -202,9 +202,6 @@ export async function GET(request: Request) {
202202
}
203203

204204
const elapsed = Date.now() - startTime
205-
logger.info(
206-
`[${requestId}] Workflow fetch completed in ${elapsed}ms for ${workflows.length} workflows`
207-
)
208205

209206
// Return the workflows
210207
return NextResponse.json({ data: workflows }, { status: 200 })

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

Lines changed: 46 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -62,64 +62,50 @@ function formatFileSize(bytes: number): string {
6262
}
6363

6464
const getStatusDisplay = (doc: DocumentData) => {
65-
const processingStatus = (() => {
66-
switch (doc.processingStatus) {
67-
case 'pending':
68-
return {
69-
text: 'Pending',
70-
className:
71-
'inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300',
72-
}
73-
case 'processing':
74-
return {
75-
text: (
76-
<>
77-
<Loader2 className='mr-1.5 h-3 w-3 animate-spin' />
78-
Processing
79-
</>
80-
),
81-
className:
82-
'inline-flex items-center rounded-md bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
83-
}
84-
case 'completed':
85-
return {
86-
text: 'Completed',
87-
className:
88-
'inline-flex items-center rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400',
89-
}
90-
case 'failed':
91-
return {
92-
text: 'Failed',
93-
className:
94-
'inline-flex items-center rounded-md bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-300',
95-
}
96-
default:
97-
return {
98-
text: 'Unknown',
99-
className:
100-
'inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300',
101-
}
102-
}
103-
})()
104-
105-
const activeStatus = (() => {
106-
if (doc.processingStatus === 'completed') {
65+
// Consolidated status: show processing status when not completed, otherwise show enabled/disabled
66+
switch (doc.processingStatus) {
67+
case 'pending':
68+
return {
69+
text: 'Pending',
70+
className:
71+
'inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300',
72+
}
73+
case 'processing':
74+
return {
75+
text: (
76+
<>
77+
<Loader2 className='mr-1.5 h-3 w-3 animate-spin' />
78+
Processing
79+
</>
80+
),
81+
className:
82+
'inline-flex items-center rounded-md bg-[#701FFC]/10 px-2 py-1 text-xs font-medium text-[#701FFC] dark:bg-[#701FFC]/20 dark:text-[#8B5FFF]',
83+
}
84+
case 'failed':
85+
return {
86+
text: 'Failed',
87+
className:
88+
'inline-flex items-center rounded-md bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-300',
89+
}
90+
case 'completed':
10791
return doc.enabled
10892
? {
10993
text: 'Enabled',
11094
className:
111-
'inline-flex items-center rounded-md bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
95+
'inline-flex items-center rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400',
11296
}
11397
: {
11498
text: 'Disabled',
11599
className:
116100
'inline-flex items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-medium text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
117101
}
118-
}
119-
return null
120-
})()
121-
122-
return { processingStatus, activeStatus }
102+
default:
103+
return {
104+
text: 'Unknown',
105+
className:
106+
'inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300',
107+
}
108+
}
123109
}
124110

125111
const getProcessingTime = (doc: DocumentData) => {
@@ -583,9 +569,9 @@ export function KnowledgeBase({
583569
onClick={handleAddDocuments}
584570
disabled={isUploading}
585571
size='sm'
586-
className='mt-1 mr-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_3px_rgba(127,47,255,0.12)]'
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_3px_rgba(127,47,255,0.12)]'
587573
>
588-
<Plus className='mr-1.5 h-3.5 w-3.5' />
574+
<Plus className='h-3.5 w-3.5' />
589575
{isUploading ? 'Uploading...' : 'Add Documents'}
590576
</Button>
591577
</div>
@@ -602,17 +588,16 @@ export function KnowledgeBase({
602588
<div className='flex flex-1 flex-col overflow-hidden'>
603589
{/* Table header - fixed */}
604590
<div className='sticky top-0 z-10 overflow-x-auto border-b bg-background'>
605-
<table className='w-full min-w-[800px] table-fixed'>
591+
<table className='w-full min-w-[700px] table-fixed'>
606592
<colgroup>
607593
<col className='w-[4%]' />
608-
<col className={`${isSidebarCollapsed ? 'w-[20%]' : 'w-[22%]'}`} />
594+
<col className={`${isSidebarCollapsed ? 'w-[22%]' : 'w-[24%]'}`} />
609595
<col className='w-[8%]' />
610596
<col className='w-[8%]' />
611597
<col className='hidden w-[8%] lg:table-column' />
612-
<col className={`${isSidebarCollapsed ? 'w-[16%]' : 'w-[14%]'}`} />
613-
<col className='w-[10%]' />
614-
<col className='w-[10%]' />
598+
<col className={`${isSidebarCollapsed ? 'w-[18%]' : 'w-[16%]'}`} />
615599
<col className='w-[12%]' />
600+
<col className='w-[14%]' />
616601
</colgroup>
617602
<thead>
618603
<tr>
@@ -641,11 +626,6 @@ export function KnowledgeBase({
641626
Uploaded
642627
</span>
643628
</th>
644-
<th className='px-4 pt-2 pb-3 text-left font-medium'>
645-
<span className='text-muted-foreground text-xs leading-none'>
646-
Processing
647-
</span>
648-
</th>
649629
<th className='px-4 pt-2 pb-3 text-left font-medium'>
650630
<span className='text-muted-foreground text-xs leading-none'>Status</span>
651631
</th>
@@ -661,17 +641,16 @@ export function KnowledgeBase({
661641

662642
{/* Table body - scrollable */}
663643
<div className='flex-1 overflow-auto'>
664-
<table className='w-full min-w-[800px] table-fixed'>
644+
<table className='w-full min-w-[700px] table-fixed'>
665645
<colgroup>
666646
<col className='w-[4%]' />
667-
<col className={`${isSidebarCollapsed ? 'w-[20%]' : 'w-[22%]'}`} />
647+
<col className={`${isSidebarCollapsed ? 'w-[22%]' : 'w-[24%]'}`} />
668648
<col className='w-[8%]' />
669649
<col className='w-[8%]' />
670650
<col className='hidden w-[8%] lg:table-column' />
671-
<col className={`${isSidebarCollapsed ? 'w-[16%]' : 'w-[14%]'}`} />
672-
<col className='w-[10%]' />
673-
<col className='w-[10%]' />
651+
<col className={`${isSidebarCollapsed ? 'w-[18%]' : 'w-[16%]'}`} />
674652
<col className='w-[12%]' />
653+
<col className='w-[14%]' />
675654
</colgroup>
676655
<tbody>
677656
{filteredDocuments.length === 0 && !isLoadingDocuments ? (
@@ -713,11 +692,6 @@ export function KnowledgeBase({
713692
<div className='text-muted-foreground text-xs'>—</div>
714693
</td>
715694

716-
{/* Processing column */}
717-
<td className='px-4 py-3'>
718-
<div className='text-muted-foreground text-xs'>—</div>
719-
</td>
720-
721695
{/* Status column */}
722696
<td className='px-4 py-3'>
723697
<div className='text-muted-foreground text-xs'>—</div>
@@ -752,9 +726,6 @@ export function KnowledgeBase({
752726
<td className='px-4 py-3'>
753727
<div className='h-4 w-16 animate-pulse rounded bg-muted' />
754728
</td>
755-
<td className='px-4 py-3'>
756-
<div className='h-4 w-12 animate-pulse rounded bg-muted' />
757-
</td>
758729
<td className='px-4 py-3'>
759730
<div className='h-4 w-20 animate-pulse rounded bg-muted' />
760731
</td>
@@ -764,7 +735,7 @@ export function KnowledgeBase({
764735
filteredDocuments.map((doc, index) => {
765736
const isSelected = selectedDocuments.has(doc.id)
766737
const statusDisplay = getStatusDisplay(doc)
767-
const processingTime = getProcessingTime(doc)
738+
// const processingTime = getProcessingTime(doc)
768739

769740
return (
770741
<tr
@@ -859,22 +830,9 @@ export function KnowledgeBase({
859830
</div>
860831
</td>
861832

862-
{/* Processing column */}
863-
<td className='px-4 py-3'>
864-
<div className={statusDisplay.processingStatus.className}>
865-
{statusDisplay.processingStatus.text}
866-
</div>
867-
</td>
868-
869833
{/* Status column */}
870834
<td className='px-4 py-3'>
871-
{statusDisplay.activeStatus ? (
872-
<div className={statusDisplay.activeStatus.className}>
873-
{statusDisplay.activeStatus.text}
874-
</div>
875-
) : (
876-
<div className='text-muted-foreground text-xs'>—</div>
877-
)}
835+
<div className={statusDisplay.className}>{statusDisplay.text}</div>
878836
</td>
879837

880838
{/* Actions column */}

‎apps/sim/app/w/knowledge/components/create-modal/components/create-form/create-form.tsx‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ export function CreateForm({ onClose, onKnowledgeBaseCreated }: CreateFormProps)
442442
onDragLeave={handleDragLeave}
443443
onDrop={handleDrop}
444444
onClick={() => fileInputRef.current?.click()}
445-
className={`relative cursor-pointer rounded-lg border-2 border-dashed p-16 text-center transition-all duration-200 ${
445+
className={`relative cursor-pointer rounded-lg border-[1.5px] border-dashed p-16 text-center transition-all duration-200 ${
446446
isDragging
447447
? 'border-purple-300 bg-purple-50 shadow-sm'
448448
: 'border-muted-foreground/25 hover:border-muted-foreground/40 hover:bg-muted/10'
@@ -457,13 +457,6 @@ export function CreateForm({ onClose, onKnowledgeBaseCreated }: CreateFormProps)
457457
multiple
458458
/>
459459
<div className='flex flex-col items-center gap-3'>
460-
<div
461-
className={`text-4xl transition-all duration-200 ${
462-
isDragging ? 'text-purple-500' : 'text-muted-foreground'
463-
}`}
464-
>
465-
📁
466-
</div>
467460
<div className='space-y-1'>
468461
<p
469462
className={`font-medium text-sm transition-colors duration-200 ${
@@ -504,13 +497,6 @@ export function CreateForm({ onClose, onKnowledgeBaseCreated }: CreateFormProps)
504497
multiple
505498
/>
506499
<div className='flex items-center justify-center gap-2'>
507-
<div
508-
className={`text-base transition-colors duration-200 ${
509-
isDragging ? 'text-purple-500' : 'text-muted-foreground'
510-
}`}
511-
>
512-
📁
513-
</div>
514500
<div>
515501
<p
516502
className={`font-medium text-sm transition-colors duration-200 ${

‎apps/sim/app/w/knowledge/components/skeletons/table-skeleton.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,7 @@ export function DocumentTableRowSkeleton({ isSidebarCollapsed }: { isSidebarColl
3737
</div>
3838
</td>
3939

40-
{/* Processing Status column */}
41-
<td className='px-4 py-3'>
42-
<div className='h-6 w-16 animate-pulse rounded-md bg-muted' />
43-
</td>
44-
45-
{/* Active Status column */}
40+
{/* Status column */}
4641
<td className='px-4 py-3'>
4742
<div className='h-6 w-16 animate-pulse rounded-md bg-muted' />
4843
</td>
@@ -113,17 +108,16 @@ export function DocumentTableSkeleton({
113108
<div className='flex flex-1 flex-col overflow-hidden'>
114109
{/* Table header - fixed */}
115110
<div className='sticky top-0 z-10 overflow-x-auto border-b bg-background'>
116-
<table className='w-full min-w-[800px] table-fixed'>
111+
<table className='w-full min-w-[700px] table-fixed'>
117112
<colgroup>
118113
<col className='w-[4%]' />
119-
<col className={`${isSidebarCollapsed ? 'w-[20%]' : 'w-[22%]'}`} />
114+
<col className={`${isSidebarCollapsed ? 'w-[22%]' : 'w-[24%]'}`} />
120115
<col className='w-[8%]' />
121116
<col className='w-[8%]' />
122117
<col className='hidden w-[8%] lg:table-column' />
123-
<col className={`${isSidebarCollapsed ? 'w-[16%]' : 'w-[14%]'}`} />
124-
<col className='w-[10%]' />
125-
<col className='w-[10%]' />
118+
<col className={`${isSidebarCollapsed ? 'w-[18%]' : 'w-[16%]'}`} />
126119
<col className='w-[12%]' />
120+
<col className='w-[14%]' />
127121
</colgroup>
128122
<thead>
129123
<tr>
@@ -145,9 +139,6 @@ export function DocumentTableSkeleton({
145139
<th className='px-4 pt-2 pb-3 text-left font-medium'>
146140
<span className='text-muted-foreground text-xs leading-none'>Uploaded</span>
147141
</th>
148-
<th className='px-4 pt-2 pb-3 text-left font-medium'>
149-
<span className='text-muted-foreground text-xs leading-none'>Processing</span>
150-
</th>
151142
<th className='px-4 pt-2 pb-3 text-left font-medium'>
152143
<span className='text-muted-foreground text-xs leading-none'>Status</span>
153144
</th>
@@ -161,17 +152,16 @@ export function DocumentTableSkeleton({
161152

162153
{/* Table body - scrollable */}
163154
<div className='flex-1 overflow-auto'>
164-
<table className='w-full min-w-[800px] table-fixed'>
155+
<table className='w-full min-w-[700px] table-fixed'>
165156
<colgroup>
166157
<col className='w-[4%]' />
167-
<col className={`${isSidebarCollapsed ? 'w-[20%]' : 'w-[22%]'}`} />
158+
<col className={`${isSidebarCollapsed ? 'w-[22%]' : 'w-[24%]'}`} />
168159
<col className='w-[8%]' />
169160
<col className='w-[8%]' />
170161
<col className='hidden w-[8%] lg:table-column' />
171-
<col className={`${isSidebarCollapsed ? 'w-[16%]' : 'w-[14%]'}`} />
172-
<col className='w-[10%]' />
173-
<col className='w-[10%]' />
162+
<col className={`${isSidebarCollapsed ? 'w-[18%]' : 'w-[16%]'}`} />
174163
<col className='w-[12%]' />
164+
<col className='w-[14%]' />
175165
</colgroup>
176166
<tbody>
177167
{Array.from({ length: rowCount }).map((_, i) => (

0 commit comments

Comments
 (0)