Cards in rasa

ajshrr · February 22, 2019, 10:00am

Does Rasa support cards just like the Bot framework? If so please provide an example.

Juste · March 7, 2019, 1:04pm

Hey @ajshrr. The elements that Rasa can send out depend on what UI you want to connect your assistant wtih. So for example, with Slack or Messenger you can send ‘rich’ messages which contain images, buttons, etc. What UI you are looking to connect your assistant with?

ajshrr · March 8, 2019, 7:26am

Consider weatherbot which connects to the apixu and retrieves data in the form of json. This json has a URL pointing to the image. I tried displaying it on the slack but failed.

Could you please provide an example how such images can be displayed on the slack.

Below gives a sample of the json retrieved which has a URL pointing to the png. I would like to display the image on the slack instead of URL.

{‘location’: {‘name’: ‘Paris’, ‘region’: ‘Ile-de-France’, ‘country’: ‘France’, ‘lat’: 48.87, ‘lon’: 2.33, ‘tz_id’: ‘Europe/Paris’, ‘localtime_epoch’: 1548660160, ‘localtime’: ‘2019-01-28 8:22’ }, ‘current’: {‘last_updated_epoch’: 1548658821, ‘last_updated’: ‘2019-01-28 08:00’, ‘temp_c’: 2.0, ‘temp_f’: 35.6, ‘is_day’: 0, ‘condition’: {‘text’: ‘Partly cloudy’, ‘icon’: ‘//cdn.apixu.com/weather/64x64/night/116.png’, ‘code’: 1003 }, ‘wind_mph’: 8.1, ‘wind_kph’: 13.0, ‘wind_degree’: 260, ‘wind_dir’: ‘W’, ‘pressure_mb’: 1001.0, ‘pressure_in’: 30.0, ‘precip_mm’: 0.0, ‘precip_in’: 0.0, ‘humidity’: 87, ‘cloud’: 75, ‘feelslike_c’: -1.6, ‘feelslike_f’: 29.2, ‘vis_km’: 10.0, ‘vis_miles’: 6.0, ‘uv’: 0.0 } }

Prskriti · November 19, 2019, 11:38am

I want to connect my assistant with website hosted locally. Could you please provide some information of how to display rich contents as a response.

JiteshGaikwad · November 20, 2019, 2:53pm

hey @Prskriti, check out this UI, I have added the support for cards:

Prskriti · November 21, 2019, 7:42am

hi @JiteshGaikwad tnq it did work

JiteshGaikwad · November 21, 2019, 7:55am

you are welcome, if you would like to have features which aren’t there you can raise the issue in the GitHub Repo.

Prskriti · November 21, 2019, 8:05am

@JiteshGaikwad ohk

shaileshsarda · February 20, 2020, 9:34am

Hi @JiteshGaikwad, Can I use this customized UI widget with the RASA’s Older Versions like rasa==0.1.0, rasa-core==0.12.4, rasa-nlu==0.13.8? If yes, then how?

JiteshGaikwad · February 20, 2020, 9:58am

hey @shaileshsarda, it will work for older versions since it uses REST api, just test it out and let me know if you face any error.

shaileshsarda · February 20, 2020, 11:06am

Well, thanks for the quick update @JiteshGaikwad. I will let you know soon.

cityhunter25197 · April 20, 2020, 3:08pm

Hi, I didn’t find the example of carousel response in your docs/responses.md. Can you help me?

JiteshGaikwad · April 20, 2020, 4:41pm

@cityhunter25197 I will add it soon since the carousel wasn’t generic.

nik202 · May 5, 2020, 1:29pm

Hi Jitesh,

There is no example of Card Carousel in this Chatbot-Widget as the others are examples have. Can you update with Card Carousel example.?

JiteshGaikwad · May 5, 2020, 2:23pm

hi @nik202, the card carousel was built specifically for Restaurant bot and it’s isn’t generic, if you want to add, you can check the code here:

github.com

JiteshGaikwad/Chatbot-Widget/blob/e38f0fcc45147d09b044513af518354e2b74f78e/static/js/script.js#L420




//close function to close the widget.

$("#close").click(function() {

    $(".profile_div").toggle();

    $(".widget").toggle();

    scrollToBottomOfResults();

});



//====================================== Cards Carousel =========================================



function showCardsCarousel(cardsToAdd) {

    var cards = createCardsCarousel(cardsToAdd);



    $(cards).appendTo(".chats").show();





    if (cardsToAdd.length <= 2) {

        $(".cards_scroller>div.carousel_cards:nth-of-type(" + i + ")").fadeIn(3000);

    } else {

        for (var i = 0; i < cardsToAdd.length; i++) {

            $(".cards_scroller>div.carousel_cards:nth-of-type(" + i + ")").fadeIn(3000);

nik202 · May 6, 2020, 11:28am

Thanks for the reply @JiteshGaikwad I have seen that code. What about domain.yml code the CardsCarousel? any suggestions on that?

JiteshGaikwad · May 6, 2020, 1:51pm

I am not sending any cardscarousel from domain.yml file since it requires bit amount of json data.

nik202 · September 30, 2020, 12:57pm

waiting for the code patiently, if you got time please update. many thanks in advance.

mounika2 · December 29, 2020, 10:51am

Hi @JiteshGaikwad, can you please share that json data for example.

JiteshGaikwad · December 29, 2020, 12:13pm

@mounika2 I don’t have any sample JSON data as of now but you can refer to this Resto Bot as an example:

github.com

JiteshGaikwad/Restaurant-Search-Bot/blob/f5a01ebcd36ba181c6c7e91de7a9c7c00afea708/actions.py#L153


        if(len(restaurants)>5):
            restData=getResto_Slack(restaurants[:5],show_more_results=True)
            more_restaurants=restaurants[5:]
        else:
            restData=getResto_Slack(restaurants,show_more_results=False)
        dispatcher.utter_message(text="Here are the few restaurants that matches your preferences 😋",json_message=restData)
        return [SlotSet("more_restaurants", more_restaurants)]    
    else:
        if(len(restaurants)>5):   
            dispatcher.utter_message(text="Here are the few restaurants that matches your preferences 😋",json_message={"payload":"cardsCarousel","data":restaurants[:5]})
            return [SlotSet("more_restaurants", restaurants[5:])]
        else:
            dispatcher.utter_message(text="Here are the few restaurants that matches your preferences 😋",json_message={"payload":"cardsCarousel","data":restaurants})
            return [SlotSet("more_restaurants", None)]    
else:    
    dispatcher.utter_message("Sorry we couldn't find any restaurants that serves {} cuisine in {} 😞".format(cuisine,location))
    return [UserUtteranceReverted()]