Reasoning Block

Reasoning component

<loquix-reasoning-block> presents longer-running model work in a collapsible panel. It supports a live thinking state and completed metadata such as duration and token count.

loquix-reasoning-blockcollapsiblestreaming-aware

Preview

Completed reasoning Live component

Usage

import '@loquix/core/define/define-reasoning-block';

<loquix-reasoning-block
  status="done"
  duration="6"
  tokens="284"
  preview="Compared layout and composition options"
></loquix-reasoning-block>

const reasoning = document.querySelector('loquix-reasoning-block');

reasoning.content = streamedReasoningSummary;

reasoning.addEventListener('loquix-reasoning-toggle', (event) => {
  trackReasoningVisibility(event.detail.open);
});

Properties

Property	Attribute	Type	Default	Description
`status`	`status`	`'thinking' \| 'done'`	`'done'`	Current reasoning lifecycle.
`duration`	`duration`	`number`	—	Elapsed seconds shown when complete.
`tokens`	`tokens`	`number`	—	Optional token count shown with duration.
`preview`	`preview`	`string`	derived	One-line collapsed summary.
`content`	`content`	`string`	`''`	Full text rendered safely as text, not HTML.
`defaultOpen`	`default-open`	`boolean`	state-dependent	Initial expanded state. User toggles take precedence afterward.

Events

Event	Detail	Description
`loquix-reasoning-toggle`	`{ open: boolean }`	Fired after the user expands or collapses the panel.

Content slot

The default slot can provide richer markup. When it contains non-whitespace content, it takes precedence over the content property.

<loquix-reasoning-block status="done" duration="8" default-open>
  <strong>Retrieved 12 sources.</strong>
  Ranked the top results using semantic similarity.
</loquix-reasoning-block>

CSS parts

Part	Purpose
`container`	Outer panel.
`header`	Expand/collapse button.
`label`	Status label.
`meta`	Duration and token metadata.
`chevron`	Disclosure indicator.
`preview`	Collapsed summary.
`content`	Expanded body.
`cursor`	Streaming caret during `thinking`.

CSS custom properties

Variable	Purpose
`--loquix-thought-bg`	Panel background.
`--loquix-thought-border-color`	Panel border color.
`--loquix-thought-text-color`	Body text color.
`--loquix-streaming-color`	Thinking-state accent and caret.