Add toast notifications for messages to improve user feedback

frontend/src/components/ChatLayout.vue

@@ -21,7 +21,7 @@
 import { ref, onMounted } from 'vue'
 import ChatSidebar from './ChatSidebar.vue'
 import ChatMain from './ChatMain.vue'
-import { chatService } from '../services/chatService.js'
+import { chatService } from '../services/chatService.ts'
 
 // Estado reactivo
 const chatId = ref('')
@@ -52,11 +52,6 @@ const loadMessages = async (selectedChatId) => {
     messages.value = data
   } catch (error) {
     console.error("Error al cargar mensajes:", error)
-    messages.value.push({
-      role: "bot",
-      text: "❌ Error cargando mensajes del chat.",
-      date: new Date().toISOString()
-    })
   }
 }
 
@@ -77,13 +72,6 @@ const createNewChat = async () => {
     await loadMessages(chatId.value)
   } catch (error) {
     console.error("Error al crear nuevo chat:", error)
-    if (messages.value) {
-      messages.value.push({
-        role: "bot",
-        text: "❌ Error creando nuevo chat.",
-        date: new Date().toISOString()
-      })
-    }
   }
 }
 
@@ -119,11 +107,6 @@ const sendMessage = async (prompt) => {
     await loadHistory()
   } catch (error) {
     console.error("Error enviando mensaje:", error)
-    messages.value.push({
-      role: "bot",
-      text: "❌ Error procesando la respuesta.",
-      date: new Date().toISOString()
-    })
   } finally {
     isLoading.value = false
   }

frontend/src/main.ts

@@ -1,5 +1,9 @@
 import { createApp } from "vue"
 import App from "./App.vue"
+import ToastPlugin from 'vue-toast-notification'
+import 'vue-toast-notification/dist/theme-bootstrap.css'
 import "./assets/styles.css"
 
-createApp(App).mount("#app")
+const app = createApp(App)
+app.use(ToastPlugin)
+app.mount('#app')

frontend/src/services/chatService.ts

@@ -1,3 +1,13 @@
+import { useToast } from 'vue-toast-notification'
+
+const toast = useToast({
+  position: 'top-right',
+  duration: 3000,
+  dismissible: true,
+  queue: false,
+  pauseOnHover: true,
+})
+
 class ChatService {
   async getChats() {
     try {
@@ -8,6 +18,7 @@ class ChatService {
       return await response.json()
     } catch (error) {
       console.error("Error fetching chats:", error)
+      toast.error("Error loading chats")
       throw error
     }
   }
@@ -23,6 +34,7 @@ class ChatService {
       return await response.text()
     } catch (error) {
       console.error("Error creating chat:", error)
+      toast.error("Could not create chat")
       throw error
     }
   }
@@ -36,6 +48,7 @@ class ChatService {
       return await response.json()
     } catch (error) {
       console.error("Error fetching messages:", error)
+      toast.error("Failed to load messages")
       throw error
     }
   }
@@ -55,9 +68,10 @@ class ChatService {
       return await response.json()
     } catch (error) {
       console.error("Error sending message:", error)
+      toast.error("Message could not be sent")
       throw error
     }
   }
 }
 
-export const chatService = new ChatService()
+export const chatService = new ChatService()