Prompt Input

import * as React from 'react'
import PromptInput from '@/components/ui/prompt-input'

const prompts = [
  'Build a pricing page with monthly and yearly toggles, three plans, and a comparison table.',
  'Add keyboard shortcuts to the command palette and show them next to each action.',
]

export default function Demo() {
  const [prompt, setPrompt] = React.useState(0)
  const [typed, setTyped] = React.useState(48)
  const [pending, setPending] = React.useState(false)
  const [value, setValue] = React.useState(prompts[0].slice(0, 48))
  const [auto, setAuto] = React.useState(true)
  const [sent, setSent] = React.useState('')
  const text = prompts[prompt]

  React.useEffect(() => {
    if (!auto) return
    const done = typed >= text.length
    const timer = setTimeout(
      () => {
        if (!done) {
          setTyped((count) => count + 1)
          setValue(text.slice(0, typed + 1))
        } else if (!pending) setPending(true)
        else {
          setPending(false)
          setValue('')
          setTyped(0)
          setPrompt((index) => (index + 1) % prompts.length)
        }
      },
      done ? (pending ? 1800 : 900) : 32,
    )
    return () => clearTimeout(timer)
  }, [auto, pending, text, typed])

  return (
    <div className="w-full max-w-xl space-y-3" onPointerDown={() => setAuto(false)}>
      <PromptInput
        onSubmit={(message, selection) => setSent(`Sent with ${selection.model}: ${message}`)}
        onValueChange={setValue}
        pending={pending}
        placeholder="Describe what you want to build…"
        value={value}
      />
      <output className="block min-h-5 text-xs leading-5 text-muted-foreground">{sent}</output>
    </div>
  )
}