supermemory/packages/ui/components/combobox.tsx

"use client"

import { cn } from "@lib/utils"
import { Button } from "@ui/components/button"
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
} from "@ui/components/command"
import { Popover, PopoverContent, PopoverTrigger } from "@ui/components/popover"
import { Check, ChevronsUpDown, X } from "lucide-react"
import * as React from "react"

interface Option {
	value: string
	label: string
}

interface ComboboxProps {
	options: Option[]
	onSelect: (value: string) => void
	onSubmit: (newName: string) => void
	selectedValues: string[]
	setSelectedValues: React.Dispatch<React.SetStateAction<string[]>>
	className?: string
	placeholder?: string
	triggerClassName?: string
}

export function Combobox({
	options,
	onSelect,
	onSubmit,
	selectedValues,
	setSelectedValues,
	className,
	placeholder = "Select...",
	triggerClassName,
}: ComboboxProps) {
	const [open, setOpen] = React.useState(false)
	const [inputValue, setInputValue] = React.useState("")

	const handleSelect = (value: string) => {
		onSelect(value)
		setOpen(false)
		setInputValue("")
	}

	const handleCreate = () => {
		if (inputValue.trim()) {
			onSubmit(inputValue)
			setOpen(false)
			setInputValue("")
		}
	}

	const handleRemove = (valueToRemove: string) => {
		setSelectedValues((prev) => prev.filter((value) => value !== valueToRemove))
	}

	const filteredOptions = options.filter(
		(option) => !selectedValues.includes(option.value),
	)

	const isNewValue =
		inputValue.trim() &&
		!options.some(
			(option) => option.label.toLowerCase() === inputValue.toLowerCase(),
		)

	return (
		<Popover onOpenChange={setOpen} open={open}>
			<PopoverTrigger asChild>
				{/** biome-ignore lint/a11y/useSemanticElements: shadcn*/}
				<Button
					aria-expanded={open}
					className={cn(
						"w-full justify-between min-h-10 h-auto",
						triggerClassName,
					)}
					role="combobox"
					variant="outline"
				>
					<div className="flex flex-wrap gap-1 items-center w-full">
						{selectedValues.length > 0 ? (
							selectedValues.map((value) => {
								const option = options.find((opt) => opt.value === value)
								return (
									<span
										className="inline-flex items-center gap-1 px-2 py-0.5 bg-secondary text-sm rounded-md"
										key={value}
									>
										{option?.label || value}
										<button
											className="hover:text-destructive"
											onClick={(e) => {
												e.stopPropagation()
												handleRemove(value)
											}}
											type="button"
										>
											<X className="h-3 w-3" />
										</button>
									</span>
								)
							})
						) : (
							<span className="text-muted-foreground">{placeholder}</span>
						)}
					</div>
					<ChevronsUpDown className="opacity-50 ml-2 shrink-0" />
				</Button>
			</PopoverTrigger>
			<PopoverContent className={cn("w-full p-0", className)}>
				<Command>
					<CommandInput
						className="h-9"
						onValueChange={setInputValue}
						placeholder="Search or create..."
						value={inputValue}
					/>
					<CommandList>
						{filteredOptions.length === 0 && !isNewValue && (
							<CommandEmpty>No options found.</CommandEmpty>
						)}
						<CommandGroup>
							{filteredOptions.map((option) => (
								<CommandItem
									key={option.value}
									onSelect={() => handleSelect(option.value)}
									value={option.value}
								>
									{option.label}
									<Check
										className={cn(
											"ml-auto",
											selectedValues.includes(option.value)
												? "opacity-100"
												: "opacity-0",
										)}
									/>
								</CommandItem>
							))}
							{isNewValue && (
								<CommandItem
									className="text-primary cursor-pointer"
									onSelect={handleCreate}
								>
									Create "{inputValue}"
								</CommandItem>
							)}
						</CommandGroup>
					</CommandList>
				</Command>
			</PopoverContent>
		</Popover>
	)
}