AI Input

1"use client";
2 
3import { Input as InputPrimitive } from "@base-ui/react/input";
4import {
5  ArrowUp,
6  Check,
7  ChevronDown,
8  ChevronLeft,
9  ChevronRight,
10  Mic,
11  Plus,
12} from "lucide-react";
13import {
14  AnimatePresence,
15  LayoutGroup,
16  motion,
17  useReducedMotion,
18} from "motion/react";
19import {
20  type ComponentType,
21  Fragment,
22  type ReactNode,
23  useCallback,
24  useEffect,
25  useId,
26  useLayoutEffect,
27  useRef,
28  useState,
29} from "react";
30import { createPortal, flushSync } from "react-dom";
31 
32import { Switch } from "@/components/ui/b-switch";
33 
34const WAVE_DURATION_MS = 1000;
35const MAX_TEXTAREA_HEIGHT = 132;
36 
37/** Spring used by the shared hover highlight that glides between plus-menu rows. */
38const HOVER_SPRING = {
39  type: "spring",
40  stiffness: 460,
41  damping: 34,
42  mass: 0.58,
43} as const;
44 
45/** Apple Intelligence-style spectrum used by the send wave. */
46const WAVE_WASH_GRADIENT =
47  "linear-gradient(180deg, transparent, rgba(34,211,238,0.07), rgba(59,130,246,0.09), rgba(217,70,239,0.1), rgba(244,63,94,0.09), rgba(249,115,22,0.08), transparent)";
48 
49export type AIInputOption = {
50  value: string;
51  label: string;
52};
53 
54export type AIInputMessage = {
55  id: number;
56  text: string;
57};
58 
59// ─── Settings dropdown types ────────────────────────────────────────────────
60 
61export type PromptSettingOption = {
62  value: string;
63  label: string;
64  description?: string;
65};
66 
67export type PromptSettingGroup = {
68  id: string;
69  label: string;
70  options: PromptSettingOption[];
71  /** Show the selected option as a featured row with description and checkmark. */
72  display?: "featured" | "submenu";
73  /** Optional submenu row label for picking other options (e.g. "More models"). */
74  moreMenuLabel?: string;
75};
76 
77export type PromptMenuAction = {
78  label: string;
79  icon?: ReactNode;
80  onSelect: () => void;
81};
82 
83// ─── Settings dropdown helpers ───────────────────────────────────────────────
84 
85function getDefaultSettings(
86  groups: PromptSettingGroup[],
87  defaults?: Record<string, string>
88) {
89  return groups.reduce<Record<string, string>>((acc, group) => {
90    const preferred = defaults?.[group.id];
91    const hasPreferred = group.options.some((opt) => opt.value === preferred);
92    acc[group.id] =
93      hasPreferred && preferred ? preferred : (group.options[0]?.value ?? "");
94    return acc;
95// … truncated