From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/workflow/panel/index.tsx | 78 +++++++++++++++++++++++++++++++++------
1 files changed, 66 insertions(+), 12 deletions(-)
diff --git a/app/components/workflow/panel/index.tsx b/app/components/workflow/panel/index.tsx
index 8e510f4..51cb170 100644
--- a/app/components/workflow/panel/index.tsx
+++ b/app/components/workflow/panel/index.tsx
@@ -1,34 +1,61 @@
import type { FC } from 'react'
import { memo } from 'react'
import { useNodes } from 'reactflow'
+import { useShallow } from 'zustand/react/shallow'
import type { CommonNodeType } from '../types'
import { Panel as NodePanel } from '../nodes'
import { useStore } from '../store'
+import {
+ useIsChatMode,
+} from '../hooks'
+import DebugAndPreview from './debug-and-preview'
+import Record from './record'
+import WorkflowPreview from './workflow-preview'
+import ChatRecord from './chat-record'
+import ChatVariablePanel from './chat-variable-panel'
import EnvPanel from './env-panel'
+import GlobalVariablePanel from './global-variable-panel'
import cn from '@/utils/classnames'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import MessageLogModal from '@/app/components/base/message-log-modal'
-export type PanelProps = {
- components?: {
- left?: React.ReactNode
- right?: React.ReactNode
- }
-}
-const Panel: FC<PanelProps> = ({
- components,
-}) => {
+const Panel: FC = () => {
const nodes = useNodes<CommonNodeType>()
+ const isChatMode = useIsChatMode()
const selectedNode = nodes.find(node => node.data.selected)
+ const historyWorkflowData = useStore(s => s.historyWorkflowData)
+ const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
const showEnvPanel = useStore(s => s.showEnvPanel)
+ const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
+ const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
const isRestoring = useStore(s => s.isRestoring)
+ const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({
+ currentLogItem: state.currentLogItem,
+ setCurrentLogItem: state.setCurrentLogItem,
+ showMessageLogModal: state.showMessageLogModal,
+ setShowMessageLogModal: state.setShowMessageLogModal,
+ currentLogModalActiveTab: state.currentLogModalActiveTab,
+ })))
return (
<div
tabIndex={-1}
- className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-none')}
+ className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
key={`${isRestoring}`}
>
{
- components?.left
+ showMessageLogModal && (
+ <MessageLogModal
+ fixedWidth
+ width={400}
+ currentLogItem={currentLogItem}
+ onCancel={() => {
+ setCurrentLogItem()
+ setShowMessageLogModal(false)
+ }}
+ defaultTab={currentLogModalActiveTab}
+ />
+ )
}
{
!!selectedNode && (
@@ -36,13 +63,40 @@
)
}
{
- components?.right
+ historyWorkflowData && !isChatMode && (
+ <Record />
+ )
+ }
+ {
+ historyWorkflowData && isChatMode && (
+ <ChatRecord />
+ )
+ }
+ {
+ showDebugAndPreviewPanel && isChatMode && (
+ <DebugAndPreview />
+ )
+ }
+ {
+ showDebugAndPreviewPanel && !isChatMode && (
+ <WorkflowPreview />
+ )
}
{
showEnvPanel && (
<EnvPanel />
)
}
+ {
+ showChatVariablePanel && (
+ <ChatVariablePanel />
+ )
+ }
+ {
+ showGlobalVariablePanel && (
+ <GlobalVariablePanel />
+ )
+ }
</div>
)
}
--
Gitblit v1.8.0