v1.6.0/interactive system message

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) {