useDisplayMode - Skybridge

A host renders the view in one of a few layouts: a compact inline panel, fullscreen, or a floating picture-in-picture. useDisplayMode lets the view read which layout it is in and ask the host to switch to another.

Example

The product carousel shows more columns when it takes the full screen. From the inline panel it offers a “See all” button to expand, and once expanded, a “Collapse” button to shrink back.

import { useDisplayMode } from "skybridge/web";

function Carousel({ products }: { products: Product[] }) {
  const [mode, setMode] = useDisplayMode();

  return (
    <div>
      <ProductGrid
        products={products}
        columns={mode === "fullscreen" ? 4 : 2}
      />
      {mode === "inline" && (
        <button onClick={() => setMode("fullscreen")}>See all {products.length}</button>
      )}
      {mode === "fullscreen" && (
        <button onClick={() => setMode("inline")}>Collapse</button>
      )}
    </div>
  );
}

Returns

useDisplayMode returns a tuple: the current mode first, the setter second.

`displayMode`

displayMode: DisplayMode;

The mode the host is currently rendering the view in. It updates on its own when the host changes the layout (the user expanding or collapsing the view, for instance), so a component can render against it directly.

Mode	Layout	Requestable
`"inline"`	Compact panel embedded in the conversation, the default
`"fullscreen"`	The view takes over the host surface
`"pip"`	Picture in picture, floating above the conversation
`"modal"`	Overlay opened through `useRequestModal`, host-driven

`setDisplayMode`

setDisplayMode(mode: RequestDisplayMode): Promise<{ mode: RequestDisplayMode }>;

Asks the host to switch the view to mode. The host decides: it can grant the request, keep the current mode, or coerce to another. The promise resolves with the mode actually applied, so read the resolved value rather than assuming the request took. mode the mode to request, every DisplayMode except "modal":

// "inline" | "fullscreen" | "pip"
type RequestDisplayMode = Exclude<DisplayMode, "modal">;

On mobile, ChatGPT coerces a "pip" request to "fullscreen".

Design for the Host

Adapt the view to display mode, theme, and device

useLayout

Read the space and insets a mode switch brings

useRequestModal

Open the view as a host modal

​Example

​Returns

​displayMode

​setDisplayMode

Design for the Host

useLayout

useRequestModal

Example

Returns

`displayMode`

`setDisplayMode`