NEXUS_AI.pro/pixel-perfect-pixels-main/src/components/chat/ChatMessage.tsx

import { motion } from "framer-motion";
import { Shield, User } from "lucide-react";
import { cn } from "@/lib/utils";

interface ChatMessageProps {
  role: "user" | "assistant";
  content: string;
  isLatest?: boolean;
}

export const ChatMessage = ({ role, content, isLatest = false }: ChatMessageProps) => {
  const isAssistant = role === "assistant";

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className={cn(
        "flex gap-3 px-4 py-5",
        isAssistant ? "bg-card/40" : "bg-transparent"
      )}
    >
      <div
        className={cn(
          "flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center",
          isAssistant
            ? "bg-primary/15 text-primary glow-cyan"
            : "bg-secondary text-foreground"
        )}
      >
        {isAssistant ? <Shield size={14} /> : <User size={14} />}
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-1">
          <span className={cn(
            "text-xs font-bold font-heading tracking-wide",
            isAssistant ? "text-gradient-cyber" : "text-foreground"
          )}>
            {isAssistant ? "NEXUS" : "YOU"}
          </span>
          {isAssistant && isLatest && (
            <span className="px-1.5 py-0 text-[8px] rounded-full bg-primary/10 text-primary border border-primary/20 font-mono tracking-wider">
              ACTIVE
            </span>
          )}
        </div>
        <div className="text-foreground/90 text-sm leading-relaxed whitespace-pre-wrap">
          {content}
        </div>
      </div>
    </motion.div>
  );
};