Angular LLM Kit Checkpoint

Updated on Aug 10, 2026

Conversation flows can change as users explore different directions, revisit an earlier turn, or reconsider a response. Use the Checkpoint component to mark a recovery point between conversation turns.

The Checkpoint component adds an anchor point between conversation turns and offers two explicit recovery actions: starting the conversation over from scratch, or regenerating just the most recent response without discarding the rest of the thread.

The following example demonstrates the Checkpoint component placed between and around conversation turns, responding to user interactions. Hover over the top of the conversation or between the messages to reveal the Checkpoint and its actions.

Change Theme

Theme

Loading ...

Configuring the State

Use the state input to configure the Checkpoint's currently displayed recovery option. Bind it to a CheckpointState value that represents the recovery action you want to offer.

The CheckpointState type supports three states:

• startOver—Represents an option to reset the conversation from the beginning.
• restore—Represents an option to return the conversation to an earlier turn.
• redo—Represents an option to regenerate the latest response.

These states describe the recovery options presented by the Checkpoint. The component updates the separator's content to reflect the current state, while your application defines the conversation logic that runs after the user selects that action.

When a user selects the Checkpoint action, the component emits an action event that exposes the selected value through the action property of the CheckpointActionEvent. Handle this event to perform the corresponding recovery operation in your application depending on the current Checkpoint state.

HTML

<kendo-checkpoint
    [state]="checkpointState"
    (action)="handleCheckpointAction($event)"
></kendo-checkpoint>

TypeScript

public checkpointState: CheckpointState = 'startOver';

public handleCheckpointAction(event: CheckpointActionEvent): void {
    if (event.action === 'startOver') {
        this.resetConversation();
    } else if (event.action === 'restore') {
        this.restoreConversation();
    } else {
        this.regenerateLastResponse();
    }
}

Controlling the Visibility

Use the displayMode property to control when the Checkpoint and its action are visible. The property supports two modes:

• hover—The default mode. The Checkpoint appears when the user hovers over the separator, keeping the conversation layout compact.
• always—The Checkpoint remains visible so users can find the action without hovering. Use this mode for touch interfaces or when the action must remain discoverable.

The default hover mode keeps the Checkpoint invisible until the user moves the pointer over the separator. This interaction works well for desktop conversations where preserving space is important.

In scenarios where hover is unreliable, like on touch devices, set displayMode to always to reserve space for the Checkpoint and keep its action constantly visible throughout the conversation.

html

<kendo-checkpoint displayMode="always">
</kendo-checkpoint>

Customizing the Content

Use the kendoCheckpointTemplate directive to replace the default state-specific content between the Checkpoint's separator lines. The template lets you present a custom action or message while the Checkpoint still marks the location between conversation turns.

html

<kendo-checkpoint [state]="checkpointState" displayMode="always">
    <ng-template kendoCheckpointTemplate>
        <button kendoButton fillMode="flat" size="xsmall">Review response</button>
    </ng-template>
</kendo-checkpoint>

See Also

• LLM Kit Overview
• API Reference of the CheckpointComponent