Prompt Input

1"use client"
2 
3import { Textarea } from "@/components/ui/textarea"
4import {
5  Tooltip,
6  TooltipContent,
7  TooltipProvider,
8  TooltipTrigger,
9} from "@/components/ui/tooltip"
10import { cn } from "@/lib/utils"
11import React, {
12  createContext,
13  useContext,
14  useEffect,
15  useRef,
16  useState,
17} from "react"
18 
19type PromptInputContextType = {
20  isLoading: boolean
21  value: string
22  setValue: (value: string) => void
23  maxHeight: number | string
24  onSubmit?: () => void
25  disabled?: boolean
26}
27 
28const PromptInputContext = createContext<PromptInputContextType>({
29  isLoading: false,
30  value: "",
31  setValue: () => {},
32  maxHeight: 240,
33  onSubmit: undefined,
34  disabled: false,
35})
36 
37function usePromptInput() {
38  const context = useContext(PromptInputContext)
39  if (!context) {
40    throw new Error("usePromptInput must be used within a PromptInput")
41  }
42  return context
43}
44 
45type PromptInputProps = {
46  isLoading?: boolean
47  value?: string
48  onValueChange?: (value: string) => void
49  maxHeight?: number | string
50  onSubmit?: () => void
51  children: React.ReactNode
52  className?: string
53}
54 
55function PromptInput({
56  className,
57  isLoading = false,
58  maxHeight = 240,
59  value,
60  onValueChange,
61  onSubmit,
62  children,
63}: PromptInputProps) {
64  const [internalValue, setInternalValue] = useState(value || "")
65 
66  const handleChange = (newValue: string) => {
67    setInternalValue(newValue)
68    onValueChange?.(newValue)
69  }
70 
71  return (
72    <TooltipProvider>
73      <PromptInputContext.Provider
74        value={{
75          isLoading,
76          value: value ?? internalValue,
77          setValue: onValueChange ?? handleChange,
78          maxHeight,
79          onSubmit,
80        }}
81      >
82        <div
83          className={cn(
84            "border-input bg-background rounded-3xl border p-2 shadow-xs",
85            className
86          )}
87        >
88          {children}
89        </div>
90      </PromptInputContext.Provider>
91    </TooltipProvider>
92  )
93}
94 
95export type PromptInputTextareaProps = {
96  disableAutosize?: boolean
97} & React.ComponentProps<typeof Textarea>
98 
99function PromptInputTextarea({
100  className,
101  onKeyDown,
102  disableAutosize = false,
103  ...props
104}: PromptInputTextareaProps) {
105  const { value, setValue, maxHeight, onSubmit, disabled } = usePromptInput()
106  const textareaRef = useRef<HTMLTextAreaElement>(null)
107 
108  useEffect(() => {
109    if (disableAutosize) return
110 
111    if (!textareaRef.current) return
112    textareaRef.current.style.height = "auto"
113    textareaRef.current.style.height =
114// … truncated