@@ -252,197 +252,6 @@ <h2 id="license">License</h2>
252
252
ga ( 'create' , 'UA-35543006-1' , 'auto' ) ;
253
253
ga ( 'send' , 'pageview' ) ;
254
254
</ script >
255
- <!---->
256
- < div id ="chat-container ">
257
- < div id ="chat-header ">
258
- < span > PiEGPT</ span >
259
- < button id ="close-chat "> ×</ button >
260
- </ div >
261
- < div id ="chat-messages "> </ div >
262
- < div id ="chat-input ">
263
- < input type ="text " id ="message-input " placeholder ="Type your message... ">
264
- < button id ="send-button "> Send</ button >
265
- </ div >
266
- </ div >
267
- < button id ="chat-button "> 💬</ button >
268
-
269
- < style >
270
- # chat-button {
271
- position : fixed;
272
- bottom : 20px ;
273
- right : 20px ;
274
- width : 50px ;
275
- height : 50px ;
276
- border-radius : 50% ;
277
- background : # 2B3D62 ;
278
- color : white;
279
- border : none;
280
- cursor : pointer;
281
- font-size : 24px ;
282
- box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.3 );
283
- z-index : 1000 ;
284
- }
285
- # chat-button : hover {
286
- background : # 335593 ; /* Lighter shade on hover */
287
- }
288
-
289
- # chat-container {
290
- position : fixed;
291
- bottom : 80px ;
292
- right : 20px ;
293
- width : 300px ;
294
- height : 400px ;
295
- background : white;
296
- border-radius : 10px ;
297
- box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.3 );
298
- display : none;
299
- flex-direction : column;
300
- z-index : 1000 ;
301
- }
302
-
303
- # chat-header {
304
- background : # 2B3D62 ;
305
- color : white;
306
- padding : 10px ;
307
- border-radius : 10px 10px 0 0 ;
308
- display : flex;
309
- justify-content : space-between;
310
- align-items : center;
311
- }
312
-
313
- # close-chat {
314
- background : none;
315
- border : none;
316
- color : white;
317
- font-size : 20px ;
318
- cursor : pointer;
319
- }
320
-
321
- # chat-messages {
322
- flex : 1 ;
323
- padding : 10px ;
324
- overflow-y : auto;
325
- background : # f5f5f5 ;
326
- }
327
-
328
- # chat-input {
329
- display : flex;
330
- padding : 10px ;
331
- border-top : 1px solid # ddd ;
332
- }
333
-
334
- # message-input {
335
- flex : 1 ;
336
- padding : 8px ;
337
- border : 1px solid # ddd ;
338
- border-radius : 4px ;
339
- margin-right : 5px ;
340
- }
341
-
342
- # send-button {
343
- padding : 8px 15px ;
344
- background : # 2B3D62 ;
345
- color : white;
346
- border : none;
347
- border-radius : 4px ;
348
- cursor : pointer;
349
- }
350
- # send-button : hover {
351
- background : # 335593 ; /* Lighter shade on hover */
352
- }
353
-
354
- .message {
355
- margin-bottom : 10px ;
356
- padding : 8px ;
357
- border-radius : 5px ;
358
- max-width : 80% ;
359
- }
360
-
361
- .user-message {
362
- background : # 2B3D62 ;
363
- color : white;
364
- margin-left : auto;
365
- }
366
-
367
- .bot-message {
368
- background : # e0e0e0 ;
369
- margin-right : auto;
370
- }
371
- </ style >
372
-
373
-
374
- < script >
375
- // PiEGPT
376
- // Chat toggle functionality
377
- const chatButton = document . getElementById ( 'chat-button' ) ;
378
- const chatContainer = document . getElementById ( 'chat-container' ) ;
379
- const closeChat = document . getElementById ( 'close-chat' ) ;
380
-
381
- chatButton . addEventListener ( 'click' , ( ) => {
382
- if ( chatContainer . style . display === 'none' || ! chatContainer . style . display ) {
383
- chatContainer . style . display = 'flex' ;
384
- } else {
385
- chatContainer . style . display = 'none' ;
386
- }
387
- } ) ;
388
-
389
- closeChat . addEventListener ( 'click' , ( ) => {
390
- chatContainer . style . display = 'none' ;
391
- } ) ;
392
-
393
- // Chat functionality
394
- const messageInput = document . getElementById ( 'message-input' ) ;
395
- const sendButton = document . getElementById ( 'send-button' ) ;
396
- const chatMessages = document . getElementById ( 'chat-messages' ) ;
397
-
398
- function addMessage ( text , isUser = true ) {
399
- const messageDiv = document . createElement ( 'div' ) ;
400
- messageDiv . className = `message ${ isUser ? 'user-message' : 'bot-message' } ` ;
401
- messageDiv . textContent = text ;
402
- chatMessages . appendChild ( messageDiv ) ;
403
- chatMessages . scrollTop = chatMessages . scrollHeight ;
404
- }
405
-
406
- function handleSendMessage ( ) {
407
- const message = messageInput . value . trim ( ) ; // Get the user message
408
- if ( message ) {
409
- addMessage ( message , true ) ; // Add the user's message to the chat
410
- messageInput . value = '' ;
411
-
412
- // Send the message to the backend
413
- fetch ( 'http://localhost:8000/ask' , {
414
- method : 'POST' ,
415
- headers : {
416
- 'Content-Type' : 'application/json' ,
417
- } ,
418
- body : JSON . stringify ( { question : message } ) ,
419
- } )
420
- . then ( response => {
421
- if ( ! response . ok ) {
422
- throw new Error ( 'Network response was not ok' ) ;
423
- }
424
- return response . json ( ) ; // Expecting JSON response from the backend
425
- } )
426
- . then ( data => {
427
- if ( data . response ) {
428
- addMessage ( data . response , false ) ; // Add the response to the chat
429
- } else {
430
- addMessage ( "Sorry, there was an error in the AI response." , false ) ;
431
- }
432
- } )
433
- . catch ( error => {
434
- console . error ( 'Error:' , error ) ;
435
- addMessage ( "Sorry, there was an error fetching the response." , false ) ;
436
- } ) ;
437
- }
438
- }
439
-
440
- sendButton . addEventListener ( 'click' , handleSendMessage ) ;
441
- messageInput . addEventListener ( 'keypress' , ( e ) => {
442
- if ( e . key === 'Enter' ) handleSendMessage ( ) ;
443
- } ) ;
444
- </ script >
445
-
446
255
</ body >
447
256
448
- </ html >
257
+ </ html >
0 commit comments