Merge pull request #1427 from vinodkiran/BUGFIX/PromptHub-Loading

Bugfix: Unncessary load of Prompts on chatflow open.
This commit is contained in:
Henry Heng
2023-12-27 20:08:28 +00:00
committed by GitHub
@@ -92,24 +92,27 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
const getAvailablePromptsApi = useApi(promptApi.getAvailablePrompts) const getAvailablePromptsApi = useApi(promptApi.getAvailablePrompts)
useEffect(() => { useEffect(() => {
if (show) dispatch({ type: SHOW_CANVAS_DIALOG }) if (show) {
else dispatch({ type: HIDE_CANVAS_DIALOG }) dispatch({ type: SHOW_CANVAS_DIALOG })
} else dispatch({ type: HIDE_CANVAS_DIALOG })
return () => dispatch({ type: HIDE_CANVAS_DIALOG }) return () => dispatch({ type: HIDE_CANVAS_DIALOG })
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [show, dispatch]) }, [show, dispatch])
useEffect(() => { useEffect(() => {
if (promptType) { if (promptType && show) {
setLoading(true)
getAvailablePromptsApi.request({ tags: promptType === 'template' ? 'StringPromptTemplate&' : 'ChatPromptTemplate&' }) getAvailablePromptsApi.request({ tags: promptType === 'template' ? 'StringPromptTemplate&' : 'ChatPromptTemplate&' })
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [promptType]) }, [promptType, show])
useEffect(() => { useEffect(() => {
if (getAvailablePromptsApi.data && getAvailablePromptsApi.data.repos) { if (getAvailablePromptsApi.data && getAvailablePromptsApi.data.repos) {
setAvailablePrompNameList(getAvailablePromptsApi.data.repos) setAvailablePrompNameList(getAvailablePromptsApi.data.repos)
if (getAvailablePromptsApi.data.repos?.length) handleListItemClick(0, getAvailablePromptsApi.data.repos) if (getAvailablePromptsApi.data.repos?.length) handleListItemClick(0, getAvailablePromptsApi.data.repos)
setLoading(false)
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -174,6 +177,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
const [selectedPrompt, setSelectedPrompt] = useState({}) const [selectedPrompt, setSelectedPrompt] = useState({})
const [accordionExpanded, setAccordionExpanded] = useState(['prompt']) const [accordionExpanded, setAccordionExpanded] = useState(['prompt'])
const [loading, setLoading] = useState(false)
const handleAccordionChange = (accordionName) => (event, isExpanded) => { const handleAccordionChange = (accordionName) => (event, isExpanded) => {
const accordians = [...accordionExpanded] const accordians = [...accordionExpanded]
@@ -209,6 +213,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
language.forEach((item) => { language.forEach((item) => {
tags += `tags=${item.name}&` tags += `tags=${item.name}&`
}) })
setLoading(true)
getAvailablePromptsApi.request({ tags: tags }) getAvailablePromptsApi.request({ tags: tags })
} }
@@ -379,7 +384,15 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
</FormControl> </FormControl>
</Box> </Box>
{availablePrompNameList && availablePrompNameList.length == 0 && ( {loading && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%', pb: 3 }} flexDirection='column'>
<Box sx={{ p: 5, height: 'auto' }}>
<img style={{ objectFit: 'cover', height: '20vh', width: 'auto' }} src={promptEmptySVG} alt='promptEmptySVG' />
</Box>
<div>Please wait....loading Prompts</div>
</Stack>
)}
{!loading && availablePrompNameList && availablePrompNameList.length === 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%', pb: 3 }} flexDirection='column'> <Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%', pb: 3 }} flexDirection='column'>
<Box sx={{ p: 5, height: 'auto' }}> <Box sx={{ p: 5, height: 'auto' }}>
<img style={{ objectFit: 'cover', height: '20vh', width: 'auto' }} src={promptEmptySVG} alt='promptEmptySVG' /> <img style={{ objectFit: 'cover', height: '20vh', width: 'auto' }} src={promptEmptySVG} alt='promptEmptySVG' />
@@ -387,7 +400,7 @@ const PromptLangsmithHubDialog = ({ promptType, show, onCancel, onSubmit }) => {
<div>No Available Prompts</div> <div>No Available Prompts</div>
</Stack> </Stack>
)} )}
{availablePrompNameList && availablePrompNameList.length > 0 && ( {!loading && availablePrompNameList && availablePrompNameList.length > 0 && (
<Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }} flexDirection='column'> <Stack sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }} flexDirection='column'>
<Box sx={{ width: '100%', p: 2 }}> <Box sx={{ width: '100%', p: 2 }}>
<Grid xs={12} container spacing={1} justifyContent='center' alignItems='center'> <Grid xs={12} container spacing={1} justifyContent='center' alignItems='center'>