Touchpoint SDK Reference

@nlxai/touchpoint-ui

Namespaces

Icons

Interfaces

Type Aliases

AccessibilityInformation

Ƭ AccessibilityInformation: Record<string, any>

Accessibility information

Defined in

packages/touchpoint-ui/src/bidirectional/analyzePageForms.ts:9

IconButtonType

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.

Defined in

packages/touchpoint-ui/src/components/ui/IconButton.tsx:16

WindowSize

Ƭ WindowSize: "half" | "full"

Window size configuration

Defined in

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

ColorMode

Ƭ ColorMode: "light" | "dark"

Color mode configuration (light/dark modes)

Defined in

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

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

Defined in

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

InitializeConversation

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

Custom conversation init method. Defaults to sending the welcome intent

Type declaration

▸ (handler, context?): void

Parameters

Name

Type

Description

handler

ConversationHandler

the conversation handler.

context?

Context

context set via TouchpointConfiguration.initialContext

Returns

void

Defined in

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

CustomLaunchButton

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

Fully custom launch icon

Defined in

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

Input

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

Input type for the experience

Defined in

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

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+.

Defined in

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

Variables

version

• Const version: string = packageJson.version

Package version

Defined in

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

Functions

analyzePageForms

▸ analyzePageForms(): PageForms

Analyze page forms

Returns

PageForms

pageForms

Defined in

packages/touchpoint-ui/src/bidirectional/analyzePageForms.ts:71

Ripple

▸ Ripple(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

Object

props.className?

string

props.style?

CSSProperties

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/Ripple.tsx:24

Carousel

▸ Carousel(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

Object

props.children

ReactNode

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/Carousel.tsx:5

CustomCard

▸ CustomCard(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

CustomCardProps

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:33

CustomCardImageRow

▸ CustomCardImageRow(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

Object

props.src

string

props.alt?

string

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:76

CustomCardRow

▸ CustomCardRow(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

CustomCardRowProps

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:101

DateInput

▸ DateInput(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

DateInputProps

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/DateInput.tsx:25

IconButton

▸ IconButton(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

IconButtonProps

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/IconButton.tsx:94

TextButton

▸ TextButton(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

TextButtonProps

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/TextButton.tsx:33

BaseText

▸ BaseText(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

Object

props.children

ReactNode

props.faded?

boolean

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/Typography.tsx:5

SmallText

▸ SmallText(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

Object

props.children

ReactNode

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/components/ui/Typography.tsx:16

html

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

Parameters

Name

Type

strings

TemplateStringsArray

...values

any[]

Returns

unknown

Defined in

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

create

▸ create(props): Promise<TouchpointInstance>

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

Parameters

Name

Type

Description

props

TouchpointConfiguration

Configuration props for Touchpoint

Returns

Promise<TouchpointInstance>

A promise that resolves to a TouchpointInstance

Defined in

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

PreviewContainer

▸ PreviewContainer(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props

Object

props.children

ReactNode

props.mode

ColorMode

props.theme

Partial<Theme>

deprecatedLegacyContext?

any

Deprecated See React Docs

Returns

ReactNode

Defined in

packages/touchpoint-ui/src/preview.tsx:10

Interfaces

Interface: CustomCardProps

Props for the CustomCard component

Properties

children

• children: ReactNode

Content to be rendered inside the card.

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:14

selected

• Optional selected: boolean

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

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:18

onClick

• Optional onClick: () => void

Handler function for when the card is clicked

Type declaration

▸ (): void

Returns

void

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:22

href

• Optional href: string

Transform the card into an anchor tag with the href specified

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:26

newTab

• Optional newTab: boolean

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

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:30

Interface: CustomCardRowProps

Props for the CustomCardRow component

Properties

left

• left: ReactNode

Content to be displayed on the left side of the row

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:90

right

• right: ReactNode

Content to be displayed on the right side of the row

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:94

icon

• Optional icon: Icon

Optional icon to be displayed in the center of the row

Defined in

packages/touchpoint-ui/src/components/ui/CustomCard.tsx:98

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

Name

Type

Description

date

string

The submitted date in YYYY-MM-DD format

Returns

void

Defined in

packages/touchpoint-ui/src/components/ui/DateInput.tsx:16

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

Defined in

packages/touchpoint-ui/src/components/ui/IconButton.tsx:31

label

• label: string

Accessible label for the button

Defined in

packages/touchpoint-ui/src/components/ui/IconButton.tsx:35

className

• Optional className: string

Additional CSS classes to apply to the button

Defined in

packages/touchpoint-ui/src/components/ui/IconButton.tsx:39

type

• type: IconButtonType

Visual style variant of the button. One of IconButtonType.

Defined in

packages/touchpoint-ui/src/components/ui/IconButton.tsx:43

Icon

• Icon: FC<IconProps>

Icon component to display inside the button

Defined in

packages/touchpoint-ui/src/components/ui/IconButton.tsx:47

Interface: IconProps

Icons.IconProps

Props for icon components

Properties

className

• Optional className: string

Additional CSS classes to apply to the icon

Defined in

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

size

• Optional size: number

Custom size in pixels for the icon

Defined in

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

Interface: InteractiveElementInfo

Accessibility information with ID

Hierarchy

AccessibilityInformation
↳ InteractiveElementInfo

Properties

• id: string

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

Defined in

packages/touchpoint-ui/src/bidirectional/analyzePageForms.ts:18

Interface: PageForms

Page forms with elements

Properties

context

• context: InteractiveElementInfo[]

Page context

Defined in

packages/touchpoint-ui/src/bidirectional/analyzePageForms.ts:28

formElements

• formElements: Record<string, Element>

Form element references

Defined in

packages/touchpoint-ui/src/bidirectional/analyzePageForms.ts:32

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

Defined in

packages/touchpoint-ui/src/components/ui/TextButton.tsx:13

label

• label: string

Text to display on the button

Defined in

packages/touchpoint-ui/src/components/ui/TextButton.tsx:17

className

• Optional className: string

Additional CSS classes to apply to the button

Defined in

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

type

• Optional type: "main" | "ghost"

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

Defined in

packages/touchpoint-ui/src/components/ui/TextButton.tsx:26

Icon

• Icon: FC<IconProps>

Icon component to display inside the button.

Defined in

packages/touchpoint-ui/src/components/ui/TextButton.tsx:30

Interface: Theme

The full theme expressed as CSS custom properties

Properties

fontFamily

• fontFamily: string

Font family

Defined in

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

primary80

• primary80: string

Primary color with 80% opacity

Defined in

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

primary60

• primary60: string

Primary color with 60% opacity

Defined in

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

primary40

• primary40: string

Primary color with 40% opacity

Defined in

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

primary20

• primary20: string

Primary color with 20% opacity

Defined in

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

primary10

• primary10: string

Primary color with 10% opacity

Defined in

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

primary5

• primary5: string

Primary color with 5% opacity

Defined in

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

primary1

• primary1: string

Primary color with 1% opacity

Defined in

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

secondary80

• secondary80: string

Secondary color with 80% opacity

Defined in

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

secondary60

• secondary60: string

Secondary color with 60% opacity

Defined in

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

secondary40

• secondary40: string

Secondary color with 40% opacity

Defined in

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

secondary20

• secondary20: string

Secondary color with 20% opacity

Defined in

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

secondary10

• secondary10: string

Secondary color with 10% opacity

Defined in

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

secondary5

• secondary5: string

Secondary color with 5% opacity

Defined in

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

secondary1

• secondary1: string

Secondary color with 1% opacity

Defined in

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

accent

• accent: string

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

Defined in

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

accent20

• accent20: string

Accent color with 20% opacity

Defined in

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

background

• background: string

The background color of the main Touchpoint interface

Defined in

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

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

Defined in

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

warningPrimary

• warningPrimary: string

Primary warning color

Defined in

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

warningSecondary

• warningSecondary: string

Secondary warning color

Defined in

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

errorPrimary

• errorPrimary: string

Primary error color

Defined in

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

errorSecondary

• errorSecondary: string

Secondary error color

Defined in

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

innerBorderRadius

• innerBorderRadius: string

Inner border radius: used for most buttons

Defined in

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

outerBorderRadius

• outerBorderRadius: string

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

Defined in

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

Interface: TouchpointConfiguration

Main Touchpoint creation properties object

Properties

config

• config: Config

Connection information for the @nlxai/chat-core conversation handler

Defined in

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

windowSize

• Optional windowSize: WindowSize

Optional window size for the chat window, defaults to half

Defined in

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

colorMode

• Optional colorMode: ColorMode

Optional color mode for the chat window, defaults to dark

Defined in

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

brandIcon

• Optional brandIcon: string

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

Defined in

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

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.

Defined in

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

userMessageBubble

• Optional userMessageBubble: boolean

Specifies whether the user message has bubbles or not

Defined in

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

agentMessageBubble

• Optional agentMessageBubble: boolean

Specifies whether the agent message has bubbles or not

Defined in

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

chatMode

• Optional chatMode: boolean

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

Defined in

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

theme

• Optional theme: Partial<Theme>

Optional theme object to override default theme values

Defined in

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

customModalities

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

Optional custom modality components to render in Touchpoint

Defined in

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

initializeConversation

• Optional initializeConversation: InitializeConversation

Custom conversation init method. Defaults to sending the welcome intent

Param

the conversation handler.

Param

the context object

Defined in

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

input

• Optional input: Input

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

Defined in

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

initialContext

• Optional initialContext: Context

Context sent with the initial request.

Defined in

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

bidirectional

• Optional bidirectional: BidirectionalConfig

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

Defined in

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

Interface: TouchpointInstance

Instance of a Touchpoint UI component

Properties

expanded

• expanded: boolean

Controls whether the Touchpoint UI is expanded or collapsed

Defined in

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

conversationHandler

• conversationHandler: ConversationHandler

The conversation handler instance for interacting with the application

Defined in

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

teardown

• teardown: () => void

Method to remove the Touchpoint UI from the DOM

Type declaration

▸ (): void

Returns

void

Defined in

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

Modules

Namespace: Icons

Interfaces

IconProps

Type Aliases

Icon

Ƭ Icon: FC<IconProps>

Type definition for an icon component

Defined in

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

Functions

Action

▸ Action(props, deprecatedLegacyContext?): ReactNode

Parameters

Name

Type

Description

props