Sender

1import clsx from "clsx";
2import { useCallback, useEffect, useRef, useState } from "react";
3import { twMerge } from "tailwind-merge";
4 
5export interface InputCountProps extends React.ComponentProps<"span"> {
6  count: number;
7  limit: number;
8}
9 
10export function InputCount({
11  count,
12  limit,
13  className,
14  ...props
15}: InputCountProps) {
16  return (
17    <span className={clsx("text-gray-400", className)} {...props}>
18      {count} / {limit}
19    </span>
20  );
21}
22 
23export interface SenderButtonProps extends React.ComponentProps<"button"> {
24  icon?: React.ReactNode;
25  isSending?: boolean;
26}
27export function SenderButton({
28  className,
29  icon,
30  isSending = false,
31  ...props
32}: SenderButtonProps) {
33  return (
34    <button
35      type="button"
36      data-slot="sender-button"
37      className={twMerge(
38        clsx(
39          "flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 hover:bg-blue-500/90 text-white cursor-pointer",
40          className,
41        ),
42      )}
43      {...props}
44    >
45      {icon ?? (
46        <span className={clsx("text-white")}>{isSending ? "■" : "→"}</span>
47      )}
48    </button>
49  );
50}
51 
52export interface SenderProps extends React.ComponentProps<"div"> {
53  initialMessage?: string;
54  placeholder?: string;
55  sendMessage: (message: { text: string }) => void;
56  onMessageChange?: (message: string) => void;
57  onSend?: () => void;
58  toolbar?: React.ReactNode;
59  suggestion?: (context: {
60    message: string;
61    textareaRef: React.RefObject<HTMLTextAreaElement | null>;
62    onInject: (text: string, position: number) => void;
63  }) => React.ReactNode;
64}
65 
66export function Sender({
67  className,
68  initialMessage = "",
69  placeholder = "Type your message here...",
70  onMessageChange,
71  sendMessage,
72  onSend,
73  toolbar,
74  suggestion,
75  ...props
76}: SenderProps) {
77  const textareaRef = useRef<HTMLTextAreaElement>(null);
78  const [message, setMessage] = useState(initialMessage);
79  const [caretPosition, setCaretPosition] = useState<number | null>(null);
80 
81  useEffect(() => {
82    if (textareaRef.current) {
83      textareaRef.current.style.height = "auto";
84      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
85    }
86    onMessageChange?.(message);
87  }, [message, onMessageChange]);
88 
89  useEffect(() => {
90    if (textareaRef.current && caretPosition !== null) {
91      textareaRef.current.focus();
92      textareaRef.current.selectionStart = caretPosition;
93      textareaRef.current.selectionEnd = caretPosition;
94      setCaretPosition(null);
95// … truncated