diff --git a/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx b/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx index 476a75c..90a8709 100644 --- a/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx +++ b/frontend/src/components/visual-editor/form/inputs/triggers/PatternsInput.tsx @@ -14,7 +14,7 @@ import { RemoveCircleOutline, Spellcheck, } from "@mui/icons-material"; -import { Box, IconButton, styled } from "@mui/material"; +import { Box, Chip, IconButton, styled, useTheme } from "@mui/material"; import { FC, useEffect, useMemo, useState } from "react"; import { useFormContext } from "react-hook-form"; @@ -49,6 +49,7 @@ type PatternsInputProps = { const PatternsInput: FC = ({ value, onChange }) => { const { t } = useTranslate(); + const theme = useTheme(); const [patterns, setPatterns] = useState[]>( value.map((pattern) => createValueWithId(pattern)), ); @@ -73,7 +74,7 @@ const PatternsInput: FC = ({ value, onChange }) => { useEffect(() => { onChange(patterns.map(({ value }) => value)); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [patterns]); const actions: DropdownButtonAction[] = useMemo( @@ -103,7 +104,15 @@ const PatternsInput: FC = ({ value, onChange }) => { {t("label.no_patterns")} ) : ( patterns.map(({ value, id }, idx) => ( - + + {idx > 0 && ( + + )}