async chat closing on completion about amazon-connect-chat-ui-examples HOT 12 CLOSED

Hi, antoniotony. I'm glad you like the example!

Yes, you can do this. You can do this by overwriting the footer config and invoking your own function to end the chat. You will also need to add logic to disable the end chat button and disable the user sending more text after the chat is over. Here are two places where you need to modify the sample asyncChatUX index.html file:

1. Add a footer config after the header config:

connect.ChatInterface.init({
  containerId: 'root',
  headerConfig: {
      isHTML: true,
      render: () => {
          return  (`
              <div class="header-wrapper">
                  <h2 class="welcome-text">Chat Demo</h2>
                  <p id="chatDescription">You can modify this header or use the default.</p>
              </div>
          `)
      }
  },
  footerConfig: {
      isHTML: true,
      render: (onEndChat) => {
          this.testEndFunction = function(){
              chatSession.client.session.disconnectParticipant()
          };
          return (`
              <div class="footer-actions">
                  <div class="button-wrapper">
                      <button class="action-button" type="default" onclick="testEndFunction()">
                          End chat
                      </button>
                  </div>
              </div> 
          `)
      }
  }
});

2. Remove resetForm() from the onChatDisconnected function:
   chatSession.onChatDisconnected(function (data) { //resetForm(); console.log("do nothing"); });

from amazon-connect-chat-ui-examples.

Hi -- I'm helping antoniotony with this integration.

We implemented the custom footer / end function according to your suggestion... however calling chatSession.client.session.disconnectParticipant() still clears the chat window.

Any suggestions or workarounds?? Thank you!

from amazon-connect-chat-ui-examples.

Did you also do step #2 to remove resetForm() ? If so, can you share your code and the logs around the disconnect?

Also, make sure you added the footer config to each call to connect.ChatInterface.init()

from amazon-connect-chat-ui-examples.

Thanks for your help! Code is here:

https://github.com/antoninotony/laitschat/blob/master/index.html

Yes we removed resetForm() and added the footer config to both connect.ChatInterface.init() calls.

The behavior we're seeing is that the chat window remains on screen but goes completely blank except for the footer.

This happens when a customer invokes chatSession.client.session.disconnectParticipant() by clicking the "End Chat" button. It also happens when an agent ends the chat.

When a customer clicks "End Chat" the tail end of the logs looks like this:

{"id":"073e8570-8f7b-4bf7-b44c-4ec6e0df37cb","type":"EVENT","content":{"type":"application/vnd.amazonaws.connect.event.participant.left"},"displayName":"test - test","participantId":"9cfa59ef-970f-48f1-aa75-9ea8e591f781","participantRole":"CUSTOMER","transportDetails":{"direction":"Outgoing","status":"SendSuccess","sentTime":1585652328.264},"version":0}
transcriptConfig: {"participantMessageConfig":{},"systemMessageConfig":{}}
renderMessage itemDetails SystemMessage
SystemMessage getMessageText
{"itemDetails":{"id":"073e8570-8f7b-4bf7-b44c-4ec6e0df37cb","type":"EVENT","content":{"type":"application/vnd.amazonaws.connect.event.participant.left"},"displayName":"test - test","participantId":"9cfa59ef-970f-48f1-aa75-9ea8e591f781","participantRole":"CUSTOMER","transportDetails":{"direction":"Outgoing","status":"SendSuccess","sentTime":1585652328.264},"version":0}}
_handleIncomingData item created
{"id":"768f9f07-9997-46b7-a597-0691dbd78d13","type":"EVENT","content":{"type":"application/vnd.amazonaws.connect.event.chat.ended"},"transportDetails":{"direction":"Incoming","status":"SendSuccess","sentTime":1585652328.546},"version":0}
_handleIncomingData item created
incoming message:|| {"AbsoluteTime":"2020-03-31T10:58:48.546Z","ContentType":"application/vnd.amazonaws.connect.event.chat.ended","Id":"768f9f07-9997-46b7-a597-0691dbd78d13","Type":"EVENT","InitialContactId":"0f2c959e-d139-42aa-8559-1da1817471ed"}
Do nothing

from amazon-connect-chat-ui-examples.

Sorry for the delay here. Did you figure out your issue?

from amazon-connect-chat-ui-examples.

Hello -- nope, behavior is still as stated i.e. when we follow your suggestions

1. comment out the call to resetForm so the chat window does not slide off screen when onChatDisconnected fires

2. call chatSession.client.session.disconnectParticipant() via an "End Chat" button in a custom footer

... we see the incoming event "vnd.amazonaws.connect.event.chat.ended" in the logs and the chat window goes completely blank except for the footer.

It's a little tough to debug when the chat client is a minified, closed-source black box... we are exploring the "Creating your own Chat UX" example to achieve the customization we need.

from amazon-connect-chat-ui-examples.

Hello, thanks for providing the async chat example.

We also faced the same issues. Any updates?

from amazon-connect-chat-ui-examples.

hi @comparative @antoninotony do you still need help with your use case?

from amazon-connect-chat-ui-examples.

@angieyu yeah, I added a custom end chat button and removed reset form as mentioned but it still clears the chat and a spinner is displayed.

from amazon-connect-chat-ui-examples.

we built a custom chat client to avoid this issue.

from amazon-connect-chat-ui-examples.

chatSession.client.session.disconnectParticipant() results in inconsistent events, some times it just generates application/vnd.amazonaws.connect.event.participant.left event, if this happens it works as expected, but at times it also generates application/vnd.amazonaws.connect.event.chat.ended event and the header and body would go blank. Any idea on how to prevent this?
Most of the times, when we reload the page, the first chat would work fine and the subsequent chats would go black on clicking end chat. Do we have to initialize the chat interface when it is used more than once with out reload?

from amazon-connect-chat-ui-examples.

I will look into why different events are being generated based on the disconnectParticipant() API, but in the meantime, can you add the same end logic to the chat ended event that you have added to the participant left event?

What do you mean by "Do we have to initialize the chat interface when it is used more than once with out reload?"

from amazon-connect-chat-ui-examples.