It appears that you are utilizing the `connectionStatus$` observable to determine if Web Chat should subscribe to the `activity$` observable. This approach is not correct.
`ConnectionStatus` should only be used to monitor the changes in DirectLine's state. It is meant to trigger specific actions within the client based on different states ('online' for instance).
The proper setup should resemble the following example. The code snippet below is extracted from a basic custom DirectLine client I utilize during testing. By subscribing to `activity$`, I display incoming messages from either the bot or the user on the page. Subscribing to `connectionStatus$` allows me to log the state and DirectLine object in the console for examination.
const sendBox = document.querySelector( '#sendBox' );
const sendBtn = document.querySelector( '#sendButton' );
const transcriptWindow = document.querySelector( '.transcript_list' );
// A REMINDER: AVOID USING DIRECTLINE SECRET IN PRODUCTION ENVIRONMENTS
const DirectLine = window.DirectLine;
const directLine = new DirectLine.DirectLine({
secret: <<SECRET>>
});
directLine.activity$
.subscribe(
activity => {
console.log("received activity ", activity);
if (activity.from.id === '<<BOT ID>>') {
const messageToSend = activity.text || JSON.stringify(activity.attachments[0].content?.speak);
const el = `<li>Bot: ${messageToSend}</li>`;
transcriptWindow.innerHTML += el;
} else {
const messageToSend = sendBox.value;
const el = `<li>User: ${messageToSend}</li>`;
transcriptWindow.innerHTML += el;
}
}
);
directLine.connectionStatus$
.subscribe(async connectionStatus => {
switch (connectionStatus) {
case ConnectionStatus.Uninitialized:
console.log('CONNECTION_STATUS => UNINITIALIZED ', directLine);
break;
case ConnectionStatus.Connecting:
console.log('CONNECTION_STATUS => CONNECTING ', directLine);
break;
case ConnectionStatus.Online:
console.log('CONNECTION_STATUS => ONLINE ', directLine);
break;
case ConnectionStatus.ExpiredToken:
console.log('CONNECTION_STATUS => EXPIRED TOKEN ', directLine);
break;
case ConnectionStatus.FailedToConnect:
console.log('CONNECTION_STATUS => FAILED TO CONNECT ', directLine);
break;
case ConnectionStatus.Ended:
console.log('CONNECTION_STATUS => ENDED ', directLine);
break;
}
});
I hope this explanation helps!