frontend-widget/src/components/Message.jsx

import { marked } from 'marked';
import ThinkingBlock from './ThinkingBlock';

export default function Message({ message }) {
    const { sender, text, thinking, debugInfo } = message;
    const isUser = sender === 'user';

    let debugText = '';
    if (debugInfo) {
        debugText = `Intent: ${debugInfo.intent} (${debugInfo.confidence})`;
        if (debugInfo.entities && Object.keys(debugInfo.entities).length > 0) {
            debugText += ` | Entities: ${JSON.stringify(debugInfo.entities)}`;
        }
        if (debugInfo.language) debugText += ` | Language: ${debugInfo.language}`;
        if (debugInfo.environment) debugText += ` | Env: ${debugInfo.environment}`;
    }

    return (
        <>
            {!isUser && <ThinkingBlock thinking={thinking} duration={message.thinkingDuration} />}
            <div class={`message ${isUser ? 'user-message' : 'bot-message'}`}>
                <div class="message-avatar">{isUser ? '\uD83D\uDC64' : '\uD83E\uDD16'}</div>
                <div class="message-content">
                    <div dangerouslySetInnerHTML={{ __html: marked.parse(text) }} />
                    {debugInfo && <div class="debug-info">{debugText}</div>}
                </div>
            </div>
        </>
    );
}