feat(ui): add contextVar regex validation

frontend/src/components/context-vars/ContextVarForm.tsx

@@ -12,6 +12,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { ContentContainer, ContentItem } from "@/app-components/dialogs";
 import { Input } from "@/app-components/inputs/Input";
+import { RegexInput } from "@/app-components/inputs/RegexInput";
 import { useCreate } from "@/hooks/crud/useCreate";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { useToast } from "@/hooks/useToast";
@@ -21,6 +22,8 @@ import { ComponentFormProps } from "@/types/common/dialogs.types";
 import { IContextVar, IContextVarAttributes } from "@/types/context-var.types";
 import { slugify } from "@/utils/string";
 
+import { isRegex } from "../visual-editor/form/inputs/triggers/PatternInput";
+
 export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
   data,
   Wrapper = Fragment,
@@ -59,6 +62,7 @@ export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
       name: data?.name || "",
       label: data?.label || "",
       permanent: data?.permanent || false,
+      pattern: data?.pattern || "",
     },
   });
   const validationRules = {
@@ -86,6 +90,7 @@ export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
         name: data.name,
         label: data.label,
         permanent: data.permanent,
+        pattern: data.pattern,
       });
     } else {
       reset();
@@ -135,6 +140,48 @@ export const ContextVarForm: FC<ComponentFormProps<IContextVar>> = ({
             />
             <FormHelperText>{t("help.permanent")}</FormHelperText>
           </ContentItem>
+          <ContentItem>
+            <Controller
+              name="pattern"
+              control={control}
+              render={({ field: { value, ...rest } }) => (
+                <RegexInput
+                  {...rest}
+                  {...register("pattern", {
+                    validate: (pattern) => {
+                      try {
+                        if (pattern) {
+                          const parsedPattern = new RegExp(
+                            pattern.slice(1, -1),
+                          );
+
+                          if (pattern.slice(1, -1) === "") {
+                            return true;
+                          }
+
+                          if (String(parsedPattern) !== pattern) {
+                            throw t("message.regex_is_invalid");
+                          }
+
+                          return true;
+                        }
+
+                        return false;
+                      } catch (_e) {
+                        return t("message.regex_is_invalid");
+                      }
+                    },
+                    setValueAs: (v) => (isRegex(v) ? v : `/${v}/`),
+                  })}
+                  error={!!errors.pattern}
+                  value={value?.slice(1, -1) || ""}
+                  label={t("label.regex")}
+                  onChange={rest.onChange}
+                  helperText={errors.pattern ? errors.pattern.message : null}
+                />
+              )}
+            />
+          </ContentItem>
         </ContentContainer>
       </form>
     </Wrapper>

frontend/src/components/context-vars/index.tsx

@@ -9,7 +9,7 @@
 import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
-import { Button, Grid, Paper, Switch } from "@mui/material";
+import { Button, Chip, Grid, Paper, Switch } from "@mui/material";
 import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
 import { useState } from "react";
 
@@ -110,6 +110,15 @@ export const ContextVars = () => {
       renderHeader,
       headerAlign: "left",
     },
+    {
+      flex: 1,
+      field: "pattern",
+      headerName: t("label.regex"),
+      disableColumnMenu: true,
+      renderHeader,
+      headerAlign: "left",
+      renderCell: ({ row }) => <Chip label={row?.pattern} variant="role" />,
+    },
     {
       maxWidth: 120,
       field: "permanent",

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

@@ -26,7 +26,7 @@ import {
 import { OutcomeInput } from "./OutcomeInput";
 import { PostbackInput } from "./PostbackInput";
 
-const isRegex = (str: Pattern) => {
+export const isRegex = (str: Pattern) => {
   return typeof str === "string" && str.startsWith("/") && str.endsWith("/");
 };
 const getType = (pattern: Pattern): PatternType => {

frontend/src/types/context-var.types.ts

@@ -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,6 +14,7 @@ export interface IContextVarAttributes {
   name: string;
   label: string;
   permanent: boolean;
+  pattern?: string;
 }
 
 export interface IContextVarStub