1 files changed, 51 insertions, 0 deletions
diff --git a/vnext/src/ui/PM.js b/vnext/src/ui/PM.js
new file mode 100644
index 00000000..a1e70ad5
--- /dev/null
+++ b/vnext/src/ui/PM.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { UserType, MessageType } from './Types';
+
+import Avatar from './Avatar';
+import { format } from '../utils/embed';
+
+function PM(props) {
+    const { chat } = props;
+    return (
+        <li>
+            <div style={chatItemStyle(props.visitor, chat)}>
+                <Avatar user={chat.user} />
+                <div style={bubbleStyle(props.visitor, chat)}>
+                    <p dangerouslySetInnerHTML={{ __html: format(chat.body) }} />
+                </div>
+            </div>
+        </li>
+    );
+}
+
+export default React.memo(PM);
+
+function bubbleStyle(me, msg) {
+    const isMe = me.uid === msg.user.uid;
+    const color = isMe ? '#fff' : '#222';
+    const background = isMe ? '#ec4b98' : '#eee';
+    return {
+        background: background,
+        color: color,
+        padding: '12px'
+    };
+}
+
+function chatItemStyle(me, msg) {
+    const isMe = me.uid === msg.user.uid;
+    const alignment = isMe ? 'flex-end' : 'flex-start';
+    return {
+        padding: '3px 6px',
+        listStyle: 'none',
+        margin: '10px 0',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: alignment
+    };
+}
+
+PM.propTypes = {
+    chat: MessageType.isRequired,
+    visitor: UserType.isRequired
+};