@jupyter/chat 0.24.0 → 0.24.1

package/lib/components/messages/message-renderer.js

@@ -12,6 +12,11 @@ import { useChatContext } from '../../context';
 import { replaceMentionToSpan } from '../../utils';
 const RENDERED_CLASS = 'jp-chat-rendered-message';
 const DEFAULT_MIME_TYPE = 'text/markdown';
+/**
+ * The class name added to an output area widget. This is required to display cell
+ * output as a message in the chat.
+ */
+const OUTPUT_AREA_CLASS = 'jp-OutputArea';
 /**
  * The message renderer base component.
  */
@@ -22,6 +27,7 @@ function MessageRendererBase(props) {
     const [renderedContent, setRenderedContent] = useState(null);
     // Allow edition only on text messages.
     const [canEdit, setCanEdit] = useState(false);
+    const [isOutputArea, setIsOutputArea] = useState(false);
     // Each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
     const [codeToolbarDefns, setCodeToolbarDefns] = useState([]);
     useEffect(() => {
@@ -86,6 +92,7 @@ function MessageRendererBase(props) {
             // never been attached, only the node.
             // This is necessary to render latex.
             MessageLoop.sendMessage(renderer, Widget.Msg.AfterAttach);
+            setIsOutputArea(!isMarkdownRenderer);
             // Add code toolbar if markdown has been rendered.
             if (isMarkdownRenderer) {
                 const newCodeToolbarDefns = [];
@@ -110,7 +117,7 @@ function MessageRendererBase(props) {
         renderContent();
     }, [message.body, message.mime_model, message.mentions, rmRegistry]);
     return (React.createElement(React.Fragment, null,
-        renderedContent && (React.createElement("div", { className: RENDERED_CLASS, ref: node => node && node.replaceChildren(renderedContent) })),
+        renderedContent && (React.createElement("div", { className: `${RENDERED_CLASS}${isOutputArea ? ` ${OUTPUT_AREA_CLASS}` : ''}`, ref: node => node && node.replaceChildren(renderedContent) })),
         React.createElement(MessageToolbar, { edit: canEdit ? props.edit : undefined, delete: props.delete }),
         // Render a `CodeToolbar` element underneath each code block.
         // We use ReactDOM.createPortal() so each `CodeToolbar` element is able

package/package.json

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

package/src/components/messages/message-renderer.tsx

@@ -19,6 +19,12 @@ import { replaceMentionToSpan } from '../../utils';
 const RENDERED_CLASS = 'jp-chat-rendered-message';
 const DEFAULT_MIME_TYPE = 'text/markdown';
 
+/**
+ * The class name added to an output area widget. This is required to display cell
+ * output as a message in the chat.
+ */
+const OUTPUT_AREA_CLASS = 'jp-OutputArea';
+
 /**
  * The type of the props for the MessageRenderer component.
  */
@@ -56,6 +62,8 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
   // Allow edition only on text messages.
   const [canEdit, setCanEdit] = useState<boolean>(false);
 
+  const [isOutputArea, setIsOutputArea] = useState<boolean>(false);
+
   // Each element is a two-tuple with the structure [codeToolbarRoot, codeToolbarProps].
   const [codeToolbarDefns, setCodeToolbarDefns] = useState<
     Array<[HTMLDivElement, CodeToolbarProps]>
@@ -129,6 +137,8 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
       // This is necessary to render latex.
       MessageLoop.sendMessage(renderer, Widget.Msg.AfterAttach);
 
+      setIsOutputArea(!isMarkdownRenderer);
+
       // Add code toolbar if markdown has been rendered.
       if (isMarkdownRenderer) {
         const newCodeToolbarDefns: [HTMLDivElement, CodeToolbarProps][] = [];
@@ -164,7 +174,7 @@ function MessageRendererBase(props: MessageRendererProps): JSX.Element {
     <>
       {renderedContent && (
         <div
-          className={RENDERED_CLASS}
+          className={`${RENDERED_CLASS}${isOutputArea ? ` ${OUTPUT_AREA_CLASS}` : ''}`}
           ref={node => node && node.replaceChildren(renderedContent)}
         />
       )}