@@ -5,7 +5,7 @@ import Models from '@/components/edit/configure/models';
55import Visibility from '@/components/edit/configure/visibility' ;
66import Code from '@/components/edit/configure/code' ;
77import { EditContext , KNOWLEDGE_NAME } from '@/contexts/edit' ;
8- import { GoLightBulb } from 'react-icons/go' ;
8+ import { GoLightBulb , GoTrash } from 'react-icons/go' ;
99import { HiCog } from 'react-icons/hi2' ;
1010import { LuCircuitBoard } from 'react-icons/lu' ;
1111import {
@@ -24,11 +24,11 @@ import AssistantNotFound from '@/components/assistant-not-found';
2424import { useRouter } from 'next/navigation' ;
2525import { ChatContext } from '@/contexts/chat' ;
2626import Chat from '@/components/chat' ;
27- import { GoDatabase } from 'react-icons/go' ;
2827import { IoSettingsOutline } from 'react-icons/io5' ;
29- import { IoMdAdd } from 'react-icons/io' ;
28+ import { IoMdAdd , IoMdRefresh } from 'react-icons/io' ;
3029import { RiFileSearchLine } from 'react-icons/ri' ;
31- import KnowledgeModals from '@/components/knowledge/KnowledgeModals' ;
30+ import FileSettingModals from '@/components/knowledge/KnowledgeModals' ;
31+ import { RiFoldersLine } from 'react-icons/ri' ;
3232
3333interface ConfigureProps {
3434 collapsed ?: boolean ;
@@ -51,12 +51,14 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
5151 setDependencies,
5252 setDroppedFiles,
5353 droppedFileDetails,
54+ setDroppedFileDetails,
5455 ingesting,
56+ ingest,
5557 updated,
5658 setUpdated,
59+ ingestionError,
5760 } = useContext ( EditContext ) ;
5861 const { restartScript } = useContext ( ChatContext ) ;
59- const fileTableModal = useDisclosure ( ) ;
6062 const fileSettingModal = useDisclosure ( ) ;
6163
6264 const abbreviate = ( name : string ) => {
@@ -212,40 +214,95 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
212214 aria-label = "files"
213215 title = { < h1 > Files</ h1 > }
214216 startContent = { < RiFileSearchLine /> }
215- classNames = { { content : 'pt-1 pb-3 ' } }
217+ classNames = { { content : collapsed ? 'pt-6 pb-10' : 'p-10 pt-6 ' } }
216218 >
217- < div className = "flex justify-between items-center" >
218- < Button
219- isIconOnly
220- size = "sm"
221- startContent = { < GoDatabase /> }
222- onClick = { fileTableModal . onOpen }
223- />
224-
225- { droppedFileDetails ?. size > 0 && ! ingesting && (
226- < p className = "text-sm text-zinc-500 ml-2" > { `${ droppedFileDetails . size } ${ droppedFileDetails . size === 1 ? 'file' : 'files' } , ${ Array . from (
227- droppedFileDetails . values ( )
219+ < div className = "grid grid-cols-1 gap-2 w-full mb-2" >
220+ { Array . from ( droppedFileDetails . entries ( ) ) . map (
221+ ( fileDetail , i ) => (
222+ < div key = { i } className = "flex space-x-2" >
223+ < div className = "truncate w-full border-2 dark:border-zinc-700 text-sm pl-2 rounded-lg flex justify-between items-center" >
224+ < div className = "flex items-center space-x-2" >
225+ < RiFileSearchLine />
226+ < p className = "capitalize" > { fileDetail [ 1 ] . fileName } </ p >
227+ < p className = "text-xs text-zinc-400 ml-2" > { `${ fileDetail [ 1 ] . size } KB` } </ p >
228+ </ div >
229+ < Button
230+ variant = "light"
231+ isIconOnly
232+ size = "sm"
233+ startContent = { < GoTrash /> }
234+ onPress = { ( ) => {
235+ setDroppedFiles ( ( prev ) =>
236+ prev . filter ( ( f ) => f !== fileDetail [ 0 ] )
237+ ) ;
238+ const newDetails = new Map ( droppedFileDetails ) ;
239+ newDetails . delete ( fileDetail [ 0 ] ) ;
240+ setDroppedFileDetails ( newDetails ) ;
241+ } }
242+ />
243+ </ div >
244+ </ div >
228245 )
229- . reduce ( ( acc , detail ) => acc + detail . size , 0 )
230- . toFixed ( 2 ) } KB`} </ p >
231246 ) }
232- { ingesting && < Spinner size = "sm" className = "ml-2" /> }
233- < div className = "ml-auto flex space-x-2" >
234- < Button
235- isIconOnly
236- size = "sm"
237- startContent = { < IoSettingsOutline /> }
238- onClick = { fileSettingModal . onOpen }
239- />
240- < Button
241- size = "sm"
242- startContent = { < IoMdAdd /> }
243- onClick = { handleAddFiles }
244- >
245- Files
246- </ Button >
247+ < div className = "flex justify-end mt-2" >
248+ { droppedFileDetails ?. size > 0 &&
249+ ! ingesting &&
250+ ! ingestionError && (
251+ < div className = "flex justify-center" >
252+ < RiFoldersLine />
253+ < p className = "text-sm text-zinc-500 ml-2" > { `${ droppedFileDetails . size } ${ droppedFileDetails . size === 1 ? 'file' : 'files' } , ${ Array . from (
254+ droppedFileDetails . values ( )
255+ )
256+ . reduce ( ( acc , detail ) => acc + detail . size , 0 )
257+ . toFixed ( 2 ) } KB`} </ p >
258+ </ div >
259+ ) }
260+ { ingesting && ! ingestionError && (
261+ < Spinner size = "sm" className = "ml-2" />
262+ ) }
263+ { ingestionError && (
264+ < >
265+ < Button
266+ isIconOnly
267+ variant = "flat"
268+ color = "primary"
269+ size = "sm"
270+ startContent = { < IoMdRefresh size = { 18 } /> }
271+ onClick = { ingest }
272+ > </ Button >
273+ < p className = "text-sm text-red-500 ml-2" >
274+ { ingestionError }
275+ </ p >
276+ </ >
277+ ) }
247278 </ div >
248279 </ div >
280+ < div
281+ className = { `flex ${ collapsed ? 'flex-col space-y-2' : 'space-x-4' } ${ droppedFileDetails . size > 0 ? 'pt-4' : '' } ` }
282+ >
283+ < Button
284+ className = "w-full"
285+ variant = "flat"
286+ color = "primary"
287+ isIconOnly
288+ size = "sm"
289+ startContent = { < IoSettingsOutline className = "mr-2" /> }
290+ onPress = { fileSettingModal . onOpen }
291+ >
292+ Settings
293+ </ Button >
294+ < Button
295+ className = "w-full"
296+ variant = "flat"
297+ color = "primary"
298+ isIconOnly
299+ size = "sm"
300+ startContent = { < IoMdAdd className = "mr-2" /> }
301+ onPress = { handleAddFiles }
302+ >
303+ Add Files
304+ </ Button >
305+ </ div >
249306 </ AccordionItem >
250307 < AccordionItem
251308 aria-label = "advanced"
@@ -308,12 +365,9 @@ const Configure: React.FC<ConfigureProps> = ({ collapsed }) => {
308365 : `Click "Refresh Chat" to chat with the updated version of ${ placeholderName ( ) } `
309366 }
310367 />
311- < KnowledgeModals
368+ < FileSettingModals
312369 isFileSettingOpen = { fileSettingModal . isOpen }
313370 onFileSettingClose = { fileSettingModal . onClose }
314- isFileTableOpen = { fileTableModal . isOpen }
315- onFileTableClose = { fileTableModal . onClose }
316- handleAddFiles = { handleAddFiles }
317371 />
318372 </ >
319373 ) ;
0 commit comments