UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2024-12-02 00:54:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance patterns display

Browse Source
This commit is contained in:
Mohamed Marrouchi 2024-11-27 20:31:42 +01:00
parent 97146b98a5
commit 57432eb4f6
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import {
RemoveCircleOutline, RemoveCircleOutline,
Spellcheck, Spellcheck,
} from "@mui/icons-material"; } 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 { FC, useEffect, useMemo, useState } from "react";
import { useFormContext } from "react-hook-form"; import { useFormContext } from "react-hook-form";
@ -49,6 +49,7 @@ type PatternsInputProps = {
const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => { const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
const { t } = useTranslate(); const { t } = useTranslate();
const theme = useTheme();
const [patterns, setPatterns] = useState<ValueWithId<Pattern>[]>( const [patterns, setPatterns] = useState<ValueWithId<Pattern>[]>(
value.map((pattern) => createValueWithId(pattern)), value.map((pattern) => createValueWithId(pattern)),
); );
@ -73,7 +74,7 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
useEffect(() => { useEffect(() => {
onChange(patterns.map(({ value }) => value)); onChange(patterns.map(({ value }) => value));
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [patterns]); }, [patterns]);
const actions: DropdownButtonAction[] = useMemo( const actions: DropdownButtonAction[] = useMemo(
@ -103,7 +104,15 @@ const PatternsInput: FC<PatternsInputProps> = ({ value, onChange }) => {
<StyledNoPatternsDiv>{t("label.no_patterns")}</StyledNoPatternsDiv> <StyledNoPatternsDiv>{t("label.no_patterns")}</StyledNoPatternsDiv>
) : ( ) : (
patterns.map(({ value, id }, idx) => ( patterns.map(({ value, id }, idx) => (
<Box display="flex" mt={2} key={id}> <Box display="flex" alignItems="center" mt={2} key={id}>
{idx > 0 && (
<Chip
sx={{ m: 1, color: theme.palette.grey[600] }}
label={t("label.or")}
size="small"
variant="outlined"
/>
)}
<PatternInput <PatternInput
idx={idx} idx={idx}
value={value} value={value}