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

Merge pull request #648 from TheCoderAdi/feat/loading-spinner-638

Browse Source 
Added a loading spinner in NLU prediction
This commit is contained in:
Med Marrouchi 2025-02-18 18:34:59 +01:00 committed by GitHub
commit 2d40732bc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/app-components/inputs/Selectable.tsx
View File

@ -1,12 +1,14 @@
/*
* 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 { Box, Input, styled } from "@mui/material";
import { Box, CircularProgress, Input, styled } from "@mui/material";
import randomSeed from "random-seed";
import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
@ -62,6 +64,7 @@ type SelectableProps = {
text: string;
entities: INlpDatasetKeywordEntity[];
}) => void;
loading?: boolean;
};
const Selectable: FC<SelectableProps> = ({
@ -70,6 +73,7 @@ const Selectable: FC<SelectableProps> = ({
placeholder = "",
onChange,
onSelect,
loading = false,
}) => {
const [text, setText] = useState(defaultValue || "");
const editableRef = useRef<HTMLDivElement>(null);
@ -204,6 +208,22 @@ const Selectable: FC<SelectableProps> = ({
value={text}
onChange={(e) => handleTextChange(e.target.value)}
placeholder={placeholder}
endAdornment={
loading ? (
<CircularProgress
size={20}
style={{
position: "absolute",
right: 0,
top: "20%",
transform: "translateY(-20%)",
backgroundColor: "rgba(255, 255, 255, 0.7)",
borderRadius: "50%",
}}
aria-label="Loading..."
/>
) : null
}
/>
</SelectableBox>
);

9
frontend/src/components/nlp/components/NlpTrainForm.tsx
View File

@ -1,11 +1,13 @@
/*
* 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 AddIcon from "@mui/icons-material/Add";
import Check from "@mui/icons-material/Check";
import DeleteIcon from "@mui/icons-material/Delete";
@ -117,8 +119,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
}, 400),
[setValue],
);
useQuery({
const { isLoading } = useQuery({
queryKey: ["nlp-prediction", currentText],
queryFn: async () => {
return await apiClient.predictNlp(currentText);
@ -140,7 +141,6 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
},
enabled: !sample && !!currentText,
});
const findInsertIndex = (newItem: INlpDatasetKeywordEntity): number => {
const index = keywordEntities.findIndex(
(entity) => entity.start && newItem.start && entity.start > newItem.start,
@ -226,6 +226,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
})),
);
}}
loading={isLoading}
/>
</ContentItem>
<Box display="flex" flexDirection="column">