How do I send adaptive card submit action value to bot

Hi,

I was informed that there were a couple of questions more:

1. The welcome message from Bot is not getting triggered when hosted. But in an emulator it works:
https://www.screencast.com/t/IJdEkDkZA

- Please see if the DirectLine is making a request when the component is created. The DirectLine tool is created by the company that makes the bots, and we have no control over when a request is made.

2. We are collecting user information using adaptive cards, but once the submit button is clicked, values are not getting passed on to bot:
https://www.screencast.com/t/cgDZmLjI5cwl

- When the submit button is clicked, the programmatical call has to be made to the bot. The Chart will trigger the "onMessageSend" event only when the send button of the control is clicked.

3. When two adaptive cards are displayed in Carousel layout cards are getting merged:

https://www.screencast.com/t/gHHmj8pnePo6

Please share the code used for the cards, as we have example with multiple cards, and they are scrolling.

4. How to add the "attach " button in the chat window?

This can be made with the custom message box or the toolbar:

https://www.telerik.com/kendo-react-ui/components/conversationalui/custom-rendering/

https://www.telerik.com/kendo-react-ui/components/conversationalui/toolbar/

5. Can we incorporate kendo dropdowns inside webchat? Because currently in adaptive card dynamic dropdown is not available?

Yes, almost every component can be added. You can check the following demo, where we have incorporated the Calendar component:

https://www.telerik.com/kendo-react-ui/components/conversationalui/integrations/botframework/#toc-health-care-chat-bot

Regards,
Stefan
Progress Telerik

Hello,

I received the answers based on my last reply.

If possible, please reply inside the ticket, so I can see it earlier and provide the technical support.

1) - We will look into this

- Let me know if additional assistance will be needed on this

2) Once submit action is clicked the chat didn’t trigger “onMessageSend” event. Attaching the code for reference.  If you can share any code snippet it would be helpful.

- This is expected as the Submit button is a custom button. The Chat component has no access to it. Once this button is clicked, the call to the bot has to be done programmatically.

3) I have no access to the attached code. Please attach it here on the ticket.

4) This was introduced in version 3.6.0 of the components. Please ensure that the application is using the latest version.

5) The value can be passed similar to the demo. On the onChange event of the DropDownList call the method which is used on the OnMessageSend event:

onChange={(event) => {this.addNewMessage(event);}}

Regards,
Stefan
Progress Telerik

Hi Stefan,

1. I'll check regarding Direct Line and get back to you if I have any queries.
2. 3. I'm still facing adaptive card submit action and Carousel layout issue. Kindly provide a sample for reference. I have attached code for your reference.

  4.  I'm using @progress/kendo-react-conversational-ui and @progress/kendo-theme-material/dist/all.css version  6.4.1 .

   5. I'm checking how to pass Dropdown as you said adding onChange event. I'll get back to you if I need any further assistance.

   6. We would like to introduce Auto complete into message box. Please provide sample for the same.

I have added my comments in the code sample I have shared.  

Hi,

Regarding the questions:

1) - No actionable for now

2) - Based on that code, the submit of the form should trigger a request to the bot:

  onSubmit = {(event) => {this.addNewMessage(event);}} 

3) Could you please point to the section of the code that renders the "Carousel"

4) The latest version of KendoReact is 3.6.0, so I can assume that "6.4.1" is the version of the themes. Please check the version of the "@progress/kendo-react-conversational-ui".

5) No actionable for now.

6) This is an example of using the AutoComplete:

https://stackblitz.com/edit/react-7t8krn?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Hi Stefan,

2) I'm still facing the same issue for adaptive card , kindly share a sample code.It would help a lot. 

3) I haven't used any separate code that renders "carousel". It gets rendered inside аttachmentTemplate under adaptive card section.

4) "6.4.1" is the version of "@progress/kendo-react-conversational-ui".

6) I'm not able to use Auto Complete, this might be the same reason as attachment icon.

In my last response I had shared you the complete code.

Best Regards,

GAGANA HG

Hello, Gagana,

2) I added the code to a runnable StackBlitz, but I do not have access to the secret code, I cannot replicate the same case. Is it possible, to share the secret inside the ticket(this is a private ticket), so I can test with it and provide a runnable example?

https://stackblitz.com/edit/react-gzcgvn?file=app/main.jsx

3) Same as the other point, sharing the secret with us, will allow me to test and directly apply it in the example.

4) There is no version "6.4.1" of the component, the laters one is 3.6.0. Please double-check in the package.json.

6) In the example which I have shared, that uses the code that was sent, the icon is displayed with the latest version 3.6.0:

Regards,
Stefan
Progress Telerik

Hello,

Thank you for the code and the key.

Regarding the first issues:

1) The welcome message is not shown as no message is received by the Bot initially. I can suggest checking the bot options to see if there is one to send a message as soon as someone subscribes and not waiting for a message.

2) I have made the submit button to work. The idea is to attach an event listener to the button after it is rendered. Then take the value of the textarea and send a new message with it:

  componentDidUpdate() {
    let button = document.querySelector(".ac-pushButton");
    if (button) {
      button.removeEventListener("click", this.handleAddSubmit);
      button.addEventListener("click", this.handleAddSubmit);
      button.classList.add("test");
    }
  }

  handleAddSubmit = e => {
    let textAreaValue = document.querySelector(".ac-textInput").value;
    this.client
      .postActivity({
        from: { id: this.user.id, name: this.user.name },
        type: "message",
        text: textAreaValue
      })
      .subscribe(
        id => console.log("Posted activity, assigned ID ", id),
        error => console.log("Error posting activity", error)
      );
      this.setState(prevState => {
        return {
          messages: [
            ...prevState.messages,
            { author: this.user, text: textAreaValue, timestamp: new Date() }
          ]
        };
      });
  };

4), 5) - I was not able to proceed. This is the message I got after submit. Did I make something wrong in the steps?



6) The attachment button is rendered as expected, it just has on functionality added to it. This is a custom button, so the developer has to define what will happen when the button is clicked.

7) I have fixed that in the demo.

This is the updated example on which I was working on:

https://stackblitz.com/edit/react-gzcgvn?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Hi Stefan,

1) Thanks will check on the same. 

2) I guess the event listener you have added is causing error which you have described below. Because after submit of card values are not getting passed. And you have considered only one textarea, but in real case scenario we would be having multiple input fields. Actually adaptive card submit action will send the data in JSON format.

3) After submit its throwing error.

I wanted bot to display what user have typed in the next step. But in the sample you have sent User response is captured which is not necessary. 

4,5) Issue is because of Adaptive card submit action handled incorrectly.

6) Attachments added by the user needs to be sent to bot. Send Button is still not working.

7) Auto complete is working fine. 

You can check the below link to understand more about what is required. 

https://webchat.botframework.com/embed/ReactTesting?s=7ruZfmmDl7Q.khv0VUrIlPSlOEX36HBPPXjSgzeMkA6aLZ2L-LWgkyU

This is default Web Chat by Microsoft Bot framework.  You can see how Adaptive card submit action is handled and also how two Adaptive cards in carousel layout.

Best Regards,

GAGANA HG 

Hello,

2, 3, 4 and 5- I was able to check the expected response from the bot and fixed the submit in the code. Now the submit is working correctly and the bot returns a response with the text written in the textarea.

6) This example shows how to import a picture. This is done locally, so please make sure to send the file in the format the chart expects it:

https://www.telerik.com/kendo-react-ui/components/conversationalui/toolbar/

As for the carousel, I can assume that there is additional CSS missing for this. We use the adaptive card package to render it, but I can see that there are differences.

Is the code used here available, so  I can take a look:

https://webchat.botframework.com/embed/ReactTesting?s=7ruZfmmDl7Q.khv0VUrIlPSlOEX36HBPPXjSgzeMkA6aLZ2L-LWgkyU

This is the updated version of the example:

https://stackblitz.com/edit/react-gzcgvn?file=app/main.jsx

Regards,

Stefan
Progress Telerik

Hi Stefan,

Thanks for your response.

1) Adaptive card submit action works for the scenario I had provided before. But if I change the card, Submit action fails. Please let me know how to handle adaptive card submit action dynamically. 

2)  Send Button works when attachment button is not added in the message box. What might be the issue here.

3) Form value are collected in the next step. But even though you have specified DropDownList once why does it gets displayed twice? Also I would like to pass both Product and category( dependency dropdown).

4)  For the carousel, We actually won't work on CSS w.r.t adaptive card. Even we use Adaptive card package.

Note: Updated with backend code with new adaptive card. The react code remains the same.

Best Regards,

GAGANA HG 

Hello,

1) This is expected because we use the button class to subscribe to its click event. If the button is changed then the selector has to be changed as well.

  componentDidUpdate() {
    let button = document.querySelector(".ac-pushButton");
    if (button) {
      button.removeEventListener("click", this.handleAddSubmit);
      button.addEventListener("click", this.handleAddSubmit);
    }
  }

https://github.com/telerik/kendo-react/issues/389

The toolbar can be used for the attachment button for now.

3) There are two DropDownList specified in the code. I just made them the same for the test. You can declare two DropDownList functions similar to "MyDropDownList", where one will return DropDown for products and the other for category:

                <Field component={MyDropDownList} name={'productName'}/>
                <Field component={MyDropDownList} name={'productId'}/>

.k-chat .k-card-deck .k-card, .k-chat .k-card-deck .k-card-wrap {
     width: 100% !important;
}

Regards,
Stefan
Progress Telerik

Hi Stefan,

1) As you mentioned I checked for 2 cards, the button class doesn't change for both the cards. Attaching screenshots for your reference.
Could you mention any other way for solving this issue. Because I would require all values from the card to pass dynamically without specifying class names.
In Microsoft Bot framework Adaptive card passes all item values in JSON format on Submit action.

2) When user uploads a file how do I  pass attachment(PDF, DOC) files to the bot.

4) I added the CSS code snippet which you had mentioned into App.css file but still cards are getting merged.

5) We hosted the application for testing in testing environment, Chat window comes in the center of the page(Attaching image for your reference).But we want the chat to be responsive and fit the screen(Desktop/Mobile).

You can check this URL for reference.
  https://webchat.botframework.com/embed/ReactTesting?s=7ruZfmmDl7Q.khv0VUrIlPSlOEX36HBPPXjSgzeMkA6aLZ2L-LWgkyU

Hello,

1) The Chat component has to be notified of the executed action. As the Adaptive card is rendering the content, the Chat has no access to it. Please share the source code of the example hosted here, as I want to check the code they use to get the form data:

https://webchat.botframework.com/embed/ReactTesting?s=7ruZfmmDl7Q.khv0VUrIlPSlOEX36HBPPXjSgzeMkA6aLZ2L-LWgkyU

2) This will depend on how the bot expects the message. In general, the input type file element can be used to get the file, and then the file content has to be passed to the bot.

4) Please inspect the element in the DevTools browser console and see if the style is indeed applied to the element.

5) The Chat can be shown on fullscreen using the following CSS:

.k-chat {
  max-width: none;
  width: 100%;
  height: 100%;
}

Also, I wanted to mention that the Chat component is only a UI component, its purpose is to display the information passed to it and to fire events when its built-in buttons or inputs are used. The Chat does not have automatic integration with the bot as there are multiple types of Bot and each one of them has a different format to the messages.

Regards,
Stefan
Progress Telerik

Hello, Nakul,

When an Adaptive Card is used, it sends the request itself, the KendoReact Chat component is not informed of this.

What we can suggest is to inspect the network tab in the browser when the submit button is clicked to see the request parameters to see what parameters are expected.

Also, the AdaptiveCart docs on submit can prove helpful:

https://adaptivecards.io/explorer/Action.Submit.html

Regards,
Stefan
Progress Telerik