Thinking Steps

Reasoning3 steps
About this piece

Thinking Steps

Reasoning panel whose numbered steps stagger in once while a thin connector draws down between them, finishing on a final answer row that stays in place.

Usage

The import and the props worth knowing about, in one place.

import { Ai51 } from "@/components/beste/piece/ai51";

<Ai51
  title="Reasoning"
  steps={[
    "Identify the customer segment behind the refund spike",
    "Check whether the pricing change overlaps the spike",
    "Weigh a targeted email against a pricing rollback"
  ]}
  answer="Send a clarifying email to annual plan customers first; roll back only if refunds stay high next week."
/>

More AI pieces

View all AI
Thought for 8 seconds

User wants to rate limit 100 req/min per key.

Leaky bucket gives smoother traffic than fixed window.

Redis INCR with TTL is the simplest implementation.

Chain of Thought

Collapsible reasoning panel with a brain icon header and italic thought bullets on a left border rail.

Parse user intent
Search knowledge base
Draft response
Format citations

Agent Steps

Vertical agent plan with done, active, and pending states indicated by check, spinner, and dot icons.

Thinking

Thinking Dots

Three staggered violet-to-fuchsia dots inside a pill next to a Thinking label.

Suggestion Pills

Wrapping row of pill suggestions that seed the prompt input with common intents.

end_turn248 / 1,024
Response completed normally.

Stop Reason

Completion stop reason card where the icon tile color flips per reason (end_turn, stop_sequence, tool_use, max_tokens) and shows the token count.

  • Searching docs
  • Reading file
  • Running query
  • Writing answer

Tool Calls

A plain ledger of tool calls: a hairline fills under the step that is running, its duration lands on the right when it finishes, and the answer settles in below.