basic markdown support

ngxson · ngxson · commit 7f3daf09f302 · 2024-11-05T14:24:25.000+01:00
diff --git a/examples/server/deps.sh b/examples/server/deps.sh
@@ -9,7 +9,7 @@ echo "download js bundle files"
 
 # Note for contributors: Always pin to a specific version "maj.min.patch" to avoid breaking the CI
 
-curl -L https://cdn.tailwindcss.com/3.4.14 > $PUBLIC/deps_tailwindcss.js
+curl -L https://cdn.tailwindcss.com/3.4.14?plugins=forms,typography > $PUBLIC/deps_tailwindcss.js
 echo >> $PUBLIC/deps_tailwindcss.js # add newline
 
 curl -L https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.12.14/styled.min.css > $PUBLIC/deps_daisyui.min.css
diff --git a/examples/server/public/deps_tailwindcss.js b/examples/server/public/deps_tailwindcss.js
diff --git a/examples/server/public/index.html b/examples/server/public/index.html
@@ -5,9 +5,19 @@
   <meta name="color-scheme" content="light dark">
   <title>🦙 llama.cpp - chat</title>
 
-  <!-- TODO: embed dependencies into cpp -->
+  <!-- Note: dependencies can de updated using ./deps.sh script -->
   <link href="./deps_daisyui.min.css" rel="stylesheet" type="text/css" />
   <script src="./deps_tailwindcss.js"></script>
+  <script>
+    tailwind.config = {};
+  </script>
+  <style type="text/tailwindcss">
+    .markdown {
+      h1, h2, h3, h4, h5, h6, ul, ol, li { all: revert; }
+      pre { @apply whitespace-pre-wrap; }
+      /* TODO: fix table */
+    }
+  </style>
 </head>
 
 <body>
@@ -53,18 +63,18 @@
           'chat-end': msg.role === 'user',
         }">
           <div :class="{
-            'chat-bubble': true,
+            'chat-bubble markdown': true,
             'chat-bubble-primary': msg.role === 'user',
           }">
-            <p v-for="line in msg.content.split('\n')">{{ line }}</p>
+            <vue-markdown :source="msg.content" />
           </div>
         </div>
 
         <!-- pending assistant message -->
         <div id="pending-msg" class="chat chat-start">
-          <div v-if="pendingMsg" class="chat-bubble">
+          <div v-if="pendingMsg" class="chat-bubble markdown">
             <span v-if="!pendingMsg.content" class="loading loading-dots loading-md"></span>
-            <p v-else v-for="line in pendingMsg.content.split('\n')">{{ line }}</p>
+            <vue-markdown v-else :source="pendingMsg.content" />
           </div>
         </div>
       </div>
@@ -84,13 +94,30 @@
     </div>
   </div>
 
+  <script src="./deps_markdown-it.js"></script>
   <script type="module">
-    import { createApp } from './deps_vue.esm-browser.js';
+    import { createApp, defineComponent, shallowRef, computed, h } from './deps_vue.esm-browser.js';
     import { llama } from './completion.js';
 
     const BASE_URL = (new URL('.', document.baseURI).href).toString();
 
+    // markdown support
+    const VueMarkdown = defineComponent(
+      (props) => {
+        const md = shallowRef(new markdownit(props.options ?? {}));
+        for (const plugin of props.plugins ?? []) {
+          md.value.use(plugin);
+        }
+        const content = computed(() => md.value.render(props.source));
+        return () => h("div", { innerHTML: content.value });
+      },
+      { props: ["source", "options", "plugins"] }
+    );
+
     createApp({
+      components: {
+        VueMarkdown,
+      },
       data() {
         return {
           messages: [],
diff --git a/examples/server/server.cpp b/examples/server/server.cpp
@@ -3125,7 +3125,7 @@ int main(int argc, char ** argv) {
         svr->Get("/",                        handle_static_file(index_html, index_html_len, "text/html; charset=utf-8"));
         svr->Get("/completion.js",           handle_static_file(completion_js, completion_js_len, "text/javascript; charset=utf-8"));
         svr->Get("/deps_daisyui.min.css",    handle_static_file(deps_daisyui_min_css, deps_daisyui_min_css_len, "text/css; charset=utf-8"));
-        svr->Get("/deps_markdown-it.js",     handle_static_file(deps_markdown_it_js, deps_daisyui_min_css_len, "text/javascript; charset=utf-8"));
+        svr->Get("/deps_markdown-it.js",     handle_static_file(deps_markdown_it_js, deps_markdown_it_js_len, "text/javascript; charset=utf-8"));
         svr->Get("/deps_tailwindcss.js",     handle_static_file(deps_tailwindcss_js, deps_tailwindcss_js_len, "text/javascript; charset=utf-8"));
         svr->Get("/deps_vue.esm-browser.js", handle_static_file(deps_vue_esm_browser_js, deps_vue_esm_browser_js_len, "text/javascript; charset=utf-8"));
     }

Original file line number	Diff line number	Diff line change
`@@ -3125,7 +3125,7 @@ int main(int argc, char ** argv) {`
`3125`	`3125`	`svr->Get("/", handle_static_file(index_html, index_html_len, "text/html; charset=utf-8"));`
`3126`	`3126`	`svr->Get("/completion.js", handle_static_file(completion_js, completion_js_len, "text/javascript; charset=utf-8"));`
`3127`	`3127`	`svr->Get("/deps_daisyui.min.css", handle_static_file(deps_daisyui_min_css, deps_daisyui_min_css_len, "text/css; charset=utf-8"));`
`3128`		`- svr->Get("/deps_markdown-it.js", handle_static_file(deps_markdown_it_js, deps_daisyui_min_css_len, "text/javascript; charset=utf-8"));`
	`3128`	`+ svr->Get("/deps_markdown-it.js", handle_static_file(deps_markdown_it_js, deps_markdown_it_js_len, "text/javascript; charset=utf-8"));`
`3129`	`3129`	`svr->Get("/deps_tailwindcss.js", handle_static_file(deps_tailwindcss_js, deps_tailwindcss_js_len, "text/javascript; charset=utf-8"));`
`3130`	`3130`	`svr->Get("/deps_vue.esm-browser.js", handle_static_file(deps_vue_esm_browser_js, deps_vue_esm_browser_js_len, "text/javascript; charset=utf-8"));`
`3131`	`3131`	`}`