v1.6.0/interactive system message

app/src/Api.js

@@ -107,6 +107,23 @@ export const fetcher = async ({ endpoint, method, ...args }) => {
   );
 };
 
+export const webhookFetcher = async ({ endpoint, ...args }) => {
+  return new Promise((resolve, reject) =>
+    chrome.runtime.sendMessage(
+      {
+        type: 'API_CALL',
+        url: endpoint,
+        method: 'POST',
+        ...args,
+      },
+      (response) => {
+        if (response.status > 299) reject(response);
+        else resolve({ json: () => response });
+      }
+    )
+  );
+};
+
 export const CreateRoomApi = async (data) => {
   return fetcher({
     endpoint: 'create',
@@ -180,4 +197,4 @@ export const UpdateAdminOnly = async (data) => {
     endpoint: `updateAdminOnly/${data.partyName}/${data.adminOnly}`,
     method: 'PUT',
   });
-}
+};

app/src/Thread.css

@@ -19,7 +19,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 .thread-container * {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Roboto', sans-serif !important;
   letter-spacing: 1.15px;
 }
 .thread-container {
@@ -224,10 +224,42 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
   margin: 0 auto;
   background: none;
   font-size: 12px;
-  color: #555;
+  color: #9f9f9f;
   text-align: center;
   display: block;
 }
 .thread-item.system-message:hover .thread-message p {
   margin: 0 auto;
 }
+/*
+ I N T E R A C T I V E
+ S Y S T E M
+ M E S S A G E S
+*/
+.thread-interactive-text {
+  display: flex !important;
+  flex-direction: column !important;
+  margin: 0 auto !important;
+  background-color: #222222 !important;
+  border-radius: 50px !important;
+  padding: 20px 35px !important;
+  transition: all ease-in-out 0.3s;
+  transition-delay: 0.1s;
+}
+.thread-interactive-text:hover {
+  background-color: #111111 !important;
+}
+.thread-interactive-question {
+  font-size: 10px !important;
+  letter-spacing: 2px !important;
+  color: #9f9f9f !important;
+  line-height: initial !important;
+  padding: 7.5px 0px !important;
+  padding-top: 0 !important;
+}
+.thread-interactive-answer > div {
+  border-radius: 26px;
+}
+.thread-interactive-thankyou {
+  text-align: center !important;
+}

app/src/Thread.js

@@ -17,15 +17,16 @@ Hulu logo is a trademark and intellectual property of Hulu, LLC.
 HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia Direct,LLC.
 ************************************************************************/
 import React, { Component } from 'react';
-import { Typography, IconButton } from '@material-ui/core';
-import { Reply } from '@material-ui/icons';
+import { Typography, IconButton, Paper, TextField, InputAdornment } from '@material-ui/core';
+import { Reply, Send } from '@material-ui/icons';
 import './Thread.css';
-import { LocalData } from './Api';
+import { LocalData, webhookFetcher } from './Api';
 
 export default class Thread extends Component {
   constructor(props) {
     super(props);
     this.getReplyMessage = this.getReplyMessage.bind(this);
+    this.getMessageTextOrImage = this.getMessageTextOrImage.bind(this);
   }
   scrollToMessage(id) {
     const pcc = document.querySelector('.thread-wrapper');
@@ -34,6 +35,29 @@ export default class Thread extends Component {
     msg.classList.add('highlight');
     setTimeout(() => msg.classList.remove('highlight'), 500);
   }
+  handleInteractiveMessageCall(msg) {
+    const thanksElement = document.createElement('div');
+    thanksElement.innerText = 'THANK YOU FOR THE FEEDBACK';
+    thanksElement.className = 'thread-interactive-thankyou';
+    if (msg.uid === '<system>') {
+      if (msg.endpoint) {
+        var bodyData = {
+          question: msg.text,
+        };
+        if (msg.type === 'interactive/text') {
+          const answerElement = document.getElementById(`reply-${msg.id}`);
+          bodyData.answer = answerElement ? answerElement.value : 'ANSWER_ELEM_NOT_FOUND';
+          answerElement.disabled = true;
+          answerElement.parentElement.parentElement.parentElement.firstElementChild.remove();
+          answerElement.parentElement.replaceWith(thanksElement);
+        }
+        webhookFetcher({
+          endpoint: msg.endpoint,
+          body: JSON.stringify(bodyData),
+        });
+      }
+    }
+  }
   getItemClassNames(uid, userUid, msgIdx) {
     const lastUid = msgIdx >= 1 ? this.props.messages[msgIdx - 1].uid : '';
     return `thread-item ${uid === userUid ? 'my-message' : ''} ${
@@ -44,6 +68,33 @@ export default class Thread extends Component {
     if (msg.type === 'giphy') {
       return <img alt="gif" src={msg.text} />;
     }
+    if (msg.type === 'interactive/text') {
+      return (
+        <Paper elevation={0} className="thread-interactive-text">
+          <Typography className="thread-interactive-question" variant="overline">
+            {msg.text}
+          </Typography>
+          <TextField
+            className="thread-interactive-answer addFocus"
+            size="small"
+            id={`reply-${msg.id}`}
+            multiline
+            variant="outlined"
+            color="secondary"
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton onClick={() => this.handleInteractiveMessageCall(msg)}>
+                    <Send />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            rowsMax={2}
+          />
+        </Paper>
+      );
+    }
     return <p>{msg.text}</p>;
   }
   getTimeString(time) {

app/src/index.css

@@ -610,6 +610,12 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   margin: 5px 0;
 }
 
+.alert-card {
+  border: none !important;
+  border-radius: 26px !important;
+  margin: 0px 10px !important;
+}
+
 .alert-card-content {
   display: flex;
   padding: 5px !important;