dave/ocrcc-chatbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

cleanup code, initialize client on opening window

Browse Source
This commit is contained in:
Sharon Kennedy
2020-02-05 13:42:34 -05:00
parent 5391338d7f
commit 620f7017f3
5 changed files with 149 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/blank.html
View File

@@ -1,14 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Embeddable Widget</title>
</head>
<body>
<p>Note: Widget rendered in bottom-right of this screen.</p>
<script src="./widget.js"></script>
<script>
EmbeddableWidget.mount();
</script>
</body>
</html>

15
public/index.html
View File

@@ -8,7 +8,20 @@
<script src="./widget.js"></script>
<script>
EmbeddableWidget.mount();
var theme = {
themeColor: "#008080",
lightColor: "#FFF8F0",
darkColor: "#22333B",
errorColor: "#FFFACD",
font: "'Assistant', 'Helvetica', sans-serif",
placement: "right"
};
EmbeddableWidget.mount({
matrixServerUrl: "https://matrix.rhok.space",
roomName: "Support Chat",
theme: theme
});
</script>
</body>
</html>

231
src/components/chatbox.jsx
View File

@@ -9,30 +9,38 @@ import * as olm from "olm"
global.Olm = olm
import * as matrix from "matrix-js-sdk";
import LocalStorageCryptoStore from "matrix-js-sdk/lib/crypto/store/localStorage-crypto-store";
import {uuid} from "uuidv4"
import Message from "./message";
const MATRIX_SERVER_ADDRESS = "https://matrix.rhok.space"
const DEFAULT_MATRIX_SERVER = "https://matrix.rhok.space"
const DEFAULT_ROOM_NAME = "Support Chat"
const FACILITATOR_USERNAME = "@ocrcc-facilitator-demo:rhok.space"
const CHATROOM_NAME = "Support Chat"
const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
const DEFAULT_THEME = {
themeColor: "#008080", // teal
lightColor: "#FFF8F0",
darkColor: "#22333B",
errorColor: "#FFFACD",
font: "'Assistant', 'Helvetica', sans-serif",
placement: "right"
};
class ChatBox extends React.Component {
constructor(props) {
super(props)
const client = matrix.createClient(MATRIX_SERVER_ADDRESS)
const client = matrix.createClient(this.props.matrixServerUrl)
this.state = {
client: client,
client: null,
ready: false,
rooms: { chunk: [] },
accessToken: null,
userId: null,
messages: [],
inputValue: "",
errors: [],
roomId: null,
}
this.chatboxInput = React.createRef();
}
@@ -45,6 +53,66 @@ class ChatBox extends React.Component {
}
}
initializeClient = () => {
// empty registration request to get session
let client = matrix.createClient(this.props.matrixServerUrl)
return client.registerRequest({})
.then(data => {
console.log("Empty registration request to get session", data)
})
.catch(err => {
// actual registration request with randomly generated username and password
const username = uuid()
const password = uuid()
const sessionId = err.data.session
client.registerRequest({
auth: {session: sessionId, type: "m.login.dummy"},
inhibit_login: false,
password: password,
username: username,
x_show_msisdn: true,
})
.then(data => {
// use node localStorage if window.localStorage is not available
let localStorage = global.localStorage;
if (typeof localStorage === "undefined" || localStorage === null) {
const deviceDesc = `matrix-chat-${data.device_id}-${sessionId}`
const localStoragePath = path.resolve(path.join(os.homedir(), ".local-storage", deviceDesc))
localStorage = new LocalStorage(localStoragePath);
}
this.setState({
accessToken: data.access_token,
userId: data.user_id,
username: username
})
// create new client with full options
let opts = {
baseUrl: this.props.matrixServerUrl,
accessToken: data.access_token,
userId: data.user_id,
deviceId: data.device_id,
sessionStore: new matrix.WebStorageSessionStore(localStorage),
}
client = matrix.createClient(opts)
client.setDisplayName("Anonymous")
})
.catch(err => {
console.log("Registration error", err)
})
.then(() => client.initCrypto())
.finally(() => client.startClient())
.then(() => {
this.setState({
client: client
})
})
})
}
createRoom = () => {
const currentDate = new Date()
const chatDate = currentDate.toLocaleDateString()
@@ -53,7 +121,7 @@ class ChatBox extends React.Component {
room_alias_name: `private-support-chat-${uuid()}`,
invite: [FACILITATOR_USERNAME], // TODO: create bot user to add
visibility: 'private',
name: `${chatDate} - ${CHATROOM_NAME} - started at ${chatTime}`,
name: `${chatDate} - ${this.props.roomName} - started at ${chatTime}`,
initial_state: [
{
type: 'm.room.encryption',
@@ -62,39 +130,39 @@ class ChatBox extends React.Component {
},
]
}).then(data => {
})
.then(data => {
this.setState({
roomId: data.room_id
})
// this.state.client.setRoomEncryption(data.room_id, ENCRYPTION_CONFIG)
}).catch(err => {
})
.catch(err => {
console.log("Unable to create room", err)
})
}
sendMessage = () => {
this.state.client.sendTextMessage(this.state.roomId, this.state.inputValue).then((res) => {
this.setState({
inputValue: "",
isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId)
this.state.client.sendTextMessage(this.state.roomId, this.state.inputValue)
.then((res) => {
this.setState({
inputValue: "",
})
this.chatboxInput.current.focus()
})
this.chatboxInput.current.focus()
}).catch((err) => {
console.log(err);
Object.keys(err.devices).forEach((userId) => {
Object.keys(err.devices[userId]).map((deviceId) => {
this.state.client.setDeviceKnown(userId, deviceId, true);
});
this.state.client.sendTextMessage(this.state.roomId, this.state.inputValue)
.then((res) => {
this.setState({ inputValue: "", isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId) })
this.chatboxInput.current.focus()
})
.catch(err => {
console.log(err)
.catch((err) => {
switch (err["errcode"]) {
case "M_UNKNOWN": // UnknownDeviceError
Object.keys(err.devices).forEach((userId) => {
Object.keys(err.devices[userId]).map((deviceId) => {
this.state.client.setDeviceKnown(userId, deviceId, true);
});
});
});
})
this.sendMessage()
break;
default:
console.log("Error sending message", err);
}
})
}
handleMessageEvent = event => {
@@ -111,63 +179,9 @@ class ChatBox extends React.Component {
this.setState({ messages })
}
componentDidMount() {
// empty registration request to get session
this.state.client.registerRequest({}).then(data => {
console.log("Empty registration request to get session", data)
}).catch(err => {
// actual registration request with randomly generated username and password
const username = uuid()
const password = uuid()
const sessionId = err.data.session
this.state.client.registerRequest({
auth: {session: sessionId, type: "m.login.dummy"},
inhibit_login: false,
password: password,
username: username,
x_show_msisdn: true,
}).then(data => {
// use node localStorage if window.localStorage is not available
let localStorage = global.localStorage;
if (typeof localStorage === "undefined" || localStorage === null) {
const deviceDesc = `matrix-chat-${data.device_id}-${sessionId}`
const localStoragePath = path.resolve(path.join(os.homedir(), ".local-storage", deviceDesc))
localStorage = new LocalStorage(localStoragePath);
}
// create new client with full options
let opts = {
baseUrl: MATRIX_SERVER_ADDRESS,
accessToken: data.access_token,
userId: data.user_id,
deviceId: data.device_id,
sessionStore: new matrix.WebStorageSessionStore(localStorage),
}
this.setState({
accessToken: data.access_token,
userId: data.user_id,
username: username,
client: matrix.createClient(opts)
}, () => {
this.state.client.setDisplayName("Anonymous")
})
}).catch(err => {
console.log("Registration error", err)
})
})
}
componentDidUpdate(prevProps, prevState) {
if (prevState.client !== this.state.client) {
this.state.client.initCrypto().then(res => {
console.log("Crypto initialized!")
}).catch(err => {
console.log("Crypto ERROR", err)
}).finally(() => {
this.state.client.startClient()
})
this.createRoom()
this.state.client.once('sync', (state, prevState, res) => {
if (state === "PREPARED") {
@@ -191,23 +205,30 @@ class ChatBox extends React.Component {
return console.log("message encrypted")
}
console.log("ROOM TIMELINE EVENT", event)
this.handleMessageEvent(event)
}
});
this.state.client.on("Event.decrypted", (event) => {
console.log("EVENT DECRYPTED => ", event)
if (event.getType() === "m.room.message") {
this.handleMessageEvent(event)
}
});
}
if (prevProps.status !== "entered" && this.props.status === "entered") {
if (prevState.roomId !== this.state.roomId) {
this.setState({
isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId)
})
}
if (!prevState.ready && this.state.ready) {
this.chatboxInput.current.focus()
}
if (this.state.client === null && prevProps.status !== "entered" && this.props.status === "entered") {
this.initializeClient()
}
}
componentWillUnmount() {
@@ -232,13 +253,6 @@ class ChatBox extends React.Component {
render() {
const { ready, messages, inputValue, userId, isRoomEncrypted } = this.state;
const { opened, handleToggleOpen } = this.props;
console.log("isRoomEncrypted", isRoomEncrypted)
if (!ready) {
return (
<div className="loader">loading...</div>
)
}
return (
<div id="ocrcc-chatbox">
@@ -255,21 +269,24 @@ class ChatBox extends React.Component {
<span className={`arrow ${opened ? "opened" : "closed"}`}>⌃</span>
</button>
</div>
<div className="message-window">
<div className="messages">
{
ready ?
messages.map((message, index) => {
return(
<Message key={message.id} message={message} userId={userId} />
)
})
}) :
<div className="loader">loading...</div>
}
</div>
<div className="notices">
{
isRoomEncrypted && <div>Messages in this chat are secured with end-to-end encryption.</div>
}
</div>
</div>
<div className="notices">
{
isRoomEncrypted && <div>Messages in this chat are secured with end-to-end encryption.</div>
}
</div>
</div>
<div className="input-window">
<form onSubmit={this.handleSubmit}>
@@ -289,11 +306,15 @@ class ChatBox extends React.Component {
};
ChatBox.propTypes = {
matrixServerUrl: PropTypes.string.isRequired,
roomName: PropTypes.string.isRequired,
theme: PropTypes.object,
}
ChatBox.defaultProps = {
matrixServerUrl: DEFAULT_MATRIX_SERVER,
roomName: DEFAULT_ROOM_NAME,
theme: DEFAULT_THEME,
}
export default ChatBox;

8
src/components/widget.js
View File

@@ -40,7 +40,12 @@ class Widget extends Component {
<Transition in={opened} timeout={250} onExited={this.handleWidgetExit}>
{(status) => (
<div className={`widget widget-${status}`}>
<Chatbox handleToggleOpen={this.handleToggleOpen} opened={opened} status={status} />
<Chatbox
handleToggleOpen={this.handleToggleOpen}
opened={opened}
status={status}
{...this.props} // eslint-disable-line
/>
</div>
)}
</Transition>
@@ -61,6 +66,7 @@ class Widget extends Component {
}
Widget.propTypes = {
};
Widget.defaultProps = {

2
src/outputs/embeddable-widget.js
View File

@@ -13,6 +13,7 @@ export default class EmbeddableWidget {
if (EmbeddableWidget.el) {
throw new Error('EmbeddableWidget is already mounted, unmount first');
}
const el = document.createElement('div');
el.setAttribute('class', 'cleanslate');
@@ -27,6 +28,7 @@ export default class EmbeddableWidget {
);
EmbeddableWidget.el = el;
}
if (document.readyState === 'complete') {
doRender();
} else {