ai-input

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { ArrowUp, LoaderCircle, Paperclip, X } from 'lucide-react';
5import React, { DetailedHTMLProps, ButtonHTMLAttributes, useRef, useEffect, useState } from 'react';
6import { AnimatePresence, motion, useAnimationControls } from 'framer-motion';
7 
8type ActionButtonProps = {
9  className?: string;
10  children?: React.ReactNode;
11} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
12 
13const ActionButton = ({ className, children, ...props }: ActionButtonProps) => {
14  return (
15    <button
16      {...props}
17      className={cn(
18        'p-2 bg-orange-500 hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm rounded-lg',
19        className
20      )}
21    >
22      {children}
23    </button>
24  );
25};
26 
27const Placeholder = ({ placeholder }: { placeholder: string }) => {
28  return (
29    <div className="flex items-center justify-start gap-0">
30      {placeholder.split('').map((word, i) => {
31        if (word === ' ')
32          return <span key={`placeholder-text-${i}-${word}`} className="w-1"></span>;
33        return (
34          <motion.span
35            initial={{ opacity: 0, y: 10 }}
36            animate={{ opacity: 1, y: 0 }}
37            transition={{
38              duration: 0.25,
39              delay: i * 0.01,
40              type: 'spring'
41            }}
42            key={`placeholder-text-${i}-${word}`}
43            className="text-white/60 font-extralight"
44          >
45            {word}
46          </motion.span>
47        );
48      })}
49    </div>
50  );
51};
52 
53type AiInputProps = {
54  width?: string;
55  className?: string;
56  placeholder?: string;
57  style?: React.CSSProperties;
58  rows?: number;
59  mainColor?: string;
60  backgroundColor?: string;
61  onSubmit?: (value: string, file: File | null) => void | Promise<void>;
62  animationStyle?: 'orbit' | 'pulse';
63} & Omit<React.ComponentProps<'textarea'>, 'onSubmit'>;
64 
65const AiInput = ({
66  width = '400px',
67  className,
68  placeholder = 'Ask me anything...',
69  style,
70  mainColor = '#FFDC00',
71  backgroundColor = '#111111',
72  rows = 2,
73  onSubmit,
74  animationStyle = 'orbit',
75  ...props
76}: AiInputProps) => {
77  const textareaRef = useRef<HTMLTextAreaElement>(null);
78  const fileInputRef = useRef<HTMLInputElement>(null);
79  const containerRef = useRef<HTMLDivElement>(null);
80  const submitButtonRef = useRef<HTMLButtonElement>(null);
81 
82  const [containerSize, setContainerSize] = useState<{ width: number; height: number }>({
83    width: 0,
84    height: 0
85  });
86// … truncated