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, content, encoded, 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.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.content

String

Content rendered as a nested body inside the thought item. HTML-encoded by default; set thoughts.encoded to false to render it as raw HTML.

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

thoughts.encoded

Boolean

Controls whether thoughts.content is HTML-encoded before it is rendered. Set to false to render thoughts.content as raw HTML for trusted content.

Default: true

<div id="chain"></div>
<script>
$("#chain").kendoChainOfThought({
    label: "Analyzing",
    expanded: true,
    thoughts: [
        { label: "Result", content: "<pre>{ ok: true }</pre>", encoded: false }
    ]
});
</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>