next-tjwater-frontend/src/features/agent/components/agent-message-speech.tsx

import type { ReactNode } from "react";
import type { AgentSpeakOptions, AgentSpeechState } from "../speech";
import { LoaderCircle, Pause, Play, Square, Volume2 } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { Button } from "@/shared/ui/button";
import { cn } from "@/shared/ui/cn";
import { AGENT_MESSAGE_ACTION_CLASS_NAME, AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME } from "./agent-chat-message-chrome";
import { AgentSpeechVoicePicker } from "./agent-speech-voice-picker";
import { findSpeechSelectionStartOffset, stripSpeechMarkdown } from "../speech";
import type { AgentCommandPanelPresentation } from "./agent-command-panel";

type SpeechSelection = {
  startOffset: number;
  left: number;
  top: number;
};

export function AgentSpeechMessage({
  presentation,
  messageId,
  content,
  disabled,
  isSupported,
  onSpeak,
  children
}: {
  presentation: AgentCommandPanelPresentation;
  messageId: string;
  content: string;
  disabled: boolean;
  isSupported: boolean;
  onSpeak: (messageId: string, text: string, options?: AgentSpeakOptions) => Promise<void> | void;
  children: ReactNode;
}) {
  const contentRef = useRef<HTMLDivElement | null>(null);
  const lastSelectionRef = useRef<SpeechSelection | null>(null);
  const [selection, setSelection] = useState<SpeechSelection | null>(null);
  const speechText = useMemo(() => stripSpeechMarkdown(content), [content]);
  const selectionAnchor = selection ?? lastSelectionRef.current;

  if (selection) {
    lastSelectionRef.current = selection;
  }

  const captureSelection = useCallback(() => {
    if (!isSupported || disabled) {
      setSelection(null);
      return;
    }

    const browserSelection = window.getSelection();
    const container = contentRef.current;
    if (
      !browserSelection ||
      browserSelection.rangeCount === 0 ||
      browserSelection.isCollapsed ||
      !container
    ) {
      setSelection(null);
      return;
    }

    const range = browserSelection.getRangeAt(0);
    if (!container.contains(range.commonAncestorContainer)) {
      setSelection(null);
      return;
    }

    const startOffset = findSpeechSelectionStartOffset(speechText, browserSelection.toString());
    const rect = range.getBoundingClientRect();
    if (startOffset === null || (!rect.width && !rect.height)) {
      setSelection(null);
      return;
    }

    setSelection({
      startOffset,
      left: Math.min(Math.max(rect.left + rect.width / 2, 88), window.innerWidth - 88),
      top: Math.max(rect.top - 10, 48)
    });
  }, [disabled, isSupported, speechText]);

  useEffect(() => {
    setSelection(null);
  }, [messageId, speechText]);

  useEffect(() => {
    if (!selection) return;
    const close = () => setSelection(null);
    const closeCollapsedSelection = () => {
      if (window.getSelection()?.isCollapsed) close();
    };
    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") close();
    };

    document.addEventListener("selectionchange", closeCollapsedSelection);
    document.addEventListener("keydown", closeOnEscape);
    window.addEventListener("resize", close);
    window.addEventListener("scroll", close, true);
    return () => {
      document.removeEventListener("selectionchange", closeCollapsedSelection);
      document.removeEventListener("keydown", closeOnEscape);
      window.removeEventListener("resize", close);
      window.removeEventListener("scroll", close, true);
    };
  }, [selection]);

  const speakFromSelection = () => {
    if (!selection) return;
    void Promise.resolve(onSpeak(messageId, speechText, { startOffset: selection.startOffset }));
    window.getSelection()?.removeAllRanges();
    setSelection(null);
  };

  return (
    <div>
      <div
        ref={contentRef}
        onPointerUp={() => window.requestAnimationFrame(captureSelection)}
        onKeyUp={() => window.requestAnimationFrame(captureSelection)}
      >
        {children}
      </div>

      {selectionAnchor && typeof document !== "undefined"
        ? createPortal(
            <div
              className="pointer-events-none fixed z-[80] -translate-x-1/2 -translate-y-full"
              style={{ left: selectionAnchor.left, top: selectionAnchor.top }}
            >
              <AnimatePresence>
                {selection ? (
                  <motion.button
                    key="speech-selection-action"
                    type="button"
                    data-agent-presentation={presentation}
                    className="agent-panel-overlay agent-panel-floating-acrylic agent-speech-selection-action pointer-events-auto inline-flex h-10 items-center gap-2 rounded-xl px-2.5 pr-3 text-xs font-semibold text-slate-800 transition-colors hover:text-[var(--action-blue-hover)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
                    initial={{ opacity: 0 }}
                    animate={{
                      opacity: 1,
                      transition: { duration: 0.12, ease: [0.16, 1, 0.3, 1] }
                    }}
                    exit={{
                      opacity: 0,
                      transition: { duration: 0.08, ease: [0.4, 0, 1, 1] }
                    }}
                    onMouseDown={(event) => event.preventDefault()}
                    onClick={speakFromSelection}
                  >
                    <span
                      className="grid h-6 w-6 shrink-0 place-items-center rounded-lg bg-[var(--action-soft)]/75 text-[var(--action-blue-hover)]"
                      aria-hidden="true"
                    >
                      <Volume2 size={15} />
                    </span>
                    从这里开始朗读
                  </motion.button>
                ) : null}
              </AnimatePresence>
            </div>,
            document.body
          )
        : null}
    </div>
  );
}

export function AgentMessageSpeechControls({
  speechState,
  onSpeak,
  onPause,
  onResume,
  onStop
}: {
  speechState: AgentSpeechState;
  onSpeak: () => void;
  onPause: () => void;
  onResume: () => void;
  onStop: () => void;
}) {
  return (
    <div className="flex shrink-0 items-center gap-0.5">
      <AgentSpeechVoicePicker />
      {speechState === "idle" ? (
        <SpeechIconButton label="语音播放" onClick={onSpeak}>
          <Volume2 size={16} aria-hidden="true" />
          <span className={AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME}>语音播放</span>
        </SpeechIconButton>
      ) : null}
      {speechState === "loading" ? (
        <>
          <SpeechIconButton label="正在生成语音" disabled>
            <LoaderCircle size={16} className="motion-safe:animate-spin" aria-hidden="true" />
          </SpeechIconButton>
          <SpeechIconButton label="停止语音播放" tone="danger" onClick={onStop}>
            <Square size={16} aria-hidden="true" />
          </SpeechIconButton>
        </>
      ) : null}
      {speechState === "playing" ? (
        <>
          <SpeechIconButton label="暂停语音播放" tone="primary" onClick={onPause}>
            <Pause size={16} aria-hidden="true" />
            <span className={AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME}>暂停</span>
          </SpeechIconButton>
          <SpeechIconButton label="停止语音播放" tone="danger" onClick={onStop}>
            <Square size={16} aria-hidden="true" />
          </SpeechIconButton>
        </>
      ) : null}
      {speechState === "paused" ? (
        <>
          <SpeechIconButton label="继续语音播放" tone="primary" onClick={onResume}>
            <Play size={16} aria-hidden="true" />
            <span className={AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME}>继续</span>
          </SpeechIconButton>
          <SpeechIconButton label="停止语音播放" tone="danger" onClick={onStop}>
            <Square size={16} aria-hidden="true" />
          </SpeechIconButton>
        </>
      ) : null}
    </div>
  );
}

function SpeechIconButton({
  label,
  tone = "default",
  disabled = false,
  onClick,
  children
}: {
  label: string;
  tone?: "default" | "primary" | "danger";
  disabled?: boolean;
  onClick?: () => void;
  children: ReactNode;
}) {
  return (
    <Button
      type="button"
      aria-label={label}
      title={label}
      disabled={disabled}
      onClick={onClick}
      size="sm"
      variant="ghost"
      className={cn(
        AGENT_MESSAGE_ACTION_CLASS_NAME,
        "shrink-0 disabled:cursor-wait",
        tone === "primary" && "text-[var(--action-blue-hover)]",
        tone === "danger" && "status-tone-danger text-[var(--status-foreground)]"
      )}
    >
      {children}
    </Button>
  );
}