Prompt Composer

1"use client";
2 
3import { useEffect, useId, useRef, useState, type FormEvent, type KeyboardEvent } from "react";
4import {
5  ArrowUpIcon,
6  ChevronDownIcon,
7  ClockIcon,
8  FileIcon,
9  FileTextIcon,
10  ImageIcon,
11  ListPlusIcon,
12  PlusIcon,
13  SquareIcon,
14  XIcon,
15} from "lucide-react";
16import { AnimatePresence, motion, Reorder, useReducedMotion } from "motion/react";
17 
18import { Button } from "@/components/ui/button";
19import {
20  Menu,
21  MenuContent,
22  MenuItem,
23  MenuRadioGroup,
24  MenuRadioItem,
25  MenuTrigger,
26} from "@/components/ui/menu";
27import { cn } from "@/lib/utils";
28import { spring } from "@/lib/springs";
29 
30export interface PromptComposerSubmitEvent {
31  prompt: string;
32}
33 
34export interface PromptComposerAttachmentOption {
35  id: string;
36  label: string;
37  description?: string;
38  kind?: "file" | "image" | "folder";
39}
40 
41export type PromptComposerFileKind = "image" | "file";
42 
43export interface PromptComposerFile {
44  id: string;
45  name: string;
46  kind?: PromptComposerFileKind;
47  /** Object URL or remote URL rendered inside the preview tile for image files. */
48  previewUrl?: string;
49}
50 
51export interface PromptComposerQueuedMessage {
52  id: string;
53  prompt: string;
54}
55 
56export interface PromptComposerProps {
57  /** Controlled draft text. */
58  value?: string;
59  /** Initial draft text when the component is uncontrolled. */
60  defaultValue?: string;
61  onValueChange?: (value: string) => void;
62  onSubmit?: (event: PromptComposerSubmitEvent) => void;
63  /** Called while a response is being generated. */
64  onStop?: () => void;
65  /** Replaces Send with Stop and prevents edits until the response ends. */
66  isRunning?: boolean;
67  disabled?: boolean;
68  placeholder?: string;
69  /** Limits the number of characters in the draft. */
70  maxLength?: number;
71  /** Optional model choices, rendered as a compact footer menu. */
72  models?: readonly string[];
73  model?: string;
74  onModelChange?: (model: string) => void;
75  /** Choices opened by the attachment menu above the composer. */
76  attachmentOptions?: readonly PromptComposerAttachmentOption[];
77  onAttachmentOptionSelect?: (option: PromptComposerAttachmentOption) => void;
78  /** Attachments for the current draft, shown as preview tiles above the textarea. */
79  files?: readonly PromptComposerFile[];
80  onFilesChange?: (files: readonly PromptComposerFile[]) => void;
81  /** Side length, in pixels, of each file preview tile. */
82  filePreviewSize?: number;
83  /**
84   * Messages waiting to send while a response is running. Providing this
85// … truncated