[market] Chat improvements:

- Add indicators and warning to public chat conversations (to better indicate that the conversation is not direct with one other party only); - Automatically scroll to new received messages when viewing the last message in the conversation.
particl · Apr 30, 2022 · 5291b8b · 5291b8b
1 parent d57e65d
commit 5291b8b
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 20 deletions.
diff --git a/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.html b/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.html
@@ -1,6 +1,13 @@
-<mat-dialog-title >
-  {{ componentData.title }}
-  <p class="help-text">{{ componentData.subtitle }}</p>
+<mat-dialog-title fxLayout fxLayoutAlign="stretch center">
+  <div class="selected-conversation" fxLayout fxLayoutAlign="flex-start center" [matTooltip]="isPrivateChat ? 'Direct conversation between yourself and the other party only' : 'Multi-party public chat'" matTooltipPosition="after">
+    <div class="avatar">
+      <mat-icon [fontIcon]="isPrivateChat ? 'part-person' : 'part-people'"></mat-icon>
+    </div>
+    <div class="text">
+      <div class="conversation-title">{{ componentData.title }}</div>
+      <div class="conversation-subtitle">{{ componentData.subtitle }}</div>
+    </div>
+  </div>
 </mat-dialog-title>
 
 <button mat-button color="warn" class="modal-close" mat-dialog-close tabindex="-1">
@@ -13,5 +20,6 @@
       [inputChannelType]="componentData.channelType"
       [highlitedAddress]="componentData.highlitedAddress"
       [highlitedAddressLabel]="componentData.highlitedLabel"
+      [doSmoothScroll]="true"
       style="height:inherit;"></market-conversation>
 </mat-dialog-content>
diff --git a/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.scss b/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.scss
@@ -16,3 +16,29 @@ mat-dialog-title {
   padding-right: 1em;
   padding-top: 0.8em;
 }
+
+.selected-conversation {
+  font-size: 15px;
+  line-height: 1.4;
+  margin-bottom: 12px;
+  .avatar {
+    --avatar-size: 36px;
+    background: var(--color-primary);
+    color: var(--color-white);
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    line-height: var(--avatar-size);
+    text-align: center;
+    border-radius: 50%;
+    font-size: 20px;
+    margin: 0 18px 0 0;
+  }
+  .conversation-title {
+    font-size: 16px;
+  }
+  .conversation-subtitle {
+    font-size: 13px;
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+}
diff --git a/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.ts b/src/app/main-market/shared/chat-conversation-modal/chat-conversation-modal.component.ts
@@ -28,6 +28,7 @@ export interface ChatConversationModalInputs {
 export class ChatConversationModalComponent {
 
   readonly componentData: ChatConversationModalInputs;
+  readonly isPrivateChat: boolean;
 
 
   constructor(
@@ -50,5 +51,7 @@ export class ChatConversationModalComponent {
       this.componentData.highlitedAddress = getValueOrDefault(this.data.highlitedAddress, 'string', '');
       this.componentData.highlitedLabel = getValueOrDefault(this.data.highlitedLabel, 'string', '');
     }
+
+    this.isPrivateChat = this.componentData.channelType === ChatChannelType.ORDERITEM;
   }
 }
diff --git a/src/app/main-market/shared/chat-conversation/chat-conversation.component.html b/src/app/main-market/shared/chat-conversation/chat-conversation.component.html
@@ -39,19 +39,32 @@
 
     <section class="input-container">
       <div class="conversation-input">
-        <mat-form-field class="message-input" color="accent">
-          <textarea matInput
-              [formControl]="textInput"
-              placeholder="Send message"
-              cdkTextareaAutosize
-              #autosize="cdkTextareaAutosize"
-              cdkAutosizeMinRows="1"
-              cdkAutosizeMaxRows="2"></textarea>
-          <mat-hint align="end">{{ textInput.value.length }}/{{ MAX_MESSAGE_LENGTH }}</mat-hint>
-        </mat-form-field>
-        <button mat-raised-button class="small action-button" matTooltip="Send" color="accent" matTooltipPosition="before" appDebounceClick (debounceClick)="requestMessageSending()" [disabled]="isLoading || textInput.invalid">
-          <mat-icon fontIcon="part-arrow-right"></mat-icon>
-        </button>
+        <ng-container *ngIf="isPublicChat && !agreedToPublicPostingWarning">
+          <p>
+            This is a publicly visible conversation: all messages can be viewed by anyone with access to the Listing Item. Please <b>do not</b> share personal information and details here, and be wary of anyone asking for personal identifying details!
+          </p>
+          <button mat-raised-button class="small" color="warn" appDebounceClick (debounceClick)="agreeToPublicPostingWarning()" [disabled]="isLoading">
+            <mat-icon fontIcon="part-check"></mat-icon>
+            I understand
+          </button>
+        </ng-container>
+
+        <ng-container *ngIf="!isPublicChat || agreedToPublicPostingWarning">
+          <mat-form-field class="message-input" color="accent">
+            <textarea matInput
+                [formControl]="textInput"
+                placeholder="Send message"
+                cdkTextareaAutosize
+                #autosize="cdkTextareaAutosize"
+                cdkAutosizeMinRows="1"
+                cdkAutosizeMaxRows="2"></textarea>
+            <mat-hint align="end">{{ textInput.value.length }}/{{ MAX_MESSAGE_LENGTH }}</mat-hint>
+          </mat-form-field>
+          <button mat-raised-button class="small action-button" matTooltip="Send" color="accent" matTooltipPosition="before" appDebounceClick (debounceClick)="requestMessageSending()" [disabled]="isLoading || textInput.invalid">
+            <mat-icon fontIcon="part-arrow-right"></mat-icon>
+          </button>
+        </ng-container>
+
       </div>
     </section>
 

diff --git a/src/app/main-market/shared/chat-conversation/chat-conversation.component.scss b/src/app/main-market/shared/chat-conversation/chat-conversation.component.scss
@@ -54,6 +54,7 @@
         overflow: hidden;
         white-space: nowrap;
         font-weight: 500;
+        margin-top: 0.5em;
         padding: 3px 6px;
         border-radius: var(--radius);
         font-family: var(--font-mono);

diff --git a/src/app/main-market/shared/chat-conversation/chat-conversation.component.ts b/src/app/main-market/shared/chat-conversation/chat-conversation.component.ts
@@ -57,11 +57,14 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
   @Input() inputChannelType: ChatChannelType = ChatChannelType.OTHER;
   @Input() highlitedAddress: string = '';
   @Input() highlitedAddressLabel: string = '';
+  @Input() doSmoothScroll: boolean = false;
 
   @ViewChild('chatHistoryPane', {static: true}) chatHistoryPane: ElementRef;
 
   readonly MAX_MESSAGE_LENGTH: number = 500;
   readonly MAX_ADDRESS_LABEL_LENGTH: number = 100;
+  isPublicChat: boolean = true;
+  agreedToPublicPostingWarning: boolean = false;
 
   messageList: ChatMessage[] = [];
   hasMoreMessages: boolean = false;
@@ -79,6 +82,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
   private readonly MESSAGE_COUNT: number = 15;
   private earliestMessageId: string = '';
   private savedScrollHeight: number = 0;
+  private scrollHeightMax: number = 0;
 
 
   constructor(
@@ -91,6 +95,9 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
 
 
   ngOnInit() {
+    this.isPublicChat = this.inputChannelType !== ChatChannelType.ORDERITEM;
+    this.agreedToPublicPostingWarning = !this.isPublicChat;
+
     if (
       !(getValueOrDefault(this.inputChannel, 'string', '').length > 0)
       || this.inputChannelType === ChatChannelType.OTHER
@@ -132,7 +139,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
 
         this._cdr.detectChanges();
 
-        this.chatHistoryPane.nativeElement.scrollTop = this.chatHistoryPane.nativeElement.scrollHeight;
+        this.scrollToBottom();
       }),
       takeUntil(this.destroy$)
     );
@@ -158,9 +165,16 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
           this.messageList = [];
           this.earliestMessageId = messages[0].id;
         }
+
         this.messageList.push(...messages);
-        this._store.dispatch(new MarketUserActions.ChatChannelRead(this.inputChannel, this.inputChannelType));
-        this._cdr.detectChanges();
+        if (this.selectedChatMessage === null) {
+          this._store.dispatch(new MarketUserActions.ChatChannelRead(this.inputChannel, this.inputChannelType));
+          const doScroll = (this.scrollHeightMax > 0) && (this.chatHistoryPane.nativeElement.scrollTop > (this.scrollHeightMax - 70));
+          this._cdr.detectChanges();
+          if (doScroll) {
+            this.scrollToBottom();
+          }
+        }
       }),
       takeUntil(this.destroy$)
     );
@@ -187,6 +201,11 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
   }
 
 
+  agreeToPublicPostingWarning() {
+    this.agreedToPublicPostingWarning = true;
+  }
+
+
   showMessageDetails(message: ChatMessage) {
     if (!message) {
       return;
@@ -203,6 +222,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
       this.selectedMessageLabelInput.setValue('', {emitEvent: false});
       this._cdr.detectChanges();
       this.chatHistoryPane.nativeElement.scrollTop = this.savedScrollHeight;
+      this._store.dispatch(new MarketUserActions.ChatChannelRead(this.inputChannel, this.inputChannelType));
     }
   }
 
@@ -269,7 +289,7 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
         }
         this.isLoading = false;
         this._cdr.detectChanges();
-        this.chatHistoryPane.nativeElement.scrollTop = this.chatHistoryPane.nativeElement.scrollHeight;
+        this.scrollToBottom();
       }),
     ).subscribe();
   }
@@ -413,4 +433,13 @@ export class ChatConversationComponent implements OnInit, OnDestroy {
     return chats;
   }
 
+  private scrollToBottom() {
+    if (this.doSmoothScroll) {
+      this.chatHistoryPane.nativeElement.scrollTo({top: this.chatHistoryPane.nativeElement.scrollHeight, behavior: 'smooth' });
+    } else {
+      this.chatHistoryPane.nativeElement.scrollTop = this.chatHistoryPane.nativeElement.scrollHeight;
+    }
+    this.scrollHeightMax = this.chatHistoryPane.nativeElement.scrollTop;
+  }
+
 }