update: nlp select pattern v0.0.1

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

@@ -6,7 +6,7 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { RemoveOutlined } from "@mui/icons-material";
+import { Cancel } from "@mui/icons-material";
 import {
   Box,
   CircularProgress,
@@ -27,10 +27,13 @@ import { EntityType, Format } from "@/services/types";
 import { NlpPattern } from "@/types/block.types";
 import { INlpEntity } from "@/types/nlp-entity.types";
 
-type NlpPatternSelectProps = {};
+type NlpPatternSelectProps = { patterns: NlpPattern[]; onChange: any };
 
-const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
+const NlpPatternSelect = (
-  const [selected, setSelected] = useState<NlpPattern[]>([]);
+  { patterns, onChange }: NlpPatternSelectProps,
+  ref,
+) => {
+  const [selected, setSelected] = useState<NlpPattern[]>(patterns);
   const theme = useTheme();
   const { t } = useTranslate();
   const { onSearch, searchPayload } = useSearch<INlpEntity>({
@@ -69,12 +72,6 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
   }
 
   const handleNlpValueChange = (entity: INlpEntity, valueId: string) => {
-    const value = getNlpValueFromCache(valueId);
-
-    if (!value) {
-      throw new Error("Unable to find nlp value in cache");
-    }
-
     const newSelection = [...selected];
     const update = newSelection.find(({ entity: e }) => e === entity.name);
 
@@ -82,23 +79,32 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
       throw new Error("Unable to find nlp entity");
     }
 
-    if (value.id === entity.id) {
+    if (valueId === entity.id) {
       update.match = "entity";
       update.value = entity.name;
     } else {
+      const value = getNlpValueFromCache(valueId);
+
+      if (!value) {
+        throw new Error("Unable to find nlp value in cache");
+      }
       update.match = "value";
       update.value = value.value;
     }
+
+    onChange(undefined, newSelection);
   };
+  const defaultValue =
+    options.filter(({ name }) =>
+      selected.find(({ entity: entityName }) => entityName === name),
+    ) || {};
 
   return (
     <Autocomplete
       ref={ref}
       size="medium"
       disabled={options.length === 0}
-      defaultValue={options.filter(({ name }) =>
+      defaultValue={defaultValue}
-        selected.find(({ entity: entityName }) => entityName === name),
-      )}
       multiple={true}
       options={options}
       onChange={handleNlpEntityChange}
@@ -136,7 +142,8 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
       isOptionEqualToValue={(option, value) => option.id === value.id}
       freeSolo={false}
       loading={isLoading}
-      renderTags={(entities, getTagProps) => (
+      renderTags={(entities, getTagProps) => {
+        return (
           <Box
             sx={{
               display: "flex",
@@ -152,18 +159,32 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
               ) => {
                 handleNlpValueChange(entity, valueId);
               };
+              const selected = (
+                Array.isArray(patterns)
+                  ? patterns?.find((e) => e.entity === entity.name)
+                  : {}
+              ) as NlpPattern;
 
               return (
                 <Autocomplete
                   size="small"
+                  defaultValue={selected?.value || ""}
                   options={[entity.id].concat(entity.values)}
                   multiple={false}
                   key={key}
-                getOptionLabel={(option) =>
+                  getOptionLabel={(option) => {
-                  option
+                    const nlpValueCache = getNlpValueFromCache(option);
-                    ? getNlpValueFromCache(option)?.value || "-"
+
-                    : t("label.any")
+                    if (nlpValueCache) {
+                      return nlpValueCache?.value;
                     }
+
+                    if (selected?.entity === option || option === entity.id) {
+                      return t("label.any");
+                    }
+
+                    return option;
+                  }}
                   disableClearable
                   popupIcon={false}
                   onChange={handleChange}
@@ -176,18 +197,21 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
                     "& .MuiOutlinedInput-root": {
                       paddingRight: "2rem !important",
                       "&.MuiInputBase-sizeSmall": {
-                      padding: "0 !important",
+                        padding: "0 6px 0 0 !important",
                       },
                     },
                   }}
                   renderInput={(props) => (
                     <Input
                       {...props}
-                    sx={{ padding: 0, overflow: "hidden" }}
-                    // onChange={(e) => onSearch(e.target.value)}
                       InputProps={{
                         ...props.InputProps,
+                        readOnly: true,
+                        sx: {
+                          overflow: "hidden",
+                        },
                         startAdornment: (
+                          <IconButton>
                             <InputAdornment
                               position="start"
                               sx={{
@@ -198,6 +222,7 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
                             >
                               {entity.name}
                             </InputAdornment>
+                          </IconButton>
                         ),
                         endAdornment: (
                           <InputAdornment position="end">
@@ -205,11 +230,20 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
                               <CircularProgress color="inherit" size={20} />
                             ) : (
                               <IconButton
-                              onClick={onDelete}
+                                onClick={(e) => {
+                                  onDelete(e);
+
+                                  onChange(
+                                    undefined,
+                                    patterns.filter(
+                                      (p) => p.entity !== entity.name,
+                                    ),
+                                  );
+                                }}
                                 edge="end"
                                 size="small"
                               >
-                              <RemoveOutlined />
+                                <Cancel htmlColor={theme.palette.grey[500]} />
                               </IconButton>
                             )}
                           </InputAdornment>
@@ -221,7 +255,8 @@ const NlpPatternSelect = ({}: NlpPatternSelectProps, ref) => {
               );
             })}
           </Box>
-      )}
+        );
+      }}
       renderInput={(props) => (
         <Input
           {...props}

frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx

@@ -6,7 +6,7 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import { Box, Grid, MenuItem, TextFieldProps, Typography } from "@mui/material";
+import { Grid, MenuItem, TextFieldProps } from "@mui/material";
 import { FC, useEffect, useState } from "react";
 import { RegisterOptions, useFormContext } from "react-hook-form";
 
@@ -14,7 +14,6 @@ import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntity
 import { Input } from "@/app-components/inputs/Input";
 import NlpPatternSelect from "@/app-components/inputs/NlpPatternSelect";
 import { RegexInput } from "@/app-components/inputs/RegexInput";
-import { useGetFromCache } from "@/hooks/crud/useGet";
 import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType, Format } from "@/services/types";
 import {
@@ -26,8 +25,6 @@ import {
   PayloadPattern,
 } from "@/types/block.types";
 import { IMenuItem } from "@/types/menu.types";
-import { INlpEntity } from "@/types/nlp-entity.types";
-import { INlpValue } from "@/types/nlp-value.types";
 
 import { ContentPostbackInput } from "./ContentPostbackInput";
 import { PostbackInput } from "./PostbackInput";
@@ -72,7 +69,7 @@ const PatternInput: FC<PatternInputProps> = ({
     register,
     formState: { errors },
   } = useFormContext<IBlockAttributes>();
-  const getNlpEntityFromCache = useGetFromCache(EntityType.NLP_ENTITY);
+  // const getNlpEntityFromCache = useGetFromCache(EntityType.NLP_ENTITY);
   const [pattern, setPattern] = useState<Pattern>(value);
   const [patternType, setPatternType] = useState<PatternType>(getType(value));
   const types = [
@@ -148,8 +145,15 @@ const PatternInput: FC<PatternInputProps> = ({
         </Input>
       </Grid>
       <Grid item xs={9}>
-        {patternType === "nlp" && <NlpPatternSelect />}
+        {patternType === "nlp" && (
-        {patternType === "nlp" ? (
+          <NlpPatternSelect
+            patterns={pattern as NlpPattern[]}
+            onChange={(_e, data) => {
+              setPattern(data);
+            }}
+          />
+        )}
+        {/* {patternType === "nlp" ? (
           <AutoCompleteEntitySelect<INlpValue, "value">
             value={(pattern as NlpPattern[]).map((v) =>
               "value" in v && v.value ? v.value : v.entity,
@@ -225,7 +229,7 @@ const PatternInput: FC<PatternInputProps> = ({
               }, [] as INlpValue[]);
             }}
           />
-        ) : null}
+        ) : null} */}
         {patternType === "menu" ? (
           <AutoCompleteEntitySelect<IMenuItem, "title", false>
             value={pattern ? (pattern as PayloadPattern).value : null}