From a12fa003aafc0039e320c76d6b7b10e82447a383 Mon Sep 17 00:00:00 2001
From: Nicolas Brichet <32258950+brichet@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:11:50 +0100
Subject: [PATCH] Fix rendering of code blocks in JupyterLab>= 4.3.0 (#111)

* fix rendering of code blocks in JupyterLab >=4.3.0

Co-authored-by: david qiu <44106031+dlqqq@users.noreply.github.com>

* lint

---------

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 (
     <JlThemeProvider themeManager={props.themeManager ?? null}>
       <Box
+        // Add .jp-ThemedContainer for CSS compatibility in both JL <4.3.0 and >=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..1d1420bf 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%;
 }