improve support for qwen

AiServer/wwwroot/css/app.css

@@ -1289,6 +1289,10 @@ select{
   margin-top: 0.5rem;
 }
 
+.mt-24 {
+  margin-top: 6rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1317,10 +1321,6 @@ select{
   margin-top: auto;
 }
 
-.mt-24 {
-  margin-top: 6rem;
-}
-
 .block {
   display: block;
 }
@@ -1573,6 +1573,10 @@ select{
   max-width: 42rem;
 }
 
+.max-w-5xl {
+  max-width: 64rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1609,14 +1613,6 @@ select{
   max-width: 20rem;
 }
 
-.max-w-6xl {
-  max-width: 72rem;
-}
-
-.max-w-5xl {
-  max-width: 64rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2343,11 +2339,6 @@ select{
   background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
 }
 
-.bg-indigo-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
-}
-
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
@@ -2564,11 +2555,6 @@ select{
   padding-right: 0.75rem;
 }
 
-.px-3\.5 {
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2660,10 +2646,6 @@ select{
   padding-bottom: 2.5rem;
 }
 
-.pb-16 {
-  padding-bottom: 4rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2772,10 +2754,6 @@ select{
   padding-top: 0.375rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
-}
-
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -2968,6 +2946,11 @@ select{
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -3492,6 +3475,14 @@ select{
   a-z-a--z: ;
 }
 
+.\[index\:number\] {
+  index: number;
+}
+
+.\[index\:string\] {
+  index: string;
+}
+
 .file\:mr-4::file-selector-button {
   margin-right: 1rem;
 }
@@ -3637,11 +3628,6 @@ select{
   background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-indigo-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-indigo-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
@@ -3948,10 +3934,6 @@ select{
   outline-color: #000;
 }
 
-.focus-visible\:outline-indigo-400:focus-visible {
-  outline-color: #818cf8;
-}
-
 .focus-visible\:outline-indigo-600:focus-visible {
   outline-color: #4f46e5;
 }
@@ -4689,10 +4671,6 @@ select{
     margin-top: 5rem;
   }
 
-  .sm\:mt-5 {
-    margin-top: 1.25rem;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -4895,11 +4873,6 @@ select{
     line-height: 1.25rem;
   }
 
-  .sm\:text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-
   .sm\:duration-700 {
     transition-duration: 700ms;
   }
@@ -5093,10 +5066,6 @@ select{
     margin-top: 6rem;
   }
 
-  .lg\:mt-6 {
-    margin-top: 1.5rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -5141,10 +5110,6 @@ select{
     max-width: 768px;
   }
 
-  .lg\:max-w-xl {
-    max-width: 36rem;
-  }
-
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -5204,18 +5169,9 @@ select{
     padding-top: 1rem;
   }
 
-  .lg\:pt-8 {
-    padding-top: 2rem;
-  }
-
   .lg\:text-center {
     text-align: center;
   }
-
-  .lg\:text-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
 }
 
 @media (min-width: 1280px) {
@@ -5257,16 +5213,6 @@ select{
     padding-left: 1.25rem;
     padding-right: 1.25rem;
   }
-
-  .xl\:text-6xl {
-    font-size: 3.75rem;
-    line-height: 1;
-  }
-
-  .xl\:text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
 }
 
 @media (min-width: 1536px) {

AiServer/wwwroot/mjs/components/Chat.mjs

@@ -55,10 +55,10 @@ export default {
                 <div v-if="thread" class="flex flex-col">
                     <template v-for="message in thread.messages">
                         <div v-if="message.role === 'system'" data-message="system" class="rounded-lg py-2 px-4 mb-4 system bg-green-50 border-green-50">
-                          <div v-html="marked.parse(message?.content ?? '')" class="prose"></div>
+                          <div v-html="renderMarkdown(message?.content ?? '')" class="prose"></div>
                         </div>
                         <div v-else-if="message.role === 'assistant'" data-message="assistant" class="relative border border-indigo-600/25 rounded-lg p-2 mb-4 overflow-hidden">
-                          <div v-html="marked.parse(message?.content ?? '')" class="prose"></div>
+                          <div v-html="renderMarkdown(message?.content ?? '')" class="prose"></div>
                         </div>
                         <div v-else data-message="user" class="rounded-lg py-2 px-4 mb-4 user bg-gray-100 border border-gray-100 self-end">
                           <div v-html="message.content" class="prose"></div>
@@ -67,8 +67,8 @@ export default {
                     <div v-if="client.loading.value" class="mx-auto pt-4">
                         <Loading>Asking {{prefs.model}}...</Loading>
                     </div>
-                    <ErrorSummary :status="error" class="pt-4" />
                 </div>
+                <ErrorSummary :status="error" class="pt-4" />
             </div>
         </div>
         
@@ -331,6 +331,16 @@ export default {
             }
         }
 
+        function renderMarkdown(content) {
+            if (content) {
+                console.log(content)
+                content = content
+                    .replaceAll(`\\[ \\boxed{`,'\n<span class="inline-block text-xl text-blue-500 bg-blue-50 px-3 py-1 rounded">')
+                    .replaceAll('} \\]','</span>\n')
+            }
+            return marked.parse(content)
+        }
+
         watch(() => routes.id, updated)
         watch(() => selectedPrompt.value, () => {
             prefs.value.prompt = selectedPrompt.value?.name
@@ -367,7 +377,7 @@ export default {
             storage, client, routes, refUi, showChatMenu, renameChatId, prefs, validPrompt, 
             thread, history, models, prompts, error, systemPrompt, showSystemPrompt, 
             selectedPrompt, refMessage,
-            marked, send, selectPrompt, saveHistoryItem, removeHistoryItem,
+            renderMarkdown, send, selectPrompt, saveHistoryItem, removeHistoryItem,
         }
     }
 }

AiServer/wwwroot/mjs/markdown.mjs

@@ -1,15 +1,46 @@
 import { Marked } from "../lib/mjs/marked.mjs"
 import hljs from "../lib/mjs/highlight.mjs"
 
-export const marked = new Marked(
-    markedHighlight({
-        langPrefix: 'hljs language-',
-        highlight(code, lang, info) {
-            const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-            return hljs.highlight(code, { language }).value
+export const marked = (() => {
+    const ret = new Marked(
+        markedHighlight({
+            langPrefix: 'hljs language-',
+            highlight(code, lang, info) {
+                const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+                return hljs.highlight(code, { language }).value
+            }
+        })
+    )
+    //ret.use({ extensions: [divExtension()] })
+    return ret
+})();
+
+// Custom extension to handle class-based div-like syntax
+function divExtension() {
+    const pattern = /^:::\{\.([^}]+)}\n([\s\S]*?):::$/;
+    return {
+        name: 'div',
+        level: 'block',
+        start(src) {
+            return src.match(pattern)?.index;
+        },
+        tokenizer(src) {
+            const match = src.match(pattern);
+            if (match) {
+                return {
+                    type: 'div',
+                    raw: match[0],
+                    classes: match[1].split('.').filter(Boolean),
+                    text: match[2]
+                };
+            }
+        },
+        renderer(token) {
+            const classes = token.classes.join(' ');
+            return `<div class="${classes}">${marked.parse(token.text)}</div>`;
         }
-    })
-)
+    };
+}
 
 // export async function renderMarkdown(body) {
 //     const rawHtml = marked.parse(body)