hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-11 03:46:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat/environment variables in workflow (#6515)

Browse Source 
Co-authored-by: JzoNg <jzongcode@gmail.com>
This commit is contained in:
-LAN-
2024-07-22 15:29:39 +08:00
committed by GitHub
parent 87d583f454
commit 5e6fc58db3
146 changed files with 2486 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/components/workflow/header/checklist.tsx
View File

@@ -57,22 +57,15 @@ const WorkflowChecklist = ({
<PortalToFollowElemTrigger onClick={() => !disabled && setOpen(v => !v)}>
<div
className={cn(
'relative flex items-center justify-center p-0.5 w-8 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs',
'relative ml-0.5 flex items-center justify-center w-7 h-7 rounded-md',
disabled && 'opacity-50 cursor-not-allowed',
)}
>
<div
className={`
group flex items-center justify-center w-full h-full rounded-md cursor-pointer
hover:bg-primary-50
${open && 'bg-primary-50'}
`}
className={cn('group flex items-center justify-center w-full h-full rounded-md cursor-pointer hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
>
<RiListCheck3
className={`
w-4 h-4 group-hover:text-primary-600
${open ? 'text-primary-600' : 'text-gray-500'}`
}
className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
/>
</div>
{

22
web/app/components/workflow/header/env-button.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { memo } from 'react'
import { Env } from '@/app/components/base/icons/src/vender/line/others'
import { useStore } from '@/app/components/workflow/store'
import cn from '@/utils/classnames'
const EnvButton = () => {
const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
const handleClick = () => {
setShowEnvPanel(true)
setShowDebugAndPreviewPanel(false)
}
return (
<div className={cn('relative flex items-center justify-center p-0.5 w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs cursor-pointer hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover')} onClick={handleClick}>
<Env className='w-4 h-4 text-components-button-secondary-text' />
</div>
)
}
export default memo(EnvButton)

31
web/app/components/workflow/header/index.tsx
View File

@@ -4,6 +4,7 @@ import {
useCallback,
useMemo,
} from 'react'
import { RiApps2AddLine } from '@remixicon/react'
import { useNodes } from 'reactflow'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
@@ -30,8 +31,7 @@ import EditingTitle from './editing-title'
import RunningTitle from './running-title'
import RestoringTitle from './restoring-title'
import ViewHistory from './view-history'
import Checklist from './checklist'
import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
import EnvButton from './env-button'
import Button from '@/app/components/base/button'
import { useStore as useAppStore } from '@/app/components/app/store'
import { publishWorkflow } from '@/service/workflow'
@@ -44,10 +44,7 @@ const Header: FC = () => {
const appDetail = useAppStore(s => s.appDetail)
const appSidebarExpand = useAppStore(s => s.appSidebarExpand)
const appID = appDetail?.id
const {
nodesReadOnly,
getNodesReadOnly,
} = useNodesReadOnly()
const { getNodesReadOnly } = useNodesReadOnly()
const publishedAt = useStore(s => s.publishedAt)
const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
const toolPublished = useStore(s => s.toolPublished)
@@ -167,14 +164,12 @@ const Header: FC = () => {
</div>
{
normal && (
<div className='flex items-center'>
<div className='flex items-center gap-2'>
<EnvButton />
<div className='w-[1px] h-3.5 bg-gray-200'></div>
<RunAndHistory />
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
<Button
className='mr-2'
onClick={handleShowFeatures}
>
<Grid01 className='w-4 h-4 mr-1 text-gray-500' />
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
<RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
{t('workflow.common.features')}
</Button>
<AppPublisher
@@ -188,11 +183,9 @@ const Header: FC = () => {
onPublish,
onRestore: onStartRestoring,
onToggle: onPublisherToggle,
crossAxisOffset: 53,
crossAxisOffset: 4,
}}
/>
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
<Checklist disabled={nodesReadOnly} />
</div>
)
}
@@ -215,10 +208,8 @@ const Header: FC = () => {
{
restoring && (
<div className='flex items-center'>
<Button
onClick={handleShowFeatures}
>
<Grid01 className='w-4 h-4 mr-1 text-gray-500' />
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
<RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
{t('workflow.common.features')}
</Button>
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>

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

@@ -3,21 +3,22 @@ import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiLoader2Line,
RiPlayLargeFill,
RiPlayLargeLine,
} from '@remixicon/react'
import { useStore } from '../store'
import {
useIsChatMode,
useNodesReadOnly,
useWorkflowRun,
useWorkflowStartRun,
} from '../hooks'
import { WorkflowRunningStatus } from '../types'
import ViewHistory from './view-history'
import Checklist from './checklist'
import cn from '@/utils/classnames'
import {
StopCircle,
} from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
import { MessagePlay } from '@/app/components/base/icons/src/vender/line/communication'
const RunMode = memo(() => {
const { t } = useTranslation()
@@ -30,9 +31,9 @@ const RunMode = memo(() => {
<>
<div
className={cn(
'flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600',
'hover:bg-primary-50 cursor-pointer',
isRunning && 'bg-primary-50 !cursor-not-allowed',
'flex items-center px-2.5 h-7 rounded-md text-[13px] font-medium text-components-button-secondary-accent-text',
'hover:bg-state-accent-hover cursor-pointer',
isRunning && 'bg-state-accent-hover !cursor-not-allowed',
)}
onClick={() => handleWorkflowStartRunInWorkflow()}
>
@@ -46,7 +47,7 @@ const RunMode = memo(() => {
)
: (
<>
<RiPlayLargeFill className='mr-1 w-4 h-4' />
<RiPlayLargeLine className='mr-1 w-4 h-4' />
{t('workflow.common.run')}
</>
)
@@ -58,7 +59,7 @@ const RunMode = memo(() => {
className='flex items-center justify-center ml-0.5 w-7 h-7 cursor-pointer hover:bg-black/5 rounded-md'
onClick={() => handleStopRun(workflowRunningData?.task_id || '')}
>
<StopCircle className='w-4 h-4 text-gray-500' />
<StopCircle className='w-4 h-4 text-components-button-ghost-text' />
</div>
)
}
@@ -74,12 +75,12 @@ const PreviewMode = memo(() => {
return (
<div
className={cn(
'flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600',
'hover:bg-primary-50 cursor-pointer',
'flex items-center px-2.5 h-7 rounded-md text-[13px] font-medium text-components-button-secondary-accent-text',
'hover:bg-state-accent-hover cursor-pointer',
)}
onClick={() => handleWorkflowStartRunInChatflow()}
>
<MessagePlay className='mr-1 w-4 h-4' />
<RiPlayLargeLine className='mr-1 w-4 h-4' />
{t('workflow.common.debugAndPreview')}
</div>
)
@@ -88,17 +89,19 @@ PreviewMode.displayName = 'PreviewMode'
const RunAndHistory: FC = () => {
const isChatMode = useIsChatMode()
const { nodesReadOnly } = useNodesReadOnly()
return (
<div className='flex items-center px-0.5 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs'>
<div className='flex items-center px-0.5 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs'>
{
!isChatMode && <RunMode />
}
{
isChatMode && <PreviewMode />
}
<div className='mx-0.5 w-[0.5px] h-8 bg-gray-200'></div>
<div className='mx-0.5 w-[1px] h-3.5 bg-divider-regular'></div>
<ViewHistory />
<Checklist disabled={nodesReadOnly} />
</div>
)
}

8
web/app/components/workflow/header/view-history.tsx
View File

@@ -103,16 +103,13 @@ const ViewHistory = ({
popupContent={t('workflow.common.viewRunHistory')}
>
<div
className={`
flex items-center justify-center w-7 h-7 rounded-md hover:bg-black/5 cursor-pointer
${open && 'bg-primary-50'}
`}
className={cn('group flex items-center justify-center w-7 h-7 rounded-md hover:bg-state-accent-hover cursor-pointer', open && 'bg-state-accent-hover')}
onClick={() => {
setCurrentLogItem()
setShowMessageLogModal(false)
}}
>
<ClockPlay className={`w-4 h-4 ${open ? 'text-primary-600' : 'text-gray-500'}`} />
<ClockPlay className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
</div>
</TooltipPlus>
)
@@ -170,6 +167,7 @@ const ViewHistory = ({
workflowStore.setState({
historyWorkflowData: item,
showInputsPanel: false,
showEnvPanel: false,
})
handleBackupDraft()
setOpen(false)