-
-
Notifications
You must be signed in to change notification settings - Fork 341
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use @jupyterlab/rendermime for in-chat markdown rendering #564
Conversation
15d6fc8
to
bc1807f
Compare
As discussed earlier, the narrow default width of the left panel makes it hard to render code. Perhaps if we move the chat UI to the main area (#76), this will be less of a problem, but for now, Python code straddling multiple lines looks less than ideal: Options to deal with this include:
|
9eefaf8
to
4325658
Compare
@JasonWeill, @3coins thank you for looking into this PR, updated it based on your comments and our discussions. It is ready for (re-)review. |
3bcfb93
to
a3dba7a
Compare
adc8737
to
fc679ac
Compare
please update playwright snapshots |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Excited to see this progress! Just some minor suggestions :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Two tiny suggestions on dependencies, otherwise it looks great (tested locally).
879ad79
to
363ba1a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The lockfile may still need updating (not sure about your internal rebase practices), but otherwise it looks good to me.
PS. If I see this right, the package size should drop by 97.7% (over 2 MB) thanks to dropping the extra dependencies (notably react-syntax-highlighter
) 🎉
41fc575
to
9cab65c
Compare
a748e32
to
fd56bbe
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@andrii-i This is awesome work! The new UI is much cleaner and noticeably faster. Just a few minor concerns, but this is 95% ready to ship. 🎉
ad0ba1b
to
656e851
Compare
Thank you @dlqqq. All comments are implemented. |
… redefinitions on every rerender
Co-authored-by: david qiu <[email protected]>
… potential build errors
128f8b2
to
748fd38
Compare
@meeseeksdev please backport to 1.x |
Owee, I'm MrMeeseeks, Look at me. There seem to be a conflict, please backport manually. Here are approximate instructions:
And apply the correct labels and milestones. Congratulations — you did some good work! Hopefully your backport PR will be tested by the continuous integration and merged soon! Remember to remove the If these instructions are inaccurate, feel free to suggest an improvement. |
…#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
…#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
…#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
…#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
* Use @jupyterlab/rendermime for in-chat markdown rendering (#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]> * Add "@jupyterlab/rendermime": "^3.6.3" dependency --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
…#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
…#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
@jupyterlab/rendermime
instead ofreact-markdown
for markdown rendering, make code/markdown/math blocks look the same as in JupyterLabreact-markdown
,react-syntax-highlighter
,rehype-katex
,remark-math
. As pointed out by @krassowski, "if I see this right, the package size should drop by 97.7% (over 2 MB) thanks to dropping the extra dependencies (notablyreact-syntax-highlighter
) 🎉"@jupyterlab/rendermime
RendermimeMarkdown
component memoization improves page scripting/rendering speed by ~10% based on performance profiling.Before:
After: