Hugging Face's logo

Spaces:
kritsanan
/
chatbot-6
Running

App Files Community
chatbot-6 / index.html
kritsanan's picture
kritsanan
Add 3 files
d783d5c verified
raw
history blame contribute delete
36.1 kB
<!DOCTYPE html>
<html lang="th">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ThaiGov AI Assistant</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary-color: #2c7be5;
 --secondary-color: #00d97e;
 --danger-color: #e63757;
 --warning-color: #f6c343;
 --dark-color: #12263f;
 --light-color: #f9fafd;
 }
body {
 font-family: 'Noto Sans Thai', sans-serif;
 background-color: #f5f7fa;
 }
.chat-bubble {
 border-radius: 18px;
 max-width: 80%;
 }
.user-bubble {
 border-bottom-right-radius: 4px;
 background-color: var(--primary-color);
 color: white;
 }
.bot-bubble {
 border-bottom-left-radius: 4px;
 background-color: white;
 color: var(--dark-color);
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
.quick-reply {
 transition: all 0.2s ease;
 }
.quick-reply:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
.high-contrast {
 background-color: black !important;
 color: white !important;
 }
.high-contrast .bot-bubble {
 background-color: black !important;
 color: yellow !important;
 border: 2px solid yellow !important;
 }
.high-contrast .user-bubble {
 background-color: yellow !important;
 color: black !important;
 }
.text-xxs {
 font-size: 0.65rem;
 }
/* Animation for typing indicator */
 @keyframes typing {
 0% { opacity: 0.5; }
 50% { opacity: 1; }
 100% { opacity: 0.5; }
 }
.typing-indicator span {
 animation: typing 1.5s infinite;
 }
.typing-indicator span:nth-child(2) {
 animation-delay: 0.2s;
 }
.typing-indicator span:nth-child(3) {
 animation-delay: 0.4s;
 }
/* LINE style elements */
 .line-button {
 background-color: #06c755;
 color: white;
 }
/* Accessibility focus styles */
 button:focus, input:focus {
 outline: 2px solid var(--primary-color);
 outline-offset: 2px;
 }
/* Document status indicators */
 .status-pending {
 background-color: #fff4e5;
 color: #f79009;
 }
.status-approved {
 background-color: #ecfdf3;
 color: #12b76a;
 }
.status-rejected {
 background-color: #fef3f2;
 color: #f04438;
 }
 </style>
</head>
<body class="relative h-screen overflow-hidden bg-gray-50" style="max-width: 360px; margin: 0 auto;">
 <!-- App Header with LINE integration -->
 <header class="bg-blue-600 text-white p-4 shadow-md">
 <div class="flex items-center justify-between">
 <button id="backBtn" class="text-white" aria-label="Back">
 <i class="fas fa-chevron-left"></i>
 </button>
 <div class="flex items-center space-x-2">
 <img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="ThaiGov Logo" class="h-8">
 <h1 class="font-bold text-lg">ThaiGov AI</h1>
 </div>
 <div class="flex items-center space-x-3">
 <button id="languageToggle" class="text-white text-sm" aria-label="Toggle language">EN</button>
 <button id="settingsBtn" class="text-white" aria-label="Settings">
 <i class="fas fa-cog"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Chat Container -->
 <main class="h-[calc(100vh-120px)] overflow-y-auto pb-4 px-3 pt-2" id="chatContainer">
 <!-- Welcome Message with LINE login option -->
 <div class="flex mb-4">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bot-bubble chat-bubble px-4 py-3">
 <p class="font-medium">สวัสดีค่ะ! ยินดีต้อนรับสู่ ThaiGov AI Assistant</p>
 <p class="text-sm mt-1">เพื่อความสะดวกในการใช้งาน คุณสามารถเข้าสู่ระบบผ่าน LINE</p>
<button class="line-button w-full mt-3 rounded-lg px-4 py-2 text-sm font-medium flex items-center justify-center">
 <i class="fab fa-line mr-2 text-xl"></i> เข้าสู่ระบบด้วย LINE
 </button>
<div class="mt-3 grid grid-cols-2 gap-2">
 <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
 <i class="fas fa-file-alt mr-1"></i> ยื่นเอกสาร
 </button>
 <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
 <i class="fas fa-calendar-alt mr-1"></i> นัดหมาย
 </button>
 <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
 <i class="fas fa-money-bill-wave mr-1"></i> ชำระเงิน
 </button>
 <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
 <i class="fas fa-question-circle mr-1"></i> คำถามทั่วไป
 </button>
 </div>
 </div>
 </div>
<!-- Emergency Shortcut -->
 <div class="flex justify-center mb-4">
 <button id="emergencyBtn" class="bg-red-100 text-red-600 rounded-full px-4 py-2 text-sm font-medium flex items-center">
 <i class="fas fa-phone-alt mr-2"></i> เบอร์ฉุกเฉิน
 </button>
 </div>
<!-- Sample Document Status Update -->
 <div class="flex mb-4">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bot-bubble chat-bubble px-4 py-3">
 <div class="flex items-start">
 <div class="bg-green-100 p-2 rounded-full mr-3">
 <i class="fas fa-check-circle text-green-600"></i>
 </div>
 <div>
 <p class="font-medium">สถานะเอกสารของคุณ</p>
 <p class="text-sm mt-1">ใบคำร้องขออนุญาตก่อสร้าง</p>
 <div class="mt-2 status-approved px-3 py-1 rounded-full text-xs inline-flex items-center">
 <i class="fas fa-check-circle mr-1"></i> อนุมัติแล้ว
 </div>
 <p class="text-xs text-gray-500 mt-2">อัปเดตล่าสุด: 15/06/2566 14:30</p>
 </div>
 </div>
 <button class="w-full mt-3 bg-blue-50 text-blue-600 rounded-lg px-3 py-2 text-sm font-medium">
 <i class="fas fa-download mr-2"></i> ดาวน์โหลดเอกสารอนุมัติ
 </button>
 </div>
 </div>
<!-- Appointment Reminder -->
 <div class="flex mb-4">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bot-bubble chat-bubble px-4 py-3">
 <div class="flex items-start">
 <div class="bg-yellow-100 p-2 rounded-full mr-3">
 <i class="fas fa-bell text-yellow-600"></i>
 </div>
 <div>
 <p class="font-medium">การแจ้งเตือนนัดหมาย</p>
 <p class="text-sm mt-1">คุณมีนัดหมายกับสำนักงานเขตในวันพรุ่งนี้</p>
 <p class="text-sm font-medium mt-1">16/06/2566 เวลา 09:30 น.</p>
 <p class="text-xs text-gray-500 mt-1">สถานที่: สำนักงานเขตบางนา ชั้น 3</p>
 </div>
 </div>
 <div class="grid grid-cols-2 gap-2 mt-3">
 <button class="quick-reply bg-blue-50 text-blue-600 rounded-lg px-3 py-2 text-sm font-medium">
 <i class="fas fa-calendar-check mr-1"></i> ยืนยัน
 </button>
 <button class="quick-reply bg-gray-100 text-gray-600 rounded-lg px-3 py-2 text-sm font-medium">
 <i class="fas fa-calendar-times mr-1"></i> ยกเลิก
 </button>
 </div>
 </div>
 </div>
<!-- Payment Notification -->
 <div class="flex mb-4">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bot-bubble chat-bubble px-4 py-3">
 <div class="flex items-start">
 <div class="bg-purple-100 p-2 rounded-full mr-3">
 <i class="fas fa-money-bill-wave text-purple-600"></i>
 </div>
 <div>
 <p class="font-medium">แจ้งเตือนการชำระเงิน</p>
 <p class="text-sm mt-1">ค่าธรรมเนียมใบอนุญาตขับขี่</p>
 <p class="text-sm font-medium mt-1">จำนวน 300 บาท</p>
 <p class="text-xs text-gray-500 mt-1">ครบกำหนดชำระ: 20/06/2566</p>
 </div>
 </div>
 <button class="w-full mt-3 bg-green-600 text-white rounded-lg px-3 py-2 text-sm font-medium">
 <i class="fas fa-credit-card mr-2"></i> ชำระเงินตอนนี้
 </button>
 </div>
 </div>
<!-- Typing Indicator -->
 <div class="flex mb-4 typing-indicator" id="typingIndicator" style="display: none;">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bg-gray-100 rounded-full px-4 py-3 flex space-x-1">
 <span>•</span>
 <span>•</span>
 <span>•</span>
 </div>
 </div>
 </main>
<!-- Input Area with voice and attachment options -->
 <footer class="absolute bottom-0 w-full bg-white border-t border-gray-200 p-3">
 <div class="flex items-center space-x-2">
 <button id="attachBtn" class="text-blue-600 p-2 rounded-full hover:bg-blue-50" aria-label="Attach file">
 <i class="fas fa-paperclip"></i>
 </button>
 <button id="voiceBtn" class="text-blue-600 p-2 rounded-full hover:bg-blue-50" aria-label="Voice input">
 <i class="fas fa-microphone"></i>
 </button>
 <div class="flex-1 relative">
 <input type="text" placeholder="พิมพ์ข้อความ..." class="w-full bg-gray-100 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" id="messageInput">
 <button id="sendBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600" aria-label="Send message">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
<!-- Quick Action Buttons -->
 <div class="mt-2 flex justify-between text-xs text-center">
 <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
 <i class="fas fa-home block mx-auto mb-1"></i>
 หน้าหลัก
 </button>
 <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
 <i class="fas fa-file-alt block mx-auto mb-1"></i>
 เอกสาร
 </button>
 <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
 <i class="fas fa-calendar block mx-auto mb-1"></i>
 นัดหมาย
 </button>
 <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
 <i class="fas fa-wallet block mx-auto mb-1"></i>
 ชำระเงิน
 </button>
 <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
 <i class="fas fa-user block mx-auto mb-1"></i>
 บัญชี
 </button>
 </div>
 </footer>
<!-- Settings Modal with accessibility options -->
 <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
 <div class="bg-white rounded-lg w-full max-w-xs mx-4">
 <div class="p-4 border-b border-gray-200 flex justify-between items-center">
 <h3 class="font-bold text-lg">การตั้งค่า</h3>
 <button id="closeSettings" class="text-gray-500" aria-label="Close settings">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="p-4 space-y-4">
 <div>
 <label class="block text-sm font-medium mb-1">ภาษา</label>
 <div class="flex space-x-2">
 <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">ไทย</button>
 <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">English</button>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium mb-1">ขนาดตัวอักษร</label>
 <div class="flex items-center space-x-2">
 <button class="text-gray-500" id="decreaseFont">
 <i class="fas fa-minus"></i>
 </button>
 <div class="flex-1 bg-gray-100 rounded-full h-2">
 <div class="bg-blue-600 h-2 rounded-full w-3/4" id="fontSizeBar"></div>
 </div>
 <button class="text-gray-500" id="increaseFont">
 <i class="fas fa-plus"></i>
 </button>
 </div>
 </div>
<div class="flex items-center justify-between">
 <label class="text-sm font-medium">โหมดความคมชัดสูง</label>
 <label class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" class="sr-only peer" id="highContrastToggle">
 <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
 </label>
 </div>
<div class="flex items-center justify-between">
 <label class="text-sm font-medium">การตอบสนองสัมผัส</label>
 <label class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" class="sr-only peer" checked id="hapticToggle">
 <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
 </label>
 </div>
<div class="flex items-center justify-between">
 <label class="text-sm font-medium">ป้อนข้อมูลด้วยเสียง</label>
 <label class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" class="sr-only peer" checked id="voiceInputToggle">
 <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
 </label>
 </div>
<div class="pt-4 border-t border-gray-200">
 <button class="w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium" id="saveSettings">
 บันทึกการตั้งค่า
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Emergency Contacts Modal -->
 <div id="emergencyModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
 <div class="bg-white rounded-lg w-full max-w-xs mx-4">
 <div class="p-4 border-b border-gray-200 flex justify-between items-center">
 <h3 class="font-bold text-lg">เบอร์ฉุกเฉิน</h3>
 <button id="closeEmergency" class="text-gray-500" aria-label="Close emergency contacts">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="p-4 space-y-3">
 <div class="flex items-center p-3 bg-red-50 rounded-lg">
 <div class="bg-red-100 p-2 rounded-full mr-3">
 <i class="fas fa-ambulance text-red-600"></i>
 </div>
 <div>
 <p class="font-medium">รถพยาบาล</p>
 <p class="text-sm text-gray-600">1669</p>
 </div>
 </div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
 <div class="bg-blue-100 p-2 rounded-full mr-3">
 <i class="fas fa-shield-alt text-blue-600"></i>
 </div>
 <div>
 <p class="font-medium">ตำรวจ</p>
 <p class="text-sm text-gray-600">191</p>
 </div>
 </div>
<div class="flex items-center p-3 bg-orange-50 rounded-lg">
 <div class="bg-orange-100 p-2 rounded-full mr-3">
 <i class="fas fa-fire-extinguisher text-orange-600"></i>
 </div>
 <div>
 <p class="font-medium">ดับเพลิง</p>
 <p class="text-sm text-gray-600">199</p>
 </div>
 </div>
<div class="flex items-center p-3 bg-purple-50 rounded-lg">
 <div class="bg-purple-100 p-2 rounded-full mr-3">
 <i class="fas fa-life-ring text-purple-600"></i>
 </div>
 <div>
 <p class="font-medium">ภัยพิบัติ</p>
 <p class="text-sm text-gray-600">1784</p>
 </div>
 </div>
<div class="pt-4">
 <button class="w-full border border-blue-600 text-blue-600 py-2 rounded-lg text-sm font-medium">
 โทรออก
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Attachment Options Modal -->
 <div id="attachmentModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
 <div class="bg-white rounded-lg w-full max-w-xs mx-4">
 <div class="p-4 border-b border-gray-200 flex justify-between items-center">
 <h3 class="font-bold text-lg">แนบไฟล์</h3>
 <button id="closeAttachment" class="text-gray-500" aria-label="Close attachment options">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="p-4 grid grid-cols-2 gap-3">
 <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
 <i class="fas fa-camera text-blue-600 text-xl mb-2"></i>
 <span class="text-sm">กล้อง</span>
 </button>
 <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
 <i class="fas fa-images text-green-600 text-xl mb-2"></i>
 <span class="text-sm">แกลเลอรี่</span>
 </button>
 <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
 <i class="fas fa-file-pdf text-red-600 text-xl mb-2"></i>
 <span class="text-sm">เอกสาร</span>
 </button>
 <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
 <i class="fas fa-map-marker-alt text-yellow-600 text-xl mb-2"></i>
 <span class="text-sm">ตำแหน่ง</span>
 </button>
 </div>
<div class="p-4 border-t border-gray-200 text-xs text-gray-500">
 <i class="fas fa-lock"></i> ไฟล์ทั้งหมดจะถูกเก็บเป็นความลับตาม พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล
 </div>
 </div>
 </div>
<!-- Voice Input Modal -->
 <div id="voiceModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
 <div class="bg-white rounded-lg w-full max-w-xs mx-4">
 <div class="p-6 flex flex-col items-center">
 <div class="relative mb-4">
 <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center">
 <i class="fas fa-microphone text-blue-600 text-3xl" id="voiceIcon"></i>
 </div>
 <div class="absolute -bottom-2 -right-2 bg-red-500 rounded-full w-8 h-8 flex items-center justify-center">
 <i class="fas fa-stop text-white"></i>
 </div>
 </div>
 <h3 class="font-bold text-lg mb-1">กำลังฟัง...</h3>
 <p class="text-sm text-gray-600 mb-4">พูดตอนนี้</p>
 <div class="w-full bg-gray-100 rounded-full h-2 mb-4">
 <div class="bg-blue-600 h-2 rounded-full w-1/2" id="voiceLevel"></div>
 </div>
 <p class="text-sm text-gray-500">ระบบจะประมวลผลหลังจากคุณหยุดพูด</p>
 </div>
 </div>
 </div>
<script>
 // DOM Elements
 const settingsBtn = document.getElementById('settingsBtn');
 const closeSettings = document.getElementById('closeSettings');
 const settingsModal = document.getElementById('settingsModal');
 const emergencyModal = document.getElementById('emergencyModal');
 const closeEmergency = document.getElementById('closeEmergency');
 const emergencyBtn = document.getElementById('emergencyBtn');
 const languageToggle = document.getElementById('languageToggle');
 const highContrastToggle = document.getElementById('highContrastToggle');
 const hapticToggle = document.getElementById('hapticToggle');
 const voiceInputToggle = document.getElementById('voiceInputToggle');
 const chatContainer = document.getElementById('chatContainer');
 const messageInput = document.getElementById('messageInput');
 const sendBtn = document.getElementById('sendBtn');
 const attachBtn = document.getElementById('attachBtn');
 const voiceBtn = document.getElementById('voiceBtn');
 const attachmentModal = document.getElementById('attachmentModal');
 const closeAttachment = document.getElementById('closeAttachment');
 const voiceModal = document.getElementById('voiceModal');
 const typingIndicator = document.getElementById('typingIndicator');
 const increaseFont = document.getElementById('increaseFont');
 const decreaseFont = document.getElementById('decreaseFont');
 const fontSizeBar = document.getElementById('fontSizeBar');
 const saveSettings = document.getElementById('saveSettings');
// Current settings state
 let currentSettings = {
 language: 'th',
 fontSize: 3, // 1-5 scale
 highContrast: false,
 hapticFeedback: true,
 voiceInput: true
 };
// Event Listeners
 settingsBtn.addEventListener('click', () => {
 settingsModal.classList.remove('hidden');
 triggerHapticFeedback();
 });
closeSettings.addEventListener('click', () => {
 settingsModal.classList.add('hidden');
 triggerHapticFeedback();
 });
emergencyBtn.addEventListener('click', () => {
 emergencyModal.classList.remove('hidden');
 triggerHapticFeedback();
 });
closeEmergency.addEventListener('click', () => {
 emergencyModal.classList.add('hidden');
 triggerHapticFeedback();
 });
attachBtn.addEventListener('click', () => {
 attachmentModal.classList.remove('hidden');
 triggerHapticFeedback();
 });
closeAttachment.addEventListener('click', () => {
 attachmentModal.classList.add('hidden');
 triggerHapticFeedback();
 });
voiceBtn.addEventListener('click', () => {
 if (currentSettings.voiceInput) {
 voiceModal.classList.remove('hidden');
 triggerHapticFeedback();
// Simulate voice input animation
 const voiceLevel = document.getElementById('voiceLevel');
 let width = 10;
 const interval = setInterval(() => {
 width = 10 + Math.random() * 90;
 voiceLevel.style.width = `${width}%`;
 }, 100);
// Stop after 3 seconds
 setTimeout(() => {
 clearInterval(interval);
 voiceModal.classList.add('hidden');
// Show typing indicator
 typingIndicator.style.display = 'flex';
// Simulate bot response after delay
 setTimeout(() => {
 typingIndicator.style.display = 'none';
 addBotMessage("ฉันได้ยินคุณพูดว่า 'ฉันต้องการยื่นเอกสารสำหรับการแจ้งเกิด' ถูกต้องหรือไม่?");
 }, 2000);
 }, 3000);
 }
 });
languageToggle.addEventListener('click', () => {
 const currentLang = languageToggle.textContent;
 languageToggle.textContent = currentLang === 'EN' ? 'TH' : 'EN';
 currentSettings.language = currentLang === 'EN' ? 'th' : 'en';
 triggerHapticFeedback();
 });
highContrastToggle.addEventListener('change', (e) => {
 currentSettings.highContrast = e.target.checked;
 updateHighContrastMode();
 });
hapticToggle.addEventListener('change', (e) => {
 currentSettings.hapticFeedback = e.target.checked;
 });
voiceInputToggle.addEventListener('change', (e) => {
 currentSettings.voiceInput = e.target.checked;
 });
increaseFont.addEventListener('click', () => {
 if (currentSettings.fontSize < 5) {
 currentSettings.fontSize++;
 updateFontSize();
 triggerHapticFeedback();
 }
 });
decreaseFont.addEventListener('click', () => {
 if (currentSettings.fontSize > 1) {
 currentSettings.fontSize--;
 updateFontSize();
 triggerHapticFeedback();
 }
 });
saveSettings.addEventListener('click', () => {
 settingsModal.classList.add('hidden');
 triggerHapticFeedback();
 // In a real app, you would save these settings to localStorage or backend
 });
// Message sending functionality
 sendBtn.addEventListener('click', sendMessage);
 messageInput.addEventListener('keypress', (e) => {
 if (e.key === 'Enter') {
 sendMessage();
 }
 });
// Functions
 function sendMessage() {
 const message = messageInput.value.trim();
 if (message) {
 addUserMessage(message);
 messageInput.value = '';
// Show typing indicator
 typingIndicator.style.display = 'flex';
// Simulate bot response after delay
 setTimeout(() => {
 typingIndicator.style.display = 'none';
// Simple chatbot responses
 if (message.includes('สวัสดี') || message.includes('hello')) {
 addBotMessage("สวัสดีค่ะ! มีอะไรให้ช่วยเหลือหรือไม่?");
 } else if (message.includes('ขอบคุณ') || message.includes('thank')) {
 addBotMessage("ยินดีให้บริการค่ะ 😊");
 } else if (message.includes('เอกสาร') || message.includes('document')) {
 addBotMessage("คุณต้องการดำเนินการเกี่ยวกับเอกสารประเภทใดคะ?");
 } else {
 addBotMessage("ฉันเข้าใจคำถามของคุณแล้ว กำลังค้นหาข้อมูลให้ค่ะ...");
 }
 }, 1500);
triggerHapticFeedback();
 }
 }
function addUserMessage(text) {
 const messageDiv = document.createElement('div');
 messageDiv.className = 'flex mb-4 justify-end';
 messageDiv.innerHTML = `
 <div class="user-bubble chat-bubble px-4 py-2">
 <p>${text}</p>
 </div>
 `;
 chatContainer.appendChild(messageDiv);
 scrollToBottom();
 }
function addBotMessage(text) {
 const messageDiv = document.createElement('div');
 messageDiv.className = 'flex mb-4';
 messageDiv.innerHTML = `
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bot-bubble chat-bubble px-4 py-3">
 <p>${text}</p>
 </div>
 `;
 chatContainer.appendChild(messageDiv);
 scrollToBottom();
 }
function updateHighContrastMode() {
 if (currentSettings.highContrast) {
 document.body.classList.add('high-contrast');
 } else {
 document.body.classList.remove('high-contrast');
 }
 }
function updateFontSize() {
 const sizes = ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl'];
 const percentage = [20, 40, 60, 80, 100];
// Update all text elements (simplified for demo)
 document.body.className = document.body.className.replace(/\btext-(xs|sm|base|lg|xl)\b/g, '');
 document.body.classList.add(sizes[currentSettings.fontSize - 1]);
// Update font size bar
 fontSizeBar.style.width = `${percentage[currentSettings.fontSize - 1]}%`;
 }
function scrollToBottom() {
 chatContainer.scrollTop = chatContainer.scrollHeight;
 }
function triggerHapticFeedback() {
 if (currentSettings.hapticFeedback) {
 // In a real app, we would use navigator.vibrate()
 console.log("Haptic feedback triggered");
 }
 }
// Initialize
 scrollToBottom();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kritsanan/chatbot-6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>