Fix scroll to last prompt

gsans · Oct 12, 2023 · a15acc0 · a15acc0
1 parent c9c2435
commit a15acc0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/src/app/custom-chat/custom-chat.component.html b/src/app/custom-chat/custom-chat.component.html
@@ -2,7 +2,7 @@
  <div class="container chat column">
  <!-- <div class="header">{{title}}</div> -->
 
- <div class="messages">
+ <div class="messages" #scroll>
  <ng-container *ngFor="let message of messages">
  <div class="message-container">
  <div class="avatar" 

diff --git a/src/app/custom-chat/custom-chat.component.scss b/src/app/custom-chat/custom-chat.component.scss
@@ -12,7 +12,9 @@
  -webkit-font-smoothing: antialiased;
 }
 
-.header, .messages, .form {
+.header,
+.messages,
+.form {
  background-color: white;
 }
 
@@ -40,7 +42,7 @@
 .custom-control {
  background-color: rgb(247, 249, 252);
  border-color: rgb(228, 233, 242);
- border-radius: 5px ;
+ border-radius: 5px;
  width: 100%;
 
  padding-bottom: 7px;
@@ -49,7 +51,6 @@
  padding-top: 7px;
 }
 
-
 .avatar {
  display: block;
  border-radius: 50%;
@@ -105,7 +106,10 @@
  padding-left: 10px;
  top: 6px;
  position: relative;
- font-family: 'Source Code Pro', Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+ font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Andale Mono WT",
+ "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
+ "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
+ "Nimbus Mono L", "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 600;
 }
@@ -119,10 +123,9 @@
  padding: 1px 4px 1px 4px;
  border-radius: 10px;
  border: 1px solid rgba(208, 208, 208, 0.5);
- box-shadow: 1px 1px 1px 0px rgba(208, 208, 208, 0.2)
+ box-shadow: 1px 1px 1px 0px rgba(208, 208, 208, 0.2);
 }
 
-
 .message-content .btn-reply {
  display: none;
  float: right;
@@ -154,7 +157,7 @@ input.mdc-text-field__input:focus {
  border-bottom-color: yellow;
 }
 
-::ng-deep markdown code[class*="language-"], 
+::ng-deep markdown code[class*="language-"],
 ::ng-deep markdown pre[class*="language-"] {
  font-size: 12px;
  font-weight: 600;
@@ -174,8 +177,8 @@ input.mdc-text-field__input:focus {
 /* Hide scrollbar for IE, Edge and Firefox */
 ::ng-deep markdown code[class*="language-"],
 ::ng-deep markdown pre[class*="language-"] {
- -ms-overflow-style: none;  /* IE and Edge */
- scrollbar-width: none;  /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
 }
 
 ::ng-deep .mermaid svg {
@@ -189,22 +192,26 @@ input.mdc-text-field__input:focus {
  caret-color: black !important;
 }
 
-
-::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label, 
-::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label--float-above {
+::ng-deep
+ .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-floating-label,
+::ng-deep
+ .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused
+ .mdc-floating-label--float-above {
  color: inherit !important;
 }
 
-::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
- border-bottom-color: inherit !important;
- border-width: 1px;
+::ng-deep
+ .mdc-text-field--filled:not(.mdc-text-field--disabled)
+ .mdc-line-ripple::after {
+ border-bottom-color: inherit !important;
+ border-width: 1px;
 }
 
 ::ng-deep .mat-mdc-form-field-focus-overlay {
-  background-color: #a3a3a3 !important; 
+ background-color: #a3a3a3 !important;
 }
 
-
 .header {
  position: relative;
 }
@@ -224,5 +231,4 @@ input.mdc-text-field__input:focus {
 
 .root {
  height: 100%;
- overflow: hidden;
 }
diff --git a/src/app/custom-chat/custom-chat.component.ts b/src/app/custom-chat/custom-chat.component.ts
@@ -21,6 +21,7 @@ declare global {
 })
 export class CustomChatComponent implements OnInit {
  @ViewChild('bottom') bottom!: ElementRef;
+ @ViewChild('scroll') scroll!: ElementRef;
  readonly clipboardButton = ClipboardButtonComponent;
  disabled: boolean = false;
 
@@ -138,7 +139,7 @@ alert(s);
  date: new Date(),
  avatar: "https://pbs.twimg.com/profile_images/1688607716653105152/iL4c9mUH_400x400.jpg",
  } as any);
- //this.scrollToBottom();
+ this.scrollToBottom();
 
  this.loading = true;
  //disable after timeout
@@ -191,7 +192,8 @@ alert(s);
 
  private scrollToBottom() {
  requestAnimationFrame(() => {
- this.bottom.nativeElement.scrollIntoView({ behavior: 'smooth' });
+ const top = this.bottom.nativeElement.offsetTop;
+ this.scroll.nativeElement.scrollTop = top;
  });
  }