Follow-up Suggestion Chips

The "you might ask" row that sits under an AI reply. Chips fade in one after another; when you click one, the component creates a copy on the body that flies along a slight upward arc to where the text lands in the input, fading its border and background on the way so only the text arrives. It then writes the text into the input, focuses it and flashes a ring around it, while the other chips fold away. Passing a new set of suggestions replays the entrance automatically. Without a targetRef, only the press feedback and collapse remain and onSelect is called right away.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<FollowUpSuggestionChips/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/follow-up-suggestion-chips.en.json

Usage

import * as React from "react";
import { FollowUpSuggestionChips } from "@/components/ui/follow-up-suggestion-chips";

export function ChatFooter() {
  const inputRef = React.useRef<HTMLInputElement>(null);
  const [value, setValue] = React.useState("");

  return (
    <>
      <FollowUpSuggestionChips
        suggestions={["週三要帶什麼？", "推薦室內景點", "改查台中"]}
        targetRef={inputRef}
        onSelect={(text) => setValue(text)}
      />
      <input
        ref={inputRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </>
  );
}

Props

FollowUpSuggestion

FollowUpSuggestionSelectDetail

How it works

• Landing point: the start of the input's text area (left edge + border + padding-left), vertically centred; when the input already has text, a hidden span with copied font styles measures its width so the chip lands near the end of the text (clamped to the visible area). In a textarea it lands on the last line.
• Writing the text: the component writes through the native value setter and dispatches an input event, so a controlled input's onChange receives the new value too; it also calls onSelect, where the parent can setValue as usual — both paths end in the same state.
• The flying copy is portalled into the body with position: fixed, while the original chip becomes a visibility: hidden placeholder, so the row layout never jumps mid-flight.
• Timing variables: --wb-follow-up-suggestion-chips-duration (hover colour transition, equal to duration), --wb-follow-up-suggestion-chips-ease (default cubic-bezier(0.23,1,0.32,1)) and --wb-follow-up-suggestion-chips-ring (the colour of the ring flashed on the input on landing).
• Passing new suggestions (a different set of ids) resets the selection and collapse state and replays the staggered entrance.

Accessibility

• The row is a role="group" labelled by label; every chip is a native type="button" button
• Keyboard: Tab into the row, then ← / → move focus between chips (roving tabindex), Home / End jump to the ends, and Enter / Space select; keydown starts with an IME composition guard
• After a selection focus moves to the targetRef input with the caret at the end; an aria-live="polite" region announces "Filled in: …"
• When the system "reduce motion" setting is on, there is no flight or stagger: the chips simply fade out and the text is filled in immediately