Automatically tag user in message when clicking on dot

Author: Liototo

packages/collaboration/src/activitydotplot.tsx

@@ -114,14 +114,16 @@ export const ActivityDotPlot: React.FC<DotPlotProps> = ({tracker, app, chatPanel
 
     const handleDotClick = (data: any) => {
 
+        const username = data.points[0].text.split(' on ')[0];
+
         app.shell.activateById('jp-chat-panel');
 
         const chatbox = chatPanel.widgets.find(widget => widget.id === 'jp-chatbox') as Chatbox | null;
 
         if (chatbox) {
 
             chatbox.show();
-            chatbox.focusOnWritingField();
+            chatbox.focusOnWritingField(username);
 
         }
 

packages/collaboration/src/chatbox.tsx

@@ -21,14 +21,20 @@ export class Chatbox extends ReactWidget {
       this.addClass('jp-Chat-Panel')
     }
 
-    focusOnWritingField() {
+    focusOnWritingField(username?: string) {
 
       const writingField = this.node?.querySelector('.jp-Chat-WritableField') as HTMLTextAreaElement | null;
 
       if (writingField) {
 
         writingField.focus();
 
+        if (username) {
+
+          writingField.value = `@${username} `;
+
+        }
+
       }
 
     }