Ai Prompt Input

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { ArrowUp, Paperclip, Square, X } from "lucide-react";
5import {
6  AnimatePresence,
7  type MotionStyle,
8  motion,
9  type Transition,
10  useReducedMotion,
11} from "motion/react";
12import {
13  type ChangeEvent,
14  type KeyboardEvent,
15  type ReactNode,
16  useCallback,
17  useLayoutEffect,
18  useRef,
19  useState,
20} from "react";
21import {
22  type AIState,
23  getAIStateAccentColor,
24  getAIStateMotion,
25} from "../ai-core";
26 
27const SUBMIT_ICON_SIZE = 17;
28const STOP_ICON_SIZE = 13;
29 
30const MIN_ROWS = 1;
31const MAX_ROWS = 8;
32const COUNTER_VISIBLE_RATIO = 0.8;
33const SPRING_DEFAULT: Transition = {
34  bounce: 0.1,
35  duration: 0.25,
36  type: "spring",
37};
38const SPRING_SNAPPY: Transition = {
39  bounce: 0,
40  duration: 0.2,
41  type: "spring",
42};
43const EASE_OUT = [0.23, 1, 0.32, 1] as const;
44const ATTACHMENT_STAGGER = 0.035;
45 
46export type AIPromptAttachment = {
47  id: string;
48  /** Bytes. Rendered as a human-readable size when present. */
49  size?: number;
50  name: string;
51};
52 
53export type AIPromptInputProps = {
54  /** Files already attached to the draft. */
55  attachments?: AIPromptAttachment[];
56  /** Extra controls rendered on the left of the toolbar — model pickers etc. */
57  children?: ReactNode;
58  className?: string;
59  disabled?: boolean;
60  /** Shows a counter once the draft passes 80% of the limit. */
61  maxLength?: number;
62  onAttach?: () => void;
63  onRemoveAttachment?: (id: string) => void;
64  /** Called when the submit control is pressed while `state` is `streaming`. */
65  onStop?: () => void;
66  onSubmit?: (value: string) => void;
67  onValueChange?: (value: string) => void;
68  placeholder?: string;
69  /** Shared AI state. `streaming` turns submit into stop. */
70  state?: AIState;
71  /** Controlled draft. Leave undefined to let the component own it. */
72  value?: string;
73};
74 
75const formatSize = (bytes: number): string => {
76  const kilobyte = 1024;
77  if (bytes < kilobyte) {
78    return `${bytes} B`;
79  }
80  const megabyte = kilobyte * kilobyte;
81  if (bytes < megabyte) {
82    return `${Math.round(bytes / kilobyte)} KB`;
83  }
84  return `${(bytes / megabyte).toFixed(1)} MB`;
85};
86 
87/**
88 * The prompt composer.
89 *
90 * Growth is animated with a layout spring rather than a CSS height transition,
91 * so a pasted paragraph settles instead of snapping — and because the height is
92 * measured from the textarea's own scroll height, the surrounding page never
93 * reflows mid-keystroke.
94 */
95const AIPromptInput = ({
96  attachments = [],
97  children,
98  className,
99// … truncated