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(frontend): resolve file conflicts

Browse Source
This commit is contained in:
yassinedorbozgithub
2025-02-07 11:38:10 +01:00
parent b869e82301 3c19dde936
commit 937e0e9302
18 changed files with 406 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
api/src/cms/schemas/content.schema.ts
View File

@@ -1,5 +1,5 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -43,7 +43,7 @@ export class ContentStub extends BaseSchema {
@Prop({ type: Boolean, default: true })
status: boolean;
@Prop({ type: mongoose.Schema.Types.Mixed })
@Prop({ type: mongoose.Schema.Types.Mixed, default: {} })
dynamicFields: Record<string, any>;
@Prop({ type: String })

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

@@ -112,7 +112,8 @@
"text_is_required": "Text is required",
"invalid_file_type": "Invalid file type. Please select a file in the supported format.",
"select_category": "Select a flow",
"logout_failed": "Something went wrong during logout"
"logout_failed": "Something went wrong during logout",
"duplicate_labels_not_allowed": "Duplicate labels are not allowed"
},
"menu": {
"terms": "Terms of Use",
@@ -191,7 +192,6 @@
"entities": "Content Types",
"new_content_type": "New Content Type",
"edit_content_type": "Edit Content Type",
"manage_fields": "Manage Fields",
"nodes": "Content",
"new_node": "New Content",
"edit_node": "Edit Content",

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

@@ -112,7 +112,8 @@
"text_is_required": "Texte requis",
"invalid_file_type": "Type de fichier invalide. Veuillez choisir un fichier dans un format pris en charge.",
"select_category": "Sélectionner une catégorie",
"logout_failed": "Une erreur s'est produite lors de la déconnexion"
"logout_failed": "Une erreur s'est produite lors de la déconnexion",
"duplicate_labels_not_allowed": "Les étiquettes en double ne sont pas autorisées"
},
"menu": {
"terms": "Conditions d'utilisation",
@@ -191,7 +192,6 @@
"entities": "Types de contenu",
"new_content_type": "Nouveau type de contenu",
"edit_content_type": "Modifier le type de contenu",
"manage_fields": "Gérer les champs",
"nodes": "Contenu",
"new_node": "Nouveau contenu",
"edit_node": "Modifier le contenu",

143
frontend/src/components/content-types/ContentTypeDialog.tsx
View File

@@ -1,14 +1,15 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { Dialog, DialogActions, DialogContent } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
import { FC, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useFieldArray, useForm } from "react-hook-form";
import DialogButtons from "@/app-components/buttons/DialogButtons";
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -21,10 +22,10 @@ import { DialogControlProps } from "@/hooks/useDialog";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { EntityType } from "@/services/types";
import {
IContentType,
IContentTypeAttributes,
} from "@/types/content-type.types";
import { ContentFieldType, IContentType } from "@/types/content-type.types";
import { FieldInput } from "./components/FieldInput";
import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
export type ContentTypeDialogProps = DialogControlProps<IContentType>;
export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
@@ -37,50 +38,67 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
const {
handleSubmit,
register,
control,
reset,
setValue,
formState: { errors },
} = useForm<IContentTypeAttributes>({
defaultValues: { name: data?.name || "" },
} = useForm<Partial<IContentType>>({
defaultValues: {
name: data?.name || "",
fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
},
});
const CloseAndReset = () => {
const { append, fields, remove } = useFieldArray({
name: "fields",
control,
});
const closeAndReset = () => {
closeDialog();
reset();
reset({
name: "",
fields: FIELDS_FORM_DEFAULT_VALUES,
});
};
const { mutateAsync: createContentType } = useCreate(
EntityType.CONTENT_TYPE,
{
onError: (error) => {
toast.error(error);
},
onSuccess: () => {
closeDialog();
toast.success(t("message.success_save"));
},
const { mutate: createContentType } = useCreate(EntityType.CONTENT_TYPE, {
onError: (error) => {
toast.error(error.message || t("message.internal_server_error"));
},
);
const { mutateAsync: updateContentType } = useUpdate(
EntityType.CONTENT_TYPE,
{
onError: () => {
toast.error(t("message.internal_server_error"));
},
onSuccess: () => {
closeDialog();
toast.success(t("message.success_save"));
},
onSuccess: () => {
closeDialog();
toast.success(t("message.success_save"));
},
);
const validationRules = {
name: {
required: t("message.name_is_required"),
});
const { mutate: updateContentType } = useUpdate(EntityType.CONTENT_TYPE, {
onError: (error) => {
toast.error(error.message || t("message.internal_server_error"));
},
};
const onSubmitForm = async (params: IContentTypeAttributes) => {
onSuccess: () => {
closeDialog();
toast.success(t("message.success_save"));
},
});
const onSubmitForm = async (params) => {
const labelCounts: Record<string, number> = params.fields.reduce(
(acc, field) => {
if (!field.label.trim()) return acc;
acc[field.label] = (acc[field.label] || 0) + 1;
return acc;
},
{} as Record<string, number>,
);
const hasDuplicates = Object.values(labelCounts).some(
(count: number) => count > 1,
);
if (hasDuplicates) {
toast.error(t("message.duplicate_labels_not_allowed"));
return;
}
if (data) {
updateContentType({
id: data.id,
params,
});
updateContentType({ id: data.id, params });
} else {
createContentType(params);
}
@@ -94,16 +112,17 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
if (data) {
reset({
name: data.name,
fields: data.fields || FIELDS_FORM_DEFAULT_VALUES,
});
} else {
reset();
reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES });
}
}, [data, reset]);
return (
<Dialog open={open} fullWidth onClose={CloseAndReset}>
<Dialog open={open} fullWidth onClose={closeAndReset}>
<form onSubmit={handleSubmit(onSubmitForm)}>
<DialogTitle onClose={CloseAndReset}>
<DialogTitle onClose={closeAndReset}>
{data ? t("title.edit_content_type") : t("title.new_content_type")}
</DialogTitle>
<DialogContent>
@@ -112,16 +131,46 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
<Input
label={t("label.name")}
error={!!errors.name}
{...register("name", validationRules.name)}
{...register("name", {
required: t("message.name_is_required"),
})}
helperText={errors.name ? errors.name.message : null}
required
autoFocus
/>
</ContentItem>
{fields.map((f, index) => (
<ContentItem
key={f.id}
display="flex"
justifyContent="space-between"
gap={2}
>
<FieldInput
setValue={setValue}
control={control}
remove={remove}
index={index}
disabled={READ_ONLY_FIELDS.includes(f.label as any)}
/>
</ContentItem>
))}
<ContentItem>
<Button
startIcon={<AddIcon />}
variant="contained"
onClick={() =>
append({ label: "", name: "", type: ContentFieldType.TEXT })
}
>
{t("button.add")}
</Button>
</ContentItem>
</ContentContainer>
</DialogContent>
<DialogActions>
<DialogButtons closeDialog={closeDialog} />
<DialogButtons closeDialog={closeAndReset} />
</DialogActions>
</form>
</Dialog>

219
frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx
View File

@@ -1,219 +0,0 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 AddIcon from "@mui/icons-material/Add";
import {
Button,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
Stack,
} from "@mui/material";
import { useEffect } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import DialogButtons from "@/app-components/buttons/DialogButtons";
import {
DialogTitle,
ContentContainer,
ContentItem,
} from "@/app-components/dialogs";
import { Input } from "@/app-components/inputs/Input";
import { useGet } from "@/hooks/crud/useGet";
import { useUpdate } from "@/hooks/crud/useUpdate";
import { DialogControlProps } from "@/hooks/useDialog";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { EntityType } from "@/services/types";
import { ContentFieldType, IContentType } from "@/types/content-type.types";
import { FieldInput } from "./components/FieldInput";
import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
export type EditContentTypeDialogFieldsProps = DialogControlProps<IContentType>;
export const EditContentTypeFieldsDialog = ({
data: contentType,
closeDialog,
open,
}: EditContentTypeDialogFieldsProps) => {
const { t } = useTranslate();
const { isLoading, data, refetch } = useGet(contentType?.id || "", {
entity: EntityType.CONTENT_TYPE,
});
const { toast } = useToast();
const {
handleSubmit,
control,
reset,
setValue,
register,
formState: { errors },
} = useForm<Partial<IContentType>>({
mode: "onChange",
values: {
fields: data?.fields,
name: data?.name,
},
defaultValues: {
fields: FIELDS_FORM_DEFAULT_VALUES,
name: data?.name,
},
});
const { append, fields, replace, remove } = useFieldArray<
Pick<IContentType, "fields">,
"fields"
>({
name: "fields",
control,
keyName: "id",
rules: {
required: true,
},
});
const validationRules = {
name: {
required: t("message.name_is_required"),
},
};
useEffect(() => {
register("fields");
}, [register]);
useEffect(() => {
if (data?.fields) {
replace(data.fields);
}
}, [data, replace]);
useEffect(() => {
if (!open) {
reset();
}
if (open) {
refetch();
}
}, [open, reset]);
useEffect(() => {
if (data) {
reset({
name: data.name,
fields: data.fields,
});
} else {
reset();
}
}, [data, reset]);
function handleClose() {
closeDialog();
}
const { mutateAsync: updateContentType } = useUpdate(
EntityType.CONTENT_TYPE,
{
onError: (error) => {
toast.error(`${t("message.internal_server_error")}: ${error}`);
},
onSuccess: () => {
toast.success(t("message.success_save"));
},
},
);
return (
<Dialog
open={open}
fullWidth
maxWidth="xl"
sx={{ width: "fit-content", mx: "auto", minWidth: "600px" }}
onClose={handleClose}
>
<DialogTitle onClose={handleClose}>
{t("title.manage_fields")}
</DialogTitle>
<form
onSubmit={handleSubmit(async ({ name, fields }) => {
if (!!contentType)
await updateContentType({
id: contentType.id,
params: {
name,
fields,
},
});
handleClose();
})}
>
<DialogContent>
<ContentContainer>
<ContentItem>
<Input
label={t("label.name")}
error={!!errors.name}
{...register("name", validationRules.name)}
helperText={errors.name ? errors.name.message : null}
required
autoFocus
/>
</ContentItem>
{!isLoading
? fields.map((f, index) => (
<ContentItem
key={f.id}
justifyContent="space-between"
alignItems="center"
gap={2}
display="flex"
>
<FieldInput
setValue={setValue}
control={control}
remove={remove}
index={index}
disabled={READ_ONLY_FIELDS.includes(f.label as any)}
/>
</ContentItem>
))
: null}
{isLoading ? (
<ContentItem>
<Stack sx={{ alignItems: "center", placeContent: "center" }}>
<CircularProgress sx={{ color: "primary.main" }} />
</Stack>
</ContentItem>
) : null}
<ContentItem>
<Button
startIcon={<AddIcon />}
variant="contained"
onClick={() =>
append({
label: "",
name: "",
type: ContentFieldType.TEXT,
})
}
disabled={isLoading}
sx={{ mx: "auto" }}
>
{t("button.add")}
</Button>
</ContentItem>
</ContentContainer>
</DialogContent>
<DialogActions>
<DialogButtons closeDialog={closeDialog} />
</DialogActions>
</form>
</Dialog>
);
};

8
frontend/src/components/content-types/components/FieldInput.tsx
View File

@@ -1,11 +1,12 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import { MenuItem } from "@mui/material";
import { useEffect } from "react";
@@ -59,11 +60,14 @@ export const FieldInput = ({
<Controller
control={props.control}
name={`fields.${index}.label`}
render={({ field }) => (
rules={{ required: t("message.label_is_required") }}
render={({ field, fieldState }) => (
<Input
disabled={props.disabled}
{...field}
label={t("label.label")}
error={!!fieldState.error}
helperText={fieldState.error?.message}
/>
)}
/>

6
frontend/src/components/content-types/index.tsx
View File

@@ -1,11 +1,12 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { faAlignLeft } from "@fortawesome/free-solid-svg-icons";
import AddIcon from "@mui/icons-material/Add";
import { Button, Grid, Paper } from "@mui/material";
@@ -33,7 +34,6 @@ import { PermissionAction } from "@/types/permission.types";
import { getDateTimeFormatter } from "@/utils/date";
import { ContentTypeDialog } from "./ContentTypeDialog";
import { EditContentTypeFieldsDialog } from "./EditContentTypeFieldsDialog";
export const ContentTypes = () => {
const { t } = useTranslate();
@@ -125,7 +125,7 @@ export const ContentTypes = () => {
deleteContentType(deleteDialogCtl.data);
}}
/>
<EditContentTypeFieldsDialog {...fieldsDialogCtl} />
<ContentTypeDialog {...getDisplayDialogs(fieldsDialogCtl)} />
<Grid padding={2} container>
<Grid item width="100%">
<DataGrid

1
frontend/src/components/contents/ContentDialog.tsx
View File

@@ -6,7 +6,6 @@
* 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 LinkIcon from "@mui/icons-material/Link";
import {
Dialog,

145
frontend/src/components/nlp/NlpValueDialog.tsx
View File

@@ -1,145 +0,0 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { Dialog, DialogActions, DialogContent } from "@mui/material";
import { useRouter } from "next/router";
import { FC, useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import DialogButtons from "@/app-components/buttons/DialogButtons";
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
import { Input } from "@/app-components/inputs/Input";
import MultipleInput from "@/app-components/inputs/MultipleInput";
import { useCreate } from "@/hooks/crud/useCreate";
import { useGet } from "@/hooks/crud/useGet";
import { useUpdate } from "@/hooks/crud/useUpdate";
import { DialogControlProps } from "@/hooks/useDialog";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { EntityType, Format } from "@/services/types";
import { INlpValue, INlpValueAttributes } from "@/types/nlp-value.types";
export type TNlpValueAttributesWithRequiredExpressions = INlpValueAttributes & {
expressions: string[];
};
export type NlpValueDialogProps = DialogControlProps<INlpValue, INlpValue> & {
canHaveSynonyms: boolean;
};
export const NlpValueDialog: FC<NlpValueDialogProps> = ({
open,
closeDialog,
data,
canHaveSynonyms,
callback,
}) => {
const { t } = useTranslate();
const { toast } = useToast();
const { query } = useRouter();
const { refetch: refetchEntity } = useGet(data?.entity || String(query.id), {
entity: EntityType.NLP_ENTITY,
format: Format.FULL,
});
const { mutateAsync: createNlpValue } = useCreate(EntityType.NLP_VALUE, {
onError: () => {
toast.error(t("message.internal_server_error"));
},
onSuccess(data) {
refetchEntity();
closeDialog();
toast.success(t("message.success_save"));
callback?.(data);
},
});
const { mutateAsync: updateNlpValue } = useUpdate(EntityType.NLP_VALUE, {
onError: () => {
toast.error(t("message.internal_server_error"));
},
onSuccess(data) {
closeDialog();
toast.success(t("message.success_save"));
callback?.(data);
},
});
const { reset, register, handleSubmit, control } =
useForm<TNlpValueAttributesWithRequiredExpressions>({
defaultValues: {
value: data?.value || "",
expressions: data?.expressions || [],
},
});
const validationRules = {
value: {
required: t("message.value_is_required"),
},
name: {},
description: {},
};
const onSubmitForm = async (params: INlpValueAttributes) => {
if (data) {
updateNlpValue({ id: data.id, params });
} else {
createNlpValue({ ...params, entity: String(query.id) });
}
};
useEffect(() => {
if (open) reset();
}, [open, reset]);
useEffect(() => {
if (data) {
reset({
value: data.value,
expressions: data.expressions,
});
} else {
reset();
}
}, [data, reset]);
return (
<Dialog open={open} fullWidth onClose={closeDialog}>
<form onSubmit={handleSubmit(onSubmitForm)}>
<DialogTitle onClose={closeDialog}>
{data ? t("title.edit_nlp_value") : t("title.new_nlp_entity_value")}
</DialogTitle>
<DialogContent>
<ContentContainer>
<ContentItem>
<Input
label={t("placeholder.nlp_value")}
required
autoFocus
{...register("value", validationRules.value)}
/>
</ContentItem>
{canHaveSynonyms ? (
<ContentItem>
<Controller
name="expressions"
control={control}
render={({ field }) => (
<MultipleInput label="synonyms" {...field} />
)}
/>
</ContentItem>
) : null}
</ContentContainer>
</DialogContent>
<DialogActions>
<DialogButtons closeDialog={closeDialog} />
</DialogActions>
</form>
</Dialog>
);
};

93
frontend/src/components/nlp/components/NlpSample.tsx
View File

@@ -1,11 +1,12 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 CircleIcon from "@mui/icons-material/Circle";
import ClearIcon from "@mui/icons-material/Clear";
import DeleteIcon from "@mui/icons-material/Delete";
@@ -26,7 +27,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
import { useState } from "react";
import { useQueryClient } from "react-query";
import { DeleteDialog } from "@/app-components/dialogs";
import { ConfirmDialogBody } from "@/app-components/dialogs";
import { ChipEntity } from "@/app-components/displays/ChipEntity";
import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
import FileUploadButton from "@/app-components/inputs/FileInput";
@@ -45,7 +46,7 @@ import { useFind } from "@/hooks/crud/useFind";
import { useGetFromCache } from "@/hooks/crud/useGet";
import { useImport } from "@/hooks/crud/useImport";
import { useConfig } from "@/hooks/useConfig";
import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
import { useDialogs } from "@/hooks/useDialogs";
import { useHasPermission } from "@/hooks/useHasPermission";
import { useSearch } from "@/hooks/useSearch";
import { useToast } from "@/hooks/useToast";
@@ -62,7 +63,7 @@ import { PermissionAction } from "@/types/permission.types";
import { getDateTimeFormatter } from "@/utils/date";
import { buildURL } from "@/utils/URL";
import { NlpSampleDialog } from "../NlpSampleDialog";
import { NlpSampleFormDialog } from "./NlpSampleFormDialog";
const NLP_SAMPLE_TYPE_COLORS = {
all: "#fff",
@@ -75,6 +76,7 @@ export default function NlpSample() {
const { apiUrl } = useConfig();
const { toast } = useToast();
const { t } = useTranslate();
const dialogs = useDialogs();
const queryClient = useQueryClient();
const [type, setType] = useState<NlpSampleType | "all">("all");
const [language, setLanguage] = useState<string | undefined>(undefined);
@@ -92,28 +94,23 @@ export default function NlpSample() {
],
$iLike: ["text"],
});
const { mutateAsync: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, {
const { mutate: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, {
onError: () => {
toast.error(t("message.internal_server_error"));
},
onSuccess() {
deleteDialogCtl.closeDialog();
toast.success(t("message.item_delete_success"));
},
});
const { mutateAsync: deleteNlpSamples } = useDeleteMany(
EntityType.NLP_SAMPLE,
{
onError: (error) => {
toast.error(error);
},
onSuccess: () => {
deleteDialogCtl.closeDialog();
setSelectedNlpSamples([]);
toast.success(t("message.item_delete_success"));
},
const { mutate: deleteNlpSamples } = useDeleteMany(EntityType.NLP_SAMPLE, {
onError: (error) => {
toast.error(error);
},
);
onSuccess: () => {
setSelectedNlpSamples([]);
toast.success(t("message.item_delete_success"));
},
});
const { mutateAsync: importDataset, isLoading } = useImport(
EntityType.NLP_SAMPLE,
{
@@ -147,8 +144,6 @@ export default function NlpSample() {
params: searchPayload,
},
);
const deleteDialogCtl = useDialog<string>(false);
const editDialogCtl = useDialog<INlpDatasetSample>(false);
const actionColumns = getActionsColumn<INlpSample>(
[
{
@@ -173,13 +168,22 @@ export default function NlpSample() {
: null,
};
editDialogCtl.openDialog(data);
dialogs.open(NlpSampleFormDialog, data, {
maxWidth: "md",
hasButtons: false,
});
},
requires: [PermissionAction.UPDATE],
},
{
label: ActionColumnLabel.Delete,
action: (row) => deleteDialogCtl.openDialog(row.id),
action: async ({ id }) => {
const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
if (isConfirmed) {
deleteNlpSample(id);
}
},
requires: [PermissionAction.DELETE],
},
],
@@ -300,19 +304,6 @@ export default function NlpSample() {
return (
<Grid item xs={12}>
<NlpSampleDialog {...getDisplayDialogs(editDialogCtl)} />
<DeleteDialog
{...deleteDialogCtl}
callback={() => {
if (selectedNlpSamples.length > 0) {
deleteNlpSamples(selectedNlpSamples);
setSelectedNlpSamples([]);
deleteDialogCtl.closeDialog();
} else if (deleteDialogCtl.data) {
deleteNlpSample(deleteDialogCtl.data);
}
}}
/>
<Grid container alignItems="center">
<Grid
container
@@ -406,18 +397,26 @@ export default function NlpSample() {
{t("button.export")}
</Button>
) : null}
{selectedNlpSamples.length > 0 && (
<Grid item>
<Button
startIcon={<DeleteIcon />}
variant="contained"
color="error"
onClick={() => deleteDialogCtl.openDialog(undefined)}
>
{t("button.delete")}
</Button>
</Grid>
)}
<Grid item>
<Button
startIcon={<DeleteIcon />}
variant="contained"
color="error"
onClick={async () => {
const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
mode: "selection",
count: selectedNlpSamples.length,
});
if (isConfirmed) {
deleteNlpSamples(selectedNlpSamples);
}
}}
disabled={!selectedNlpSamples.length}
>
{t("button.delete")}
</Button>
</Grid>
</ButtonGroup>
</Grid>
</Grid>

43
frontend/src/components/nlp/NlpSampleDialog.tsx → frontend/src/components/nlp/components/NlpSampleForm.tsx
View File

@@ -1,38 +1,35 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { Dialog, DialogContent } from "@mui/material";
import { FC } from "react";
import { FC, Fragment } from "react";
import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
import { useUpdate } from "@/hooks/crud/useUpdate";
import { DialogControlProps } from "@/hooks/useDialog";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { EntityType } from "@/services/types";
import { ComponentFormProps } from "@/types/common/dialogs.types";
import {
INlpDatasetSample,
INlpDatasetSampleAttributes,
INlpSampleFormAttributes,
} from "@/types/nlp-sample.types";
import NlpDatasetSample from "./components/NlpTrainForm";
import NlpDatasetSample from "./NlpTrainForm";
export type NlpSampleDialogProps = DialogControlProps<INlpDatasetSample>;
export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
open,
data: sample,
closeDialog,
export const NlpSampleForm: FC<ComponentFormProps<INlpDatasetSample>> = ({
data,
Wrapper = Fragment,
WrapperProps,
...rest
}) => {
const { t } = useTranslate();
const { toast } = useToast();
const { mutateAsync: updateSample } = useUpdate<
const { mutate: updateSample } = useUpdate<
EntityType.NLP_SAMPLE,
INlpDatasetSampleAttributes
>(EntityType.NLP_SAMPLE, {
@@ -44,10 +41,10 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
},
});
const onSubmitForm = (form: INlpSampleFormAttributes) => {
if (sample?.id) {
if (data?.id) {
updateSample(
{
id: sample.id,
id: data.id,
params: {
text: form.text,
type: form.type,
@@ -57,7 +54,7 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
},
{
onSuccess: () => {
closeDialog();
rest.onSuccess?.();
},
},
);
@@ -65,13 +62,13 @@ export const NlpSampleDialog: FC<NlpSampleDialogProps> = ({
};
return (
<Dialog open={open} fullWidth maxWidth="md" onClose={closeDialog} {...rest}>
<DialogTitle onClose={closeDialog}>
{t("title.edit_nlp_sample")}
</DialogTitle>
<DialogContent>
<NlpDatasetSample sample={sample} submitForm={onSubmitForm} />
</DialogContent>
</Dialog>
<Wrapper open={!!WrapperProps?.open} onSubmit={() => {}} {...WrapperProps}>
<form>
<NlpDatasetSample
sample={data || undefined}
submitForm={onSubmitForm}
/>
</form>
</Wrapper>
);
};

25
frontend/src/components/nlp/components/NlpSampleFormDialog.tsx Normal file
View File

@@ -0,0 +1,25 @@
/*
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { GenericFormDialog } from "@/app-components/dialogs";
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
import { INlpDatasetSample } from "@/types/nlp-sample.types";
import { NlpSampleForm } from "./NlpSampleForm";
export const NlpSampleFormDialog = <
T extends INlpDatasetSample = INlpDatasetSample,
>(
props: ComponentFormDialogProps<T>,
) => (
<GenericFormDialog<T>
Form={NlpSampleForm}
editText="title.edit_nlp_sample"
{...props}
/>
);

94
frontend/src/components/nlp/components/NlpValues.tsx → frontend/src/components/nlp/components/NlpValue.tsx
View File

@@ -1,5 +1,5 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -15,7 +15,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { DeleteDialog } from "@/app-components/dialogs";
import { ConfirmDialogBody } from "@/app-components/dialogs";
import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
import {
ActionColumnLabel,
@@ -27,7 +27,7 @@ import { useDelete } from "@/hooks/crud/useDelete";
import { useDeleteMany } from "@/hooks/crud/useDeleteMany";
import { useFind } from "@/hooks/crud/useFind";
import { useGet } from "@/hooks/crud/useGet";
import { useDialog } from "@/hooks/useDialog";
import { useDialogs } from "@/hooks/useDialogs";
import { useHasPermission } from "@/hooks/useHasPermission";
import { useSearch } from "@/hooks/useSearch";
import { useToast } from "@/hooks/useToast";
@@ -39,21 +39,20 @@ import { INlpValue } from "@/types/nlp-value.types";
import { PermissionAction } from "@/types/permission.types";
import { getDateTimeFormatter } from "@/utils/date";
import { NlpValueDialog } from "../NlpValueDialog";
import { NlpValueFormDialog } from "./NlpValueFormDialog";
export const NlpValues = ({ entityId }: { entityId: string }) => {
const [direction, setDirection] = useState<"up" | "down">("up");
const deleteEntityDialogCtl = useDialog<string>(false);
const editValueDialogCtl = useDialog<INlpValue>(false);
const addNlpValueDialogCtl = useDialog<INlpValue>(false);
const hasPermission = useHasPermission();
const router = useRouter();
const { t } = useTranslate();
const { toast } = useToast();
const dialogs = useDialogs();
const router = useRouter();
const [direction, setDirection] = useState<"up" | "down">("up");
const hasPermission = useHasPermission();
const { data: nlpEntity, refetch: refetchEntity } = useGet(entityId, {
entity: EntityType.NLP_ENTITY,
format: Format.FULL,
});
const canHaveSynonyms = nlpEntity?.lookups?.[0] === NlpLookups.keywords;
const { onSearch, searchPayload } = useSearch<INlpValue>({
$eq: [{ entity: entityId }],
$iLike: ["value"],
@@ -64,23 +63,20 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
params: searchPayload,
},
);
const { mutateAsync: deleteNlpValue } = useDelete(EntityType.NLP_VALUE, {
onError: () => {
toast.error(t("message.internal_server_error"));
const { mutate: deleteNlpValue } = useDelete(EntityType.NLP_VALUE, {
onError: (error: Error) => {
toast.error(error.message || t("message.internal_server_error"));
},
onSuccess() {
deleteEntityDialogCtl.closeDialog();
toast.success(t("message.item_delete_success"));
refetchEntity();
toast.success(t("message.item_delete_success"));
},
});
const { mutateAsync: deleteNlpValues } = useDeleteMany(EntityType.NLP_VALUE, {
onError: (error) => {
toast.error(error);
const { mutate: deleteNlpValues } = useDeleteMany(EntityType.NLP_VALUE, {
onError: (error: Error) => {
toast.error(error.message || t("message.internal_server_error"));
},
onSuccess: () => {
deleteEntityDialogCtl.closeDialog();
setSelectedNlpValues([]);
onSuccess() {
toast.success(t("message.item_delete_success"));
},
});
@@ -90,11 +86,18 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
[
{
label: ActionColumnLabel.Edit,
action: (row) => editValueDialogCtl.openDialog(row),
action: (row) =>
dialogs.open(NlpValueFormDialog, { data: row, canHaveSynonyms }),
},
{
label: ActionColumnLabel.Delete,
action: (row) => deleteEntityDialogCtl.openDialog(row.id),
action: async ({ id }) => {
const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
if (isConfirmed) {
deleteNlpValue(id);
}
},
},
],
t("label.operations"),
@@ -150,10 +153,19 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
return setDirection("down");
}, []);
const canHaveSynonyms = nlpEntity?.lookups?.[0] === NlpLookups.keywords;
const handleSelectionChange = (selection: GridRowSelectionModel) => {
setSelectedNlpValues(selection as string[]);
};
const handleDeleteNlpValues = async () => {
const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
mode: "selection",
count: selectedNlpValues.length,
});
if (isConfirmed) {
deleteNlpValues(selectedNlpValues);
}
};
return (
<Grid container gap={2} flexDirection="column">
@@ -198,8 +210,8 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
<Button
startIcon={<AddIcon />}
variant="contained"
onClick={() => addNlpValueDialogCtl.openDialog()}
sx={{ float: "right" }}
onClick={() => dialogs.open(NlpValueFormDialog, null)}
>
{t("button.add")}
</Button>
@@ -207,12 +219,10 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
{selectedNlpValues.length > 0 && (
<Grid item>
<Button
startIcon={<DeleteIcon />}
variant="contained"
color="error"
onClick={() =>
deleteEntityDialogCtl.openDialog(undefined)
}
variant="contained"
onClick={handleDeleteNlpValues}
startIcon={<DeleteIcon />}
>
{t("button.delete")}
</Button>
@@ -221,30 +231,6 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
</ButtonGroup>
</Grid>
</PageHeader>
<NlpValueDialog
{...addNlpValueDialogCtl}
canHaveSynonyms={canHaveSynonyms}
callback={() => {
refetchEntity();
}}
/>
<DeleteDialog
{...deleteEntityDialogCtl}
callback={() => {
if (selectedNlpValues.length > 0) {
deleteNlpValues(selectedNlpValues);
setSelectedNlpValues([]);
deleteEntityDialogCtl.closeDialog();
} else if (deleteEntityDialogCtl.data) {
deleteNlpValue(deleteEntityDialogCtl.data);
}
}}
/>
<NlpValueDialog
{...editValueDialogCtl}
canHaveSynonyms={canHaveSynonyms}
callback={() => {}}
/>
<Grid padding={1} marginTop={2} container>
<DataGrid
columns={columns}

125
frontend/src/components/nlp/components/NlpValueForm.tsx Normal file
View File

@@ -0,0 +1,125 @@
/*
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { useRouter } from "next/router";
import { FC, Fragment, useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
import { Input } from "@/app-components/inputs/Input";
import MultipleInput from "@/app-components/inputs/MultipleInput";
import { useCreate } from "@/hooks/crud/useCreate";
import { useGet } from "@/hooks/crud/useGet";
import { useUpdate } from "@/hooks/crud/useUpdate";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { EntityType, Format } from "@/services/types";
import { ComponentFormProps } from "@/types/common/dialogs.types";
import { INlpValue, INlpValueAttributes } from "@/types/nlp-value.types";
export const NlpValueForm: FC<
ComponentFormProps<{ data: INlpValue; canHaveSynonyms: boolean }>
> = ({ data: props, Wrapper = Fragment, WrapperProps, ...rest }) => {
const { data, canHaveSynonyms } = props || {};
const { t } = useTranslate();
const { toast } = useToast();
const { query } = useRouter();
const { refetch: refetchEntity } = useGet(data?.entity || String(query.id), {
entity: EntityType.NLP_ENTITY,
format: Format.FULL,
});
const { mutate: createNlpValue } = useCreate(EntityType.NLP_VALUE, {
onError: () => {
rest.onError?.();
toast.error(t("message.internal_server_error"));
},
onSuccess() {
rest.onSuccess?.();
refetchEntity();
toast.success(t("message.success_save"));
},
});
const { mutate: updateNlpValue } = useUpdate(EntityType.NLP_VALUE, {
onError: () => {
rest.onError?.();
toast.error(t("message.internal_server_error"));
},
onSuccess() {
rest.onSuccess?.();
toast.success(t("message.success_save"));
},
});
const { reset, register, handleSubmit, control } = useForm<
INlpValueAttributes & {
expressions: string[];
}
>({
defaultValues: {
value: data?.value || "",
expressions: data?.expressions || [],
},
});
const validationRules = {
value: {
required: t("message.value_is_required"),
},
name: {},
description: {},
};
const onSubmitForm = async (params: INlpValueAttributes) => {
if (data) {
updateNlpValue({ id: data.id, params });
} else {
createNlpValue({ ...params, entity: String(query.id) });
}
};
useEffect(() => {
if (data) {
reset({
value: data.value,
expressions: data.expressions,
});
} else {
reset();
}
}, [data, reset]);
return (
<Wrapper
open={!!WrapperProps?.open}
onSubmit={handleSubmit(onSubmitForm)}
{...WrapperProps}
>
<form onSubmit={handleSubmit(onSubmitForm)}>
<ContentContainer>
<ContentItem>
<Input
label={t("placeholder.nlp_value")}
required
autoFocus
{...register("value", validationRules.value)}
/>
</ContentItem>
{canHaveSynonyms ? (
<ContentItem>
<Controller
name="expressions"
control={control}
render={({ field }) => (
<MultipleInput label="synonyms" {...field} />
)}
/>
</ContentItem>
) : null}
</ContentContainer>
</form>
</Wrapper>
);
};

29
frontend/src/components/nlp/components/NlpValueFormDialog.tsx Normal file
View File

@@ -0,0 +1,29 @@
/*
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { GenericFormDialog } from "@/app-components/dialogs";
import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
import { INlpValue } from "@/types/nlp-value.types";
import { NlpValueForm } from "./NlpValueForm";
export const NlpValueFormDialog = <
T extends { data: INlpValue; canHaveSynonyms: boolean } = {
data: INlpValue;
canHaveSynonyms: boolean;
},
>(
props: ComponentFormDialogProps<T>,
) => (
<GenericFormDialog<T>
Form={NlpValueForm}
addText="title.new_nlp_entity_value"
editText="title.edit_nlp_value"
{...props}
/>
);

5
frontend/src/components/nlp/index.tsx
View File

@@ -1,11 +1,12 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 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 { faGraduationCap } from "@fortawesome/free-solid-svg-icons";
import { Grid, Paper, Tab, Tabs } from "@mui/material";
import dynamic from "next/dynamic";
@@ -29,7 +30,7 @@ import {
import NlpDatasetCounter from "./components/NlpDatasetCounter";
import NlpSample from "./components/NlpSample";
import NlpDatasetSample from "./components/NlpTrainForm";
import { NlpValues } from "./components/NlpValues";
import { NlpValues } from "./components/NlpValue";
const NlpEntity = dynamic(() => import("./components/NlpEntity"));

4
frontend/src/contexts/dialogs.context.tsx
View File

@@ -55,7 +55,7 @@ function DialogsProvider(props: DialogProviderProps) {
payload: P,
options: OpenDialogOptions<R> = {},
) {
const { onClose = async () => {} } = options;
const { onClose = async () => {}, ...rest } = options;
let resolve: ((result: R) => void) | undefined;
const promise = new Promise<R>((resolveImpl) => {
resolve = resolveImpl;
@@ -77,7 +77,7 @@ function DialogsProvider(props: DialogProviderProps) {
payload,
onClose,
resolve,
msgProps: { count: options.count, mode: options.mode },
msgProps: rest,
};
setStack((prevStack) => [...prevStack, newEntry]);

8
frontend/src/types/common/dialogs.types.ts
View File

@@ -9,12 +9,14 @@
import { ButtonProps, DialogProps as MuiDialogProps } from "@mui/material";
import { BaseSyntheticEvent } from "react";
interface ConfirmDialogExtraOptions {
interface DialogExtraOptions {
mode?: "click" | "selection";
count?: number;
maxWidth?: MuiDialogProps["maxWidth"];
hasButtons?: boolean;
}
// context
export interface OpenDialogOptions<R> extends ConfirmDialogExtraOptions {
export interface OpenDialogOptions<R> extends DialogExtraOptions {
/**
* A function that is called before closing the dialog closes. The dialog
* stays open as long as the returned promise is not resolved. Use this if
@@ -137,7 +139,7 @@ export interface DialogStackEntry<P, R> {
payload: P;
onClose: (result: R) => Promise<void>;
resolve: (result: R) => void;
msgProps: ConfirmDialogExtraOptions;
msgProps: DialogExtraOptions;
}
export interface DialogProviderProps {