Add a setting to show the deleted messages in chat

Author: brichet

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

@@ -15,7 +15,8 @@ import { Navigation } from './navigation';
 import { WelcomeMessage } from './welcome';
 import { ScrollContainer } from '../scroll-container';
 import { useChatContext } from '../../context';
-import { IChatMessage } from '../../types';
+import { IChatMessage, IConfig } from '../../types';
+import { IChatModel } from '../../model';
 
 export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
@@ -31,6 +32,9 @@ export function ChatMessages(): JSX.Element {
   const [messages, setMessages] = useState<IChatMessage[]>(model.messages);
   const refMsgBox = useRef<HTMLDivElement>(null);
   const [allRendered, setAllRendered] = useState<boolean>(false);
+  const [showDeleted, setShowDeleted] = useState<boolean>(
+    model.config.showDeleted ?? false
+  );
 
   // The list of message DOM and their rendered promises.
   const listRef = useRef<(HTMLDivElement | null)[]>([]);
@@ -60,14 +64,29 @@ export function ChatMessages(): JSX.Element {
     function handleChatEvents() {
       setMessages([...model.messages]);
     }
-
     model.messagesUpdated.connect(handleChatEvents);
 
-    return function cleanup() {
+    return () => {
       model.messagesUpdated.disconnect(handleChatEvents);
     };
   }, [model]);
 
+  /**
+   * Effect: Listen to the config change.
+   */
+  useEffect(() => {
+    function handleConfigChange(_: IChatModel, config: IConfig) {
+      if (config.showDeleted !== showDeleted) {
+        setShowDeleted(config.showDeleted ?? false);
+      }
+    }
+    model.configChanged.connect(handleConfigChange);
+
+    return () => {
+      model.configChanged.disconnect(handleConfigChange);
+    };
+  }, [model, showDeleted]);
+
   /**
    * Observe the messages to update the current viewport and the unread messages.
    */
@@ -148,47 +167,49 @@ export function ChatMessages(): JSX.Element {
           ref={refMsgBox}
           className={clsx(MESSAGES_BOX_CLASS)}
         >
-          {messages
-            .filter(message => !message.deleted)
-            .map((message, i) => {
-              renderedPromise.current[i] = new PromiseDelegate();
-              const isCurrentUser =
-                model.user !== undefined &&
-                model.user.username === message.sender.username;
-              return (
-                // extra div needed to ensure each bubble is on a new line
-                <Box
-                  key={i}
-                  sx={{
-                    ...(isCurrentUser && {
-                      marginLeft: area === 'main' ? '25%' : '10%',
-                      backgroundColor: 'var(--jp-layout-color2)',
-                      border: 'none',
-                      borderRadius: 2,
-                      padding: 2
-                    })
-                  }}
-                  className={clsx(
-                    MESSAGE_CLASS,
-                    message.stacked ? MESSAGE_STACKED_CLASS : ''
-                  )}
-                >
-                  <ChatMessageHeader
-                    message={message}
-                    isCurrentUser={isCurrentUser}
-                  />
-                  <ChatMessage
-                    message={message}
-                    index={i}
-                    renderedPromise={renderedPromise.current[i]}
-                    ref={el => (listRef.current[i] = el)}
-                  />
-                  {messageFooterRegistry && (
-                    <MessageFooterComponent message={message} />
-                  )}
-                </Box>
-              );
-            })}
+          {/* Filter the deleted message if user don't expect to see it. */}
+          {(showDeleted
+            ? messages
+            : messages.filter(message => !message.deleted)
+          ).map((message, i) => {
+            renderedPromise.current[i] = new PromiseDelegate();
+            const isCurrentUser =
+              model.user !== undefined &&
+              model.user.username === message.sender.username;
+            return (
+              // extra div needed to ensure each bubble is on a new line
+              <Box
+                key={i}
+                sx={{
+                  ...(isCurrentUser && {
+                    marginLeft: area === 'main' ? '25%' : '10%',
+                    backgroundColor: 'var(--jp-layout-color2)',
+                    border: 'none',
+                    borderRadius: 2,
+                    padding: 2
+                  })
+                }}
+                className={clsx(
+                  MESSAGE_CLASS,
+                  message.stacked ? MESSAGE_STACKED_CLASS : ''
+                )}
+              >
+                <ChatMessageHeader
+                  message={message}
+                  isCurrentUser={isCurrentUser}
+                />
+                <ChatMessage
+                  message={message}
+                  index={i}
+                  renderedPromise={renderedPromise.current[i]}
+                  ref={el => (listRef.current[i] = el)}
+                />
+                {messageFooterRegistry && (
+                  <MessageFooterComponent message={message} />
+                )}
+              </Box>
+            );
+          })}
         </Box>
       </ScrollContainer>
       <Navigation refMsgBox={refMsgBox} allRendered={allRendered} />

packages/jupyter-chat/src/types.ts

@@ -52,6 +52,10 @@ export interface IConfig {
    * Whether to send typing notification.
    */
   sendTypingNotification?: boolean;
+  /**
+   * Whether to display deleted messages or not
+   */
+  showDeleted?: boolean;
 }
 
 /**

packages/jupyterlab-chat-extension/schema/factory.json

@@ -37,6 +37,12 @@
       "default": true,
       "readOnly": false
     },
+    "showDeleted": {
+      "description": "Show the deleted messages.",
+      "type": "boolean",
+      "default": false,
+      "readOnly": false
+    },
     "defaultDirectory": {
       "description": "Default directory where to create and look for chat, the jupyter root directory if empty.",
       "type": "string",

packages/jupyterlab-chat-extension/src/index.ts

@@ -282,6 +282,7 @@ const docFactories: JupyterFrontEndPlugin<IChatFactory> = {
             .composite as boolean,
           sendTypingNotification: setting.get('sendTypingNotification')
             .composite as boolean,
+          showDeleted: setting.get('showDeleted').composite as boolean,
           defaultDirectory: currentDirectory
         };
       });