Added styling and icon to enlarge image

assets/js/Containers/FrevaGPT/components/ChatBlock.js

@@ -2,13 +2,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import { Col, Card, Modal } from "react-bootstrap";
+import { Col, Card, Modal, Button } from "react-bootstrap";
 
 import { isEmpty } from "lodash";
 
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
+import { FaExpand } from "react-icons/fa";
+
 import { replaceLinebreaks } from "../utils";
 
 import * as constants from "../constants";
@@ -24,20 +26,36 @@ class ChatBlock extends React.Component {
     this.renderUser = this.renderUser.bind(this);
     this.renderError = this.renderError.bind(this);
     this.renderDefault = this.renderDefault.bind(this);
+    this.enlargeImage = this.enlargeImage.bind(this);
 
     this.state = {
       showModal: false
     }
   }
 
+  enlargeImage(imageString) {
+    this.setState({showModal: true, image: `data:image/jpeg;base64,${imageString}`})
+  }
+
   renderImage(element, index) {
     return (
-      <Col key={`${index}-image`} md={constants.BOT_COLUMN_STYLE}>
+      <Col 
+        key={`${index}-image`}
+        md={constants.BOT_COLUMN_STYLE}
+        className="border-0 border-bottom mb-3 shadow-sm card-body">
         <img
           className="w-100"
-          onClick={() => this.setState({showModal: true, image: `data:image/jpeg;base64,${element.content}`})}
+          onClick={() => this.enlargeImage(element.content)}
           src={`data:image/jpeg;base64,${element.content}`}
         />
+        <div className="d-flex justify-content-end">
+          <Button 
+            variant="link"
+            onClick={() => this.enlargeImage(element.content)}
+            className="d-flex align-items-center">
+            <FaExpand/>
+          </Button>
+        </div>
       </Col>
     );
   }