youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 10:28:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
StyleZhang
2024-03-20 13:49:02 +08:00
parent 2a75258836
commit 2697454a8e
22 changed files with 390 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/workflow/panel/chat-record/index.tsx
View File

@ -17,7 +17,8 @@ const ChatRecord = () => {
const [fetched, setFetched] = useState(false)
const [chatList, setChatList] = useState([])
const appDetail = useAppStore(s => s.appDetail)
const currentConversationID = useStore(s => s.currentConversationID)
const historyWorkflowData = useStore(s => s.historyWorkflowData)
const currentConversationID = historyWorkflowData?.conversation_id
const chatMessageList = useMemo(() => {
const res: ChatItem[] = []

7
web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
View File

@ -33,7 +33,6 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
const workflowStore = useWorkflowStore()
const featuresStore = useFeaturesStore()
const inputs = useStore(s => s.inputs)
const workflowRunId = useStore(s => s.workflowRunId)
const { handleStopRun } = useWorkflowRun()
const features = featuresStore!.getState().features
@ -84,8 +83,8 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
const doStop = useCallback(() => {
handleStop()
handleStopRun()
}, [handleStop, handleStopRun])
handleStopRun(workflowStore.getState().workflowRunningData?.task_id || '')
}, [handleStop, handleStopRun, workflowStore])
useImperativeHandle(ref, () => {
return {
@ -96,7 +95,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
return (
<Chat
config={config as any}
chatList={chatList.map(item => ({ ...item, workflow_run_id: workflowRunId }))}
chatList={chatList}
isResponding={isResponding}
chatContainerclassName='px-4'
chatContainerInnerClassName='pt-6'

47
web/app/components/workflow/panel/index.tsx
View File

@ -13,30 +13,37 @@ import DebugAndPreview from './debug-and-preview'
import RunHistory from './run-history'
import Record from './record'
import InputsPanel from './inputs-panel'
import WorkflowPreview from './workflow-preview'
import { useStore as useAppStore } from '@/app/components/app/store'
import MessageLogModal from '@/app/components/base/message-log-modal'
const Panel: FC = () => {
const nodes = useNodes<CommonNodeType>()
const isChatMode = useIsChatMode()
const runningStatus = useStore(s => s.runningStatus)
const workflowRunId = useStore(s => s.workflowRunId)
const selectedNode = nodes.find(node => node.data.selected)
const showRunHistory = useStore(state => state.showRunHistory)
const showInputsPanel = useStore(s => s.showInputsPanel)
const currentConversationID = useStore(s => s.currentConversationID)
const workflowRunningData = useStore(s => s.workflowRunningData)
const historyWorkflowData = useStore(s => s.historyWorkflowData)
const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal } = useAppStore()
const {
showWorkflowInfoPanel,
showNodePanel,
showDebugAndPreviewPanel,
showWorkflowPreview,
} = useMemo(() => {
return {
showWorkflowInfoPanel: !selectedNode && !runningStatus,
showNodePanel: !!selectedNode && !runningStatus,
showDebugAndPreviewPanel: isChatMode && runningStatus && !currentConversationID,
showWorkflowInfoPanel: !selectedNode && !workflowRunningData && !historyWorkflowData,
showNodePanel: !!selectedNode && !workflowRunningData && !historyWorkflowData,
showDebugAndPreviewPanel: isChatMode && workflowRunningData && !historyWorkflowData,
showWorkflowPreview: !isChatMode && workflowRunningData && !historyWorkflowData,
}
}, [selectedNode, isChatMode, runningStatus, currentConversationID])
}, [
selectedNode,
isChatMode,
workflowRunningData,
historyWorkflowData,
])
return (
<div
@ -45,11 +52,6 @@ const Panel: FC = () => {
${(showRunHistory || showDebugAndPreviewPanel) && '!pr-0'}
`}
>
{
showInputsPanel && (
<InputsPanel />
)
}
{
showMessageLogModal && (
<MessageLogModal
@ -64,13 +66,23 @@ const Panel: FC = () => {
)
}
{
runningStatus && !isChatMode && workflowRunId && (
historyWorkflowData && (
<Record />
)
}
{
runningStatus && isChatMode && showRunHistory && currentConversationID && (
<Record />
showDebugAndPreviewPanel && (
<DebugAndPreview />
)
}
{
showInputsPanel && (
<InputsPanel />
)
}
{
showWorkflowPreview && (
<WorkflowPreview />
)
}
{
@ -83,11 +95,6 @@ const Panel: FC = () => {
<WorkflowInfo />
)
}
{
showDebugAndPreviewPanel && (
<DebugAndPreview />
)
}
{
showRunHistory && (
<RunHistory />

7
web/app/components/workflow/panel/record.tsx
View File

@ -6,8 +6,7 @@ import ChatRecord from './chat-record'
const Record = () => {
const isChatMode = useIsChatMode()
const currentSequenceNumber = useStore(s => s.currentSequenceNumber)
const workflowRunId = useStore(s => s.workflowRunId)
const historyWorkflowData = useStore(s => s.historyWorkflowData)
return (
<div className={`
@ -15,12 +14,12 @@ const Record = () => {
${isChatMode ? 'w-[320px]' : 'w-[400px]'}
`}>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
{`Test ${isChatMode ? 'Chat' : 'Run'}#${currentSequenceNumber}`}
{`Test ${isChatMode ? 'Chat' : 'Run'}#${historyWorkflowData?.sequence_number}`}
</div>
{
isChatMode
? <ChatRecord />
: <Run runID={workflowRunId} />
: <Run runID={historyWorkflowData?.id || ''} />
}
</div>
)

16
web/app/components/workflow/panel/run-history.tsx
View File

@ -11,7 +11,7 @@ import {
import { CheckCircle, XClose } from '@/app/components/base/icons/src/vender/line/general'
import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import {
useStore as useRunHistoryStore,
useStore,
useWorkflowStore,
} from '@/app/components/workflow/store'
import { useStore as useAppStore } from '@/app/components/app/store'
@ -25,7 +25,7 @@ const RunHistory = () => {
const { formatTimeFromNow } = useWorkflow()
const { handleBackupDraft } = useWorkflowRun()
const workflowStore = useWorkflowStore()
const workflowRunId = useRunHistoryStore(state => state.workflowRunId)
const historyWorkflowData = useStore(s => s.historyWorkflowData)
const { data: runList, isLoading: runListLoading } = useSWR((appDetail && !isChatMode) ? `/apps/${appDetail.id}/workflow-runs` : null, fetchWorkflowRunHistory)
const { data: chatList, isLoading: chatListLoading } = useSWR((appDetail && isChatMode) ? `/apps/${appDetail.id}/advanced-chat/workflow-runs` : null, fetcChatRunHistory)
@ -45,8 +45,7 @@ const RunHistory = () => {
onClick={() => {
workflowStore.setState({
showRunHistory: false,
workflowRunId: '',
currentConversationID: '',
historyWorkflowData: undefined,
})
setCurrentLogItem()
setShowMessageLogModal(false)
@ -69,14 +68,11 @@ const RunHistory = () => {
key={item.id}
className={cn(
'flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer',
item.id === workflowRunId && 'bg-primary-50',
item.id === historyWorkflowData?.id && 'bg-primary-50',
)}
onClick={() => {
workflowStore.setState({
currentSequenceNumber: item.sequence_number,
workflowRunId: item.id,
currentConversationID: item.conversation_id,
runningStatus: item.status as WorkflowRunningStatus,
historyWorkflowData: item,
})
handleBackupDraft()
}}
@ -95,7 +91,7 @@ const RunHistory = () => {
<div
className={cn(
'flex items-center text-[13px] font-medium leading-[18px]',
item.id === workflowRunId && 'text-primary-600',
item.id === historyWorkflowData?.id && 'text-primary-600',
)}
>
{`Test ${isChatMode ? 'Chat' : 'Run'}#${item.sequence_number}`}

67
web/app/components/workflow/panel/workflow-preview.tsx Normal file
View File

@ -0,0 +1,67 @@
import {
memo,
useState,
} from 'react'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import ResultPanel from '../run/result-panel'
import TracingPanel from '../run/tracing-panel'
import { useStore } from '../store'
const WorkflowPreview = () => {
const { t } = useTranslation()
const [currentTab, setCurrentTab] = useState<string>('TRACING')
const workflowRunningData = useStore(s => s.workflowRunningData)
const switchTab = async (tab: string) => {
setCurrentTab(tab)
}
return (
<div className={`
flex flex-col w-[420px] h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
`}>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
Test Run#${workflowRunningData?.result.sequence_number}
</div>
<div>
<div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
)}
onClick={() => switchTab('RESULT')}
>{t('runLog.result')}</div>
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
)}
onClick={() => switchTab('TRACING')}
>{t('runLog.tracing')}</div>
</div>
{currentTab === 'RESULT' && (
<ResultPanel
inputs={workflowRunningData?.result?.inputs}
outputs={workflowRunningData?.result?.outputs}
status={workflowRunningData?.result?.status || ''}
error={workflowRunningData?.result?.error}
elapsed_time={workflowRunningData?.result?.elapsed_time}
total_tokens={workflowRunningData?.result?.total_tokens}
created_at={workflowRunningData?.result?.created_at}
created_by={''}
steps={workflowRunningData?.result?.total_steps}
/>
)}
{currentTab === 'TRACING' && (
<TracingPanel
list={workflowRunningData?.tracing || []}
/>
)}
</div>
</div>
)
}
export default memo(WorkflowPreview)