Merge pull request #1151 from Hexastack/1150-bug---nlu-selection-component

fix(frontend): resolve Nlu selection bug
This commit is contained in:
Med Marrouchi 2025-06-23 09:20:44 +01:00 committed by GitHub
commit 03af2105dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 14 deletions

View File

@ -25,18 +25,18 @@ import {
const SelectableBox = styled(Box)({ const SelectableBox = styled(Box)({
position: "relative", position: "relative",
height: "30px",
marginBottom: "1rem", marginBottom: "1rem",
"& .highlight, & .editable": { "& .highlight, & .editable": {
position: "absolute", position: "absolute",
top: 0, top: 0,
display: "block", display: "block",
width: "100%", width: "100%",
padding: "4px", padding: "0 4px",
lineHeight: 1.5,
}, },
"& .editable": { "& .editable": {
position: "relative",
backgroundColor: "transparent", backgroundColor: "transparent",
padding: "0px 4px",
color: "#000", color: "#000",
}, },
}); });
@ -169,10 +169,10 @@ const Selectable: FC<SelectableProps> = ({
) { ) {
const inputContainer = editableRef.current; const inputContainer = editableRef.current;
let substring: string = ""; let substring: string = "";
let input: HTMLInputElement | null = null; let input: HTMLTextAreaElement | null = null;
if (inputContainer) { if (inputContainer) {
input = inputContainer.querySelector("input"); input = inputContainer.querySelector("textarea");
if ( if (
input && input &&
@ -267,6 +267,7 @@ const Selectable: FC<SelectableProps> = ({
/> />
))} ))}
<Input <Input
multiline
ref={editableRef} ref={editableRef}
className="editable" className="editable"
fullWidth fullWidth

View File

@ -210,12 +210,13 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
keywordEntities={keywordEntities} keywordEntities={keywordEntities}
patternEntities={patternEntities} patternEntities={patternEntities}
placeholder={t("placeholder.nlp_sample_text")} placeholder={t("placeholder.nlp_sample_text")}
onSelect={(selection, start, end) => { onSelect={(newSelection, start, end) => {
setSelection({ newSelection !== selection?.value &&
value: selection, setSelection({
start, value: newSelection,
end, start,
}); end,
});
}} }}
onChange={({ text, entities }) => { onChange={({ text, entities }) => {
debounceSetText(text); debounceSetText(text);
@ -322,9 +323,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
</ContentItem> </ContentItem>
))} ))}
</Box> </Box>
{ {/* Keyword entities */}
/* Keyword entities */
}
<Box display="flex" flexDirection="column"> <Box display="flex" flexDirection="column">
{keywordEntities.map((keywordEntity, index) => ( {keywordEntities.map((keywordEntity, index) => (
<ContentItem <ContentItem