Decoder2704/python-chatbot-jay

1import "./MessageBubble.css";2 3function formatMessageTime(at) {4  if (at == null) return null;5  try {6    return new Date(at).toLocaleTimeString(undefined, {7      hour: "numeric",8      minute: "2-digit",9    });10  } catch {11    return null;12  }13}14 15export default function MessageBubble({ role, text, meta, at, variant = "default" }) {16  const isUser = role === "user";17  const timeLabel = formatMessageTime(at);18  const dash = variant === "dashboard";19 20  return (21    <div className={`message-row ${isUser ? "message-row--user" : "message-row--bot"}`}>22      <div23        className={`message-bubble ${isUser ? "message-bubble--user" : "message-bubble--bot"} ${24          dash ? "message-bubble--dashboard" : ""25        }`}26      >27        <div className="message-bubble__header">28          <span className="message-bubble__label">{isUser ? "You" : "PyBot"}</span>29          {timeLabel && (30            <time className="message-bubble__time" dateTime={typeof at === "number" ? new Date(at).toISOString() : undefined}>31              {timeLabel}32            </time>33          )}34        </div>35        <div className="message-bubble__text">{text}</div>36        {!isUser && meta && (37          <div className="message-bubble__meta">38            QId {meta.qid} · AId {meta.aid}39            {meta.alternate != null && ` · score ${meta.alternate}`}40          </div>41        )}42      </div>43    </div>44  );45}46