Hugging Face's logo

Spaces:
kritsanan
/
chatbot66
Running

App Files Community
kritsanan commited on
Commit
42d8caf
·
verified ·
1 Parent(s): 7b2c5f1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +586 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chatbot66
3
- emoji: ⚡
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: chatbot66
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,586 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="th">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>AI Assistant - Local Government</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ :root {
12
+ --primary-color: #2D6A4F;
13
+ --secondary-color: #52B788;
14
+ --accent-color: #40916C;
15
+ --light-bg: #F8F9FA;
16
+ --dark-text: #212529;
17
+ --light-text: #F8F9FA;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Sarabun', sans-serif;
22
+ background-color: var(--light-bg);
23
+ color: var(--dark-text);
24
+ -webkit-tap-highlight-color: transparent;
25
+ }
26
+
27
+ .user-bubble {
28
+ background-color: var(--secondary-color);
29
+ color: white;
30
+ border-radius: 18px 18px 0 18px;
31
+ }
32
+
33
+ .bot-bubble {
34
+ background-color: white;
35
+ border-radius: 18px 18px 18px 0;
36
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
37
+ }
38
+
39
+ .quick-reply {
40
+ background-color: white;
41
+ border: 1px solid var(--secondary-color);
42
+ color: var(--primary-color);
43
+ border-radius: 20px;
44
+ transition: all 0.2s;
45
+ }
46
+
47
+ .quick-reply:hover, .quick-reply:active {
48
+ background-color: var(--secondary-color);
49
+ color: white;
50
+ }
51
+
52
+ .pulse {
53
+ animation: pulse 1.5s infinite;
54
+ }
55
+
56
+ @keyframes pulse {
57
+ 0% { opacity: 0.6; }
58
+ 50% { opacity: 1; }
59
+ 100% { opacity: 0.6; }
60
+ }
61
+
62
+ .header-shadow {
63
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
64
+ }
65
+
66
+ .input-shadow {
67
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
68
+ }
69
+
70
+ /* Accessibility features */
71
+ .text-large {
72
+ font-size: 1.1rem;
73
+ }
74
+
75
+ .contrast-mode {
76
+ --primary-color: #000000;
77
+ --secondary-color: #000000;
78
+ --accent-color: #000000;
79
+ --light-bg: #FFFFFF;
80
+ --dark-text: #000000;
81
+ --light-text: #FFFFFF;
82
+ background-color: #FFFFFF !important;
83
+ color: #000000 !important;
84
+ }
85
+
86
+ /* For voice input animation */
87
+ @keyframes voicePulse {
88
+ 0% { transform: scale(1); opacity: 1; }
89
+ 50% { transform: scale(1.05); opacity: 0.8; }
90
+ 100% { transform: scale(1); opacity: 1; }
91
+ }
92
+
93
+ .voice-active {
94
+ animation: voicePulse 1.5s infinite;
95
+ background-color: var(--accent-color) !important;
96
+ color: white !important;
97
+ }
98
+
99
+ /* For loading animation */
100
+ .loading-dots span {
101
+ animation: bounce 1.4s infinite ease-in-out both;
102
+ }
103
+
104
+ .loading-dots span:nth-child(1) {
105
+ animation-delay: -0.32s;
106
+ }
107
+
108
+ .loading-dots span:nth-child(2) {
109
+ animation-delay: -0.16s;
110
+ }
111
+
112
+ @keyframes bounce {
113
+ 0%, 80%, 100% { transform: scale(0); }
114
+ 40% { transform: scale(1); }
115
+ }
116
+
117
+ /* For document cards */
118
+ .document-card {
119
+ border-left: 4px solid var(--secondary-color);
120
+ transition: transform 0.2s;
121
+ }
122
+
123
+ .document-card:active {
124
+ transform: scale(0.98);
125
+ }
126
+ </style>
127
+ </head>
128
+ <body class="flex flex-col h-screen" style="max-width: 360px; margin: 0 auto;">
129
+ <!-- Header Section -->
130
+ <header class="bg-white header-shadow fixed top-0 w-full z-10" style="height: 60px; max-width: 360px;">
131
+ <div class="flex items-center justify-between h-full px-4">
132
+ <!-- Back button and Organization Info -->
133
+ <div class="flex items-center space-x-2">
134
+ <button id="backButton" aria-label="Back" class="w-8 h-8 flex items-center justify-center rounded-full text-gray-700">
135
+ <i class="fas fa-chevron-left"></i>
136
+ </button>
137
+
138
+ <div class="flex items-center">
139
+ <img src="https://img5.pic.in.th/file/secure-sv1/local-government-icon.png"
140
+ alt="Local Government Logo"
141
+ class="h-8 w-8 object-contain">
142
+ <div class="ml-2">
143
+ <h1 class="text-lg font-semibold text-gray-800">เทศบาลนครเชียงใหม่</h1>
144
+ <p class="text-xs text-gray-500">AI Assistant</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Header Controls -->
150
+ <div class="flex items-center space-x-2">
151
+ <!-- Accessibility Menu -->
152
+ <div class="relative">
153
+ <button id="accessibilityButton" aria-label="Accessibility options"
154
+ class="w-8 h-8 flex items-center justify-center rounded-full text-gray-700">
155
+ <i class="fas fa-universal-access"></i>
156
+ </button>
157
+
158
+ <div id="accessibilityMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-20">
159
+ <div class="p-2">
160
+ <button id="textSizeToggle" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">
161
+ <i class="fas fa-text-height mr-2"></i> ตัวอักษรขนาดใหญ่
162
+ </button>
163
+ <button id="contrastToggle" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">
164
+ <i class="fas fa-adjust mr-2"></i> โหมดความคมชัดสูง
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Main Menu -->
171
+ <div class="relative">
172
+ <button id="menuButton" aria-label="Menu"
173
+ class="w-8 h-8 flex items-center justify-center rounded-full text-gray-700">
174
+ <i class="fas fa-ellipsis-v"></i>
175
+ </button>
176
+
177
+ <div id="mainMenu" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg z-20">
178
+ <div class="p-2">
179
+ <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center">
180
+ <i class="fas fa-user-circle mr-2"></i> บัญชีผู้ใช้
181
+ </button>
182
+ <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center">
183
+ <i class="fas fa-history mr-2"></i> ประวัติการสนทนา
184
+ </button>
185
+ <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center">
186
+ <i class="fas fa-file-alt mr-2"></i> แบบฟอร์มบริการ
187
+ </button>
188
+ <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center">
189
+ <i class="fas fa-shield-alt mr-2"></i> นโยบายความเป็นส่วนตัว
190
+ </button>
191
+ <button class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center">
192
+ <i class="fas fa-sign-out-alt mr-2"></i> ออกจากระบบ
193
+ </button>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </header>
200
+
201
+ <!-- Chat Container -->
202
+ <main class="flex-1 overflow-y-auto pt-16 pb-24 px-4 bg-gray-50" id="chatContainer">
203
+ <!-- Welcome Message -->
204
+ <div class="mb-4">
205
+ <div class="bot-bubble px-4 py-3 max-w-xs md:max-w-md">
206
+ <p class="text-gray-800">สวัสดีค่ะ! ยินดีต้อนรับสู่ระบบ AI Assistant ของเทศบาลนครเชียงใหม่</p>
207
+ <p class="text-gray-800 mt-1">ฉันสามารถช่วยคุณในเรื่อง:</p>
208
+ <ul class="list-disc list-inside mt-2 text-sm text-gray-700">
209
+ <li>ข้อมูลบริการของเทศบาล</li>
210
+ <li>แบบฟอร์มและเอกสารต่างๆ</li>
211
+ <li>การแจ้งปัญหาหรือร้องเรียน</li>
212
+ <li>ข้���มูลชุมชนและกิจกรรม</li>
213
+ </ul>
214
+ <p class="text-xs text-gray-500 mt-2">วันนี้ 10:30 น.</p>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Quick Services -->
219
+ <div class="mb-4">
220
+ <div class="bot-bubble px-4 py-3 max-w-xs md:max-w-md">
221
+ <p class="text-gray-800 font-medium">บริการด่วนที่คุณอาจต้องการ:</p>
222
+
223
+ <div class="grid grid-cols-2 gap-2 mt-3">
224
+ <button class="quick-reply px-3 py-2 text-sm flex items-center">
225
+ <i class="fas fa-id-card mr-2"></i> ขอใบรับรอง
226
+ </button>
227
+ <button class="quick-reply px-3 py-2 text-sm flex items-center">
228
+ <i class="fas fa-trash-alt mr-2"></i> แจ้งขยะตกค้าง
229
+ </button>
230
+ <button class="quick-reply px-3 py-2 text-sm flex items-center">
231
+ <i class="fas fa-road mr-2"></i> แจ้งถนนเสียหาย
232
+ </button>
233
+ <button class="quick-reply px-3 py-2 text-sm flex items-center">
234
+ <i class="fas fa-calendar-alt mr-2"></i> กิจกรรมชุมชน
235
+ </button>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- User Message Example -->
241
+ <div class="mb-4 flex justify-end">
242
+ <div class="user-bubble px-4 py-3 max-w-xs md:max-w-md">
243
+ <p>อยากทราบขั้นตอนการขอใบรับรองผู้มีรายได้น้อย</p>
244
+ <p class="text-xs text-gray-200 mt-2">10:32 น.</p>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Bot Response with Documents -->
249
+ <div class="mb-4">
250
+ <div class="bot-bubble px-4 py-3 max-w-xs md:max-w-md">
251
+ <p class="text-gray-800">สำหรับการขอใบรับรองผู้มีรายได้น้อย คุณต้องเตรียมเอกสารดังนี้:</p>
252
+
253
+ <div class="mt-3 space-y-2">
254
+ <div class="document-card bg-white p-3 rounded-md shadow-sm">
255
+ <div class="flex items-center">
256
+ <i class="fas fa-file-pdf text-red-500 mr-3 text-xl"></i>
257
+ <div>
258
+ <p class="font-medium">แบบฟอร์มคำขอ</p>
259
+ <p class="text-xs text-gray-500">PDF, 120KB</p>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="document-card bg-white p-3 rounded-md shadow-sm">
265
+ <div class="flex items-center">
266
+ <i class="fas fa-file-word text-blue-500 mr-3 text-xl"></i>
267
+ <div>
268
+ <p class="font-medium">ตัวอย่างการกรอก</p>
269
+ <p class="text-xs text-gray-500">DOCX, 85KB</p>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="mt-3">
276
+ <p class="text-sm text-gray-700">คุณสามารถดาวน์โหลดเอกสารหรือเริ่มกรอกแบบฟอร์มออนไลน์ได้ทันที</p>
277
+ </div>
278
+
279
+ <div class="mt-3 flex space-x-2">
280
+ <button class="bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center">
281
+ <i class="fas fa-download mr-1"></i> ดาวน์โหลด
282
+ </button>
283
+ <button class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm flex items-center">
284
+ <i class="fas fa-edit mr-1"></i> กรอกออนไลน์
285
+ </button>
286
+ </div>
287
+
288
+ <p class="text-xs text-gray-500 mt-2">10:33 น.</p>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Location Service Example -->
293
+ <div class="mb-4">
294
+ <div class="bot-bubble px-4 py-3 max-w-xs md:max-w-md">
295
+ <p class="text-gray-800">นี่คือสถานที่สำนักงานเขตที่คุณสามารถไปยื่นเอกสารได้:</p>
296
+
297
+ <div class="mt-3 rounded-lg overflow-hidden border border-gray-200">
298
+ <img src="https://via.placeholder.com/300x150?text=Map+Location"
299
+ alt="ที่ตั้งสำนักงานเขต"
300
+ class="w-full h-auto">
301
+ <div class="p-2 bg-gray-50">
302
+ <p class="font-medium">สำนักงานเขตเมืองเชียงใหม่</p>
303
+ <p class="text-xs text-gray-600">123 ถนนวิชยานนท์ ต.ศรีภูมิ อ.เมือง จ.เชียงใหม่ 50200</p>
304
+ <p class="text-xs text-gray-600 mt-1"><i class="fas fa-clock mr-1"></i> เปิดบริการ: จันทร์-ศุกร์ 08:30-16:30 น.</p>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="mt-3 flex space-x-2">
309
+ <button class="bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center">
310
+ <i class="fas fa-directions mr-1"></i> นำทาง
311
+ </button>
312
+ <button class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm flex items-center">
313
+ <i class="fas fa-phone-alt mr-1"></i> โทรสอบถาม
314
+ </button>
315
+ </div>
316
+
317
+ <p class="text-xs text-gray-500 mt-2">10:35 น.</p>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Bot Loading State -->
322
+ <div class="mb-4">
323
+ <div class="bot-bubble px-4 py-3 max-w-xs md:max-w-md flex items-center">
324
+ <div class="loading-dots flex space-x-1">
325
+ <span class="w-2 h-2 bg-gray-600 rounded-full inline-block"></span>
326
+ <span class="w-2 h-2 bg-gray-600 rounded-full inline-block"></span>
327
+ <span class="w-2 h-2 bg-gray-600 rounded-full inline-block"></span>
328
+ </div>
329
+ <span class="ml-2 text-sm text-gray-600">กำลังค้นหาข้อมูล...</span>
330
+ </div>
331
+ </div>
332
+ </main>
333
+
334
+ <!-- Input Section -->
335
+ <footer class="bg-white input-shadow border-t border-gray-200 fixed bottom-0 w-full" style="height: 72px; max-width: 360px;">
336
+ <div class="flex items-center h-full px-3">
337
+ <!-- Voice Input -->
338
+ <button id="voiceButton" aria-label="Voice input"
339
+ class="w-10 h-10 flex items-center justify-center rounded-full text-gray-600 bg-gray-100">
340
+ <i class="fas fa-microphone"></i>
341
+ </button>
342
+
343
+ <!-- Text Input -->
344
+ <div class="flex-1 mx-2">
345
+ <input type="text"
346
+ placeholder="พิมพ์ข้อความหรือคำถาม..."
347
+ class="w-full px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-200 focus:border-transparent text-large"
348
+ style="min-height: 44px;">
349
+ </div>
350
+
351
+ <!-- Attachment -->
352
+ <button aria-label="Attach file"
353
+ class="w-10 h-10 flex items-center justify-center rounded-full text-gray-600 mr-1 bg-gray-100">
354
+ <i class="fas fa-paperclip"></i>
355
+ </button>
356
+
357
+ <!-- Send Button -->
358
+ <button aria-label="Send message"
359
+ class="w-10 h-10 flex items-center justify-center rounded-full bg-green-500 text-white">
360
+ <i class="fas fa-paper-plane"></i>
361
+ </button>
362
+ </div>
363
+
364
+ <!-- Quick Action Toolbar -->
365
+ <div class="bg-gray-100 px-3 py-2 flex justify-around border-t border-gray-200">
366
+ <button class="flex flex-col items-center text-xs text-gray-700 px-2 py-1 rounded">
367
+ <i class="fas fa-home text-lg mb-1"></i>
368
+ <span>บริการหลัก</span>
369
+ </button>
370
+ <button class="flex flex-col items-center text-xs text-gray-700 px-2 py-1 rounded">
371
+ <i class="fas fa-file-signature text-lg mb-1"></i>
372
+ <span>แบบฟอร์ม</span>
373
+ </button>
374
+ <button class="flex flex-col items-center text-xs text-gray-700 px-2 py-1 rounded">
375
+ <i class="fas fa-calendar-check text-lg mb-1"></i>
376
+ <span>นัดหมาย</span>
377
+ </button>
378
+ <button class="flex flex-col items-center text-xs text-gray-700 px-2 py-1 rounded">
379
+ <i class="fas fa-question-circle text-lg mb-1"></i>
380
+ <span>ช่วยเหลือ</span>
381
+ </button>
382
+ </div>
383
+ </footer>
384
+
385
+ <!-- API Connection Modal -->
386
+ <div id="apiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-30 flex items-center justify-center p-4">
387
+ <div class="bg-white rounded-lg w-full max-w-sm max-h-[80vh] overflow-y-auto">
388
+ <div class="p-4 border-b border-gray-200">
389
+ <h3 class="text-lg font-medium text-gray-900">การเชื่อมต่อระบบ</h3>
390
+ </div>
391
+
392
+ <div class="p-4">
393
+ <p class="text-sm text-gray-600 mb-4">ระบบนี้สามารถเชื่อมต่อกับบริการอื่นๆ ของเทศบาลได้:</p>
394
+
395
+ <div class="space-y-3">
396
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg">
397
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
398
+ <i class="fas fa-database text-blue-500"></i>
399
+ </div>
400
+ <div>
401
+ <p class="font-medium">ฐานข้อมูลประชาชน</p>
402
+ <p class="text-xs text-gray-500">ตรวจสอบสถานะและข้อมูลส่วนตัว</p>
403
+ </div>
404
+ <div class="ml-auto">
405
+ <label class="relative inline-flex items-center cursor-pointer">
406
+ <input type="checkbox" class="sr-only peer">
407
+ <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-green-500"></div>
408
+ </label>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg">
413
+ <div class="bg-green-100 p-2 rounded-full mr-3">
414
+ <i class="fab fa-line text-green-500"></i>
415
+ </div>
416
+ <div>
417
+ <p class="font-medium">LINE Official</p>
418
+ <p class="text-xs text-gray-500">รับการแจ้งเตือนผ่าน LINE</p>
419
+ </div>
420
+ <div class="ml-auto">
421
+ <label class="relative inline-flex items-center cursor-pointer">
422
+ <input type="checkbox" class="sr-only peer">
423
+ <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-green-500"></div>
424
+ </label>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg">
429
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
430
+ <i class="fas fa-file-invoice-dollar text-purple-500"></i>
431
+ </div>
432
+ <div>
433
+ <p class="font-medium">ระบบชำระเงิน</p>
434
+ <p class="text-xs text-gray-500">ชำระค่าธรรมเนียมออนไลน์</p>
435
+ </div>
436
+ <div class="ml-auto">
437
+ <label class="relative inline-flex items-center cursor-pointer">
438
+ <input type="checkbox" class="sr-only peer">
439
+ <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-green-500"></div>
440
+ </label>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <div class="p-4 border-t border-gray-200 flex justify-end space-x-2">
447
+ <button id="cancelApiModal" class="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-md">
448
+ ยกเลิก
449
+ </button>
450
+ <button id="saveApiSettings" class="px-4 py-2 text-sm text-white bg-green-500 rounded-md">
451
+ บันทึกการตั้งค่า
452
+ </button>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <script>
458
+ document.addEventListener('DOMContentLoaded', function() {
459
+ // Toggle menus
460
+ const menuButton = document.getElementById('menuButton');
461
+ const mainMenu = document.getElementById('mainMenu');
462
+ const accessibilityButton = document.getElementById('accessibilityButton');
463
+ const accessibilityMenu = document.getElementById('accessibilityMenu');
464
+
465
+ menuButton.addEventListener('click', function() {
466
+ mainMenu.classList.toggle('hidden');
467
+ accessibilityMenu.classList.add('hidden');
468
+ });
469
+
470
+ accessibilityButton.addEventListener('click', function() {
471
+ accessibilityMenu.classList.toggle('hidden');
472
+ mainMenu.classList.add('hidden');
473
+ });
474
+
475
+ // Close menus when clicking outside
476
+ document.addEventListener('click', function(event) {
477
+ if (!menuButton.contains(event.target) && !mainMenu.contains(event.target)) {
478
+ mainMenu.classList.add('hidden');
479
+ }
480
+ if (!accessibilityButton.contains(event.target) && !accessibilityMenu.contains(event.target)) {
481
+ accessibilityMenu.classList.add('hidden');
482
+ }
483
+ });
484
+
485
+ // Accessibility features
486
+ const textSizeToggle = document.getElementById('textSizeToggle');
487
+ const contrastToggle = document.getElementById('contrastToggle');
488
+
489
+ textSizeToggle.addEventListener('click', function() {
490
+ document.body.classList.toggle('text-large');
491
+ this.innerHTML = document.body.classList.contains('text-large') ?
492
+ '<i class="fas fa-text-height mr-2"></i> ตัวอักษรขนาดปกติ' :
493
+ '<i class="fas fa-text-height mr-2"></i> ตัวอักษรขนาดใหญ่';
494
+ });
495
+
496
+ contrastToggle.addEventListener('click', function() {
497
+ document.body.classList.toggle('contrast-mode');
498
+ this.innerHTML = document.body.classList.contains('contrast-mode') ?
499
+ '<i class="fas fa-adjust mr-2"></i> โหมดปกติ' :
500
+ '<i class="fas fa-adjust mr-2"></i> โหมดความคมชัดสูง';
501
+ });
502
+
503
+ // Voice input
504
+ const voiceButton = document.getElementById('voiceButton');
505
+ let isListening = false;
506
+
507
+ voiceButton.addEventListener('click', function() {
508
+ isListening = !isListening;
509
+
510
+ if (isListening) {
511
+ this.classList.add('voice-active');
512
+ // In a real app, this would start voice recognition
513
+ console.log('Voice recognition started');
514
+ } else {
515
+ this.classList.remove('voice-active');
516
+ console.log('Voice recognition stopped');
517
+ }
518
+ });
519
+
520
+ // Quick reply buttons
521
+ const quickReplies = document.querySelectorAll('.quick-reply');
522
+ quickReplies.forEach(reply => {
523
+ reply.addEventListener('click', function() {
524
+ const text = this.querySelector('span') ? this.querySelector('span').textContent : this.textContent;
525
+ // In a real app, this would send the quick reply text to the chat
526
+ console.log('Quick reply selected:', text.trim());
527
+
528
+ // Scroll to bottom of chat
529
+ const chatContainer = document.getElementById('chatContainer');
530
+ chatContainer.scrollTop = chatContainer.scrollHeight;
531
+ });
532
+ });
533
+
534
+ // API Connection Modal
535
+ const apiModal = document.getElementById('apiModal');
536
+ const cancelApiModal = document.getElementById('cancelApiModal');
537
+ const saveApiSettings = document.getElementById('saveApiSettings');
538
+
539
+ // This would be triggered from a menu item in a real app
540
+ function showApiModal() {
541
+ apiModal.classList.remove('hidden');
542
+ }
543
+
544
+ cancelApiModal.addEventListener('click', function() {
545
+ apiModal.classList.add('hidden');
546
+ });
547
+
548
+ saveApiSettings.addEventListener('click', function() {
549
+ apiModal.classList.add('hidden');
550
+ // In a real app, this would save API connection settings
551
+ console.log('API settings saved');
552
+ });
553
+
554
+ // Simulate receiving a message
555
+ setTimeout(function() {
556
+ const chatContainer = document.getElementById('chatContainer');
557
+
558
+ const newMessage = document.createElement('div');
559
+ newMessage.className = 'mb-4';
560
+ newMessage.innerHTML = `
561
+ <div class="bot-bubble px-4 py-3 max-w-xs md:max-w-md">
562
+ <p class="text-gray-800">นี่คือข้อมูลเกี่ยวกับขั้นตอนการขอใบรับรองผู้มีรายได้น้อย:</p>
563
+ <ol class="list-decimal list-inside mt-2 text-sm text-gray-700 space-y-1">
564
+ <li>ดาวน์โหลดแบบฟอร์มหรือกรอกออนไลน์</li>
565
+ <li>เตรียมเอกสารประกอบ (สำเนาบัตรประชาชน, สำเนาทะเบียนบ้าน)</li>
566
+ <li>นำเอกสารมายื่นที่สำนักงานเขต</li>
567
+ <li>รอรับใบรับรอง (ปกติใช้เวลา 3-5 วันทำการ)</li>
568
+ </ol>
569
+ <p class="text-xs text-gray-500 mt-2">10:36 น.</p>
570
+ </div>
571
+ `;
572
+
573
+ chatContainer.appendChild(newMessage);
574
+ chatContainer.scrollTop = chatContainer.scrollHeight;
575
+ }, 2000);
576
+
577
+ // Back button functionality
578
+ const backButton = document.getElementById('backButton');
579
+ backButton.addEventListener('click', function() {
580
+ // In a real app, this would navigate back
581
+ console.log('Back button pressed');
582
+ });
583
+ });
584
+ </script>
585
+ <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/chatbot66" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
586
+ </html>
prompts.txt ADDED
File without changes