Modalities

Implement custom modalities

Modalities allow richer interactions to be embedded inside chat or voice applications with task specific UI being presented at the appropriate moment in a conversation. The exact workflow depends on your setup:

Create a new file in your project (conventionally we call it modalities-types.d.ts). Then find the modality you are trying to implement and copy the typescript definition:

This will ensure that the custom modality you are working with will match the schema builders are working with.

We are working on tooling that will automate this step in the future.

Then make a file for the modality you are trying to implement:

import { html, type CustomModalityComponent } from "@nlxai/touchpoint-ui";
import type * as Modalities from "../modalities-types.d.ts";

export const Flights = (CustomModalityComponent<Modalities.Flights> = ({
  data,
}) => {
  return html`
    <Carousel>
      ${data.flights.map(
        (flight) => html`
          <CustomCard>
            <div><strong>Flight:</strong> ${flight.flightNumber}</div>
            <div>
              <strong>From:</strong> ${flight.departure.city}
              (${flight.departure.code}) at
              ${new Date(flight.departure.time).toLocaleString()}
            </div>
            <div>
              <strong>To:</strong> ${flight.arrival.city}
              (${flight.arrival.code}) at
              ${new Date(flight.arrival.time).toLocaleString()}
            </div>
            <div><strong>Airline:</strong> ${flight.airline}</div>
            <div><strong>Duration:</strong> ${flight.duration}</div>
            <div><strong>Price:</strong> ${flight.price}</div>
          </CustomCard>
        `,
      )}
    </Carousel>
  `;
});

These are standard React components, so can be unit tested, type-checked and so on. Also if you prefer JSX syntax, then react can be imported instead of html.

Finally in your Touchpoint configuration you can register these components:

import { create } from "@nlxai/touchpoint-ui";
import { Flights } from "./custom-modalities/flights.tsx";
      
const touchpoint = await create({
  config: {
    applicationUrl: "REPLACE_WITH_APPLICATION_URL",
    headers: {
      "nlx-api-key": "REPLACE_WITH_API_KEY"
    },
    languageCode: "en-US",
  },
  modalityComponents: {
    Flights
  }
});

<html lang="en">
  <head>
    <title>Touchpoint Sample HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script type="module">
      import { create, html } from "https://unpkg.com/@nlxai/touchpoint-ui/lib/index.js?module";
      
      const touchpoint = await create({
        config: {
          applicationUrl: "REPLACE_WITH_APPLICATION_URL",
          headers: {
            "nlx-api-key": "REPLACE_WITH_API_KEY"
          },
          languageCode: "en-US",
        },
        modalityComponents: {
          Flights(data) {
            return html`
            <Carousel>
              ${data.flights.map(
                (flight) => html`
                  <CustomCard>
                    <div><strong>Flight:</strong> ${flight.flightNumber}</div>
                    <div>
                      <strong>From:</strong> ${flight.departure.city}
                      (${flight.departure.code}) at
                      ${new Date(flight.departure.time).toLocaleString()}
                    </div>
                    <div>
                      <strong>To:</strong> ${flight.arrival.city}
                      (${flight.arrival.code}) at
                      ${new Date(flight.arrival.time).toLocaleString()}
                    </div>
                    <div><strong>Airline:</strong> ${flight.airline}</div>
                    <div><strong>Duration:</strong> ${flight.duration}</div>
                    <div><strong>Price:</strong> ${flight.price}</div>
                  </CustomCard>
                `,
              )}
            </Carousel>
          `;
          }
        }
      });
    </script>
  </body>
</html>

Last updated 5 months ago

import { html, type CustomModalityComponent } from "@nlxai/touchpoint-ui";
import type * as Modalities from "../modalities-types.d.ts";

export const Flights = (CustomModalityComponent<Modalities.Flights> = ({
  data,
}) => {
  return html`
    <Carousel>
      ${data.flights.map(
        (flight) => html`
          <CustomCard>
            <div><strong>Flight:</strong> ${flight.flightNumber}</div>
            <div>
              <strong>From:</strong> ${flight.departure.city}
              (${flight.departure.code}) at
              ${new Date(flight.departure.time).toLocaleString()}
            </div>
            <div>
              <strong>To:</strong> ${flight.arrival.city}
              (${flight.arrival.code}) at
              ${new Date(flight.arrival.time).toLocaleString()}
            </div>
            <div><strong>Airline:</strong> ${flight.airline}</div>
            <div><strong>Duration:</strong> ${flight.duration}</div>
            <div><strong>Price:</strong> ${flight.price}</div>
          </CustomCard>
        `,
      )}
    </Carousel>
  `;
});

<html lang="en">
  <head>
    <title>Touchpoint Sample HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script type="module">
      import { create, html } from "https://unpkg.com/@nlxai/touchpoint-ui/lib/index.js?module";
      
      const touchpoint = await create({
        config: {
          applicationUrl: "REPLACE_WITH_APPLICATION_URL",
          headers: {
            "nlx-api-key": "REPLACE_WITH_API_KEY"
          },
          languageCode: "en-US",
        },
        modalityComponents: {
          Flights(data) {
            return html`
            <Carousel>
              ${data.flights.map(
                (flight) => html`
                  <CustomCard>
                    <div><strong>Flight:</strong> ${flight.flightNumber}</div>
                    <div>
                      <strong>From:</strong> ${flight.departure.city}
                      (${flight.departure.code}) at
                      ${new Date(flight.departure.time).toLocaleString()}
                    </div>
                    <div>
                      <strong>To:</strong> ${flight.arrival.city}
                      (${flight.arrival.code}) at
                      ${new Date(flight.arrival.time).toLocaleString()}
                    </div>
                    <div><strong>Airline:</strong> ${flight.airline}</div>
                    <div><strong>Duration:</strong> ${flight.duration}</div>
                    <div><strong>Price:</strong> ${flight.price}</div>
                  </CustomCard>
                `,
              )}
            </Carousel>
          `;
          }
        }
      });
    </script>
  </body>
</html>