fix where prompt deleted index is not passed correctly

This commit is contained in:
Henry
2023-11-29 15:04:24 +00:00
parent 92ca62c4a2
commit b62a506edb
4 changed files with 42 additions and 29 deletions
@@ -5,12 +5,7 @@
scrollbar-width: none; /* For Firefox */ scrollbar-width: none; /* For Firefox */
} }
/*.button-container::-webkit-scrollbar {*/
/* display: none; !* For Chrome, Safari, and Opera *!*/
/*}*/
.button { .button {
flex: 0 0 auto; /* Don't grow, don't shrink, base width on content */ flex: 0 0 auto; /* Don't grow, don't shrink, base width on content */
margin: 5px; /* Adjust as needed for spacing between buttons */ margin: 5px; /* Adjust as needed for spacing between buttons */
/* Add additional button styling here */
} }
@@ -17,7 +17,7 @@ import {
List, List,
InputAdornment InputAdornment
} from '@mui/material' } from '@mui/material'
import { IconX, IconTrash, IconPlus } from '@tabler/icons' import { IconX, IconTrash, IconPlus, IconBulb } from '@tabler/icons'
// Project import // Project import
import { StyledButton } from 'ui-component/button/StyledButton' import { StyledButton } from 'ui-component/button/StyledButton'
@@ -29,7 +29,7 @@ import useNotifier from 'utils/useNotifier'
// API // API
import chatflowsApi from 'api/chatflows' import chatflowsApi from 'api/chatflows'
const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefined }) => { const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
const portalElement = document.getElementById('portal') const portalElement = document.getElementById('portal')
const dispatch = useDispatch() const dispatch = useDispatch()
@@ -93,9 +93,7 @@ const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefin
}) })
dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data }) dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
} }
if (onConfirm) {
onConfirm() onConfirm()
}
} catch (error) { } catch (error) {
const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}` const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
enqueueSnackbar({ enqueueSnackbar({
@@ -165,12 +163,34 @@ const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefin
{dialogProps.title || 'Conversation Starter Prompts'} {dialogProps.title || 'Conversation Starter Prompts'}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<div
style={{
display: 'flex',
flexDirection: 'column',
borderRadius: 10,
background: '#d8f3dc',
padding: 10
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}}
>
<IconBulb size={30} color='#2d6a4f' />
<span style={{ color: '#2d6a4f', marginLeft: 10, fontWeight: 500 }}>
Starter prompts will only be shown when there is no messages on the chat yet
</span>
</div>
</div>
<Box sx={{ '& > :not(style)': { m: 1 }, pt: 2 }}> <Box sx={{ '& > :not(style)': { m: 1 }, pt: 2 }}>
<List> <List>
{inputFields.map((data, index) => { {inputFields.map((data, index) => {
return ( return (
<div key={index} style={{ display: 'flex', width: '100%' }}> <div key={index} style={{ display: 'flex', width: '100%' }}>
<Box sx={{ width: '90%', mb: 1 }}> <Box sx={{ width: '95%', mb: 1 }}>
<OutlinedInput <OutlinedInput
sx={{ width: '100%' }} sx={{ width: '100%' }}
key={index} key={index}
@@ -181,32 +201,29 @@ const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefin
name='prompt' name='prompt'
endAdornment={ endAdornment={
<InputAdornment position='end' sx={{ padding: '2px' }}> <InputAdornment position='end' sx={{ padding: '2px' }}>
{inputFields.length > 1 && (
<IconButton <IconButton
sx={{ height: 30, width: 30 }}
size='small' size='small'
color='error'
disabled={inputFields.length === 1} disabled={inputFields.length === 1}
onClick={removeInputFields} onClick={() => removeInputFields(index)}
edge='end' edge='end'
> >
<IconTrash /> <IconTrash />
</IconButton> </IconButton>
)}
</InputAdornment> </InputAdornment>
} }
/> />
</Box> </Box>
<Box sx={{ width: '10%' }}> <Box sx={{ width: '5%', mb: 1 }}>
{index === inputFields.length - 1 && ( {index === inputFields.length - 1 && (
<IconButton onClick={addInputField}> <IconButton color='primary' onClick={addInputField}>
<IconPlus /> <IconPlus />
</IconButton> </IconButton>
)} )}
</Box> </Box>
{/*<Box sx={{ width: '10%' }}>*/}
{/* {inputFields.length !== 1 && (*/}
{/* <IconButton onClick={removeInputFields}>*/}
{/* <IconTrash />*/}
{/* </IconButton>*/}
{/* )}*/}
{/*</Box>*/}
</div> </div>
) )
})} })}
@@ -388,6 +388,7 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
<StarterPromptsDialog <StarterPromptsDialog
show={conversationStartersDialogOpen} show={conversationStartersDialogOpen}
dialogProps={conversationStartersDialogProps} dialogProps={conversationStartersDialogProps}
onConfirm={() => setConversationStartersDialogOpen(false)}
onCancel={() => setConversationStartersDialogOpen(false)} onCancel={() => setConversationStartersDialogOpen(false)}
/> />
<ViewMessagesDialog <ViewMessagesDialog
@@ -118,7 +118,7 @@
.cloud { .cloud {
width: 400px; width: 400px;
height: calc(90vh - 260px); height: calc(100vh - 260px);
border-radius: 0.5rem; border-radius: 0.5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;