Follow Up Suggestions

import * as React from 'react'
import FollowUpSuggestions, {
  type FollowUpSuggestion,
} from '@/components/ui/follow-up-suggestions'

const items: FollowUpSuggestion[] = [
  { id: 'architecture', label: 'Explain the recommended architecture' },
  { id: 'priorities', label: 'Prioritize the first release' },
  { id: 'compare', label: 'Compare the strongest libraries' },
  {
    id: 'custom',
    label: 'Ask a different question',
    custom: true,
    placeholder: 'What else should I look into?',
  },
]

export default function Demo() {
  const [selected, setSelected] = React.useState(items[1].id)
  const [auto, setAuto] = React.useState(true)
  const [sent, setSent] = React.useState('')

  React.useEffect(() => {
    if (!auto) return
    const index = items.findIndex((item) => item.id === selected)
    const timer = setTimeout(
      () => setSelected(items[(index + 1) % items.length].id),
      index === items.length - 1 ? 2600 : 1400,
    )
    return () => clearTimeout(timer)
  }, [auto, selected])

  return (
    <div
      className="w-full max-w-lg space-y-3"
      onKeyDown={() => setAuto(false)}
      onPointerDown={() => setAuto(false)}
    >
      <FollowUpSuggestions
        items={items}
        onDismiss={() => setSent('Dismissed')}
        onSelect={(id, value) =>
          setSent(
            value ? `Asked: ${value}` : `Selected: ${items.find((item) => item.id === id)?.label}`,
          )
        }
        onSelectedIdChange={setSelected}
        selectedId={selected}
      />
      <output aria-live="polite" className="block min-h-5 text-xs leading-5 text-muted-foreground">
        {sent}
      </output>
    </div>
  )
}