cluedin-widget/core/components/generics/Conversation.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from "react";
import iso from "../../../iso";
import ReactEmoji from "react-emoji";

var extractPseudoTag = new RegExp( '<.*?>', 'g' );

var removeBrackets = function( m ) {
    var values = m.Message.match( extractPseudoTag );
    var result = m.Message;
    if( values && values.length > 0 ) {
        values.forEach( function( t ) {
            var withoutBracket = t.substring( 1, (t.length - 1) );
            if( t.indexOf( 'http://' ) > -1 || t.indexOf( 'https://' ) > -1 ) {
                result = result.replace( t, '<a href="' + withoutBracket + '" target="_blank">' + withoutBracket + '</a>' );
            } else {
                result = result.replace( t, withoutBracket );
            }
        } );
    }

    m.Message = result;

    return m;
};
class Conversation extends Component {

    render() {
        const { messages } = this.props;
        let messagesToRender = messages.Messages;
        let totale           = [];

        var numberOfAuthor = iso.collection.reduce( messagesToRender, function( total, m ) {
            total.push( m.Author );
            return total;
        }, [] );

        numberOfAuthor = iso.array.uniq( numberOfAuthor );

        if( numberOfAuthor.length === 2 ) {

            messagesToRender = iso.collection.map( messagesToRender, function( dis ) {
                if( dis.Author === numberOfAuthor[ 1 ] ) {
                    dis.reverse = true;
                }

                return dis;
            } );

        }

        messagesToRender = iso.collection.map( messagesToRender, removeBrackets );

        return (
            <div className="cluedIn_conversation">
                <ul className="media-list chat-list">
                    {messagesToRender.map( ( m, i ) => {

                        let messageClassName = m.reverse ? 'media reversed' : 'media';
                        let authorOnLeft;
                        let authorOnRight;

                        if( m.reverse ) {
                            authorOnRight = <div className="media-right">
                                <div className="userName">{m.Author}</div>
                            </div>
                        } else {
                            authorOnLeft = <div className="media-left">
                                <div className="userName">{m.Author}</div>
                            </div>
                        }

                        return <li key={i} className={messageClassName}>
                            {authorOnLeft}
                            <div className="media-body">
                                <div className="media-content" style={{whiteSpace: 'pre-line'}}>
                                    {ReactEmoji.emojify( m.Message )}
                                </div>
                            </div>
                            {authorOnRight}
                        </li>
                    } )}
                </ul>
            </div>
        );
    }
}

export default Conversation