@nlxai/touchpoint-ui 1.0.5-alpha.8 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +105 -97
- package/lib/analyzePageForms.d.ts +31 -0
- package/lib/components/FullscreenVoice.d.ts +17 -4
- package/lib/components/Header.d.ts +6 -1
- package/lib/components/Input.d.ts +0 -2
- package/lib/components/Messages.d.ts +1 -2
- package/lib/components/Settings.d.ts +1 -0
- package/lib/components/VoiceMini.d.ts +5 -1
- package/lib/components/ui/CustomCard.d.ts +8 -0
- package/lib/components/ui/IconButton.d.ts +4 -0
- package/lib/components/ui/Icons.d.ts +1 -0
- package/lib/index.d.ts +12 -1
- package/lib/index.js +7808 -6705
- package/lib/index.umd.js +49 -49
- package/lib/types.d.ts +16 -6
- package/lib/voice.d.ts +10 -3
- package/package.json +4 -3
- package/tailwind.config.js +1 -1
package/index.html
CHANGED
|
@@ -1,108 +1,116 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
6
|
-
<style>
|
|
7
|
-
main {
|
|
8
|
-
padding: 15px;
|
|
9
|
-
}
|
|
10
3
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
7
|
+
<style>
|
|
8
|
+
main {
|
|
9
|
+
padding: 15px;
|
|
10
|
+
}
|
|
18
11
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
main * {
|
|
13
|
+
font-family: Helvetica, sans-serif;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
17
|
+
<title>Touchpoint prototype</title>
|
|
18
|
+
</head>
|
|
22
19
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
finibus, vitae scelerisque magna molestie. Donec mollis ut elit a
|
|
27
|
-
tristique. Phasellus tempus velit quam, non tempor dolor tempus a.
|
|
28
|
-
Quisque sed risus tortor. Duis ultricies maximus imperdiet. Vivamus eget
|
|
29
|
-
accumsan nulla. Sed accumsan ipsum in pharetra ornare. In ac scelerisque
|
|
30
|
-
metus. In hac habitasse platea dictumst. Proin est massa, interdum ut
|
|
31
|
-
risus sit amet, congue bibendum dolor. Donec dapibus lacus vel sem
|
|
32
|
-
hendrerit, sit amet placerat odio blandit. Cras laoreet sapien id erat
|
|
33
|
-
ornare, in hendrerit tortor commodo.
|
|
34
|
-
</p>
|
|
20
|
+
<body>
|
|
21
|
+
<main>
|
|
22
|
+
<h1>Loreum ipsum dolor sit amet</h1>
|
|
35
23
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
24
|
+
<p>
|
|
25
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
|
26
|
+
fermentum nisi nec placerat facilisis. Ut fringilla magna ac ipsum
|
|
27
|
+
finibus, vitae scelerisque magna molestie. Donec mollis ut elit a
|
|
28
|
+
tristique. Phasellus tempus velit quam, non tempor dolor tempus a.
|
|
29
|
+
Quisque sed risus tortor. Duis ultricies maximus imperdiet. Vivamus eget
|
|
30
|
+
accumsan nulla. Sed accumsan ipsum in pharetra ornare. In ac scelerisque
|
|
31
|
+
metus. In hac habitasse platea dictumst. Proin est massa, interdum ut
|
|
32
|
+
risus sit amet, congue bibendum dolor. Donec dapibus lacus vel sem
|
|
33
|
+
hendrerit, sit amet placerat odio blandit. Cras laoreet sapien id erat
|
|
34
|
+
ornare, in hendrerit tortor commodo.
|
|
35
|
+
</p>
|
|
45
36
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
</p>
|
|
37
|
+
<p>
|
|
38
|
+
Nulla porta quis sem id pellentesque. Aenean elit enim, vestibulum vitae
|
|
39
|
+
libero quis, pretium vestibulum nunc. Proin id dolor vulputate, rhoncus
|
|
40
|
+
tellus quis, condimentum mi. Morbi sed varius nisi, sed convallis
|
|
41
|
+
tellus. Cras imperdiet feugiat nisi at tristique. Suspendisse potenti.
|
|
42
|
+
Cras in quam fermentum, laoreet tortor non, euismod leo. Mauris
|
|
43
|
+
tincidunt massa quis malesuada pellentesque. Nulla auctor arcu vel orci
|
|
44
|
+
sodales porttitor.
|
|
45
|
+
</p>
|
|
56
46
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
nibh sapien varius justo, eget pellentesque erat leo ac lectus. Nulla eu
|
|
68
|
-
auctor sem. Cras condimentum sem non mauris facilisis imperdiet. Integer
|
|
69
|
-
eu dolor ipsum. Praesent maximus ornare felis, non faucibus sem
|
|
70
|
-
porttitor nec.
|
|
71
|
-
</p>
|
|
47
|
+
<p>
|
|
48
|
+
Integer magna mi, consectetur vitae dui tempus, ultricies commodo magna.
|
|
49
|
+
Morbi aliquet varius enim eget ullamcorper. Vestibulum tristique, risus
|
|
50
|
+
eget tincidunt tristique, nibh dolor laoreet purus, id viverra mi ipsum
|
|
51
|
+
eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
52
|
+
Vestibulum imperdiet ut ex et convallis. Lorem ipsum dolor sit amet,
|
|
53
|
+
consectetur adipiscing elit. Phasellus auctor eget odio ut dignissim.
|
|
54
|
+
Mauris eget velit ut orci vestibulum bibendum. Vestibulum sit amet
|
|
55
|
+
tincidunt enim.
|
|
56
|
+
</p>
|
|
72
57
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
58
|
+
<p>
|
|
59
|
+
Donec eu mauris ac lectus rutrum blandit ut id ante. Phasellus volutpat
|
|
60
|
+
imperdiet mauris in aliquet. Duis auctor, tellus ac faucibus fermentum,
|
|
61
|
+
ligula quam hendrerit eros, ut vehicula erat mi non nulla. Fusce odio
|
|
62
|
+
massa, fermentum eget metus vitae, interdum viverra justo. Nam consequat
|
|
63
|
+
mauris orci, a rhoncus eros volutpat nec. Nunc iaculis erat efficitur,
|
|
64
|
+
pulvinar eros vel, commodo ligula. Praesent gravida, ipsum vitae tempus
|
|
65
|
+
aliquam, mauris elit pharetra sapien, vitae porttitor quam orci quis
|
|
66
|
+
dolor. Mauris et vulputate enim, et pellentesque libero. Proin cursus
|
|
67
|
+
malesuada condimentum. Donec scelerisque, quam in fringilla facilisis,
|
|
68
|
+
nibh sapien varius justo, eget pellentesque erat leo ac lectus. Nulla eu
|
|
69
|
+
auctor sem. Cras condimentum sem non mauris facilisis imperdiet. Integer
|
|
70
|
+
eu dolor ipsum. Praesent maximus ornare felis, non faucibus sem
|
|
71
|
+
porttitor nec.
|
|
72
|
+
</p>
|
|
73
|
+
|
|
74
|
+
<p>
|
|
75
|
+
Orci varius natoque penatibus et magnis dis parturient montes, nascetur
|
|
76
|
+
ridiculus mus. Nunc elementum non urna vel vulputate. Vestibulum vitae
|
|
77
|
+
felis turpis. Cras id mauris id ligula molestie eleifend. Vivamus in
|
|
78
|
+
ante at erat rutrum vulputate vel id arcu. Nam luctus sapien sed
|
|
79
|
+
fermentum fermentum. Ut dolor velit, elementum et metus vel, pretium
|
|
80
|
+
dapibus lectus. Nulla vulputate pulvinar elit quis convallis. Cras
|
|
81
|
+
pharetra, eros sit amet blandit ornare, eros odio accumsan urna, nec
|
|
82
|
+
vestibulum dolor purus nec neque. Phasellus vel quam sed magna vehicula
|
|
83
|
+
facilisis sit amet non risus. Phasellus libero eros, eleifend ut
|
|
84
|
+
vulputate non, malesuada sit amet purus. Etiam vel diam facilisis,
|
|
85
|
+
tempus quam eu, ullamcorper turpis. Duis nec enim ut est rutrum rhoncus.
|
|
86
|
+
Cras finibus urna at purus accumsan, viverra lacinia nunc faucibus. In
|
|
87
|
+
facilisis, ex eu commodo luctus, justo nisl hendrerit quam, quis
|
|
88
|
+
volutpat tellus lectus sit amet enim. Duis laoreet lorem vitae lorem
|
|
89
|
+
aliquam bibendum.
|
|
90
|
+
</p>
|
|
91
|
+
</main>
|
|
92
|
+
<script type="module">
|
|
93
|
+
import {create, html} from "/src/index.tsx";
|
|
94
|
+
const Something = () => {
|
|
95
|
+
return html`
|
|
96
|
+
<p>Hello, world</p>
|
|
97
|
+
`;
|
|
98
|
+
};
|
|
99
|
+
const touchpoint = await create({
|
|
100
|
+
config: {
|
|
101
|
+
applicationUrl:
|
|
102
|
+
"https://bots.dev.studio.nlx.ai/c/kQwAgKCx86vJ4r0PUSxYR/ON4zgwWnVofsz2NaiD38Z",
|
|
103
|
+
headers: {
|
|
104
|
+
"nlx-api-key": "XDE2Th70VhBSlhz2YA",
|
|
102
105
|
},
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
userId: "1234-5678",
|
|
107
|
+
languageCode: "en-US",
|
|
108
|
+
},
|
|
109
|
+
input: "voice",
|
|
110
|
+
customModalities: {Something},
|
|
111
|
+
initializeConversation: () => { }
|
|
112
|
+
});
|
|
113
|
+
</script>
|
|
114
|
+
</body>
|
|
115
|
+
|
|
108
116
|
</html>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accessibility information
|
|
3
|
+
*/
|
|
4
|
+
export type AccessibilityInformation = Record<string, any>;
|
|
5
|
+
/**
|
|
6
|
+
* Accessibility information with ID
|
|
7
|
+
*/
|
|
8
|
+
export interface InteractiveElementInfo extends AccessibilityInformation {
|
|
9
|
+
/**
|
|
10
|
+
* Form element ID (assigned by the analysis logic, not necessarily equal to the DOM ID)
|
|
11
|
+
*/
|
|
12
|
+
id: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Page forms with elements
|
|
16
|
+
*/
|
|
17
|
+
export interface PageForms {
|
|
18
|
+
/**
|
|
19
|
+
* Page context
|
|
20
|
+
*/
|
|
21
|
+
context: InteractiveElementInfo[];
|
|
22
|
+
/**
|
|
23
|
+
* Form element references
|
|
24
|
+
*/
|
|
25
|
+
formElements: Record<string, Element>;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Analyze page forms
|
|
29
|
+
* @returns pageForms
|
|
30
|
+
*/
|
|
31
|
+
export declare const analyzePageForms: () => PageForms;
|
|
@@ -1,16 +1,29 @@
|
|
|
1
|
-
import { Dispatch, SetStateAction, FC } from 'react';
|
|
2
|
-
import { ConversationHandler } from '@nlxai/chat-core';
|
|
3
|
-
import { ColorMode } from '../types';
|
|
4
|
-
import { SoundCheck } from '../voice';
|
|
1
|
+
import { Dispatch, SetStateAction, FC, ReactNode } from 'react';
|
|
2
|
+
import { Context, ConversationHandler } from '@nlxai/chat-core';
|
|
3
|
+
import { ColorMode, InitializeConversation, CustomModalityComponent } from '../types';
|
|
4
|
+
import { SoundCheck, ModalitiesWithContext } from '../voice';
|
|
5
5
|
interface Props {
|
|
6
6
|
colorMode: ColorMode;
|
|
7
7
|
handler: ConversationHandler;
|
|
8
|
+
speakersEnabled: boolean;
|
|
9
|
+
brandIcon?: string;
|
|
8
10
|
className?: string;
|
|
9
11
|
active: boolean;
|
|
10
12
|
setActive: Dispatch<SetStateAction<boolean>>;
|
|
13
|
+
context?: Context;
|
|
14
|
+
initializeConversation: InitializeConversation;
|
|
15
|
+
customModalities?: Record<string, CustomModalityComponent<unknown>>;
|
|
11
16
|
}
|
|
12
17
|
export declare const SoundCheckUi: FC<{
|
|
13
18
|
soundCheck: SoundCheck | null;
|
|
14
19
|
}>;
|
|
20
|
+
export declare const VoiceModalities: FC<{
|
|
21
|
+
Wrapper?: FC<{
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
}>;
|
|
24
|
+
roomData: ModalitiesWithContext;
|
|
25
|
+
customModalities: Record<string, CustomModalityComponent<unknown>>;
|
|
26
|
+
handler: ConversationHandler;
|
|
27
|
+
}>;
|
|
15
28
|
export declare const FullscreenVoice: FC<Props>;
|
|
16
29
|
export {};
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { SetStateAction, Dispatch, FC } from 'react';
|
|
2
2
|
import { WindowSize, ColorMode } from '../types';
|
|
3
3
|
interface HeaderProps {
|
|
4
4
|
windowSize: WindowSize | "embedded";
|
|
5
5
|
colorMode: ColorMode;
|
|
6
|
+
errorThemedCloseButton?: boolean;
|
|
7
|
+
speakerControls?: {
|
|
8
|
+
enabled: boolean;
|
|
9
|
+
setEnabled: Dispatch<SetStateAction<boolean>>;
|
|
10
|
+
};
|
|
6
11
|
brandIcon?: string;
|
|
7
12
|
renderCollapse: boolean;
|
|
8
13
|
collapse: (event: Event) => void;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { ConversationHandler, UploadUrl } from '@nlxai/chat-core';
|
|
3
|
-
import { ChoiceMessage } from '../types';
|
|
4
3
|
interface InputProps {
|
|
5
4
|
className?: string;
|
|
6
5
|
handler: ConversationHandler;
|
|
@@ -9,7 +8,6 @@ interface InputProps {
|
|
|
9
8
|
uploadId: string;
|
|
10
9
|
file: File;
|
|
11
10
|
}) => void;
|
|
12
|
-
choiceMessage?: ChoiceMessage;
|
|
13
11
|
enabled: boolean;
|
|
14
12
|
}
|
|
15
13
|
export declare const Input: FC<InputProps>;
|
|
@@ -11,7 +11,7 @@ export interface MessagesProps {
|
|
|
11
11
|
colorMode: ColorMode;
|
|
12
12
|
uploadedFiles: Record<string, File>;
|
|
13
13
|
lastBotResponseIndex?: number;
|
|
14
|
-
customModalities: Record<string, CustomModalityComponent<
|
|
14
|
+
customModalities: Record<string, CustomModalityComponent<unknown>>;
|
|
15
15
|
className?: string;
|
|
16
16
|
enabled: boolean;
|
|
17
17
|
}
|
|
@@ -20,6 +20,5 @@ export declare const MessageChoices: FC<{
|
|
|
20
20
|
message: BotMessage;
|
|
21
21
|
responseIndex: number;
|
|
22
22
|
messageIndex: number;
|
|
23
|
-
className?: string;
|
|
24
23
|
}>;
|
|
25
24
|
export declare const Messages: FC<MessagesProps>;
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
import { ConversationHandler } from '@nlxai/chat-core';
|
|
1
|
+
import { Context, ConversationHandler } from '@nlxai/chat-core';
|
|
2
2
|
import { FC } from 'react';
|
|
3
|
+
import { CustomModalityComponent } from '../types';
|
|
3
4
|
export declare const VoiceMini: FC<{
|
|
5
|
+
customModalities: Record<string, CustomModalityComponent<unknown>>;
|
|
4
6
|
handler: ConversationHandler;
|
|
7
|
+
onClose: () => void;
|
|
8
|
+
context?: Context;
|
|
5
9
|
}>;
|
|
@@ -16,6 +16,14 @@ export interface CustomCardProps {
|
|
|
16
16
|
* Handler function for when the card is clicked
|
|
17
17
|
*/
|
|
18
18
|
onClick?: () => void;
|
|
19
|
+
/**
|
|
20
|
+
* Transform the card into an anchor tag with the href specified
|
|
21
|
+
*/
|
|
22
|
+
href?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Specify whether the URL should take the user to a new tab
|
|
25
|
+
*/
|
|
26
|
+
newTab?: boolean;
|
|
19
27
|
}
|
|
20
28
|
export declare const CustomCard: FC<CustomCardProps>;
|
|
21
29
|
export declare const CustomCardImageRow: FC<{
|
package/lib/index.d.ts
CHANGED
|
@@ -7,6 +7,17 @@ import { Carousel } from './components/ui/Carousel';
|
|
|
7
7
|
import { DateInput } from './components/ui/DateInput';
|
|
8
8
|
import { TouchpointConfiguration } from './types';
|
|
9
9
|
import * as Icons from "./components/ui/Icons";
|
|
10
|
+
export { analyzePageForms, type InteractiveElementInfo, type PageForms, type AccessibilityInformation, } from './analyzePageForms';
|
|
11
|
+
/**
|
|
12
|
+
* If you wish to build custom modalities using JSX, you will want to
|
|
13
|
+
*
|
|
14
|
+
* ```javascript
|
|
15
|
+
* import { React } from "@nlx/touchpoint-ui";
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* instead of importing from "react" directly. This ensures that the custom modalities will
|
|
19
|
+
* be running in the same React context as the Touchpoint UI using the correct version of React.
|
|
20
|
+
*/
|
|
10
21
|
export { default as React } from 'react';
|
|
11
22
|
export declare const html: (strings: TemplateStringsArray, ...values: any[]) => unknown;
|
|
12
23
|
export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, };
|
|
@@ -14,7 +25,7 @@ export { type CustomCardProps, type CustomCardRowProps, } from './components/ui/
|
|
|
14
25
|
export { type DateInputProps } from './components/ui/DateInput';
|
|
15
26
|
export { type IconButtonProps, type IconButtonType, } from './components/ui/IconButton';
|
|
16
27
|
export { type TextButtonProps } from './components/ui/TextButton';
|
|
17
|
-
export { type InitializeConversation, type ColorMode, type Theme, type WindowSize, type CustomModalityComponent, type TouchpointConfiguration, } from './types';
|
|
28
|
+
export { type InitializeConversation, type ColorMode, type Input, type Theme, type WindowSize, type CustomModalityComponent, type TouchpointConfiguration, } from './types';
|
|
18
29
|
/**
|
|
19
30
|
* Instance of a Touchpoint UI component
|
|
20
31
|
*/
|