@jupyter/chat 0.5.0 → 0.6.0

package/lib/components/chat-messages.d.ts

@@ -86,7 +86,7 @@ type AvatarProps = {
     small?: boolean;
 };
 /**
- * the avatar component.
+ * The avatar component.
  */
 export declare function Avatar(props: AvatarProps): JSX.Element | null;
 export {};

package/lib/components/chat-messages.js

@@ -358,9 +358,10 @@ export function Navigation(props) {
             React.createElement(LabIcon.resolveReact, { display: 'flex', icon: caretDownEmptyIcon, iconClass: classes('jp-Icon') })))));
 }
 /**
- * the avatar component.
+ * The avatar component.
  */
 export function Avatar(props) {
+    var _a, _b;
     const { user } = props;
     const sharedStyles = {
         height: `${props.small ? '16' : '24'}px`,
@@ -368,11 +369,12 @@ export function Avatar(props) {
         bgcolor: user.color,
         fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`
     };
+    const name = (_b = (_a = user.display_name) !== null && _a !== void 0 ? _a : user.name) !== null && _b !== void 0 ? _b : (user.username || 'User undefined');
     return user.avatar_url ? (React.createElement(MuiAvatar, { sx: {
             ...sharedStyles
-        }, src: user.avatar_url })) : user.initials ? (React.createElement(MuiAvatar, { sx: {
+        }, src: user.avatar_url, alt: name, title: name })) : user.initials ? (React.createElement(MuiAvatar, { sx: {
             ...sharedStyles
-        } },
+        }, alt: name, title: name },
         React.createElement(Typography, { sx: {
                 fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`,
                 color: 'var(--jp-ui-inverse-font-color1)'

package/lib/components/code-blocks/code-toolbar.js

@@ -51,7 +51,7 @@ export function CodeToolbar(props) {
             display: 'flex',
             justifyContent: 'flex-end',
             alignItems: 'center',
-            padding: '6px 2px',
+            padding: '2px 2px',
             marginBottom: '1em',
             border: '1px solid var(--jp-cell-editor-border-color)',
             borderTop: 'none'

package/lib/components/mui-extras/tooltipped-icon-button.js

@@ -32,5 +32,9 @@ export function TooltippedIconButton(props) {
             }
         } },
         React.createElement("span", { className: props.className },
-            React.createElement(IconButton, { ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: { lineHeight: 0, ...(props.disabled && { opacity: 0.5 }) }, "aria-label": props['aria-label'] }, props.children))));
+            React.createElement(IconButton, { ...props.iconButtonProps, onClick: props.onClick, disabled: props.disabled, sx: {
+                    marginLeft: '8px',
+                    lineHeight: 0,
+                    ...(props.disabled && { opacity: 0.5 })
+                }, "aria-label": props['aria-label'] }, props.children))));
 }

package/lib/components/rendermime-markdown.js

@@ -9,14 +9,19 @@ import { MessageToolbar } from './toolbar';
 const MD_MIME_TYPE = 'text/markdown';
 const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
 /**
- * Takes \( and returns \\(. Escapes LaTeX delimeters by adding extra backslashes where needed for proper rendering by @jupyterlab/rendermime.
+ * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
+ * after the initial MarkDown render. For example, this function takes '\(` and
+ * returns `\\(`.
+ *
+ * Required for proper rendering of MarkDown + LaTeX markup in the chat by
+ * `ILatexTypesetter`.
  */
 function escapeLatexDelimiters(text) {
     return text
-        .replace('\\(', '\\\\(')
-        .replace('\\)', '\\\\)')
-        .replace('\\[', '\\\\[')
-        .replace('\\]', '\\\\]');
+        .replace('\\(/g', '\\\\(')
+        .replace('\\)/g', '\\\\)')
+        .replace('\\[/g', '\\\\[')
+        .replace('\\]/g', '\\\\]');
 }
 function RendermimeMarkdownBase(props) {
     const appendContent = props.appendContent || false;
@@ -25,17 +30,21 @@ function RendermimeMarkdownBase(props) {
     const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
         const renderContent = async () => {
-            var _a;
+            var _a, _b;
+            // initialize mime model
             const mdStr = escapeLatexDelimiters(props.markdownStr);
             const model = props.rmRegistry.createModel({
                 data: { [MD_MIME_TYPE]: mdStr }
             });
             const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
+            // step 1: render markdown
             await renderer.renderModel(model);
             (_a = props.rmRegistry.latexTypesetter) === null || _a === void 0 ? void 0 : _a.typeset(renderer.node);
             if (!renderer.node) {
                 throw new Error('Rendermime was unable to render Markdown content within a chat message. Please report this upstream to Jupyter chat on GitHub.');
             }
+            // step 2: render LaTeX via MathJax.
+            (_b = props.rmRegistry.latexTypesetter) === null || _b === void 0 ? void 0 : _b.typeset(renderer.node);
             const newCodeToolbarDefns = [];
             // Attach CodeToolbar root element to each <pre> block
             const preBlocks = renderer.node.querySelectorAll('pre');

package/lib/index.d.ts

@@ -1,9 +1,9 @@
+export * from './active-cell-manager';
 export * from './icons';
 export * from './model';
 export * from './registry';
-export * from './types';
-export * from './active-cell-manager';
 export * from './selection-watcher';
+export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';

package/lib/index.js

@@ -2,12 +2,12 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+export * from './active-cell-manager';
 export * from './icons';
 export * from './model';
 export * from './registry';
-export * from './types';
-export * from './active-cell-manager';
 export * from './selection-watcher';
+export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/chat",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A package that provides UI components that can be used to create a chat in a Jupyterlab extension.",
   "keywords": [
     "jupyter",

package/src/components/chat-messages.tsx

@@ -581,7 +581,7 @@ type AvatarProps = {
 };
 
 /**
- * the avatar component.
+ * The avatar component.
  */
 export function Avatar(props: AvatarProps): JSX.Element | null {
   const { user } = props;
@@ -593,18 +593,24 @@ export function Avatar(props: AvatarProps): JSX.Element | null {
     fontSize: `var(--jp-ui-font-size${props.small ? '0' : '1'})`
   };
 
+  const name =
+    user.display_name ?? user.name ?? (user.username || 'User undefined');
   return user.avatar_url ? (
     <MuiAvatar
       sx={{
         ...sharedStyles
       }}
       src={user.avatar_url}
+      alt={name}
+      title={name}
     ></MuiAvatar>
   ) : user.initials ? (
     <MuiAvatar
       sx={{
         ...sharedStyles
       }}
+      alt={name}
+      title={name}
     >
       <Typography
         sx={{

package/src/components/code-blocks/code-toolbar.tsx

@@ -80,7 +80,7 @@ export function CodeToolbar(props: CodeToolbarProps): JSX.Element {
         display: 'flex',
         justifyContent: 'flex-end',
         alignItems: 'center',
-        padding: '6px 2px',
+        padding: '2px 2px',
         marginBottom: '1em',
         border: '1px solid var(--jp-cell-editor-border-color)',
         borderTop: 'none'

package/src/components/mui-extras/tooltipped-icon-button.tsx

@@ -73,7 +73,11 @@ export function TooltippedIconButton(
           {...props.iconButtonProps}
           onClick={props.onClick}
           disabled={props.disabled}
-          sx={{ lineHeight: 0, ...(props.disabled && { opacity: 0.5 }) }}
+          sx={{
+            marginLeft: '8px',
+            lineHeight: 0,
+            ...(props.disabled && { opacity: 0.5 })
+          }}
           aria-label={props['aria-label']}
         >
           {props.children}

package/src/components/rendermime-markdown.tsx

@@ -24,14 +24,19 @@ type RendermimeMarkdownProps = {
 };
 
 /**
- * Takes \( and returns \\(. Escapes LaTeX delimeters by adding extra backslashes where needed for proper rendering by @jupyterlab/rendermime.
+ * Escapes backslashes in LaTeX delimiters such that they appear in the DOM
+ * after the initial MarkDown render. For example, this function takes '\(` and
+ * returns `\\(`.
+ *
+ * Required for proper rendering of MarkDown + LaTeX markup in the chat by
+ * `ILatexTypesetter`.
  */
 function escapeLatexDelimiters(text: string) {
   return text
-    .replace('\\(', '\\\\(')
-    .replace('\\)', '\\\\)')
-    .replace('\\[', '\\\\[')
-    .replace('\\]', '\\\\]');
+    .replace('\\(/g', '\\\\(')
+    .replace('\\)/g', '\\\\)')
+    .replace('\\[/g', '\\\\[')
+    .replace('\\]/g', '\\\\]');
 }
 
 function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
@@ -47,12 +52,15 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
 
   useEffect(() => {
     const renderContent = async () => {
+      // initialize mime model
       const mdStr = escapeLatexDelimiters(props.markdownStr);
       const model = props.rmRegistry.createModel({
         data: { [MD_MIME_TYPE]: mdStr }
       });
 
       const renderer = props.rmRegistry.createRenderer(MD_MIME_TYPE);
+
+      // step 1: render markdown
       await renderer.renderModel(model);
       props.rmRegistry.latexTypesetter?.typeset(renderer.node);
       if (!renderer.node) {
@@ -61,6 +69,9 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
         );
       }
 
+      // step 2: render LaTeX via MathJax.
+      props.rmRegistry.latexTypesetter?.typeset(renderer.node);
+
       const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
 
       // Attach CodeToolbar root element to each <pre> block

package/src/index.ts

@@ -3,12 +3,12 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+export * from './active-cell-manager';
 export * from './icons';
 export * from './model';
 export * from './registry';
-export * from './types';
-export * from './active-cell-manager';
 export * from './selection-watcher';
+export * from './types';
 export * from './widgets/chat-error';
 export * from './widgets/chat-sidebar';
 export * from './widgets/chat-widget';