Skip to content

Commit 70175ba

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
improvement(ui): share knowledge upload rows
1 parent ea31ca7 commit 70175ba

3 files changed

Lines changed: 89 additions & 90 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx‎

Lines changed: 10 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@
22

33
import { useCallback, useEffect, useState } from 'react'
44
import {
5-
Button,
65
ChipModal,
76
ChipModalBody,
87
ChipModalError,
98
ChipModalField,
109
ChipModalFooter,
1110
ChipModalHeader,
12-
cn,
1311
} from '@sim/emcn'
14-
import { Loader, RefreshCw, X } from '@sim/emcn/icons'
1512
import { createLogger } from '@sim/logger'
1613
import { useParams } from 'next/navigation'
1714
import {
@@ -20,6 +17,7 @@ import {
2017
} from '@/lib/uploads/client/admission'
2118
import { formatFileSize, validateKnowledgeBaseFile } from '@/lib/uploads/utils/file-utils'
2219
import { ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
20+
import { KnowledgeUploadRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row'
2321
import { useKnowledgeUpload } from '@/app/workspace/[workspaceId]/knowledge/hooks/use-knowledge-upload'
2422

2523
const logger = createLogger('AddDocumentsModal')
@@ -177,56 +175,16 @@ export function AddDocumentsModal({
177175
const isProcessing = fileStatus?.status === 'uploading' || isRetrying
178176

179177
return (
180-
<div
178+
<KnowledgeUploadRow
181179
key={`${file.name}-${file.size}`}
182-
className={cn(
183-
'flex items-center gap-2 rounded-sm border p-2',
184-
isFailed && !isRetrying && 'border-[var(--text-error)]'
185-
)}
186-
>
187-
<span
188-
className={cn(
189-
'min-w-0 flex-1 truncate text-caption',
190-
isFailed && !isRetrying && 'text-[var(--text-error)]'
191-
)}
192-
title={file.name}
193-
>
194-
{file.name}
195-
</span>
196-
<span className='shrink-0 text-[var(--text-muted)] text-xs'>
197-
{formatFileSize(file.size)}
198-
</span>
199-
<div className='flex shrink-0 items-center gap-1'>
200-
{isProcessing ? (
201-
<Loader className='size-4 text-[var(--text-muted)]' animate />
202-
) : (
203-
<>
204-
{isFailed && (
205-
<Button
206-
aria-label='Retry upload'
207-
type='button'
208-
variant='ghost'
209-
className='size-4 p-0'
210-
onClick={() => handleRetryFile(index)}
211-
disabled={isUploading}
212-
>
213-
<RefreshCw className='size-3' />
214-
</Button>
215-
)}
216-
<Button
217-
aria-label='Remove file'
218-
type='button'
219-
variant='ghost'
220-
className='size-4 p-0'
221-
onClick={() => removeFile(index)}
222-
disabled={isUploading}
223-
>
224-
<X className='size-3.5' />
225-
</Button>
226-
</>
227-
)}
228-
</div>
229-
</div>
180+
name={file.name}
181+
size={formatFileSize(file.size)}
182+
error={isFailed && !isRetrying}
183+
processing={isProcessing}
184+
disabled={isUploading}
185+
onRemove={() => removeFile(index)}
186+
onRetry={isFailed ? () => handleRetryFile(index) : undefined}
187+
/>
230188
)
231189
})}
232190
</div>

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

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { memo, useEffect, useState } from 'react'
44
import { zodResolver } from '@hookform/resolvers/zod'
55
import {
6-
Button,
76
Checkbox,
87
ChipCombobox,
98
ChipInput,
@@ -15,10 +14,8 @@ import {
1514
ChipModalHeader,
1615
ChipTextarea,
1716
type ComboboxOption,
18-
cn,
1917
toast,
2018
} from '@sim/emcn'
21-
import { Loader, X } from '@sim/emcn/icons'
2219
import { createLogger } from '@sim/logger'
2320
import { getErrorMessage } from '@sim/utils/errors'
2421
import { useParams } from 'next/navigation'
@@ -33,6 +30,7 @@ import {
3330
} from '@/lib/uploads/client/admission'
3431
import { formatFileSize, validateKnowledgeBaseFile } from '@/lib/uploads/utils/file-utils'
3532
import { ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
33+
import { KnowledgeUploadRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row'
3634
import { useKnowledgeUpload } from '@/app/workspace/[workspaceId]/knowledge/hooks/use-knowledge-upload'
3735
import { useCreateKnowledgeBase, useDeleteKnowledgeBase } from '@/hooks/queries/kb/knowledge'
3836

@@ -526,42 +524,15 @@ export const CreateBaseModal = memo(function CreateBaseModal({
526524
const isProcessing = fileStatus?.status === 'uploading'
527525

528526
return (
529-
<div
527+
<KnowledgeUploadRow
530528
key={`${file.name}-${file.size}`}
531-
className={cn(
532-
'flex items-center gap-2 rounded-sm border p-2',
533-
isFailed && 'border-[var(--text-error)]'
534-
)}
535-
>
536-
<span
537-
className={cn(
538-
'min-w-0 flex-1 truncate text-caption',
539-
isFailed && 'text-[var(--text-error)]'
540-
)}
541-
title={file.name}
542-
>
543-
{file.name}
544-
</span>
545-
<span className='shrink-0 text-[var(--text-muted)] text-xs'>
546-
{formatFileSize(file.size)}
547-
</span>
548-
<div className='flex shrink-0 items-center gap-1'>
549-
{isProcessing ? (
550-
<Loader className='size-4 text-[var(--text-muted)]' animate />
551-
) : (
552-
<Button
553-
aria-label='Remove file'
554-
type='button'
555-
variant='ghost'
556-
className='size-4 p-0'
557-
onClick={() => removeFile(index)}
558-
disabled={isUploading}
559-
>
560-
<X className='size-3.5' />
561-
</Button>
562-
)}
563-
</div>
564-
</div>
529+
name={file.name}
530+
size={formatFileSize(file.size)}
531+
error={isFailed}
532+
processing={isProcessing}
533+
disabled={isUploading}
534+
onRemove={() => removeFile(index)}
535+
/>
565536
)
566537
})}
567538
</div>

‎apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Button, cn } from '@sim/emcn'
2+
import { Loader, RefreshCw, X } from '@sim/emcn/icons'
3+
4+
interface KnowledgeUploadRowProps {
5+
name: string
6+
size: string
7+
error: boolean
8+
processing: boolean
9+
disabled: boolean
10+
onRemove: () => void
11+
onRetry?: () => void
12+
}
13+
14+
/** Selected-file presentation shared by knowledge creation and document uploads. */
15+
export function KnowledgeUploadRow({
16+
name,
17+
size,
18+
error,
19+
processing,
20+
disabled,
21+
onRemove,
22+
onRetry,
23+
}: KnowledgeUploadRowProps) {
24+
return (
25+
<div
26+
className={cn(
27+
'flex items-center gap-2 rounded-sm border p-2',
28+
error && 'border-[var(--text-error)]'
29+
)}
30+
>
31+
<span
32+
className={cn('min-w-0 flex-1 truncate text-caption', error && 'text-[var(--text-error)]')}
33+
title={name}
34+
>
35+
{name}
36+
</span>
37+
<span className='shrink-0 text-[var(--text-muted)] text-xs'>{size}</span>
38+
<div className='flex shrink-0 items-center gap-1'>
39+
{processing ? (
40+
<Loader className='size-4 text-[var(--text-muted)]' animate />
41+
) : (
42+
<>
43+
{onRetry && (
44+
<Button
45+
aria-label='Retry upload'
46+
type='button'
47+
variant='ghost'
48+
className='size-4 p-0'
49+
onClick={onRetry}
50+
disabled={disabled}
51+
>
52+
<RefreshCw className='size-3' />
53+
</Button>
54+
)}
55+
<Button
56+
aria-label='Remove file'
57+
type='button'
58+
variant='ghost'
59+
className='size-4 p-0'
60+
onClick={onRemove}
61+
disabled={disabled}
62+
>
63+
<X className='size-3.5' />
64+
</Button>
65+
</>
66+
)}
67+
</div>
68+
</div>
69+
)
70+
}

0 commit comments

Comments
 (0)