Reasoning

"use client"

import * as React from "react"
import { Reasoning } from "@/components/ui/reasoning"

const THOUGHTS = `**Reading the failing test**

The snapshot test for RecentRuns fails only in CI. Locally the dates render as "Oct 21", in CI as "21 Oct", so the formatter is picking up the machine locale.

**Finding where the date is formatted**

formatRunDate calls toLocaleDateString() with no locale argument. Passing "en-US" and a fixed time zone makes the output stable everywhere.

**Checking other callers**

Two more components use the same helper. Fixing it at the source covers all three without touching the snapshots.`

/** Streams a model's thinking in, then settles into a summary you can reopen. Loops. */
export default function ReasoningDemo() {
  // Starts partway in, so the first frame already shows thinking.
  const [length, setLength] = React.useState(Math.round(THOUGHTS.length * 0.4))
  const [run, setRun] = React.useState(0)
  const done = length >= THOUGHTS.length

  React.useEffect(() => {
    const id = window.setTimeout(
      () => {
        if (done) {
          setLength(0)
          setRun((r) => r + 1)
        } else setLength((n) => Math.min(THOUGHTS.length, n + 10))
      },
      done ? 5000 : length === 0 ? 300 : 110,
    )
    return () => window.clearTimeout(id)
  }, [length, done])

  return (
    <div className="flex h-[460px] w-full items-start justify-center overflow-hidden p-6 pt-12">
      <div className="w-full max-w-xl">
        <Reasoning key={run} defaultOpen text={THOUGHTS.slice(0, length)} state={done ? "done" : "streaming"} />
      </div>
    </div>
  )
}