Add a welcome message

docs/jupyter-chat-example/src/index.ts

@@ -26,6 +26,21 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { UUID } from '@lumino/coreutils';
 
+const welcomeMessage = `
+### Welcome to Jupyter Chat!
+
+This is a simple chat panel that allows you to send messages and share files.
+
+The messages are rendered as markdown, allowing you to format the messages with e.g.:
+- **bold**
+- _italic_
+- \`\`\`python
+  # This is a code block
+  print('Hello world!')
+  \`\`\`
+- [link](https://jupyter.org)
+`;
+
 class ChatContext extends AbstractChatContext {
   get users() {
     return [];
@@ -138,7 +153,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
       model,
       rmRegistry,
       themeManager,
-      attachmentOpenerRegistry
+      attachmentOpenerRegistry,
+      welcomeMessage
     });
     app.shell.add(panel, 'left');
   }

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

@@ -19,8 +19,9 @@ import React, { useEffect, useState, useRef, forwardRef } from 'react';
 import { AttachmentPreviewList } from './attachments';
 import { ChatInput } from './chat-input';
 import { IInputToolbarRegistry } from './input';
-import { MarkdownRenderer } from './markdown-renderer';
 import { MessageFooter } from './messages/footer';
+import { MessageRenderer } from './messages/message-renderer';
+import { WelcomeMessage } from './messages/welcome';
 import { ScrollContainer } from './scroll-container';
 import { IChatCommandRegistry } from '../chat-commands';
 import { IMessageFooterRegistry } from '../footers';
@@ -64,6 +65,10 @@ type BaseMessageProps = {
    * The footer registry.
    */
   messageFooterRegistry?: IMessageFooterRegistry;
+  /**
+   * The welcome message.
+   */
+  welcomeMessage?: string;
 };
 
 /**
@@ -184,6 +189,12 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
+        {props.welcomeMessage && (
+          <WelcomeMessage
+            rmRegistry={props.rmRegistry}
+            content={props.welcomeMessage}
+          />
+        )}
         <Box ref={refMsgBox} className={clsx(MESSAGES_BOX_CLASS)}>
           {messages.map((message, i) => {
             renderedPromise.current[i] = new PromiseDelegate();
@@ -463,7 +474,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             toolbarRegistry={props.inputToolbarRegistry}
           />
         ) : (
-          <MarkdownRenderer
+          <MessageRenderer
             rmRegistry={rmRegistry}
             markdownStr={message.body}
             model={model}

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

@@ -36,6 +36,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
         chatCommandRegistry={props.chatCommandRegistry}
         inputToolbarRegistry={inputToolbarRegistry}
         messageFooterRegistry={props.messageFooterRegistry}
+        welcomeMessage={props.welcomeMessage}
       />
       <ChatInput
         sx={{
@@ -131,6 +132,10 @@ export namespace Chat {
      * The footer registry.
      */
     messageFooterRegistry?: IMessageFooterRegistry;
+    /**
+     * The welcome message.
+     */
+    welcomeMessage?: string;
   }
 
   /**

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

@@ -9,7 +9,6 @@ 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/markdown-renderer.tsx → packages/jupyter-chat/src/components/messages/message-renderer.tsx

@@ -8,14 +8,15 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
-import { CodeToolbar, CodeToolbarProps } from './code-blocks/code-toolbar';
-import { MessageToolbar } from './toolbar';
-import { IChatModel } from '../model';
+import { CodeToolbar, CodeToolbarProps } from '../code-blocks/code-toolbar';
+import { MessageToolbar } from '../toolbar';
+import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
+import { IChatModel } from '../../model';
 
-const MD_MIME_TYPE = 'text/markdown';
-const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
-
-type MarkdownRendererProps = {
+/**
+ * The type of the props for the MessageRenderer component.
+ */
+type MessageRendererProps = {
   /**
    * The string to render.
    */
@@ -47,22 +48,10 @@ type MarkdownRendererProps = {
 };
 
 /**
- * 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`.
+ * The message renderer base component.
  */
-function escapeLatexDelimiters(text: string) {
-  return text
-    .replace(/\\\(/g, '\\\\(')
-    .replace(/\\\)/g, '\\\\)')
-    .replace(/\\\[/g, '\\\\[')
-    .replace(/\\\]/g, '\\\\]');
-}
-
-function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
+function MessageRendererBase(props: MessageRendererProps): JSX.Element {
+  const { markdownStr, rmRegistry } = props;
   const appendContent = props.appendContent || false;
   const [renderedContent, setRenderedContent] = useState<HTMLElement | null>(
     null
@@ -75,26 +64,11 @@ function MarkdownRendererBase(props: MarkdownRendererProps): 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 = await MarkdownRenderer.renderContent({
+        content: markdownStr,
+        rmRegistry
       });
 
-      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) {
-        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.
-      props.rmRegistry.latexTypesetter?.typeset(renderer.node);
-
       const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
 
       // Attach CodeToolbar root element to each <pre> block
@@ -119,7 +93,7 @@ function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
     };
 
     renderContent();
-  }, [props.markdownStr, props.rmRegistry]);
+  }, [markdownStr, rmRegistry]);
 
   return (
     <div className={MD_RENDERED_CLASS}>
@@ -146,4 +120,4 @@ function MarkdownRendererBase(props: MarkdownRendererProps): JSX.Element {
   );
 }
 
-export const MarkdownRenderer = React.memo(MarkdownRendererBase);
+export const MessageRenderer = React.memo(MessageRendererBase);

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

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { classes } from '@jupyterlab/ui-components';
+import React, { useEffect, useRef } from 'react';
+import { MarkdownRenderer, MD_RENDERED_CLASS } from '../../markdown-renderer';
+
+const WELCOME_MESSAGE_CLASS = 'jp-chat-welcome-message';
+
+/**
+ * The welcome message component.
+ * This message is displayed on top of the chat messages, and is rendered using a
+ * markdown renderer.
+ */
+export function WelcomeMessage(props: MarkdownRenderer.IOptions): JSX.Element {
+  const { rmRegistry } = props;
+  const content = props.content + '\n----\n';
+
+  // ref that tracks the content container to store the rendermime node in
+  const renderingContainer = useRef<HTMLDivElement | null>(null);
+  // ref that tracks whether the rendermime node has already been inserted
+  const renderingInserted = useRef<boolean>(false);
+
+  /**
+   * Effect: use Rendermime to render `props.markdownStr` into an HTML element,
+   * and insert it into `renderingContainer` if not yet inserted.
+   */
+  useEffect(() => {
+    const renderContent = async () => {
+      const renderer = await MarkdownRenderer.renderContent({
+        content,
+        rmRegistry
+      });
+
+      // insert the rendering into renderingContainer if not yet inserted
+      if (renderingContainer.current !== null && !renderingInserted.current) {
+        renderingContainer.current.appendChild(renderer.node);
+        renderingInserted.current = true;
+      }
+    };
+
+    renderContent();
+  }, [content]);
+
+  return (
+    <div className={classes(MD_RENDERED_CLASS, WELCOME_MESSAGE_CLASS)}>
+      <div ref={renderingContainer} />
+    </div>
+  );
+}

packages/jupyter-chat/src/index.ts

@@ -9,6 +9,7 @@ export * from './components';
 export * from './footers';
 export * from './icons';
 export * from './input-model';
+export * from './markdown-renderer';
 export * from './model';
 export * from './registry';
 export * from './selection-watcher';

packages/jupyter-chat/src/markdown-renderer.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { IRenderMime, IRenderMimeRegistry } from '@jupyterlab/rendermime';
+
+export const MD_RENDERED_CLASS = 'jp-chat-rendered-markdown';
+export const MD_MIME_TYPE = 'text/markdown';
+
+/**
+ * A namespace for the MarkdownRenderer.
+ */
+export namespace MarkdownRenderer {
+  /**
+   * The options for the MarkdownRenderer.
+   */
+  export interface IOptions {
+    /**
+     * The rendermime registry.
+     */
+    rmRegistry: IRenderMimeRegistry;
+    /**
+     * The markdown content.
+     */
+    content: string;
+  }
+
+  /**
+   * A generic function to render a markdown string into a DOM element.
+   *
+   * @param content - the markdown content.
+   * @param rmRegistry - the rendermime registry.
+   * @returns a promise that resolves to the renderer.
+   */
+  export async function renderContent(
+    options: IOptions
+  ): Promise<IRenderMime.IRenderer> {
+    const { rmRegistry, content } = options;
+
+    // initialize mime model
+    const mdStr = escapeLatexDelimiters(content);
+    const model = rmRegistry.createModel({
+      data: { [MD_MIME_TYPE]: mdStr }
+    });
+
+    const renderer = rmRegistry.createRenderer(MD_MIME_TYPE);
+
+    // step 1: render markdown
+    await renderer.renderModel(model);
+    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.
+    rmRegistry.latexTypesetter?.typeset(renderer.node);
+
+    return renderer;
+  }
+
+  /**
+   * 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`.
+   */
+  export function escapeLatexDelimiters(text: string) {
+    return text
+      .replace(/\\\(/g, '\\\\(')
+      .replace(/\\\)/g, '\\\\)')
+      .replace(/\\\[/g, '\\\\[')
+      .replace(/\\\]/g, '\\\\]');
+  }
+}

packages/jupyter-chat/style/chat.css

@@ -26,6 +26,10 @@
  * 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-rendered-markdown.jp-chat-welcome-message {
+  padding: 0 1em;
+}
+
 .jp-ThemedContainer .jp-chat-rendered-markdown .jp-RenderedHTMLCommon {
   padding-right: 0;
 }