}\n {isImage(message) && displayImage(message)}\n \n {channels[currentChannel].users && }\n \n \n {channels[currentChannel].username ? `${channels[currentChannel].username}` : `#${currentChannel}`}\n \n \n
\n )\n }\n }\n \n
\n {usersList.length}
\n \n \n
\n )\n }\n }\n - \n {usersList.map(user => (\n
\n {userOffline(channelUsers[user]) ? \n \n \n \n
\n \n {!userList.length ? \"\" : `${userList.join(',')} is typing`}\n
\n )\n }\n}\n\nfunction onDrop(acceptedFiles, rejectedFiles, ipfs, sendMessage) {\n const file = acceptedFiles[0];\n uploadFileAndSend(ipfs, file, sendMessage);\n}\n\nconst keyDownHandler = (e, typingEvent, setValue, value) => {\n if(e.shiftKey && e.keyCode === 13) {\n\t e.preventDefault();\n const cursor = e.target.selectionStart;\n const newValue = `${value.slice(0, cursor)}\\n${value.slice(cursor)}`;\n setValue('chatInput', newValue);\n }\n else if (e.keyCode === 13) {\n e.preventDefault();\n const form = ChatRoomForm.current;\n form.submitForm();\n }\n typingEvent(e)\n};\n\nconst AutoScrollList = autoscroll(List);\nconst formStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', flexBasis: '10%' };\nconst ChatRoomForm = createRef();\nconst NameInput = createRef();\nconst messagesOffset = 185;\nclass ChatRoom extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showEmojis: false,\n infoPanelActive: true\n };\n }\n\n toggleEmojis(e) {\n this.setState(({ showEmojis: !this.state.showEmojis }));\n }\n\n toggleInfoPanel = () => {\n this.setState({ infoPanelActive: !this.state.infoPanelActive })\n }\n\n uploadFileDialog() {\n this.fileInput.click();\n }\n\n fileChangedHandler(event) {\n const { ipfs, sendMessage } = this.props;\n const file = event.target.files[0];\n uploadFileAndSend(ipfs, file, sendMessage);\n }\n\n addEmoji(emoji, chatInput, setValue) {\n console.log(emoji);\n setValue('chatInput', `${chatInput}:${emoji.id}:`);\n this.setState(({showEmojis: false}), () => {\n NameInput.current.labelNode.focus();\n });\n }\n\n render() {\n const { messages, sendMessage, currentChannel, usersTyping, typingEvent, channelUsers, allUsers, ipfs } = this.props;\n const { showEmojis, infoPanelActive } = this.state;\n const messagesHeight = `calc(100vh - ${messagesOffset}px)`;\n return (\n \n { this.fileInput = input; }}\n onChange={this.fileChangedHandler.bind(this)}\n style={{display: 'none'}}\n />\n \n {\n onDrop(a, r, ipfs, sendMessage);\n }}\n disableClick\n style={{ position: 'relative', height: '100%' }}\n activeStyle={{\n backgroundColor: 'grey',\n outline: '5px dashed lightgrey',\n alignSelf: 'center',\n outlineOffset: '-10px'\n }}>\n \n \n \n \n {messages[currentChannel] && messages[currentChannel].map((message) => (\n \n \n \n \n \n ))}\n \n {\n const { chatInput } = values;\n sendMessage(chatInput);\n resetForm();\n setSubmitting(false);\n }}\n >\n {({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n handleSubmit,\n setFieldValue\n }) => (\n \n {infoPanelActive && \n \n \n \n \n
\n )\n }\n}\n\nexport default ChatRoom;\n","// @flow\nimport React from 'react';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { ChatContext } from '../context';\n\nconst ChannelBox = ({ channelName, message }) => (\n \n \n \n
\n )}\n \n \n {channels.map((channel) => (\n \n \n ))}\n
\n\n)\nconst ChannelList = ({ channels }) => {\n const channelList = Object.keys(channels)\n const onlyChannels = channelList.filter((i) => !isContactCode(i));\n const directMessages = channelList.filter(isContactCode);\n\n return (\n - \n
\n
\n);\n\nexport default ContextPanel;\n","import React from 'react';\n\nconst StatusLogo = () => (\n \n)\n\nexport default StatusLogo\n","import React from 'react';\n\nconst JSLogo = () => (\n \n)\n\nexport default JSLogo;\n","import React from 'react';\nimport StatusLogo from './status-logo';\nimport JSLogo from './js-logo';\n\nconst StatusJSLogo = () => (\n Status
\n\n
\n)\n\nexport default StatusJSLogo;\n","import React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { Formik } from 'formik';\nimport { func } from 'prop-types';\nimport { isNull } from 'lodash';\nimport StatusJSLogo from '../images/statusjs-logo';\n\nconst containerStyle = {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-evenly',\n height: '100vh',\n width: '50%'\n};\nconst Login = ({ setupKeyringController, keyStore, wipeKeyStore, connect }) => (\n \n
\n \n
\n)\n\nexport const FullScreenGridLoader = () => (\n \n
\n)\n\n","export const openBrowserWindow = url => {\n window.open(url, '_blank', 'nodeIntegration=no');\n}\n\nexport const addWindowEventListeners = (sendMessage) => {\n const verbose = window.statusVerbose\n window.addEventListener('message', function (msg) {\n if(window.statusVerbose) console.log('message', msg)\n if (msg.source === window.parent && window.statusVerbose) {\n console.log(msg.data)\n }\n\n if (msg.data && msg.data.type && msg.data.type === 'whisperMsg') {\n sendMessage(msg.data.msg)\n }\n })\n}\n","// @flow\nimport React, { PureComponent, Fragment } from 'react';\nimport StatusJS from 'status-js-api';\nimport Murmur from 'murmur-client';\nimport IPFS from 'ipfs';\nimport uuid from 'uuid/v4';\nimport { isNil } from 'lodash';\nimport Grid from '@material-ui/core/Grid';\nimport ChatRoom from './ChatRoom';\nimport ContextPanel from './ContextPanel';\nimport Login from './Login';\nimport { User } from '../utils/actors';\nimport { ChatContext } from '../context';\nimport { isContactCode } from '../utils/parsers';\nimport { getKeyData, createVault, restoreVault, wipeVault } from '../utils/keyManagement';\nimport { FullScreenLoader } from './Loaders';\nimport { openBrowserWindow, addWindowEventListeners } from '../utils/windows';\n\nconst typingNotificationsTimestamp = {};\n\n\nconst DEFAULT_CHANNEL = \"status-js\";\nconst URL = \"ws://localhost:8546\";\nconst status = new StatusJS();\n\ntype Props = {};\n\nexport default class Home extends PureComponent\n \n {!isNil(channels) &&\n \n \n \n
}\n }\n {isImage(message) && displayImage(message)}\n \n {channels[currentChannel].users && }\n \n \n {channels[currentChannel].username ? `${channels[currentChannel].username}` : `#${currentChannel}`}\n \n \n
\n )\n }\n }\n \n
\n {usersList.length}
\n \n \n
\n )\n }\n }\n - \n {usersList.map(user => (\n
\n {userOffline(channelUsers[user]) ? \n \n \n \n
\n \n {!userList.length ? \"\" : `${userList.join(',')} is typing`}\n
\n )\n }\n}\n\nfunction onDrop(acceptedFiles, rejectedFiles, ipfs, sendMessage) {\n const file = acceptedFiles[0];\n uploadFileAndSend(ipfs, file, sendMessage);\n}\n\nconst keyDownHandler = (e, typingEvent, setValue, value) => {\n if(e.shiftKey && e.keyCode === 13) {\n\t e.preventDefault();\n const cursor = e.target.selectionStart;\n const newValue = `${value.slice(0, cursor)}\\n${value.slice(cursor)}`;\n setValue('chatInput', newValue);\n }\n else if (e.keyCode === 13) {\n e.preventDefault();\n const form = ChatRoomForm.current;\n form.dispatchEvent(new Event(\"submit\"));\n }\n typingEvent(e)\n};\n\nconst AutoScrollList = autoscroll(List);\nconst formStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', flexBasis: '10%' };\nconst ChatRoomForm = createRef();\nconst NameInput = createRef();\nconst messagesOffset = 185;\nclass ChatRoom extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showEmojis: false,\n infoPanelActive: true\n };\n }\n\n toggleEmojis(e) {\n this.setState(({ showEmojis: !this.state.showEmojis }));\n }\n\n toggleInfoPanel = () => {\n this.setState({ infoPanelActive: !this.state.infoPanelActive })\n }\n\n uploadFileDialog() {\n this.fileInput.click();\n }\n\n fileChangedHandler(event) {\n const { ipfs, sendMessage } = this.props;\n const file = event.target.files[0];\n uploadFileAndSend(ipfs, file, sendMessage);\n }\n\n addEmoji(emoji, chatInput, setValue) {\n console.log(emoji);\n setValue('chatInput', `${chatInput}:${emoji.id}:`);\n this.setState(({showEmojis: false}), () => {\n NameInput.current.labelNode.focus();\n });\n }\n\n render() {\n const { messages, sendMessage, currentChannel, usersTyping, typingEvent, channelUsers, allUsers, ipfs } = this.props;\n const { showEmojis, infoPanelActive } = this.state;\n const messagesHeight = `calc(100vh - ${messagesOffset}px)`;\n return (\n \n { this.fileInput = input; }}\n onChange={this.fileChangedHandler.bind(this)}\n style={{display: 'none'}}\n />\n \n {\n onDrop(a, r, ipfs, sendMessage);\n }}\n disableClick\n style={{ position: 'relative', height: '100%' }}\n activeStyle={{\n backgroundColor: 'grey',\n outline: '5px dashed lightgrey',\n alignSelf: 'center',\n outlineOffset: '-10px'\n }}>\n \n \n \n \n {messages[currentChannel] && messages[currentChannel].map((message) => (\n \n \n \n \n \n ))}\n \n {\n const { chatInput } = values;\n sendMessage(chatInput);\n resetForm();\n setSubmitting(false);\n }}\n >\n {({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n handleSubmit,\n setFieldValue\n }) => (\n \n {infoPanelActive && \n \n \n \n \n
\n )\n }\n}\n\nexport default ChatRoom;\n","// @flow\nimport React from 'react';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { ChatContext } from '../context';\n\nconst ChannelBox = ({ channelName, message }) => (\n \n \n \n
\n )}\n \n \n {channels.map((channel) => (\n \n \n ))}\n
\n\n)\nconst ChannelList = ({ channels }) => {\n const channelList = Object.keys(channels)\n const onlyChannels = channelList.filter((i) => !isContactCode(i));\n const directMessages = channelList.filter(isContactCode);\n\n return (\n - \n
\n
\n);\n\nexport default ContextPanel;\n","import React from 'react';\n\nconst StatusLogo = () => (\n \n)\n\nexport default StatusLogo\n","import React from 'react';\n\nconst JSLogo = () => (\n \n)\n\nexport default JSLogo;\n","import React from 'react';\nimport StatusLogo from './status-logo';\nimport JSLogo from './js-logo';\n\nconst StatusJSLogo = () => (\n Status
\n\n
\n)\n\nexport default StatusJSLogo;\n","import React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { Formik } from 'formik';\nimport { func } from 'prop-types';\nimport { isNull } from 'lodash';\nimport StatusJSLogo from '../images/statusjs-logo';\n\nconst containerStyle = {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-evenly',\n height: '100vh',\n width: '50%'\n};\nconst Login = ({ setupKeyringController, keyStore, wipeKeyStore, connect }) => (\n \n
\n \n
\n)\n\nexport const FullScreenGridLoader = () => (\n \n
\n)\n\n","export const openBrowserWindow = url => {\n window.open(url, '_blank', 'nodeIntegration=no');\n}\n\nexport const addWindowEventListeners = (sendMessage) => {\n const verbose = window.statusVerbose\n window.addEventListener('message', function (msg) {\n if(window.statusVerbose) console.log('message', msg)\n if (msg.source === window.parent && window.statusVerbose) {\n console.log(msg.data)\n }\n\n if (msg.data && msg.data.type && msg.data.type === 'whisperMsg') {\n sendMessage(msg.data.msg)\n }\n })\n}\n","// @flow\nimport React, { PureComponent, Fragment } from 'react';\nimport StatusJS from 'status-js-api';\nimport Murmur from 'murmur-client';\nimport IPFS from 'ipfs';\nimport uuid from 'uuid/v4';\nimport { isNil } from 'lodash';\nimport Grid from '@material-ui/core/Grid';\nimport ChatRoom from './ChatRoom';\nimport ContextPanel from './ContextPanel';\nimport Login from './Login';\nimport { User } from '../utils/actors';\nimport { ChatContext } from '../context';\nimport { isContactCode } from '../utils/parsers';\nimport { getKeyData, createVault, restoreVault, wipeVault } from '../utils/keyManagement';\nimport { FullScreenLoader } from './Loaders';\nimport { openBrowserWindow, addWindowEventListeners } from '../utils/windows';\n\nconst typingNotificationsTimestamp = {};\n\n\nconst DEFAULT_CHANNEL = \"status-js\";\nconst URL = \"ws://localhost:8546\";\nconst status = new StatusJS();\n\ntype Props = {};\n\nexport default class Home extends PureComponent\n \n {!isNil(channels) &&\n \n \n \n
}\n