SBU-Hackathon/app/utils/component/ui/MessageWindow.tsx

"use client";
import { useRef, useEffect } from "react";
import { ChatHistory } from "@/app/exportType/types";
import { User, Bot } from "lucide-react"

interface MessageWindowProps {
    history: ChatHistory
}

export default function MessageWindow({ history }: MessageWindowProps) {
    const messageEndRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }, [history]);

    return (
        <div className="flex-1 p-3 overflow-y-auto">
            <div className="max-w-3xl mx-auto">
                {history.map((msg, index) => {
                    const isUser = msg.role === "user"

                    return (
                        <div
                            key={index}
                            className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
                            {!isUser && (
                                <div className="mr-2">
                                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray">
                                        <Bot size={15} className="text-gray-700">
                                        </Bot>
                                    </div>
                                </div>
                            )}

                            <div className={` px-4 py-2 shadow-sm rounded-lg
                            ${isUser ? "bg-purple-600 text-white rounded-br-none" : "bg-white text-gray-800 rounded-bl-none"}
                            max-w-xs sm:max-w-md`}>

                                <div className="whitespace-pre-wrap break-words">{msg.parts.map((part, idx) => (
                                    <span key={idx}>{part.text}</span>))}
                                </div>
                            </div>
                            {isUser && (
                                <div className="ml-2">
                                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500">
                                        <User size={16} className="text-white" />
                                    </div>
                                </div>
                            )}
                        </div>
                    );
                })}

                {/* Invisible element to help scroll to bottom */}
                <div ref={messageEndRef} />
            </div>
        </div>
    );
}