Touchpoint Setup
API reference
@nlxai/touchpoint-ui
Namespaces
Interfaces
- InteractiveElementInfo
- PageForms
- CustomCardProps
- CustomCardRowProps
- DateInputProps
- IconButtonProps
- TextButtonProps
- TouchpointInstance
- Theme
- TouchpointConfiguration
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
Name | Type | Description |
---|---|---|
handler | ConversationHandler | the conversation handler. |
context? | Context | context 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
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
Carousel
▸ Carousel(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | Object | - |
props.children | ReactNode | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
CustomCard
▸ CustomCard(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | CustomCardProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
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
CustomCardRow
▸ CustomCardRow(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | CustomCardRowProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
DateInput
▸ DateInput(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | DateInputProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
IconButton
▸ IconButton(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconButtonProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
TextButton
▸ TextButton(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | TextButtonProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
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
SmallText
▸ SmallText(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | Object | - |
props.children | ReactNode | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
html
▸ html(strings
,...values
):unknown
Parameters
Name | Type |
---|---|
strings | TemplateStringsArray |
...values | any [] |
Returns
unknown
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
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
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
• 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
Name | Type | Description |
---|---|---|
date | string | The 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
-
↳
InteractiveElementInfo
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
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Touchpoint
▸ Touchpoint(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
AssistantOld
▸ AssistantOld(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Add
▸ Add(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
ArrowDown
▸ ArrowDown(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
ArrowLeft
▸ ArrowLeft(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
ArrowRight
▸ ArrowRight(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
ArrowUp
▸ ArrowUp(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
ArrowForward
▸ ArrowForward(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Attachment
▸ Attachment(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Camera
▸ Camera(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Check
▸ Check(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Close
▸ Close(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Copy
▸ Copy(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Date
▸ Date(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Delete
▸ Delete(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Escalate
▸ Escalate(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Error
▸ Error(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
FullScreen
▸ FullScreen(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Mic
▸ Mic(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
MicOff
▸ MicOff(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Location
▸ Location(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Volume
▸ Volume(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
VolumeOff
▸ VolumeOff(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Translate
▸ Translate(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
OpenInNew
▸ OpenInNew(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Play
▸ Play(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Preview
▸ Preview(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Reorder
▸ Reorder(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Restart
▸ Restart(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Settings
▸ Settings(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Search
▸ Search(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Share
▸ Share(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Warning
▸ Warning(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
ThumbDown
▸ ThumbDown(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
ThumbUp
▸ ThumbUp(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Time
▸ Time(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Undo
▸ Undo(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Refresh
▸ Refresh(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
Help
▸ Help(props
,deprecatedLegacyContext?
):ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode
OpenLink
▸ OpenLink(props
, deprecatedLegacyContext?
): ReactNode
Parameters
Name | Type | Description |
---|---|---|
props | IconProps | - |
deprecatedLegacyContext? | any | Deprecated See React Docs |
Returns
ReactNode