emmanuel.rizky/demo-mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): Integrate chatbot API for dynamic responses

Browse Source 
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:
emmanuel.rizky
2025-07-21 14:44:06 +07:00
parent 158b6d0886
commit 84c7cbd8ce
5 changed files with 158 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
dashboard-page/index.html
View File

@@ -16,31 +16,31 @@
<link rel="stylesheet" href="styles/main.css">
</head>
<body style="font-family: Inter, 'Noto Sans', sans-serif; display: flex; flex-direction: column; min-height: 100vh; padding: 0; background: linear-gradient(135deg, #0077b6, #023e8a) !important;">
<header>
<div class="mobile-header-user-info">
<div
<header>
<div class="mobile-header-user-info">
<div
class="mobile-header-avatar"
style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDdsEbNptWuGWnUFVjxjJbETG3Ux0dsBq6vJXBqGqxirKQZ5h08CrhYiwt89C2-bjXZjh3bpwhhheIQH7TY4OfQvZjIE93FvpVViGxSvYuMDJylveD2lc-daeSlCOr8t64jpRbHrEXM0JGuM-CGz99i7dCKdfgcBu7EEecYOxvaPyTNOskRBL3yUkN9tJ659LAKvkEeum2-SYZ1htR83YgVFVP-n8-XoZBoQaa5W7vOC0TZtlOldU-Cq8EkbxM_HQH3prpaomyTJdCF");'
></div>
<h2 class="mobile-header-title">BeautyBot Analytics</h2>
</div>
<div class="mobile-header-right">
<button class="mobile-header-menu-button">
></div>
<h2 class="mobile-header-title">BeautyBot Analytics</h2>
</div>
<div class="mobile-header-right">
<button class="mobile-header-menu-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path
d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
></path>
<path
d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
></path>
</svg>
</button>
<div class="dropdown-menu hidden">
</button>
<div class="dropdown-menu hidden">
<button class="control-button">
<span class="truncate">Ekspor Data</span>
<span class="truncate">Ekspor Data</span>
</button>
</div>
</div>
</header>
</div>
</header>
<main>
<main class="container mx-auto px-4">
<div class="layout-content-container">
<h2 class="text-[#141414] tracking-light text-[28px] font-bold leading-tight px-4 text-left pb-3 pt-5">Chatbot Performance Overview</h2>
<div class="controls-container">
@@ -229,6 +229,7 @@
</div>
</main>
<script src="scripts/main.js"></script>
<!-- Floating circles background -->
<ul class="floating-circles">
<li></li><li></li><li></li><li></li><li></li>