Mixins / foldkit-mixins-ui

ThinkingSteps

namespace · packages/mixins-ui/src/thinkingSteps.ts:1

export * as ThinkingSteps from './thinkingSteps.js'

In the guides

Members

ThinkingSteps.elapsed

function · packages/mixins-ui/src/thinkingSteps.ts:118

function elapsed(milliseconds: number): string

A duration as a reader says it: 0.4s, 1.2s, 12s, 1m 5s.

ThinkingSteps.shown

function · packages/mixins-ui/src/thinkingSteps.ts:114

function shown(
  open: Option.Option<boolean>,
  steps: ReadonlyArray<ThinkingStep>,
): boolean

Whether the trace is open: as the reader asked, or else while it runs.

ThinkingSteps.stateOf

function · packages/mixins-ui/src/thinkingSteps.ts:107

function stateOf(
  steps: ReadonlyArray<ThinkingStep>,
): 'running' | 'done' | 'failed'

The trace's state, from its top steps: running while any runs or any waits with none failed, failed once one failed and none runs, done once every step is. A trace with no steps yet is running.

ThinkingSteps.StateWords

type · packages/mixins-ui/src/thinkingSteps.ts:69

type StateWords = {
  readonly [State in StepState]: string
}

The words that say each state, beside a step's title.

ThinkingSteps.StepState

type · packages/mixins-ui/src/thinkingSteps.ts:52

type StepState = 'pending' | 'running' | 'done' | 'failed'

ThinkingSteps.ThinkingStep

interface · packages/mixins-ui/src/thinkingSteps.ts:54

interface ThinkingStep {
  readonly id: string
  readonly title: string
  readonly state: StepState
  readonly duration?: number | undefined
  readonly icon?: Html | undefined
  readonly detail?: Html | string | undefined
  readonly steps?: ReadonlyArray<ThinkingStep> | undefined
}

ThinkingSteps.ThinkingStepsSlots

const · packages/mixins-ui/src/thinkingSteps.ts:23

const ThinkingStepsSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly trigger: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"aria-expanded">], readonly Slot.RequirementName[], boolean>; readonly summary: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly chevron: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly panel: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly list: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capabil …;

An assistant's reasoning and tool calls as a trace, ai-elements' Reasoning and Chain of Thought: a button that shows and hides the list of steps, saying Thinking (the running step's title) while it works and Thought for 4s once done, and the steps, each with a marker for its state, its title, how long it took, and detail and steps of its own.

Whether the trace is open is the application's, as an Option: none follows the work, open while it runs and shut once it is done, and the button sends the state the reader asked for, which the application keeps from then on. Given onToggleStep, a step with detail is a button that shows and hides it, the open ones the application's (Accordion.toggled applies a press); without it, every detail shows. A shut part stays drawn and inert, so its close can animate and aria-controls names a node. A step's state is said in words beside its title; the marker is hidden from assistive technology.

ThinkingSteps.ThinkingStepsView

interface · packages/mixins-ui/src/thinkingSteps.ts:78

interface ThinkingStepsView<Message> {
  readonly id: string
  readonly steps: ReadonlyArray<ThinkingStep>
  readonly open: Option.Option<boolean>
  readonly onToggle: (open: boolean) => NoInfer<Message>
  readonly duration?: number | undefined
  readonly summary?: string | undefined
  readonly openSteps?: ReadonlyArray<string> | undefined
  readonly onToggleStep?: ((id: string) => NoInfer<Message>) | undefined
  readonly stateWords?: StateWords | undefined
  readonly style?: NamedStyle<typeof ThinkingStepsSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

ThinkingSteps.view

function · packages/mixins-ui/src/thinkingSteps.ts:148

function view<Message>(
  options: ThinkingStepsView<Message>,
  h: HtmlBuilder<Message>,
): Html