Skip to content

Commit 1642ed7

Browse files
emir-karabegemir-karabeg
authored
improvement: modal UI (#2202)
* fix: trigger-save delete modal * improvement: old modal styling
1 parent d22b578 commit 1642ed7

File tree

14 files changed

+776
-876
lines changed

14 files changed

+776
-876
lines changed

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

Lines changed: 89 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
'use client'
22

33
import { useRef, useState } from 'react'
4-
import { AlertCircle, Loader2, X } from 'lucide-react'
4+
import { AlertCircle, Loader2 } from 'lucide-react'
55
import { Button, Textarea } from '@/components/emcn'
6-
import { Modal, ModalContent, ModalTitle } from '@/components/emcn/components/modal/modal'
6+
import {
7+
Modal,
8+
ModalBody,
9+
ModalContent,
10+
ModalFooter,
11+
ModalHeader,
12+
} from '@/components/emcn/components/modal/modal'
713
import { Label } from '@/components/ui/label'
814
import { createLogger } from '@/lib/logs/console/logger'
915
import type { ChunkData, DocumentData } from '@/stores/knowledge/store'
@@ -113,132 +119,107 @@ export function CreateChunkModal({
113119
return (
114120
<>
115121
<Modal open={open} onOpenChange={handleCloseAttempt}>
116-
<ModalContent
117-
className='flex h-[74vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[600px]'
118-
showClose={false}
119-
>
120-
{/* Modal Header */}
121-
<div className='flex-shrink-0 px-6 py-5'>
122-
<div className='flex items-center justify-between'>
123-
<ModalTitle className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
124-
Create Chunk
125-
</ModalTitle>
126-
<Button variant='ghost' className='h-8 w-8 p-0' onClick={handleCloseAttempt}>
127-
<X className='h-4 w-4' />
128-
<span className='sr-only'>Close</span>
129-
</Button>
130-
</div>
131-
</div>
132-
133-
{/* Modal Body */}
134-
<div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
135-
<form className='flex min-h-0 flex-1 flex-col'>
136-
{/* Scrollable Content */}
137-
<div className='scrollbar-hide min-h-0 flex-1 overflow-y-auto pb-20'>
138-
<div className='flex min-h-full flex-col px-6'>
139-
<div className='flex flex-1 flex-col space-y-[12px] pt-0 pb-6'>
140-
{/* Document Info Section */}
141-
<div className='flex-shrink-0 space-y-[8px]'>
142-
<div className='flex items-center gap-3 rounded-lg border bg-muted/30 p-4'>
143-
<div className='min-w-0 flex-1'>
144-
<p className='font-medium text-sm'>
145-
{document?.filename || 'Unknown Document'}
146-
</p>
147-
<p className='text-muted-foreground text-xs'>
148-
Adding chunk to this document
149-
</p>
150-
</div>
151-
</div>
152-
153-
{/* Error Display */}
154-
{error && (
155-
<div className='flex items-center gap-2 rounded-md border border-red-200 bg-red-50 p-3'>
156-
<AlertCircle className='h-4 w-4 text-red-600' />
157-
<p className='text-red-800 text-sm'>{error}</p>
158-
</div>
159-
)}
160-
</div>
161-
162-
{/* Content Input Section - Expands to fill space */}
163-
<div className='flex min-h-0 flex-1 flex-col space-y-[8px]'>
164-
<Label
165-
htmlFor='content'
166-
className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
167-
>
168-
Chunk Content
169-
</Label>
170-
<Textarea
171-
id='content'
172-
value={content}
173-
onChange={(e) => setContent(e.target.value)}
174-
placeholder='Enter the content for this chunk...'
175-
className='min-h-0 flex-1 resize-none'
176-
disabled={isCreating}
177-
/>
178-
</div>
122+
<ModalContent className='h-[74vh] sm:max-w-[600px]'>
123+
<ModalHeader>Create Chunk</ModalHeader>
124+
125+
<form className='flex min-h-0 flex-1 flex-col'>
126+
<ModalBody>
127+
<div className='space-y-[12px]'>
128+
{/* Document Info Section */}
129+
<div className='flex items-center gap-3 rounded-lg border p-4'>
130+
<div className='min-w-0 flex-1'>
131+
<p className='font-medium text-[var(--text-primary)] text-sm'>
132+
{document?.filename || 'Unknown Document'}
133+
</p>
134+
<p className='text-[var(--text-tertiary)] text-xs'>
135+
Adding chunk to this document
136+
</p>
179137
</div>
180138
</div>
181-
</div>
182139

183-
{/* Fixed Footer with Actions */}
184-
<div className='absolute inset-x-0 bottom-0 bg-[var(--surface-1)] dark:bg-[var(--surface-1)]'>
185-
<div className='flex w-full items-center justify-between gap-[8px] px-6 py-4'>
186-
<Button
187-
variant='default'
188-
onClick={handleCloseAttempt}
189-
type='button'
190-
disabled={isCreating}
191-
>
192-
Cancel
193-
</Button>
194-
<Button
195-
variant='primary'
196-
onClick={handleCreateChunk}
197-
type='button'
198-
disabled={!isFormValid || isCreating}
140+
{/* Error Display */}
141+
{error && (
142+
<div className='flex items-center gap-2 rounded-md border border-[var(--text-error)]/50 bg-[var(--text-error)]/10 p-3'>
143+
<AlertCircle className='h-4 w-4 text-[var(--text-error)]' />
144+
<p className='text-[var(--text-error)] text-sm'>{error}</p>
145+
</div>
146+
)}
147+
148+
{/* Content Input Section */}
149+
<div className='space-y-[8px]'>
150+
<Label
151+
htmlFor='content'
152+
className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
199153
>
200-
{isCreating ? (
201-
<>
202-
<Loader2 className='mr-2 h-4 w-4 animate-spin' />
203-
Creating...
204-
</>
205-
) : (
206-
'Create Chunk'
207-
)}
208-
</Button>
154+
Chunk Content
155+
</Label>
156+
<Textarea
157+
id='content'
158+
value={content}
159+
onChange={(e) => setContent(e.target.value)}
160+
placeholder='Enter the content for this chunk...'
161+
rows={10}
162+
disabled={isCreating}
163+
/>
209164
</div>
210165
</div>
211-
</form>
212-
</div>
166+
</ModalBody>
167+
168+
<ModalFooter>
169+
<Button
170+
variant='default'
171+
onClick={handleCloseAttempt}
172+
type='button'
173+
disabled={isCreating}
174+
>
175+
Cancel
176+
</Button>
177+
<Button
178+
variant='primary'
179+
onClick={handleCreateChunk}
180+
type='button'
181+
disabled={!isFormValid || isCreating}
182+
>
183+
{isCreating ? (
184+
<>
185+
<Loader2 className='mr-2 h-4 w-4 animate-spin' />
186+
Creating...
187+
</>
188+
) : (
189+
'Create Chunk'
190+
)}
191+
</Button>
192+
</ModalFooter>
193+
</form>
213194
</ModalContent>
214195
</Modal>
215196

216197
{/* Unsaved Changes Alert */}
217198
<Modal open={showUnsavedChangesAlert} onOpenChange={setShowUnsavedChangesAlert}>
218-
<ModalContent className='flex flex-col gap-0 p-0'>
219-
{/* Modal Header */}
220-
<div className='flex-shrink-0 px-6 py-5'>
221-
<ModalTitle className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
222-
Discard changes?
223-
</ModalTitle>
224-
<p className='mt-2 text-[12px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
199+
<ModalContent className='w-[400px]'>
200+
<ModalHeader>Discard Changes</ModalHeader>
201+
<ModalBody>
202+
<p className='text-[12px] text-[var(--text-tertiary)]'>
225203
You have unsaved changes. Are you sure you want to close without saving?
226204
</p>
227-
</div>
228-
229-
{/* Modal Footer */}
230-
<div className='flex w-full items-center justify-between gap-[8px] px-6 py-4'>
205+
</ModalBody>
206+
<ModalFooter>
231207
<Button
232208
variant='default'
233209
onClick={() => setShowUnsavedChangesAlert(false)}
234210
type='button'
235211
>
236-
Keep editing
212+
Keep Editing
237213
</Button>
238-
<Button variant='primary' onClick={handleConfirmDiscard} type='button'>
239-
Discard changes
214+
<Button
215+
variant='primary'
216+
onClick={handleConfirmDiscard}
217+
type='button'
218+
className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
219+
>
220+
Discard Changes
240221
</Button>
241-
</div>
222+
</ModalFooter>
242223
</ModalContent>
243224
</Modal>
244225
</>

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,7 @@
22

33
import { useState } from 'react'
44
import { Loader2 } from 'lucide-react'
5-
import {
6-
Button,
7-
Modal,
8-
ModalContent,
9-
ModalDescription,
10-
ModalFooter,
11-
ModalHeader,
12-
ModalTitle,
13-
} from '@/components/emcn'
5+
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
146
import { Trash } from '@/components/emcn/icons/trash'
157
import { createLogger } from '@/lib/logs/console/logger'
168
import type { ChunkData } from '@/stores/knowledge/store'
@@ -76,29 +68,23 @@ export function DeleteChunkModal({
7668

7769
return (
7870
<Modal open={isOpen} onOpenChange={onClose}>
79-
<ModalContent>
80-
<ModalHeader>
81-
<ModalTitle>Delete Chunk</ModalTitle>
82-
<ModalDescription>
71+
<ModalContent className='w-[400px]'>
72+
<ModalHeader>Delete Chunk</ModalHeader>
73+
<ModalBody>
74+
<p className='text-[12px] text-[var(--text-tertiary)]'>
8375
Are you sure you want to delete this chunk?{' '}
84-
<span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
85-
This action cannot be undone.
86-
</span>
87-
</ModalDescription>
88-
</ModalHeader>
76+
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
77+
</p>
78+
</ModalBody>
8979
<ModalFooter>
90-
<Button
91-
variant='outline'
92-
disabled={isDeleting}
93-
onClick={onClose}
94-
className='h-[32px] px-[12px]'
95-
>
80+
<Button variant='active' disabled={isDeleting} onClick={onClose}>
9681
Cancel
9782
</Button>
9883
<Button
84+
variant='primary'
9985
onClick={handleDeleteChunk}
10086
disabled={isDeleting}
101-
className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
87+
className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
10288
>
10389
{isDeleting ? (
10490
<>

0 commit comments

Comments
 (0)