prompt-input

1"use client";
2import { cn } from "@/lib/utils";
3import { Plus, SendHorizontal, Square } from "lucide-react";
4import { createContext, useContext, useRef, useState } from "react";
5
6type promptInputContextType = {
7  value: string;
8  setValue: (v: string) => void;
9  onSubmit: () => void;
10  isLoading: boolean;
11};
12
13type PromptInputTypes = {
14  value: string;
15  setValue: (v: string) => void;
16  onSubmit: () => void;
17  isLoading: boolean;
18  children: React.ReactNode;
19  className?: string;
20};
21const promptInputContext = createContext<promptInputContextType | null>(null);
22
23function usePromptInput() {
24  const context = useContext(promptInputContext);
25  if (!context) throw new Error("must be inside the component");
26
27  return context;
28}
29
30function PromptInput({
31  value,
32  setValue,
33  onSubmit,
34  isLoading,
35  children,
36  className,
37}: PromptInputTypes) {
38  return (
39    <promptInputContext.Provider
40      value={{ value, setValue, onSubmit, isLoading }}
41    >
42      <div
43        className={cn(
44          "w-78 md:w-120 border border-neutral-300 dark:border-neutral-800 rounded-3xl",
45          className,
46        )}
47      >
48        {children}
49      </div>
50    </promptInputContext.Provider>
51  );
52}
53
54function PromptInputTextArea({ placeholder }: { placeholder: string }) {
55  const { value, setValue, onSubmit, isLoading } = usePromptInput();
56  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
57  function handleChange(e: { target: { value: string } }) {
58    const textarea = textareaRef.current!;
59    textarea.style.height = "0";
60    textarea.style.height = textarea.scrollHeight + "px";
61    setValue(e.target.value);
62  }
63  return (
64    <textarea
65      value={value}
66      ref={textareaRef}
67      onChange={handleChange}
68      onKeyDown={(e) => {
69        if (e.key === "Enter" && !e.shiftKey) {
70          e.preventDefault();
71          if (!value.trim() || isLoading) return;
72          const textarea = textareaRef.current!;
73          setValue("");
74          textarea.style.height = "40px";
75          onSubmit();
76        }
77      }}
78      placeholder={placeholder}
79      className={`w-70 md:w-120 h-10 max-h-60 py-2 px-4
80               placeholder:text-neutral-400 dark:placeholder:text-neutral-700 focus:outline-0
81               overflow-y-auto resize-none [scrollbar-width:none] leading-6`}
82    ></textarea>
83  );
84}
85
86function PromptInputActions({ children }: { children: React.ReactNode }) {
87  return (
88// … truncated