Suggest Field

"use client"

import * as React from "react"

import { SuggestField } from "@/components/chat/suggest-field"

const GHOST = "can be swapped for any backend that streams SSE."

export default function SuggestFieldDemo() {
  const [value, setValue] = React.useState(
    "The registry ships the conversation surface as primitives, so the transport"
  )
  const [suggestion, setSuggestion] = React.useState("")
  const [loading, setLoading] = React.useState(false)
  const timer = React.useRef<number | null>(null)

  React.useEffect(
    () => () => {
      if (timer.current) window.clearTimeout(timer.current)
    },
    []
  )

  return (
    <div className="max-w-xl">
      <SuggestField
        value={value}
        onValueChange={setValue}
        onRequest={() => {
          setLoading(true)
          timer.current = window.setTimeout(() => {
            setSuggestion(GHOST)
            setLoading(false)
          }, 700)
        }}
        onDismiss={() => setSuggestion("")}
        suggestion={suggestion}
        loading={loading}
        placeholder="Start a sentence…"
      />
    </div>
  )
}