Prompt Input

1"use client";
2import React, { useEffect, useRef } from "react";
3import { Textarea } from "@/components/ui/textarea";
4import { createContext, useContext, useState } from "react";
5import {
6  Tooltip,
7  TooltipProvider,
8  TooltipTrigger,
9  TooltipContent,
10} from "@/components/ui/tooltip";
11import { cn } from "@/lib/utils";
12import { Metadata } from "next";
13 
14type PromptInputContext = {
15  value: string;
16  isLoading: boolean;
17  disabled?: boolean;
18  setValue: (value: string) => void;
19  maxHeight: string | number;
20  onSubmit?: () => void;
21  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
22};
23 
24const PromptInputContext = createContext<PromptInputContext>({
25  value: "",
26  isLoading: false,
27  setValue: () => {},
28  maxHeight: 240,
29  disabled: false,
30  textareaRef: React.createRef<HTMLTextAreaElement>(),
31});
32 
33function usePromptInputContext() {
34  const ctx = useContext(PromptInputContext);
35  if (!ctx) {
36    throw Error("usePromptInputContext must be used within a PromptInput");
37  }
38  return ctx;
39}
40 
41type PromptInputTextAreaProps = {
42  disableAutoSize?: boolean;
43} & React.ComponentProps<typeof Textarea>;
44 
45export const metadata: Metadata = {
46  title: "Prompt Input — Chatcn",
47  description:
48    "A ready-made prompt input component for AI chat interfaces. Customizable, responsive, and built with shadcn.",
49  openGraph: {
50    images: [
51      {
52        url: "https://chatcn.me/og-default.png",
53        width: 1200,
54        height: 630,
55        alt: "Prompt Input Component Preview",
56      },
57    ],
58  },
59  twitter: {
60    images: ["https://chatcn.me/og-default.png"],
61  },
62};
63 
64export function PromptInputTextArea({
65  className,
66  disableAutoSize = false,
67  ...props
68}: PromptInputTextAreaProps) {
69  const { disabled, value, setValue, maxHeight, textareaRef } =
70    usePromptInputContext();
71 
72  useEffect(() => {
73    if (disableAutoSize || !textareaRef.current) return;
74    textareaRef.current.style.height = "auto";
75    textareaRef.current.style.height =
76      typeof maxHeight == "number"
77        ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px`
78        : `min(${maxHeight},${textareaRef.current.scrollHeight}px)`;
79  }, [value, maxHeight, disableAutoSize, textareaRef]);
80 
81  return (
82    <Textarea
83      style={{ backgroundColor: "transparent" }}
84      ref={textareaRef}
85      value={value}
86      onChange={(e) => setValue(e.target.value)}
87      rows={1}
88      className={cn(
89// … truncated