A dropdown menu for attaching files, docs or other context sources to an AI chat prompt, with search and multi-select ticks instead of a focus-stealing dialog.
"use client";
import { ContextPicker } from "@/components/ui/context-picker";
import { FileCode, Globe, ImageIcon, Terminal } from "lucide-react";
import { useState } from "react";
function ContextPickerDemo() {
const sources = [
{
id: "button",
label: "button.tsx",
group: "Open files",
detail: "1-86",
icon: <FileCode />,
},
{
id: "styles",
label: "styles.ts",
group: "Open files",
detail: "1-210",
icon: <FileCode />,
},
{
id: "index",
label: "index.css",
group: "Open files",
icon: <FileCode />,
},
{
id: "docs",
label: "Tailwind v4 docs",
group: "External",
icon: <Globe />,
},
{
id: "shell",
label: "Terminal output",
group: "External",
icon: <Terminal />,
},
{
id: "screenshot",
label: "screenshot.png",
group: "External",
icon: <ImageIcon />,
disabled: true,
},
];
const [attached, setAttached] = useState(["button"]);
return (
<div className="flex min-h-[320px] w-full items-start justify-center bg-background p-10">
<ContextPicker
sources={sources}
selected={attached}
onSelect={(id) => setAttached((a) => [...a, id])}
onDeselect={(id) => setAttached((a) => a.filter((x) => x !== id))}
/>
</div>
);
}
export default ContextPickerDemo;