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 MouseEvent as ReactMouseEvent,
16  type ReactNode,
17  type TextareaHTMLAttributes,
18} from 'react'
19import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
20import { cn } from '@/lib/utils'
21import { springs } from '@/lib/motion-tokens'
22 
23const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
24 
25const DEFAULT_ACCEPT = 'image/png,image/jpeg,application/pdf'
26 
27function ArrowUpIcon({ className }: { className?: string }) {
28  return (
29    <svg
30      width={16}
31      height={16}
32      viewBox="0 0 24 24"
33      fill="none"
34      stroke="currentColor"
35      strokeWidth={2}
36      strokeLinecap="round"
37      strokeLinejoin="round"
38      aria-hidden="true"
39      className={className}
40    >
41      <path d="M12 19V5" />
42      <path d="M5 12l7-7 7 7" />
43    </svg>
44  )
45}
46 
47function XIcon({ className }: { className?: string }) {
48  return (
49    <svg
50      width={12}
51      height={12}
52      viewBox="0 0 24 24"
53      fill="none"
54      stroke="currentColor"
55      strokeWidth={2.5}
56      strokeLinecap="round"
57      strokeLinejoin="round"
58      aria-hidden="true"
59      className={className}
60    >
61      <path d="M18 6L6 18" />
62      <path d="M6 6l12 12" />
63    </svg>
64  )
65}
66 
67function FileIcon({ className }: { className?: string }) {
68  return (
69    <svg
70      width={20}
71      height={20}
72      viewBox="0 0 24 24"
73      fill="none"
74      stroke="currentColor"
75      strokeWidth={1.5}
76      strokeLinecap="round"
77      strokeLinejoin="round"
78      aria-hidden="true"
79      className={className}
80    >
81      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
82      <path d="M14 2v6h6" />
83    </svg>
84  )
85}
86 
87interface InputMessageSlotContext {
88  openFilePicker: (acceptOverride?: string) => void
89  files: File[]
90}
91 
92type InputMessageSlot = ReactNode | ((ctx: InputMessageSlotContext) => ReactNode)
93 
94export interface InputMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
95  value: string
96  onValueChange: (value: string) => void
97  onSend?: (value: string, files: File[]) => void
98  placeholder?: string
99  leftSlot?: InputMessageSlot
100  rightSlot?: InputMessageSlot
101  disabled?: boolean
102  minRows?: number
103  maxRows?: number
104  clickToFocus?: boolean
105  sendLabel?: string
106// … truncated