import { useRef, useEffect, useState } from 'react';
import { Message } from '../../hooks/useArthur';
import './arthur.css';
interface ConversationProps {
messages: Message[];
isThinking: boolean;
}
// Simple markdown renderer
function renderMarkdown(text: string): string {
return text
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
.replace(/\*(.+?)\*/g, '<em>$1</em>')
.replace(/`(.+?)`/g, '<code>$1</code>')
.replace(/^- (.+)$/gm, '<li>$1</li>')
.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
.replace(/\n/g, '<br>');
}
export function Conversation({ messages, isThinking }: ConversationProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [modalMessage, setModalMessage] = useState<Message | null>(null);
// Auto-scroll to bottom
useEffect(() => {
if (containerRef.current) {
containerRef.current.scrollTop = containerRef.current.scrollHeight;
}
}, [messages, isThinking]);
const closeModal = () => setModalMessage(null);
// Close modal on Escape
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') closeModal();
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
return (
<>
<div className="arthur-conversation" ref={containerRef}>
{messages.map((msg) => (
<div
key={msg.id}
className={`arthur-message ${msg.type}`}
onClick={() => setModalMessage(msg)}
>
<div className="label">{msg.type === 'user' ? 'You' : 'Arthur'}</div>
<div
className="content"
dangerouslySetInnerHTML={{ __html: renderMarkdown(msg.text) }}
/>
</div>
))}
{isThinking && (
<div className="thinking-indicator">
<div className="thinking-dot" />
<div className="thinking-dot" />
<div className="thinking-dot" />
</div>
)}
</div>
{/* Message modal */}
<div className={`arthur-modal ${modalMessage ? 'show' : ''}`} onClick={closeModal}>
<div className="arthur-modal-content" onClick={(e) => e.stopPropagation()}>
{modalMessage && (
<>
<div className="label" style={{ marginBottom: '1rem', color: 'rgba(0,195,255,0.7)' }}>
{modalMessage.type === 'user' ? 'YOU' : 'ARTHUR'}
</div>
<div dangerouslySetInnerHTML={{ __html: renderMarkdown(modalMessage.text) }} />
</>
)}
</div>
<div className="arthur-modal-hint">Click anywhere or press Esc to close</div>
</div>
</>
);
}
