= props.messages;
17 | const htmlMessages = messages.map((m: MonitorMessage, i: number) => {
18 | if (m.type === MonitorType.MessageFromChip) {
19 | return (
20 | {ReactHtmlParser(converter.toHtml(m.message))}
21 | );
22 | }
23 | return (
24 |
25 | {m.message}
26 | <
27 |
28 | );
29 | });
30 | return {htmlMessages}
;
31 | }
32 |
33 | handleKeyDown(e: any) {
34 | if (e.key === "Enter") {
35 | const msg = document.getElementById("message") as HTMLInputElement;
36 | this.sendMessageToChip(msg.value);
37 | msg.value = "";
38 | }
39 | }
40 |
41 | handleClick() {
42 | const msg = document.getElementById("message") as HTMLInputElement;
43 | this.sendMessageToChip(msg.value);
44 | msg.value = "";
45 | }
46 |
47 | sendMessageToChip(message: string) {
48 | if (!message || message === "") {
49 | return;
50 | }
51 | this.props.onNewMessage(message);
52 | this.scrollToLatestMessage();
53 | }
54 |
55 | scrollToLatestMessage() {
56 | const messagesPane = document.getElementById("messagesPane");
57 | if (messagesPane) {
58 | messagesPane.scrollTop = messagesPane.scrollHeight;
59 | }
60 | }
61 |
62 | render() {
63 | const htmlMessages = this.props.messages.map((m: MonitorMessage, i: number) => {
64 | if (m.type === MonitorType.MessageFromChip) {
65 | return (
66 | {ReactHtmlParser(converter.toHtml(m.message))}
67 | );
68 | }
69 | return (
70 |
71 | {m.message}
72 | <
73 |
74 | );
75 | });
76 | return
77 |
78 |
79 | this.handleKeyDown(_e)} id="message" className="input fixed-height-2em" type="text" placeholder="Send message to the chip" />
80 |
81 |
82 | this.handleClick()}>Send
83 |
84 |
85 |
88 |
3 |