Hugging Face's logo

Spaces:
Dooratre
/
AI_BTC
Sleeping

App Files Community
1
Dooratre commited on
Commit
fcbe31c
•
1 Parent(s): c3e172c

Upload ai-chat-bot.html

Browse files
Files changed (1) hide show
  1. templates/ai-chat-bot.html +626 -0
templates/ai-chat-bot.html ADDED
@@ -0,0 +1,626 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
3
+ <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
4
+ <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
5
+ <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
6
+
7
+ <head>
8
+
9
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10
+
11
+ <meta name="description" content="TechWave">
12
+ <meta name="author" content="SRBThemes">
13
+
14
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
15
+
16
+ <title>AI Chat Bot - TechWave</title>
17
+
18
+
19
+ <script>
20
+ if (!localStorage.frenify_skin) {
21
+ localStorage.frenify_skin = 'dark';
22
+ }
23
+ if (!localStorage.frenify_panel) {
24
+ localStorage.frenify_panel = '';
25
+ }
26
+ document.documentElement.setAttribute("data-techwave-skin", localStorage.frenify_skin);
27
+ if(localStorage.frenify_panel !== ''){
28
+ document.documentElement.classList.add(localStorage.frenify_panel);
29
+ }
30
+
31
+ </script>
32
+
33
+ <!-- Google Fonts -->
34
+ <link rel="preconnect" href="https://fonts.googleapis.com">
35
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
36
+ <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
37
+ <!-- !Google Fonts -->
38
+
39
+ <!-- Styles -->
40
+ <link type="text/css" rel="stylesheet" href="desine/css/plugins.css?ver=1.0.0" />
41
+ <link type="text/css" rel="stylesheet" href="desine/css/style.css?ver=1.0.0" />
42
+ <!--[if lt IE 9]> <script type="text/javascript" src="desine/js/modernizr.custom.js"></script> <![endif]-->
43
+ <!-- !Styles -->
44
+
45
+ </head>
46
+
47
+ <body>
48
+
49
+
50
+ <!-- Moving Submenu -->
51
+ <div class="techwave_fn_fixedsub">
52
+ <ul></ul>
53
+ </div>
54
+ <!-- !Moving Submenu -->
55
+
56
+ <!-- Preloader -->
57
+ <div class="techwave_fn_preloader">
58
+ <svg>
59
+ <circle class="first_circle" cx="50%" cy="50%" r="110"></circle>
60
+ <circle class="second_circle" cx="50%" cy="50%" r="110"></circle>
61
+ </svg>
62
+ </div>
63
+ <!-- !Preloader -->
64
+
65
+ <div class="techwave_fn_font">
66
+ <a class="font__closer_link fn__icon_button" href="#"><img src="desine/svg/close.svg" alt="" class="fn__svg"></a>
67
+ <div class="font__closer"></div>
68
+ <div class="font__dialog">
69
+ <h3 class="title">Font Options</h3>
70
+ <label for="font_size">Font Size</label>
71
+ <select id="font_size">
72
+ <option value="10">10 px</option>
73
+ <option value="12">12 px</option>
74
+ <option value="14">14 px</option>
75
+ <option value="16" >16 px</option>
76
+ <option value="18">18 px</option>
77
+ <option value="20">20 px</option>
78
+ <option value="22" selected>22 px</option>
79
+ <option value="24">24 px</option>
80
+ <option value="26">26 px</option>
81
+ <option value="28">28 px</option>
82
+ </select>
83
+ <a href="#" class="apply techwave_fn_button"><span>Apply</span></a>
84
+ </div>
85
+ </div>
86
+
87
+
88
+ <!-- MAIN WRAPPER -->
89
+ <div class="techwave_fn_wrapper fn__has_sidebar">
90
+ <div class="techwave_fn_wrap">
91
+
92
+
93
+ <!-- Searchbar -->
94
+ <div class="techwave_fn_searchbar">
95
+ <div class="search__bar">
96
+ <input class="search__input" type="text" placeholder="Search here...">
97
+ <img src="desine/svg/search.svg" alt="" class="fn__svg search__icon">
98
+ <a class="search__closer" href="#"><img src="desine/svg/close.svg" alt="" class="fn__svg"></a>
99
+ </div>
100
+ <div class="search__results">
101
+ <!-- Results will come here (via ajax after the integration you made after purchase as it doesn't work in HTML) -->
102
+ <div class="results__title">Results</div>
103
+ <div class="results__list">
104
+ <ul>
105
+ <li><a href="#">Artificial Intelligence</a></li>
106
+ <li><a href="#">Learn about the impact of AI on the financial industry</a></li>
107
+ <li><a href="#">Delve into the realm of AI-driven manufacturing</a></li>
108
+ <li><a href="#">Understand the ethical implications surrounding AI</a></li>
109
+ </ul>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <!-- !Searchbar -->
114
+
115
+ <!-- HEADER -->
116
+ <header class="techwave_fn_header">
117
+
118
+ <!-- Header left: token information -->
119
+ <div class="header__left">
120
+ <div class="fn__token_info">
121
+ <span class="token_summary">
122
+ <span class="count">120</span>
123
+ <span class="text">Tokens<br>Remain</span>
124
+ </span>
125
+ <a href="pricing.html" class="token_upgrade techwave_fn_button"><span>Upgrade</span></a>
126
+ <div class="token__popup">
127
+ Resets in <span>19 hours.</span><br>
128
+ Daily limit is <span>200 tokens</span>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <!-- /Header left: token information -->
133
+
134
+
135
+ <!-- Header right: navigation bar -->
136
+ <div class="header__right">
137
+ <div class="fn__nav_bar">
138
+
139
+ <!-- Search (bar item) -->
140
+ <div class="bar__item bar__item_search">
141
+ <a href="#" class="item_opener">
142
+ <img src="desine/svg/search.svg" alt="" class="fn__svg">
143
+ </a>
144
+ <div class="item_popup">
145
+ <input type="text" placeholder="Search">
146
+ </div>
147
+ </div>
148
+ <!-- !Search (bar item) -->
149
+
150
+ <!-- Notification (bar item) -->
151
+ <div class="bar__item bar__item_notification has_notification">
152
+ <a href="#" class="item_opener">
153
+ <img src="desine/svg/bell.svg" alt="" class="fn__svg">
154
+ </a>
155
+ <div class="item_popup">
156
+ <div class="ntfc_header">
157
+ <h2 class="ntfc_title">Notifications</h2>
158
+ <a href="notifications.html">View All</a>
159
+ </div>
160
+ <div class="ntfc_list">
161
+ <ul>
162
+ <li>
163
+ <p><a href="notification-single.html">Version 1.1.0 has been launched</a></p>
164
+ <span>34 Min Ago</span>
165
+ </li>
166
+ <li>
167
+ <p><a href="notification-single.html">Video Generation has been released</a></p>
168
+ <span>12 Apr</span>
169
+ </li>
170
+ <li>
171
+ <p><a href="notification-single.html">Terms has been updated</a></p>
172
+ <span>12 Apr</span>
173
+ </li>
174
+ </ul>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <!-- !Notification (bar item) -->
179
+
180
+ <!-- Full Screen (bar item) -->
181
+ <div class="bar__item bar__item_fullscreen">
182
+ <a href="#" class="item_opener">
183
+ <img src="desine/svg/fullscreen.svg" alt="" class="fn__svg f_screen">
184
+ <img src="desine/svg/smallscreen.svg" alt="" class="fn__svg s_screen">
185
+ </a>
186
+ </div>
187
+ <!-- !Full Screen (bar item) -->
188
+
189
+ <!-- Language (bar item) -->
190
+ <div class="bar__item bar__item_language">
191
+ <a href="#" class="item_opener">
192
+ <img src="desine/svg/language.svg" alt="" class="fn__svg">
193
+ </a>
194
+ <div class="item_popup">
195
+ <ul>
196
+ <li>
197
+ <span class="active">English</span>
198
+ </li>
199
+ <li>
200
+ <a href="#">Spanish</a>
201
+ </li>
202
+ <li>
203
+ <a href="#">French</a>
204
+ </li>
205
+ </ul>
206
+ </div>
207
+ </div>
208
+ <!-- !Language (bar item) -->
209
+
210
+ <!-- Site Skin (bar item) -->
211
+ <div class="bar__item bar__item_skin">
212
+ <a href="#" class="item_opener">
213
+ <img src="desine/svg/sun.svg" alt="" class="fn__svg light_mode">
214
+ <img src="desine/svg/moon.svg" alt="" class="fn__svg dark_mode">
215
+ </a>
216
+ </div>
217
+ <!-- !Site Skin (bar item) -->
218
+
219
+ <!-- User (bar item) -->
220
+ <div class="bar__item bar__item_user">
221
+ <a href="#" class="user_opener">
222
+ <img src="desine/img/user/user.jpg" alt="">
223
+ </a>
224
+ <div class="item_popup">
225
+ <div class="user_profile">
226
+ <div class="user_img">
227
+ <img src="desine/img/user/user.jpg" alt="">
228
+ </div>
229
+ <div class="user_info">
230
+ <h2 class="user_name">Caden Smith<span>Free</span></h2>
231
+ <p><a href="mailto:[email protected]" class="user_email">[email protected]</a></p>
232
+ </div>
233
+ </div>
234
+ <div class="user_nav">
235
+ <ul>
236
+ <li>
237
+ <a href="user-profile.html">
238
+ <span class="icon"><img src="desine/svg/person.svg" alt="" class="fn__svg"></span>
239
+ <span class="text">Profile</span>
240
+ </a>
241
+ </li>
242
+ <li>
243
+ <a href="user-settings.html">
244
+ <span class="icon"><img src="desine/svg/setting.svg" alt="" class="fn__svg"></span>
245
+ <span class="text">Settings</span>
246
+ </a>
247
+ </li>
248
+ <li>
249
+ <a href="user-billing.html">
250
+ <span class="icon"><img src="desine/svg/billing.svg" alt="" class="fn__svg"></span>
251
+ <span class="text">Billing</span>
252
+ </a>
253
+ </li>
254
+ <li>
255
+ <a href="sign-in.html">
256
+ <span class="icon"><img src="desine/svg/logout.svg" alt="" class="fn__svg"></span>
257
+ <span class="text">Log Out</span>
258
+ </a>
259
+ </li>
260
+ </ul>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <!-- !User (bar item) -->
265
+
266
+
267
+ </div>
268
+ </div>
269
+ <!-- !Header right: navigation bar -->
270
+
271
+ </header>
272
+ <!-- !HEADER -->
273
+
274
+
275
+ <!-- LEFT PANEL -->
276
+ <div class="techwave_fn_leftpanel">
277
+
278
+ <div class="mobile_extra_closer"></div>
279
+
280
+ <!-- logo (left panel) -->
281
+ <div class="leftpanel_logo">
282
+ <a href="index.html" class="fn_logo">
283
+ <span class="full_logo">
284
+ <img src="desine/img/logo-desktop-full.png" alt="" class="desktop_logo">
285
+ <img src="desine/img/logo-retina-full.png" alt="" class="retina_logo">
286
+ </span>
287
+ <span class="short_logo">
288
+ <img src="desine/img/logo-desktop-mini.png" alt="" class="desktop_logo">
289
+ <img src="desine/img/logo-retina-mini.png" alt="" class="retina_logo">
290
+ </span>
291
+ </a>
292
+ <a href="#" class="fn__closer fn__icon_button desktop_closer">
293
+ <img src="desine/svg/arrow.svg" alt="" class="fn__svg">
294
+ </a>
295
+ <a href="#" class="fn__closer fn__icon_button mobile_closer">
296
+ <img src="desine/svg/arrow.svg" alt="" class="fn__svg">
297
+ </a>
298
+ </div>
299
+ <!-- !logo (left panel) -->
300
+
301
+ <!-- content (left panel) -->
302
+ <div class="leftpanel_content">
303
+
304
+ <!-- #1 navigation group -->
305
+ <div class="nav_group">
306
+ <h2 class="group__title">Start Here</h2>
307
+ <ul class="group__list">
308
+ <li>
309
+ <a href="index.html" class="fn__tooltip menu__item" data-position="right" title="Home">
310
+ <span class="icon"><img src="desine/svg/home.svg" alt="" class="fn__svg"></span>
311
+ <span class="text">Home</span>
312
+ </a>
313
+ </li>
314
+ <li>
315
+ <a href="community-feed.html" class="fn__tooltip menu__item" data-position="right" title="Community Feed">
316
+ <span class="icon"><img src="desine/svg/community.svg" alt="" class="fn__svg"></span>
317
+ <span class="text">Community Feed</span>
318
+ </a>
319
+ </li>
320
+ <li>
321
+ <a href="personal-feed.html" class="fn__tooltip menu__item" data-position="right" title="Personal Feed">
322
+ <span class="icon"><img src="desine/svg/person.svg" alt="" class="fn__svg"></span>
323
+ <span class="text">Personal Feed<span class="count">48</span></span>
324
+ </a>
325
+ </li>
326
+ <li>
327
+ <a href="models.html" class="fn__tooltip menu__item" data-position="right" title="Finetuned Models">
328
+ <span class="icon"><img src="desine/svg/cube.svg" alt="" class="fn__svg"></span>
329
+ <span class="text">Finetuned Models</span>
330
+ </a>
331
+ </li>
332
+ </ul>
333
+ </div>
334
+ <!-- !#1 navigation group -->
335
+
336
+ <!-- #2 navigation group -->
337
+ <div class="nav_group">
338
+ <h2 class="group__title">User Tools</h2>
339
+ <ul class="group__list">
340
+ <li>
341
+ <a href="image-generation.html" class="fn__tooltip menu__item" data-position="right" title="Image Generation">
342
+ <span class="icon"><img src="desine/svg/image.svg" alt="" class="fn__svg"></span>
343
+ <span class="text">Image Generation</span>
344
+ </a>
345
+ </li>
346
+ <li>
347
+ <a href="ai-chat-bot.html" class="fn__tooltip active menu__item" data-position="right" title="AI Chat Bot">
348
+ <span class="icon"><img src="desine/svg/chat.svg" alt="" class="fn__svg"></span>
349
+ <span class="text">AI Chat Bot</span>
350
+ </a>
351
+ </li>
352
+ </ul>
353
+ </div>
354
+ <!-- !#2 navigation group -->
355
+
356
+ <!-- #3 navigation group -->
357
+ <div class="nav_group">
358
+ <h2 class="group__title">Support</h2>
359
+ <ul class="group__list">
360
+ <li>
361
+ <a href="pricing.html" class="fn__tooltip menu__item" data-position="right" title="Pricing">
362
+ <span class="icon"><img src="desine/svg/dollar.svg" alt="" class="fn__svg"></span>
363
+ <span class="text">Pricing</span>
364
+ </a>
365
+ </li>
366
+ <li class="menu-item-has-children">
367
+ <a href="video-generation.html" class="fn__tooltip menu__item" title="FAQ &amp; Help" data-position="right">
368
+ <span class="icon"><img src="desine/svg/question.svg" alt="" class="fn__svg"></span>
369
+ <span class="text">FAQ &amp; Help</span>
370
+ <span class="trigger"><img src="desine/svg/arrow.svg" alt="" class="fn__svg"></span>
371
+ </a>
372
+ <ul class="sub-menu">
373
+ <li>
374
+ <a href="documentation.html"><span class="text">Documentation</span></a>
375
+ </li>
376
+ <li>
377
+ <a href="faq.html"><span class="text">FAQ</span></a>
378
+ </li>
379
+ <li>
380
+ <a href="changelog.html"><span class="text">Changelog<span class="fn__sup">(1.1.0)</span></span></a>
381
+ </li>
382
+ <li>
383
+ <a href="contact.html"><span class="text">Contact Us</span></a>
384
+ </li>
385
+ <li>
386
+ <a href="index-2.html"><span class="text">Home #2</span></a>
387
+ </li>
388
+ </ul>
389
+ </li>
390
+ <li>
391
+ <a href="sign-in.html" class="fn__tooltip menu__item" data-position="right" title="Log Out">
392
+ <span class="icon"><img src="desine/svg/logout.svg" alt="" class="fn__svg"></span>
393
+ <span class="text">Log Out</span>
394
+ </a>
395
+ </li>
396
+ </ul>
397
+ </div>
398
+ <!-- !#3 navigation group -->
399
+
400
+
401
+ </div>
402
+ <!-- !content (left panel) -->
403
+
404
+ </div>
405
+ <!-- !LEFT PANEL -->
406
+
407
+
408
+ <!-- CONTENT -->
409
+ <div class="techwave_fn_content">
410
+
411
+ <!-- PAGE (all pages go inside this div) -->
412
+ <div class="techwave_fn_page">
413
+
414
+ <!-- AI Chat Bot Page -->
415
+ <div class="techwave_fn_aichatbot_page fn__chatbot">
416
+
417
+ <div class="chat__page">
418
+
419
+ <div class="font__trigger">
420
+ <span></span>
421
+ </div>
422
+
423
+ <div class="fn__title_holder">
424
+ <div class="container">
425
+ <!-- Active chat title -->
426
+ <h1 class="title">Chat Bot Definition</h1>
427
+ <!-- !Active chat title -->
428
+ </div>
429
+ </div>
430
+
431
+ <div class="container">
432
+ <div class="chat__list">
433
+ <div id="chat0" class="chat__item"></div>
434
+ <div class="chat__item active" id="chat1">
435
+
436
+ <div class="chat__box bot__chat">
437
+ <div class="author"><span>Bot</span></div>
438
+ <div class="chat">
439
+ <div class="fn__animated_text"><p>Hello there How are you i am Alex How can i help you ?</p></div>
440
+
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ <div class="chat__comment">
447
+ <div class="container">
448
+ <div class="fn__chat_comment">
449
+
450
+ <textarea rows="1" class="fn__hidden_textarea" tabindex="-1"></textarea>
451
+ <textarea rows="1" placeholder="Send a message..." id="user_input"></textarea>
452
+ <button onclick="sendMessage()"><img src="desine/svg/enter.svg" alt="" class="fn__svg"></button>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <script>
458
+ function sendMessage() {
459
+ var user_input = document.getElementById("user_input").value;
460
+
461
+ if (user_input.trim() !== "") {
462
+ // Display user's message immediately
463
+ addChatMessage(user_input, "User");
464
+ document.getElementById("user_input").value = "";
465
+
466
+ var xhr = new XMLHttpRequest();
467
+ xhr.open("POST", "/get_response", true);
468
+ xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
469
+ xhr.onreadystatechange = function() {
470
+ if (xhr.readyState === 4 && xhr.status === 200) {
471
+ var response_text = xhr.responseText;
472
+ // Display bot's response
473
+ addChatMessage2(response_text, "Bot");
474
+ }
475
+ };
476
+ xhr.send("user_input=" + user_input);
477
+ }
478
+ }
479
+
480
+ function addChatMessage(message, author) {
481
+ var chatItem = document.createElement("div");
482
+ chatItem.className = "chat__box your__chat";
483
+
484
+ var authorElement = document.createElement("div");
485
+ authorElement.className = "author";
486
+ authorElement.innerHTML = "<span>" + author + "</span>";
487
+
488
+ var chatElement = document.createElement("div");
489
+ chatElement.className = "chat";
490
+
491
+ chatElement.innerHTML = "<p>" + message + "</p>";
492
+
493
+ chatItem.appendChild(authorElement);
494
+ chatItem.appendChild(chatElement);
495
+
496
+ document.getElementById("chat1").appendChild(chatItem);
497
+ }
498
+
499
+ function addChatMessage2(message, author) {
500
+ var chatItem = document.createElement("div");
501
+ chatItem.className = "chat__box bot__chat";
502
+
503
+ var authorElement = document.createElement("div");
504
+ authorElement.className = "author";
505
+ authorElement.innerHTML = "<span>" + author + "</span>";
506
+
507
+ var chatElement = document.createElement("div");
508
+ chatElement.className = "chat";
509
+
510
+ chatItem.appendChild(authorElement);
511
+ chatItem.appendChild(chatElement);
512
+
513
+ document.getElementById("chat1").appendChild(chatItem);
514
+
515
+ var messageElement = document.createElement("p");
516
+ chatElement.appendChild(messageElement);
517
+
518
+ var index = 0;
519
+ var typingInterval = setInterval(function() {
520
+ if (index < message.length) {
521
+ if (message.charAt(index) === "<" && message.charAt(index + 1) === "b" && message.charAt(index + 2) === "r" && message.charAt(index + 3) === ">") {
522
+ messageElement.innerHTML += "<br>";
523
+ index += 3;
524
+ } else if (message.charAt(index) === "<" && message.charAt(index + 1) === "i" && message.charAt(index + 2) === "m" && message.charAt(index + 3) === "g" && message.charAt(index + 4) === " ") {
525
+ var srcStart = message.indexOf("src='", index) + 5;
526
+ var srcEnd = message.indexOf("'", srcStart);
527
+ var imageUrl = message.substring(srcStart, srcEnd);
528
+ var imageElement = document.createElement("img");
529
+ imageElement.src = imageUrl;
530
+ imageElement.className = "chat__image"; // Add CSS class for styling
531
+ messageElement.appendChild(imageElement);
532
+ index = srcEnd + 1;
533
+
534
+ } else {
535
+ messageElement.innerHTML += message.charAt(index);
536
+ }
537
+ index++;
538
+ } else {
539
+ clearInterval(typingInterval);
540
+ }
541
+ }, 30); // Adjust the delay (in milliseconds) between each character being added
542
+ }
543
+
544
+ </script>
545
+ <style>
546
+ .chat__image {
547
+ max-width: 200px; /* Adjust the maximum width as desired */
548
+ max-height: 200px; /* Adjust the maximum height as desired */
549
+ border-radius: 10px; /* Add rounded corners */
550
+ }
551
+
552
+ .chat__download-button {
553
+ display: block;
554
+ margin-top: 10px;
555
+ text-align: center;
556
+ color: #fff;
557
+ background-color: #007bff;
558
+ border: none;
559
+ border-radius: 5px;
560
+ padding: 5px 10px;
561
+ text-decoration: none;
562
+ cursor: pointer;
563
+ }
564
+
565
+ .chat__download-button:hover {
566
+ background-color: #0056b3;
567
+ }
568
+ </style> </div>
569
+
570
+ <div class="chat__sidebar">
571
+ <div class="sidebar_header">
572
+ <a href="/" class="fn__new_chat_link">
573
+ <span class="icon"></span>
574
+ <span class="text">New Chat</span>
575
+ </a>
576
+ </div>
577
+
578
+ </div>
579
+ </li>
580
+ </ul>
581
+ </div>
582
+ </div>
583
+ </div>
584
+
585
+ </div>
586
+ <!-- !AI Chat Bot Page -->
587
+
588
+ </div>
589
+ <!-- !PAGE (all pages go inside this div) -->
590
+
591
+
592
+ <!-- FOOTER (inside the content) -->
593
+ <footer class="techwave_fn_footer">
594
+ <div class="techwave_fn_footer_content">
595
+ <div class="copyright">
596
+ <p><script>document.write(new Date().getFullYear())</script>© SRBThemes</p>
597
+ </div>
598
+ <div class="menu_items">
599
+ <ul>
600
+ <li><a href="terms.html">Terms of Service</a></li>
601
+ <li><a href="privacy.html">Privacy Policy</a></li>
602
+ </ul>
603
+ </div>
604
+ </div>
605
+ </footer>
606
+ <!-- !FOOTER (inside the content) -->
607
+
608
+ </div>
609
+ <!-- !CONTENT -->
610
+
611
+
612
+ </div>
613
+ </div>
614
+ <!-- !MAIN WRAPPER -->
615
+
616
+
617
+
618
+ <!-- Scripts -->
619
+ <script type="text/javascript" src="desine/js/jquery.js?ver=1.0.0"></script>
620
+ <script type="text/javascript" src="desine/js/plugins.js?ver=1.0.0"></script>
621
+ <!--[if lt IE 10]> <script type="text/javascript" src="desine/js/ie8.js"></script> <![endif]-->
622
+ <script type="text/javascript" src="desine/js/init.js?ver=1.0.0"></script>
623
+ <!-- !Scripts -->
624
+
625
+ </body>
626
+ </html>