ChatInspectorLayout

The chat-with-an-inspector shape as a component: the chat area is children, the panel beside it is inspector or a list of panels rendered as tabs (activePanelId, onActivePanelIdChange). The pane is resizable and collapsible; opened and onOpenedChange drive the toggle in your header, and dragging the pane shut reports back through the same callback. Below breakpoint (900px of the layout width, or forced with compact) the inspector moves into a drawer — drawerPosition and drawerSize shape it. defaultSize, minChatWidth and minInspectorWidth control the split. The layout fills its parent, so give it a height — style={{ height: '100dvh' }} for a full-page chat — or the panes grow with the longest panel and the page scrolls instead of the transcript.