[BotFramework]: How to fix:Welcome message is not getting displayed to the user in C# WebChatBot developed in V4 but displayed in Emulator?

问题

<!DOCTYPE html>
<html>
<head>
    <title>Avanade D365 F&O Assets BOT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--
      For demonstration purposes, we are using development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js".
      Or locked down on a specific version "/4.1.0/webchat.js".
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        html, body {
            height: 100%
        }

        body {
            margin: 0
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="webchat" role="main">
        <iframe src='https://webchat.botframework.com/embed/AssetsBot?s=<<given my code here as it is secret i have attached this removing the code>>' style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>
    </div>
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
               // We are using a customized store to add hooks to connect event
        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
          if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
            dispatch({
              type: 'WEB_CHAT/SEND_EVENT',
              payload: {
                name: 'webchat/join',
                value: { language: window.navigator.language }
              }
            });
          }
          return next(action);
        });
        
        const styleOptions = {
            botAvatarImage: '<<Given Image URL, removed as these are project specific>>',
            botAvatarInitials: 'BF',
            userAvatarImage: '<<Given Image URL, removed as these are project specific>>',
            userAvatarInitials: 'WC',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
        };
        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ secret: '<<given my code here as it is secret i have attached this removing the code>>' }),

            // Passing "styleOptions" when rendering Web Chat
            styleOptions
        }, document.getElementById('webchat'));
    </script>
</body>
</html>

I have chat bot created in C# using SDK 4 and I am trying to display Welcome Text when user open the webchatbot in browser. Currently, the welcome text is getting displayed in the Emulator but not in WebchatBot opened ion browser after publishing to Azure. It is only displaying the welcome message only after I type some thing like "Hi" or anything. This should not be the case it should display welcome text first and then I can type Hi or anything else to continue the conversation

Issue: Welcome message displayed in emulator but not in webchat bot after publish only displayed after I type anything? Should display the welcome message as soon as you open the Webchatbot in browser.

Language: C#

Bot SDK: V4

Bot Builder packages: All up to date till 4.4.3 via Nuget

Bot Emulator: Latest 4.4.1 downloaded and installed from GitHub releases

The welcome text is called in ConversationUpdate activity inside OnTurnSync method of IBOT class. Code given below for reference.

Please help as I am new to BOT and coding by providing step by step guidance?

I have already tried few things like:

Debug in emulator but did not help much

Below code I have used:

public const string WelcomeText = "Welcome!. This bot uses a custom dialog that executes a data driven flow.  Type anything to get started.";

public async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
{            
    if (turnContext.Activity.Type == ActivityTypes.ConversationUpdate)
    {
        if (turnContext.Activity.MembersAdded != null)
        {
            await SendWelcomeMessageAsync(turnContext, cancellationToken);
        }
    }
}

private static async Task SendWelcomeMessageAsync(ITurnContext turnContext, CancellationToken cancellationToken)
{
    foreach (var member in turnContext.Activity.MembersAdded)
    {
        if (member.Id != turnContext.Activity.Recipient.Id)
        {
            var reply = turnContext.Activity.CreateReply();
            reply.Text = WelcomeText;
            await turnContext.SendActivityAsync(reply, cancellationToken);
        }
    }
}

Expected Result: Welcome text should be displayed in WebchatBot also after publish not only in Emulator.
Actual Result: Welcome text only working in Emulator but not in Webchatbot, it is only displayed after I type anything.

回答1:

This is a common question regarding welcoming users.

The events thrown by the channels are not the same on every channel: one of the main differences between the events in Webchat and Emulator is that:

On the Emulator, 2 ConversationUpdate events are sent on the beginning of the conversation (1 of the Bot added, 1 of the User added)
On the Webchat, the ConversationUpdate about the user is only sent after the user has sent 1 message

So to bypass this behaviour, you can handle on your side an event by using a mechanism called backchannel. There is a sample for this use-case on Github's repository here

In a few words, you have to:

send an event from the webchat at start
handle this event on bot side and process you welcome message

来源：https://stackoverflow.com/questions/56111293/botframework-how-to-fixwelcome-message-is-not-getting-displayed-to-the-user

标签

botframework

bots

chatbot