From d3f8a905021fec8843ac81ad4baa42a93830c399 Mon Sep 17 00:00:00 2001
From: Bianca Wentzel <wentzel@dkrz.de>
Date: Mon, 7 Oct 2024 10:10:35 +0200
Subject: [PATCH] Added play button to chatbot input field

---
 assets/js/Containers/FrevaGPT/index.js | 29 ++++++++++++++++----------
 package-lock.json                      | 22 +++++++++++++++++++
 package.json                           |  1 +
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/assets/js/Containers/FrevaGPT/index.js b/assets/js/Containers/FrevaGPT/index.js
index ee753a76..d32e7474 100644
--- a/assets/js/Containers/FrevaGPT/index.js
+++ b/assets/js/Containers/FrevaGPT/index.js
@@ -29,6 +29,8 @@ import {
   addElement,
 } from './actions';
 
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
 class FrevaGPT extends React.Component {
 
   // const abortController = useRef();
@@ -40,6 +42,7 @@ class FrevaGPT extends React.Component {
     this.handleUserInput = this.handleUserInput.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.createNewChat = this.createNewChat.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
 
     this.state = {
       loading: false,
@@ -78,17 +81,21 @@ class FrevaGPT extends React.Component {
 
   async handleKeyDown(e) {
     if (e.key === "Enter") {
-      this.props.dispatch(addElement(this.state.userInput));
-      this.setState({ userInput: {} });
+      this.handleSubmit();
+    }
+  }
 
-      this.setState({ loading: true });
-      try {
-        await this.fetchData()
-      } catch(err) {
-        this.props.dispatch(addElement({ variant: "FrontendError", content: "An error occured during rendering!" }))
-      }
-      this.setState({ loading: false });
+  async handleSubmit() {
+    this.props.dispatch(addElement(this.state.userInput));
+    this.setState({ userInput: {} });
+
+    this.setState({ loading: true });
+    try {
+      await this.fetchData()
+    } catch(err) {
+      this.props.dispatch(addElement({ variant: "FrontendError", content: "An error occured during rendering!" }))
     }
+    this.setState({ loading: false });
   }
 
   async fetchData() {
@@ -279,8 +286,8 @@ class FrevaGPT extends React.Component {
                 <InputGroup className="mb-2 pb-2">
                   <FormControl type="text" onChange={this.handleUserInput} onKeyDown={this.handleKeyDown} placeholder="Ask a question"/>
                   {this.state.loading 
-                    ? (<Button variant="outline-danger" id="button-addon2" onClick={this.handleStop}>&#9632;</Button>)
-                    : null
+                    ? (<Button variant="outline-danger" onClick={this.handleStop}><i className="bi bi-stop-fill"></i></Button>)
+                    : (<Button variant="outline-success" onClick={this.handleSubmit}><i className="bi bi-play-fill"></i></Button>)
                   }
                   
                 </InputGroup>
diff --git a/package-lock.json b/package-lock.json
index 7d8371fe..3bebdaad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "2405.0.0",
       "license": "ISC",
       "dependencies": {
+        "bootstrap-icons": "^1.11.3",
         "buffer": "^6.0.3",
         "date-fns": "^2.29",
         "dotenv": "^16.4.5",
@@ -3369,6 +3370,22 @@
         "multicast-dns": "^7.2.5"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -13857,6 +13874,11 @@
         "multicast-dns": "^7.2.5"
       }
     },
+    "bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 9bc5d972..37e79427 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "webpack-merge": "5.10.0"
   },
   "dependencies": {
+    "bootstrap-icons": "^1.11.3",
     "buffer": "^6.0.3",
     "date-fns": "^2.29",
     "dotenv": "^16.4.5",