UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2024-12-02 09:05:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: minor fixes

Browse Source
This commit is contained in:
Mohamed Marrouchi 2024-11-26 07:12:27 +01:00
parent eba199c7d7
commit 93eb937f7f
1 changed files with 71 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/app-components/inputs/NlpPatternSelect.tsx
View File

@ -12,11 +12,12 @@ import {
CircularProgress, CircularProgress,
IconButton, IconButton,
InputAdornment, InputAdornment,
Skeleton,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import Autocomplete from "@mui/material/Autocomplete"; import Autocomplete from "@mui/material/Autocomplete";
import { forwardRef, SyntheticEvent, useState } from "react"; import { forwardRef, SyntheticEvent, useRef, useState } from "react";
import { Input } from "@/app-components/inputs/Input"; import { Input } from "@/app-components/inputs/Input";
import { useFind } from "@/hooks/crud/useFind"; import { useFind } from "@/hooks/crud/useFind";
@ -26,6 +27,7 @@ import { useTranslate } from "@/hooks/useTranslate";
import { EntityType, Format } from "@/services/types"; import { EntityType, Format } from "@/services/types";
import { NlpPattern } from "@/types/block.types"; import { NlpPattern } from "@/types/block.types";
import { INlpEntity } from "@/types/nlp-entity.types"; import { INlpEntity } from "@/types/nlp-entity.types";
import { INlpValue } from "@/types/nlp-value.types";
type NlpPatternSelectProps = { patterns: NlpPattern[]; onChange: any }; type NlpPatternSelectProps = { patterns: NlpPattern[]; onChange: any };
@ -33,6 +35,7 @@ const NlpPatternSelect = (
{ patterns, onChange }: NlpPatternSelectProps, { patterns, onChange }: NlpPatternSelectProps,
ref, ref,
) => { ) => {
const inputRef = useRef(null);
const [selected, setSelected] = useState<NlpPattern[]>(patterns); const [selected, setSelected] = useState<NlpPattern[]>(patterns);
const theme = useTheme(); const theme = useTheme();
const { t } = useTranslate(); const { t } = useTranslate();
@ -94,6 +97,13 @@ const NlpPatternSelect = (
onChange(undefined, newSelection); onChange(undefined, newSelection);
}; };
if (!options.length) {
return (
<Skeleton animation="wave" variant="rounded" width="100%" height={56} />
);
}
const defaultValue = const defaultValue =
options.filter(({ name }) => options.filter(({ name }) =>
selected.find(({ entity: entityName }) => entityName === name), selected.find(({ entity: entityName }) => entityName === name),
@ -154,21 +164,23 @@ const NlpPatternSelect = (
{entities.map((entity, index) => { {entities.map((entity, index) => {
const { key, onDelete } = getTagProps({ index }); const { key, onDelete } = getTagProps({ index });
const handleChange = ( const handleChange = (
event: SyntheticEvent<Element, Event>, _event: SyntheticEvent<Element, Event>,
valueId: string, valueId: string,
) => { ) => {
handleNlpValueChange(entity, valueId); handleNlpValueChange(entity, valueId);
}; };
const selected = ( const values = entity.values.map((vId) =>
Array.isArray(patterns) getNlpValueFromCache(vId),
? patterns?.find((e) => e.entity === entity.name) ) as INlpValue[];
: {} const selectedValue = patterns?.find(
) as NlpPattern; (e) => e.entity === entity.name,
)?.value;
const value = values.find(({ value }) => value === selectedValue);
return ( return (
<Autocomplete <Autocomplete
size="small" size="small"
defaultValue={selected?.value || ""} defaultValue={value?.id || entity.id}
options={[entity.id].concat(entity.values)} options={[entity.id].concat(entity.values)}
multiple={false} multiple={false}
key={key} key={key}
@ -179,12 +191,13 @@ const NlpPatternSelect = (
return nlpValueCache?.value; return nlpValueCache?.value;
} }
if (selected?.entity === option || option === entity.id) { if (option === entity.id) {
return t("label.any"); return t("label.any");
} }
return option; return option;
}} }}
freeSolo={false}
disableClearable disableClearable
popupIcon={false} popupIcon={false}
onChange={handleChange} onChange={handleChange}
@ -201,17 +214,19 @@ const NlpPatternSelect = (
}, },
}, },
}} }}
renderInput={(props) => ( renderInput={(props) => {
<Input return (
{...props} <Input
InputProps={{ {...props}
...props.InputProps, InputProps={{
readOnly: true, ...props.InputProps,
sx: { readOnly: true,
overflow: "hidden", sx: {
}, padding: 0,
startAdornment: ( overflow: "hidden",
<IconButton> cursor: "pointer",
},
startAdornment: (
<InputAdornment <InputAdornment
position="start" position="start"
sx={{ sx={{
@ -222,35 +237,36 @@ const NlpPatternSelect = (
> >
{entity.name} {entity.name}
</InputAdornment> </InputAdornment>
</IconButton> ),
), endAdornment: (
endAdornment: ( <InputAdornment position="end">
<InputAdornment position="end"> {isLoading ? (
{isLoading ? ( <CircularProgress color="inherit" size={20} />
<CircularProgress color="inherit" size={20} /> ) : (
) : ( <IconButton
<IconButton sx={{ padding: 0 }}
onClick={(e) => { onClick={(e) => {
onDelete(e); onDelete(e);
onChange( onChange(
undefined, undefined,
patterns.filter( patterns.filter(
(p) => p.entity !== entity.name, (p) => p.entity !== entity.name,
), ),
); );
}} }}
edge="end" edge="end"
size="small" size="small"
> >
<Cancel htmlColor={theme.palette.grey[500]} /> <Cancel htmlColor={theme.palette.grey[500]} />
</IconButton> </IconButton>
)} )}
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
)} );
}}
/> />
); );
})} })}
@ -264,6 +280,13 @@ const NlpPatternSelect = (
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
InputProps={{ InputProps={{
...props.InputProps, ...props.InputProps,
inputRef,
onClick: (event) => {
if (event.target !== inputRef.current) {
event.stopPropagation();
event.preventDefault();
}
},
endAdornment: isLoading ? ( endAdornment: isLoading ? (
<CircularProgress color="inherit" size={20} /> <CircularProgress color="inherit" size={20} />
) : null, ) : null,