UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-05-08 14:54:45 +00:00
Code Issues Actions 3 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: * 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. * 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). * 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 randomSeed from "random-seed";
import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
@ -62,6 +64,7 @@ type SelectableProps = {
text: string; text: string;
entities: INlpDatasetKeywordEntity[]; entities: INlpDatasetKeywordEntity[];
}) => void; }) => void;
loading?: boolean;
}; };
const Selectable: FC<SelectableProps> = ({ const Selectable: FC<SelectableProps> = ({
@ -70,6 +73,7 @@ const Selectable: FC<SelectableProps> = ({
placeholder = "", placeholder = "",
onChange, onChange,
onSelect, onSelect,
loading = false,
}) => { }) => {
const [text, setText] = useState(defaultValue || ""); const [text, setText] = useState(defaultValue || "");
const editableRef = useRef<HTMLDivElement>(null); const editableRef = useRef<HTMLDivElement>(null);
@ -204,6 +208,22 @@ const Selectable: FC<SelectableProps> = ({
value={text} value={text}
onChange={(e) => handleTextChange(e.target.value)} onChange={(e) => handleTextChange(e.target.value)}
placeholder={placeholder} 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> </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: * 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. * 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). * 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 AddIcon from "@mui/icons-material/Add";
import Check from "@mui/icons-material/Check"; import Check from "@mui/icons-material/Check";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
@ -117,8 +119,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
}, 400), }, 400),
[setValue], [setValue],
); );
const { isLoading } = useQuery({
useQuery({
queryKey: ["nlp-prediction", currentText], queryKey: ["nlp-prediction", currentText],
queryFn: async () => { queryFn: async () => {
return await apiClient.predictNlp(currentText); return await apiClient.predictNlp(currentText);
@ -140,7 +141,6 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
}, },
enabled: !sample && !!currentText, enabled: !sample && !!currentText,
}); });
const findInsertIndex = (newItem: INlpDatasetKeywordEntity): number => { const findInsertIndex = (newItem: INlpDatasetKeywordEntity): number => {
const index = keywordEntities.findIndex( const index = keywordEntities.findIndex(
(entity) => entity.start && newItem.start && entity.start > newItem.start, (entity) => entity.start && newItem.start && entity.start > newItem.start,
@ -226,6 +226,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
})), })),
); );
}} }}
loading={isLoading}
/> />
</ContentItem> </ContentItem>
<Box display="flex" flexDirection="column"> <Box display="flex" flexDirection="column">