New to KendoReact? Start a free 30-day trial

Reasoning

Component

Definition

Package:@progress/kendo-react-conversational-ui

Properties Interface:ReasoningProps

Properties

completed?

boolean

Semantic lifecycle state. false renders active/in-progress treatment; true renders the finished, reduced-emphasis treatment.

Default:

false

contentTemplate?

ComponentType<ReasoningContentTemplateProps>

A custom component that replaces the default body content rendering. Receives the reasoning children via ReasoningContentTemplateProps.

Example:

tsx

const MyContent = ({ children }: ReasoningContentTemplateProps) => <div>{children}</div>;
<Reasoning contentTemplate={MyContent}>Reasoning body text</Reasoning>

defaultExpanded?

boolean

The initial expanded state in uncontrolled mode. Ignored when expanded is provided.

Default:

false

expandable?

boolean

Whether the head exposes disclosure behavior (a toggle affordance).

Default:

false

expanded?

boolean

Controls the expanded state of the body in controlled mode. Use together with onExpandedChange.

label?

string

Summary label in the head.

Default:

"Reasoning"

Example:

tsx

<Reasoning label="Thinking" />

onExpandedChange?

(event: ReasoningExpandedChangeEvent) => void

Callback fired when the user toggles the reasoning body.

Parameters:eventReasoningExpandedChangeEvent

Example:

tsx

<Reasoning onExpandedChange={(e) => setExpanded(e.expanded)} />

secondaryLabel?

string

Secondary descriptive text (subtle), rendered next to label. Include timing text here when needed.

svgIcon?

SVGIcon

Head icon. Pass an icon object from @progress/kendo-svg-icons.

Default:

sparklesIcon