Keyboard issue fixed

Sunbird-AIAssistant · Jun 3, 2024 · 3b5e5da · 3b5e5da
1 parent 223d56c
commit 3b5e5da
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 19 deletions.
diff --git a/src/app/components/bot-messages/bot-messages.component.html b/src/app/components/bot-messages/bot-messages.component.html
@@ -1,4 +1,4 @@
-<ion-content id="content" [fullscreen]="true">
+<ion-content id="content" [fullscreen]="true"  [scrollEvents]="true" #content>
   <div class="bot-content" *ngIf="botMessages.length > 0">
     <div *ngFor="let msg of botMessages; let i = index">
       <div *ngIf="msg?.type !== ''" class="bot-content__message {{msg?.type}}" [ngClass]="i !==0 ? 'msg-block': ''">
@@ -15,7 +15,7 @@
             <img src="../../../assets/icon/waveform.svg" alt=""/>
           </div>
         </div>
-        <ion-text class="time" *ngIf="msg?.time" >{{msg?.time}}</ion-text>
+        <ion-text class="time" *ngIf="msg?.time">{{msg?.time}}</ion-text>
       </div>
       <div *ngIf="msg?.type === 'received' && i !== 0 && msg.timeStamp && !msg?.audio?.file && msg.message !== 'An unknown error occured, please try after sometime'" class="action-div">
         <div class="action_button" (click)="msgLiked(msg, 'like')">
@@ -29,8 +29,11 @@
       </div>
     </div>
   </div>
-  <div class="bot-input" [ngClass]="keyboardOpen ? 'keyboard-open' : ''">
-    <ion-textarea
+</ion-content>
+<ion-footer style="background-color: white;">
+
+  <div class="bot-input" [ngClass]="keyboardOpen ? 'keyboard-open' : 'keyboard-closed'">
+    <ion-input
       *ngIf="!startRecording"
       [disabled]="disabled"
       aria-label=""
@@ -41,20 +44,21 @@
       shape="round"
       [(ngModel)]="textMessage"
       #textareaField
-      (ionFocus)="onInputFocus()"
+      (focus)="scrollToBottom()"
+      (ionFocus)="scrollToBottom()"
       (ionBlur)="onInputBlur()">
-    </ion-textarea>
+    </ion-input>
     <div class="input_record" *ngIf="startRecording">
-        <ion-icon aria-hidden="true" class="audio-record-mic on-record" name="mic"></ion-icon>
-        <ion-label >{{durationDisplay}}</ion-label>
+      <ion-icon aria-hidden="true" class="audio-record-mic on-record" name="mic"></ion-icon>
+      <ion-label>{{durationDisplay}}</ion-label>
     </div>
     <div #recordbtn [ngClass]="startRecording ? 'cancel-div' : ''">
-        <ion-label class="cancel-record" *ngIf="startRecording"><span> << {{'Swipe left to cancel' | translate }}</span></ion-label>
-        <ion-button [disabled]="disabled" fill="clear" size="small" (touchstart)="onLongPressStart()" (touchend)="onLongPressEnd()">
-            <ion-icon *ngIf="textMessage.length == 0" [scrollY]="true" aria-hidden="true" class="audio-record-mic right icon" src="assets/icon/bot-audio.svg"></ion-icon>
-        </ion-button>
+      <ion-label class="cancel-record" *ngIf="startRecording"><span> << {{'Swipe left to cancel' | translate }}</span></ion-label>
+      <ion-button [disabled]="disabled" fill="clear" size="small" (touchstart)="onLongPressStart()" (touchend)="onLongPressEnd()">
+        <ion-icon *ngIf="textMessage.length == 0" aria-hidden="true" class="audio-record-mic right icon" src="assets/icon/bot-audio.svg"></ion-icon>
+      </ion-button>
     </div>
     <ion-icon *ngIf="textMessage.length > 0" class="audio-record-mic right icon" name="send" (click)="handleMessage()"></ion-icon>
   </div>
-</ion-content>
+  </ion-footer>
 
diff --git a/src/app/components/bot-messages/bot-messages.component.scss b/src/app/components/bot-messages/bot-messages.component.scss
@@ -41,7 +41,7 @@ ion-content{
     }
 }
 .bot-input {
-    position: fixed;
+    // position: fixed !important;
     bottom: 0;
     width: 100%;
     padding: 1rem;
@@ -94,6 +94,11 @@ ion-content{
     }
 }
 
+.keyboard-open {
+    transform: translateY(-50%);   }
+
+
+
 
 .audio_msg {
     display: flex;
@@ -141,4 +146,20 @@ ion-content{
 .unlike {
     transform: scale(-1);
     margin-left: 0.75rem !important;
-}
+}
+ion-content {
+    --padding-bottom: 60px; /* Adjust this value if needed to prevent the input from hiding */
+  }
+
+  ion-footer {
+    ion-toolbar {
+      display: flex;
+      align-items: center;
+      ion-input {
+        flex: 1;
+      }
+      ion-button {
+        margin-left: 10px;
+      }
+    }
+  }
diff --git a/src/app/components/bot-messages/bot-messages.component.ts b/src/app/components/bot-messages/bot-messages.component.ts
@@ -33,6 +33,8 @@ export class BotMessagesComponent  implements OnInit, AfterViewInit {
   disabled = false;
   audioRef!: HTMLAudioElement;
   keyboardOpen: boolean = false;
+  keyboardHeight: number = 0;
+
   constructor(
     private record: RecordingService,
     private ngZone: NgZone,
@@ -60,10 +62,17 @@ export class BotMessagesComponent  implements OnInit, AfterViewInit {
         this.handleBackNavigation();
       }
     })
-    Keyboard.addListener('keyboardWillShow', () => {
-      console.log('keyboard will show');
-      this.content.scrollToBottom();
-    })
+
+    Keyboard.addListener('keyboardWillShow', (info) => {
+      this.keyboardHeight = info.keyboardHeight;
+      this.adjustForKeyboard();
+    });
+
+    Keyboard.addListener('keyboardWillHide', () => {
+      this.keyboardHeight = 0;
+      this.adjustForKeyboard();
+    });
+
     this.record.startEndEvent$.subscribe((res: any) => {
       this.ngZone.run(() => {
         this.startRecording = res;
@@ -85,6 +94,28 @@ export class BotMessagesComponent  implements OnInit, AfterViewInit {
     });
   }
 
+  private adjustForKeyboard() {
+    const inputElement = document.querySelector('ion-footer');
+    if (inputElement) {
+      (inputElement as HTMLElement).style.marginBottom = `${this.keyboardHeight}px`;
+    }
+
+    const contentElement = document.querySelector('ion-content');
+    if (contentElement) {
+      (contentElement as HTMLElement).style.bottom = `${this.keyboardHeight}px`;
+    }
+    this.scrollToBottom();
+  }
+
+
+  public scrollToBottom() {
+    this.keyboardOpen = true;
+
+    setTimeout(() => {
+      this.content.scrollToBottom(300);
+    }, 100);
+  }
+
   ngOnChanges() {
     console.log('ng onchanges ', this.config);
     if (this.config?.notification && this.config?.notif?.body) {
@@ -95,10 +126,20 @@ export class BotMessagesComponent  implements OnInit, AfterViewInit {
 
   onInputFocus() {
     this.keyboardOpen = true;
+    Keyboard.addListener('keyboardWillShow', () => {
+      setTimeout(() => this.scrollToBottom(), 300);
+    });
   }
 
   onInputBlur() {
     this.keyboardOpen = false;
+    Keyboard.removeAllListeners();
+
+  }
+
+  ngOnDestroy() {
+    // Remove keyboard event listeners
+    Keyboard.removeAllListeners();
   }
 
   ionViewWillEnter() {