Window – Code

Implementation
Window Props

Common Examples

To use the Window, pass the required chat slot. Add header, rail, and artifact as needed. Docked, the window shows header and chat. Fullscreen, it reveals the full shell. header and chat keep the same React instance across the transition.

import { Window } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <Window
      header={<AppHeader title="Atlas" />}
      chat={<ChatLayout conversation={messages} prompt={prompt} />}
      rail={<ChatHistory items={chats} />}
      artifact={<TabbedLayout tabs={tabs} />}
    />
  );
}

Open control

Uncontrolled, the window owns open state, seeded by defaultOpen (true). Pass open and onOpenChange to control it from a store.

Maximize and restore

Uncontrolled size is seeded by defaultState ("docked"). Pass state and onStateChange to own it. useAppSurface().maximize() and restore() drive the same transitions.

Window states

Docked is a non-modal floating panel. Fullscreen is a modal takeover over a scrim. Esc or scrim click returns to docked.

Drag

Spread dragHandleProps from useAppSurface() onto a leading header action. The dragged position survives maximize and restore, and resets to the default corner only on close. The props are inert when fullscreen.

Region intents

showArtifact() and showRail() from a docked window maximize first, then open the region, in one call. The same AppSurfaceHandle is documented on AppShell.

Internationalization

Window owns ai-kit.window.label as the accessible name of the fullscreen dialog. Override it with aria-label. Region chrome uses the AppShell message IDs.

React Accessibility

Fullscreen traps focus over a scrim. Esc restores to docked.
Docked drag also supports arrow-key nudging through dragHandleProps.
The fullscreen dialog’s accessible name defaults to the localized window label.

<Window
  header={header}
  chat={chat}
  rail={rail}
  artifact={artifact}
  open={open}
  onOpenChange={setOpen}
  state={state}
  onStateChange={setState}
/>

`Window` Props

The Window accepts the following props and forwards remaining <div> attributes except children and style.

ReactNode

required

Center conversation. Preserved across docked and fullscreen.

ReactNode

Fullscreen-only right region. Omit to render no artifact.

string

Class merged onto the root. Override docked corner or size here.

Ref<AppSurfaceHandle>

Imperative surface handle for a parent. Prefer useAppSurface inside the tree.

boolean

default:"false"

Starts the fullscreen artifact collapsed on first paint.

boolean

default:"true"

Initial open state when uncontrolled.

boolean

default:"false"

Starts the fullscreen rail collapsed on first paint.

"docked" | "fullscreen"

default:"docked"

Initial size state when uncontrolled.

ReactNode

Header shown in both states and preserved across the transition.

(open: boolean) => void

Fired whenever open state changes. Required to drive a controlled window.

Fired whenever size state changes. Required to drive a controlled window.

boolean

Controlled open state.

ReactNode

Fullscreen-only left region. Omit to render no rail.

"docked" | "fullscreen"

Controlled size state.

AI Kit

Agent Experience

Window – Code

Common Examples

Open control

Maximize and restore

Window states

Drag

Region intents

Internationalization

React Accessibility

`Window` Props

​Common Examples

​Open control

​Maximize and restore

​Window states

​Drag

​Region intents

​Internationalization

​React Accessibility

​Window Props

Common Examples

Open control

Maximize and restore

Window states

Drag

Region intents

Internationalization

React Accessibility

`Window` Props