Add chatbot UI

package.json

@@ -17,6 +17,7 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@fontsource/roboto": "^4.5.8",
     "@highlightjs/vue-plugin": "^2.1.0",
+    "axios": "^1.7.2",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "connect-redis": "^7.1.1",
@@ -34,6 +35,7 @@
     "reflect-metadata": "^0.1.13",
     "routing-controllers": "^0.10.3",
     "typedi": "^0.10.0",
+    "uuid": "^9.0.1",
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",
     "vue-markdown-renderer": "^0.2.7",

src/components/ChatWidget.vue

@@ -29,15 +29,26 @@
   import Prism from 'prismjs';
   import MarkdownIt from "markdown-it";
   import 'prismjs/themes/prism.css'; // Choose a theme you like
-  
+  import { v4 as uuidv4 } from 'uuid';
+  import axios from 'axios';
+  import { inject } from 'vue';
+  import { obpApiHostKey } from '@/obp/keys';
+
+  const OBP_API_HOST = inject(obpApiHostKey)
+
   export default {
     data() {
       return {
         isOpen: false,
         userInput: '',
-        messages: []
+        messages: [],
+        sessionId: uuidv4(),
+        obpApiHost: null
       };
     },
+    created() {
+      this.obpApiHost = inject(obpApiHostKey);
+    },
     methods: {
       toggleChat() {
         this.isOpen = !this.isOpen;
@@ -54,11 +65,23 @@
           this.userInput = '';
   
           // Send the user message to the backend and get the response
-          const response = await fetch('http://localhost:5000/chat', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ message: newMessage.content })
-          });
+          console.log('Sending message:', newMessage.content);
+
+          // DEBUG
+          console.log('OBP API HOST: ', this.obpApiHost)
+
+          try {
+            const response = await axios.post('http://localhost:5000/chat', {
+                session_id: this.sessionId,
+                message: newMessage.content,
+                obp_api_host: this.obpApiHost
+            });
+
+            console.log('Response:', response.data);
+            this.messages.push({ role: 'assistant', content: response.data.reply });
+          } catch (error) {
+            console.error('Error:', error);
+          }
 
           console.log('Response status:', response.status);
           console.log('Response headers:', response.headers);
@@ -118,7 +141,7 @@
 <template>
     <div>
       <div class="chat-button" @click="toggleChat">
-        <img alt="AI Help" v-show="!logo" src="@/assets/chatbot.png" />
+        <img alt="AI Help" src="@/assets/chatbot.png" />
       </div>
       <div v-if="isOpen" class="chat-container" ref="chatContainer">
         <div class="resizer" @mousedown="initResize"></div>

yarn.lock

@@ -1246,6 +1246,15 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
+axios@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz"
+  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -2526,6 +2535,11 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -4141,6 +4155,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz"
@@ -5162,6 +5181,11 @@ utils-merge@1.0.1:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz"