/**
* A searchable grid of insertable token chips (capped at 400 rendered so big lists
* like danbooru stay snappy).
* @module web-app/components/TokenPicker
*/
import { useState } from "react";
// A searchable grid of tokens. Click one to insert it into the prompt. Capped at
// a few hundred rendered chips so the big lists (danbooru, etc.) stay snappy.
/**
* @param {object} props
* @param {string[]} props.tokens The tokens to show.
* @param {Function} props.onInsert Called with the clicked token.
* @returns {JSX.Element}
*/
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
export default function TokenPicker({
tokens,
onInsert
}) {
const [q, setQ] = useState("");
const filtered = q ? tokens.filter(t => t.toLowerCase().includes(q.toLowerCase())) : tokens;
const shown = filtered.slice(0, 400);
return /*#__PURE__*/_jsxDEV("div", {
className: "picker",
children: [/*#__PURE__*/_jsxDEV("input", {
className: "picker-filter",
placeholder: `Filter ${tokens.length}…`,
value: q,
onChange: e => setQ(e.target.value)
}, void 0, false), /*#__PURE__*/_jsxDEV("div", {
className: "picker-list",
children: [shown.map(t => /*#__PURE__*/_jsxDEV("button", {
className: "chip",
title: "Insert",
onClick: () => onInsert(t),
children: t
}, t, false)), filtered.length > shown.length && /*#__PURE__*/_jsxDEV("span", {
className: "picker-more",
children: ["+", filtered.length - shown.length, " more — keep typing"]
}, void 0, true)]
}, void 0, true)]
}, void 0, true);
}