← All changes | src/Agent/Chat.jsx +30 -28 3.0.6 → trunk View file →

		@@ -1,16 +1,21 @@
	1	+import { useCanvasSeat } from '@agent/components/Canvas';
1	2	import { DOMHighlighter } from '@agent/components/DOMHighlighter';
	3	+import { CanvasModalLayout } from '@agent/components/layouts/CanvasModalLayout';
2	4	import { DragResizeLayout } from '@agent/components/layouts/DragResizeLayout';
3	5	import { MobileLayout } from '@agent/components/layouts/MobileLayout';
4		-import { useGlobalStore } from '@agent/state/global';
5		-import { useWorkflowStore } from '@agent/state/workflows';
	6	+import { DESKTOP_MIN_WIDTH, useGlobalStore } from '@agent/state/global';
	7	+import { useEditModeStore } from '@quick-edit/state/edit-mode';
	8	+import { useQuickEditStore } from '@quick-edit/state/store';
6	9	import { useEffect } from '@wordpress/element';
7	10	import { SidebarLayout } from './components/layouts/SidebarLayout';
8	11
9		-export const Chat = ({ busy, children }) => {
	12	+export const Chat = ({ busy, working, children }) => {
10	13	const { setIsMobile, isMobile, mode } = useGlobalStore();
11		- const { domToolEnabled, block, setBlock, setDomToolEnabled } =
12		- useWorkflowStore();
	14	+ const canvasModal = useCanvasSeat() === 'modal';
	15	+ const editModeOn = useEditModeStore((s) => s.on);
	16	+ const block = useQuickEditStore((s) => s.agentBlock);
	17	+ const setBlock = useQuickEditStore((s) => s.setAgentBlock);
13	18
14	19	useEffect(() => {
15	20	if (!isMobile || !block) return;
16	21	// Remove the block if we switch to mobile
		@@ -21,9 +26,9 @@
21	26	let timeout;
22	27	const onResize = () => {
23	28	clearTimeout(timeout);
24	29	timeout = window.setTimeout(() => {
25		- setIsMobile(window.innerWidth < 783);
	30	+ setIsMobile(window.innerWidth < DESKTOP_MIN_WIDTH);
26	31	}, 10);
27	32	};
28	33	window.addEventListener('resize', onResize);
29	34	return () => {
		@@ -31,28 +36,8 @@
31	36	window.removeEventListener('resize', onResize);
32	37	};
33	38	}, [setIsMobile]);
34	39
35		- useEffect(() => {
36		- // Exit select mode when Escape is pressed
37		- const onKeyDown = (e) => {
38		- if (e.key !== 'Escape' || !domToolEnabled) return;
39		-
40		- // Cancel the workflow
41		- window.dispatchEvent(new CustomEvent('extendify-agent:cancel-workflow'));
42		-
43		- // If a block is selected, clear it
44		- if (block) return setBlock(null);
45		-
46		- // If no block is selected, exit select mode
47		- setDomToolEnabled(false);
48		- };
49		- window.addEventListener('keydown', onKeyDown);
50		- return () => {
51		- window.removeEventListener('keydown', onKeyDown);
52		- };
53		- }, [domToolEnabled, block, setBlock, setDomToolEnabled]);
54		-
55	40	if (isMobile) {
56	41	return (
57	42	<MobileLayout>
58	43	<div
		@@ -64,8 +49,25 @@
64	49	</MobileLayout>
65	50	);
66	51	}
67	52
	53	+ if (canvasModal) {
	54	+ return (
	55	+ <>
	56	+ {/* The docked panel holds the page's offset, so it stays behind. */}
	57	+ {mode === 'docked-left' ? <SidebarLayout /> : null}
	58	+ <CanvasModalLayout>
	59	+ <div
	60	+ id="extendify-agent-chat"
	61	+ className="flex min-h-0 flex-1 grow flex-col font-sans"
	62	+ >
	63	+ {children}
	64	+ </div>
	65	+ </CanvasModalLayout>
	66	+ </>
	67	+ );
	68	+ }
	69	+
68	70	if (mode === 'docked-left') {
69	71	return (
70	72	<SidebarLayout>
71	73	<div
		@@ -73,9 +75,9 @@
73	75	className="flex min-h-0 flex-1 grow flex-col font-sans"
74	76	>
75	77	{children}
76	78	</div>
77		- {domToolEnabled && <DOMHighlighter busy={busy} />}
	79	+ {editModeOn && <DOMHighlighter busy={busy} working={working} />}
78	80	</SidebarLayout>
79	81	);
80	82	}
81	83
		@@ -86,8 +88,8 @@
86	88	className="flex min-h-0 flex-1 grow flex-col font-sans"
87	89	>
88	90	{children}
89	91	</div>
90		- {domToolEnabled && <DOMHighlighter busy={busy} />}
	92	+ {editModeOn && <DOMHighlighter busy={busy} working={working} />}
91	93	</DragResizeLayout>
92	94	);
93	95	};