ai-input

1'use client';
2 
3import { Loader2Icon, Send, SquareIcon, X } from 'lucide-react';
4import type {
5  ComponentProps,
6  HTMLAttributes,
7  KeyboardEventHandler,
8} from 'react';
9import { Children, useCallback, useEffect, useRef } from 'react';
10import { Button } from '@repo/shadcn-ui/components/ui/button';
11import {
12  Select,
13  SelectContent,
14  SelectItem,
15  SelectTrigger,
16  SelectValue,
17} from '@repo/shadcn-ui/components/ui/select';
18import { Textarea } from '@repo/shadcn-ui/components/ui/textarea';
19import { cn } from '@repo/shadcn-ui/lib/utils';
20 
21type UseAutoResizeTextareaProps = {
22  minHeight: number;
23  maxHeight?: number;
24};
25 
26const useAutoResizeTextarea = ({
27  minHeight,
28  maxHeight,
29}: UseAutoResizeTextareaProps) => {
30  const textareaRef = useRef<HTMLTextAreaElement>(null);
31 
32  const adjustHeight = useCallback(
33    (reset?: boolean) => {
34      const textarea = textareaRef.current;
35      if (!textarea) {
36        return;
37      }
38 
39      if (reset) {
40        textarea.style.height = `${minHeight}px`;
41        return;
42      }
43 
44      // Temporarily shrink to get the right scrollHeight
45      textarea.style.height = `${minHeight}px`;
46 
47      // Calculate new height
48      const newHeight = Math.max(
49        minHeight,
50        Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY)
51      );
52 
53      textarea.style.height = `${newHeight}px`;
54    },
55    [minHeight, maxHeight]
56  );
57 
58  useEffect(() => {
59    // Set initial height
60    const textarea = textareaRef.current;
61    if (textarea) {
62      textarea.style.height = `${minHeight}px`;
63    }
64  }, [minHeight]);
65 
66  // Adjust height on window resize
67  useEffect(() => {
68    const handleResize = () => adjustHeight();
69    window.addEventListener('resize', handleResize);
70    return () => window.removeEventListener('resize', handleResize);
71  }, [adjustHeight]);
72 
73  return { textareaRef, adjustHeight };
74};
75 
76export type AIInputProps = HTMLAttributes<HTMLFormElement>;
77 
78export const AIInput = ({ className, ...props }: AIInputProps) => (
79  <form
80    className={cn(
81      'w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm',
82      className
83    )}
84    {...props}
85  />
86);
87 
88export type AIInputTextareaProps = ComponentProps<typeof Textarea> & {
89  minHeight?: number;
90  maxHeight?: number;
91};
92 
93export const AIInputTextarea = ({
94  onChange,
95  className,
96  placeholder = 'What would you like to know?',
97  minHeight = 48,
98  maxHeight = 164,
99  ...props
100}: AIInputTextareaProps) => {
101// … truncated