PluginProbe
Extendify / 3.2.2
Extendify v3.2.2
3.2.2 3.2.1 3.2.0 3.1.6 3.1.5 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 3.0.6 3.0.5 3.0.4 trunk 0.1.0 0.10.0 0.10.1 0.10.2 0.11.0 0.11.1 0.2.0 0.3.0 0.3.1 0.4.0 0.5.0 All 128 releases
← All changes | src/Agent/Agent.jsx +143 -43 3.2.0 → 3.2.2 View file →
@@ -12,9 +12,16 @@
12 12 useCanvasOpen,
13 13 } from '@agent/components/Canvas';
14 14 import { ChatInput } from '@agent/components/ChatInput';
15 15 import { ChatMessages } from '@agent/components/ChatMessages';
16 +import { StatusIndicator } from '@agent/components/messages/StatusIndicator';
16 17 import { UsageMessage } from '@agent/components/messages/UsageMessage';
18 +import { useFollowUpHistory } from '@agent/follow-ups/history';
19 +import {
20 + cardMessageIndex,
21 + pickNextCard,
22 + toolCallsThisRun,
23 +} from '@agent/follow-ups/pick-next';
17 24 import { useLockPost } from '@agent/hooks/useLockPost';
18 25 import { isAbilityTool, isAbilityWorkflow } from '@agent/lib/abilities';
19 26 import {
20 27 getClientToolFallbackReply,
@@ -26,11 +33,11 @@
26 33 import { useCanvasStore } from '@agent/state/canvas';
27 34 import { useChatStore } from '@agent/state/chat';
28 35 import { useGlobalStore } from '@agent/state/global';
29 36 import { useStatusStore } from '@agent/state/status';
30 -import { useSuggestionsStore } from '@agent/state/suggestions';
31 37 import { useWorkflowStore } from '@agent/state/workflows';
32 38 import { hasRunComponent } from '@agent/workflows/abilities/components/run';
39 +import startOnboardingWorkflow from '@agent/workflows/misc/start-onboarding';
33 40 import { useQuickEditStore } from '@quick-edit/state/store';
34 41 import { digest } from '@shared/api/digest';
35 42 import {
36 43 useCallback,
@@ -65,8 +72,18 @@
65 72 await new Promise((resolve) => setTimeout(resolve, ms));
66 73 return signal.aborted;
67 74 };
68 75
76 +const nextSteps = (workflowId, status, messages) => {
77 + if (status === 'completed') {
78 + useFollowUpHistory.getState().markDone(workflowId);
79 + }
80 + const card = pickNextCard({ workflowId, status, messages });
81 + return card
82 + ? { followUp: card.id, followUpData: card.data }
83 + : { followUp: null };
84 +};
85 +
69 86 export const Agent = () => {
70 87 const { addMessage, updateMessage, popMessage, messages } = useChatStore();
71 88 const { pushStatus, clearStatuses, leavingPage } = useStatusStore();
72 89 const {
@@ -99,9 +116,8 @@
99 116 const canvasOpen = useCanvasOpen();
100 117 const canvasAssist = useCanvasAssist();
101 118 const canvasNoticeShown = useRef(false);
102 119 const chatAvailable = useMemo(() => isChatAvailable(), [isChatAvailable]);
103 - const { addSuggestions, getSuggestions } = useSuggestionsStore();
104 120 // Options render only while their message is last; a reply dismisses them.
105 121 const lastMessage = messages.at(-1);
106 122 const qaSuggestions =
107 123 lastMessage?.type === 'message' &&
@@ -109,8 +125,18 @@
109 125 Array.isArray(lastMessage.details?.qaSuggestions)
110 126 ? lastMessage.details.qaSuggestions
111 127 : null;
112 128
129 + useEffect(() => {
130 + const { messages, updateMessage } = useChatStore.getState();
131 + const index = cardMessageIndex(messages);
132 + const { id, details } = messages[index] ?? {};
133 + if (!id || details.followUp !== undefined || details.followUpClosed) return;
134 + const { workflowId, status } = details;
135 + const steps = nextSteps(workflowId, status, messages.slice(0, index));
136 + if (steps.followUp) updateMessage(id, steps);
137 + }, []);
138 +
113 139 // Without this the input stays disabled for as long as the canvas is open.
114 140 useEffect(() => {
115 141 if (canvasOpen && canvasAssist) setCanType(true);
116 142 // A workflow reached by example carries no sessionId to key this on.
@@ -126,9 +152,14 @@
126 152 agentBlock && setBlock(null);
127 153 // A class or pin left up freezes Quick Edit hover site-wide.
128 154 document
129 155 .querySelector('.wp-site-blocks')
130 - ?.classList.remove('extendify-agent-working', 'extendify-agent-busy');
156 + ?.classList.remove(
157 + 'extendify-agent-working',
158 + 'extendify-agent-busy',
159 + 'extendify-agent-waiting',
160 + 'extendify-agent-task',
161 + );
131 162 setCommittedSelection(null);
132 163 clearStatuses();
133 164 window.dispatchEvent(new Event('extendify-agent:remove-block-highlight'));
134 165 }, [setBlock, clearStatuses]);
@@ -271,18 +302,33 @@
271 302 setCanType(true);
272 303 }, [addMessage, pushStatus, whenFinishedToolProps, workflow]);
273 304
274 305 const handleSubmit = useCallback(
275 - async (message) => {
276 - // Suggestions reach the agent without the textarea; disabling it isn't enough.
306 + async (message, { hidden = false } = {}) => {
307 + // chat-submit events skip the textarea; disabling it isn't enough.
277 308 if (useQuickEditStore.getState().selected) return;
309 + if (whenFinishedToolProps?.processing) return;
278 310 setWaitingOnToolOrUser(false);
279 311 agentWorking.current = false;
280 - addMessage('message', { role: 'user', content: message });
312 + addMessage('message', { role: 'user', content: message, hidden });
281 313
282 314 // Without this a typed message would drop the workflow and close the canvas.
283 315 if (canvasOpen && canvasAssist) return handleCanvasMessage();
284 316
317 + // A staged tool the user walked away from still owes its receipt.
318 + if (workflow?.id && whenFinishedToolProps?.id) {
319 + const { answerId, whenFinishedTool } =
320 + whenFinishedToolProps.agentResponse || {};
321 + addMessage('workflow', {
322 + status: 'canceled',
323 + label: whenFinishedTool?.labels?.cancel,
324 + agent: workflow.agent,
325 + workflowId: workflow.id,
326 + answerId,
327 + followUp: null,
328 + });
329 + }
330 +
285 331 // Let some phrases auto load workflows
286 332 const bypass = getWorkflowByExample(message);
287 333 if (bypass?.example?.agentResponse) {
288 334 // whenFinishedTool → inline input UI; none → ask for a typed reply.
@@ -387,9 +433,9 @@
387 433 useEffect(() => {
388 434 // Allow external messages to trigger the agent
389 435 const handleMessage = ({ detail }) => {
390 436 if (!detail?.message) return;
391 - handleSubmit(detail.message);
437 + handleSubmit(detail.message, { hidden: detail.hidden });
392 438 };
393 439 // Allow external code to clear the block and workflow
394 440 const handleCleanup = () => {
395 441 // cleanup() resets canType and agentWorking, so read them before it runs.
@@ -407,9 +453,9 @@
407 453 addMessage('workflow', {
408 454 status: 'canceled',
409 455 agent: workflow?.agent,
410 456 workflowId: workflow?.id,
411 - suggestions: getSuggestions(),
457 + ...nextSteps(workflow?.id, 'canceled'),
412 458 });
413 459 return;
414 460 };
415 461 window.addEventListener('extendify-agent:cancel-workflow', handleCleanup);
@@ -427,26 +473,52 @@
427 473 setWorkflow,
428 474 addMessage,
429 475 workflow,
430 476 qaSuggestions,
431 - getSuggestions,
432 477 canType,
433 478 ]);
434 479
480 + // Dispatching before chat-submit has a listener drops the workflow.
481 + useEffect(() => {
482 + if (!startOnboardingWorkflow.available()) return;
483 + window.dispatchEvent(
484 + new CustomEvent('extendify-agent:chat-submit', {
485 + detail: { message: startOnboardingWorkflow.example.text, hidden: true },
486 + }),
487 + );
488 + }, []);
489 +
490 + // ChatMessages hides a confirm restored by a reload; left open, the workflow would sit unfinishable.
491 + useEffect(() => {
492 + const { getWorkflow, reloadedToolProps } = useWorkflowStore.getState();
493 + const { whenFinished, needsRedirect } = getWorkflow() ?? {};
494 + if (!reloadedToolProps?.id || !whenFinished?.component) return;
495 + if (whenFinished.canvas || needsRedirect?.()) return;
496 + window.dispatchEvent(new Event('extendify-agent:cancel-workflow'));
497 + }, []);
498 +
435 499 // Handle whenFinished component confirm/cancel
436 500 useEffect(() => {
437 501 const handleConfirm = async ({ detail }) => {
438 502 if (toolWorking.current) return;
439 - setWhenFinishedToolProps(null);
440 503 toolWorking.current = true;
441 504 const { data, whenFinishedToolProps, shouldRefreshPage, redirectUrl } =
442 505 detail ?? {};
506 + // Staged until the tool returns, so the chat shows it saving.
507 + setWhenFinishedToolProps(
508 + whenFinishedToolProps
509 + ? { ...whenFinishedToolProps, processing: true }
510 + : null,
511 + );
443 512 const { whenFinishedTool, answerId, redirectTo } =
444 513 whenFinishedToolProps?.agentResponse || {};
445 514 const { id, labels } = whenFinishedTool || {};
446 515 // Staged unanswered so its own component can show the run in progress.
447 516 const runMessageId = id ? addMessage('tool', { id, inputs: data }) : null;
448 - if (!hasRunComponent(id)) pushStatus('workflow-tool-processing');
517 + // In the chat, the saving state shows this label instead.
518 + if (!hasRunComponent(id) && workflow?.whenFinished?.canvas) {
519 + pushStatus('workflow-tool-processing', labels?.started);
520 + }
449 521 // Not all workflows have a tool at the end (e.g. tours)
450 522 const toolResponse = await callTool?.({ tool: id, inputs: data }).catch(
451 523 (error) => {
452 524 const { sessionId } = workflow || {};
@@ -462,8 +534,9 @@
462 534 return { error: { message: error?.message, code: error?.code } };
463 535 },
464 536 );
465 537 toolWorking.current = false;
538 + setWhenFinishedToolProps(null);
466 539 if (runMessageId) updateMessage(runMessageId, { result: toolResponse });
467 540 if (toolResponse?.refused) {
468 541 await new Promise((resolve) => setTimeout(resolve, 1000));
469 542 const refusalMessages = {
@@ -496,9 +569,15 @@
496 569 setLoop((prev) => prev + 1);
497 570 return;
498 571 }
499 572
500 - addSuggestions(whenFinishedToolProps.agentResponse?.recommendations);
573 + const url = getRedirectUrl(redirectTo, whenFinishedToolProps?.inputs);
574 + // Reloading here unmounts a run component still watching its ability finish.
575 + const refreshForAbility =
576 + isAbilityTool(id) && shouldRefreshPage !== false;
577 + const willReload =
578 + url || redirectUrl || shouldRefreshPage || refreshForAbility;
579 + // A card shown now would flash just before the reload.
501 580 addMessage('workflow', {
502 581 status: 'completed',
503 582 label: labels?.confirm,
504 583 agent: workflow.agent,
@@ -503,9 +582,9 @@
503 582 label: labels?.confirm,
504 583 agent: workflow.agent,
505 584 workflowId: workflow.id,
506 585 answerId,
507 - suggestions: getSuggestions(),
586 + ...(willReload ? {} : nextSteps(workflow.id, 'completed')),
508 587 });
509 588 // A chat message persists, so the next turn's model knows the save was partial.
510 589 const refusedCount = toolResponse?.refusedOperations?.length;
511 590 if (refusedCount) {
@@ -525,13 +604,9 @@
525 604 }
526 605 setWorkflow(null);
527 606 useCanvasStore.getState().endSession();
528 607
529 - const url = getRedirectUrl(redirectTo, whenFinishedToolProps?.inputs);
530 - const refreshForAbility = isAbilityTool(id);
531 - if (url || redirectUrl || shouldRefreshPage || refreshForAbility) {
532 - return doReload(url || redirectUrl);
533 - }
608 + if (willReload) return doReload(url || redirectUrl);
534 609 cleanup();
535 610 };
536 611 const handleCancel = ({ detail }) => {
537 612 if (toolWorking.current) return;
@@ -544,9 +619,9 @@
544 619 label: whenFinishedTool?.labels?.cancel,
545 620 agent: workflow.agent,
546 621 workflowId: workflow.id,
547 622 answerId,
548 - suggestions: getSuggestions(),
623 + ...nextSteps(workflow.id, 'canceled'),
549 624 });
550 625 setWorkflow(null);
551 626 useCanvasStore.getState().endSession();
552 627 cleanup();
@@ -571,18 +646,9 @@
571 646 handleCancel,
572 647 );
573 648 window.removeEventListener('extendify-agent:workflow-retry', handleRetry);
574 649 };
575 - }, [
576 - addMessage,
577 - pushStatus,
578 - popMessage,
579 - cleanup,
580 - setWorkflow,
581 - workflow,
582 - getSuggestions,
583 - addSuggestions,
584 - ]);
650 + }, [addMessage, pushStatus, popMessage, cleanup, setWorkflow, workflow]);
585 651
586 652 useEffect(() => {
587 653 const handleClose = () => setOpen(false);
588 654 const handleOpen = () => setOpen(true);
@@ -602,9 +668,26 @@
602 668 if (open) return;
603 669 if (block) setBlock(null);
604 670 }, [open, block, setBlock]);
605 671
672 + // A pick answers select-block's "which one?"; making the user also type stalls it.
673 + const previousBlock = useRef(block);
606 674 useEffect(() => {
675 + const picked = block && !previousBlock.current;
676 + previousBlock.current = block;
677 + if (!picked || workflow?.id !== 'select-block') return;
678 + if (!waitingOnToolOrUser || !canType || whenFinishedToolProps?.id) return;
679 + handleSubmit('This is the block I mean.', { hidden: true });
680 + }, [
681 + block,
682 + workflow?.id,
683 + waitingOnToolOrUser,
684 + canType,
685 + whenFinishedToolProps?.id,
686 + handleSubmit,
687 + ]);
688 +
689 + useEffect(() => {
607 690 if (waitingOnToolOrUser || !open || !workflow?.id) return;
608 691 // Some workflows require they dont change pages
609 692 const theyMoved = workflow?.startingPage !== window.location.href;
610 693 // Requires a block to be selected
@@ -615,9 +698,9 @@
615 698 addMessage('workflow', {
616 699 status: 'canceled',
617 700 agent: workflow.agent,
618 701 workflowId: workflow.id,
619 - suggestions: getSuggestions(),
702 + ...nextSteps(workflow.id, 'canceled'),
620 703 });
621 704 setWorkflow(null);
622 705 cleanup();
623 706 return;
@@ -714,9 +797,8 @@
714 797 status: 'completed',
715 798 inputs,
716 799 workflowId: workflow.id,
717 800 });
718 - addSuggestions(agentResponse.recommendations);
719 801 setWorkflow(null);
720 802 addMessage('workflow', {
721 803 status: 'completed',
722 804 agent: workflow.agent,
@@ -721,9 +803,9 @@
721 803 status: 'completed',
722 804 agent: workflow.agent,
723 805 workflowId: workflow.id,
724 806 answerId,
725 - suggestions: getSuggestions(),
807 + ...nextSteps(workflow.id, 'completed'),
726 808 });
727 809 cleanup();
728 810 }
729 811 return;
@@ -729,19 +811,21 @@
729 811 return;
730 812 }
731 813 // If we're done, it means the AI has the answer
732 814 if (agentResponse.status !== 'in-progress') {
733 - const { recommendations, status } = agentResponse;
734 - const isCompleted = status === 'completed';
735 - if (recommendations) addSuggestions(recommendations);
815 + const status =
816 + agentResponse.status === 'completed' ? 'completed' : 'canceled';
817 + // A reply that changed nothing isn't a finished task to follow up.
818 + const didWork =
819 + toolCallsThisRun(useChatStore.getState().messages).length > 0;
736 820 setWorkflow(null);
737 821 cleanup();
738 822 addMessage('workflow', {
739 - status: isCompleted ? 'completed' : 'canceled',
823 + status,
740 824 agent: workflow.agent,
741 825 workflowId: workflow.id,
742 826 answerId,
743 - suggestions: getSuggestions(),
827 + ...(didWork ? nextSteps(workflow.id, status) : { followUp: null }),
744 828 });
745 829 return;
746 830 }
747 831 if (sessionId && sessionId !== workflow.sessionId) {
@@ -761,9 +845,10 @@
761 845 setWaitingOnToolOrUser(true);
762 846 setCanType(false);
763 847 return;
764 848 }
765 - pushStatus('tool-started', labels?.started);
849 + // A reply sent with the tool clears the status, blanking the line.
850 + pushStatus('agent-working');
766 851 const toolData = await Promise.all([
767 852 callTool({ tool: id, inputs }),
768 853 new Promise((resolve) => setTimeout(resolve, 3000)),
769 854 ])
@@ -794,8 +879,9 @@
794 879 id,
795 880 inputs,
796 881 result: toolData,
797 882 label: labels?.confirm,
883 + started: labels?.started,
798 884 });
799 885 setWaitingOnToolOrUser(false);
800 886 agentWorking.current = false;
801 887 setLoop((prev) => prev + 1); // Trigger next loop
@@ -841,10 +927,8 @@
841 927 setWhenFinishedToolProps,
842 928 block,
843 929 setBlock,
844 930 findAgent,
845 - addSuggestions,
846 - getSuggestions,
847 931 ]);
848 932
849 933 useEffect(() => {
850 934 if (!canType) return;
@@ -850,9 +934,15 @@
850 934 if (!canType) return;
851 935 document.querySelector('#extendify-agent-chat-textarea')?.focus();
852 936 }, [canType]);
853 937
854 - const busy = !canType || !chatAvailable || workflow?.id;
938 + // A task waiting on a reply leaves the page pickable so the user can answer by pointing.
939 + const waiting =
940 + canType &&
941 + chatAvailable &&
942 + Boolean(workflow?.id) &&
943 + !whenFinishedToolProps?.id;
944 + const busy = !canType || !chatAvailable || (workflow?.id && !waiting);
855 945 // `busy` is true at rest; 429 is blocked, not working.
856 946 const working = !canType && chatAvailable;
857 947
858 948 return (
@@ -857,9 +947,14 @@
857 947
858 948 return (
859 949 <>
860 950 <Canvas />
861 - <Chat busy={busy} working={working}>
951 + <Chat
952 + busy={busy}
953 + working={working}
954 + waiting={waiting}
955 + taskActive={Boolean(workflow?.id)}
956 + >
862 957 <div className="relative z-50 flex h-full flex-col justify-between overflow-auto">
863 958 <ChatMessages
864 959 redirectComponent={
865 960 workflow?.needsRedirect?.() ? workflow.redirectComponent : null
@@ -874,11 +969,16 @@
874 969 }}
875 970 />
876 971 </div>
877 972 <div className="p-4 pb-2 pt-0">
973 + <StatusIndicator />
878 974 <ChatInput
879 975 disabled={
880 - !canType || !chatAvailable || !!qaSuggestions || leavingPage
976 + !canType ||
977 + !chatAvailable ||
978 + !!qaSuggestions ||
979 + leavingPage ||
980 + whenFinishedToolProps?.processing
881 981 }
882 982 handleSubmit={handleSubmit}
883 983 />
884 984 </div>