AccessibilityInformation

Ƭ AccessibilityInformation: Record<string, any>

Accessibility information

IconButtonType

Ƭ IconButtonType: "main" | "ghost" | "activated" | "coverup" | "error" | "overlay"

Represents the different types of icon buttons available in the application.

• main: The primary icon button.
• ghost: A transparent or less prominent icon button.
• activated: An icon button that indicates an active state.
• coverup: An icon button used to cover up or mask something.
• overlay: An icon button that appears over other content.

WindowSize

Ƭ WindowSize: "half" | "full"

Window size configuration

ColorMode

Ƭ ColorMode: "light" | "dark"

Color mode configuration (light/dark modes)

CustomModalityComponent

Ƭ CustomModalityComponent<Data>: ComponentType<{ data: Data ; conversationHandler: ConversationHandler ; enabled: boolean ; className?: string }>

Custom Modalities allow rendering of rich components from nodes. See: https://docs.studio.nlx.ai/build/resources/modalities

Type parameters

InitializeConversation

Ƭ InitializeConversation: (handler: ConversationHandler, context?: Context) => void

Custom conversation init method. Defaults to sending the welcome intent

Type declaration

▸ (handler, context?): void

Parameters

Returns

void

CustomLaunchButton

Ƭ CustomLaunchButton: ComponentType<{ className?: string ; onClick?: () => void }>

Fully custom launch icon

Input

Ƭ Input: "text" | "voice" | "voiceMini"

Input type for the experience

BidirectionalConfig

Ƭ BidirectionalConfig: { automaticContext?: true ; navigation?: (action: "page_next" | "page_previous" | "page_custom" | "page_unknown", destination: string | undefined, destinations: Record<string, string>) => void ; input?: (fields: InputField[], pageFields: Record<string, Element>) => void ; custom?: (action: string, payload: unknown) => void ; customizeAutomaticContext?: (arg: { context: BidirectionalContext ; state: PageState }) => { context: BidirectionalContext ; state: PageState } } | { automaticContext: false ; navigation?: (action: "page_next" | "page_previous" | "page_custom" | "page_unknown", destination?: string) => void ; input?: (fields: InputField[]) => void ; custom?: (action: string, payload: unknown) => void }

Configuration for bidirectional mode of voice+.

version

• Const version: string = packageJson.version

Package version

analyzePageForms

▸ analyzePageForms(): PageForms

Analyze page forms

Returns

PageForms

pageForms

Ripple

▸ Ripple(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Carousel

▸ Carousel(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

CustomCard

▸ CustomCard(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

CustomCardImageRow

▸ CustomCardImageRow(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

CustomCardRow

▸ CustomCardRow(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

DateInput

▸ DateInput(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

IconButton

▸ IconButton(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

TextButton

▸ TextButton(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

BaseText

▸ BaseText(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

SmallText

▸ SmallText(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

html

▸ html(strings, ...values): unknown

Parameters

Returns

unknown

create

▸ create(props): Promise<TouchpointInstance>

Creates a new Touchpoint UI instance and appends it to the document body

Parameters

Returns

Promise<TouchpointInstance>

A promise that resolves to a TouchpointInstance

PreviewContainer

▸ PreviewContainer(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

uri

• Optional uri: string

Identifier for which page you are currently on. This can be used to filter the relevant KB pages.

fields

• Optional fields: InteractiveElementInfo[]

The active form fields that can be filled in.

destinations

• Optional destinations: string[]

Human readable location names that can be navigated to.

actions

• Optional actions: { action: string ; description?: string ; schema?: any }[]

Custom actions that can be performed.

action

• action: string

The name of the command, used to invoke it. Should be unique and descriptive in the context of the LLM.

description

• Optional description: string

A short description of the command, used to help the LLM understand its purpose.

If omitted, then the command will not be sent to the application and must be triggered from the application side.

schema

• Optional schema: any

A JSON Schema that defines the structure of the command's input.

Use descriptive names and description fields to give the underlying LLM plenty of context for it to generate reasonable parameters. Note that the LLM output will be validated (and transformed) with this schema, so you are guaranteed type safe inputs to your handler.

Should follow the JSONSchema specification.

handler

• handler: (value: any) => void

A handler that will be called with an argument matching the schema when the command is invoked.

Type declaration

▸ (value): void

Parameters

Returns

void

message

• message: ApplicationMessage

Message contents

responseIndex

• responseIndex: number

Index in the response transcript history

messageIndex

• messageIndex: number

Message index in the current response

className

• Optional className: string

Class name

children

• children: ReactNode

Content to be rendered inside the card.

selected

• Optional selected: boolean

Whether the card is in a selected state. Used to highlight the card.

onClick

• Optional onClick: () => void

Handler function for when the card is clicked

Type declaration

▸ (): void

Returns

void

href

• Optional href: string

Transform the card into an anchor tag with the href specified

newTab

• Optional newTab: boolean

Specify whether the URL should take the user to a new tab

left

• left: ReactNode

Content to be displayed on the left side of the row

right

• right: ReactNode

Content to be displayed on the right side of the row

icon

• Optional icon: Icon

Optional icon to be displayed in the center of the row

onSubmit

• Optional onSubmit: (date: string) => void

Handler function called when the date is submitted

Type declaration

▸ (date): void

Parameters

Returns

void

className

• Optional className: string

Class name

onClick

• Optional onClick: () => void

Handler function called when the button is clicked

Type declaration

▸ (): void

Returns

void

label

• label: string

Accessible label for the button

className

• Optional className: string

Additional CSS classes to apply to the button

type

• type: IconButtonType

Visual style variant of the button. One of IconButtonType.

Icon

• Icon: FC<IconProps>

Icon component to display inside the button

className

• Optional className: string

Additional CSS classes to apply to the icon

size

• Optional size: number

Custom size in pixels for the icon

id

• id: string

Field ID

value

• value: string | boolean

Field value

id

• id: string

Form element ID (assigned by the analysis logic, not necessarily equal to the DOM ID)

context

• context: InteractiveElementInfo[]

Page context

formElements

• formElements: Record<string, Element>

Form element references

formElements

• formElements: Record<string, Element>

Mapping from form element IDs to their DOM elements

links

• links: Record<string, string>

Mapping from link element names to their URLs

customCommands

• customCommands: Map<string, (arg: any) => void>

Mapping from custom commands to their handlers

onClick

• Optional onClick: () => void

Handler function called when the button is clicked

Type declaration

▸ (): void

Returns

void

label

• label: string

Text to display on the button

className

• Optional className: string

Additional CSS classes to apply to the button

type

• Optional type: "main" | "ghost"

Visual style variant of the button Default value is "ghost"

Icon

• Icon: FC<IconProps>

Icon component to display inside the button.

fontFamily

• fontFamily: string

Font family

primary80

• primary80: string

Primary color with 80% opacity

primary60

• primary60: string

Primary color with 60% opacity

primary40

• primary40: string

Primary color with 40% opacity

primary20

• primary20: string

Primary color with 20% opacity

primary10

• primary10: string

Primary color with 10% opacity

primary5

• primary5: string

Primary color with 5% opacity

primary1

• primary1: string

Primary color with 1% opacity

secondary80

• secondary80: string

Secondary color with 80% opacity

secondary60

• secondary60: string

Secondary color with 60% opacity

secondary40

• secondary40: string

Secondary color with 40% opacity

secondary20

• secondary20: string

Secondary color with 20% opacity

secondary10

• secondary10: string

Secondary color with 10% opacity

secondary5

• secondary5: string

Secondary color with 5% opacity

secondary1

• secondary1: string

Secondary color with 1% opacity

accent

• accent: string

Accent color used e.g. for prominent buttons, the loader animation as well as selected card outlines

accent20

• accent20: string

Accent color with 20% opacity

background

• background: string

The background color of the main Touchpoint interface

overlay

• overlay: string

The color of the overlay covering the visible portion of the website when the Touchpoint interface does not cover the full screen

warningPrimary

• warningPrimary: string

Primary warning color

warningSecondary

• warningSecondary: string

Secondary warning color

errorPrimary

• errorPrimary: string

Primary error color

errorSecondary

• errorSecondary: string

Secondary error color

innerBorderRadius

• innerBorderRadius: string

Inner border radius: used for most buttons

outerBorderRadius

• outerBorderRadius: string

Outer border radius: generally used for elements that contain buttons that have inner border radius. Also used by the launch button.

config

• config: Config

Connection information for the @nlxai/core conversation handler

windowSize

• Optional windowSize: WindowSize

Optional window size for the chat window, defaults to half

colorMode

• Optional colorMode: ColorMode

Optional color mode for the chat window, defaults to dark

brandIcon

• Optional brandIcon: string

URL of icon used to display the brand in the chat header

animate

• Optional animate: boolean

Include border animation. Currently only supported in Voice Mini.

launchIcon

• Optional launchIcon: string | boolean | CustomLaunchButton

URL of icon used on the launch icon in the bottom right when the experience is collapsed.

When set to false, no launch button is shown at all. When not set or set to true, the default launch icon is rendered.

userMessageBubble

• Optional userMessageBubble: boolean

Specifies whether the user message has bubbles or not

agentMessageBubble

• Optional agentMessageBubble: boolean

Specifies whether the agent message has bubbles or not

chatMode

• Optional chatMode: boolean

Enables chat mode, a classic chat experience with inline loaders and the chat history visible at all times.

theme

• Optional theme: Partial<Theme>

Optional theme object to override default theme values

modalityComponents

• Optional modalityComponents: Record<string, CustomModalityComponent<unknown>>

Optional custom modality components to render in Touchpoint

customModalities

• Optional customModalities: Record<string, CustomModalityComponent<unknown>>

Optional custom modality components to render in Touchpoint

Deprecated

use TouchpointConfiguration.modalityComponents instead.

initializeConversation

• Optional initializeConversation: InitializeConversation

Custom conversation init method. Defaults to sending the welcome intent

Param

the conversation handler.

Param

the context object

input

• Optional input: Input

Controls the ways in which the user can communicate with the application. Defaults to "text"

initialContext

• Optional initialContext: Context

Context sent with the initial request.

bidirectional

• Optional bidirectional: BidirectionalConfig

Enables bidirectional mode of voice+. Will automatically set the bidirectional flag in the config.

expanded

• expanded: boolean

Controls whether the Touchpoint UI is expanded or collapsed

conversationHandler

• conversationHandler: ConversationHandler

The conversation handler instance for interacting with the application

teardown

• teardown: () => void

Method to remove the Touchpoint UI from the DOM

Type declaration

▸ (): void

Returns

void

setCustomBidirectionalCommands

• setCustomBidirectionalCommands: (commands: BidirectionalCustomCommand[]) => void

Sets currently available custom bidirectional commands. This allows you to define custom commands that can be used in the voice bot. The commands will be available in the voice bot and can be used to trigger actions.

Example:

client.setCustomBidirectionalCommands([
  {
    action: "Meal",
    description: "add a meal to your flight",
    schema: {
      enum: ["standard", "vegetarian", "vegan", "gluten-free"],
    },
    handler: (value) => {
      console.log("Meal option:", value);
    },
  },
]);

This will allow the voice bot to use the command Meal with the value standard, vegetarian, vegan, or gluten-free.

When using more complex arguments, a library such as Zod can be useful:

import * as z from "zod/v4";

const schema = z.object({
  name: z.string().describe("The customer's name, such as John Doe"),
  email: z.string().email().describe("The customer's email address"),
});

client.setCustomBidirectionalCommands([
  {
    action: "Meal",
    description: "add a meal to your flight",
    schema: z.toJSONSchema(schema, { io: "input" }),
    handler: (value) => {
      const result = z.safeParse(schema, value);
      if (result.success) {
        // result.data is now type safe and TypeScript can reason about it
        console.log("Meal option:", result.data);
      } else {
        console.error("Failed to parse Meal option:", result.error);
      }
    },
  },
]);

Type declaration

▸ (commands): void

Parameters

Returns

void

Icon

Ƭ Icon: FC<IconProps>

Type definition for an icon component

Action

▸ Action(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Touchpoint

▸ Touchpoint(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

AssistantOld

▸ AssistantOld(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Add

▸ Add(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

ArrowDown

▸ ArrowDown(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

ArrowLeft

▸ ArrowLeft(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

ArrowRight

▸ ArrowRight(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

ArrowUp

▸ ArrowUp(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

ArrowForward

▸ ArrowForward(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Attachment

▸ Attachment(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Camera

▸ Camera(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Check

▸ Check(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Close

▸ Close(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Copy

▸ Copy(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Date

▸ Date(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Delete

▸ Delete(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Escalate

▸ Escalate(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Error

▸ Error(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

FullScreen

▸ FullScreen(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Mic

▸ Mic(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

MicOff

▸ MicOff(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Location

▸ Location(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Volume

▸ Volume(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

VolumeOff

▸ VolumeOff(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Translate

▸ Translate(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

OpenInNew

▸ OpenInNew(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Play

▸ Play(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Preview

▸ Preview(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Reorder

▸ Reorder(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Restart

▸ Restart(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Settings

▸ Settings(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Search

▸ Search(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Share

▸ Share(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Warning

▸ Warning(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

ThumbDown

▸ ThumbDown(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

ThumbUp

▸ ThumbUp(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Time

▸ Time(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Undo

▸ Undo(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Refresh

▸ Refresh(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode

Help

▸ Help(props, deprecatedLegacyContext?): ReactNode

Parameters

Returns

ReactNode