- Iniziato a scrivere la CHATBOT...

src/components/ChatBot/ChatBot.scss

@@ -0,0 +1,12 @@
+.chat-container {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.user {
+  text-align: right;
+}
+
+.bot {
+  text-align: left;
+}

src/components/ChatBot/ChatBot.ts

@@ -0,0 +1,45 @@
+import type { PropType } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
+
+import type { IOperators } from '@model';
+import { tools } from '@tools';
+
+
+import axios from 'axios'
+import { useMessageStore, useUserStore } from 'app/src/store';
+
+export default defineComponent({
+  name: 'ChatBot',
+  props: {},
+  setup(props) {
+    const userMessage = ref<string>('');
+    const messageStore = useMessageStore()
+    const messages = ref<Array<{ sender: string; text: string }>>([]);
+
+    const sendMessage = async () => {
+      if (userMessage.value.trim()) {
+        messages.value.push({ sender: 'user', text: userMessage.value });
+
+        try {
+          const response = await messageStore.chatBot({
+            message: userMessage.value,
+          })
+          const botMessage = response[0]?.text || 'Non ho capito';
+          messages.value.push({ sender: 'bot', text: botMessage });
+        } catch (error) {
+          console.error('Errore nella comunicazione con il backend', error);
+          messages.value.push({ sender: 'bot', text: 'Errore di comunicazione' });
+        }
+
+        userMessage.value = '';
+      }
+    };
+
+    return {
+      tools,
+      userMessage,
+      messages,
+      sendMessage,
+    };
+  },
+});

src/components/ChatBot/ChatBot.vue

@@ -0,0 +1,18 @@
+<template>
+  <q-page>
+    <div class="chat-container">
+      <div v-for="(message, index) in messages" :key="index" :class="message.sender">
+        <p>{{ message.text }}</p>
+      </div>
+    </div>
+    <q-input v-model="userMessage" @keyup.enter="sendMessage" label="Scrivi un messaggio" />
+  </q-page>
+</template>
+
+
+<script lang="ts" src="./ChatBot.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './ChatBot.scss';
+</style>

src/components/ChatBot/index.ts

@@ -0,0 +1 @@
+export {default as ChatBot} from './ChatBot.vue'