feat(chat): Integrate chatbot API for dynamic responses

This commit replaces the static, simulated chat functionality with a live integration to a chatbot backend API.

The chat page now sends user messages to a webhook endpoint using the `fetch` API. It implements session management by generating and storing a `sessionId` in `localStorage` to maintain conversation context between requests.

Key changes:
- Implement `async` `sendMessage` function to post to the chatbot API.
- Add session ID generation and persistence.
- Dynamically render text and image responses from the API.
- Remove hardcoded example messages from the HTML.
- Update the virtual assistant's name to "Maya".
- Fix navigation links from the dashboard to the chat page.
This commit is contained in:
2025-07-21 14:44:06 +07:00
parent 158b6d0886
commit 84c7cbd8ce
5 changed files with 158 additions and 80 deletions

View File

@@ -27,9 +27,9 @@
<!-- Header dengan avatar dan nama pengguna -->
<header class="chat-header">
<div class="user-info">
<div class="avatar">J</div>
<div class="avatar">M</div>
<div class="user-details">
<h2>John Doe</h2>
<h2>Maya</h2>
<span class="user-role">Virtual Assistant - Bake Shop</span>
</div>
</div>
@@ -37,21 +37,6 @@
<!-- Area chat utama -->
<div class="chat-area">
<!-- Contoh pesan masuk -->
<div class="message received">
<div class="message-content">
Hai, ada kabar terbaru?
</div>
<div class="message-time">10:00</div>
</div>
<!-- Contoh pesan keluar -->
<div class="message sent">
<div class="message-content">
Iya, proyek baru sudah selesai!
</div>
<div class="message-time">10:01</div>
</div>
</div>
<!-- Input area with WhatsApp-like design -->