Use typing indicator

import { useTypingIndicator } from "@sublay/react-js";

function MessageInput({ conversationId }: { conversationId: string }) {
  const { typingUsers, startTyping, stopTyping } = useTypingIndicator({
    conversationId,
  });
  const [text, setText] = useState("");

  return (
    <div>
      {typingUsers.length > 0 && (
        <p className="text-sm text-gray-500">
          {typingUsers.length === 1
            ? "Someone is typing..."
            : `${typingUsers.length} people are typing...`}
        </p>
      )}
      <input
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          startTyping();
        }}
        onBlur={stopTyping}
      />
    </div>
  );
}