Hugging Face's logo

Spaces:
kokofixcomputers
/
nexuschat
Running

App Files Community
kokofixcomputers commited on
Commit
af6a5a0
·
verified ·
1 Parent(s): afa9f64

add the markdown funcinality not just css to replace markdown in assistant message into markdown styled with css - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +46 -8
index.html CHANGED
@@ -5,6 +5,9 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>NexusChat - Advanced AI Client</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script>
10
  tailwind.config = {
@@ -73,7 +76,17 @@
73
  transition: all 0.3s ease;
74
  }
75
 
76
- /* Code block styling */
 
 
 
 
 
 
 
 
 
 
77
  .prose code {
78
  background-color: rgba(0,0,0,0.1);
79
  padding: 0.2em 0.4em;
@@ -83,6 +96,25 @@
83
  .dark .prose code {
84
  background-color: rgba(255,255,255,0.1);
85
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  </style>
87
  </head>
88
  <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen">
@@ -339,6 +371,16 @@
339
 
340
  // Initialize
341
  function init() {
 
 
 
 
 
 
 
 
 
 
342
  // Load custom models
343
  customModels.forEach(model => {
344
  models.push({ ...model, type: 'custom' });
@@ -524,7 +566,7 @@
524
  <i class="fas fa-robot"></i>
525
  </div>
526
  <div class="max-w-[80%] bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm relative group">
527
- <div class="prose dark:prose-invert whitespace-pre-wrap">${msg.content.replace(/\n/g, '<br>')}</div>
528
  <div class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
529
  <button class="message-action bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-1 rounded text-gray-700 dark:text-gray-300" data-action="regenerate" title="Regenerate">
530
  <i class="fas fa-sync-alt text-xs"></i>
@@ -749,12 +791,8 @@
749
  const parsed = JSON.parse(data);
750
  const content = parsed.choices?.[0]?.delta?.content || '';
751
  result += content;
752
- // Replace newlines with <br> and preserve markdown formatting
753
- contentElement.innerHTML = result
754
- .replace(/\n/g, '<br>')
755
- .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
756
- .replace(/\*(.*?)\*/g, '<em>$1</em>')
757
- .replace(/`(.*?)`/g, '<code>$1</code>');
758
  chatArea.scrollTop = chatArea.scrollHeight;
759
  } catch (e) {
760
  console.error('Error parsing stream data:', e);
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>NexusChat - Advanced AI Client</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
11
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
  <script>
13
  tailwind.config = {
 
76
  transition: all 0.3s ease;
77
  }
78
 
79
+ /* Markdown styling */
80
+ .prose pre {
81
+ background-color: rgba(0,0,0,0.05);
82
+ padding: 1em;
83
+ border-radius: 0.5em;
84
+ overflow-x: auto;
85
+ margin: 1em 0;
86
+ }
87
+ .dark .prose pre {
88
+ background-color: rgba(255,255,255,0.05);
89
+ }
90
  .prose code {
91
  background-color: rgba(0,0,0,0.1);
92
  padding: 0.2em 0.4em;
 
96
  .dark .prose code {
97
  background-color: rgba(255,255,255,0.1);
98
  }
99
+ .prose ul, .prose ol {
100
+ padding-left: 1.5em;
101
+ margin: 0.5em 0;
102
+ }
103
+ .prose li {
104
+ margin: 0.25em 0;
105
+ }
106
+ .prose table {
107
+ border-collapse: collapse;
108
+ width: 100%;
109
+ margin: 1em 0;
110
+ }
111
+ .prose th, .prose td {
112
+ border: 1px solid rgba(0,0,0,0.1);
113
+ padding: 0.5em;
114
+ }
115
+ .dark .prose th, .dark .prose td {
116
+ border-color: rgba(255,255,255,0.1);
117
+ }
118
  </style>
119
  </head>
120
  <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen">
 
371
 
372
  // Initialize
373
  function init() {
374
+ // Configure marked.js
375
+ marked.setOptions({
376
+ breaks: true,
377
+ gfm: true,
378
+ highlight: function(code, lang) {
379
+ const language = hljs.getLanguage(lang) ? lang : 'plaintext';
380
+ return hljs.highlight(code, { language }).value;
381
+ }
382
+ });
383
+
384
  // Load custom models
385
  customModels.forEach(model => {
386
  models.push({ ...model, type: 'custom' });
 
566
  <i class="fas fa-robot"></i>
567
  </div>
568
  <div class="max-w-[80%] bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm relative group">
569
+ <div class="prose dark:prose-invert max-w-none break-words">${marked.parse(msg.content)}</div>
570
  <div class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
571
  <button class="message-action bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-1 rounded text-gray-700 dark:text-gray-300" data-action="regenerate" title="Regenerate">
572
  <i class="fas fa-sync-alt text-xs"></i>
 
791
  const parsed = JSON.parse(data);
792
  const content = parsed.choices?.[0]?.delta?.content || '';
793
  result += content;
794
+ // Process markdown in streaming response
795
+ contentElement.innerHTML = marked.parse(result);
 
 
 
 
796
  chatArea.scrollTop = chatArea.scrollHeight;
797
  } catch (e) {
798
  console.error('Error parsing stream data:', e);