Add entity_list plus button checks for live mode

This commit is contained in:
akhisud3195 2025-09-12 21:39:17 +04:00
parent 1f6db7c0e6
commit 96886d3f20
2 changed files with 140 additions and 51 deletions

View file

@ -55,6 +55,7 @@ interface EntityListProps {
name: string;
} | null;
startAgentName: string | null;
isLive?: boolean;
onSelectAgent: (name: string) => void;
onSelectTool: (name: string) => void;
onSelectPrompt: (name: string) => void;
@ -63,6 +64,10 @@ interface EntityListProps {
onAddAgent: (agent: Partial<z.infer<typeof WorkflowAgent>>) => void;
onAddTool: (tool: Partial<z.infer<typeof WorkflowTool>>) => void;
onAddPrompt: (prompt: Partial<z.infer<typeof WorkflowPrompt>>) => void;
onShowAddDataSourceModal?: () => void;
onShowAddVariableModal?: () => void;
onShowAddAgentModal?: () => void;
onShowAddToolModal?: () => void;
onUpdatePrompt: (name: string, prompt: Partial<z.infer<typeof WorkflowPrompt>>) => void;
onAddPromptFromModal: (prompt: Partial<z.infer<typeof WorkflowPrompt>>) => void;
onUpdatePromptFromModal: (name: string, prompt: Partial<z.infer<typeof WorkflowPrompt>>) => void;
@ -315,6 +320,7 @@ interface PipelineCardProps {
onSetMainAgent: (name: string) => void;
selectedRef: React.RefObject<HTMLDivElement | null>;
startAgentName: string | null;
isLive?: boolean;
dragHandle?: React.ReactNode;
}
@ -330,6 +336,7 @@ const PipelineCard = ({
onSetMainAgent,
selectedRef,
startAgentName,
isLive,
dragHandle,
}: PipelineCardProps) => {
// Get agents that belong to this pipeline
@ -474,7 +481,12 @@ const PipelineCard = ({
};
export const EntityList = forwardRef<
{ openDataSourcesModal: () => void },
{
openDataSourcesModal: () => void;
openAddVariableModal: () => void;
openAddAgentModal: () => void;
openAddToolModal: () => void;
},
EntityListProps & {
projectId: string,
onReorderAgents: (agents: z.infer<typeof WorkflowAgent>[]) => void
@ -488,6 +500,7 @@ export const EntityList = forwardRef<
workflow,
selectedEntity,
startAgentName,
isLive,
onSelectAgent,
onSelectTool,
onSelectPrompt,
@ -496,6 +509,10 @@ export const EntityList = forwardRef<
onAddAgent,
onAddTool,
onAddPrompt,
onShowAddDataSourceModal,
onShowAddVariableModal,
onShowAddAgentModal,
onShowAddToolModal,
onUpdatePrompt,
onAddPromptFromModal,
onUpdatePromptFromModal,
@ -701,6 +718,15 @@ export const EntityList = forwardRef<
useImperativeHandle(ref, () => ({
openDataSourcesModal: () => {
setShowDataSourcesModal(true);
},
openAddVariableModal: () => {
setShowAddVariableModal(true);
},
openAddAgentModal: () => {
setShowAgentTypeModal(true);
},
openAddToolModal: () => {
setShowToolsModal(true);
}
}));
@ -755,17 +781,17 @@ export const EntityList = forwardRef<
<Eye className="w-4 h-4" />
</Button>
)}
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, agents: true }));
setShowAgentTypeModal(true);
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Agent"
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, agents: true }));
onShowAddAgentModal?.();
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Agent"
>
<PlusIcon className="w-4 h-4" />
</Button>
@ -803,6 +829,7 @@ export const EntityList = forwardRef<
onSetMainAgent={onSetMainAgent}
selectedRef={selectedRef}
startAgentName={startAgentName}
isLive={isLive}
/>
))}
</SortableContext>
@ -891,17 +918,17 @@ export const EntityList = forwardRef<
<span>Tools</span>
</div>
<div className="flex items-center gap-1">
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, tools: true }));
setShowToolsModal(true);
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Tool"
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, tools: true }));
onShowAddToolModal?.();
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Tool"
>
<PlusIcon className="w-4 h-4" />
</Button>
@ -1039,17 +1066,17 @@ export const EntityList = forwardRef<
<span>Data</span>
</div>
<div className="flex items-center gap-1">
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, data: true }));
setShowDataSourcesModal(true);
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Data Source"
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, data: true }));
onShowAddDataSourceModal?.();
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Data Source"
>
<PlusIcon className="w-4 h-4" />
</Button>
@ -1190,17 +1217,17 @@ export const EntityList = forwardRef<
<PenLine className="w-4 h-4" />
<span>Variables</span>
</div>
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, prompts: true }));
setShowAddVariableModal(true);
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Variable"
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, prompts: true }));
onShowAddVariableModal?.();
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Variable"
>
<PlusIcon className="w-4 h-4" />
</Button>
@ -1737,7 +1764,8 @@ const SortablePipelineItem = ({
onAddAgentToPipeline,
onSetMainAgent,
selectedRef,
startAgentName
startAgentName,
isLive
}: {
pipeline: z.infer<typeof WorkflowPipeline>;
agents: z.infer<typeof WorkflowAgent>[];
@ -1753,6 +1781,7 @@ const SortablePipelineItem = ({
onSetMainAgent: (name: string) => void;
selectedRef: React.RefObject<HTMLDivElement | null>;
startAgentName: string | null;
isLive?: boolean;
}) => {
const {
attributes,
@ -1783,6 +1812,7 @@ const SortablePipelineItem = ({
onSetMainAgent={onSetMainAgent}
selectedRef={selectedRef}
startAgentName={startAgentName}
isLive={isLive}
dragHandle={
<button className="cursor-grab" {...listeners}>
<GripVertical className="w-4 h-4 text-gray-400" />

View file

@ -238,6 +238,14 @@ export type Action = {
type: "show_visualise";
} | {
type: "hide_visualise";
} | {
type: "show_add_datasource_modal";
} | {
type: "show_add_variable_modal";
} | {
type: "show_add_agent_modal";
} | {
type: "show_add_tool_modal";
};
function reducer(state: State, action: Action): State {
@ -1107,7 +1115,12 @@ export function WorkflowEditor({
}
}, [onChangeMode]);
const copilotRef = useRef<{ handleUserMessage: (message: string) => void }>(null);
const entityListRef = useRef<{ openDataSourcesModal: () => void } | null>(null);
const entityListRef = useRef<{
openDataSourcesModal: () => void;
openAddVariableModal: () => void;
openAddAgentModal: () => void;
openAddToolModal: () => void;
} | null>(null);
// Modal state for revert confirmation
const { isOpen: isRevertModalOpen, onOpen: onRevertModalOpen, onClose: onRevertModalClose } = useDisclosure();
@ -1194,7 +1207,7 @@ export function WorkflowEditor({
// Expand Chat to full view: hide Copilot panel and collapse Agents panel
updateViewMode('two_agents_chat');
setIsLeftPanelCollapsed(true);
}, [updateViewMode, viewMode]);
}, [updateViewMode]);
// Load agent order from localStorage on mount
// useEffect(() => {
@ -1340,6 +1353,22 @@ export function WorkflowEditor({
dispatchGuarded({ type: "add_prompt", prompt });
}
function handleShowAddDataSourceModal() {
dispatchGuarded({ type: "show_add_datasource_modal" });
}
function handleShowAddVariableModal() {
dispatchGuarded({ type: "show_add_variable_modal" });
}
function handleShowAddAgentModal() {
dispatchGuarded({ type: "show_add_agent_modal" });
}
function handleShowAddToolModal() {
dispatchGuarded({ type: "show_add_tool_modal" });
}
function handleSelectPipeline(name: string) {
dispatch({ type: "select_pipeline", name });
}
@ -1450,11 +1479,11 @@ export function WorkflowEditor({
// Modal-specific handlers that don't auto-select
function handleAddPromptFromModal(prompt: Partial<z.infer<typeof WorkflowPrompt>>) {
dispatch({ type: "add_prompt", prompt, fromCopilot: true });
dispatchGuarded({ type: "add_prompt", prompt, fromCopilot: true });
}
function handleUpdatePromptFromModal(name: string, prompt: Partial<z.infer<typeof WorkflowPrompt>>) {
dispatch({ type: "update_prompt_no_select", name, prompt });
dispatchGuarded({ type: "update_prompt_no_select", name, prompt });
}
async function handleDeletePrompt(name: string) {
@ -1671,7 +1700,7 @@ export function WorkflowEditor({
}, [isLive, state.present.publishing, onChangeMode]);
const WORKFLOW_MOD_ACTIONS = useRef(new Set([
'add_agent','add_tool','add_prompt','add_pipeline',
'add_agent','add_tool','add_prompt','add_pipeline','show_add_datasource_modal','show_add_variable_modal','show_add_agent_modal','show_add_tool_modal',
'update_agent','update_tool','update_prompt','update_prompt_no_select','update_pipeline',
'delete_agent','delete_tool','delete_prompt','delete_pipeline',
'toggle_agent','set_main_agent','reorder_agents','reorder_pipelines'
@ -1684,6 +1713,26 @@ export function WorkflowEditor({
setShowEditModal(true);
return; // Block the action - it never reaches the reducer
}
// Handle modal show actions when not in live mode
const actionType = (action as any).type;
if (actionType === "show_add_datasource_modal") {
entityListRef.current?.openDataSourcesModal();
return;
}
if (actionType === "show_add_variable_modal") {
entityListRef.current?.openAddVariableModal();
return;
}
if (actionType === "show_add_agent_modal") {
entityListRef.current?.openAddAgentModal();
return;
}
if (actionType === "show_add_tool_modal") {
entityListRef.current?.openAddToolModal();
return;
}
dispatch(action); // Allow the action to proceed
}, [WORKFLOW_MOD_ACTIONS, isLive, state.present.publishing, dispatch]);
@ -1947,6 +1996,7 @@ export function WorkflowEditor({
workflow={state.present.workflow}
selectedEntity={null}
startAgentName={state.present.workflow.startAgent}
isLive={isLive}
onSelectAgent={handleSelectAgent}
onSelectTool={handleSelectTool}
onSelectPrompt={handleSelectPrompt}
@ -1955,6 +2005,10 @@ export function WorkflowEditor({
onAddAgent={handleAddAgent}
onAddTool={handleAddTool}
onAddPrompt={handleAddPrompt}
onShowAddDataSourceModal={handleShowAddDataSourceModal}
onShowAddVariableModal={handleShowAddVariableModal}
onShowAddAgentModal={handleShowAddAgentModal}
onShowAddToolModal={handleShowAddToolModal}
onUpdatePrompt={handleUpdatePrompt}
onAddPromptFromModal={handleAddPromptFromModal}
onUpdatePromptFromModal={handleUpdatePromptFromModal}
@ -2035,6 +2089,7 @@ export function WorkflowEditor({
: null
}
startAgentName={state.present.workflow.startAgent}
isLive={isLive}
onSelectAgent={handleSelectAgent}
onSelectTool={handleSelectTool}
onSelectPrompt={handleSelectPrompt}
@ -2043,6 +2098,10 @@ export function WorkflowEditor({
onAddAgent={handleAddAgent}
onAddTool={handleAddTool}
onAddPrompt={handleAddPrompt}
onShowAddDataSourceModal={handleShowAddDataSourceModal}
onShowAddVariableModal={handleShowAddVariableModal}
onShowAddAgentModal={handleShowAddAgentModal}
onShowAddToolModal={handleShowAddToolModal}
onUpdatePrompt={handleUpdatePrompt}
onAddPromptFromModal={handleAddPromptFromModal}
onUpdatePromptFromModal={handleUpdatePromptFromModal}