pablo/ai-chat-llm-offline
pablo/ai-chat-llm-offline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toast notifications for messages to improve user feedback

Browse Source
This commit is contained in:
Pablo de la Torre Jamardo 2025-07-19 21:08:36 +02:00
parent 7c3c4e228e
commit 9ea98adecc
9 changed files with 64 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/dist/assets/index-BoaPXc3b.js vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/assets/index-Kwm2enAh.css → frontend/dist/assets/index-DTfx5B6F.css vendored
View File

File diff suppressed because one or more lines are too long

23
frontend/dist/assets/index-adnA05sT.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@ -10,8 +10,8 @@
<link rel="shortcut icon" href="/favicon/favicon.ico" /> <link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<script type="module" crossorigin src="/assets/index-BoaPXc3b.js"></script> <script type="module" crossorigin src="/assets/index-adnA05sT.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Kwm2enAh.css"> <link rel="stylesheet" crossorigin href="/assets/index-DTfx5B6F.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

15
frontend/package-lock.json generated
View File

@ -8,7 +8,8 @@
"name": "chat-ia-vue", "name": "chat-ia-vue",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"vue": "^3.4.0" "vue": "^3.4.0",
"vue-toast-notification": "^3.1.3"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.0.0", "@vitejs/plugin-vue": "^5.0.0",
@ -1127,6 +1128,18 @@
"optional": true "optional": true
} }
} }
},
"node_modules/vue-toast-notification": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.1.3.tgz",
"integrity": "sha512-XNyWqwLIGBFfX5G9sK+clq3N3IPlhDjzNdbZaXkEElcotPlWs0wWZailk1vqhdtLYT/93Y4FHAVuzyatLmPZRA==",
"license": "MIT",
"engines": {
"node": ">=12.15.0"
},
"peerDependencies": {
"vue": "^3.0"
}
} }
} }
} }

5
frontend/package.json
View File

@ -8,10 +8,11 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"vue": "^3.4.0" "vue": "^3.4.0",
"vue-toast-notification": "^3.1.3"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.0.0", "@vitejs/plugin-vue": "^5.0.0",
"vite": "^5.0.0" "vite": "^5.0.0"
} }
} }

19
frontend/src/components/ChatLayout.vue
View File

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

6
frontend/src/main.ts
View File

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

16
frontend/src/services/chatService.js → frontend/src/services/chatService.ts
View File

@ -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 { class ChatService {
async getChats() { async getChats() {
try { try {
@ -8,6 +18,7 @@ class ChatService {
return await response.json() return await response.json()
} catch (error) { } catch (error) {
console.error("Error fetching chats:", error) console.error("Error fetching chats:", error)
toast.error("Error loading chats")
throw error throw error
} }
} }
@ -23,6 +34,7 @@ class ChatService {
return await response.text() return await response.text()
} catch (error) { } catch (error) {
console.error("Error creating chat:", error) console.error("Error creating chat:", error)
toast.error("Could not create chat")
throw error throw error
} }
} }
@ -36,6 +48,7 @@ class ChatService {
return await response.json() return await response.json()
} catch (error) { } catch (error) {
console.error("Error fetching messages:", error) console.error("Error fetching messages:", error)
toast.error("Failed to load messages")
throw error throw error
} }
} }
@ -55,9 +68,10 @@ class ChatService {
return await response.json() return await response.json()
} catch (error) { } catch (error) {
console.error("Error sending message:", error) console.error("Error sending message:", error)
toast.error("Message could not be sent")
throw error throw error
} }
} }
} }
export const chatService = new ChatService() export const chatService = new ChatService()