import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useTypewriter } from '../../hooks/use-typewriter';
import { markdownComponents } from './markdown-components';
/**
 * 消息项组件（支持逐字显示效果）
 */
export const MessageItem = ({ message, isGenerating = false }) => {
    // 对于正在生成的助手消息，使用逐字显示效果
    // 注意：Hook 必须无条件调用，通过 enabled 参数控制是否启用
    const typewriterContent = useTypewriter(message.content, {
        speed: 30,
        enabled: message.role === 'assistant' && isGenerating,
    });
    // 如果未启用逐字显示，直接使用原始内容
    const displayContent = message.role === 'assistant' && isGenerating ? typewriterContent : message.content;
    const renderMarkdown = (text) => (React.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, text));
    const renderAssistantContent = () => renderMarkdown(displayContent || '');
    return (React.createElement("div", { className: `cn-ai-agent__message cn-ai-agent__message--${message.role}` }, message.role === 'assistant' ? (React.createElement("div", { className: "cn-ai-agent__message-content" }, renderAssistantContent())) : (React.createElement("div", { className: "cn-ai-agent__message-text" }, displayContent || ''))));
};
MessageItem.displayName = 'MessageItem';
