From 438469ae246a2873b841c7f02685675d37f9be2b Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 6 Jan 2021 12:20:02 +0100
Subject: [PATCH 1/3] Verify URL in message

---
 front/src/WebRtc/DiscussionManager.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 583b1384..83dd06a3 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -141,6 +141,15 @@ export class DiscussionManager {
         this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`;
     }
 
+    private urlify(text: string) {
+        let urlRegex = /(https?:\/\/[^\s]+)/g;
+        return text.replace(urlRegex, (url: string) => {
+            return '<a href="' + url + '" target="_blank">' + url + '</a>';
+        })
+        // or alternatively
+        // return text.replace(urlRegex, '<a href="$1">$1</a>')
+    }
+
     public addMessage(name: string, message: string, isMe: boolean = false) {
         const divMessage: HTMLDivElement = document.createElement('div');
         divMessage.classList.add('message');
@@ -160,7 +169,7 @@ export class DiscussionManager {
         divMessage.appendChild(pMessage);
 
         const userMessage: HTMLParagraphElement = document.createElement('p');
-        userMessage.innerText = message;
+        userMessage.innerText = this.urlify(message);
         userMessage.classList.add('body');
         divMessage.appendChild(userMessage);
 

From 4397ff7712a941f57c355adddbe6a891490c3f5d Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 6 Jan 2021 13:36:18 +0100
Subject: [PATCH 2/3] Update style and focus keyboard

---
 front/dist/resources/style/style.css  |  5 +++++
 front/src/WebRtc/DiscussionManager.ts | 18 +++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index fd81be1b..2e2c6c10 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -1072,17 +1072,22 @@ div.modal-report-user{
 }
 
 .discussion .messages .message p.body{
+    color: white;
     font-size: 16px;
     overflow: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
 }
+.discussion .messages .message p.a{
+    color: white;
+}
 
 .discussion .send-message{
     position: absolute;
     bottom: 45px;
     width: 220px;
     height: 26px;
+    margin-bottom: 10px;
 }
 
 .discussion .send-message input{
diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 83dd06a3..5571bcd6 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -59,6 +59,16 @@ export class DiscussionManager {
         const sendDivMessage: HTMLDivElement = document.createElement('div');
         sendDivMessage.classList.add('send-message');
         const inputMessage: HTMLInputElement = document.createElement('input');
+        inputMessage.onfocus = () => {
+            if(this.userInputManager) {
+                this.userInputManager.clearAllInputKeyboard();
+            }
+        }
+        inputMessage.onblur = () => {
+            if(this.userInputManager) {
+                this.userInputManager.initKeyBoardEvent();
+            }
+        }
         inputMessage.type = "text";
         inputMessage.addEventListener('keyup', (event: KeyboardEvent) => {
             if (event.key === 'Enter') {
@@ -169,7 +179,7 @@ export class DiscussionManager {
         divMessage.appendChild(pMessage);
 
         const userMessage: HTMLParagraphElement = document.createElement('p');
-        userMessage.innerText = this.urlify(message);
+        userMessage.innerHTML = this.urlify(message);
         userMessage.classList.add('body');
         divMessage.appendChild(userMessage);
 
@@ -197,17 +207,11 @@ export class DiscussionManager {
 
     private showDiscussion(){
         this.activeDiscussion = true;
-        if(this.userInputManager) {
-            this.userInputManager.clearAllInputKeyboard();
-        }
         this.divDiscuss?.classList.add('active');
     }
 
     private hideDiscussion(){
         this.activeDiscussion = false;
-        if(this.userInputManager) {
-            this.userInputManager.initKeyBoardEvent();
-        }
         this.divDiscuss?.classList.remove('active');
     }
     

From 73d7e798e9166b043c652329085ba6d63bf39f47 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 6 Jan 2021 17:08:13 +0100
Subject: [PATCH 3/3] Upgrade conversion

When user send multi message, scroll on last message
---
 front/src/WebRtc/DiscussionManager.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 5571bcd6..4282603b 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -152,7 +152,7 @@ export class DiscussionManager {
     }
 
     private urlify(text: string) {
-        let urlRegex = /(https?:\/\/[^\s]+)/g;
+        const urlRegex = /(https?:\/\/[^\s]+)/g;
         return text.replace(urlRegex, (url: string) => {
             return '<a href="' + url + '" target="_blank">' + url + '</a>';
         })
@@ -182,8 +182,15 @@ export class DiscussionManager {
         userMessage.innerHTML = this.urlify(message);
         userMessage.classList.add('body');
         divMessage.appendChild(userMessage);
-
         this.divMessages?.appendChild(divMessage);
+
+        //automatic scroll when there are new message
+        setTimeout(() => {
+            this.divMessages?.scroll({
+                top: this.divMessages?.scrollTop + divMessage.getBoundingClientRect().y,
+                behavior: 'smooth'
+            });
+        }, 200);
     }
 
     public removeParticipant(userId: number|string){