Show the status and steps of an AI reasoning process.
import { useState } from 'react';
import { Reasoning } from '@vrum/ui';
export default function Demo() {
const [open, setOpen] = useState(true);
return (
<Reasoning
status={"complete"}
title={"Review project context"}
activity={"Checked milestones and open tasks."}
duration={8}
steps={["Read project goals","Compare planned and completed milestones","Identify upcoming reviews"]}
open={open}
onOpenChange={setOpen}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
status | "active" | "complete" | "active" | Current activity or availability state. |
title | string | none | Heading shown above the content. |
activity | string | none | activity configuration. |
duration | number | none | duration configuration. |
steps | string[] | none | steps configuration. |
defaultOpen | boolean | false | Initial visibility for an uncontrolled component. |
open | boolean | none | Controlled visibility. |
onOpenChange | ((open: boolean) => void) | none | Called when visibility changes. |
labels | { thinking?: string; thought?: string; showSteps?: string; hideSteps?: string; } | none | labels configuration. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |
Checked milestones and open tasks.