From d55a4c3ef5301ad7e5686c12513ee816bcf76e6c Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Mon, 19 Feb 2024 18:29:23 +0100 Subject: Add MathJax to GUI #1563, Add model name to GUI #1600 --- g4f/gui/client/js/chat.v1.js | 44 +++++++++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 17 deletions(-) (limited to 'g4f/gui/client/js') diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index 2042d174..8461a8f7 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -32,6 +32,20 @@ const markdown_render = (content) => { .replaceAll('', '') } +let typesetPromise = Promise.resolve(); +const highlight = (container) => { + container.querySelectorAll('code:not(.hljs').forEach((el) => { + if (el.className != "hljs") { + hljs.highlightElement(el); + } + }); + typesetPromise = typesetPromise.then( + () => MathJax.typesetPromise([container]) + ).catch( + (err) => console.log('Typeset failed: ' + err.message) + ); +} + const delete_conversations = async () => { localStorage.clear(); await new_conversation(); @@ -73,9 +87,7 @@ const handle_ask = async () => { `; - document.querySelectorAll('code:not(.hljs').forEach((el) => { - hljs.highlightElement(el); - }); + highlight(message_box); await ask_gpt(); } }; @@ -214,9 +226,7 @@ const ask_gpt = async () => { html = html.substring(0, lastIndex) + '' + lastElement; } content_inner.innerHTML = html; - document.querySelectorAll('code:not(.hljs').forEach((el) => { - hljs.highlightElement(el); - }); + highlight(content_inner); } window.scrollTo(0, 0); @@ -331,8 +341,15 @@ const new_conversation = async () => { const load_conversation = async (conversation_id) => { let messages = await get_messages(conversation_id); + let elements = ""; for (item of messages) { - message_box.innerHTML += ` + let provider = item.provider ? ` +
+ ${item.provider.name} + ${item.provider.model ? ' with ' + item.provider.model : ''} +
+ ` : ""; + elements += `
${item.role == "assistant" ? gpt_image : user_image} @@ -342,19 +359,15 @@ const load_conversation = async (conversation_id) => { }
- ${item.provider - ? '' - : '' - } + ${provider}
${markdown_render(item.content)}
`; } + message_box.innerHTML = elements; - document.querySelectorAll('code:not(.hljs').forEach((el) => { - hljs.highlightElement(el); - }); + highlight(message_box); message_box.scrollTo({ top: message_box.scrollHeight, behavior: "smooth" }); @@ -447,9 +460,6 @@ const load_conversations = async (limit, offset, loader) => { `; } - document.querySelectorAll('code:not(.hljs').forEach((el) => { - hljs.highlightElement(el); - }); }; document.getElementById(`cancelButton`).addEventListener(`click`, async () => { -- cgit v1.2.3