links/static_src/jbot/components/ChatPanel.jsx

import { useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function AudioButton({ base64, mimeType = 'audio/mp3', label = '🔊' }) {
  const src = base64
    ? `data:${mimeType};base64,${base64}`
    : null;

  if (!src) return null;
  return (
    <audio
      className="audio-btn"
      controls
      src={src}
      title={label}
      preload="none"
    />
  );
}

function Bubble({ role, text, audioBase64, audioMime }) {
  const isUser = role === 'user';
  return (
    <div className={`bubble ${isUser ? 'bubble-user' : 'bubble-bot'}`}>
      <div className="bubble-label">{isUser ? '你' : 'JBOT'}</div>
      <div className="bubble-text">{text}</div>
      {audioBase64 && (
        <AudioButton base64={audioBase64} mimeType={audioMime || 'audio/mp3'} />
      )}
    </div>
  );
}

export default function ChatPanel({ messages, voiceStatus }) {
  const bottomRef = useRef(null);
  const navigate  = useNavigate();

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <section className="chat-panel">
      <div className="chat-header">
        <span className="chat-title">对话</span>
        <button className="history-link" onClick={() => navigate('/history')}>
          历史记录 →
        </button>
      </div>

      {voiceStatus && (
        <div className={`voice-status voice-status-${voiceStatus.type}`}>
          {voiceStatus.text}
        </div>
      )}

      <div className="chat-messages">
        {messages.length === 0 ? (
          <p className="chat-empty">按住 Space 开始说话…</p>
        ) : (
          messages.map((m) => (
            <Bubble
              key={m.id}
              role={m.role}
              text={m.text}
              audioBase64={m.audioBase64}
              audioMime={m.audioMime}
            />
          ))
        )}
        <div ref={bottomRef} />
      </div>
    </section>
  );
}