feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/workflow/operator/add-block.tsx

@@ -13,10 +13,12 @@ import {
 } from '../utils'
 import {
   useAvailableBlocks,
+  useIsChatMode,
   useNodesMetaData,
   useNodesReadOnly,
   usePanelInteractions,
 } from '../hooks'
+import { useHooksStore } from '../hooks-store'
 import { useWorkflowStore } from '../store'
 import TipPopup from './tip-popup'
 import cn from '@/utils/classnames'
@@ -27,6 +29,7 @@ import type {
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
+import { FlowType } from '@/types/common'
 
 type AddBlockProps = {
   renderTrigger?: (open: boolean) => React.ReactNode
@@ -39,11 +42,14 @@ const AddBlock = ({
   const { t } = useTranslation()
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
+  const isChatMode = useIsChatMode()
   const { nodesReadOnly } = useNodesReadOnly()
   const { handlePaneContextmenuCancel } = usePanelInteractions()
   const [open, setOpen] = useState(false)
   const { availableNextBlocks } = useAvailableBlocks(BlockEnum.Start, false)
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
+  const flowType = useHooksStore(s => s.configsMap?.flowType)
+  const showStartTab = flowType !== FlowType.ragPipeline && !isChatMode
 
   const handleOpenChange = useCallback((open: boolean) => {
     setOpen(open)
@@ -51,7 +57,7 @@ const AddBlock = ({
       handlePaneContextmenuCancel()
   }, [handlePaneContextmenuCancel])
 
-  const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
+  const handleSelect = useCallback<OnSelectBlock>((type, pluginDefaultValue) => {
     const {
       getNodes,
     } = store.getState()
@@ -65,7 +71,7 @@ const AddBlock = ({
       data: {
         ...(defaultValue as any),
         title: nodesWithSameType.length > 0 ? `${defaultValue.title} ${nodesWithSameType.length + 1}` : defaultValue.title,
-        ...toolDefaultValue,
+        ...pluginDefaultValue,
         _isCandidate: true,
       },
       position: {
@@ -108,6 +114,7 @@ const AddBlock = ({
       trigger={renderTrigger || renderTriggerElement}
       popupClassName='!min-w-[256px]'
       availableBlocksTypes={availableNextBlocks}
+      showStartTab={showStartTab}
     />
   )
 }

web/app/components/workflow/operator/control.tsx

@@ -24,7 +24,7 @@ import { useStore } from '../store'
 import Divider from '../../base/divider'
 import AddBlock from './add-block'
 import TipPopup from './tip-popup'
-import ExportImage from './export-image'
+import MoreActions from './more-actions'
 import { useOperator } from './hooks'
 import cn from '@/utils/classnames'
 
@@ -89,7 +89,6 @@ const Control = () => {
         </div>
       </TipPopup>
       <Divider className='my-1 w-3.5' />
-      <ExportImage />
       <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
         <div
           className={cn(
@@ -114,6 +113,7 @@ const Control = () => {
           {!maximizeCanvas && <RiAspectRatioLine className='h-4 w-4' />}
         </div>
       </TipPopup>
+      <MoreActions />
     </div>
   )
 }

web/app/components/workflow/operator/index.tsx

@@ -1,4 +1,5 @@
-import { memo, useEffect, useMemo, useRef } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import type { Node } from 'reactflow'
 import { MiniMap } from 'reactflow'
 import UndoRedo from '../header/undo-redo'
 import ZoomInOut from './zoom-in-out'
@@ -24,6 +25,12 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
     return Math.max((workflowCanvasWidth - rightPanelWidth), 400)
   }, [workflowCanvasWidth, rightPanelWidth])
 
+  const getMiniMapNodeClassName = useCallback((node: Node) => {
+    return node.data?.selected
+      ? 'bg-workflow-minimap-block border-components-option-card-option-selected-border'
+      : 'bg-workflow-minimap-block'
+  }, [])
+
   // update bottom panel height
   useEffect(() => {
     if (bottomPanelRef.current) {
@@ -65,6 +72,8 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
               height: 72,
             }}
             maskColor='var(--color-workflow-minimap-bg)'
+            nodeClassName={getMiniMapNodeClassName}
+            nodeStrokeWidth={3}
             className='!absolute !bottom-10 z-[9] !m-0 !h-[73px] !w-[103px] !rounded-lg !border-[0.5px]
             !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
           />

web/app/components/workflow/operator/more-actions.tsx

@@ -2,13 +2,15 @@ import type { FC } from 'react'
 import {
   memo,
   useCallback,
+  useMemo,
   useState,
 } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
+import { RiExportLine, RiMoreFill } from '@remixicon/react'
 import { toJpeg, toPng, toSvg } from 'html-to-image'
 import { useNodesReadOnly } from '../hooks'
 import TipPopup from './tip-popup'
-import { RiExportLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
@@ -18,8 +20,9 @@ import {
 import { getNodesBounds, useReactFlow } from 'reactflow'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import { useStore } from '@/app/components/workflow/store'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
-const ExportImage: FC = () => {
+const MoreActions: FC = () => {
   const { t } = useTranslation()
   const { getNodesReadOnly } = useNodesReadOnly()
   const reactFlow = useReactFlow()
@@ -29,6 +32,15 @@ const ExportImage: FC = () => {
   const [previewTitle, setPreviewTitle] = useState('')
   const knowledgeName = useStore(s => s.knowledgeName)
   const appName = useStore(s => s.appName)
+  const maximizeCanvas = useStore(s => s.maximizeCanvas)
+  const { appSidebarExpand } = useAppStore(useShallow(state => ({
+    appSidebarExpand: state.appSidebarExpand,
+  })))
+
+  const crossAxisOffset = useMemo(() => {
+    if (maximizeCanvas) return 40
+    return appSidebarExpand === 'expand' ? 188 : 40
+  }, [appSidebarExpand, maximizeCanvas])
 
   const handleExportImage = useCallback(async (type: 'png' | 'jpeg' | 'svg', currentWorkflow = false) => {
     if (!appName && !knowledgeName)
@@ -53,14 +65,11 @@ const ExportImage: FC = () => {
       let dataUrl
 
       if (currentWorkflow) {
-        // Get all nodes and their bounds
         const nodes = reactFlow.getNodes()
         const nodesBounds = getNodesBounds(nodes)
 
-        // Save current viewport
         const currentViewport = reactFlow.getViewport()
 
-        // Calculate the required zoom to fit all nodes
         const viewportWidth = window.innerWidth
         const viewportHeight = window.innerHeight
         const zoom = Math.min(
@@ -69,30 +78,25 @@ const ExportImage: FC = () => {
           1,
         )
 
-        // Calculate center position
         const centerX = nodesBounds.x + nodesBounds.width / 2
         const centerY = nodesBounds.y + nodesBounds.height / 2
 
-        // Set viewport to show all nodes
         reactFlow.setViewport({
           x: viewportWidth / 2 - centerX * zoom,
           y: viewportHeight / 2 - centerY * zoom,
           zoom,
         })
 
-        // Wait for the transition to complete
         await new Promise(resolve => setTimeout(resolve, 300))
 
-        // Calculate actual content size with padding
-        const padding = 50 // More padding for better visualization
+        const padding = 50
         const contentWidth = nodesBounds.width + padding * 2
         const contentHeight = nodesBounds.height + padding * 2
 
-        // Export with higher quality for whole workflow
         const exportOptions = {
           filter,
-          backgroundColor: '#1a1a1a', // Dark background to match previous style
-          pixelRatio: 2, // Higher resolution for better zoom
+          backgroundColor: '#1a1a1a',
+          pixelRatio: 2,
           width: contentWidth,
           height: contentHeight,
           style: {
@@ -119,7 +123,6 @@ const ExportImage: FC = () => {
 
         filename += '-whole-workflow'
 
-        // Restore original viewport after a delay
         setTimeout(() => {
           reactFlow.setViewport(currentViewport)
         }, 500)
@@ -142,11 +145,9 @@ const ExportImage: FC = () => {
       }
 
       if (currentWorkflow) {
-        // For whole workflow, show preview first
         setPreviewUrl(dataUrl)
         setPreviewTitle(`${filename}.${type}`)
 
-        // Also auto-download
         const link = document.createElement('a')
         link.href = dataUrl
         link.download = `${filename}.${type}`
@@ -181,14 +182,14 @@ const ExportImage: FC = () => {
       <PortalToFollowElem
         open={open}
         onOpenChange={setOpen}
-        placement="top-start"
+        placement="bottom-end"
         offset={{
-          mainAxis: 4,
-          crossAxis: -8,
+          mainAxis: -200,
+          crossAxis: crossAxisOffset,
         }}
       >
         <PortalToFollowElemTrigger>
-          <TipPopup title={t('workflow.common.exportImage')}>
+          <TipPopup title={t('workflow.common.moreActions')}>
             <div
               className={cn(
                 'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
@@ -196,13 +197,17 @@ const ExportImage: FC = () => {
               )}
               onClick={handleTrigger}
             >
-              <RiExportLine className='h-4 w-4' />
+              <RiMoreFill className='h-4 w-4' />
             </div>
           </TipPopup>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-10'>
           <div className='min-w-[180px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg'>
             <div className='p-1'>
+              <div className='flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary'>
+                <RiExportLine className='h-3 w-3' />
+                {t('workflow.common.exportImage')}
+              </div>
               <div className='px-2 py-1 text-xs font-medium text-text-tertiary'>
                 {t('workflow.common.currentView')}
               </div>
@@ -264,4 +269,4 @@ const ExportImage: FC = () => {
   )
 }
 
-export default memo(ExportImage)
+export default memo(MoreActions)