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

fix(frontend): resolve Nlu selection bug

frontend/src/app-components/inputs/Selectable.tsx

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

frontend/src/components/nlp/components/NlpTrainForm.tsx

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