Support document-flow / auto-height mode for embedded ChatKit

[jeremedia]

Problem

ChatKit currently behaves as a fixed-height application surface: the hosted iframe fills the height assigned by the host page and the conversation scrolls inside the iframe.

That works well for a dedicated chat viewport, but it creates a nested scroll region when ChatKit is embedded in a normal document. The host cannot let <openai-chatkit> grow with the transcript because the iframe is cross-origin and ChatKit does not expose its rendered content height.

Setting height: auto, observing the custom element with ResizeObserver, or changing host-page overflow does not solve this—the host can only observe the iframe box, not the conversation content inside it.

Requested capability

Please support a page-owned scrolling mode. Either of these contracts would work:

Option A: first-class document-flow mode

chatkit.setOptions({
  layout: {
    scrollMode: "document",
  },
});

In this mode ChatKit would disable its internal vertical conversation scroller and keep the iframe/custom-element height synchronized to its rendered content.

Option B: content resize event plus scroll strategy

chatkit.addEventListener("chatkit.content.resize", (event) => {
  chatkit.style.height = `${event.detail.height}px`;
});

chatkit.setOptions({
  thread: {
    scrollMode: "document",
  },
});

Suggested event payload:

type ChatKitContentResizeEvent = CustomEvent<{
  height: number; // rendered content height in CSS pixels
}>;

The resize signal would need to update after initial render, thread changes, streaming deltas, widgets, history transitions, composer growth, and responsive-width reflow.

Why this matters

A single page scroll owner:

• avoids nested-scroll and scroll-trap behavior;
• matches document-oriented research and support experiences;
• behaves more naturally with surrounding page content;
• improves mobile scrolling and keyboard navigation;
• preserves ChatKit's polished messages, widgets, tools, history, and composer instead of forcing integrators to replace the UI.

thread.autoScroll is useful while ChatKit owns the scroll container, but it does not address this layout mode. The current supported workaround is to dedicate a fixed/full viewport to ChatKit, which is not appropriate for every integration.

Environment

• @openai/chatkit 1.7.0
• custom ChatKit server integration
• CDN web component at https://cdn.platform.openai.com/deployments/chatkit/chatkit.js
• reproduced in Chromium

Related to the iframe/customization boundaries discussed in #57, #86, and #205, but this request is specifically for a supported height/scroll ownership contract rather than raw CSS or general self-hosting.