Mount Modes & Theming
Where the chat window appears on the page, and how to make it match your app's look.
Mount Modes
settings.mount.mode controls how HilChatWindowChrome places the window on the page:
| Mode | Behavior |
|---|---|
'overlay'(default) |
A floating panel anchored to the bottom-right of the screen with a dimmed backdrop behind it — the same fixed-position pattern as the classic HIL overlay. Matches today's default HIL behavior with no extra setup. |
'docked' |
Renders into a specific container you choose — a sidebar panel, a fixed pane in your layout — instead of floating. Requires settings.mount.attachTo (a CSS selector string, or a direct HTMLElement reference) pointing at that container. If the target can't be found, nothing renders — it does not silently fall back to another placement. |
'inline' |
Renders in normal document flow exactly where you place the <HilChatWindow> component — no backdrop, no portal. Useful when you're composing your own page layout around it directly. |
Docked Example
const settings = {
...defaultChatSettings,
mount: { mode: 'docked', attachTo: '#hil-chat-slot' },
};
// elsewhere on the page:
<div id="hil-chat-slot" />Window-Chrome Controls
settings.windowControls shows or hides individual icons in the header
(fullscreen, dock, minimize, close). This
is useful when a mode doesn't need certain controls — for example, a window docked
permanently into a sidebar slot has no reason to show an "undock" icon. See
Settings Reference for what each flag currently does.
Theming
The chat window's styles default from the same CSS custom properties your app already uses to
theme hil-ui (its --hil-panel-*, --hil-action-*
variables), plus a handful of chat-specific ones:
| Variable | Controls |
|---|---|
--hil-chat-bubble-user-bg | Background color of the person's own reply bubbles. |
--hil-chat-bubble-user-text | Text color inside the person's own reply bubbles. |
--hil-chat-bubble-system-bg | Background color of the workflow's message bubbles. |
--hil-chat-bubble-system-text | Text color inside the workflow's message bubbles. |
--hil-chat-bg | Overall panel background. |
--hil-chat-border | Panel and section border color. |
An app that already themes hil-ui gets a visually consistent chat window with no
extra theming work, since these fall back to the equivalent hil-ui variables by
default. Use settings.theme to override any of them per-instance:
const settings = {
...defaultChatSettings,
theme: {
'--hil-chat-bubble-user-bg': '#2f6feb',
'--hil-chat-bg': '#0f172a',
},
};@bizfirst/hil-ui/styles and @bizfirst/hil-ui-chat-window/styles are imported — see Quick Start, step 2.