basic markdown support

This commit is contained in:
Xuan Son Nguyen 2024-11-05 14:24:25 +01:00
parent 191887b771
commit 7f3daf09f3
4 changed files with 71 additions and 42 deletions

View file

@ -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

File diff suppressed because one or more lines are too long

View file

@ -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: [],

View file

@ -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"));
}