Restore time for current user's messages, and allow showing deleted messages (#325)

brichet · web-flow · commit 6981efcd4385 · 2025-12-09T16:41:51.000+01:00
* Add a setting to show the deleted messages in chat

* Add a test for the setting

* Restore a minimal header for current user, containing message time and status (deleted/edited)

* ui-test on time visibility

* Add the config option in the documentation

* lint
diff --git a/docs/source/developers/developing_extensions/extension-providing-chat.md b/docs/source/developers/developing_extensions/extension-providing-chat.md
@@ -189,6 +189,10 @@ interface IConfig {
    * Whether to enable or not the code toolbar.
    */
   enableCodeToolbar?: boolean;
+  /**
+   * Whether to display deleted messages.
+   */
+  showDeleted?: boolean;
 }
 ```
 
diff --git a/packages/jupyter-chat/src/components/messages/header.tsx b/packages/jupyter-chat/src/components/messages/header.tsx
@@ -30,12 +30,16 @@ type ChatMessageHeaderProps = {
  * The message header component.
  */
 export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
-  // Don't render header for stacked messages or current user messages
-  if (props.message.stacked || props.isCurrentUser) {
+  const message = props.message;
+  // Don't render header for stacked messages not deleted or edited.
+  if (message.stacked && !message.deleted && !message.edited) {
     return <></>;
   }
+
+  // Flag to display only the deleted or edited information (stacked message).
+  const onlyState = message.stacked && (message.deleted || message.edited);
+
   const [datetime, setDatetime] = useState<Record<number, string>>({});
-  const message = props.message;
   const sender = message.sender;
   /**
    * Effect: update cached datetime strings upon receiving a new message.
@@ -88,10 +92,10 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         '& > :not(:last-child)': {
           marginRight: 3
         },
-        marginBottom: message.stacked ? '0px' : '12px'
+        marginBottom: message.stacked || props.isCurrentUser ? '0px' : '12px'
       }}
     >
-      {avatar}
+      {!props.isCurrentUser && !onlyState && avatar}
       <Box
         sx={{
           display: 'flex',
@@ -102,7 +106,7 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          {!message.stacked && (
+          {!onlyState && !props.isCurrentUser && (
             <Typography
               sx={{
                 fontWeight: 700,
@@ -124,17 +128,19 @@ export function ChatMessageHeader(props: ChatMessageHeaderProps): JSX.Element {
             </Typography>
           )}
         </Box>
-        <Typography
-          className={MESSAGE_TIME_CLASS}
-          sx={{
-            fontSize: '0.8em',
-            color: 'var(--jp-ui-font-color2)',
-            fontWeight: 300
-          }}
-          title={message.raw_time ? 'Unverified time' : ''}
-        >
-          {`${datetime[message.time]}${message.raw_time ? '*' : ''}`}
-        </Typography>
+        {!onlyState && (
+          <Typography
+            className={MESSAGE_TIME_CLASS}
+            sx={{
+              fontSize: '0.8em',
+              color: 'var(--jp-ui-font-color2)',
+              fontWeight: 300
+            }}
+            title={message.raw_time ? 'Unverified time' : ''}
+          >
+            {`${datetime[message.time]}${message.raw_time ? '*' : ''}`}
+          </Typography>
+        )}
       </Box>
     </Box>
   );
diff --git a/packages/jupyter-chat/src/components/messages/messages.tsx b/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} />
diff --git a/packages/jupyter-chat/src/types.ts b/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.
+   */
+  showDeleted?: boolean;
 }
 
 /**
diff --git a/packages/jupyterlab-chat-extension/schema/factory.json b/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",
diff --git a/packages/jupyterlab-chat-extension/src/index.ts b/packages/jupyterlab-chat-extension/src/index.ts
@@ -247,6 +247,7 @@ const chatConfig: JupyterFrontEndPlugin<IWidgetConfig> = {
             .composite as boolean,
           sendTypingNotification: setting.get('sendTypingNotification')
             .composite as boolean,
+          showDeleted: setting.get('showDeleted').composite as boolean,
           defaultDirectory: currentDirectory
         };
       });
diff --git a/ui-tests/tests/ui-config.spec.ts b/ui-tests/tests/ui-config.spec.ts
