FollowUpSuggestions

ChatReact · Next.js

Renders suggested follow-up questions as chips. Feed it a static list or the follow-ups your pipeline returns alongside an answer; clicking one fires onSelect so you can run it as the next query.

<FollowUpSuggestions />

Live preview

Follow-up questions

Installation

No dependencies to install — just React + Tailwind CSS. It's a presentational component (no data fetching), so the same source works unchanged in React and Next.js (App or Pages Router) — there's no separate variant. Copy it into your project (e.g. components/FollowUpSuggestions.tsx) and import it.

Usage

usage.tsx

import { FollowUpSuggestions } from "@/components/FollowUpSuggestions";

export default function Example() {
  return (
    <FollowUpSuggestions suggestions={followUps} onSelect={runQuery} />
  );
}

Props

Prop	Type	Default	Description
`suggestions`required	`string[]`	—	The follow-up questions to show.
`onSelect`required	`(question: string) => void`	—	Called when a chip is clicked.
`label`	`string`	"Follow-up questions"	Heading above the chips.

Component source copy-paste ready

Presentational component — no data fetching, so the same source works unchanged in React and Next.js. There's no separate Next.js variant to copy.

FollowUpSuggestions.tsx

"use client";

interface FollowUpSuggestionsProps {
  suggestions: string[];
  onSelect: (question: string) => void;
  /** Optional heading above the chips. */
  label?: string;
  className?: string;
}

/**
 * FollowUpSuggestions — clickable chips of suggested next questions. Feed it
 * either a static list or the follow-ups your pipeline returns alongside an
 * answer; clicking one fires onSelect so you can run it as the next query.
 */
export function FollowUpSuggestions({
  suggestions,
  onSelect,
  label = "Follow-up questions",
  className = "",
}: FollowUpSuggestionsProps) {
  if (!suggestions?.length) return null;
  return (
    <div className={className}>
      {label && <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-500">{label}</p>}
      <div className="flex flex-wrap gap-2">
        {suggestions.map((q, i) => (
          <button
            key={i}
            type="button"
            onClick={() => onSelect(q)}
            className="group flex items-center gap-1.5 rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-left text-[13px] text-zinc-700 transition hover:border-zinc-400 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
          >
            {q}
            <svg
              width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
              className="text-zinc-400 transition group-hover:translate-x-0.5"
            >
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </button>
        ))}
      </div>
    </div>
  );
}