| @@ -1,5 +1,7 @@ | ||
| 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 | 6 | import { DESKTOP_MIN_WIDTH, useGlobalStore } from '@agent/state/global'; |
| 5 | 7 | import { useEditModeStore } from '@quick-edit/state/edit-mode'; |
| @@ -8,8 +10,9 @@ | ||
| 8 | 10 | import { SidebarLayout } from './components/layouts/SidebarLayout'; |
| 9 | 11 | |
| 10 | 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 | |
| @@ -43,8 +46,25 @@ | ||
| 43 | 46 | > |
| 44 | 47 | {children} |
| 45 | 48 | </div> |
| 46 | 49 | </MobileLayout> |
| 50 | + ); | |
| 51 | + } | |
| 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 | + </> | |
| 47 | 67 | ); |
| 48 | 68 | } |
| 49 | 69 | |
| 50 | 70 | if (mode === 'docked-left') { |
