ui: adding zeromd for markdown handling

examples/server/public/index.html

@@ -7,9 +7,12 @@
   <title>llama.cpp - chat</title>
 
   <style>
+    * {
+      box-sizing: border-box;
+    }
+
     body {
       font-family: system-ui;
-      font-size: 90%;
       width: 100%;
     }
 
@@ -128,7 +131,6 @@
     }
 
     code {
-      font-family: monospace;
       padding: 0.1em 0.3em;
       border-radius: 3px;
     }
@@ -221,15 +223,13 @@
       overflow: auto;
     }
 
-    .response p {
+    .response>p {
       padding: 0.5em;
       margin: 0;
+      margin-bottom: 0.5em;
       border-radius: 0.5em;
     }
 
-    .response p:nth-child(even) {
-      background-color: rgba(242, 242, 242, 0.5);
-    }
 
     header,
     footer {
@@ -256,6 +256,7 @@
       padding: 0.5em;
       box-sizing: border-box;
     }
+
     textarea[name=prompt] {
       height: 20em;
       margin: 1em 0;
@@ -296,6 +297,27 @@
       }
     }
   </style>
+  <script>
+    window.ZeroMdConfig = {
+      markedUrl: 'https://cdn.jsdelivr.net/gh/markedjs/marked@4/marked.min.js',
+      prismUrl: [
+        ['https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js', 'data-manual'],
+        'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
+      ],
+      cssUrls: window.matchMedia("(prefers-color-scheme: light)").matches
+        ? [
+          'https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.0/github-markdown.min.css',
+          'https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-light.css'
+        ]
+        : [
+          'https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.0/github-markdown.min.css',
+          'https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-dark.css'
+        ],
+      // Host styles that apply to each instance
+      hostCss: ':host{display:block;position:relative;contain:content;}:host([hidden]){display:none;}'
+    }
+  </script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@2.5.3/dist/zero-md.min.js"></script>
 
   <script type="module">
     import {
@@ -804,7 +826,6 @@
           .then(res => res.json())
           .then(res => {
             prompts.value = res;
-              console.log('updated prompts');
           })
       }, [])
 
@@ -848,7 +869,7 @@
               <label htmlFor="prompt">Prompt</label>
               <select id="promptlist" onchange=${handlePromptChange}>
                 <option>Select a Custom prompt</option>
-                ${prompts.value.map(prompt => {
+                ${prompts.value.sort((a, b) => a.act.localeCompare(b.act)).map(prompt => {
             return html`
                     <option value="${prompt.prompt}">${prompt.act}</option>
                   `;
@@ -1024,19 +1045,7 @@
 
     // poor mans markdown replacement
     const Markdownish = (params) => {
-      const md = params.text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/^#{1,6} (.*)$/gim, '<h3>$1</h3>')
-        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-        .replace(/__(.*?)__/g, '<strong>$1</strong>')
-        .replace(/\*(.*?)\*/g, '<em>$1</em>')
-        .replace(/_(.*?)_/g, '<em>$1</em>')
-        .replace(/```.*?\n([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
-        .replace(/`(.*?)`/g, '<code>$1</code>')
-        .replace(/\n/gim, '<br />');
-      return html`<span dangerouslySetInnerHTML=${{ __html: md }} />`;
+      return html`<zero-md>  <script type="text/markdown"  dangerouslySetInnerHTML=${{ __html: params.text }} /></zero-md>`;
     };
 
     const ModelGenerationInfo = (params) => {