Hugging Face's logo

Spaces:
Al1Abdullah
/
atomcamp-chatbot
Sleeping

App Files Community
Ali Abdullah commited on
Commit
3ceebe8
·
verified ·
1 Parent(s): 5ec4e09

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +32 -40
app.py CHANGED
@@ -217,7 +217,7 @@ def index():
217
 
218
  .title-bubble {
219
  width: 100%;
220
- max-width: 100%;
221
  padding: 0 1rem;
222
  }
223
 
@@ -295,13 +295,13 @@ def index():
295
  }
296
 
297
  .chat-container {
298
- width: 100%;
299
- margin: 0;
300
- padding: 0 1rem 8rem 1rem;
301
- flex: 1;
302
- overflow-y: auto;
303
- height: calc(100vh - 300px);
304
-
305
  }
306
 
307
  .welcome-screen {
@@ -471,9 +471,8 @@ def index():
471
  }
472
 
473
  .input-container {
474
- max-width: 720px;
475
  margin: 0 auto;
476
- width: 100%;
477
  }
478
 
479
  .input-form {
@@ -481,16 +480,13 @@ def index():
481
  }
482
 
483
  .input-wrapper {
484
- position: relative;
485
- background: #4b5563;
486
- border-radius: 1.5rem;
487
- overflow: hidden;
488
- padding: 0.25rem 0.75rem;
489
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
490
-
491
  }
492
 
493
-
494
  .message-input {
495
  width: 100%;
496
  padding: 0.875rem 1.25rem;
@@ -517,8 +513,8 @@ def index():
517
  color: white;
518
  border: none;
519
  border-radius: 50%;
520
- width: 2.25rem;
521
- height: 2.25rem;
522
  display: flex;
523
  align-items: center;
524
  justify-content: center;
@@ -604,7 +600,7 @@ def index():
604
  <body>
605
  <div class="header">
606
  <div class="logo">
607
- <img src="/static/atomcamp_logo.png" alt="Atomcamp Logo" style="height: 48px;">
608
  </div>
609
 
610
  <div class="title-bubble">
@@ -708,7 +704,7 @@ def index():
708
 
709
  function updateCharCount() {
710
  const count = messageInput.value.length;
711
- charCount.textContent = `${count}/1000`;
712
  }
713
 
714
  async function handleSubmit(e) {
@@ -752,13 +748,13 @@ def index():
752
  }
753
 
754
  const messageDiv = document.createElement('div');
755
- messageDiv.className = `message ${role}`;
756
 
757
  const messageContent = document.createElement('div');
758
  messageContent.className = 'message-content';
759
 
760
  const avatar = document.createElement('div');
761
- avatar.className = `avatar ${role}`;
762
 
763
  if (role === 'user') {
764
  avatar.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>';
@@ -770,11 +766,11 @@ def index():
770
  bubble.className = 'message-bubble';
771
 
772
  if (role === 'user') {
773
- bubble.innerHTML = `<div class="message-text">${content}</div>`;
774
  messageContent.appendChild(bubble);
775
  messageContent.appendChild(avatar);
776
  } else {
777
- bubble.innerHTML = `<div class="message-formatted">${formatMessageContent(content)}</div>`;
778
  messageContent.appendChild(avatar);
779
  messageContent.appendChild(bubble);
780
  }
@@ -787,26 +783,22 @@ def index():
787
  }
788
 
789
  function formatMessageContent(content) {
790
- return content.split('\n').map(line => {
791
  if (line.trim().startsWith('•') || line.trim().startsWith('-')) {
792
- return `
793
- <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
794
  <span style="color: #16a34a; margin-right: 0.5rem; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500;">•</span>
795
- <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^[•-]\s*/, '')}</span>
796
- </div>
797
- `;
798
- } else if (/^\d+\./.test(line.trim())) {
799
- const match = line.match(/^\d+\./);
800
- return `
801
- <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
802
  <span style="color: #16a34a; margin-right: 0.5rem; font-weight: 600; font-size: 0.875rem;">${match ? match[0] : ''}</span>
803
- <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^\d+\.\s*/, '')}</span>
804
- </div>
805
- `;
806
  } else if (line.trim() === '') {
807
  return '<br>';
808
  } else {
809
- return `<p style="margin-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.5;">${line}</p>`;
810
  }
811
  }).join('');
812
  }
 
217
 
218
  .title-bubble {
219
  width: 100%;
220
+ max-width: 64rem;
221
  padding: 0 1rem;
222
  }
223
 
 
295
  }
296
 
297
  .chat-container {
298
+ max-width: 64rem;
299
+ margin: 0 auto;
300
+ padding: 0 1rem;
301
+ padding-bottom: 8rem;
302
+ flex: 1;
303
+ overflow-y: auto;
304
+ height: calc(100vh - 300px);
305
  }
306
 
307
  .welcome-screen {
 
471
  }
472
 
473
  .input-container {
474
+ max-width: 64rem;
475
  margin: 0 auto;
 
476
  }
477
 
478
  .input-form {
 
480
  }
481
 
482
  .input-wrapper {
483
+ position: relative;
484
+ background: #4b5563;
485
+ border-radius: 9999px;
486
+ overflow: hidden;
487
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 
 
488
  }
489
 
 
490
  .message-input {
491
  width: 100%;
492
  padding: 0.875rem 1.25rem;
 
513
  color: white;
514
  border: none;
515
  border-radius: 50%;
516
+ width: 2.5rem;
517
+ height: 2.5rem;
518
  display: flex;
519
  align-items: center;
520
  justify-content: center;
 
600
  <body>
601
  <div class="header">
602
  <div class="logo">
603
+ <img src="/static/atomcamp_logo.png" alt="Atomcamp Logo" class="logo-image" style="height: 48px;">
604
  </div>
605
 
606
  <div class="title-bubble">
 
704
 
705
  function updateCharCount() {
706
  const count = messageInput.value.length;
707
+ charCount.textContent = ${count}/1000;
708
  }
709
 
710
  async function handleSubmit(e) {
 
748
  }
749
 
750
  const messageDiv = document.createElement('div');
751
+ messageDiv.className = message ${role};
752
 
753
  const messageContent = document.createElement('div');
754
  messageContent.className = 'message-content';
755
 
756
  const avatar = document.createElement('div');
757
+ avatar.className = avatar ${role};
758
 
759
  if (role === 'user') {
760
  avatar.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>';
 
766
  bubble.className = 'message-bubble';
767
 
768
  if (role === 'user') {
769
+ bubble.innerHTML = <div class="message-text">${content}</div>;
770
  messageContent.appendChild(bubble);
771
  messageContent.appendChild(avatar);
772
  } else {
773
+ bubble.innerHTML = <div class="message-formatted">${formatMessageContent(content)}</div>;
774
  messageContent.appendChild(avatar);
775
  messageContent.appendChild(bubble);
776
  }
 
783
  }
784
 
785
  function formatMessageContent(content) {
786
+ return content.split('\\n').map(line => {
787
  if (line.trim().startsWith('•') || line.trim().startsWith('-')) {
788
+ return <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
 
789
  <span style="color: #16a34a; margin-right: 0.5rem; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500;">•</span>
790
+ <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^[•-]\\s*/, '')}</span>
791
+ </div>;
792
+ } else if (/^\\d+\\./.test(line.trim())) {
793
+ const match = line.match(/^\\d+\\./);
794
+ return <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
 
 
795
  <span style="color: #16a34a; margin-right: 0.5rem; font-weight: 600; font-size: 0.875rem;">${match ? match[0] : ''}</span>
796
+ <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^\\d+\\.\\s*/, '')}</span>
797
+ </div>;
 
798
  } else if (line.trim() === '') {
799
  return '<br>';
800
  } else {
801
+ return <p style="margin-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.5;">${line}</p>;
802
  }
803
  }).join('');
804
  }