From dc4b4797842165297d04358597b039fc2cd5006f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Fri, 26 Jul 2024 23:18:38 -0300 Subject: [PATCH] feat: defaults to plaintext / map languages to be rendered as another --- .../orama-chat-assistent-message.stories.tsx | 27 ++++++++++++++++--- .../orama-markdown/orama-markdown.tsx | 26 +++++++++++++----- 2 files changed, 43 insertions(+), 10 deletions(-) diff --git a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx index 557e4051..26346407 100644 --- a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx +++ b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx @@ -52,10 +52,20 @@ Ready to start writing? Either start changing stuff on the left or [Marked]: https://github.com/markedjs/marked/ [Markdown]: http://daringfireball.net/projects/markdown/ -\`\`\`javascript -function helloWorld() { - console.log('Hello World!') -} +\`\`\`html + + + Hello World + + + +

Hello World

+ + \`\`\` \`\`\`javascript @@ -89,6 +99,15 @@ class HelloWorld { } } \`\`\` + +\`\`\`unsuported +

Hello World

+class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello World!"); + } +} +\`\`\` ` export const ChatAssistentMessage: Story = { diff --git a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx index ab12aedd..d9bf35b3 100644 --- a/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx +++ b/packages/ui-stencil/src/components/internal/orama-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx @@ -14,10 +14,20 @@ const SUPPORTED_HLJS_LANGUAGES = Object.fromEntries<{ error: boolean; retries: n SUPPORTED_HLJS_LANGUAGES_ARRAY.map((language) => [language, { error: false, retries: 0 }]), ) +// This is used for the cases the a known language returned by the LLM +// should be highlighted as another language +const LANGUAGES_MAPPING: Record = { + html: 'xml', +} + marked.use({ useNewRenderer: true, renderer: { code: (token) => { + const mappedLanguage = LANGUAGES_MAPPING[token.lang] || token.lang + // Some "languages" like HTML should be rendererd as XML. Reasons are still unclear. + const actualLanguage = SUPPORTED_HLJS_LANGUAGES[mappedLanguage] ? mappedLanguage : 'plaintext' + const pre = document.createElement('pre') pre.classList.add('orama-markdown-pre') const codeTitle = document.createElement('div') @@ -26,15 +36,19 @@ marked.use({ const code = document.createElement('code') code.classList.add('orama-markdown-code') - code.classList.add(`language-${token.lang}`) + code.classList.add(`language-${actualLanguage}`) code.classList.add('hljs') pre.appendChild(code) - const hljsLanguage = hljs.getLanguage(token.lang) + const hljsLanguage = hljs.getLanguage(actualLanguage) if (hljsLanguage) { - codeTitle.innerHTML = hljsLanguage.name - code.innerHTML = hljs.highlight(token.text, { language: token.lang, ignoreIllegals: true }).value + if (actualLanguage === 'plaintext') { + codeTitle.innerHTML = '' + } else { + codeTitle.innerHTML = hljsLanguage.name + } + code.innerHTML = hljs.highlight(token.text, { language: actualLanguage, ignoreIllegals: true }).value code.dataset.highlighted = 'yes' } else { codeTitle.innerHTML = ' ' @@ -74,7 +88,7 @@ async function loadLanguageAndHighlight(language: string): Promise { try { const response = await fetch( - `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/${language}.min.js`, + `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/${language}.min.js`, ) if (!response.ok) { @@ -166,7 +180,7 @@ export class OramaMarkdown { evaluate if we need this inside our codebase or keep it in a CDN */}
{