chat design

Author: VIvanova1

angular/src/app/shared/components/chat/chat.component.css

@@ -1,14 +1,16 @@
 .chatWrapper{
   width: 500px;
   margin: 0 auto;
-  border: solid black 1px;
   padding: 10px;
-  height: 70vh;
+  height: 77vh;
+  border-radius: 25px;
+  box-shadow: 2px 3px 13px #0000007a;
+  background: linear-gradient(to top, rgba(117, 179, 208, 1) 0%, #ace0f9 100%);
 }
 
 .input{
   position: relative;
-
+  background: white;
 }
 
 .sendBtn{
@@ -30,7 +32,7 @@
 
 .messagesWrapper{
   overflow-y: auto;
-  height: 89%;
+  height: 80%;
 }
 .messagesC{
   display: flex;
@@ -44,32 +46,49 @@
 .message{
   display: flex;
   justify-content: left;
+  flex-direction: row;
+  align-items: center;
+
+}
+
+.message .messageText{
+  background: #265978;
+  color: white;
 }
 
 .message[isme="true"]{
   align-self: end;
 }
 
+.message[isme="true"] .messageText{
+  background: white;
+  color: #265978;
+}
+
 .messageText{
   padding: 10px 40px;
   background-color: grey;
   border-radius: 100px;
   width: fit-content;
 }
 .date{
+  margin-top: 0.5px;
   font-size: 12px;
-  color: grey;
+  color: black;
 }
 
+.message[isme="true"] .date{
+  text-align: right;
+}
 
 .input{
-  border: 1px solid black;
   border-radius: 100px;
   overflow: hidden;
-  height: 50px;
+  height: fit-content;
   position: absolute;
   bottom: 0;
   width: 100%;
+  padding: 5px;
 }
 .input input{
   padding: 10px 90px 10px 10px;
@@ -87,3 +106,20 @@
   border-radius: 100px;
   cursor: pointer;
 }
+
+.sendBtn:hover, .sendBtn:active{
+  background-color: #6dcde2;
+}
+
+img{
+  width: 45px;
+  height: 45px;
+  border: 1px solid;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.recipientName h3{
+  margin: 10px 2px;
+  font-style: italic;
+}

angular/src/app/shared/components/chat/chat.component.html

@@ -1,10 +1,13 @@
 <section class="chatWrapper">
   <div class="chatC">
+    <div class="recipientName">
+      <h3>{{nameRecipient}}</h3>
+    </div>
     <div #messagesWrapper class="messagesWrapper">
       <div class="messagesC">
         <div *ngFor="let message of chatMessages" [attr.isMe]="message.authorId==me.id" class="message">
-          <div *ngIf="message.authorId==me.id" class="userPic">
-
+          <div *ngIf="message.authorId!==me.id" class="userPic">
+            <img [src]="'data:image/png;base64,'+ imageRecipient">
           </div>
           <div class="textAndDateC">
             <div class="messageText">

angular/src/app/shared/components/chat/chat.component.ts

@@ -3,6 +3,7 @@ import {ActivatedRoute} from "@angular/router";
 import * as signalR from "@microsoft/signalr";
 import {ChatService} from "../../services/chat.service";
 import {ChatMessage, Me} from "../../interfaces";
+import { UserService } from '../../services/user.service';
 
 
 @Component({
@@ -14,16 +15,20 @@ export class ChatComponent implements OnInit{
   constructor(
     private route: ActivatedRoute,
     private ChatService: ChatService,
+    private userService:UserService
   ) {
   }
 
   @ViewChild("messagesWrapper") messagesWrapper!:ElementRef
-
-  me:Me = {id: "7a83ebc1-fefd-4173-836e-f03db09cd1ee"}
+  idFromToken!:string ;
+  me:Me = {id: this.idFromToken}
   egn:string = ""
   connection:any = undefined
 
-  messageText:string=""
+  messageText:string="";
+
+  imageRecipient!:string;
+  nameRecipient!: string;
 
   chatMessages:ChatMessage[] = [
 
@@ -35,6 +40,13 @@ export class ChatComponent implements OnInit{
       this.startChatBtnClick(this.egn,localStorage.getItem("token")!)
       this.fetchChat()
     });
+    const token= localStorage.getItem('token');
+    this.idFromToken = this.userService.jwtdecrypt(token!).nameid;
+    this.me = {id: this.idFromToken};
+    setTimeout(() => {
+      this.scrollToBottom();
+    }, 500);
+    this.recipient();
   }
 
 
@@ -73,7 +85,11 @@ export class ChatComponent implements OnInit{
 
     const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}`;
 
-    this.chatMessages.push({ message: messageElement.value, messageTime: formattedDateTime, authorId: this.me.id, isRead: true})
+    this.chatMessages.push({
+      message: messageElement.value, messageTime: formattedDateTime, authorId: this.me.id, isRead: true,
+      id: '',
+      recipientId: ''
+    })
     messageElement.value =""
     setTimeout(()=>{
       this.scrollToBottom()
@@ -83,5 +99,14 @@ export class ChatComponent implements OnInit{
        this.messagesWrapper.nativeElement.scrollTop = this.messagesWrapper.nativeElement.scrollHeight;
     }
 
+    recipient(){
+      this.userService.getRecipient(this.egn).subscribe((res:any)=>{
+        console.log(res);
+        this.imageRecipient=res.userImage;
+        this.nameRecipient=res.fullName;
+      },(err)=>{
+        console.log(err);
+      })
+    }
 
 }

angular/src/app/shared/constants.ts

@@ -3,6 +3,7 @@ export const medicineEndpoint = 'API/Medicine'
 export const prescriptionEndpoint = 'API/Prescription'
 export const registerEndpoint = 'API/Authentication/Register'
 export const loginEndpoint = 'API/Authentication/Login'
+export const chatEndpoint = 'API/Chat/'
 
 
 const prescriptionId = "e617dab4-d3ca-47d7-a52c-90ad09126f61"

angular/src/app/shared/services/user.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import {API_URL, loginEndpoint, prescriptionEndpoint, registerEndpoint} from '../constants';
+import {API_URL, chatEndpoint, loginEndpoint, prescriptionEndpoint, registerEndpoint} from '../constants';
 import  * as jwt  from 'jsonwebtoken';
 import {jwtDecode} from 'jwt-decode';
 import {Profile} from "../interfaces";
@@ -55,4 +55,8 @@ export class UserService {
     return this.http.get<Profile>(prescriptionEndpoint+'?patientEgn='+personalId)
     //Prescription?patientEgn=333333333
   }
+
+  getRecipient(id:string){
+    return this.http.get(chatEndpoint+id)
+  }
 }