← All changes | src/Agent/Chat.jsx +25 -5 3.1.3 → 3.2.1 View file →

		@@ -1,15 +1,18 @@
	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';
	6	+import { DESKTOP_MIN_WIDTH, useGlobalStore } from '@agent/state/global';
5	7	import { useEditModeStore } from '@quick-edit/state/edit-mode';
6	8	import { useQuickEditStore } from '@quick-edit/state/store';
7	9	import { useEffect } from '@wordpress/element';
8	10	import { SidebarLayout } from './components/layouts/SidebarLayout';
9	11
10		-export const Chat = ({ busy, children }) => {
	12	+export const Chat = ({ busy, working, children }) => {
11	13	const { setIsMobile, isMobile, mode } = useGlobalStore();
	14	+ const canvasModal = useCanvasSeat() === 'modal';
12	15	const editModeOn = useEditModeStore((s) => s.on);
13	16	const block = useQuickEditStore((s) => s.agentBlock);
14	17	const setBlock = useQuickEditStore((s) => s.setAgentBlock);
15	18
		@@ -23,9 +26,9 @@
23	26	let timeout;
24	27	const onResize = () => {
25	28	clearTimeout(timeout);
26	29	timeout = window.setTimeout(() => {
27		- setIsMobile(window.innerWidth < 783);
	30	+ setIsMobile(window.innerWidth < DESKTOP_MIN_WIDTH);
28	31	}, 10);
29	32	};
30	33	window.addEventListener('resize', onResize);
31	34	return () => {
		@@ -46,8 +49,25 @@
46	49	</MobileLayout>
47	50	);
48	51	}
49	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	+
50	70	if (mode === 'docked-left') {
51	71	return (
52	72	<SidebarLayout>
53	73	<div
		@@ -55,9 +75,9 @@
55	75	className="flex min-h-0 flex-1 grow flex-col font-sans"
56	76	>
57	77	{children}
58	78	</div>
59		- {editModeOn && <DOMHighlighter busy={busy} />}
	79	+ {editModeOn && <DOMHighlighter busy={busy} working={working} />}
60	80	</SidebarLayout>
61	81	);
62	82	}
63	83
		@@ -68,8 +88,8 @@
68	88	className="flex min-h-0 flex-1 grow flex-col font-sans"
69	89	>
70	90	{children}
71	91	</div>
72		- {editModeOn && <DOMHighlighter busy={busy} />}
	92	+ {editModeOn && <DOMHighlighter busy={busy} working={working} />}
73	93	</DragResizeLayout>
74	94	);
75	95	};