Use @jupyterlab/rendermime for in-chat markdown rendering (jupyterlab…

…#564) * create markdown widget and component * add rendermime * add rendermime registry requrement, activation to plugin * update var naming * use rendermime directrly in the react component * use css to emulate code styling * add @types/react-dom * create CopyButton component based on chat-code-view.tsx by @dlqqq * add CopyButton and styling * remoev unsused code * add min width to the button * omit units for 0 * use RendermimeMarkdown for ChatSettings model help * remove react-markdown dependency * revert CopyButton styling * remove comments * memoize RendermimeMarkdown (10% faster) * Update packages/jupyter-ai/src/components/copy-button.tsx Co-authored-by: Jason Weill <[email protected]> * remove copying status * update yarn.lock * detect mimetype, render latex * set latexTypesetter * MathJax typeset redered md * use rmRegistry typesetter * remove MathJaxTypesetter import * Modify CHAT_SYSTEM_PROMPT, use $ and $$ style LaTeX delimiters only * remove @jupyterlab/mathjax-extension dependency * remove @jupyterlab/builder dependency * Update packages/jupyter-ai/src/index.ts Co-authored-by: Michał Krassowski <[email protected]> * render content after attaching buttons per @krassowski * remove duplicate rmRegistry per @krassowski * update snapshots * Remove unused react-syntax-highlighter, rehype-katex, remark-math dependencies * move @types/react-dom dependency from root to packages/jupyter-ai per @krassowski * Update packages/jupyter-ai/package.json Co-authored-by: Michał Krassowski <[email protected]> * update yarn.lock * Escale LaTeX delimeters with regex instead of prompt engineering * add .jp-ai-rendermime-markdown mjx-container styling to match jlab * update escapeLatexDelimiters comment * update lockfile * update lockfile * move escapeLatexDelimiters outside of RendermimeMarkdownBase to avoid redefinitions on every rerender * adjust escapeLatexDelimiters parameter naming * Rename escapeLatexDelimiters argument from str to text * Update packages/jupyter-ai/src/components/rendermime-markdown.tsx Co-authored-by: david qiu <[email protected]> * Update escapeLatexDelimiters docstring per @dlqqq * bump react-dom version per @dlqqq * add @jupyterlab/rendermime as a direct dependenct per @dlqqq to avoid potential build errors --------- Co-authored-by: Jason Weill <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: david qiu <[email protected]>
andrii-i · Feb 8, 2024 · 1a6810a · 1a6810a
1 parent 04ef454
commit 1a6810a
Show file tree

Hide file tree

Showing 14 changed files with 16,095 additions and 12,813 deletions.
diff --git a/packages/jupyter-ai/package.json b/packages/jupyter-ai/package.json
@@ -72,11 +72,7 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
     "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-markdown": "^8.0.6",
-    "react-syntax-highlighter": "^15.5.0",
-    "rehype-katex": "^6.0.2",
-    "remark-math": "^5.1.1"
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -85,6 +81,7 @@
     "@jupyterlab/testutils": "^3.0.0",
     "@types/jest": "^26.0.0",
     "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "eslint": "^7.14.0",
@@ -127,4 +124,4 @@
     "outputDir": "jupyter_ai/labextension",
     "schemaDir": "schema"
   }
-}
+}
diff --git a/packages/jupyter-ai/src/components/chat-code-view.tsx b/packages/jupyter-ai/src/components/chat-code-view.tsx
diff --git a/packages/jupyter-ai/src/components/chat-messages.tsx b/packages/jupyter-ai/src/components/chat-messages.tsx
@@ -2,17 +2,15 @@ import React, { useState, useEffect } from 'react';
 
 import { Avatar, Box, Typography } from '@mui/material';
 import type { SxProps, Theme } from '@mui/material';
-import ReactMarkdown from 'react-markdown';
-import remarkMath from 'remark-math';
-import rehypeKatex from 'rehype-katex';
-import 'katex/dist/katex.min.css';
 
-import { ChatCodeView } from './chat-code-view';
 import { AiService } from '../handler';
-import { useCollaboratorsContext } from '../contexts/collaborators-context';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Jupyternaut } from '../icons';
+import { RendermimeMarkdown } from './rendermime-markdown';
+import { useCollaboratorsContext } from '../contexts/collaborators-context';
 
 type ChatMessagesProps = {
+  rmRegistry: IRenderMimeRegistry;
   messages: AiService.ChatMessage[];
 };
 
@@ -22,11 +20,6 @@ type ChatMessageHeaderProps = {
   sx?: SxProps<Theme>;
 };
 
-type NewTabLinkProps = {
-  children: React.ReactNode;
-  href?: string;
-};
-
 export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
   const collaborators = useCollaboratorsContext();
 
@@ -133,14 +126,6 @@ export function ChatMessages(props: ChatMessagesProps): JSX.Element {
     }
   }, [props.messages]);
 
-  function NewTabLink(props: NewTabLinkProps) {
-    return (
-      <a href={props.href ?? '#'} target="_blank" rel="noopener noreferrer">
-        {props.children}
-      </a>
-    );
-  }
-
   return (
     <Box
       sx={{
@@ -157,19 +142,10 @@ export function ChatMessages(props: ChatMessagesProps): JSX.Element {
             timestamp={timestamps[message.id]}
             sx={{ marginBottom: 3 }}
           />
-          <ReactMarkdown
-            // We are using the jp-RenderedHTMLCommon class here to get the default Jupyter
-            // markdown styling and then overriding any CSS to make it more compact.
-            className="jp-RenderedHTMLCommon jp-ai-react-markdown"
-            components={{
-              a: NewTabLink,
-              code: ChatCodeView
-            }}
-            remarkPlugins={[remarkMath]}
-            rehypePlugins={[rehypeKatex]}
-          >
-            {message.body}
-          </ReactMarkdown>
+          <RendermimeMarkdown
+            rmRegistry={props.rmRegistry}
+            markdownStr={message.body}
+          />
         </Box>
       ))}
     </Box>

diff --git a/packages/jupyter-ai/src/components/chat-settings.tsx b/packages/jupyter-ai/src/components/chat-settings.tsx
@@ -1,7 +1,5 @@
 import React, { useEffect, useState, useMemo } from 'react';
 
-import ReactMarkdown from 'react-markdown';
-
 import { Box } from '@mui/system';
 import {
   Alert,
@@ -13,22 +11,27 @@ import {
   Radio,
   RadioGroup,
   TextField,
-  CircularProgress,
-  Typography
+  CircularProgress
 } from '@mui/material';
 
 import { Select } from './select';
 import { AiService } from '../handler';
 import { ModelFields } from './settings/model-fields';
 import { ServerInfoState, useServerInfo } from './settings/use-server-info';
 import { ExistingApiKeys } from './settings/existing-api-keys';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { minifyUpdate } from './settings/minify';
 import { useStackingAlert } from './mui-extras/stacking-alert';
+import { RendermimeMarkdown } from './rendermime-markdown';
+
+type ChatSettingsProps = {
+  rmRegistry: IRenderMimeRegistry;
+};
 
 /**
  * Component that returns the settings view in the chat panel.
  */
-export function ChatSettings(): JSX.Element {
+export function ChatSettings(props: ChatSettingsProps): JSX.Element {
   // state fetched on initial render
   const server = useServerInfo();
 
@@ -287,9 +290,10 @@ export function ChatSettings(): JSX.Element {
         />
       )}
       {helpMarkdown && (
-        <Typography className="jp-ai-ChatSettings-model-help">
-          <ReactMarkdown linkTarget="_blank">{helpMarkdown}</ReactMarkdown>
-        </Typography>
+        <RendermimeMarkdown
+          rmRegistry={props.rmRegistry}
+          markdownStr={helpMarkdown}
+        />
       )}
       {lmGlobalId && (
         <ModelFields

diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx
@@ -18,16 +18,19 @@ import {
 import { SelectionWatcher } from '../selection-watcher';
 import { ChatHandler } from '../chat_handler';
 import { CollaboratorsContextProvider } from '../contexts/collaborators-context';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ScrollContainer } from './scroll-container';
 
 type ChatBodyProps = {
   chatHandler: ChatHandler;
   setChatView: (view: ChatView) => void;
+  rmRegistry: IRenderMimeRegistry;
 };
 
 function ChatBody({
   chatHandler,
-  setChatView: chatViewHandler
+  setChatView: chatViewHandler,
+  rmRegistry: renderMimeRegistry
 }: ChatBodyProps): JSX.Element {
   const [messages, setMessages] = useState<AiService.ChatMessage[]>([]);
   const [showWelcomeMessage, setShowWelcomeMessage] = useState<boolean>(false);
@@ -147,7 +150,7 @@ function ChatBody({
   return (
     <>
       <ScrollContainer sx={{ flexGrow: 1 }}>
-        <ChatMessages messages={messages} />
+        <ChatMessages messages={messages} rmRegistry={renderMimeRegistry} />
       </ScrollContainer>
       <ChatInput
         value={input}
@@ -180,6 +183,7 @@ export type ChatProps = {
   chatHandler: ChatHandler;
   globalAwareness: Awareness | null;
   themeManager: IThemeManager | null;
+  rmRegistry: IRenderMimeRegistry;
   chatView?: ChatView;
 };
 
@@ -226,9 +230,15 @@ export function Chat(props: ChatProps): JSX.Element {
             </Box>
             {/* body */}
             {view === ChatView.Chat && (
-              <ChatBody chatHandler={props.chatHandler} setChatView={setView} />
+              <ChatBody
+                chatHandler={props.chatHandler}
+                setChatView={setView}
+                rmRegistry={props.rmRegistry}
+              />
+            )}
+            {view === ChatView.Settings && (
+              <ChatSettings rmRegistry={props.rmRegistry} />
             )}
-            {view === ChatView.Settings && <ChatSettings />}
           </Box>
         </CollaboratorsContextProvider>
       </SelectionContextProvider>

diff --git a/packages/jupyter-ai/src/components/copy-button.tsx b/packages/jupyter-ai/src/components/copy-button.tsx
@@ -0,0 +1,50 @@
+import React, { useState, useCallback } from 'react';
+
+import { Box, Button } from '@mui/material';
+
+enum CopyStatus {
+  None,
+  Copied
+}
+
+const COPYBTN_TEXT_BY_STATUS: Record<CopyStatus, string> = {
+  [CopyStatus.None]: 'Copy to Clipboard',
+  [CopyStatus.Copied]: 'Copied!'
+};
+
+type CopyButtonProps = {
+  value: string;
+};
+
+export function CopyButton(props: CopyButtonProps): JSX.Element {
+  const [copyStatus, setCopyStatus] = useState<CopyStatus>(CopyStatus.None);
+
+  const copy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(props.value);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+      setCopyStatus(CopyStatus.None);
+      return;
+    }
+
+    setCopyStatus(CopyStatus.Copied);
+    setTimeout(() => setCopyStatus(CopyStatus.None), 1000);
+  }, [props.value]);
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Button
+        onClick={copy}
+        disabled={copyStatus !== CopyStatus.None}
+        aria-label="Copy To Clipboard"
+        sx={{
+          alignSelf: 'flex-end',
+          textTransform: 'none'
+        }}
+      >
+        {COPYBTN_TEXT_BY_STATUS[copyStatus]}
+      </Button>
+    </Box>
+  );
+}