Why is there no Carousel in @assistant/conversation

Question

If not, I want to use more than two cards. If not, I want to know how to use List (list code example).

Absolutely not Dialogflow code! I need the ActionsOnGoogle code.

const functions = require('firebase-functions');
const syncRequest = require('sync-request');
const express = require('express');
const {
  conversation,
  Simple,
  Card,
  Image,
  Button,
  List,
  Table,
  Carousel <-------------------------------(Carousel is not constructor ERROR) 
}  = require('@assistant/conversation');

const app = conversation({debug:true});

app.handle('callApi', (conv) => {
     conv.add(new Card({
          title: "hello1",
          subtitle:  "hi",
           text: "blablablablablablablablablablablablablablablablablabla",
            image: new Image({
              url: "some url",
              alt: "Some alternative text",
            })
        }), new Card({
          title: "hello2",
          subtitle:  "ddddddddd",
           text: "testtesttesttesttesttesttesttesttesttesttesttesttesttest",
            image: new Image({
              url: "some url",
              alt: "Some alternative text",
            })
        }));----------------------------------------------------two Card doesn't it work
});

exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);

Looking for ActionsOnGoogleFulfillment document and example/sample code link.

Answer 1

The Carousel type has been replaced by the Collection type, which does the same thing on most platforms. The name reflects, however, that it may not display as a carousel everywhere, but will still represent a card-like layout.

For Visual Selection Responses such as Lists and Collections, defining the response is done in two parts:

1. Creating Runtime Type Overrides for a type, and including visual information about each entry
2. Creating the List or Collection and referencing items in that type to display

You'll create Type Overrides by adding something to the session. So it might look something like this:

  conv.session.typeOverrides = [{
    name: 'prompt_option',
    mode: 'TYPE_REPLACE',
    synonym: {
      entries: [
        {
          name: 'ITEM_1',
          synonyms: ['Item 1', 'First item'],
          display: {
             title: 'Item #1',
             description: 'Description of Item #1',
             image: ASSISTANT_LOGO_IMAGE,
                }
        },
        {
          name: 'ITEM_2',
          synonyms: ['Item 2', 'Second item'],
          display: {
             title: 'Item #2',
             description: 'Description of Item #2',
             image: ASSISTANT_LOGO_IMAGE,
                }
        },
        {
          name: 'ITEM_3',
          synonyms: ['Item 3', 'Third item'],
          display: {
             title: 'Item #3',
             description: 'Description of Item #3',
             image: ASSISTANT_LOGO_IMAGE,
                }
        },
        {
          name: 'ITEM_4',
          synonyms: ['Item 4', 'Fourth item'],
          display: {
             title: 'Item #4',
             description: 'Description of Item #4',
             image: ASSISTANT_LOGO_IMAGE,
                }
        },
        ]
    }
  }];

You would then create and add the Collection object, referencing the keys from the type you are declaring:

  conv.add(new Collection({
    title: 'Collection Title',
    subtitle: 'Collection subtitle',
    items: [
      {
        key: 'ITEM_1'
      },
      {
        key: 'ITEM_2'
      },
      {
        key: 'ITEM_3'
      },
      {
        key: 'ITEM_4'
      }
    ],
  }));
});

doing this for a List instead would be similar. The entity type and visual components would be the same, but you'd define the list slightly differently:

  conv.add(new List({
    title: 'List title',
    subtitle: 'List subtitle',
    items: [
      {
        key: 'ITEM_1'
      },
      {
        key: 'ITEM_2'
      },
      {
        key: 'ITEM_3'
      },
      {
        key: 'ITEM_4'
      }
    ],
  }));
});