import React from 'react';
import styles from './styles.module.css';

export default function ChatMessage({ message, isStreaming }) {
  const isUser = message.role === 'user';

  return (
    <div className={`${styles.message} ${isUser ? styles.messageUser : styles.messageAssistant}`}>
      <div className={`${styles.bubble} ${isUser ? styles.bubbleUser : styles.bubbleAssistant}`}>
        {message.content}
        {!isUser && isStreaming && <span className={styles.cursor} />}
      </div>
      {!isUser && message.sources && message.sources.length > 0 && (
        <div className={styles.sources}>
          <div className={styles.sourcesTitle}>📎 相关文档</div>
          {message.sources.map((link, i) => (
            <a
              key={i}
              className={styles.sourceLink}
              href={link.path}
              target="_blank"
              rel="noopener noreferrer"
            >
              {link.breadcrumb}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}
