Input Message

1"use client";
2 
3import { ArrowUpIcon, CrossSmallIcon } from "blode-icons-react";
4import { AnimatePresence, motion } from "motion/react";
5import * as React from "react";
6import TextareaAutosize from "react-textarea-autosize";
7 
8import { cn } from "@/lib/utils";
9import { Button } from "@/components/ui/button";
10import { FileThumbnail } from "@/components/ui/file-thumbnail";
11 
12const DEFAULT_ACCEPT = "image/png,image/jpeg,application/pdf";
13 
14interface InputMessageSlotContext {
15  /** Opens the native file picker. Pass `acceptOverride` (e.g. `"image/*"`) to
16   *  scope the picker to a subset of the accept types for this invocation. */
17  openFilePicker: (acceptOverride?: string) => void;
18  /** Currently-attached files (controlled). */
19  files: File[];
20}
21 
22type InputMessageSlot = React.ReactNode | ((ctx: InputMessageSlotContext) => React.ReactNode);
23 
24interface InputMessageProps extends Omit<React.ComponentProps<"div">, "onChange"> {
25  /** Controlled textarea value. */
26  value: string;
27  /** Called with the new value on every textarea change. */
28  onValueChange: (value: string) => void;
29  /** Fired on submit (Enter or send button) with the trimmed value + files. */
30  onSend?: (value: string, files: File[]) => void;
31  /** Placeholder shown when empty. Swaps to a drop hint while dragging files. */
32  placeholder?: string;
33  /** Bottom-left action area. May be a render fn receiving `{ openFilePicker, files }`. */
34  leftSlot?: InputMessageSlot;
35  /** Bottom-right action area, before the built-in send button. Same render-fn shape. */
36  rightSlot?: InputMessageSlot;
37  /** Disables the textarea, send button, and drag-and-drop. */
38  disabled?: boolean;
39  /** Minimum visible rows before the textarea grows. Defaults to 1. */
40  minRows?: number;
41  /** Maximum visible rows before the textarea scrolls. Defaults to 8. */
42  maxRows?: number;
43  /** When false, clicking the container won't refocus the textarea. */
44  clickToFocus?: boolean;
45  /** Accessible label for the send button. */
46  sendLabel?: string;
47  /** Controlled attached files. When undefined, attachment behavior is disabled. */
48  files?: File[];
49  /** Called when files are added (drag-drop or picker) or removed. */
50  onFilesChange?: (files: File[]) => void;
51  /** Accepted MIME types as a comma-separated string. Defaults to PNG / JPEG / PDF. */
52  accept?: string;
53  /** Maximum number of files. Extra files beyond the limit are dropped. */
54  maxFiles?: number;
55  /** Side of each preview tile in pixels. Defaults to 80. */
56// … truncated