NLX | Developers

Carousel Example

About

The Custom Cards system provides a structured way to present information in your chat interface. The system consists of four components that work together:

Carousel - Top Level component, acts as a container for multiple horizontally scrolled cards. A Carousel has at least 1 CustomCard.
CustomCard - Primary component, is a 'card' made up of multiple rows. A CustomCard has at least 1 of CustomCardRow or CustomCardImageRow. CustomCard can be used outside Carousel.
CustomCardRow - Basic component for horizontal layouts within cards. Can have multiple rows in a CustomCard.
CustomCardImageRow - Basic component for specialized image layouts within a CustomCard.

Component Structure

The Custom Cards components follows a nested structure where components build upon each other to create rich layouts. A Carousel container holds one or more CustomCard components. Each CustomCard contains CustomCardRow or CustomCardImageRow components that organize the content within the card.

1{
2  /* Container for all cards*/
3}
4<Carousel>
5  {/* First card */}
6  <CustomCard>
7    {/* Image content */}
8    <CustomCardImageRow>...</CustomCardImageRow>
9    {/* Text content */}
10    <CustomCardRow>...</CustomCardRow>
11  </CustomCard>
12  {/* Second card */}
13  <CustomCard>...</CustomCard>
14</Carousel>;

Visualization

Properties

Each component in the CustomCard system has specific properties that control its rendering and behavior.

CustomCard Properties

Property	Type	Required	Description
selected	boolean	No	Controls whether the card appears selected
onClick	function	No	Handler function for click events

CustomCardImageRow Properties

Property	Type	Required	Description
src	string	Yes	Source URL for the image
alt	string	No	Alternative text for the image

CustomCardRow Properties

Property	Type	Required	Description
left	ReactNode	Yes	Content to be rendered in the left section
right	ReactNode	Yes	Content to be rendered in the right section
icon	Icon	No	Optional icon component to display centrally

Import and Basic Usage

You can import the CustomCard components from touchpoint once the package has been installed or made available in your project.

Define onClick

The CustomCard component expects a function passed via onClick to define the actions to take when a user clicks the button.

Access the ConversationHandler method sendChoice via conversationHandler.sendChoice to send the user's choice back to NLX to continue the conversation.

Read more details about building Custom Components with Touchpoint in the Getting started with Touchpoint components documentation page.

Example

In order to use the Carousel and CustomCard components you will need to have a modality defined in your NLX application that is a list of objects.

Example Modality Schema

1[
2  {
3    "id": "uuid",
4    "imageUrl": "imageUrl",
5    "leftText": "leftAlignedText",
6    "rightText": "rightAlignedText"
7  }
8]

Example Card Component

The snippet below:

Uses import to import the components to construct the Carousel.
Imports React from the Touchpoint package to track user selection state.

1import {
2  Carousel,
3  CustomCard,
4  CustomCardRow,
5  CustomCardImageRow,
6  React,
7} from "@nlxai/touchpoint-ui";
8
9const CarouselExample = ({ data, conversationHandler }) => {
10  const [selected, setSelected] = React.useState(null);
11  return (
12    <Carousel>
13      {data.map((cardData, cardIndex) => (
14        <CustomCard
15          key={cardIndex}
16          selected={selected === cardIndex}
17          onClick={() => {
18            setSelected(cardIndex);
19            conversationHandler.sendChoice(cardData.id);
20          }}
21        >
22          <CustomCardImageRow src={cardData.imageUrl} alt="Alt Text" />
23          <CustomCardRow
24            left={<BaseText>{cardData.leftText}</BaseText>}
25            right={<BaseText>{cardData.rightText}</BaseText>}
26          />
27        </CustomCard>
28      ))}
29    </Carousel>
30  );
31};

Typography for Typography components
Icons for visual elements
Theming Touchpoint
Building Components without JSX
Managing Selection State for handling selection in cards and carousels