AI Input With Loading

AI chats 527

About

A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Input With Loading to your project and fits it to your theme.

Code

How AI Input With Loading is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AIInputWithLoading } from "@/components/ui/ai-input-with-loading";
import { useState } from "react";

export function AIInputWithLoadingDemo() {
  const [messages, setMessages] = useState<string[]>([]);

  const simulateResponse = async (message: string) => {
    await new Promise(resolve => setTimeout(resolve, 3000));
    setMessages(prev => [...prev, message]);
  };

  return (
    <div className="space-y-8 min-w-[350px]">
        <div className="space-y-4">
          {messages.map((msg, i) => (
            <div key={i} className="p-4 bg-black/5 dark:bg-white/5 rounded-lg">
              {msg}
            </div>
          ))}
          <AIInputWithLoading 
            onSubmit={simulateResponse}
            loadingDuration={3000}
            placeholder="Type a message..."
          />
        </div>
    </div>
  );
}