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.
The import and the props worth knowing about, in one place.
import { Ai47 } from "@/components/beste/piece/ai47";
<Ai47
tools={[
{
"label": "Searching docs",
"ms": 800
},
{
"label": "Reading file",
"ms": 1100
},
{
"label": "Running query",
"ms": 1400
},
{
"label": "Writing answer",
"ms": 900
}
]}
answer="Churn rose 2.1% in August, mostly from trial accounts that never connected a data source."
/>