AI Components Demo

import { MessageInput } from "@/modules/saas/ai/components/ui/MessageInput/ModernMessageInput";
import { MessageItem } from "@/modules/saas/ai/components/ui/MessageItem/ModernMessageItem";
import { useState } from "react";

export function ChatInterface() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([
    {
      id: "1",
      role: "assistant",
      content: "Hello! How can I help you?"
    }
  ]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;

    // Add user message
    const userMessage = {
      id: Date.now().toString(),
      role: "user",
      content: input
    };
    setMessages([...messages, userMessage]);
    setInput("");

    // Call AI API here to get response
    // then add AI message to messages array
  };

  return (
    <div className="flex flex-col h-screen">
      {/* Messages Area */}
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((message, index) => (
          <MessageItem
            key={message.id}
            message={message}
            isLast={index === messages.length - 1}
          />
        ))}
      </div>

      {/* Input Area */}
      <div className="border-t p-4">
        <MessageInput
          value={input}
          onChange={setInput}
          onSubmit={handleSubmit}
          placeholder="Type a message..."
        />
      </div>
    </div>
  );
}