Conversation Starter: Setup of prompts from the chatflow dashboard and other refactorings.

packages/ui/src/ui-component/button/FlowListMenu.js

@@ -11,6 +11,7 @@ import FileCopyIcon from '@mui/icons-material/FileCopy'
 import FileDownloadIcon from '@mui/icons-material/Downloading'
 import FileDeleteIcon from '@mui/icons-material/Delete'
 import FileCategoryIcon from '@mui/icons-material/Category'
+import PictureInPictureAltIcon from '@mui/icons-material/PictureInPictureAlt'
 import Button from '@mui/material/Button'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import { IconX } from '@tabler/icons'
@@ -28,6 +29,7 @@ import TagDialog from '../dialog/TagDialog'
 
 import { generateExportFlowData } from '../../utils/genericHelper'
 import useNotifier from '../../utils/useNotifier'
+import StarterPromptsDialog from '../dialog/StarterPromptsDialog'
 
 const StyledMenu = styled((props) => (
     <Menu
@@ -79,6 +81,8 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
     const [categoryDialogProps, setCategoryDialogProps] = useState({})
     const [anchorEl, setAnchorEl] = useState(null)
     const open = Boolean(anchorEl)
+    const [conversationStartersDialogOpen, setConversationStartersDialogOpen] = useState(false)
+    const [conversationStartersDialogProps, setConversationStartersDialogProps] = useState({})
 
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget)
@@ -93,6 +97,15 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
         setFlowDialogOpen(true)
     }
 
+    const handleFlowStarterPrompts = () => {
+        setAnchorEl(null)
+        setConversationStartersDialogProps({
+            title: 'Starter Prompts - ' + chatflow.name,
+            chatflow: chatflow
+        })
+        setConversationStartersDialogOpen(true)
+    }
+
     const saveFlowRename = async (chatflowName) => {
         const updateBody = {
             name: chatflowName,
@@ -254,6 +267,10 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
                     Export
                 </MenuItem>
                 <Divider sx={{ my: 0.5 }} />
+                <MenuItem onClick={handleFlowStarterPrompts} disableRipple>
+                    <PictureInPictureAltIcon />
+                    Starter Prompts
+                </MenuItem>
                 <MenuItem onClick={handleFlowCategory} disableRipple>
                     <FileCategoryIcon />
                     Update Category
@@ -281,6 +298,11 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
                 onClose={() => setCategoryDialogOpen(false)}
                 onSubmit={saveFlowCategory}
             />
+            <StarterPromptsDialog
+                show={conversationStartersDialogOpen}
+                dialogProps={conversationStartersDialogProps}
+                onCancel={() => setConversationStartersDialogOpen(false)}
+            />
         </div>
     )
 }