Chat Header

Layout component

<loquix-chat-header> presents the assistant identity and reserves predictable regions for model, mode, and utility controls.

loquix-chat-headercomposableprivate-mode aware

Preview

Header with custom identity Live component

Atlas Pro · Online

Usage

import '@loquix/core/define/define-chat-header';
import '@loquix/core/define/define-message-avatar';

<loquix-chat-header agent-name="Research Assistant">
  <loquix-message-avatar
    slot="avatar"
    variant="initials"
    name="RA"
  ></loquix-message-avatar>

  <button slot="controls" aria-label="Open settings">Settings</button>
</loquix-chat-header>

Properties

Property	Attribute	Type	Default	Description
`agentName`	`agent-name`	`string`	—	Display name of the assistant.
`showModelBadge`	`show-model-badge`	`boolean`	`false`	Shows the built-in model badge area.
`privateMode`	`private-mode`	`boolean`	`false`	Hides model information for private conversations.

Slots

Slot	Purpose
`avatar`	Agent avatar or product icon.
`title`	Replaces the generated agent title.
`controls`	Model badge, settings, or other utility actions.
`mode-switcher`	Tabs, pills, or another mode selection control.

CSS parts

Part	Purpose
`header`	Outer header bar.
`title`	Agent title text.

loquix-chat-header::part(header) {
  border-bottom: 0;
}

loquix-chat-header::part(title) {
  letter-spacing: -0.02em;
}

CSS custom properties

Variable	Purpose
`--loquix-header-bg`	Header background.
`--loquix-header-color`	Header text color.
`--loquix-header-height`	Height of the bar.
`--loquix-header-padding`	Horizontal padding.
`--loquix-border-color`	Bottom border color.