65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { wrapFormattedText } from '@icynet/irclib';
|
|
import styles from './MessageBufferView.module.scss';
|
|
import { useState } from 'react';
|
|
import ReactDOMServer from 'react-dom/server';
|
|
import { ParsedIRCLine } from '../../lib/client-view.types';
|
|
import { escapeHtml } from '../../lib/utils/html';
|
|
import { MessageText } from '../MessageText/MessageText';
|
|
|
|
export const MessageBufferView = ({
|
|
messages,
|
|
topic,
|
|
sendMessage,
|
|
}: {
|
|
messages: ParsedIRCLine[];
|
|
topic?: string;
|
|
sendMessage: (msg: string) => void;
|
|
}) => {
|
|
const [message, setMessage] = useState<string>('');
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
{topic && <div className={styles.topic}>{topic}</div>}
|
|
<div className={styles.messages}>
|
|
{messages.map((msg, index) => (
|
|
<span key={index} className={styles.message}>
|
|
<span className={styles.time}>
|
|
{msg.time.toTimeString().substring(0, 8)}
|
|
</span>
|
|
<span className={styles.sender}>{msg.sender}</span>
|
|
<span
|
|
className={styles.message}
|
|
dangerouslySetInnerHTML={{
|
|
// TODO: fix this fuckin mess
|
|
__html: wrapFormattedText(
|
|
escapeHtml(msg.message),
|
|
(text, fg, bg, fmt) => {
|
|
return ReactDOMServer.renderToStaticMarkup(
|
|
<MessageText fg={fg} bg={bg} fmt={fmt}>
|
|
{text}
|
|
</MessageText>,
|
|
);
|
|
},
|
|
),
|
|
}}
|
|
></span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div className={styles.inputWrapper}>
|
|
<input
|
|
value={message}
|
|
className={styles.input}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onKeyUp={(e) => {
|
|
if (e.key === 'Enter') {
|
|
sendMessage(message);
|
|
setMessage('');
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|