Jyotisha/frontend/src/components/chat-message-row.tsx

"use client";

import { useEffect, useLayoutEffect, useRef } from "react";

import { AgentActivityStatus } from "@/components/agent-activity-status";
import { prefetchOnIdle } from "@/components/chat-chunk-prefetch";
import { ChatMessageContent } from "@/components/chat-message-content";
import type { ChatMessageView } from "@/lib/chat-message-view";

type GsapCore = typeof import("gsap")["gsap"];

const useEntryEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

let gsapCore: GsapCore | undefined;
let gsapRequest: Promise<GsapCore> | undefined;

function loadGsap() {
  gsapRequest ??= import("gsap").then((module) => {
    const core = module.gsap ?? module.default;
    gsapCore = (core as GsapCore & { gsap?: GsapCore }).gsap ?? core;
    return gsapCore;
  });
  return gsapRequest;
}

function motionPreferred() {
  return typeof window !== "undefined"
    && typeof window.matchMedia === "function"
    && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

if (motionPreferred()) prefetchOnIdle(loadGsap);

export function AgentAvatar() {
  return <span className="agent-avatar" aria-hidden="true" />;
}

export function ChatMessageRow({
  message,
  showActivity = message.state !== "settled",
}: Readonly<{
  message: ChatMessageView;
  showActivity?: boolean;
}>) {
  const messageRow = useRef<HTMLElement>(null);
  const assistantLabel = message.state === "thinking"
    ? "Jyotisha 正在分析"
    : message.state === "streaming"
      ? "Jyotisha 正在回答"
      : "Jyotisha";
  const activityState = message.activity
    ? ({
      "loading-method": "searching",
      "chart-calculation": "solving",
      "evidence-validation": "working",
      "answer-composition": "composing",
    } as const)[message.activity.phase]
    : message.state === "thinking" ? "working" : "composing";
  const activityLabel = message.activity?.label
    ?? (message.state === "thinking" ? "正在处理…" : undefined);

  useEntryEffect(() => {
    const row = messageRow.current;
    if (!row) return;
    if (!gsapCore) {
      if (motionPreferred()) void loadGsap();
      return;
    }
    const gsap = gsapCore;
    const motion = gsap.matchMedia();
    motion.add("(prefers-reduced-motion: no-preference)", () => {
      gsap.fromTo(row, {
        autoAlpha: 0,
        y: message.role === "user" ? 8 : 12,
      }, {
        autoAlpha: 1,
        clearProps: "opacity,transform,visibility",
        duration: 0.18,
        ease: "cubic-bezier(.22, 1, .36, 1)",
        y: 0,
      });
    });
    return () => motion.revert();
  }, [message.role]);

  return (
    <article
      ref={messageRow}
      className={`message message-${message.role}`}
      aria-label={message.role === "assistant" ? assistantLabel : "你"}
    >
      {message.role === "assistant" && <AgentAvatar />}
      <div className="message-content">
        <div className="message-bubble">
          {message.role === "assistant" ? (
            <>
              {showActivity && (
                <AgentActivityStatus state={activityState} label={activityLabel} />
              )}
              {message.text && <ChatMessageContent text={message.text} />}
            </>
          ) : <p>{message.text}</p>}
        </div>
      </div>
    </article>
  );
}