Window

Window handles layout changes in the main channel when opening and closing a Thread.

Best Practices

  • Always wrap main channel UI in Window when using threads.
  • Keep Window alongside Thread to prevent layout shifts.
  • Avoid manual layout hacks; rely on Window for thread transitions.
  • Use the thread prop only for custom thread-opening flows.
  • Test window behavior across mobile and desktop breakpoints.

Basic Usage

Window should wrap the main channel UI and be rendered alongside Thread. This keeps layout changes smooth when threads open and close.

<Chat client={client}>
  <Channel channel={channel}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>

Props

thread

An optional prop to manually trigger the opening of a thread.

Type
object