Chat App

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card } from "@/components/ui/card";
5import { Input } from "@/components/ui/input";
6import { ScrollArea } from "@/components/ui/scroll-area";
7import { AnimatePresence, motion } from "framer-motion";
8import { Bot, Loader2, Send, User } from "lucide-react";
9import { useEffect, useRef, useState } from "react";
10 
11type Message = {
12  id: number;
13  text: string;
14  sender: "user" | "bot";
15  timestamp: Date;
16};
17 
18const initialMessages: Message[] = [
19  {
20    id: 1,
21    text: "Hello! How can I help you today?",
22    sender: "bot",
23    timestamp: new Date(Date.now() - 60000),
24  },
25  {
26    id: 2,
27    text: "Hi there! I was wondering about your features.",
28    sender: "user",
29    timestamp: new Date(Date.now() - 30000),
30  },
31  {
32    id: 3,
33    text: "Of course! What would you like to know?",
34    sender: "bot",
35    timestamp: new Date(Date.now() - 15000),
36  },
37];
38 
39export function ChatApp() {
40  const [messages, setMessages] = useState<Message[]>(initialMessages);
41  const [inputValue, setInputValue] = useState("");
42  const [isTyping, setIsTyping] = useState(false);
43  const scrollAreaRef = useRef<HTMLDivElement>(null);
44  const inputRef = useRef<HTMLInputElement>(null);
45 
46  useEffect(() => {
47    // Auto-scroll to bottom when new messages arrive
48    if (scrollAreaRef.current) {
49      const scrollContainer = scrollAreaRef.current.querySelector(
50        "[data-radix-scroll-area-viewport]"
51      );
52      if (scrollContainer) {
53        scrollContainer.scrollTop = scrollContainer.scrollHeight;
54      }
55    }
56  }, [messages, isTyping]);
57 
58  const formatTime = (date: Date): string => {
59    const hours = date.getHours();
60    const minutes = date.getMinutes();
61    const ampm = hours >= 12 ? "PM" : "AM";
62    const displayHours = hours % 12 || 12;
63    const displayMinutes = minutes.toString().padStart(2, "0");
64    return `${displayHours}:${displayMinutes} ${ampm}`;
65  };
66 
67  const handleSend = () => {
68    const trimmed = inputValue.trim();
69    if (!trimmed) return;
70 
71    const userMessage: Message = {
72      id: Date.now(),
73      text: trimmed,
74      sender: "user",
75      timestamp: new Date(),
76    };
77 
78    setMessages((prev) => [...prev, userMessage]);
79    setInputValue("");
80    setIsTyping(true);
81 
82    // Simulate bot response with typing indicator
83    setTimeout(() => {
84      const botMessage: Message = {
85        id: Date.now() + 1,
86// … truncated