File size: 1,873 Bytes
bbae7a9 1fe47b1 bbae7a9 1fe47b1 bbae7a9 1fe47b1 0970991 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import React, { useState, useEffect, useRef } from "react"
export const TokenChip = ({
token,
logprob,
threshold,
replacements,
onReplace
}: {
token: string,
logprob: number,
threshold: number,
replacements: string[],
onReplace: (newToken: string) => void
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const dropdownRef = useRef<HTMLSelectElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsExpanded(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const handleClick = () => {
if (logprob < threshold && replacements.length > 0) {
setIsExpanded(true);
}
}
const handleReplacement = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newToken = event.target.value
if (newToken !== token) {
onReplace(newToken)
}
setIsExpanded(false);
}
return (
<span
title={logprob.toFixed(2)}
className={`token-chip ${logprob < threshold ? "flagged" : ""}`}
style={{ position: "relative", cursor: logprob < threshold ? "pointer" : "default" }}
onClick={handleClick}
>
{token}
{isExpanded && (
<select
ref={dropdownRef}
onChange={handleReplacement}
value={token}
style={{
position: "absolute",
top: "100%",
left: 0,
zIndex: 1000
}}
size={replacements.length}
autoFocus
>
{replacements.map((rep, idx) => (
<option key={idx} value={rep}>{rep}</option>
))}
</select>
)}
</span>
)
}
|