New to Kendo UI for jQuery? Start a free 30-day trial

Thoughts

configuration

An array of thought objects rendered inside the step body. Each item can include label, secondaryLabel, svgIcon, linesAdded, linesRemoved, time, children, and completed properties.

thoughts

Array

Default: []

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Researching",
    expandable: true,
    expanded: true,
    thoughts: [
        { label: "Searching web", svgIcon: "search" },
        { label: "Reading results", completed: true }
    ]
});
</script>

thoughts.children

String

An HTML string rendered as a nested body inside the thought item.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Analyzing",
    expanded: true,
    thoughts: [
        { label: "Result", children: "<pre>{ ok: true }</pre>" }
    ]
});
</script>

thoughts.completed

Boolean

Marks the individual thought item as completed by applying the k-thought-completed CSS class.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Running",
    expanded: true,
    thoughts: [
        { label: "Step 1", completed: true },
        { label: "Step 2" }
    ]
});
</script>

thoughts.label

String

The primary label text for the thought item.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Reasoning",
    expanded: true,
    thoughts: [
        { label: "Checking database" }
    ]
});
</script>

thoughts.linesAdded

Number

The number of lines added, displayed as a green delta badge on the thought item.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Editing file",
    expanded: true,
    thoughts: [
        { label: "utils.js", linesAdded: 12, linesRemoved: 3 }
    ]
});
</script>

thoughts.linesRemoved

Number

The number of lines removed, displayed as a red delta badge on the thought item.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Editing",
    expanded: true,
    thoughts: [
        { label: "app.js", linesAdded: 5, linesRemoved: 10 }
    ]
});
</script>

thoughts.secondaryLabel

String

A secondary label displayed after the separator in the thought item.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Reasoning",
    expanded: true,
    thoughts: [
        { label: "Querying", secondaryLabel: "database" }
    ]
});
</script>

thoughts.svgIcon

String

The name of the SVG icon displayed for the thought item.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Running",
    expanded: true,
    thoughts: [
        { label: "Searching", svgIcon: "search" }
    ]
});
</script>

thoughts.time

String

A time or duration string displayed after a separator in the thought item.

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Running",
    expanded: true,
    thoughts: [
        { label: "API call", time: "1.2s" }
    ]
});
</script>