# Place the panel

> Render AssistedPanel floating, as a sheet or embedded, size its window, and open it from a launcher, your own trigger or code.

`AssistedPanel` renders inside `AssistedProvider` and picks where it shows with `mode`. Import the styles once, anywhere in the app:

```tsx
import "@super-assist/react/styles.css";
```

## Pick a mode

Each branch below is from `examples/app/app/assistant.tsx`, which switches mode on a query parameter in development.

**Floating**: a window over the page that the user drags, resizes, minimizes and maximizes. While it is closed, a launcher button in the corner opens it.

```tsx
return (
  <>
    <main className="min-h-dvh p-6">{children}</main>
    <AssistedPanel mode="floating" />
  </>
);
```

**Sheet**: a column beside the page that takes the page's space, with no overlay. Closed, it is a slim rail with a button. Put it in a flex row with the page:

```tsx
return (
  <div className="flex h-dvh">
    <main className="min-w-0 flex-1 overflow-y-auto p-6">{children}</main>
    <AssistedPanel mode="sheet" />
  </div>
);
```

**Embedded**: the conversation and the composer, placed where your layout puts them. It has no header and no launcher, and it is always shown. Give its container a height:

```tsx
return (
  <div className="flex h-dvh">
    <main className="min-w-0 flex-1 overflow-y-auto p-6">{children}</main>
    <div className="w-md shrink-0 border-s">
      <AssistedPanel mode="embedded" />
    </div>
  </div>
);
```

## Name it

`title` and `icon` replace "Assistant" and the logo in the header and on the launcher. `description` is the header's line when no assisted page is open:

```tsx
<AssistedPanel
  mode="floating"
  title="Shop assistant"
  icon={<ShoppingBag />}
  description="Ask about anything in the shop."
/>
```

## Size the floating window

The floating window opens 420 by 640 px in the bottom-right corner, 24 px in. `defaultPosition` and `defaultSize` change where and how big it first opens. The user's moves and resizes persist across opens.

```tsx
<AssistedPanel
  mode="floating"
  defaultPosition="bottom-left"
  defaultSize={{ width: 480, height: 720 }}
/>
```

`resizable={false}`, `draggable={false}` and `windowControls={false}` turn off its edge handles, its dragging by the header, and its Minimize and Maximize buttons. Close stays.

## Open it from your chrome

`AssistedPanel.Trigger` is a small Assistant button for your own toolbar. It opens and closes the floating window or the sheet. From `examples/app/app/shell.tsx`:

```tsx
<div className="ms-auto flex gap-2">
  {mode !== "embedded" && <AssistedPanel.Trigger />}
  <Button variant="outline" size="sm" onClick={() => shop.call("reset")}>
    Reset shop
  </Button>
</div>
```

With `asChild`, your own button becomes the trigger. Pass `launcher={false}` when the trigger is the only way in:

```tsx
<AssistedPanel mode="floating" launcher={false} />

<AssistedPanel.Trigger asChild>
  <Button>Help</Button>
</AssistedPanel.Trigger>
```

The trigger may sit anywhere inside `AssistedProvider`, outside the panel.

## Open it from code

`useAssisted` opens and closes the panel. `open` with a message also sends it as the user's:

```tsx
export function AskAboutOrder({ id }: { id: string }) {
  const { open } = useAssisted();
  return (
    <Button onClick={() => open(`Why hasn't order #${id} shipped?`)}>Ask the assistant</Button>
  );
}
```

## Keep host dialogs out of the way

The floating panel sits at z-index 50, above the ring. A modal dialog's backdrop still blocks it. Make assisted dialogs non-modal, see [Make a dialog assisted](https://superassist.app/how-to/make-a-page-assisted.md#make-a-dialog-assisted).

Every prop is on [Roots and window](https://superassist.app/components/panel/roots-and-window.md#props). To change what the panel holds, see [Rearrange the panel's parts](https://superassist.app/how-to/rearrange-the-panel.md).