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

feat: adjust quick replies input

Browse Source
This commit is contained in:
hexastack 2024-12-11 17:06:10 +01:00
parent 66e2002cf3
commit e18fcb1a5c
3 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/public/locales/en/translation.json
View File

@ -233,6 +233,7 @@
"block_event_type": "Type of event", "block_event_type": "Type of event",
"patterns": "Patterns", "patterns": "Patterns",
"no_patterns": "- No triggers -", "no_patterns": "- No triggers -",
"no_quick_replies": "- No quick replies -",
"text_patterns": " Text Patterns", "text_patterns": " Text Patterns",
"triggers": "Triggers", "triggers": "Triggers",
"payloads": "Payloads", "payloads": "Payloads",

1
frontend/public/locales/fr/translation.json
View File

@ -234,6 +234,7 @@
"patterns": "Motifs", "patterns": "Motifs",
"text_patterns": "Motifs textuels", "text_patterns": "Motifs textuels",
"no_patterns": "- Aucun motif -", "no_patterns": "- Aucun motif -",
"no_quick_replies": "- Aucune réponse rapide -",
"triggers": "Déclencheurs", "triggers": "Déclencheurs",
"payloads": "Payloads", "payloads": "Payloads",
"general_payloads": "Payloads généraux", "general_payloads": "Payloads généraux",

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

@ -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). * 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 AddIcon from "@mui/icons-material/Add";
import { Box, Grid, IconButton } from "@mui/material"; import { Box, Button, Grid, IconButton, Typography } from "@mui/material";
import { FC, Fragment, useEffect, useMemo, useState } from "react"; import { FC, Fragment, useEffect, useState } from "react";
import DropdownButton, {
DropdownButtonAction,
} from "@/app-components/buttons/DropdownButton";
import { useTranslate } from "@/hooks/useTranslate"; import { useTranslate } from "@/hooks/useTranslate";
import { QuickReplyType, StdQuickReply } from "@/types/message.types"; import { QuickReplyType, StdQuickReply } from "@/types/message.types";
import { ValueWithId, createValueWithId } from "@/utils/valueWithId"; import { ValueWithId, createValueWithId } from "@/utils/valueWithId";
@ -35,22 +32,15 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
const [quickReplies, setQuickReplies] = useState< const [quickReplies, setQuickReplies] = useState<
ValueWithId<StdQuickReply>[] ValueWithId<StdQuickReply>[]
>(value.map((quickReply) => createValueWithId(quickReply))); >(value.map((quickReply) => createValueWithId(quickReply)));
const actions: DropdownButtonAction[] = useMemo( const addInput = (): void => {
() => [ setQuickReplies([
{ ...quickReplies,
icon: <Abc />, createValueWithId({
name: t("button.text"), content_type: QuickReplyType.text,
defaultValue: { title: "",
content_type: QuickReplyType.text, payload: "",
title: "", }),
payload: "", ]);
},
},
],
[t],
);
const addInput = (defaultValue: StdQuickReply) => {
setQuickReplies([...quickReplies, createValueWithId(defaultValue)]);
}; };
const removeInput = (index: number) => { const removeInput = (index: number) => {
const updatedQuickReplies = [...quickReplies]; const updatedQuickReplies = [...quickReplies];
@ -80,50 +70,62 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
return ( return (
<Box> <Box>
<Grid container spacing={2}> {quickReplies.length > 0 ? (
<Grid item xs={5}> <Grid container spacing={2}>
{t("label.title")} <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>
<Grid item xs={1} /> ) : (
<Grid item xs={5}> <Typography
{t("label.payload")} sx={{
</Grid> color: "lightgrey",
<Grid item xs={1}> textAlign: "center",
&nbsp; marginTop: 2,
</Grid> }}
{quickReplies.map(({ value, id }, idx) => ( >
<Fragment key={id}> {t("label.no_quick_replies")}
<QuickReplyInput </Typography>
value={value} )}
idx={idx} <Button
onChange={updateInput(idx)}
/>
<Grid item xs={1}>
<IconButton
color="error"
size="medium"
onClick={() => removeInput(idx)}
disabled={quickReplies.length <= minInput}
>
<RemoveCircleOutline />
</IconButton>
</Grid>
</Fragment>
))}
</Grid>
<DropdownButton
sx={{ sx={{
marginTop: 2, marginTop: 2,
float: "right", float: "right",
verticalAlign: "middle", verticalAlign: "middle",
padding: "20px",
}} }}
label={t("button.add_quick_reply")} variant="contained"
actions={actions} startIcon={<AddIcon />}
onClick={(action) => addInput(action.defaultValue)} onClick={addInput}
icon={<AddIcon />}
disabled={quickReplies.length > 10} disabled={quickReplies.length > 10}
/> >
{t("button.add_quick_reply")}
</Button>
</Box> </Box>
); );
}; };