Export components from @jupyter/chat (#132)

* Rename RendermimeMarkdown to MarkdownRenderer

* Export the chat components from @jupyter/chat

* Remove unused component

* Automatic application of license header

* typo

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: brichet

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

@@ -17,7 +17,7 @@ import clsx from 'clsx';
 import React, { useEffect, useState, useRef, forwardRef } from 'react';
 
 import { ChatInput } from './chat-input';
-import { RendermimeMarkdown } from './rendermime-markdown';
+import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
@@ -391,7 +391,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             hideIncludeSelection={true}
           />
         ) : (
-          <RendermimeMarkdown
+          <MarkdownRenderer
             rmRegistry={rmRegistry}
             markdownStr={message.body}
             model={model}

packages/jupyter-chat/src/components/code-blocks/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './code-toolbar';
+export * from './copy-button';

packages/jupyter-chat/src/components/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './chat';
+export * from './chat-input';
+export * from './chat-messages';
+export * from './code-blocks';
+export * from './input';
+export * from './jl-theme-provider';
+export * from './markdown-renderer';
+export * from './mui-extras';
+export * from './scroll-container';
+export * from './toolbar';

packages/jupyter-chat/src/components/input/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './cancel-button';
+export * from './send-button';

packages/jupyter-chat/src/components/rendermime-markdown.tsx renamed to packages/jupyter-chat/src/components/markdown-renderer.tsx

@@ -13,9 +13,9 @@ import { MessageToolbar } from './toolbar';
 import { IChatModel } from '../model';
 
 const MD_MIME_TYPE = 'text/markdown';
-const RENDERMIME_MD_CLASS = 'jp-chat-rendermime-markdown';
+const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
 
-type RendermimeMarkdownProps = {
+type MarkdownRendererProps = {
   /**
    * The string to render.
    */
@@ -62,7 +62,7 @@ function escapeLatexDelimiters(text: string) {
     .replace(/\\\]/g, '\\\\]');
 }
 
-function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
+function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
   const appendContent = props.appendContent || false;
   const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
     null
@@ -122,7 +122,7 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
   }, [props.markdownStr, props.rmRegistry]);
 
   return (
-    <div className={RENDERMIME_MD_CLASS}>
+    <div className={MD_RENDERED_CLASS}>
       {renderedContent &&
         (appendContent ? (
           <div ref={node => node && node.appendChild(renderedContent)} />
@@ -146,4 +146,4 @@ function RendermimeMarkdownBase(props: RendermimeMarkdownProps): JSX.Element {
   );
 }
 
-export const RendermimeMarkdown = React.memo(RendermimeMarkdownBase);
+export const MarkdownRenderer = React.memo(MarkdownRendererBase);

packages/jupyter-chat/src/components/mui-extras/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './contrasting-tooltip';
+export * from './tooltipped-button';
+export * from './tooltipped-icon-button';

packages/jupyter-chat/src/components/mui-extras/stacking-alert.tsx

@@ -4,6 +4,7 @@
  */
 
 export * from './active-cell-manager';
+export * from './components';
 export * from './icons';
 export * from './model';
 export * from './registry';

packages/jupyter-chat/src/index.ts

@@ -14,7 +14,7 @@
   padding: 0 1em;
 }
 
-.jp-chat-rendermime-markdown {
+.jp-chat-rendered-markdown {
   position: relative;
 }
 
@@ -26,11 +26,11 @@
  * 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-rendered-markdown .jp-RenderedHTMLCommon {
   padding-right: 0;
 }
 
-.jp-ThemedContainer .jp-chat-rendermime-markdown pre {
+.jp-ThemedContainer .jp-chat-rendered-markdown pre {
   background-color: var(--jp-cell-editor-background);
   overflow-x: auto;
   white-space: pre;
@@ -39,13 +39,13 @@
   border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
 }
 
-.jp-ThemedContainer .jp-chat-rendermime-markdown pre > code {
+.jp-ThemedContainer .jp-chat-rendered-markdown pre > code {
   background-color: inherit;
   overflow-x: inherit;
   white-space: inherit;
 }
 
-.jp-ThemedContainer .jp-chat-rendermime-markdown mjx-container {
+.jp-ThemedContainer .jp-chat-rendered-markdown mjx-container {
   font-size: 119%;
 }
 
@@ -58,7 +58,7 @@
   color: var(--jp-ui-font-color3);
 }
 
-.jp-chat-rendermime-markdown:hover .jp-chat-toolbar {
+.jp-chat-rendered-markdown:hover .jp-chat-toolbar {
   display: inherit;
 }
 

packages/jupyter-chat/style/chat.css

@@ -215,7 +215,7 @@ test.describe('#outofband', () => {
     const updatedContent = 'Content updated';
     const chatPanel = await openChat(page, FILENAME);
     const messageContent = chatPanel
-      .locator('.jp-chat-messages-container .jp-chat-rendermime-markdown')
+      .locator('.jp-chat-messages-container .jp-chat-rendered-markdown')
       .first();
     const newMsg = { ...msg, body: updatedContent };
     const newContent = {
@@ -261,14 +261,14 @@ test.describe('#outofband', () => {
 
     await expect(messages).toHaveCount(2);
     await expect(
-      messages.last().locator('.jp-chat-rendermime-markdown')
+      messages.last().locator('.jp-chat-rendered-markdown')
     ).toHaveText(newMsgContent);
   });
 
   test('should delete a message from file', async ({ page }) => {
     const chatPanel = await openChat(page, FILENAME);
     const messageContent = chatPanel
-      .locator('.jp-chat-messages-container .jp-chat-rendermime-markdown')
+      .locator('.jp-chat-messages-container .jp-chat-rendered-markdown')
       .first();
     const newContent = {
       messages: [],

ui-tests/tests/chat-file.spec.ts

@@ -51,7 +51,7 @@ test.describe('#messageToolbar', () => {
   test('message should have a toolbar', async ({ page }) => {
     const chatPanel = await openChat(page, FILENAME);
     const message = chatPanel
-      .locator('.jp-chat-messages-container .jp-chat-rendermime-markdown')
+      .locator('.jp-chat-messages-container .jp-chat-rendered-markdown')
       .first();
 
     await expect(message.locator('.jp-chat-toolbar')).not.toBeVisible();
@@ -66,7 +66,7 @@ test.describe('#messageToolbar', () => {
     const message = chatPanel
       .locator('.jp-chat-messages-container .jp-chat-message')
       .first();
-    const messageContent = message.locator('.jp-chat-rendermime-markdown');
+    const messageContent = message.locator('.jp-chat-rendered-markdown');
 
     // Should display the message toolbar
     await messageContent.hover({ position: { x: 5, y: 5 } });
@@ -98,7 +98,7 @@ test.describe('#messageToolbar', () => {
     const message = chatPanel
       .locator('.jp-chat-messages-container .jp-chat-message')
       .first();
-    const messageContent = message.locator('.jp-chat-rendermime-markdown');
+    const messageContent = message.locator('.jp-chat-rendered-markdown');
 
     // Should display the message toolbar
     await messageContent.hover({ position: { x: 5, y: 5 } });
@@ -134,7 +134,7 @@ test.describe('#messageToolbar', () => {
     const message = chatPanel
       .locator('.jp-chat-messages-container .jp-chat-message')
       .first();
-    const messageContent = message.locator('.jp-chat-rendermime-markdown');
+    const messageContent = message.locator('.jp-chat-rendered-markdown');
 
     // Should display the message toolbar
     await messageContent.hover({ position: { x: 5, y: 5 } });

ui-tests/tests/message-toolbar.spec.ts

@@ -37,7 +37,7 @@ test.describe('#sendMessages', () => {
     await expect(messages.locator('.jp-chat-message')).toHaveCount(1);
     // It seems that the markdown renderer adds a new line.
     await expect(
-      messages.locator('.jp-chat-message .jp-chat-rendermime-markdown')
+      messages.locator('.jp-chat-message .jp-chat-rendered-markdown')
     ).toHaveText(MSG_CONTENT + '\n');
   });
 
@@ -53,7 +53,7 @@ test.describe('#sendMessages', () => {
     await expect(messages.locator('.jp-chat-message')).toHaveCount(1);
     // It seems that the markdown renderer adds a new line.
     await expect(
-      messages.locator('.jp-chat-message .jp-chat-rendermime-markdown')
+      messages.locator('.jp-chat-message .jp-chat-rendered-markdown')
     ).toHaveText(MSG_CONTENT + '\n');
   });
 
@@ -93,7 +93,7 @@ test.describe('#sendMessages', () => {
     // It seems that the markdown renderer adds a new line, but the '\n' inserter when
     // pressing Enter above is trimmed.
     await expect(
-      messages.locator('.jp-chat-message .jp-chat-rendermime-markdown')
+      messages.locator('.jp-chat-message .jp-chat-rendered-markdown')
     ).toHaveText(MSG_CONTENT + '\n');
   });
 
@@ -139,7 +139,7 @@ test.describe('#sendMessages', () => {
     // It seems that the markdown renderer adds a new line, but the '\n' inserted when
     // pressing Enter above is trimmed.
     await expect(
-      messages.locator('.jp-chat-message .jp-chat-rendermime-markdown')
+      messages.locator('.jp-chat-message .jp-chat-rendered-markdown')
     ).toHaveText(MSG_CONTENT + '\n');
   });
 
@@ -195,7 +195,7 @@ test.describe('#sendMessages', () => {
     // It seems that the markdown renderer adds a new line, but the '\n' inserter when
     // pressing Enter above is trimmed.
     await expect(
-      messages.locator('.jp-chat-message .jp-chat-rendermime-markdown')
+      messages.locator('.jp-chat-message .jp-chat-rendered-markdown')
     ).toHaveText(`${MSG_CONTENT}\n${cellContent}\n`);
   });
 
@@ -244,7 +244,7 @@ test.describe('#sendMessages', () => {
     // It seems that the markdown renderer adds a new line, but the '\n' inserter when
     // pressing Enter above is trimmed.
     await expect(
-      messages.locator('.jp-chat-message .jp-chat-rendermime-markdown')
+      messages.locator('.jp-chat-message .jp-chat-rendered-markdown')
     ).toHaveText(`${MSG_CONTENT}\nprint\n`);
   });
 });

ui-tests/tests/send-message.spec.ts

@@ -56,8 +56,8 @@ export const openChat = async (
   if (content) {
     await page.waitForCondition(async () => {
       const expectedCount = content.messages.length;
-      const currentCount = await panel?.locator('.jp-chat-rendermime-markdown').count();
-      const currentBodies = await panel?.locator('.jp-chat-rendermime-markdown').allTextContents();
+      const currentCount = await panel?.locator('.jp-chat-rendered-markdown').count();
+      const currentBodies = await panel?.locator('.jp-chat-rendered-markdown').allTextContents();
       return expectedCount === currentCount && currentBodies!.every(value => value !== '');
     });
   }
@@ -83,8 +83,8 @@ export const openChatToSide = async (
   if (content) {
     await page.waitForCondition(async () => {
       const expectedCount = content.messages.length;
-      const currentCount = await panel?.locator('.jp-chat-rendermime-markdown').count();
-      const currentBodies = await panel?.locator('.jp-chat-rendermime-markdown').allTextContents();
+      const currentCount = await panel?.locator('.jp-chat-rendered-markdown').count();
+      const currentBodies = await panel?.locator('.jp-chat-rendered-markdown').allTextContents();
       return expectedCount === currentCount && currentBodies!.every(value => value !== '');
     });
   }