feat: integrate useFieldArray for dynamic pattern management in TriggersForm

2025-06-26 18:27:28 +00:00 · 2025-06-08 23:27:39 +01:00 · 2025-06-08 23:27:39 +01:00 · d53906750b
commit d53906750b
parent b81fdd71da
3 changed files with 150 additions and 166 deletions
--- a/frontend/src/components/visual-editor/form/TriggersForm.tsx
+++ b/frontend/src/components/visual-editor/form/TriggersForm.tsx
@ -7,7 +7,7 @@
 */

 import { Divider } from "@mui/material";
-import { Controller, useFormContext } from "react-hook-form";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";

 import { ContentContainer, ContentItem } from "@/app-components/dialogs";
 import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
@ -24,21 +24,21 @@ export const TriggersForm = () => {
  const block = useBlock();
  const { t } = useTranslate();
  const { control } = useFormContext<IBlockAttributes>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "patterns",
+    keyName: "fieldId",
+  });

  return (
    <ContentContainer>
      <ContentItem>
-        <Controller
-          name="patterns"
+        <PatternsInput
          control={control}
-          defaultValue={block?.patterns || []}
-          render={({ field }) => (
-            <PatternsInput
-              value={field?.value || []}
-              onChange={field.onChange}
-              minInput={1}
-            />
-          )}
+          name="patterns"
+          fields={fields}
+          append={append}
+          remove={remove}
        />
      </ContentItem>
      <Divider orientation="horizontal" flexItem />
--- a/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PatternInput.tsx
@ -6,17 +6,15 @@
 * 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, TextFieldProps } from "@mui/material";
-import { FC, useEffect, useState } from "react";
-import { RegisterOptions, useFormContext } from "react-hook-form";
+import { Box } from "@mui/material";
+import { FC } from "react";
+import { Control, Controller } from "react-hook-form";

 import { Input } from "@/app-components/inputs/Input";
 import NlpPatternSelect from "@/app-components/inputs/NlpPatternSelect";
 import { RegexInput } from "@/app-components/inputs/RegexInput";
 import { useTranslate } from "@/hooks/useTranslate";
 import {
-  IBlockAttributes,
-  IBlockFull,
  NlpPattern,
  Pattern,
  PatternType,
@ -33,119 +31,122 @@ import { OutcomeInput } from "./OutcomeInput";
 import { PostbackInput } from "./PostbackInput";

 const getPatternType = (pattern: Pattern): PatternType => {
-  if (isRegexString(pattern)) {
-    return "regex";
-  } else if (Array.isArray(pattern)) {
-    return "nlp";
-  } else if (typeof pattern === "object") {
-    if (pattern?.type === "menu") {
-      return "menu";
-    } else if (pattern?.type === "content") {
-      return "content";
-    } else if (pattern?.type === "outcome") {
-      return "outcome";
-    } else {
-      return "payload";
-    }
-  } else {
-    return "text";
+  if (typeof pattern === "string") {
+    return isRegexString(pattern) ? "regex" : "text";
  }
+
+  if (Array.isArray(pattern)) {
+    return "nlp";
+  }
+
+  if (pattern && typeof pattern === "object") {
+    switch (pattern.type) {
+      case "menu":
+        return "menu";
+      case "content":
+        return "content";
+      case "outcome":
+        return "outcome";
+      default:
+        return "payload";
+    }
+  }
+
+  return "text";
 };

 type PatternInputProps = {
-  value: Pattern;
-  onChange: (pattern: Pattern) => void;
-  block?: IBlockFull;
-  idx: number;
-  getInputProps?: (index: number) => TextFieldProps;
+  control: Control<any>;
+  basePath: string;
 };

-const PatternInput: FC<PatternInputProps> = ({
-  value,
-  onChange,
-  idx,
-  getInputProps,
-}) => {
+const PatternInput: FC<PatternInputProps> = ({ control, basePath }) => {
  const { t } = useTranslate();
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext<IBlockAttributes>();
-  const [pattern, setPattern] = useState<Pattern>(value);
-  const patternType = getPatternType(value);
-  const registerInput = (
-    errorMessage: string,
-    idx: number,
-    additionalOptions?: RegisterOptions<IBlockAttributes>,
-  ) => {
-    return {
-      ...register(`patterns.${idx}`, {
-        required: errorMessage,
-        ...additionalOptions,
-      }),
-      helperText: errors.patterns?.[idx]
-        ? errors.patterns[idx].message
-        : undefined,
-      error: !!errors.patterns?.[idx],
-    };
-  };
-
-  useEffect(() => {
-    if (pattern || pattern === "") {
-      onChange(pattern);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pattern]);

  return (
-    <Box display="flex" flexGrow={1}>
-      {patternType === "nlp" && (
-        <NlpPatternSelect
-          patterns={pattern as NlpPattern[]}
-          onChange={setPattern}
-        />
-      )}
-      {["payload", "content", "menu"].includes(patternType) ? (
-        <PostbackInput
-          onChange={(payload) => {
-            payload && setPattern(payload);
-          }}
-          defaultValue={pattern as PayloadPattern}
-        />
-      ) : null}
-      {patternType === "outcome" ? (
-        <OutcomeInput
-          onChange={(payload) => {
-            payload && setPattern(payload);
-          }}
-          defaultValue={pattern as PayloadPattern}
-        />
-      ) : null}
-      {typeof value === "string" && patternType === "regex" ? (
-        <RegexInput
-          {...registerInput(t("message.regex_is_empty"), idx, {
-            validate: (pattern) => {
-              return isRegex(extractRegexBody(pattern))
-                ? true
-                : t("message.regex_is_invalid");
-            },
-            setValueAs: (v) => (isRegexString(v) ? v : formatWithSlashes(v)),
-          })}
-          value={extractRegexBody(value)}
-          label={t("label.regex")}
-          onChange={(e) => onChange(formatWithSlashes(e.target.value))}
-          required
-        />
-      ) : null}
-      {typeof value === "string" && patternType === "text" ? (
-        <Input
-          {...(getInputProps ? getInputProps(idx) : null)}
-          label={t("label.text")}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-        />
-      ) : null}
-    </Box>
+    <Controller
+      name={basePath}
+      control={control}
+      rules={{
+        validate: (currentPatternValue: Pattern) => {
+          const type = getPatternType(currentPatternValue);
+
+          if (type === "regex") {
+            const regexString = currentPatternValue as string;
+
+            if (!regexString || extractRegexBody(regexString).trim() === "") {
+              return t("message.regex_is_empty");
+            }
+            if (!isRegex(extractRegexBody(regexString))) {
+              return t("message.regex_is_invalid");
+            }
+          } else if (type === "text") {
+            const textString = currentPatternValue as string;
+
+            if (!textString || textString.trim() === "") {
+              return t("message.text_is_required");
+            }
+          }
+
+          return true;
+        },
+      }}
+      render={({ field, fieldState }) => {
+        const patternForPath = field.value as Pattern;
+        const currentPatternType = getPatternType(patternForPath);
+
+        return (
+          <Box display="flex" flexGrow={1}>
+            {currentPatternType === "nlp" && (
+              <NlpPatternSelect
+                patterns={patternForPath as NlpPattern[]}
+                onChange={field.onChange}
+              />
+            )}
+            {["payload", "content", "menu"].includes(currentPatternType) ? (
+              <PostbackInput
+                onChange={(payload) => {
+                  payload && field.onChange(payload);
+                }}
+                defaultValue={patternForPath as PayloadPattern}
+              />
+            ) : null}
+            {currentPatternType === "outcome" ? (
+              <OutcomeInput
+                onChange={(payload) => {
+                  payload && field.onChange(payload);
+                }}
+                defaultValue={patternForPath as PayloadPattern}
+              />
+            ) : null}
+            {typeof patternForPath === "string" &&
+            currentPatternType === "regex" ? (
+              <RegexInput
+                value={extractRegexBody(patternForPath as string)}
+                label={t("label.regex")}
+                onChange={(e) =>
+                  field.onChange(formatWithSlashes(e.target.value))
+                }
+                required
+                error={fieldState.invalid}
+                helperText={fieldState.error?.message}
+              />
+            ) : null}
+            {typeof patternForPath === "string" &&
+            currentPatternType === "text" ? (
+              <Input
+                label={t("label.text")}
+                value={patternForPath as string}
+                onChange={(e) => field.onChange(e.target.value)}
+                error={fieldState.invalid}
+                helperText={fieldState.error?.message}
+                required
+              />
+            ) : null}
+          </Box>
+        );
+      }}
+    />
  );
 };

--- a/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx
@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
 *
 * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
 * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@ -14,8 +14,13 @@ import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import SpellcheckIcon from "@mui/icons-material/Spellcheck";
 import { Box, Chip, IconButton, styled, useTheme } from "@mui/material";
-import { FC, useEffect, useMemo, useState } from "react";
-import { useFormContext } from "react-hook-form";
+import { FC, useMemo } from "react";
+import {
+  Control,
+  FieldArrayWithId,
+  UseFieldArrayAppend,
+  UseFieldArrayRemove,
+} from "react-hook-form";

 import DropdownButton, {
  DropdownButtonAction,
@ -24,9 +29,6 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { Pattern } from "@/types/block.types";
 import { PayloadType } from "@/types/message.types";
 import { SXStyleOptions } from "@/utils/SXStyleOptions";
-import { createValueWithId, ValueWithId } from "@/utils/valueWithId";
-
-import { getInputControls } from "../../utils/inputControls";

 import PatternInput from "./PatternInput";

@ -41,41 +43,28 @@ const StyledNoPatternsDiv = styled("div")(
 );

 type PatternsInputProps = {
-  value: Pattern[];
-  onChange: (patterns: Pattern[]) => void;
-  minInput: number;
+  control: Control<any>;
+  name: string;
+  fields: FieldArrayWithId<any, string, "fieldId">[];
+  append: UseFieldArrayAppend<any, string>;
+  remove: UseFieldArrayRemove;
 };

-const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
+const PatternsInput: FC<PatternsInputProps> = ({
+  control,
+  name,
+  fields,
+  append,
+  remove,
+}) => {
  const { t } = useTranslate();
  const theme = useTheme();
-  const [patterns, setPatterns] = useState<ValueWithId<Pattern>[]>(
-    value.map((pattern) => createValueWithId(pattern)),
-  );
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext<any>();
  const addInput = (defaultValue: Pattern) => {
-    setPatterns([...patterns, createValueWithId<Pattern>(defaultValue)]);
+    append(defaultValue);
  };
  const removeInput = (index: number) => {
-    const updatedPatterns = [...patterns];
-
-    updatedPatterns.splice(index, 1);
-
-    setPatterns(updatedPatterns);
+    remove(index);
  };
-  const updateInput = (index: number) => (p: Pattern) => {
-    patterns[index].value = p;
-    setPatterns([...patterns]);
-  };
-
-  useEffect(() => {
-    onChange(patterns.map(({ value }) => value));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [patterns]);
-
  const actions: DropdownButtonAction[] = useMemo(
    () => [
      {
@ -87,7 +76,7 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
      {
        icon: <PsychologyAltIcon />,
        name: t("label.intent_match"),
-        defaultValue: [],
+        defaultValue: [[]],
      },
      {
        icon: <MouseIcon />,
@ -117,11 +106,11 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
  return (
    <Box display="flex" flexDirection="column">
      <Box display="flex" flexDirection="column">
-        {patterns.length == 0 ? (
+        {fields.length === 0 ? (
          <StyledNoPatternsDiv>{t("label.no_patterns")}</StyledNoPatternsDiv>
        ) : (
-          patterns.map(({ value, id }, idx) => (
-            <Box display="flex" alignItems="center" mt={2} key={id}>
+          fields.map((field, idx) => (
+            <Box display="flex" alignItems="center" mt={2} key={field.fieldId}>
              {idx > 0 && (
                <Chip
                  sx={{ m: 1, color: theme.palette.grey[600] }}
@ -131,15 +120,9 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
                />
              )}
              <PatternInput
-                idx={idx}
-                value={value}
-                onChange={updateInput(idx)}
-                getInputProps={getInputControls(
-                  "label",
-                  errors,
-                  register,
-                  t("message.text_is_required"),
-                )}
+                control={control}
+                basePath={`${name}.${idx}`}
+                //idx={idx}
              />
              <IconButton
                size="small"