Developer Docs

Touchpoint Setup

API reference

@nlxai/touchpoint-ui

Namespaces

Interfaces

Type Aliases

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 }>

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

Type parameters

Name
Data

InitializeConversation

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

Custom conversation init method. Defaults to sending the welcome intent

Type declaration

▸ (handler, context?): void

Parameters
NameTypeDescription
handlerConversationHandlerthe conversation handler.
context?Contextcontext set via TouchpointConfiguration.initialContext
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", destination: string | undefined, destinations: Record<string, string>) => void ; input?: (fields: { id: string ; value: string }[], pageFields: Record<string, Element>) => void ; custom?: (action: string, payload: unknown) => void } | { automaticContext: false ; navigation?: (action: "page_next" | "page_previous" | "page_custom", destination?: string) => void ; input?: (fields: { id: string ; value: string }[]) => void ; custom?: (action: string, payload: unknown) => void }

Configuration for bidirectional mode of voice+.

packages/touchpoint-ui/src/types.ts:202

Variables

version

Const version: string = packageJson.version

Package version

packages/touchpoint-ui/src/index.tsx:50

Functions

analyzePageForms

analyzePageForms(): PageForms

Analyze page forms

Returns

PageForms

pageForms

Ripple

Ripple(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsObject-
props.className?string-
props.style?CSSProperties-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

Carousel(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsObject-
props.childrenReactNode-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

CustomCard

CustomCard(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsCustomCardProps-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

CustomCardImageRow

CustomCardImageRow(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsObject-
props.srcstring-
props.alt?string-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

CustomCardRow

CustomCardRow(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsCustomCardRowProps-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

DateInput

DateInput(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsDateInputProps-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

IconButton

IconButton(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsIconButtonProps-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

TextButton

TextButton(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsTextButtonProps-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

BaseText

BaseText(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsObject-
props.childrenReactNode-
props.faded?boolean-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

SmallText

SmallText(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsObject-
props.childrenReactNode-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

html

html(strings, ...values): unknown

Parameters

NameType
stringsTemplateStringsArray
...valuesany[]

Returns

unknown

create

create(props): Promise<TouchpointInstance>

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

Parameters

NameTypeDescription
propsTouchpointConfigurationConfiguration props for Touchpoint

Returns

Promise<TouchpointInstance>

A promise that resolves to a TouchpointInstance

PreviewContainer

PreviewContainer(props, deprecatedLegacyContext?): ReactNode

Parameters

NameTypeDescription
propsObject-
props.childrenReactNode-
props.modeColorMode-
props.themePartial<Theme>-
deprecatedLegacyContext?anyDeprecated See React Docs

Returns

ReactNode

Interfaces

Interface: CustomCardProps

Props for the CustomCard component

Properties

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

Interface: CustomCardRowProps

Props for the CustomCardRow component

Properties

left

left: ReactNode

Content to be displayed on the left side of the row

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

Interface: DateInputProps

Props for the DateInput component

Properties

onSubmit

Optional onSubmit: (date: string) => void

Handler function called when the date is submitted

Type declaration

▸ (date): void

Parameters
NameTypeDescription
datestringThe submitted date in YYYY-MM-DD format
Returns

void

Interface: IconButtonProps

Props for the IconButton component

Properties

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

Interface: IconProps

Icons.IconProps

Props for icon components

Properties

className

Optional className: string

Additional CSS classes to apply to the icon

size

Optional size: number

Custom size in pixels for the icon

Interface: InteractiveElementInfo

Accessibility information with ID

Hierarchy

Properties

id

id: string

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

Interface: PageForms

Page forms with elements

Properties

context

context: InteractiveElementInfo[]

Page context

formElements

formElements: Record<string, Element>

Form element references

Interface: TextButtonProps

Props for the TextButton component

Properties

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.

Interface: Theme

The full theme expressed as CSS custom properties

Properties

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.

Interface: TouchpointConfiguration

Main Touchpoint creation properties object

Properties

config

config: Config

Connection information for the @nlxai/chat-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

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

customModalities

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

Optional custom modality components to render in Touchpoint

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.

Interface: TouchpointInstance

Instance of a Touchpoint UI component

Properties

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

packages/touchpoint-ui/src/index.tsx:312

Modules

Namespace: Icons

Interfaces

Type Aliases

Icon

Ƭ Icon: FC<IconProps>

Type definition for an icon component

packages/touchpoint-ui/src/components/ui/Icons.tsx:21

Functions

Action

Action(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Touchpoint

Touchpoint(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

AssistantOld

AssistantOld(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Add

Add(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

ArrowDown

ArrowDown(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

ArrowLeft

ArrowLeft(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

ArrowRight

ArrowRight(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

ArrowUp

ArrowUp(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

ArrowForward

ArrowForward(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Attachment

Attachment(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Camera

Camera(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Check

Check(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Close

Close(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Copy

Copy(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Date

Date(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Delete

Delete(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Escalate

Escalate(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Error

Error(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

FullScreen

FullScreen(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Mic

Mic(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

MicOff

MicOff(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Location

Location(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Volume

Volume(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

VolumeOff

VolumeOff(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Translate

Translate(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

OpenInNew

OpenInNew(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Play

Play(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Preview

Preview(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Reorder

Reorder(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Restart

Restart(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Settings

Settings(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Search(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Share

Share(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Warning

Warning(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

ThumbDown

ThumbDown(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

ThumbUp

ThumbUp(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Time

Time(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Undo

Undo(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Refresh

Refresh(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Help

Help(props, deprecatedLegacyContext?): ReactNode
Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

OpenLink(props, deprecatedLegacyContext?): ReactNode

Parameters
NameTypeDescription
propsIconProps-
deprecatedLegacyContext?anyDeprecated See React Docs
Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/Icons.tsx:510