fix(frontend): instable blocks type

frontend/src/components/visual-editor/form/TextMessageForm.tsx

@@ -17,6 +17,7 @@ import { IBlockAttributes } from "@/types/block.types";
 import { useBlock } from "./BlockFormProvider";
 import { FormSectionTitle } from "./FormSectionTitle";
 import ReplacementTokens from "./inputs/ReplacementTokens";
+import { getInputControls } from "./utils/inputControls";
 
 const TextMessageForm = () => {
   const block = useBlock();
@@ -26,15 +27,6 @@ const TextMessageForm = () => {
     register,
     formState: { errors },
   } = useFormContext<IBlockAttributes>();
-  const getInputProps = (index: number) => {
-    return {
-      ...register(`message.${index}`, {
-        required: t("message.message_is_required"),
-      }),
-      error: !!errors?.message?.[index],
-      helperText: errors?.message?.[index]?.message,
-    };
-  };
 
   return (
     <ContentItem>
@@ -50,7 +42,12 @@ const TextMessageForm = () => {
             <MultipleInput
               label=""
               {...rest}
-              getInputProps={getInputProps}
+              getInputProps={getInputControls(
+                "message",
+                errors,
+                register,
+                t("message.text_message_is_invalid"),
+              )}
               value={value as string[]}
               multiline={true}
               minRows={3}

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

@@ -18,6 +18,7 @@ import { SXStyleOptions } from "@/utils/SXStyleOptions";
 import { createValueWithId, ValueWithId } from "@/utils/valueWithId";
 
 import PatternInput from "./PatternInput";
+import { getInputControls } from "../../utils/inputControls";
 
 type PatternsInputProps = {
   value: Pattern[];
@@ -42,15 +43,6 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
     register,
     formState: { errors },
   } = useFormContext<any>();
-  const getInputProps = (index: number) => {
-    return {
-      ...register(`message.${index}`, {
-        required: t("message.text_is_required"),
-      }),
-      error: !!errors?.message?.[index],
-      helperText: errors?.message?.[index]?.message,
-    };
-  };
   const addInput = () => {
     setPatterns([...patterns, createValueWithId<Pattern>("")]);
   };
@@ -87,7 +79,12 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
                 idx={idx}
                 value={value}
                 onChange={updateInput(idx)}
-                getInputProps={getInputProps}
+                getInputProps={getInputControls(
+                  "label",
+                  errors,
+                  register,
+                  t("message.text_is_required"),
+                )}
               />
             </Fragment>
           ))

frontend/src/components/visual-editor/form/utils/inputControls.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright © 2024 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.
+ * 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 {
+  Path,
+  FieldErrors,
+  FieldValues,
+  UseFormRegister,
+} from "react-hook-form";
+
+export const getInputControls =
+  <T extends FieldValues = FieldValues>(
+    field: string,
+    errors: FieldErrors<T>,
+    register: UseFormRegister<T>,
+    requiredMessage?: string,
+  ) =>
+  (index: number) => ({
+    ...register(
+      `${field}.${index}` as Path<T>,
+      requiredMessage
+        ? {
+            required: requiredMessage,
+          }
+        : {},
+    ),
+    error: !!errors?.[field]?.[index],
+    helperText: errors?.[field]?.[index]?.message,
+  });