83f090826e
* feat: model hub revamp UI * chore: model description - consistent markdown css * chore: add model versions dropdown * chore: integrate APIs - model sources * chore: update model display name * chore: lint fix * chore: page transition animation * feat: model search dropdown - deeplink * chore: bump cortex version * chore: add remote model sources * chore: model download state * chore: fix model metadata label * chore: polish model detail page markdown * test: fix test cases * chore: initialize default Hub model sources * chore: fix model stats * chore: clean up click outside and inside hooks * feat: change hub banner * chore: lint fix * chore: fix css long model id
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
|
|
import { useAtom, useSetAtom } from 'jotai'
|
|
|
|
import { XIcon } from 'lucide-react'
|
|
|
|
import { currentPromptAtom, fileUploadAtom } from '@/containers/Providers/Jotai'
|
|
|
|
import { toGigabytes } from '@/utils/converter'
|
|
|
|
import Icon from './Icon'
|
|
|
|
const FileUploadPreview = () => {
|
|
const [fileUpload, setFileUpload] = useAtom(fileUploadAtom)
|
|
const setCurrentPrompt = useSetAtom(currentPromptAtom)
|
|
|
|
const onDeleteClick = () => {
|
|
setFileUpload(undefined)
|
|
setCurrentPrompt('')
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col rounded-t-lg border border-b-0 border-[hsla(var(--app-border))] p-4">
|
|
{!!fileUpload && (
|
|
<div className="bg-secondary relative inline-flex w-60 space-x-3 rounded-lg p-4">
|
|
<Icon type={fileUpload?.type} />
|
|
|
|
<div className="w-full">
|
|
<h6 className="line-clamp-1 w-3/4 truncate font-medium">
|
|
{fileUpload?.file.name.replaceAll(/[-._]/g, ' ')}
|
|
</h6>
|
|
<p className="text-[hsla(var(--text-secondary)]">
|
|
{toGigabytes(fileUpload?.file.size)}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="absolute -right-2 -top-2 cursor-pointer rounded-full p-0.5"
|
|
onClick={onDeleteClick}
|
|
>
|
|
<XIcon size={14} className="text-background" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FileUploadPreview
|