Merge pull request #429 from Hexastack/423-feature-ux-enhancement-on-repeatable-fieldsets

feat: ux enhancement on repeatable fieldsets

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",
@@ -558,6 +559,12 @@
     "manage_roles": "Manage Roles",
     "connect_with_sso": "Connect with SSO",
     "add_pattern": "New Trigger",
+    "postback": "Postback",
+    "url": "Url",
+    "add_button": "New Button",
+    "add_quick_reply": "New Quick Reply",
+    "text": "Text",
+    "location": "Location",
     "mark_as_default": "Mark as Default",
     "toggle": "Toggle button"
   },

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",
@@ -559,6 +560,12 @@
     "manage_roles": "Gérer les rôles",
     "connect_with_sso": "Se connecter avec SSO",
     "add_pattern": "Ajouter un déclencheur",
+    "postback": "Valeur de retour",
+    "url": "Url",
+    "add_button": "Ajouter un bouton",
+    "add_quick_reply": "Ajouter une réponse rapide",
+    "text": "Texte",
+    "location": "Emplacement",
     "mark_as_default": "Par Défaut",
     "toggle": "Bouton de bascule"
   },

frontend/src/app-components/buttons/DropdownButton.tsx

@@ -32,6 +32,7 @@ interface AddPatternProps {
   label?: string;
   icon?: React.ReactNode;
   sx?: SxProps<Theme> | undefined;
+  disabled?: boolean;
 }
 
 const DropdownButton: React.FC<AddPatternProps> = ({
@@ -40,10 +41,13 @@ const DropdownButton: React.FC<AddPatternProps> = ({
   label = "Add",
   icon,
   sx,
+  disabled = false,
 }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+    if (!disabled) {
+      setAnchorEl(event.currentTarget);
+    }
   };
   const handleClose = () => {
     setAnchorEl(null);
@@ -61,6 +65,7 @@ const DropdownButton: React.FC<AddPatternProps> = ({
         onClick={handleOpen}
         startIcon={icon}
         endIcon={<ArrowDropDown />}
+        disabled={disabled}
       >
         {label}
       </Button>

frontend/src/app-components/inputs/MultipleInput.tsx

@@ -6,8 +6,8 @@
  * 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 { RemoveCircleOutline } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Box,
   Button,
@@ -130,12 +130,6 @@ const MultipleInput = forwardRef<HTMLDivElement, MultipleInputProps>(
               gap={1}
               mb={1}
             >
-              <IconButton
-                onClick={() => handleRemoveInput(input.id)}
-                disabled={inputs.length <= minInput}
-              >
-                <DeleteIcon />
-              </IconButton>
               <Input
                 {...(getInputProps ? getInputProps(idx) : null)}
                 {...rest}
@@ -146,6 +140,13 @@ const MultipleInput = forwardRef<HTMLDivElement, MultipleInputProps>(
                 }}
                 fullWidth
               />
+              <IconButton
+                color="error"
+                onClick={() => handleRemoveInput(input.id)}
+                disabled={inputs.length <= minInput}
+              >
+                <RemoveCircleOutline />
+              </IconButton>
             </Box>
           ))}
           <Box

frontend/src/components/visual-editor/form/inputs/message/ButtonInput.tsx

@@ -6,7 +6,7 @@
  * 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 { Grid, MenuItem } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FC } from "react";
 import { FieldPath, useFormContext } from "react-hook-form";
 
@@ -15,11 +15,7 @@ import { ToggleableInput } from "@/app-components/inputs/ToggleableInput";
 import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { IBlockAttributes } from "@/types/block.types";
-import {
-  AnyButton,
-  ButtonType,
-  WebviewHeightRatio,
-} from "@/types/message.types";
+import { AnyButton, ButtonType } from "@/types/message.types";
 
 const buildFieldPath = (
   fieldPath: FieldPath<IBlockAttributes>,
@@ -45,22 +41,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
   fieldPath,
 }) => {
   const { t } = useTranslate();
-  const types: { value: ButtonType; label: string }[] = [
-    { value: ButtonType.postback, label: t("label.postback") },
-    { value: ButtonType.web_url, label: t("label.web_url") },
-  ];
   const rules = useValidationRules();
-  const setButtonType = (type: ButtonType) => {
-    if (type === ButtonType.postback) {
-      onChange({
-        type: ButtonType.postback,
-        title: button.title,
-        payload: button.title,
-      });
-    } else {
-      onChange({ type: ButtonType.web_url, title: button.title, url: "" });
-    }
-  };
   const {
     register,
     formState: { errors },
@@ -68,22 +49,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
 
   return (
     <>
-      <Grid item xs={2}>
-        <Input
-          select
-          value={button.type}
-          onChange={(e) => {
-            setButtonType(e.target.value as ButtonType);
-          }}
-        >
-          {types.map((item) => (
-            <MenuItem key={item.value} value={item.value}>
-              {item.label}
-            </MenuItem>
-          ))}
-        </Input>
-      </Grid>
-      <Grid item xs={3}>
+      <Grid item xs={5}>
         <Input
           fullWidth
           required
@@ -107,7 +73,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
           }
         />
       </Grid>
-      <Grid item xs={4}>
+      <Grid item xs={6}>
         {button.type === ButtonType.postback ? (
           <ToggleableInput
             defaultValue={button.payload}
@@ -163,29 +129,6 @@ const ButtonInput: FC<ButtonInputProps> = ({
           />
         )}
       </Grid>
-      <Grid item xs={2}>
-        {button.type === ButtonType.postback ? null : (
-          <Input
-            select
-            value={button.webview_height_ratio || "none"}
-            onChange={(e) => {
-              const value = e.target.value;
-
-              onChange({
-                ...button,
-                messenger_extensions: e.target.value !== "none",
-                webview_height_ratio:
-                  value !== "none" ? (value as WebviewHeightRatio) : undefined,
-              });
-            }}
-          >
-            <MenuItem value="none">{t("label.none")}</MenuItem>
-            <MenuItem value="compact">{t("label.compact")}</MenuItem>
-            <MenuItem value="tall">{t("label.tall")}</MenuItem>
-            <MenuItem value="full">{t("label.full")}</MenuItem>
-          </Input>
-        )}
-      </Grid>
     </>
   );
 };

frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx

@@ -6,12 +6,15 @@
  * 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 { KeyboardReturn, Link, RemoveCircleOutline } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { Box, Button, Grid, IconButton } from "@mui/material";
-import { FC, Fragment, useEffect, useState } from "react";
+import { Box, Grid, IconButton } from "@mui/material";
+import { FC, Fragment, useEffect, useMemo, useState } from "react";
 import { FieldPath } from "react-hook-form";
 
+import DropdownButton, {
+  DropdownButtonAction,
+} from "@/app-components/buttons/DropdownButton";
 import { useTranslate } from "@/hooks/useTranslate";
 import { IBlockAttributes } from "@/types/block.types";
 import { AnyButton, ButtonType } from "@/types/message.types";
@@ -40,11 +43,31 @@ const ButtonsInput: FC<ButtonsInput> = ({
   const [buttons, setButtons] = useState<ValueWithId<AnyButton>[]>(
     value.map((button) => createValueWithId(button)),
   );
-  const addInput = () => {
-    setButtons([
-      ...buttons,
-      createValueWithId({ type: ButtonType.postback, title: "", payload: "" }),
-    ]);
+  const actions: DropdownButtonAction[] = useMemo(
+    () => [
+      {
+        icon: <KeyboardReturn />,
+        name: t("button.postback"),
+        defaultValue: {
+          type: ButtonType.postback,
+          title: "",
+          payload: "",
+        },
+      },
+      {
+        icon: <Link />,
+        name: t("button.url"),
+        defaultValue: {
+          type: ButtonType.web_url,
+          title: "",
+          url: "",
+        },
+      },
+    ],
+    [t],
+  );
+  const addInput = (defaultValue: AnyButton) => {
+    setButtons([...buttons, createValueWithId(defaultValue)]);
   };
   const removeInput = (index: number) => {
     const updatedButtons = [...buttons];
@@ -75,31 +98,17 @@ const ButtonsInput: FC<ButtonsInput> = ({
   return (
     <Box>
       <Grid container spacing={2}>
+        <Grid item xs={5}>
+          {t("label.title")}
+        </Grid>
+        <Grid item xs={6}>
+          {t("label.payload")} / {t("label.url")}
+        </Grid>
         <Grid item xs={1}>
           &nbsp;
         </Grid>
-        <Grid item xs={2}>
-          {t("label.type")}
-        </Grid>
-        <Grid item xs={3}>
-          {t("label.title")}
-        </Grid>
-        <Grid item xs={4}>
-          {t("label.payload")} / {t("label.url")}
-        </Grid>
-        <Grid item xs={2}>
-          {t("label.webview")}
-        </Grid>
         {buttons.map(({ value, id }, idx) => (
           <Fragment key={id}>
-            <Grid item xs={1}>
-              <IconButton
-                onClick={() => removeInput(idx)}
-                disabled={buttons.length <= minInput}
-              >
-                <DeleteIcon />
-              </IconButton>
-            </Grid>
             <ButtonInput
               fieldPath={fieldPath}
               idx={idx}
@@ -107,19 +116,26 @@ const ButtonsInput: FC<ButtonsInput> = ({
               onChange={updateInput(idx)}
               disablePayload={disablePayload}
             />
+            <Grid item xs={1}>
+              <IconButton
+                color="error"
+                onClick={() => removeInput(idx)}
+                disabled={buttons.length <= minInput}
+              >
+                <RemoveCircleOutline />
+              </IconButton>
+            </Grid>
           </Fragment>
         ))}
       </Grid>
-      <Button
-        variant="contained"
-        color="primary"
-        onClick={addInput}
-        startIcon={<AddIcon />}
-        sx={{ m: 1, float: "right" }}
+      <DropdownButton
+        sx={{ m: 1, float: "right", padding: "16px" }}
+        label={t("button.add_button")}
+        actions={actions}
+        onClick={(action) => addInput(action.defaultValue)}
+        icon={<AddIcon />}
         disabled={buttons.length >= maxInput}
-      >
-        {t("button.add")}
-      </Button>
+      />
     </Box>
   );
 };

frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx

@@ -6,9 +6,9 @@
  * 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 { RemoveCircleOutline } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { Box, Button, Grid, IconButton } from "@mui/material";
+import { Box, Button, Grid, IconButton, Typography } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
 
 import { useTranslate } from "@/hooks/useTranslate";
@@ -31,8 +31,8 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
   const { t } = useTranslate();
   const [quickReplies, setQuickReplies] = useState<
     ValueWithId<StdQuickReply>[]
-  >(value.map((quickReplie) => createValueWithId(quickReplie)));
-  const addInput = () => {
+  >(value.map((quickReply) => createValueWithId(quickReply)));
+  const addInput = (): void => {
     setQuickReplies([
       ...quickReplies,
       createValueWithId({
@@ -70,48 +70,61 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={1}>
-          &nbsp;
+      {quickReplies.length > 0 ? (
+        <Grid container spacing={2}>
+          <Grid item xs={5}>
+            {t("label.title")}
+          </Grid>
+          <Grid item xs={1} />
+          <Grid item xs={5}>
+            {t("label.payload")}
+          </Grid>
+          <Grid item xs={1}>
+            &nbsp;
+          </Grid>
+          {quickReplies.map(({ value, id }, idx) => (
+            <Fragment key={id}>
+              <QuickReplyInput
+                value={value}
+                idx={idx}
+                onChange={updateInput(idx)}
+              />
+              <Grid item xs={1}>
+                <IconButton
+                  color="error"
+                  size="medium"
+                  onClick={() => removeInput(idx)}
+                  disabled={quickReplies.length <= minInput}
+                >
+                  <RemoveCircleOutline />
+                </IconButton>
+              </Grid>
+            </Fragment>
+          ))}
         </Grid>
-        <Grid item xs={2}>
-          {t("label.type")}
-        </Grid>
-        <Grid item xs={4}>
-          {t("label.title")}
-        </Grid>
-        <Grid item xs={1} />
-        <Grid item xs={4}>
-          {t("label.payload")}
-        </Grid>
-        {quickReplies.map(({ value, id }, idx) => (
-          <Fragment key={id}>
-            <Grid item xs={1}>
-              <IconButton
-                size="medium"
-                onClick={() => removeInput(idx)}
-                disabled={quickReplies.length <= minInput}
-              >
-                <DeleteIcon />
-              </IconButton>
-            </Grid>
-            <QuickReplyInput
-              value={value}
-              idx={idx}
-              onChange={updateInput(idx)}
-            />
-          </Fragment>
-        ))}
-      </Grid>
+      ) : (
+        <Typography
+          sx={{
+            color: "lightgrey",
+            textAlign: "center",
+            marginTop: 2,
+          }}
+        >
+          {t("label.no_quick_replies")}
+        </Typography>
+      )}
       <Button
+        sx={{
+          marginTop: 2,
+          float: "right",
+          verticalAlign: "middle",
+        }}
         variant="contained"
-        color="primary"
-        onClick={addInput}
         startIcon={<AddIcon />}
-        sx={{ marginTop: 2, float: "right" }}
+        onClick={addInput}
         disabled={quickReplies.length > 10}
       >
-        {t("button.add")}
+        {t("button.add_quick_reply")}
       </Button>
     </Box>
   );

frontend/src/components/visual-editor/form/inputs/message/QuickReplyInput.tsx

@@ -6,7 +6,7 @@
  * 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 { Grid, MenuItem } from "@mui/material";
+import { Grid } from "@mui/material";
 import { FC, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
@@ -28,51 +28,15 @@ const QuickReplyInput: FC<QuickReplyInputProps> = ({
   idx,
 }) => {
   const { t } = useTranslate();
-  const [quickReplyType, setQuickReplyType] = useState(value.content_type);
+  const [quickReplyType, _setQuickReplyType] = useState(value.content_type);
   const {
     register,
     formState: { errors },
   } = useFormContext<IBlockAttributes>();
-  const types = Object.values(QuickReplyType).map((value) => {
-    return {
-      value,
-      label: t(`label.${value}`),
-    };
-  });
 
   return (
     <>
-      <Grid item xs={2}>
-        <Input
-          select
-          defaultValue={quickReplyType}
-          onChange={(e) => {
-            const selected = e.target.value as QuickReplyType;
-
-            setQuickReplyType(selected);
-
-            onChange(
-              selected === QuickReplyType.location
-                ? {
-                    content_type: QuickReplyType.location,
-                  }
-                : {
-                    content_type: selected,
-                    title: "",
-                    payload: "",
-                  },
-            );
-          }}
-        >
-          {types.map((item) => (
-            <MenuItem key={item.value.toString()} value={item.value.toString()}>
-              {item.label}
-            </MenuItem>
-          ))}
-        </Input>
-      </Grid>
-
-      <Grid item xs={4}>
+      <Grid item xs={5}>
         {quickReplyType !== QuickReplyType.location ? (
           <Input
             value={value.title}
@@ -99,7 +63,7 @@ const QuickReplyInput: FC<QuickReplyInputProps> = ({
           />
         ) : null}
       </Grid>
-      <Grid item xs={5}>
+      <Grid item xs={6}>
         {quickReplyType !== QuickReplyType.location ? (
           <ToggleableInput
             defaultValue={value.payload}