Skip to content

improvement(kb): modals, page layouts #2330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emir-karabeg merged 1 commit into from
Dec 12, 2025
Merged

improvement(kb): modals, page layouts #2330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -928,9 +928,22 @@ export function KnowledgeBase({
Tags
</Button>
)}
<Button onClick={() => setShowDeleteDialog(true)} className='h-[32px] rounded-[6px]'>
<Trash className='h-[14px] w-[14px]' />
</Button>
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
onClick={() => setShowDeleteDialog(true)}
disabled={!userPermissions.canEdit}
className='h-[32px] rounded-[6px]'
>
<Trash className='h-[14px] w-[14px]' />
</Button>
</Tooltip.Trigger>
{!userPermissions.canEdit && (
<Tooltip.Content>
Write permission required to delete knowledge base
</Tooltip.Content>
)}
</Tooltip.Root>
</div>
</div>

Expand All @@ -940,7 +953,7 @@ export function KnowledgeBase({
</p>
)}

<div className='mt-[12px] flex items-center gap-[8px]'>
<div className='mt-[16px] flex items-center gap-[8px]'>
<span className='text-[14px] text-[var(--text-muted)]'>
{pagination.total} {pagination.total === 1 ? 'document' : 'documents'}
</span>
Expand Down
104 changes: 55 additions & 49 deletions ...space/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'

import { useEffect, useRef, useState } from 'react'
import { AlertCircle, Loader2, RotateCcw, X } from 'lucide-react'
import { Loader2, RotateCcw, X } from 'lucide-react'
import { useParams } from 'next/navigation'
import {
Button,
Expand Down Expand Up @@ -283,11 +283,11 @@ export function AddDocumentsModal({
return (
<div
key={index}
className='flex items-center gap-2 rounded-[4px] border p-[8px]'
>
{isFailed && !isRetrying && (
<AlertCircle className='h-4 w-4 flex-shrink-0 text-[var(--text-error)]' />
className={cn(
'flex items-center gap-2 rounded-[4px] border p-[8px]',
isFailed && !isRetrying && 'border-[var(--text-error)]'
)}
>
<span
className={cn(
'min-w-0 flex-1 truncate text-[12px]',
Expand All @@ -301,29 +301,31 @@ export function AddDocumentsModal({
{formatFileSize(file.size)}
</span>
<div className='flex flex-shrink-0 items-center gap-1'>
{isFailed && !isRetrying && (
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
onClick={() => handleRetryFile(index)}
disabled={isUploading}
>
<RotateCcw className='h-3.5 w-3.5' />
</Button>
)}
{isProcessing ? (
<Loader2 className='h-4 w-4 animate-spin text-[var(--text-muted)]' />
) : (
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0'
onClick={() => removeFile(index)}
disabled={isUploading}
>
<X className='h-3.5 w-3.5' />
</Button>
<>
{isFailed && (
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0'
onClick={() => handleRetryFile(index)}
disabled={isUploading}
>
<RotateCcw className='h-3 w-3' />
</Button>
)}
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0'
onClick={() => removeFile(index)}
disabled={isUploading}
>
<X className='h-3.5 w-3.5' />
</Button>
</>
)}
</div>
</div>
Expand All @@ -336,30 +338,34 @@ export function AddDocumentsModal({
</div>
</ModalBody>

<ModalFooter className='flex-col items-stretch gap-[12px]'>
{uploadError && (
<p className='text-[11px] text-[var(--text-error)] leading-tight'>
{uploadError.message}
</p>
)}
<div className='flex justify-end gap-[8px]'>
<Button variant='default' onClick={handleClose} type='button' disabled={isUploading}>
Cancel
</Button>
<Button
variant='primary'
type='button'
onClick={handleUpload}
disabled={files.length === 0 || isUploading}
>
{isUploading
? uploadProgress.stage === 'uploading'
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
: uploadProgress.stage === 'processing'
? 'Processing...'
: 'Uploading...'
: 'Upload'}
</Button>
<ModalFooter>
<div className='flex w-full items-center justify-between gap-[12px]'>
{uploadError ? (
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
{uploadError.message}
</p>
) : (
<div />
Copy link
Contributor

@greptile-apps greptile-apps bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: empty <div /> used as placeholder - consider semantic alternative like <span className="flex-1" /> or remove if not needed for layout

Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
Line: 348:348

Comment:
**style:** empty `<div />` used as placeholder - consider semantic alternative like `<span className="flex-1" />` or remove if not needed for layout

How can I resolve this? If you propose a fix, please make it concise.

)}
<div className='flex flex-shrink-0 gap-[8px]'>
<Button variant='default' onClick={handleClose} type='button' disabled={isUploading}>
Cancel
</Button>
<Button
variant='primary'
type='button'
onClick={handleUpload}
disabled={files.length === 0 || isUploading}
>
{isUploading
? uploadProgress.stage === 'uploading'
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
: uploadProgress.stage === 'processing'
? 'Processing...'
: 'Uploading...'
: 'Upload'}
</Button>
</div>
</div>
</ModalFooter>
</ModalContent>
Expand Down
118 changes: 64 additions & 54 deletions .../app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useEffect, useRef, useState } from 'react'
import { zodResolver } from '@hookform/resolvers/zod'
import { AlertCircle, Loader2, RotateCcw, X } from 'lucide-react'
import { Loader2, RotateCcw, X } from 'lucide-react'
import { useParams } from 'next/navigation'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
Expand Down Expand Up @@ -449,11 +449,11 @@ export function CreateBaseModal({
return (
<div
key={index}
className='flex items-center gap-2 rounded-[4px] border p-[8px]'
>
{isFailed && !isRetrying && (
<AlertCircle className='h-4 w-4 flex-shrink-0 text-[var(--text-error)]' />
className={cn(
'flex items-center gap-2 rounded-[4px] border p-[8px]',
isFailed && !isRetrying && 'border-[var(--text-error)]'
)}
>
<span
className={cn(
'min-w-0 flex-1 truncate text-[12px]',
Expand All @@ -467,32 +467,34 @@ export function CreateBaseModal({
{formatFileSize(file.size)}
</span>
<div className='flex flex-shrink-0 items-center gap-1'>
{isFailed && !isRetrying && (
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
onClick={() => {
setRetryingIndexes((prev) => new Set(prev).add(index))
removeFile(index)
}}
disabled={isUploading}
>
<RotateCcw className='h-3.5 w-3.5' />
</Button>
)}
{isProcessing ? (
<Loader2 className='h-4 w-4 animate-spin text-[var(--text-muted)]' />
) : (
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0'
onClick={() => removeFile(index)}
disabled={isUploading}
>
<X className='h-3.5 w-3.5' />
</Button>
<>
{isFailed && (
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0'
onClick={() => {
setRetryingIndexes((prev) => new Set(prev).add(index))
removeFile(index)
}}
disabled={isUploading}
>
<RotateCcw className='h-3 w-3' />
</Button>
)}
<Button
type='button'
variant='ghost'
className='h-4 w-4 p-0'
onClick={() => removeFile(index)}
disabled={isUploading}
>
<X className='h-3.5 w-3.5' />
</Button>
</>
)}
</div>
</div>
Expand All @@ -509,32 +511,40 @@ export function CreateBaseModal({
</div>
</ModalBody>

<ModalFooter className='flex-col items-stretch gap-[12px]'>
{(submitStatus?.type === 'error' || uploadError) && (
<p className='text-[11px] text-[var(--text-error)] leading-tight'>
{uploadError?.message || submitStatus?.message}
</p>
)}
<div className='flex justify-end gap-[8px]'>
<Button
variant='default'
onClick={() => handleClose(false)}
type='button'
disabled={isSubmitting}
>
Cancel
</Button>
<Button variant='primary' type='submit' disabled={isSubmitting || !nameValue?.trim()}>
{isSubmitting
? isUploading
? uploadProgress.stage === 'uploading'
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
: uploadProgress.stage === 'processing'
? 'Processing...'
: 'Creating...'
: 'Creating...'
: 'Create'}
</Button>
<ModalFooter>
<div className='flex w-full items-center justify-between gap-[12px]'>
{submitStatus?.type === 'error' || uploadError ? (
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
{uploadError?.message || submitStatus?.message}
</p>
) : (
<div />
Copy link
Contributor

@greptile-apps greptile-apps bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: empty <div /> used as placeholder - consider semantic alternative like <span className="flex-1" /> or remove if not needed for layout

Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
Line: 521:521

Comment:
**style:** empty `<div />` used as placeholder - consider semantic alternative like `<span className="flex-1" />` or remove if not needed for layout

How can I resolve this? If you propose a fix, please make it concise.

)}
<div className='flex flex-shrink-0 gap-[8px]'>
<Button
variant='default'
onClick={() => handleClose(false)}
type='button'
disabled={isSubmitting}
>
Cancel
</Button>
<Button
variant='primary'
type='submit'
disabled={isSubmitting || !nameValue?.trim()}
>
{isSubmitting
? isUploading
? uploadProgress.stage === 'uploading'
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
: uploadProgress.stage === 'processing'
? 'Processing...'
: 'Creating...'
: 'Creating...'
: 'Create'}
</Button>
</div>
</div>
</ModalFooter>
</form>
Expand Down