Prompt Input

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5 
6import { mergeRefs } from "@/lib/merge-refs";
7import { cn } from "@/lib/utils";
8import { Textarea } from "@/components/ui/textarea";
9import { ScrollArea, ScrollViewport } from "@/components/ui/scroll-area";
10import {
11  Tooltip,
12  TooltipContent,
13  TooltipProvider,
14  TooltipTrigger,
15} from "@/components/ui/tooltip";
16import { Kbd } from "@/components/ui/kbd";
17 
18type PromptInputContextValue = {
19  setTextareaNode: (node: HTMLTextAreaElement | null) => void;
20  onSubmit?: (value: string) => void;
21};
22 
23const PromptInputContext = React.createContext<PromptInputContextValue | null>(
24  null,
25);
26 
27type PromptInputProps = Omit<
28  React.HTMLAttributes<HTMLDivElement>,
29  "onSubmit"
30> & {
31  /**
32   * Called when Enter is pressed in the textarea (without Shift). Use with
33   * value/onChange on PromptInputTextarea for controlled mode. Shift+Enter
34   * inserts a new line.
35   */
36  onSubmit?: (value: string) => void;
37};
38 
39function PromptInput({
40  className,
41  role: _role,
42  "aria-label": _ariaLabel,
43  onClick,
44  onSubmit,
45  ...props
46}: PromptInputProps) {
47  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
48 
49  const handleClick = React.useCallback(
50    (e: React.MouseEvent<HTMLDivElement>) => {
51      const target = e.target as HTMLElement;
52      if (
53        !target.closest(
54          'button, a, input, textarea, [role="button"], [role="tab"]',
55        )
56      ) {
57        textareaRef.current?.focus();
58      }
59      onClick?.(e);
60    },
61    [onClick],
62  );
63 
64  const contextValue = React.useMemo<PromptInputContextValue>(
65    () => ({
66      setTextareaNode: (node) => {
67        textareaRef.current = node;
68      },
69      onSubmit,
70    }),
71    [onSubmit],
72  );
73 
74  return (
75    <TooltipProvider delayDuration={100}>
76      <PromptInputContext.Provider value={contextValue}>
77        <div
78          role="group"
79          aria-label="Chat input"
80          className={cn(
81            "relative flex h-auto w-full cursor-text flex-col gap-0 overflow-hidden rounded-3xl border border-border bg-card dark:border-border/50 dark:bg-input/30",
82            className,
83          )}
84          onClick={handleClick}
85          {...props}
86        />
87      </PromptInputContext.Provider>
88    </TooltipProvider>
89  );
90}
91 
92type PromptInputTextareaProps = React.ComponentProps<typeof Textarea>;
93 
94const PromptInputTextarea = React.forwardRef<
95  HTMLTextAreaElement,
96  PromptInputTextareaProps
97// … truncated