chat: refactor (fixes #7401) (#7404)

Co-authored-by: dogi <[email protected]>
open-learning-exchange · Jan 11, 2024 · 08518d9 · 08518d9
1 parent 9bf11c3
commit 08518d9
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.14.8",
+  "version": "0.14.9",
   "myplanet": {
-    "latest": "v0.12.72",
+    "latest": "v0.12.78",
     "min": "v0.12.0"
   },
   "scripts": {

diff --git a/src/app/chat/chat-sidebar/chat-sidebar.component.html b/src/app/chat/chat-sidebar/chat-sidebar.component.html
@@ -8,7 +8,7 @@
         <button class="icon-button" mat-icon-button (click)="drawer.toggle()"><i class="material-icons">chevron_left</i></button>
       </div>
       <mat-form-field class="font-size-1 margin-lr-3">
-        <input matInput i18n-placeholder placeholder="Search" [(ngModel)]="titleSearch" (input)="onSearchChange()">
+        <input matInput i18n-placeholder placeholder="Search" [(ngModel)]="titleSearch" (input)="onSearchChange($event.target.value)">
       </mat-form-field>
       <button mat-icon-button color="primary" (click)="resetFilter()" [disabled]="!titleSearch && !searchType"><mat-icon>delete</mat-icon></button><br>
       <div>

diff --git a/src/app/chat/chat-sidebar/chat-sidebar.component.ts b/src/app/chat/chat-sidebar/chat-sidebar.component.ts
@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { Conversation } from '../chat.model';
 import { ChatService } from '../../shared/chat.service';
 import { CouchService } from '../../shared/couchdb.service';
 import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
@@ -25,9 +26,9 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
     this.recordSearch();
     this.filterConversations();
   }
-  conversations: any;
-  filteredConversations: any;
-  selectedConversation: any;
+  conversations: Conversation[];
+  filteredConversations: Conversation[];
+  selectedConversation: Conversation;
   isEditing: boolean;
   fullTextSearch = false;
   searchType: 'questions' | 'responses';
@@ -82,7 +83,7 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
     this.overlayOpen = !this.overlayOpen;
   }
 
-  updateConversation(conversation, title) {
+  updateConversation(conversation: Conversation, title) {
     this.couchService.updateDocument(
       this.dbName, { ...conversation, title: title, updatedDate: this.couchService.datePlaceholder }
     ).subscribe((data) => {
@@ -91,7 +92,7 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
     });
   }
 
-  submitTitle(conversation) {
+  submitTitle(conversation: Conversation) {
     if (this.titleForm[conversation._id].valid) {
       const title = this.titleForm[conversation._id].get('title').value;
       this.updateConversation(conversation, title);
@@ -102,7 +103,7 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
   }
 
   initializeFormGroups() {
-    this.conversations.forEach((conversation) => {
+    this.conversations.forEach((conversation: Conversation) => {
       this.titleForm[conversation._id] = this.formBuilder.group({
         title: [ conversation?.title, Validators.required ]
       });
@@ -125,16 +126,16 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
     );
   }
 
-  selectConversation(conversation) {
+  selectConversation(conversation: Conversation) {
     this.selectedConversation = conversation;
     this.chatService.setSelectedConversationId({
       '_id': conversation?._id,
       '_rev': conversation?._rev
     });
   }
 
-  onSearchChange() {
-    this.titleSearch = this.titleSearch;
+  onSearchChange(searchValue: string) {
+    this.titleSearch = searchValue;
   }
 
   resetFilter() {
@@ -154,28 +155,37 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
     this.filterConversations();
   }
 
+  matchesSearchTerm(value: string, searchTerm: string): boolean {
+    return value?.toLowerCase().includes(searchTerm.toLowerCase());
+  }
+
+  filterByTitle(conversation: Conversation): boolean {
+    return this.matchesSearchTerm(conversation.title, this.titleSearch);
+  }
+
+  filterByFullText(conversation: Conversation): boolean {
+    return conversation.conversations.some(chat => {
+      const queryMatch = this.matchesSearchTerm(chat.query, this.titleSearch);
+      const responseMatch = this.matchesSearchTerm(chat.response, this.titleSearch);
+      if (this.searchType === 'questions') {
+        return queryMatch;
+      } else if (this.searchType === 'responses') {
+        return responseMatch;
+      } else {
+        return queryMatch || responseMatch;
+      }
+    });
+  }
+
   filterConversations() {
     if (this.titleSearch.trim() === '' ) {
       this.getChatHistory();
     }
-
     this.filteredConversations = this.conversations?.filter(conversation => {
       if (this.fullTextSearch) {
-        const conversationMatches = conversation.conversations.some(chat => {
-          const queryMatch = chat.query?.toLowerCase().includes(this.titleSearch.toLowerCase());
-          const responseMatch = chat.response?.toLowerCase().includes(this.titleSearch.toLowerCase());
-          if (this.searchType === 'questions') {
-            return queryMatch;
-          } else if (this.searchType === 'responses') {
-            return responseMatch;
-          } else {
-            return queryMatch || responseMatch;
-          }
-        });
-        return conversationMatches;
+        return this.filterByFullText(conversation);
       }
-
-      return conversation.title?.toLowerCase().includes(this.titleSearch.toLowerCase());
+      return this.filterByTitle(conversation);
     });
   }
 }
diff --git a/src/app/chat/chat-window/chat-window.component.ts b/src/app/chat/chat-window/chat-window.component.ts
@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { CustomValidators } from '../../validators/custom-validators';
+import { ConversationForm } from '../chat.model';
 import { ChatService } from '../../shared/chat.service';
 import { CouchService } from '../../shared/couchdb.service';
 import { showFormErrors } from '../../shared/table-helpers';
@@ -20,11 +21,11 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
   conversations: any[] = [];
   selectedConversationId: any;
   promptForm: FormGroup;
-  data = {
-    user: this.userService.get().name,
-    content: '',
+  data: ConversationForm = {
     _id: '',
-    _rev: ''
+    _rev: '',
+    user: this.userService.get().name,
+    content: ''
   };
 
   @ViewChild('chat') chatContainer: ElementRef;
@@ -54,6 +55,8 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
       .subscribe(() => {
         this.selectedConversationId = null;
         this.conversations = [];
+      }, error => {
+        console.error('Error subscribing to newChatSelected$', error);
       });
   }
 
@@ -63,6 +66,8 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
       .subscribe((conversationId) => {
         this.selectedConversationId = conversationId;
         this.fetchConversation(this.selectedConversationId?._id);
+      }, error => {
+        console.error('Error subscribing to selectedConversationId$', error);
       });
   }
 
@@ -74,27 +79,34 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
 
   fetchConversation(id) {
     if (id) {
-      this.chatService.findConversations([ id ]).subscribe(
-        (conversation: Object) => {
-          const messages = conversation[0]?.conversations;
-
-          this.conversations = messages;
-        }
-      );
+      try {
+        this.chatService.findConversations([ id ]).subscribe(
+          (conversation: Object) => {
+            const messages = conversation[0]?.conversations;
+            this.conversations = messages;
+          }
+        );
+      } catch (error) {
+        console.error('Error fetching conversation: ', error);
+      }
     }
   }
 
-  scrollToBottom(): void {
+  scrollTo(position: 'top' | 'bottom'): void {
+    const target = position === 'top' ? 0 : this.chatContainer.nativeElement.scrollHeight;
     this.chatContainer.nativeElement.scrollTo({
-      top: this.chatContainer.nativeElement.scrollHeight,
+      top: target,
       behavior: 'smooth',
     });
   }
 
-  setSelectedConversation() {
+  setSelectedConversation(): void {
     if (this.selectedConversationId) {
-      this.data._id = this.selectedConversationId._id;
-      this.data._rev = this.selectedConversationId._rev;
+      this.data = {
+        ...this.data,
+        _id: this.selectedConversationId._id,
+        _rev: this.selectedConversationId._rev,
+      };
     } else {
       delete this.data._id;
       delete this.data._rev;
@@ -104,7 +116,7 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
   postSubmit() {
     this.changeDetectorRef.detectChanges();
     this.spinnerOn = true;
-    this.scrollToBottom();
+    this.scrollTo('bottom');
     this.promptForm.controls['prompt'].setValue('');
   }
 

diff --git a/src/app/chat/chat.component.ts b/src/app/chat/chat.component.ts
@@ -13,7 +13,7 @@ export class ChatComponent {
     private router: Router,
   ) {}
 
-  goBack() {
+  goBack(): void {
     this.router.navigate([ '/' ], { relativeTo: this.route });
   }
 

diff --git a/src/app/chat/chat.model.ts b/src/app/chat/chat.model.ts
@@ -0,0 +1,21 @@
+export interface ConversationForm {
+  _id: string;
+  _rev: string;
+  user: string;
+  content: string;
+}
+
+export interface Conversation {
+  _id: string;
+  _rev: string;
+  user: string;
+  conversations: Message[];
+  title: string;
+  createdDate: number;
+  updatedDate: number;
+}
+
+export interface Message {
+  query: string;
+  response: string;
+}