forked from open-webui/open-webui
feat: message latex support
This commit is contained in:
parent
fa9467f907
commit
a1544dbc97
4 changed files with 75 additions and 3 deletions
39
package-lock.json
generated
39
package-lock.json
generated
|
@ -13,6 +13,7 @@
|
||||||
"highlight.js": "^11.9.0",
|
"highlight.js": "^11.9.0",
|
||||||
"http-server": "^14.1.1",
|
"http-server": "^14.1.1",
|
||||||
"idb": "^7.1.1",
|
"idb": "^7.1.1",
|
||||||
|
"katex": "^0.16.9",
|
||||||
"marked": "^9.1.0",
|
"marked": "^9.1.0",
|
||||||
"svelte-french-toast": "^1.2.0",
|
"svelte-french-toast": "^1.2.0",
|
||||||
"uuid": "^9.0.1"
|
"uuid": "^9.0.1"
|
||||||
|
@ -2556,6 +2557,29 @@
|
||||||
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
|
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/katex": {
|
||||||
|
"version": "0.16.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
|
||||||
|
"integrity": "sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==",
|
||||||
|
"funding": [
|
||||||
|
"https://opencollective.com/katex",
|
||||||
|
"https://github.com/sponsors/katex"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"commander": "^8.3.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"katex": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/katex/node_modules/commander": {
|
||||||
|
"version": "8.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
|
||||||
|
"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 12"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/keyv": {
|
"node_modules/keyv": {
|
||||||
"version": "4.5.4",
|
"version": "4.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||||
|
@ -5913,6 +5937,21 @@
|
||||||
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
|
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"katex": {
|
||||||
|
"version": "0.16.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
|
||||||
|
"integrity": "sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==",
|
||||||
|
"requires": {
|
||||||
|
"commander": "^8.3.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"commander": {
|
||||||
|
"version": "8.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
|
||||||
|
"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"keyv": {
|
"keyv": {
|
||||||
"version": "4.5.4",
|
"version": "4.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||||
|
|
|
@ -44,6 +44,7 @@
|
||||||
"highlight.js": "^11.9.0",
|
"highlight.js": "^11.9.0",
|
||||||
"http-server": "^14.1.1",
|
"http-server": "^14.1.1",
|
||||||
"idb": "^7.1.1",
|
"idb": "^7.1.1",
|
||||||
|
"katex": "^0.16.9",
|
||||||
"marked": "^9.1.0",
|
"marked": "^9.1.0",
|
||||||
"svelte-french-toast": "^1.2.0",
|
"svelte-french-toast": "^1.2.0",
|
||||||
"uuid": "^9.0.1"
|
"uuid": "^9.0.1"
|
||||||
|
|
|
@ -9,6 +9,10 @@ html {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
math {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.hljs {
|
.hljs {
|
||||||
@apply rounded-lg;
|
@apply rounded-lg;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import toast from 'svelte-french-toast';
|
|
||||||
import { openDB, deleteDB } from 'idb';
|
import { openDB, deleteDB } from 'idb';
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
import { marked } from 'marked';
|
import { marked } from 'marked';
|
||||||
|
@ -7,9 +6,12 @@
|
||||||
const { saveAs } = fileSaver;
|
const { saveAs } = fileSaver;
|
||||||
import hljs from 'highlight.js';
|
import hljs from 'highlight.js';
|
||||||
import 'highlight.js/styles/github-dark.min.css';
|
import 'highlight.js/styles/github-dark.min.css';
|
||||||
|
import katex from 'katex';
|
||||||
|
import auto_render from 'katex/dist/contrib/auto-render.mjs';
|
||||||
|
import toast from 'svelte-french-toast';
|
||||||
|
|
||||||
import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
|
import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
|
||||||
import { onMount, tick } from 'svelte';
|
import { onMount, tick } from 'svelte';
|
||||||
|
|
||||||
import Navbar from '$lib/components/layout/Navbar.svelte';
|
import Navbar from '$lib/components/layout/Navbar.svelte';
|
||||||
import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
|
import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
|
||||||
|
|
||||||
|
@ -151,6 +153,27 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const renderLatex = () => {
|
||||||
|
let chatMessageElements = document.getElementsByClassName('chat-assistant');
|
||||||
|
// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];
|
||||||
|
|
||||||
|
for (const element of chatMessageElements) {
|
||||||
|
auto_render(element, {
|
||||||
|
// customised options
|
||||||
|
// • auto-render specific keys, e.g.:
|
||||||
|
delimiters: [
|
||||||
|
{ left: '$$', right: '$$', display: true },
|
||||||
|
{ left: '$', right: '$', display: false },
|
||||||
|
{ left: '\\(', right: '\\)', display: false },
|
||||||
|
{ left: '\\[', right: '\\]', display: true }
|
||||||
|
],
|
||||||
|
// • rendering keys, e.g.:
|
||||||
|
throwOnError: false,
|
||||||
|
output: 'mathml'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
//////////////////////////
|
//////////////////////////
|
||||||
// Web functions
|
// Web functions
|
||||||
//////////////////////////
|
//////////////////////////
|
||||||
|
@ -222,6 +245,7 @@
|
||||||
await tick();
|
await tick();
|
||||||
hljs.highlightAll();
|
hljs.highlightAll();
|
||||||
createCopyCodeBlockButton();
|
createCopyCodeBlockButton();
|
||||||
|
renderLatex();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -457,6 +481,7 @@
|
||||||
messages = messages;
|
messages = messages;
|
||||||
hljs.highlightAll();
|
hljs.highlightAll();
|
||||||
createCopyCodeBlockButton();
|
createCopyCodeBlockButton();
|
||||||
|
renderLatex();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -555,6 +580,7 @@
|
||||||
messages = messages;
|
messages = messages;
|
||||||
hljs.highlightAll();
|
hljs.highlightAll();
|
||||||
createCopyCodeBlockButton();
|
createCopyCodeBlockButton();
|
||||||
|
renderLatex();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -742,7 +768,7 @@
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<div
|
||||||
class="prose w-full max-w-full prose-invert prose-headings:my-0 prose-p:my-0 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-2 prose-ol:-my-2 prose-li:-my-2 whitespace-pre-line"
|
class="prose chat-{message.role} w-full max-w-full prose-invert prose-headings:my-0 prose-p:my-0 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-2 prose-ol:-my-2 prose-li:-my-2 whitespace-pre-line"
|
||||||
>
|
>
|
||||||
{#if message.role == 'user'}
|
{#if message.role == 'user'}
|
||||||
{#if message?.edit === true}
|
{#if message?.edit === true}
|
||||||
|
@ -1091,6 +1117,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class=" hidden katex" />
|
||||||
|
|
||||||
<!-- <main class="w-full flex justify-center">
|
<!-- <main class="w-full flex justify-center">
|
||||||
<div class="max-w-lg w-screen p-5" />
|
<div class="max-w-lg w-screen p-5" />
|
||||||
</main> -->
|
</main> -->
|
||||||
|
|
Loading…
Reference in a new issue