Feedback on #575

packages/jupyter-ai/src/components/chat.tsx

@@ -4,6 +4,7 @@ import { Button, IconButton, Stack } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import type { Awareness } from 'y-protocols/awareness';
+import type { IThemeManager } from '@jupyterlab/apputils';
 
 import { JlThemeProvider } from './jl-theme-provider';
 import { ChatMessages } from './chat-messages';
@@ -178,6 +179,7 @@ export type ChatProps = {
   selectionWatcher: SelectionWatcher;
   chatHandler: ChatHandler;
   globalAwareness: Awareness | null;
+  themeManager: IThemeManager | null;
   chatView?: ChatView;
 };
 
@@ -190,7 +192,7 @@ export function Chat(props: ChatProps): JSX.Element {
   const [view, setView] = useState<ChatView>(props.chatView || ChatView.Chat);
 
   return (
-    <JlThemeProvider>
+    <JlThemeProvider themeManager={props.themeManager}>
       <SelectionContextProvider selectionWatcher={props.selectionWatcher}>
         <CollaboratorsContextProvider globalAwareness={props.globalAwareness}>
           <Box

packages/jupyter-ai/src/components/jl-theme-provider.tsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from 'react';
-
+import type { IThemeManager } from '@jupyterlab/apputils';
 import { Theme, ThemeProvider, createTheme } from '@mui/material/styles';
-import { getJupyterLabTheme, getThemeManager } from '../theme-provider';
+
+import { getJupyterLabTheme } from '../theme-provider';
 
 export function JlThemeProvider(props: {
+  themeManager: IThemeManager | null;
   children: React.ReactNode;
 }): JSX.Element {
   const [theme, setTheme] = useState<Theme>(createTheme());
@@ -12,12 +14,9 @@ export function JlThemeProvider(props: {
     async function setJlTheme() {
       setTheme(await getJupyterLabTheme());
     }
-    setJlTheme();
 
-    const manager = getThemeManager();
-    if (manager) {
-      manager.themeChanged.connect(setJlTheme);
-    }
+    setJlTheme();
+    props.themeManager?.themeChanged.connect(setJlTheme);
   }, []);
 
   return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;

packages/jupyter-ai/src/index.ts

@@ -16,7 +16,6 @@ import { buildChatSidebar } from './widgets/chat-sidebar';
 import { SelectionWatcher } from './selection-watcher';
 import { ChatHandler } from './chat_handler';
 import { buildErrorWidget } from './widgets/chat-error';
-import { setThemeManager } from './theme-provider';
 
 export type DocumentTracker = IWidgetTracker<IDocumentWidget>;
 
@@ -26,13 +25,12 @@ export type DocumentTracker = IWidgetTracker<IDocumentWidget>;
 const plugin: JupyterFrontEndPlugin<void> = {
   id: 'jupyter_ai:plugin',
   autoStart: true,
-  optional: [IGlobalAwareness, ILayoutRestorer],
-  requires: [IThemeManager],
+  optional: [IGlobalAwareness, ILayoutRestorer, IThemeManager],
   activate: async (
     app: JupyterFrontEnd,
-    manager: IThemeManager,
     globalAwareness: Awareness | null,
-    restorer: ILayoutRestorer | null
+    restorer: ILayoutRestorer | null,
+    themeManager: IThemeManager | null
   ) => {
     /**
      * Initialize selection watcher singleton
@@ -50,10 +48,11 @@ const plugin: JupyterFrontEndPlugin<void> = {
       chatWidget = buildChatSidebar(
         selectionWatcher,
         chatHandler,
-        globalAwareness
+        globalAwareness,
+        themeManager
       );
     } catch (e) {
-      chatWidget = buildErrorWidget();
+      chatWidget = buildErrorWidget(themeManager);
     }
 
     /**
@@ -64,11 +63,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
     if (restorer) {
       restorer.add(chatWidget, 'jupyter-ai-chat');
     }
-
-    /**
-     * Set the theme manager
-     */
-    setThemeManager(manager);
   }
 };
 

packages/jupyter-ai/src/theme-provider.ts

@@ -1,8 +1,5 @@
-import { IThemeManager } from '@jupyterlab/apputils';
 import { Theme, createTheme } from '@mui/material/styles';
 
-let themeManager: IThemeManager | null = null;
-
 function getCSSVariable(name: string): string {
   return getComputedStyle(document.body).getPropertyValue(name).trim();
 }
@@ -13,18 +10,9 @@ export async function pollUntilReady(): Promise<void> {
   }
 }
 
-export function setThemeManager(manager: IThemeManager): void {
-  themeManager = manager;
-}
-
-export function getThemeManager(): IThemeManager | null {
-  return themeManager;
-}
-
 export async function getJupyterLabTheme(): Promise<Theme> {
   await pollUntilReady();
   const light = document.body.getAttribute('data-jp-theme-light');
-  const primaryFontColor = getCSSVariable('--jp-ui-font-color1');
   return createTheme({
     spacing: 4,
     components: {
@@ -124,7 +112,7 @@ export async function getJupyterLabTheme(): Promise<Theme> {
         dark: getCSSVariable('--jp-success-color0')
       },
       text: {
-        primary: primaryFontColor,
+        primary: getCSSVariable('--jp-ui-font-color1'),
         secondary: getCSSVariable('--jp-ui-font-color2'),
         disabled: getCSSVariable('--jp-ui-font-color3')
       }
@@ -138,11 +126,6 @@ export async function getJupyterLabTheme(): Promise<Theme> {
       htmlFontSize: 16,
       button: {
         textTransform: 'capitalize'
-      },
-      // this is undocumented as of the time of writing.
-      // https://stackoverflow.com/a/62950304/12548458
-      allVariants: {
-        color: primaryFontColor
       }
     }
   });

packages/jupyter-ai/src/widgets/chat-error.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
+import type { IThemeManager } from '@jupyterlab/apputils';
+import { Alert, Box } from '@mui/material';
 
 import { chatIcon } from '../icons';
-import { Alert, Box } from '@mui/material';
 import { JlThemeProvider } from '../components/jl-theme-provider';
 
-export function buildErrorWidget(): ReactWidget {
+export function buildErrorWidget(
+  themeManager: IThemeManager | null
+): ReactWidget {
   const ErrorWidget = ReactWidget.create(
-    <JlThemeProvider>
+    <JlThemeProvider themeManager={themeManager}>
       <Box
         sx={{
           width: '100%',

packages/jupyter-ai/src/widgets/chat-sidebar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
+import type { IThemeManager } from '@jupyterlab/apputils';
 import type { Awareness } from 'y-protocols/awareness';
 
 import { Chat } from '../components/chat';
@@ -10,13 +11,15 @@ import { ChatHandler } from '../chat_handler';
 export function buildChatSidebar(
   selectionWatcher: SelectionWatcher,
   chatHandler: ChatHandler,
-  globalAwareness: Awareness | null
+  globalAwareness: Awareness | null,
+  themeManager: IThemeManager | null
 ): ReactWidget {
   const ChatWidget = ReactWidget.create(
     <Chat
       selectionWatcher={selectionWatcher}
       chatHandler={chatHandler}
       globalAwareness={globalAwareness}
+      themeManager={themeManager}
     />
   );
   ChatWidget.id = 'jupyter-ai::chat';

yarn.lock

@@ -15070,11 +15070,11 @@ __metadata:
 
 "typescript@patch:typescript@^3 || ^4#~builtin<compat/typescript>":
   version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=23ec76"
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=289587"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: ab417a2f398380c90a6cf5a5f74badd17866adf57f1165617d6a551f059c3ba0a3e4da0d147b3ac5681db9ac76a303c5876394b13b3de75fdd5b1eaa06181c9d
+  checksum: 1f8f3b6aaea19f0f67cba79057674ba580438a7db55057eb89cc06950483c5d632115c14077f6663ea76fd09fce3c190e6414bb98582ec80aa5a4eaf345d5b68
   languageName: node
   linkType: hard