Input Message

1"use client";
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useLayoutEffect,
8  useMemo,
9  useRef,
10  useState,
11  type ChangeEvent,
12  type DragEvent as ReactDragEvent,
13  type HTMLAttributes,
14  type KeyboardEvent as ReactKeyboardEvent,
15  type ReactNode,
16  type TextareaHTMLAttributes,
17} from "react";
18import { AnimatePresence, motion, Reorder, useReducedMotion } from "framer-motion";
19import { cn } from "@/lib/utils";
20import { fontWeights } from "@/lib/font-weight";
21import { spring } from "@/lib/springs";
22import { useShape } from "@/lib/shape-context";
23import { useIcon } from "@/lib/icon-context";
24import { surfaceClasses } from "@/lib/surface-classes";
25import { SurfaceProvider } from "@/lib/surface-context";
26import { FileThumbnail } from "@/registry/default/file-thumbnail";
27import { Button } from "@/registry/radix/button";
28import { Tooltip } from "@/registry/radix/tooltip";
29 
30const useIsoLayoutEffect =
31  typeof window !== "undefined" ? useLayoutEffect : useEffect;
32 
33// Touch devices have no hover, so hover-revealed affordances (like a queued
34// row's × button) would never appear. `(hover: none)` flags those so they can
35// be shown persistently instead. SSR-safe: starts false, resolves on mount.
36function useIsTouch() {
37  const [isTouch, setIsTouch] = useState(false);
38  useEffect(() => {
39    const mq = window.matchMedia("(hover: none)");
40    const update = () => setIsTouch(mq.matches);
41    update();
42    mq.addEventListener("change", update);
43    return () => mq.removeEventListener("change", update);
44  }, []);
45  return isTouch;
46}
47 
48const DEFAULT_ACCEPT = "image/png,image/jpeg,application/pdf";
49 
50interface InputMessageSlotContext {
51  /** Opens the native file picker via the hidden `<input type="file">`.
52   *  Pass `acceptOverride` (e.g. `"image/*"`) to scope the picker to a
53   *  subset of the component's accept types just for this invocation. */
54  openFilePicker: (acceptOverride?: string) => void;
55  /** Currently-attached files (controlled). */
56  files: File[];
57}
58 
59type InputMessageSlot =
60  | ReactNode
61  | ((ctx: InputMessageSlotContext) => ReactNode);
62 
63/** A message held in the queue while the assistant is responding. Carries the
64 *  trimmed text plus a snapshot of the files attached when it was queued, so
65 *  double-click-to-edit can restore both. `id` is a stable key minted on enqueue. */
66interface QueuedMessage {
67  id: string;
68  text: string;
69  files: File[];
70}
71 
72interface InputMessageProps
73  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
74// … truncated