fix: minor enhancements

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

@@ -98,18 +98,12 @@ const ButtonsInput: FC<ButtonsInput> = ({
   return (
     <Box>
       <Grid container spacing={2}>
-        <Grid item xs={2}>
-          {t("label.type")}
-        </Grid>
-        <Grid item xs={3}>
+        <Grid item xs={5}>
           {t("label.title")}
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           {t("label.payload")} / {t("label.url")}
         </Grid>
-        <Grid item xs={2}>
-          {t("label.webview")}
-        </Grid>
         <Grid item xs={1}>
           &nbsp;
         </Grid>
@@ -135,7 +129,7 @@ const ButtonsInput: FC<ButtonsInput> = ({
         ))}
       </Grid>
       <DropdownButton
-        sx={{ m: 1, float: "right" }}
+        sx={{ m: 1, float: "right", padding: "16px" }}
         label={t("button.add_button")}
         actions={actions}
         onClick={(action) => addInput(action.defaultValue)}

frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.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 { Abc, LocationOn, RemoveCircleOutline } from "@mui/icons-material";
+import { Abc, 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";
@@ -46,13 +46,6 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
           payload: "",
         },
       },
-      {
-        icon: <LocationOn />,
-        name: t("button.location"),
-        defaultValue: {
-          content_type: QuickReplyType.location,
-        },
-      },
     ],
     [t],
   );
@@ -88,14 +81,11 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
   return (
     <Box>
       <Grid container spacing={2}>
-        <Grid item xs={2}>
-          {t("label.type")}
-        </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={5}>
           {t("label.title")}
         </Grid>
         <Grid item xs={1} />
-        <Grid item xs={4}>
+        <Grid item xs={5}>
           {t("label.payload")}
         </Grid>
         <Grid item xs={1}>
@@ -122,7 +112,12 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
         ))}
       </Grid>
       <DropdownButton
-        sx={{ marginTop: 2, float: "right" }}
+        sx={{
+          marginTop: 2,
+          float: "right",
+          verticalAlign: "middle",
+          padding: "20px",
+        }}
         label={t("button.add_quick_reply")}
         actions={actions}
         onClick={(action) => addInput(action.defaultValue)}

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}