Ai Suggestions

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useMemo } from "react";
6 
7const SPRING_DEFAULT = {
8  bounce: 0.1,
9  duration: 0.25,
10  type: "spring" as const,
11};
12const STAGGER_SECONDS = 0.045;
13 
14export type AISuggestion = {
15  id: string;
16  label: string;
17};
18 
19export type AISuggestionsProps = {
20  className?: string;
21  /** Optional heading, e.g. "Follow-ups". */
22  label?: string;
23  onSelect?: (suggestion: AISuggestion) => void;
24  suggestions: AISuggestion[];
25};
26 
27/**
28 * Distance from the middle of the row, so the stagger radiates outwards from the
29 * centre instead of sweeping left to right.
30 *
31 * A left-to-right sweep implies reading order and priority — that the first chip
32 * matters most. These are alternatives of equal weight, and radiating from the
33 * centre says so.
34 */
35const centreOutOrder = (count: number): number[] => {
36  const middle = (count - 1) / 2;
37  return Array.from({ length: count }, (_, index) => Math.abs(index - middle));
38};
39 
40/**
41 * Prompt suggestion chips.
42 *
43 * Chips are the empty state of a chat and the follow-up row after an answer, so
44 * they need to arrive without feeling like a notification.
45 */
46const AISuggestions = ({
47  className,
48  label,
49  onSelect,
50  suggestions,
51}: AISuggestionsProps) => {
52  const shouldReduceMotion = useReducedMotion();
53  const delays = useMemo(
54    () => centreOutOrder(suggestions.length),
55    [suggestions.length]
56  );
57 
58  return (
59    <div className={cn("flex w-full flex-col gap-2", className)}>
60      {label ? (
61        <p className="text-muted-foreground text-xs uppercase tracking-wide">
62          {label}
63        </p>
64      ) : null}
65 
66      <ul className="flex list-none flex-wrap gap-2">
67        <AnimatePresence initial>
68          {suggestions.map((suggestion, index) => (
69            <motion.li
70              animate={{ opacity: 1, scale: 1, y: 0 }}
71              exit={
72                shouldReduceMotion
73                  ? { opacity: 0, transition: { duration: 0 } }
74                  : { opacity: 0, scale: 0.94 }
75              }
76              initial={
77                shouldReduceMotion
78                  ? { opacity: 1, scale: 1, y: 0 }
79                  : { opacity: 0, scale: 0.94, y: 6 }
80              }
81              key={suggestion.id}
82              layout={!shouldReduceMotion}
83              transition={
84                shouldReduceMotion
85                  ? { duration: 0 }
86                  : {
87// … truncated