From 70175ba788877e0320e48eff67bb4221614e5ca0 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
Date: Sun, 20 Sep 2026 16:37:16 -0700
Subject: [PATCH] improvement(ui): share knowledge upload rows

---
 .../add-documents-modal.tsx                   | 62 +++-------------
 .../create-base-modal/create-base-modal.tsx   | 47 +++----------
 .../components/knowledge-upload-row.tsx       | 70 +++++++++++++++++++
 3 files changed, 89 insertions(+), 90 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index f70b4f8c7ba..179b245afa4 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -2,16 +2,13 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import {
-  Button,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  cn,
 } from '@sim/emcn'
-import { Loader, RefreshCw, X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
 import {
@@ -20,6 +17,7 @@ import {
 } from '@/lib/uploads/client/admission'
 import { formatFileSize, validateKnowledgeBaseFile } from '@/lib/uploads/utils/file-utils'
 import { ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
+import { KnowledgeUploadRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row'
 import { useKnowledgeUpload } from '@/app/workspace/[workspaceId]/knowledge/hooks/use-knowledge-upload'
 
 const logger = createLogger('AddDocumentsModal')
@@ -177,56 +175,16 @@ export function AddDocumentsModal({
                 const isProcessing = fileStatus?.status === 'uploading' || isRetrying
 
                 return (
-                  <div
+                  <KnowledgeUploadRow
                     key={`${file.name}-${file.size}`}
-                    className={cn(
-                      'flex items-center gap-2 rounded-sm border p-2',
-                      isFailed && !isRetrying && 'border-[var(--text-error)]'
-                    )}
-                  >
-                    <span
-                      className={cn(
-                        'min-w-0 flex-1 truncate text-caption',
-                        isFailed && !isRetrying && 'text-[var(--text-error)]'
-                      )}
-                      title={file.name}
-                    >
-                      {file.name}
-                    </span>
-                    <span className='shrink-0 text-[var(--text-muted)] text-xs'>
-                      {formatFileSize(file.size)}
-                    </span>
-                    <div className='flex shrink-0 items-center gap-1'>
-                      {isProcessing ? (
-                        <Loader className='size-4 text-[var(--text-muted)]' animate />
-                      ) : (
-                        <>
-                          {isFailed && (
-                            <Button
-                              aria-label='Retry upload'
-                              type='button'
-                              variant='ghost'
-                              className='size-4 p-0'
-                              onClick={() => handleRetryFile(index)}
-                              disabled={isUploading}
-                            >
-                              <RefreshCw className='size-3' />
-                            </Button>
-                          )}
-                          <Button
-                            aria-label='Remove file'
-                            type='button'
-                            variant='ghost'
-                            className='size-4 p-0'
-                            onClick={() => removeFile(index)}
-                            disabled={isUploading}
-                          >
-                            <X className='size-3.5' />
-                          </Button>
-                        </>
-                      )}
-                    </div>
-                  </div>
+                    name={file.name}
+                    size={formatFileSize(file.size)}
+                    error={isFailed && !isRetrying}
+                    processing={isProcessing}
+                    disabled={isUploading}
+                    onRemove={() => removeFile(index)}
+                    onRetry={isFailed ? () => handleRetryFile(index) : undefined}
+                  />
                 )
               })}
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index 8e44fa13a90..3055844bae5 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -3,7 +3,6 @@
 import { memo, useEffect, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import {
-  Button,
   Checkbox,
   ChipCombobox,
   ChipInput,
@@ -15,10 +14,8 @@ import {
   ChipModalHeader,
   ChipTextarea,
   type ComboboxOption,
-  cn,
   toast,
 } from '@sim/emcn'
-import { Loader, X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams } from 'next/navigation'
@@ -33,6 +30,7 @@ import {
 } from '@/lib/uploads/client/admission'
 import { formatFileSize, validateKnowledgeBaseFile } from '@/lib/uploads/utils/file-utils'
 import { ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
+import { KnowledgeUploadRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row'
 import { useKnowledgeUpload } from '@/app/workspace/[workspaceId]/knowledge/hooks/use-knowledge-upload'
 import { useCreateKnowledgeBase, useDeleteKnowledgeBase } from '@/hooks/queries/kb/knowledge'
 
@@ -526,42 +524,15 @@ export const CreateBaseModal = memo(function CreateBaseModal({
                   const isProcessing = fileStatus?.status === 'uploading'
 
                   return (
-                    <div
+                    <KnowledgeUploadRow
                       key={`${file.name}-${file.size}`}
-                      className={cn(
-                        'flex items-center gap-2 rounded-sm border p-2',
-                        isFailed && 'border-[var(--text-error)]'
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          'min-w-0 flex-1 truncate text-caption',
-                          isFailed && 'text-[var(--text-error)]'
-                        )}
-                        title={file.name}
-                      >
-                        {file.name}
-                      </span>
-                      <span className='shrink-0 text-[var(--text-muted)] text-xs'>
-                        {formatFileSize(file.size)}
-                      </span>
-                      <div className='flex shrink-0 items-center gap-1'>
-                        {isProcessing ? (
-                          <Loader className='size-4 text-[var(--text-muted)]' animate />
-                        ) : (
-                          <Button
-                            aria-label='Remove file'
-                            type='button'
-                            variant='ghost'
-                            className='size-4 p-0'
-                            onClick={() => removeFile(index)}
-                            disabled={isUploading}
-                          >
-                            <X className='size-3.5' />
-                          </Button>
-                        )}
-                      </div>
-                    </div>
+                      name={file.name}
+                      size={formatFileSize(file.size)}
+                      error={isFailed}
+                      processing={isProcessing}
+                      disabled={isUploading}
+                      onRemove={() => removeFile(index)}
+                    />
                   )
                 })}
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row.tsx
new file mode 100644
index 00000000000..7359cd6f55e
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-upload-row.tsx
@@ -0,0 +1,70 @@
+import { Button, cn } from '@sim/emcn'
+import { Loader, RefreshCw, X } from '@sim/emcn/icons'
+
+interface KnowledgeUploadRowProps {
+  name: string
+  size: string
+  error: boolean
+  processing: boolean
+  disabled: boolean
+  onRemove: () => void
+  onRetry?: () => void
+}
+
+/** Selected-file presentation shared by knowledge creation and document uploads. */
+export function KnowledgeUploadRow({
+  name,
+  size,
+  error,
+  processing,
+  disabled,
+  onRemove,
+  onRetry,
+}: KnowledgeUploadRowProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 rounded-sm border p-2',
+        error && 'border-[var(--text-error)]'
+      )}
+    >
+      <span
+        className={cn('min-w-0 flex-1 truncate text-caption', error && 'text-[var(--text-error)]')}
+        title={name}
+      >
+        {name}
+      </span>
+      <span className='shrink-0 text-[var(--text-muted)] text-xs'>{size}</span>
+      <div className='flex shrink-0 items-center gap-1'>
+        {processing ? (
+          <Loader className='size-4 text-[var(--text-muted)]' animate />
+        ) : (
+          <>
+            {onRetry && (
+              <Button
+                aria-label='Retry upload'
+                type='button'
+                variant='ghost'
+                className='size-4 p-0'
+                onClick={onRetry}
+                disabled={disabled}
+              >
+                <RefreshCw className='size-3' />
+              </Button>
+            )}
+            <Button
+              aria-label='Remove file'
+              type='button'
+              variant='ghost'
+              className='size-4 p-0'
+              onClick={onRemove}
+              disabled={disabled}
+            >
+              <X className='size-3.5' />
+            </Button>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}