From 6657461150eecc2c15b81ac34e4089cdc7033c2b Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Fri, 31 Jan 2020 10:41:52 +0900
Subject: [PATCH 1/4] refactoring of chat search

---
 .../components/messages.component.ts          | 11 ++--
 .../src/app/store/messenger/event/actions.ts  |  2 +-
 .../src/app/store/messenger/event/effects.ts  | 52 +++++++++++--------
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index f6e766fb..0f23b8c9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -1772,10 +1772,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     // CASE :: searching text after retrieve All event Infos.
     this.store.dispatch(
       EventStore.infoAll({
-        roomSeq: this.roomInfoSubject.value.roomSeq,
-        baseSeq: this.eventListSubject.value[0].seq,
-        requestCount:
-          environment.productConfig.CommonSetting.eventRequestDefaultCount * 2
+        req: {
+          roomSeq: this.roomInfoSubject.value.roomSeq,
+          baseSeq: this.eventListSubject.value[0].seq,
+          requestCount:
+            environment.productConfig.CommonSetting.eventRequestDefaultCount * 2
+        },
+        infoList: undefined
       })
     );
 
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
index 437b3bcf..1421f07b 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/actions.ts
@@ -50,7 +50,7 @@ export const infoForSearchEnd = createAction(
 
 export const infoAll = createAction(
   '[Messenger::Event] Info All',
-  props<InfoRequest>()
+  props<{ req: InfoRequest; infoList: Info<EventJson>[] }>()
 );
 
 export const fileInfo = createAction(
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
index b58bd589..15c02f1f 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
@@ -412,7 +412,10 @@ export class Effects {
             )
           )
         ),
-        switchMap(([req, processing]) => {
+        switchMap(([params, processing]) => {
+          const req = params.req;
+          const mergedInfoList = params.infoList;
+
           return this.eventProtocolService.info(req).pipe(
             map(async res => {
               switch (res.SSVC_TYPE) {
@@ -421,31 +424,36 @@ export class Effects {
                   break;
                 case SSVC_TYPE_EVENT_INFO_RES:
                   {
-                    this.store.dispatch(
-                      infoMoreSuccess({
-                        infoList,
-                        res: res as InfoResponse,
-                        remainInfo:
-                          infoList.length === req.requestCount ? true : false
-                      })
-                    );
-
-                    if (infoList.length > 0) {
-                      if (infoList.length === req.requestCount && processing) {
-                        // 재귀
-                        this.store.dispatch(
-                          infoAll({
+                    if (
+                      infoList.length > 0 &&
+                      infoList.length >= req.requestCount &&
+                      processing
+                    ) {
+                      // 재귀
+                      this.store.dispatch(
+                        infoAll({
+                          req: {
                             roomSeq: req.roomSeq,
                             baseSeq: infoList[0].seq,
                             requestCount: req.requestCount
-                          })
-                        );
-                      } else {
-                        if (infoList.length < req.requestCount) {
-                          this.store.dispatch(infoForSearchEnd({}));
-                        }
-                      }
+                          },
+                          infoList: !!mergedInfoList
+                            ? [...infoList, ...mergedInfoList]
+                            : infoList
+                        })
+                      );
                     } else {
+                      this.store.dispatch(
+                        infoMoreSuccess({
+                          infoList: !!mergedInfoList
+                            ? [...infoList, ...mergedInfoList]
+                            : infoList,
+                          res: res as InfoResponse,
+                          remainInfo:
+                            infoList.length === req.requestCount ? true : false
+                        })
+                      );
+
                       this.store.dispatch(infoForSearchEnd({}));
                     }
                   }

From 5ba9d7fe9c87c032b69e6241409e31ed1f49f0b6 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Fri, 31 Jan 2020 11:29:06 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=93=9C=EB=A0=88?=
 =?UTF-8?q?=EA=B7=B8=20=EA=B0=80=EC=9D=B4=EB=93=9C=20=EB=AC=B8=EA=B5=AC=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B0=8F=20=EC=B5=9C?=
 =?UTF-8?q?=EC=86=8C=EC=82=AC=EC=9D=B4=EC=A6=88=20=EB=8C=80=ED=99=94?=
 =?UTF-8?q?=EB=B0=A9=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=EC=88=98=EC=A0=95(?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messages.component.scss        |  2 +-
 .../message-box/attach-file.component.scss    |  1 +
 .../message-box/information.component.scss    |  4 +-
 .../message-box/video.component.scss          | 40 +++++++++++--------
 .../src/assets/scss/partials/_forms.scss      |  2 +-
 .../src/assets/scss/partials/_icons.scss      |  2 +
 .../file-upload-queue.component.html          |  7 +++-
 .../file-upload-queue.component.scss          | 14 +++++++
 8 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 7f90f256..1ee9592c 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -126,7 +126,7 @@
 
     .file-drop-zone {
       position: absolute;
-      padding: 10px 10px 0 10px;
+      padding: 10px;
       background-color: rgb(54, 54, 54, 0.8);
       bottom: 0;
       width: 100%;
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
index 83125ac5..1a631ff9 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
@@ -1,4 +1,5 @@
 $tablet-s-width: 768px;
+
 .bubble-main {
   display: flex;
   flex-direction: row;
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss
index ee814b3b..028f852d 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss
@@ -6,10 +6,10 @@
   background-color: rgba(0, 0, 0, 0.4);
   padding: 6px 20px;
   color: #ffffff;
-  border-radius: 100px;
+  border-radius: 20px;
   justify-content: center;
   justify-items: center;
   margin: 10px 0 20px;
   font-size: 0.9em;
-  line-height:1.2em
+  line-height: 1.2em;
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
index 06ff62ee..1515c400 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
@@ -1,11 +1,13 @@
+$tablet-s-width: 768px;
+
 .bubble-main {
-  display:flex;
+  display: flex;
   flex-direction: row;
   padding: 14px;
-  .file-thumbimg{
-    display:inline-flex;
+  .file-thumbimg {
+    display: inline-flex;
     img {
-      height:140px;
+      height: 140px;
       padding-right: 20px;
       background-repeat: no-repeat;
     }
@@ -15,8 +17,8 @@
     flex-direction: column;
     text-align: left;
     line-height: 1.6em;
-    min-width:100px;
-    margin-top:10px;
+    min-width: 100px;
+    margin-top: 10px;
     .file-name {
       font-size: 14px;
       font-weight: bold;
@@ -41,29 +43,35 @@
     width: 100%;
     li {
       width: 50%;
-      height:100%;
+      height: 100%;
       display: inline-block;
       text-align: center;
       align-items: center;
       font-size: 13px;
       border-right: 1px solid #dddddd;
+      @media screen and (max-width: #{$tablet-s-width}) {
+        width: 30%;
+      }
       &:last-child {
         border-right: none;
+        @media screen and (max-width: #{$tablet-s-width}) {
+          width: 70%;
+        }
       }
       .mat-button {
         width: 100%;
-        height:100%;
+        height: 100%;
         display: block;
       }
     }
-    &.expired{
-    li{
-      width:100%;
-      white-space: nowrap;
-      color:#999999;
-      align-items: center;
-      line-height:40px;
+    &.expired {
+      li {
+        width: 100%;
+        white-space: nowrap;
+        color: #999999;
+        align-items: center;
+        line-height: 40px;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
index 6949d094..e16e86d5 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
@@ -114,5 +114,5 @@ textarea {
 }
 
 .mat-error {
-  font-size: 0.8em;
+  font-size: 0.84em;
 }
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss
index c57aecca..698fb0ee 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss
@@ -34,6 +34,8 @@ mat-icon {
   border: none;
   width: 20px;
   height: 20px;
+  justify-items: center;
+  justify-content: center;
   i {
     font-family: 'material-outline-icons';
     font-size: 20px;
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
index dcfeef8a..48950867 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
@@ -34,8 +34,11 @@
     </div>
   </div>
 
-  <div *ngIf="uploadItems" fxLayout="column">
-    <div>{{ 'common.file.dropZoneForUpload' | translate }}</div>
+  <div *ngIf="uploadItems" fxLayout="column" class="uploadItems">
+    <div class="msg-guide">
+      <span class="icon-img"><i class="mid mdi-arrow-expand-all"></i></span
+      >{{ 'common.file.dropZoneForUpload' | translate }}
+    </div>
     <div></div>
   </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
index d5a9ad54..8d0975cb 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
@@ -38,4 +38,18 @@
       padding: 6px 10px;
     }
   }
+  .uploadItems {
+    width: 100%;
+    font-size: 0.9em;
+    .msg-guide {
+      display: flex;
+      flex: row;
+      color: #ffffff;
+      justify-content: center;
+      align-items: center;
+      .icon-img {
+        margin-right: 6px;
+      }
+    }
+  }
 }

From ae55cee3ab81dc75332311fba6ba6bbbfba4c362 Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Fri, 31 Jan 2020 13:12:21 +0900
Subject: [PATCH 3/4] refactoring of chat room

---
 .../src/app/store/messenger/event/effects.ts  |  3 +
 .../lib/components/message-box.component.html |  1 +
 .../lib/components/message-box.component.ts   | 11 +++-
 .../src/lib/components/messages.component.ts  | 59 ++++++++++++-------
 4 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
index 15c02f1f..3c969092 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts
@@ -424,6 +424,9 @@ export class Effects {
                   break;
                 case SSVC_TYPE_EVENT_INFO_RES:
                   {
+                    if (!!infoList && 0 < infoList.length) {
+                      infoList = infoList.sort((a, b) => a.seq - b.seq);
+                    }
                     if (
                       infoList.length > 0 &&
                       infoList.length >= req.requestCount &&
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html
index d41f7e23..a6ab93e7 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html
@@ -23,6 +23,7 @@
   </ucap-chat-message-box-date-splitter>
 
   <div
+    #mbChatRow
     class="chat-row"
     [@shake]="{
       value: shakeIt,
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts
index 23026d80..57a4d3b5 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts
@@ -96,6 +96,9 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
   @ViewChild('mbContainer', { static: true })
   mbContainer: ElementRef<HTMLElement>;
 
+  @ViewChild('mbChatRow', { static: true })
+  mbChatRow: ElementRef<HTMLElement>;
+
   EventType = EventType;
 
   moment = moment;
@@ -104,13 +107,17 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
   existReadHere = false;
   shakeIt = false;
 
+  get offsetTop() {
+    return this.mbChatRow.nativeElement.offsetTop;
+  }
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
   ) {}
 
   ngOnInit() {
-    this.mbContainer.nativeElement.classList.add('hide');
+    // this.mbContainer.nativeElement.classList.add('hide');
   }
 
   ngAfterViewInit(): void {
@@ -122,7 +129,7 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
     //   .nativeElement.offsetHeight + 20}px`;
     // this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer
     //   .nativeElement.offsetHeight + 20}px`;
-    this.mbContainer.nativeElement.classList.remove('hide');
+    // this.mbContainer.nativeElement.classList.remove('hide');
   }
 
   /**
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index 782e402c..3544cd61 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@@ -122,6 +122,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   chatMessageBoxList: QueryList<MessageBoxComponent>;
 
   storedScrollItem: Info<EventJson>; // 이전대화를 불러올 경우 현재 스크롤 포지션 유지를 위한 값. 0 이면 초기로딩.
+  storedScrollItemOffsetTop: number | undefined;
   scrollUpInitalized = false; // ps 에서 초기 로딩시 scroll reach start 이벤트 발생 버그를 우회하기 위한 init 값으로 scrollUp 에 의해 true 로 된다.
   firstCheckReadHere = true;
   initRoomLastEventSeq: number;
@@ -395,6 +396,17 @@ export class MessagesComponent implements OnInit, OnDestroy {
     this.storedScrollItem = this.eventList[
       this.virtualScroller.viewPortInfo.startIndex
     ];
+
+    const chatMessageBox = this.chatMessageBoxList.find(
+      el =>
+        el.message.seq ===
+        this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
+    );
+    if (!!chatMessageBox) {
+      this.storedScrollItemOffsetTop = chatMessageBox.offsetTop;
+    } else {
+      this.storedScrollItemOffsetTop = 0;
+    }
   }
 
   swapScrollTo(
@@ -408,14 +420,23 @@ export class MessagesComponent implements OnInit, OnDestroy {
     if (!!preCallback) {
       preCallback();
     }
-    this.virtualScroller.scrollInto(to, true, 0, 0, () => {
-      setTimeout(() => {
-        if (!!postCallback) {
-          postCallback();
-        }
-        this.postSwapScroll(useHide, useSwap);
-      });
-    });
+
+    this.virtualScroller.scrollInto(
+      to,
+      true,
+      undefined !== this.storedScrollItemOffsetTop
+        ? -this.storedScrollItemOffsetTop
+        : 0,
+      0,
+      () => {
+        setTimeout(() => {
+          if (!!postCallback) {
+            postCallback();
+          }
+          this.postSwapScroll(useHide, useSwap);
+        });
+      }
+    );
   }
 
   preSwapScroll(useHide: boolean, useSwap: boolean) {
@@ -465,15 +486,12 @@ export class MessagesComponent implements OnInit, OnDestroy {
           true
         );
       } else {
-        const index = this.eventList.findIndex(
-          i => i.seq === this.storedScrollItem.seq
-        );
-
         this.swapScrollTo(
-          1 <= index ? this.eventList[index - 1] : this.eventList[0],
+          this.storedScrollItem,
           () => {},
           () => {
             this.storedScrollItem = undefined;
+            this.storedScrollItemOffsetTop = undefined;
           },
           true,
           true
@@ -525,18 +543,17 @@ export class MessagesComponent implements OnInit, OnDestroy {
     // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다.
     this.scrollUpInitalized = false;
     this.storedScrollItem = undefined;
+    this.storedScrollItemOffsetTop = undefined;
   }
 
   clear() {}
 
   gotoPosition(eventSeq: number) {
     if (!!this.virtualScroller) {
-      const index = this.eventList.findIndex(v => v.seq === eventSeq);
-      this.virtualScroller.scrollInto(
-        1 <= index ? this.eventList[index - 1] : this.eventList[0],
-        true,
-        0,
-        100,
+      const e = this.eventList.find(v => v.seq === eventSeq);
+      this.swapScrollTo(
+        e,
+        () => {},
         () => {
           const chatMessageBox = this.chatMessageBoxList.find(
             el => el.message.seq === eventSeq
@@ -544,7 +561,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
           if (!!chatMessageBox) {
             chatMessageBox.shake();
           }
-        }
+        },
+        true,
+        true
       );
     }
   }

From ba07dc585e96750874e679d15ea7f1bfd60b443f Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Fri, 31 Jan 2020 13:46:23 +0900
Subject: [PATCH 4/4] bug fixed

---
 .../lib/components/message-box.component.ts   | 19 +++++++--------
 .../src/lib/components/messages.component.ts  | 24 ++++++++++++++-----
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts
index 57a4d3b5..e8f362b3 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts
@@ -112,24 +112,23 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
   }
 
   constructor(
+    private elementRef: ElementRef<HTMLElement>,
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
   ) {}
 
   ngOnInit() {
-    // this.mbContainer.nativeElement.classList.add('hide');
+    this.mbContainer.nativeElement.classList.add('hide');
   }
 
   ngAfterViewInit(): void {
-    // this.logger.debug(
-    //   'offsetHeight' + this.message.seq,
-    //   this.mbContainer.nativeElement.offsetHeight
-    // );
-    // this.elementRef.nativeElement.style.height = `${this.mbContainer
-    //   .nativeElement.offsetHeight + 20}px`;
-    // this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer
-    //   .nativeElement.offsetHeight + 20}px`;
-    // this.mbContainer.nativeElement.classList.remove('hide');
+    this.logger.debug(
+      'offsetHeight' + this.message.seq,
+      this.mbContainer.nativeElement.offsetHeight
+    );
+    this.elementRef.nativeElement.style.height = `${this.mbContainer.nativeElement.offsetHeight}px`;
+    this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer.nativeElement.offsetHeight}px`;
+    this.mbContainer.nativeElement.classList.remove('hide');
   }
 
   /**
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index 3544cd61..c866c1fe 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@@ -31,6 +31,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Observable, Subscription } from 'rxjs';
 import { VirtualScrollerComponent, IPageInfo } from 'ngx-virtual-scroller';
 import { MessageBoxComponent } from './message-box.component';
+import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 
 @Component({
   selector: 'ucap-chat-messages',
@@ -403,7 +404,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
         this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
     );
     if (!!chatMessageBox) {
-      this.storedScrollItemOffsetTop = chatMessageBox.offsetTop;
+      this.storedScrollItemOffsetTop =
+        chatMessageBox.offsetTop -
+        this.virtualScroller.viewPortInfo.scrollStartPosition;
     } else {
       this.storedScrollItemOffsetTop = 0;
     }
@@ -414,7 +417,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
     preCallback: () => void,
     postCallback: () => void,
     useHide: boolean,
-    useSwap: boolean
+    useSwap: boolean,
+    addtionalOffset?: number
   ) {
     this.preSwapScroll(useHide, useSwap);
     if (!!preCallback) {
@@ -426,6 +430,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
       true,
       undefined !== this.storedScrollItemOffsetTop
         ? -this.storedScrollItemOffsetTop
+        : undefined !== addtionalOffset
+        ? -addtionalOffset
         : 0,
       0,
       () => {
@@ -549,6 +555,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
   clear() {}
 
   gotoPosition(eventSeq: number) {
+    const viewPortItemIndex = this.virtualScroller.viewPortItems.findIndex(
+      v => v.seq === eventSeq
+    );
+
     if (!!this.virtualScroller) {
       const e = this.eventList.find(v => v.seq === eventSeq);
       this.swapScrollTo(
@@ -562,8 +572,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
             chatMessageBox.shake();
           }
         },
-        true,
-        true
+        -1 === viewPortItemIndex,
+        -1 === viewPortItemIndex,
+        50
       );
     }
   }
@@ -577,13 +588,14 @@ export class MessagesComponent implements OnInit, OnDestroy {
     event.stopPropagation();
 
     if (this.scrollUpInitalized && this.eventRemained) {
+      this.virtualScroller.scrollToPosition(0);
+      this.virtualScroller.invalidateCachedMeasurementAtIndex(0);
+
       this.storeScrollPosition();
 
       this.preSwapScroll(true, true);
 
       this.moreEvent.emit(this.eventList[0].seq);
-
-      this.virtualScroller.invalidateCachedMeasurementAtIndex(0);
     }
   }