From ad9b578ebbf7c6fd3b3815f1ed1eaa061eaec6dd Mon Sep 17 00:00:00 2001 From: Nicolas Brichet Date: Thu, 5 Dec 2024 12:17:39 +0100 Subject: [PATCH 1/2] fix rendering of code blocks in JupyterLab >=4.3.0 Co-authored-by: david qiu <44106031+dlqqq@users.noreply.github.com> --- packages/jupyter-chat/src/components/chat.tsx | 3 +++ packages/jupyter-chat/style/chat.css | 16 ++++++++++++---- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/jupyter-chat/src/components/chat.tsx b/packages/jupyter-chat/src/components/chat.tsx index 195a2bf0..f56d3a27 100644 --- a/packages/jupyter-chat/src/components/chat.tsx +++ b/packages/jupyter-chat/src/components/chat.tsx @@ -54,6 +54,9 @@ export function Chat(props: Chat.IOptions): JSX.Element { return ( =4.3.0. + // See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling + className="jp-ThemedContainer" // root box should not include padding as it offsets the vertical // scrollbar to the left sx={{ diff --git a/packages/jupyter-chat/style/chat.css b/packages/jupyter-chat/style/chat.css index f3c6317c..e37c2208 100644 --- a/packages/jupyter-chat/style/chat.css +++ b/packages/jupyter-chat/style/chat.css @@ -18,11 +18,19 @@ position: relative; } -.jp-chat-rendermime-markdown .jp-RenderedHTMLCommon { +/* + * + * Selectors must be nested in `.jp-ThemedContainer` to have a higher + * specificity than selectors in rules provided by JupyterLab. + * + * See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling + * See also: https://github.com/jupyterlab/jupyter-ai/issues/1090 + */ + .jp-ThemedContainer .jp-chat-rendermime-markdown .jp-RenderedHTMLCommon { padding-right: 0; } -.jp-chat-rendermime-markdown pre { +.jp-ThemedContainer .jp-chat-rendermime-markdown pre { background-color: var(--jp-cell-editor-background); overflow-x: auto; white-space: pre; @@ -31,13 +39,13 @@ border: var(--jp-border-width) solid var(--jp-cell-editor-border-color); } -.jp-chat-rendermime-markdown pre > code { +.jp-ThemedContainer .jp-chat-rendermime-markdown pre > code { background-color: inherit; overflow-x: inherit; white-space: inherit; } -.jp-chat-rendermime-markdown mjx-container { +.jp-ThemedContainer .jp-chat-rendermime-markdown mjx-container { font-size: 119%; } From 74cb22d77a4d82f5459786d677b1b4e7a9f5c54f Mon Sep 17 00:00:00 2001 From: Nicolas Brichet Date: Thu, 5 Dec 2024 12:48:38 +0100 Subject: [PATCH 2/2] lint --- packages/jupyter-chat/style/chat.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jupyter-chat/style/chat.css b/packages/jupyter-chat/style/chat.css index e37c2208..1d1420bf 100644 --- a/packages/jupyter-chat/style/chat.css +++ b/packages/jupyter-chat/style/chat.css @@ -26,7 +26,7 @@ * See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling * See also: https://github.com/jupyterlab/jupyter-ai/issues/1090 */ - .jp-ThemedContainer .jp-chat-rendermime-markdown .jp-RenderedHTMLCommon { +.jp-ThemedContainer .jp-chat-rendermime-markdown .jp-RenderedHTMLCommon { padding-right: 0; }