UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-06-26 18:27:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: minor enhancements

Browse Source
This commit is contained in:
hexastack 2024-12-09 19:15:25 +01:00
parent 1e2c758a5c
commit 66e2002cf3
4 changed files with 20 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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). * 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 { FC } from "react";
import { FieldPath, useFormContext } from "react-hook-form"; import { FieldPath, useFormContext } from "react-hook-form";
@ -15,11 +15,7 @@ import { ToggleableInput } from "@/app-components/inputs/ToggleableInput";
import { useTranslate } from "@/hooks/useTranslate"; import { useTranslate } from "@/hooks/useTranslate";
import { useValidationRules } from "@/hooks/useValidationRules"; import { useValidationRules } from "@/hooks/useValidationRules";
import { IBlockAttributes } from "@/types/block.types"; import { IBlockAttributes } from "@/types/block.types";
import { import { AnyButton, ButtonType } from "@/types/message.types";
AnyButton,
ButtonType,
WebviewHeightRatio,
} from "@/types/message.types";
const buildFieldPath = ( const buildFieldPath = (
fieldPath: FieldPath<IBlockAttributes>, fieldPath: FieldPath<IBlockAttributes>,
@ -45,22 +41,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
fieldPath, fieldPath,
}) => { }) => {
const { t } = useTranslate(); 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 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 { const {
register, register,
formState: { errors }, formState: { errors },
@ -68,22 +49,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
return ( return (
<> <>
<Grid item xs={2}> <Grid item xs={5}>
<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}>
<Input <Input
fullWidth fullWidth
required required
@ -107,7 +73,7 @@ const ButtonInput: FC<ButtonInputProps> = ({
} }
/> />
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={6}>
{button.type === ButtonType.postback ? ( {button.type === ButtonType.postback ? (
<ToggleableInput <ToggleableInput
defaultValue={button.payload} defaultValue={button.payload}
@ -163,29 +129,6 @@ const ButtonInput: FC<ButtonInputProps> = ({
/> />
)} )}
</Grid> </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>
</> </>
); );
}; };

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

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

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

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

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

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