// Message.jsx — chat bubbles + streaming + citations
const { useEffect, useState: useStateMsg } = React;

function Citation({ n, onClick, contradicts }) {
  return (
    <button className={`ask-cite ${contradicts ? "ask-cite--contradicts" : ""}`} onClick={() => onClick(n)}>{n}</button>
  );
}

function Message({ role, children, time, sources, onCite, streaming }) {
  return (
    <div className={`ask-msg ask-msg--${role}`}>
      <div className="ask-msg__avatar">
        {role === "user" ? "MR" : <img src="../../assets/mirai-icon-light.svg" width="18" height="18" alt=""/>}
      </div>
      <div className="ask-msg__body">
        <div className="ask-msg__head">
          <span className="ask-msg__name">{role === "user" ? "Matteo Rizzo" : "ASK"}</span>
          <span className="ask-msg__time">{time}</span>
          {role === "assistant" && sources != null && (
            <span className="ask-msg__pod"><Icon name="pod" size={11}/> pod-legal-eu</span>
          )}
        </div>
        <div className="ask-msg__text">
          {children}
          {streaming && <span className="stream-cursor"></span>}
        </div>
        {role === "assistant" && sources && (
          <div className="ask-msg__cites">
            <span className="ask-msg__cites-label">Sources</span>
            {sources.map(s => (
              <button key={s.n} className="ask-msg__cite-chip" onClick={() => onCite(s.n)}>
                <span className="ask-msg__cite-n">{s.n}</span>
                <span>{s.title}</span>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

window.Message = Message;
window.Citation = Citation;