adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #941 from SuanmoSuanyangTechnology/feature/node_run

Browse Source 
Feature/node run
This commit is contained in:
yingzhao
2026-04-20 15:55:49 +08:00
committed by GitHub
parent 7f1cf13b23 1744b045fb
commit b4812cdac1
9 changed files with 116 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/Table/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-02 15:29:46
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-26 14:52:23
* @Last Modified time: 2026-04-14 17:55:15
*/
/**
* RbTable Component
@@ -27,7 +27,7 @@ import { useTranslation } from 'react-i18next';
import { request } from '@/utils/request';
import Empty from '@/components/Empty';
interface TablePaginationConfig { pagesize: number; page: number; }
interface TablePaginationConfig { pagesize?: number; page?: number; }
/** Props interface for Table component */
interface TableComponentProps<T = Record<string, unknown>, Q = Record<string, unknown>> extends Omit<TableProps<T>, 'pagination'> {
@@ -102,7 +102,7 @@ const RbTable = forwardRef(<T = Record<string, unknown>, Q = Record<string, unkn
const [loading, setLoading] = useState(false)
const [currentPagination, setCurrentPagination] = useState({
page: 1,
pagesize: 20,
pagesize: typeof pagination === 'object' ? (pagination.pagesize || 20) : 20,
});
const [total, setTotal] = useState(0);

8
web/src/store/workflow.ts
View File

@@ -6,11 +6,15 @@
*/
import { create } from 'zustand'
import type { NodeCheckResult } from '@/views/Workflow/components/CheckList'
import type { ChatItem } from '@/components/Chat/types'
interface WorkflowState {
checkResults: Record<string, NodeCheckResult[]>
setCheckResults: (appId: string, results: NodeCheckResult[]) => void
getCheckResults: (appId: string) => NodeCheckResult[]
chatHistoryMap: Record<string, ChatItem[]>
setChatHistory: (conversationId: string, history: ChatItem[]) => void
getChatHistory: (conversationId: string) => ChatItem[]
}
export const useWorkflowStore = create<WorkflowState>((set, get) => ({
@@ -18,4 +22,8 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
setCheckResults: (appId, results) =>
set(state => ({ checkResults: { ...state.checkResults, [appId]: results } })),
getCheckResults: (appId) => get().checkResults[appId] ?? [],
chatHistoryMap: {},
setChatHistory: (conversationId, history) =>
set(state => ({ chatHistoryMap: { ...state.chatHistoryMap, [conversationId]: history } })),
getChatHistory: (conversationId) => get().chatHistoryMap[conversationId] ?? [],
}))

1
web/src/views/Index/index.tsx
View File

@@ -120,6 +120,7 @@ const Index = () => {
rowKey="id"
bordered={false}
scrollY="100%"
pagination={{pagesize: 10}}
/>
</div>
</Flex>

17
web/src/views/Workflow/components/Chat/Chat.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-06 21:10:56
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-07 18:07:38
* @Last Modified time: 2026-04-15 15:57:35
*/
/**
* Workflow Chat Component
@@ -41,12 +41,15 @@ import type { ChatToolbarRef } from '@/components/Chat/ChatToolbar'
import Runtime from './Runtime';
import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';
import { replaceVariables } from '@/views/ApplicationConfig/Agent';
import { useWorkflowStore } from '@/store/workflow';
const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null; features?: FeaturesConfigForm }>(({
const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null; features?: FeaturesConfigForm }>(({ // eslint-disable-line
appId, graphRef, features
}, ref) => {
const { t } = useTranslation()
const { message: messageApi } = App.useApp()
const { setChatHistory } = useWorkflowStore()
const conversationIdRef = useRef<string>('draft')
const toolbarRef = useRef<ChatToolbarRef>(null)
const [toolbarReady, setToolbarReady] = useState(false)
const toolbarCallbackRef = useCallback((node: ChatToolbarRef | null) => {
@@ -118,6 +121,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
setChatList([])
setVariables([])
setConversationId(null)
conversationIdRef.current = 'draft'
setMessage(undefined)
toolbarRef.current?.setFiles([])
toolbarRef.current?.setVariables([])
@@ -189,7 +193,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
elapsed_time?: string;
error?: any;
state: Record<string, any>;
status?: 'completed' | 'failed',
status?: 'completed' | 'failed' | 'running',
citations?: {
document_id: string;
file_name: string;
@@ -231,6 +235,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
node_name: name,
node_type: type,
icon,
status: 'running',
content: {},
}
} else {
@@ -240,6 +245,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
node_name: name,
node_type: type,
icon,
status: 'running',
content: {},
})
}
@@ -344,6 +350,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
}
if (conversation_id && conversationId !== conversation_id) {
conversationIdRef.current = conversation_id
setConversationId(conversation_id)
}
})
@@ -440,6 +447,10 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
}
}, [chatList.length, features?.opening_statement, variables])
useEffect(() => {
setChatHistory(conversationIdRef.current, chatList)
}, [chatList])
return (
<RbDrawer
title={<Flex align="center" gap={10}>

45
web/src/views/Workflow/components/NodeLibrary.tsx
View File

@@ -34,29 +34,24 @@ const NodeLibrary: FC<{ collapsed: boolean; handleToggle: () => void }> = ({ col
>
<Flex vertical align={collapsed ? 'center' : undefined} gap={collapsed ? 8 : 16}>
{collapsed
? <>
{nodeLibrary.map(category => (
<>
{category.nodes
.filter(node => node.type !== 'cycle-start' && node.type !== 'break')
.map((node, nodeIndex) => (
<Tooltip key={nodeIndex} title={t(`workflow.${node.type}`)} placement="right">
<div
className="rb:p-2 rb:rounded-lg rb:hover:bg-[rgba(33,35,50,0.08)]"
draggable
onDragStart={(e) => {
e.dataTransfer.setData('application/reactflow', node.type);
e.dataTransfer.setData('application/json', JSON.stringify(node));
}}
>
<div className={`rb:size-6 rb:cursor-pointer rb:bg-cover ${node.icon}`} />
</div>
</Tooltip>
))
}
</>
))}
</>
? nodeLibrary.flatMap(category =>
category.nodes
.filter(node => node.type !== 'cycle-start' && node.type !== 'break')
.map(node => (
<Tooltip key={node.type} title={t(`workflow.${node.type}`)} placement="right">
<div
className="rb:p-2 rb:rounded-lg rb:hover:bg-[rgba(33,35,50,0.08)]"
draggable
onDragStart={(e) => {
e.dataTransfer.setData('application/reactflow', node.type);
e.dataTransfer.setData('application/json', JSON.stringify(node));
}}
>
<div className={`rb:size-6 rb:cursor-pointer rb:bg-cover ${node.icon}`} />
</div>
</Tooltip>
))
)
: nodeLibrary.map(category => (
<div
key={category.category}
@@ -65,9 +60,9 @@ const NodeLibrary: FC<{ collapsed: boolean; handleToggle: () => void }> = ({ col
<Flex gap={6} vertical>
{category.nodes
.filter(node => node.type !== 'cycle-start' && node.type !== 'break')
.map((node, nodeIndex) => (
.map((node) => (
<Flex
key={nodeIndex}
key={node.type}
align="center"
gap={8}
className="rb:rounded-xl rb:p-2! rb:border rb:border-[#EBEBEB] rb:cursor-pointer rb:hover:border rb:hover:border-[#171719]!"

17
web/src/views/Workflow/components/Nodes/ConditionNode.tsx
View File

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import type { ReactShapeConfig } from '@antv/x6-react-shape';
import { Flex } from 'antd';
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
import NodeTools from './NodeTools'
import { useVariableList } from '../Properties/hooks/useVariableList'
@@ -64,13 +65,23 @@ const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
return (
<div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-3 rb:border rb:rounded-2xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)]', {
'rb:border-[#171719]': data.isSelected,
'rb:border-[#FCFCFD]': !data.isSelected
'rb:border-[#171719]!': data.isSelected,
'rb:border-[#FCFCFD]': !data.isSelected,
'rb:border-[#369F21]!': !data.isSelected && data.executionStatus === 'completed',
'rb:border-[#FF5D34]!': !data.isSelected && data.executionStatus === 'failed',
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
<div className="rb:wrap-break-word rb:line-clamp-1 rb:flex-1">{data.name ?? t(`workflow.${data.type}`)}</div>
{data.executionStatus === 'completed'
? <CheckCircleFilled style={{ color: '#369F21', fontSize: 16 }} />
: data.executionStatus === 'failed'
? <CloseCircleFilled style={{ color: '#FF5D34', fontSize: 16 }} />
: data.executionStatus === 'running'
? <LoadingOutlined style={{ color: '#5B6167', fontSize: 16 }} />
: null
}
</Flex>
{data.type === 'question-classifier' &&

15
web/src/views/Workflow/components/Nodes/LoopNode.tsx
View File

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import type { ReactShapeConfig } from '@antv/x6-react-shape';
import { Flex } from 'antd';
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
import { graphNodeLibrary, edgeAttrs } from '../../constant';
import NodeTools from './NodeTools'
@@ -131,12 +132,22 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
return (
<div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-3 rb:border rb:rounded-2xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)]', {
'rb:border-[#171719]': data.isSelected,
'rb:border-[#FCFCFD]': !data.isSelected
'rb:border-[#FCFCFD]': !data.isSelected,
'rb:border-[#369F21]!': !data.isSelected && data.executionStatus === 'completed',
'rb:border-[#FF5D34]!': !data.isSelected && data.executionStatus === 'failed',
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
<div className="rb:wrap-break-word rb:line-clamp-1 rb:flex-1">{data.name ?? t(`workflow.${data.type}`)}</div>
{data.executionStatus === 'completed'
? <CheckCircleFilled style={{ color: '#369F21', fontSize: 16 }} />
: data.executionStatus === 'failed'
? <CloseCircleFilled style={{ color: '#FF5D34', fontSize: 16 }} />
: data.executionStatus === 'running'
? <LoadingOutlined style={{ color: '#5B6167', fontSize: 16 }} />
: null
}
</Flex>
<div className="rb:mt-3 rb:min-h-[calc(100%-36px)] rb:w-full rb:bg-[radial-gradient(circle,#939AB1_1px,#F0F3F8_1px)] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:rounded-[10px] rb:bg-size-[12px_12px]"></div>
</div>

17
web/src/views/Workflow/components/Nodes/NormalNode.tsx
View File

@@ -2,6 +2,7 @@ import clsx from 'clsx';
import { useTranslation } from 'react-i18next'
import type { ReactShapeConfig } from '@antv/x6-react-shape';
import { Flex } from 'antd';
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
import NodeTools from './NodeTools'
@@ -11,13 +12,23 @@ const NormalNode: ReactShapeConfig['component'] = ({ node }) => {
return (
<div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-3 rb:border rb:rounded-2xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)]', {
'rb:border-[#171719]': data.isSelected,
'rb:border-[#FCFCFD]': !data.isSelected
'rb:border-[#171719]!': data.isSelected,
'rb:border-[#FCFCFD]': !data.isSelected,
'rb:border-[#369F21]!': !data.isSelected && data.executionStatus === 'completed',
'rb:border-[#FF5D34]!': !data.isSelected && data.executionStatus === 'failed',
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
<div className="rb:wrap-break-word rb:line-clamp-1 rb:flex-1">{data.name ?? t(`workflow.${data.type}`)}</div>
{data.executionStatus === 'completed'
? <CheckCircleFilled style={{ color: '#369F21', fontSize: 16 }} />
: data.executionStatus === 'failed'
? <CloseCircleFilled style={{ color: '#FF5D34', fontSize: 16 }} />
: data.executionStatus === 'running'
? <LoadingOutlined style={{ color: '#5B6167', fontSize: 16 }} />
: null
}
</Flex>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-3">{t('workflow.clickToConfigure')}</div>

30
web/src/views/Workflow/hooks/useWorkflowGraph.ts
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 15:17:48
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-14 17:43:14
* @Last Modified time: 2026-04-15 16:02:49
*/
import { Clipboard, Graph, Keyboard, MiniMap, Node, Snapline, type Edge } from '@antv/x6';
import { register } from '@antv/x6-react-shape';
@@ -18,6 +18,7 @@ import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';
import { conditionNodeHeight, conditionNodeItemHeight, conditionNodePortItemArgsY, defaultAbsolutePortGroups, defaultPortItems, edgeAttrs, edgeHoverTool, edge_color, edge_selected_color, edge_width, graphNodeLibrary, nodeLibrary, nodeRegisterLibrary, nodeWidth, notesConfig, portAttrs, portItemArgsY, portMarkup, portTextAttrs, unknownNode } from '../constant';
import type { ChatVariable, NodeProperties, WorkflowConfig } from '../types';
import { calcConditionNodeTotalHeight, getConditionNodeCasePortY } from '../utils';
import { useWorkflowStore } from '@/store/workflow';
/**
* Props for useWorkflowGraph hook
@@ -94,6 +95,8 @@ export const useWorkflowGraph = ({
const { message } = App.useApp();
const { t } = useTranslation()
const { user } = useUser();
const { chatHistoryMap } = useWorkflowStore()
const chatHistory = Object.values(chatHistoryMap).at(-1) ?? []
// Refs
const graphRef = useRef<Graph>();
@@ -1446,6 +1449,31 @@ export const useWorkflowGraph = ({
}
}
}
useEffect(() => {
if (!graphRef.current) return;
const nodes = graphRef.current.getNodes();
const lastWithSub = [...chatHistory].reverse().find(item => item.subContent?.length);
// Reset all node execution status first
nodes.forEach(node => {
const data = node.getData();
if (typeof data.status === 'string') {
node.setData({ ...data, executionStatus: undefined });
}
});
if (!lastWithSub?.subContent) return;
// Build a nodeId -> status map first
const statusMap: Record<string, string> = {};
lastWithSub.subContent.forEach(sub => {
if (typeof sub.status === 'string') {
statusMap[sub.node_id] = sub.status;
const node = nodes.find(n => n.getData()?.id === sub.node_id);
if (node) {
node.setData({ ...node.getData(), executionStatus: sub.status });
}
}
});
}, [chatHistory, graphRef.current]);
return {
config,