{toolName || "ChatGPT App"}
)}
```
**Key Features:**
* **Host-Backed Navigation**: Parent component mirrors widget's history state, enabling navigation controls outside the iframe
* **State Persistence**: Navigation index stored in `history.state.__navIndex` to survive popstate events
* **Automatic Tracking**: All `pushState`, `replaceState`, and `popstate` events automatically update navigation state
* **Disabled State Management**: Back/forward buttons are disabled when navigation is not available
* **Transform Isolation Fix**: Parent container's `transform: translateZ(0)` is removed in fullscreen mode to prevent z-index stacking issues
**Use Cases:**
* Multi-page dashboards with internal routing
* Wizard-style forms with step navigation
* Documentation browsers with history
* Any widget using React Router or similar routing libraries
### 7. Parent-Side Message Handling
Located in `client/src/components/chat-v2/chatgpt-app-renderer.tsx:312-347`:
```typescript theme={"theme":"css-variables"}
useEffect(() => {
const handleMessage = async (event: MessageEvent) => {
// Accept messages from inline or modal iframe
const inlineWindow = iframeRef.current?.contentWindow;
const modalWindow = modalIframeRef.current?.contentWindow;
const isFromInline = inlineWindow != null && event.source === inlineWindow;
const isFromModal = modalWindow != null && event.source === modalWindow;
if (!isFromInline && !isFromModal) {
return;
}
switch (event.data.type) {
case \"openai:setWidgetState\":
localStorage.setItem(widgetStateKey, JSON.stringify(event.data.state));
break;
case \"openai:callTool\":
if (onCallTool) {
try {
const result = await onCallTool(
event.data.toolName,
event.data.params || {}
);
const targetWindow = event.source as Window | null;
targetWindow?.postMessage({
type: \"openai:callTool:response\",
requestId: event.data.requestId,
result: result
}, \"*\");
} catch (err) {
const targetWindow = event.source as Window | null;
targetWindow?.postMessage({
type: \"openai:callTool:response\",
requestId: event.data.requestId,
error: err instanceof Error ? err.message : \"Unknown error\"
}, \"*\");
}
}
break;
case \"openai:sendFollowup\":
if (onSendFollowup) {
onSendFollowup(event.data.message);
}
break;
case \"openai:requestDisplayMode\":
const mode = event.data.mode;
setDisplayMode(mode);
if (mode === \"pip\") {
onRequestPip?.(resolvedToolCallId);
} else if (mode === \"inline\" || mode === \"fullscreen\") {
if (pipWidgetId === resolvedToolCallId) {
onExitPip?.(resolvedToolCallId);
}
}
if (typeof event.data.maxHeight === \"number\") {
setMaxHeight(event.data.maxHeight);
}
break;
}
};
window.addEventListener(\"message\", handleMessage);
return () => window.removeEventListener(\"message\", handleMessage);
}, [widgetUrl, onCallTool, onSendFollowup, pipWidgetId, onRequestPip, onExitPip, resolvedToolCallId]);
```
#### Display Mode Synchronization
The component automatically resets to inline mode if another widget takes over PiP mode:
Located in `client/src/components/chat-v2/chatgpt-app-renderer.tsx:368-372`:
```typescript theme={"theme":"css-variables"}
useEffect(() => {
if (displayMode === "pip" && pipWidgetId !== resolvedToolCallId) {
setDisplayMode("inline");
}
}, [displayMode, pipWidgetId, resolvedToolCallId]);
```
This ensures only one widget can be in PiP mode at a time, preventing overlapping floating widgets.
#### Global Values Synchronization
The parent component automatically sends global values to widgets, including theme, display mode, locale, and maxHeight. These values update whenever the user changes settings in the playground.
Located in `client/src/components/chat-v2/chatgpt-app-renderer.tsx:831-850`:
```typescript theme={"theme":"css-variables"}
useEffect(() => {
if (!isReady) return;
const globals: Record