From b62a506edb38af04769086b27ff9fd44fd81988a Mon Sep 17 00:00:00 2001
From: Henry <hzj94@hotmail.com>
Date: Wed, 29 Nov 2023 15:04:24 +0000
Subject: [PATCH] fix where prompt deleted index is not passed correctly

---
 .../ui-component/cards/StarterPromptsCard.css |  5 --
 .../dialog/StarterPromptsDialog.js            | 63 ++++++++++++-------
 packages/ui/src/views/canvas/CanvasHeader.js  |  1 +
 .../ui/src/views/chatmessage/ChatMessage.css  |  2 +-
 4 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/ui-component/cards/StarterPromptsCard.css b/packages/ui/src/ui-component/cards/StarterPromptsCard.css
index 8eb3b0ad..2b8df226 100644
--- a/packages/ui/src/ui-component/cards/StarterPromptsCard.css
+++ b/packages/ui/src/ui-component/cards/StarterPromptsCard.css
@@ -5,12 +5,7 @@
     scrollbar-width: none; /* For Firefox */
 }
 
-/*.button-container::-webkit-scrollbar {*/
-/*    display: none; !* For Chrome, Safari, and Opera *!*/
-/*}*/
-
 .button {
     flex: 0 0 auto; /* Don't grow, don't shrink, base width on content */
     margin: 5px; /* Adjust as needed for spacing between buttons */
-    /* Add additional button styling here */
 }
diff --git a/packages/ui/src/ui-component/dialog/StarterPromptsDialog.js b/packages/ui/src/ui-component/dialog/StarterPromptsDialog.js
index 286399a6..a9916841 100644
--- a/packages/ui/src/ui-component/dialog/StarterPromptsDialog.js
+++ b/packages/ui/src/ui-component/dialog/StarterPromptsDialog.js
@@ -17,7 +17,7 @@ import {
     List,
     InputAdornment
 } from '@mui/material'
-import { IconX, IconTrash, IconPlus } from '@tabler/icons'
+import { IconX, IconTrash, IconPlus, IconBulb } from '@tabler/icons'
 
 // Project import
 import { StyledButton } from 'ui-component/button/StyledButton'
@@ -29,7 +29,7 @@ import useNotifier from 'utils/useNotifier'
 // API
 import chatflowsApi from 'api/chatflows'
 
-const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefined }) => {
+const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
     const portalElement = document.getElementById('portal')
     const dispatch = useDispatch()
 
@@ -93,9 +93,7 @@ const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefin
                 })
                 dispatch({ type: SET_CHATFLOW, chatflow: saveResp.data })
             }
-            if (onConfirm) {
-                onConfirm()
-            }
+            onConfirm()
         } catch (error) {
             const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`
             enqueueSnackbar({
@@ -165,12 +163,34 @@ const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefin
                 {dialogProps.title || 'Conversation Starter Prompts'}
             </DialogTitle>
             <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 }}>
                     <List>
                         {inputFields.map((data, index) => {
                             return (
                                 <div key={index} style={{ display: 'flex', width: '100%' }}>
-                                    <Box sx={{ width: '90%', mb: 1 }}>
+                                    <Box sx={{ width: '95%', mb: 1 }}>
                                         <OutlinedInput
                                             sx={{ width: '100%' }}
                                             key={index}
@@ -181,32 +201,29 @@ const StarterPromptsDialog = ({ show, dialogProps, onCancel, onConfirm = undefin
                                             name='prompt'
                                             endAdornment={
                                                 <InputAdornment position='end' sx={{ padding: '2px' }}>
-                                                    <IconButton
-                                                        size='small'
-                                                        disabled={inputFields.length === 1}
-                                                        onClick={removeInputFields}
-                                                        edge='end'
-                                                    >
-                                                        <IconTrash />
-                                                    </IconButton>
+                                                    {inputFields.length > 1 && (
+                                                        <IconButton
+                                                            sx={{ height: 30, width: 30 }}
+                                                            size='small'
+                                                            color='error'
+                                                            disabled={inputFields.length === 1}
+                                                            onClick={() => removeInputFields(index)}
+                                                            edge='end'
+                                                        >
+                                                            <IconTrash />
+                                                        </IconButton>
+                                                    )}
                                                 </InputAdornment>
                                             }
                                         />
                                     </Box>
-                                    <Box sx={{ width: '10%' }}>
+                                    <Box sx={{ width: '5%', mb: 1 }}>
                                         {index === inputFields.length - 1 && (
-                                            <IconButton onClick={addInputField}>
+                                            <IconButton color='primary' onClick={addInputField}>
                                                 <IconPlus />
                                             </IconButton>
                                         )}
                                     </Box>
-                                    {/*<Box sx={{ width: '10%' }}>*/}
-                                    {/*    {inputFields.length !== 1 && (*/}
-                                    {/*        <IconButton onClick={removeInputFields}>*/}
-                                    {/*            <IconTrash />*/}
-                                    {/*        </IconButton>*/}
-                                    {/*    )}*/}
-                                    {/*</Box>*/}
                                 </div>
                             )
                         })}
diff --git a/packages/ui/src/views/canvas/CanvasHeader.js b/packages/ui/src/views/canvas/CanvasHeader.js
index 2c3bdfe4..85408cd8 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.js
+++ b/packages/ui/src/views/canvas/CanvasHeader.js
@@ -388,6 +388,7 @@ const CanvasHeader = ({ chatflow, handleSaveFlow, handleDeleteFlow, handleLoadFl
             <StarterPromptsDialog
                 show={conversationStartersDialogOpen}
                 dialogProps={conversationStartersDialogProps}
+                onConfirm={() => setConversationStartersDialogOpen(false)}
                 onCancel={() => setConversationStartersDialogOpen(false)}
             />
             <ViewMessagesDialog
diff --git a/packages/ui/src/views/chatmessage/ChatMessage.css b/packages/ui/src/views/chatmessage/ChatMessage.css
index 2c627988..2298fee6 100644
--- a/packages/ui/src/views/chatmessage/ChatMessage.css
+++ b/packages/ui/src/views/chatmessage/ChatMessage.css
@@ -118,7 +118,7 @@
 
 .cloud {
     width: 400px;
-    height: calc(90vh - 260px);
+    height: calc(100vh - 260px);
     border-radius: 0.5rem;
     display: flex;
     justify-content: center;