fix(*): Add messages with spread (#1046)

* fix(*): Add messages with spread

* fix(*): Update the chat's messages directly

Author: gedinakova

samples/interactions/chat/features/src/index.ts

@@ -105,15 +105,15 @@ igc-avatar::part(base) {
 
     this.chat.options = { ...this.chat.options, isTyping: true, suggestions: [] };
     const newMessage = e.detail;
-    this.messages.push(newMessage);
+    this.chat.messages = [ ...this.chat.messages, newMessage];
 
     const responseMessage = {
       id: Date.now().toString(),
       text: 'Our support team is currently unavailable. We\'ll get back to you as soon as possible.',
       sender: 'support',
       timestamp: Date.now().toString(),
     };
-    this.messages.push(responseMessage);
+    this.chat.messages = [ ...this.chat.messages, responseMessage];
     this.chat.draftMessage = { text: '', attachments: [] };
     this.chat.options = { ...this.chat.options, isTyping: false};
   }

samples/interactions/chat/overview/src/index.ts

@@ -83,7 +83,7 @@ export class ChatOverview {
   public onMessageCreated = (e: CustomEvent) => {
     e.preventDefault();
     const newMessage = e.detail;
-    this.messages.push(newMessage);
+    this.chat.messages = [ ...this.chat.messages, newMessage];
     this.chat.options = { ...this.chat.options, isTyping: true, suggestions: [] };
 
     const messageText = e.detail.text.toLowerCase();
@@ -99,7 +99,9 @@ export class ChatOverview {
       sender: 'support',
       timestamp: Date.now().toString(),
     };
-    this.messages.push(responseMessage);
+    
+    this.chat.messages = [ ...this.chat.messages, responseMessage];
+
     this.chat.draftMessage = { text: '', attachments: [] };
     this.chat.options = { ...this.chat.options, isTyping: false};
   }