Fix chat focus behavior to allow copy/paste from messages (#268)

* using eventlistenr instead of onclick

* adding selected condition

* making input future-proof to interactive elemnts

* adding to old import

* refactor: simplify click event handling in ChatWidget

Author: nakul-py

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

@@ -21,8 +21,8 @@ import { IChatCommandRegistry, IMessageFooterRegistry } from '../../registers';
 import { IChatModel } from '../../model';
 import { IChatMessage, IUser } from '../../types';
 
+export const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGES_BOX_CLASS = 'jp-chat-messages-container';
-const MESSAGE_CLASS = 'jp-chat-message';
 const MESSAGE_STACKED_CLASS = 'jp-chat-message-stacked';
 
 /**

packages/jupyter-chat/src/widgets/chat-widget.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { Message } from '@lumino/messaging';
 import { Drag } from '@lumino/dragdrop';
 
-import { Chat, IInputToolbarRegistry } from '../components';
+import { Chat, IInputToolbarRegistry, MESSAGE_CLASS } from '../components';
 import { chatIcon } from '../icons';
 import { IChatModel } from '../model';
 import {
@@ -40,7 +40,27 @@ export class ChatWidget extends ReactWidget {
 
     this._chatOptions = options;
     this.id = `jupyter-chat::widget::${options.model.name}`;
-    this.node.onclick = () => this.model.input.focus();
+    this.node.addEventListener('click', (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (this.node.contains(document.activeElement)) {
+        return;
+      }
+
+      const message = target.closest(`.${MESSAGE_CLASS}`);
+      if (message) {
+        const selection = window.getSelection();
+
+        if (
+          selection &&
+          selection.toString().trim() !== '' &&
+          message.contains(selection.anchorNode)
+        ) {
+          return;
+        }
+      }
+
+      this.model.input.focus();
+    });
   }
 
   /**