Prompt Input

1"use client";
2// beui.dev/components/agents/prompt-input
3 
4import { ArrowUp, Plus, Square } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6import {
7  type FormEvent,
8  type KeyboardEvent,
9  type ReactNode,
10  type TextareaHTMLAttributes,
11  useCallback,
12  useEffect,
13  useLayoutEffect,
14  useRef,
15  useState,
16} from "react";
17import { Button } from "@/components/motion/button";
18import {
19  MorphPopover,
20  MorphPopoverContent,
21  MorphPopoverTrigger,
22} from "@/components/motion/popover-morph";
23import {
24  Select,
25  SelectContent,
26  SelectItem,
27  SelectTrigger,
28} from "@/components/motion/select";
29import { SPRING_SWAP } from "@/lib/ease";
30import { cn } from "@/lib/utils";
31 
32export interface PromptModel {
33  value: string;
34  label: ReactNode;
35  icon?: ReactNode;
36  disabled?: boolean;
37}
38 
39export interface PromptAction {
40  value: string;
41  label: ReactNode;
42  description?: ReactNode;
43  icon?: ReactNode;
44  disabled?: boolean;
45}
46 
47export interface PromptInputProps extends Omit<
48  TextareaHTMLAttributes<HTMLTextAreaElement>,
49  "value" | "defaultValue" | "onChange" | "onSubmit" | "children"
50> {
51  value?: string;
52  defaultValue?: string;
53  onValueChange?: (value: string) => void;
54  models?: PromptModel[];
55  model?: string;
56  defaultModel?: string;
57  onModelChange?: (model: string) => void;
58  actions?: PromptAction[];
59  onAction?: (action: string) => void;
60  onSubmit?: (value: string, model?: string) => void | Promise<void>;
61  loading?: boolean;
62  onStop?: () => void;
63  minRows?: number;
64  maxRows?: number;
65  leadingAction?: ReactNode;
66  className?: string;
67}
68 
69export function PromptInput({
70  value,
71  defaultValue = "",
72  onValueChange,
73  models = [],
74  model,
75  defaultModel,
76  onModelChange,
77  actions = [],
78  onAction,
79  onSubmit,
80  loading = false,
81  onStop,
82  minRows = 2,
83  maxRows = 8,
84  leadingAction,
85  className,
86  disabled,
87  placeholder = "Ask the agent to do something…",
88  "aria-label": ariaLabel = "Prompt",
89  onKeyDown,
90  ...textareaProps
91}: PromptInputProps) {
92  const reduce = useReducedMotion() ?? false;
93  const textareaRef = useRef<HTMLTextAreaElement>(null);
94  const measurementRef = useRef<HTMLDivElement>(null);
95  const [internalValue, setInternalValue] = useState(defaultValue);
96  const [internalModel, setInternalModel] = useState(
97    defaultModel ?? models[0]?.value,
98  );
99  const [actionsOpen, setActionsOpen] = useState(false);
100  const currentValue = value ?? internalValue;
101// … truncated