156 lines
4.1 KiB
TypeScript
156 lines
4.1 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { FileIcon } from "@/components/ui/file-icon"
|
|
import { Input } from "@/components/ui/input"
|
|
import { ChatbotUIContext } from "@/context/context"
|
|
import { CollectionFile } from "@/types"
|
|
import { IconChevronDown, IconCircleCheckFilled } from "@tabler/icons-react"
|
|
import { FC, useContext, useEffect, useRef, useState } from "react"
|
|
|
|
interface CollectionFileSelectProps {
|
|
selectedCollectionFiles: CollectionFile[]
|
|
onCollectionFileSelect: (file: CollectionFile) => void
|
|
}
|
|
|
|
export const CollectionFileSelect: FC<CollectionFileSelectProps> = ({
|
|
selectedCollectionFiles,
|
|
onCollectionFileSelect
|
|
}) => {
|
|
const { files } = useContext(ChatbotUIContext)
|
|
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const triggerRef = useRef<HTMLButtonElement>(null)
|
|
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [search, setSearch] = useState("")
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setTimeout(() => {
|
|
inputRef.current?.focus()
|
|
}, 100) // FIX: hacky
|
|
}
|
|
}, [isOpen])
|
|
|
|
const handleFileSelect = (file: CollectionFile) => {
|
|
onCollectionFileSelect(file)
|
|
}
|
|
|
|
if (!files) return null
|
|
|
|
return (
|
|
<DropdownMenu
|
|
open={isOpen}
|
|
onOpenChange={isOpen => {
|
|
setIsOpen(isOpen)
|
|
setSearch("")
|
|
}}
|
|
>
|
|
<DropdownMenuTrigger
|
|
className="bg-background w-full justify-start border-2 px-3 py-5"
|
|
asChild
|
|
>
|
|
<Button
|
|
ref={triggerRef}
|
|
className="flex items-center justify-between"
|
|
variant="ghost"
|
|
>
|
|
<div className="flex items-center">
|
|
<div className="ml-2 flex items-center">
|
|
{selectedCollectionFiles.length} files selected
|
|
</div>
|
|
</div>
|
|
|
|
<IconChevronDown />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent
|
|
style={{ width: triggerRef.current?.offsetWidth }}
|
|
className="space-y-2 overflow-auto p-2"
|
|
align="start"
|
|
>
|
|
<Input
|
|
ref={inputRef}
|
|
placeholder="Search files..."
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
onKeyDown={e => e.stopPropagation()}
|
|
/>
|
|
|
|
{selectedCollectionFiles
|
|
.filter(file =>
|
|
file.name.toLowerCase().includes(search.toLowerCase())
|
|
)
|
|
.map(file => (
|
|
<CollectionFileItem
|
|
key={file.id}
|
|
file={file}
|
|
selected={selectedCollectionFiles.some(
|
|
selectedCollectionFile => selectedCollectionFile.id === file.id
|
|
)}
|
|
onSelect={handleFileSelect}
|
|
/>
|
|
))}
|
|
|
|
{files
|
|
.filter(
|
|
file =>
|
|
!selectedCollectionFiles.some(
|
|
selectedCollectionFile => selectedCollectionFile.id === file.id
|
|
) && file.name.toLowerCase().includes(search.toLowerCase())
|
|
)
|
|
.map(file => (
|
|
<CollectionFileItem
|
|
key={file.id}
|
|
file={file}
|
|
selected={selectedCollectionFiles.some(
|
|
selectedCollectionFile => selectedCollectionFile.id === file.id
|
|
)}
|
|
onSelect={handleFileSelect}
|
|
/>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
interface CollectionFileItemProps {
|
|
file: CollectionFile
|
|
selected: boolean
|
|
onSelect: (file: CollectionFile) => void
|
|
}
|
|
|
|
const CollectionFileItem: FC<CollectionFileItemProps> = ({
|
|
file,
|
|
selected,
|
|
onSelect
|
|
}) => {
|
|
const handleSelect = () => {
|
|
onSelect(file)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex cursor-pointer items-center justify-between py-0.5 hover:opacity-50"
|
|
onClick={handleSelect}
|
|
>
|
|
<div className="flex grow items-center truncate">
|
|
<div className="mr-2 min-w-[24px]">
|
|
<FileIcon type={file.type} size={24} />
|
|
</div>
|
|
|
|
<div className="truncate">{file.name}</div>
|
|
</div>
|
|
|
|
{selected && (
|
|
<IconCircleCheckFilled size={20} className="min-w-[30px] flex-none" />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|