Steer composer

"use client"

import * as React from "react"
import type { SteerMessage } from "@/components/steer-composer"
import { SteerComposer } from "@/components/steer-composer"

const minutesAgo = (m: number) => new Date(Date.now() - m * 60_000).toISOString()

const initial: SteerMessage[] = [
  { id: "m1", text: "Skip the archived orders; they’re read-only.", sentAt: minutesAgo(6), state: "picked-up", pickedUpAt: minutesAgo(5) },
  { id: "m2", text: "Use the EU region for the new column’s default.", sentAt: minutesAgo(1), state: "queued" },
]

export default function Example() {
  const [messages, setMessages] = React.useState(initial)
  const timers = React.useRef<ReturnType<typeof setTimeout>[]>([])
  React.useEffect(() => () => timers.current.forEach(clearTimeout), [])
  const move = (id: string, patch: Partial<SteerMessage>, after: number) =>
    timers.current.push(setTimeout(() => setMessages((ms) => ms.map((m) => (m.id === id ? { ...m, ...patch } : m))), after))

  return (
    <SteerComposer
      className="max-w-md"
      agentName="Build agent"
      run={{ status: "running", lastHeardAt: minutesAgo(0.5) }}
      messages={messages}
      onSend={(text) => {
        const id = String(Date.now())
        setMessages((ms) => [...ms, { id, text, sentAt: new Date().toISOString(), state: "sending" }])
        // Your service says when it has the message, and again when the agent reads it.
        move(id, { state: "queued" }, 600)
        move(id, { state: "picked-up", pickedUpAt: new Date().toISOString() }, 4000)
      }}
      onWithdraw={(id) => setMessages((ms) => ms.filter((m) => m.id !== id))}
    />
  )
}