node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
51 lines (40 loc) • 1.59 kB
JavaScript
import React, { Fragment } from 'react';
import { Tag, List, FlexboxGrid } from 'rsuite';
import MessageType from '../../../src/components/message-type';
import humanFileSize from '../helpers/human-file-size';
import useTimedReRender from '../../../src/hooks/timed-rerender';
const Preview = ({ content }) => {
if (_.isString(content)) {
return <Fragment>{content}</Fragment>;
} else if (_.isObject(content) && content.type === 'Buffer') {
return <Fragment>Buffer <span className="file-size"> ({humanFileSize(content.data.length)})</span></Fragment>;
} else {
return <Fragment>Unknown content</Fragment>;
}
}
const MessageList = ({ messages = [] }) => {
useTimedReRender(6e4);
return (
<List hover autoScroll size="sm">
{messages.map((message, index) => (
<List.Item key={index} index={index}>
<FlexboxGrid>
<FlexboxGrid.Item colspan={3} className="ellipsis cell-date">
{message.ts.fromNow()}
</FlexboxGrid.Item>
<FlexboxGrid.Item colspan={3} className="cell-type">
<MessageType type={message.type} style={{ marginTop: '2px' }}/>
</FlexboxGrid.Item>
<FlexboxGrid.Item colspan={3} className="cell-chat-id ellipsis">
{message.chatId}
</FlexboxGrid.Item>
<FlexboxGrid.Item colspan={15} className="ellipsis cell-content">
<Preview content={message.content}/>
</FlexboxGrid.Item>
</FlexboxGrid>
</List.Item>
))}
</List>
)
};
export default MessageList;