diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json index 641b35ba..780bb87c 100644 --- a/frontend/public/locales/en/translation.json +++ b/frontend/public/locales/en/translation.json @@ -233,6 +233,7 @@ "block_event_type": "Type of event", "patterns": "Patterns", "no_patterns": "- No triggers -", + "no_quick_replies": "- No quick replies -", "text_patterns": " Text Patterns", "triggers": "Triggers", "payloads": "Payloads", diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json index 970ee76f..efc23e5e 100644 --- a/frontend/public/locales/fr/translation.json +++ b/frontend/public/locales/fr/translation.json @@ -234,6 +234,7 @@ "patterns": "Motifs", "text_patterns": "Motifs textuels", "no_patterns": "- Aucun motif -", + "no_quick_replies": "- Aucune réponse rapide -", "triggers": "Déclencheurs", "payloads": "Payloads", "general_payloads": "Payloads généraux", diff --git a/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx b/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx index 79122a35..4d0e94da 100644 --- a/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx +++ b/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx @@ -6,14 +6,11 @@ * 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 { Abc, RemoveCircleOutline } from "@mui/icons-material"; +import { RemoveCircleOutline } from "@mui/icons-material"; import AddIcon from "@mui/icons-material/Add"; -import { Box, Grid, IconButton } from "@mui/material"; -import { FC, Fragment, useEffect, useMemo, useState } from "react"; +import { Box, Button, Grid, IconButton, Typography } from "@mui/material"; +import { FC, Fragment, useEffect, useState } from "react"; -import DropdownButton, { - DropdownButtonAction, -} from "@/app-components/buttons/DropdownButton"; import { useTranslate } from "@/hooks/useTranslate"; import { QuickReplyType, StdQuickReply } from "@/types/message.types"; import { ValueWithId, createValueWithId } from "@/utils/valueWithId"; @@ -35,22 +32,15 @@ const QuickRepliesInput: FC = ({ const [quickReplies, setQuickReplies] = useState< ValueWithId[] >(value.map((quickReply) => createValueWithId(quickReply))); - const actions: DropdownButtonAction[] = useMemo( - () => [ - { - icon: , - name: t("button.text"), - defaultValue: { - content_type: QuickReplyType.text, - title: "", - payload: "", - }, - }, - ], - [t], - ); - const addInput = (defaultValue: StdQuickReply) => { - setQuickReplies([...quickReplies, createValueWithId(defaultValue)]); + const addInput = (): void => { + setQuickReplies([ + ...quickReplies, + createValueWithId({ + content_type: QuickReplyType.text, + title: "", + payload: "", + }), + ]); }; const removeInput = (index: number) => { const updatedQuickReplies = [...quickReplies]; @@ -80,50 +70,62 @@ const QuickRepliesInput: FC = ({ return ( - - - {t("label.title")} + {quickReplies.length > 0 ? ( + + + {t("label.title")} + + + + {t("label.payload")} + + +   + + {quickReplies.map(({ value, id }, idx) => ( + + + + removeInput(idx)} + disabled={quickReplies.length <= minInput} + > + + + + + ))} - - - {t("label.payload")} - - -   - - {quickReplies.map(({ value, id }, idx) => ( - - - - removeInput(idx)} - disabled={quickReplies.length <= minInput} - > - - - - - ))} - - + {t("label.no_quick_replies")} + + )} + ); };