chat mode

web/app/components/workflow/block-selector/tabs.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { groupBy } from 'lodash-es'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
+import { useIsChatMode } from '../hooks'
 import { BLOCK_CLASSIFICATIONS } from './constants'
 import {
   useBlocks,
@@ -15,7 +16,6 @@ import {
 import type { ToolDefaultValue } from './types'
 import { TabsEnum } from './types'
 import Tools from './tools'
-import { useStore as useAppStore } from '@/app/components/app/store'
 
 export type TabsProps = {
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
@@ -24,7 +24,7 @@ const Tabs: FC<TabsProps> = ({
   onSelect,
 }) => {
   const { t } = useTranslation()
-  const appDetail = useAppStore(state => state.appDetail)
+  const isChatMode = useIsChatMode()
   const blocks = useBlocks()
   const tabs = useTabs()
   const [activeTab, setActiveTab] = useState(tabs[0].key)
@@ -65,7 +65,7 @@ const Tabs: FC<TabsProps> = ({
                   }
                   {
                     groupBy(blocks, 'classification')[classification].filter((block) => {
-                      if (block.type === BlockEnum.DirectAnswer && appDetail?.mode === 'workflow')
+                      if (block.type === BlockEnum.DirectAnswer && !isChatMode)
                         return false
 
                       return true

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

@@ -5,6 +5,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '../store'
+import { useIsChatMode } from '../hooks'
 import RunAndHistory from './run-and-history'
 import EditingTitle from './editing-title'
 import RunningTitle from './running-title'
@@ -18,6 +19,7 @@ import { Mode } from '@/app/components/workflow/types'
 const Header: FC = () => {
   const { t } = useTranslation()
   const appDetail = useAppStore(state => state.appDetail)
+  const isChatMode = useIsChatMode()
   const mode = useStore(state => state.mode)
   const runTaskId = useStore(state => state.runTaskId)
 
@@ -59,7 +61,7 @@ const Header: FC = () => {
         <RunAndHistory />
         <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
         {
-          appDetail?.mode === 'advanced-chat' && (
+          isChatMode && (
             <Button
               className={`
                 mr-2 px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700

web/app/components/workflow/header/run-and-history.tsx

@@ -2,16 +2,16 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '../store'
+import { useIsChatMode } from '../hooks'
 import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Mode } from '@/app/components/workflow/types'
-import { useStore as useAppStore } from '@/app/components/app/store'
 
 const RunAndHistory: FC = () => {
   const { t } = useTranslation()
-  const appDetail = useAppStore(state => state.appDetail)
+  const isChatMode = useIsChatMode()
   const mode = useStore(state => state.mode)
   const showRunHistory = useStore(state => state.showRunHistory)
 
@@ -22,7 +22,7 @@ const RunAndHistory: FC = () => {
           flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
           hover:bg-primary-50 cursor-pointer
           ${mode === 'running' && 'bg-primary-50 !cursor-not-allowed'}
-          ${mode === 'running' && appDetail?.mode !== 'workflow' && 'opacity-50'}
+          ${mode === 'running' && isChatMode && 'opacity-50'}
         `}
         onClick={() => mode !== 'running' && useStore.setState({ mode: Mode.Running })}
       >
@@ -31,12 +31,12 @@ const RunAndHistory: FC = () => {
             ? (
               <>
                 {
-                  appDetail?.mode === 'workflow' && (
+                  !isChatMode && (
                     <Loading02 className='mr-1 w-4 h-4 animate-spin' />
                   )
                 }
                 {
-                  appDetail?.mode === 'workflow'
+                  !isChatMode
                     ? t('workflow.common.running')
                     : t('workflow.common.inPreview')
                 }
@@ -46,7 +46,7 @@ const RunAndHistory: FC = () => {
               <>
                 <Play className='mr-1 w-4 h-4' />
                 {
-                  appDetail?.mode === 'workflow'
+                  !isChatMode
                     ? t('workflow.common.run')
                     : t('workflow.common.preview')
                 }

web/app/components/workflow/hooks.ts

@@ -27,6 +27,12 @@ import { syncWorkflowDraft } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
+export const useIsChatMode = () => {
+  const appDetail = useAppStore(s => s.appDetail)
+
+  return appDetail?.mode === 'advanced-chat'
+}
+
 export const useNodesInitialData = () => {
   const { t } = useTranslation()
 

web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx

@@ -13,6 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import type { Node } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
 
 type PanelOperatorProps = {
   id: string
@@ -61,15 +62,21 @@ const PanelOperator = ({
               {t('workflow.panel.helpLink')}
             </div>
           </div>
-          <div className='h-[1px] bg-gray-100'></div>
-          <div className='p-1'>
-            <div
-              className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
-              onClick={() => handleNodeDelete(id)}
-            >
-              {t('common.operation.delete')}
-            </div>
-          </div>
+          {
+            data.type !== BlockEnum.Start && (
+              <>
+                <div className='h-[1px] bg-gray-100'></div>
+                <div className='p-1'>
+                  <div
+                    className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                    onClick={() => handleNodeDelete(id)}
+                  >
+                    {t('common.operation.delete')}
+                  </div>
+                </div>
+              </>
+            )
+          }
           <div className='h-[1px] bg-gray-100'></div>
           <div className='p-1'>
             <div className='px-3 py-2 text-xs text-gray-500'>

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

 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import ZoomInOut from './zoom-in-out'
 import { OrganizeGrid } from '@/app/components/base/icons/src/vender/line/layout'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 const Operator = () => {
+  const { t } = useTranslation()
+
   return (
     <div className={`
       absolute left-6 bottom-6 flex items-center p-0.5 
       rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500 z-10
     `}>
       <ZoomInOut />
-      <TooltipPlus popupContent='Organize blocks'>
+      <TooltipPlus popupContent={t('workflow.panel.organizeBlocks')}>
         <div className='ml-[1px] flex items-center justify-center w-8 h-8 cursor-pointer hover:bg-black/5 rounded-lg'>
           <OrganizeGrid className='w-4 h-4' />
         </div>

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

@@ -7,14 +7,14 @@ import { useNodes } from 'reactflow'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
+import { useIsWorkflow } from '../hooks'
 import WorkflowInfo from './workflow-info'
 import DebugAndPreview from './debug-and-preview'
 import RunHistory from './run-history'
 import Record from './record'
-import { useStore as useAppStore } from '@/app/components/app/store'
 
 const Panel: FC = () => {
-  const appDetail = useAppStore(state => state.appDetail)
+  const isWorkflow = useIsWorkflow()
   const runTaskId = useStore(state => state.runTaskId)
   const nodes = useNodes<CommonNodeType>()
   const selectedNode = nodes.find(node => node.data._selected)
@@ -25,11 +25,11 @@ const Panel: FC = () => {
     showDebugAndPreviewPanel,
   } = useMemo(() => {
     return {
-      showWorkflowInfoPanel: appDetail?.mode === 'workflow' && !selectedNode && !runTaskId,
+      showWorkflowInfoPanel: isWorkflow && !selectedNode && !runTaskId,
       showNodePanel: !!selectedNode && !runTaskId,
-      showDebugAndPreviewPanel: appDetail?.mode === 'advanced-chat' && !selectedNode && !runTaskId,
+      showDebugAndPreviewPanel: !isWorkflow && !selectedNode && !runTaskId,
     }
-  }, [selectedNode, appDetail, runTaskId])
+  }, [selectedNode, isWorkflow, runTaskId])
 
   return (
     <div className='absolute top-14 right-0 bottom-2 flex z-10'>

web/i18n/en-US/workflow.ts

@@ -64,6 +64,7 @@ const translation = {
     runThisStep: 'Run this step',
     checklist: 'Checklist',
     checklistTip: 'Make sure all issues are resolved before publishing',
+    organizeBlocks: 'Organize blocks',
   },
   nodes: {
     common: {

web/i18n/zh-Hans/workflow.ts

@@ -64,6 +64,7 @@ const translation = {
     runThisStep: '运行此步骤',
     checklist: '检查清单',
     checklistTip: '发布前确保所有问题均已解决',
+    organizeBlocks: '整理节点',
   },
   nodes: {
     common: {