FloatingComposer

Ask Okami right where you tapped: a Composer that floats up on a free gap or a + Book, with what it's for above the field and the microphone one tap away. What's sent goes to the chat with what the page knew. Side by side only: on a phone the tap asks in the app's own composer at the foot.

On a gap

Tap a free gap. The composer floats up under it, as wide as the gap (18rem at least): the field alone, what it's for as its placeholder, the cursor in it. Escape or a tap outside closes it; sending closes it too. Without room below, it opens above.

10:0010:45PeterHaircut · 45 min

12:00–13:00Break

import { FloatingComposer } from "@/components/shared/floating-composer";
import { ScheduleDay } from "@/components/shared/schedule-day";

<ScheduleDay day={day} onBook={(gap, anchor) => setAsk({ gap, anchor })} />

<FloatingComposer
  open={ask !== null}
  anchor={shown?.anchor ?? null}
  onClose={() => setAsk(null)}
  title={t("ask.gap", { name, time })}
  value={text}
  onValueChange={setText}
  onSend={(words) => {
    send(draft, words);
    setAsk(null);
  }}
  sendLabel={t("send")}
  busy={busy}
  dictate={dictate}
/>

API reference

Prop	Type	Default	Description
open	boolean	—	Floating, or not.
anchor	Element \| null	—	What it floats from: the tapped gap or + Book. Keep it while it closes, so it fades out in place.
onClose	() => void	—	Escape, or a tap outside.
title	string	—	What it's for, as the field's placeholder (onto more lines when long): “Book with Pele from 9:00”. Also the panel's accessible name.
example	string	—	What to say, after the title in the field: “Move Matúš · 10:00 — Where to? Thursday at 2…”. For an ask whose answer takes a shape (a time, hours).
beam	boolean	true	The owner's composer's colourful beam riding the field's edge (Composer › beam). Off under reduced motion.
…Composer	Composer's props	—	value, onValueChange, onSend, placeholder, sendLabel, busy, disabled, attach, dictate — as on the Composer, which is always solid here.

Guidelines

For an action on the page that Okami does: the page knows who, which day and when, so the owner only says the rest. Send it to the chat with that, as data.
One at a time. Tapping another gap moves it; it never stacks.
It asks, the chat answers: close it on send and bring the chat into view, never answer inside it.