@nlxai/touchpoint-ui 1.1.0 → 1.1.2
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 +140 -104
- package/lib/components/Ripple.d.ts +2 -1
- package/lib/components/ui/LaunchButton.d.ts +5 -1
- package/lib/index.d.ts +7 -2
- package/lib/index.js +4787 -4732
- package/lib/index.umd.js +40 -40
- package/lib/types.d.ts +14 -1
- package/lib/voice.d.ts +1 -0
- package/package.json +2 -2
package/index.html
CHANGED
|
@@ -1,116 +1,152 @@
|
|
|
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
|
+
}
|
|
3
10
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
+
main * {
|
|
12
|
+
font-family: Helvetica, sans-serif;
|
|
13
|
+
}
|
|
14
|
+
</style>
|
|
15
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
16
|
+
<title>Touchpoint prototype</title>
|
|
17
|
+
</head>
|
|
11
18
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
</style>
|
|
16
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
17
|
-
<title>Touchpoint prototype</title>
|
|
18
|
-
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<main>
|
|
21
|
+
<h1>Loreum ipsum dolor sit amet</h1>
|
|
19
22
|
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
<p>
|
|
24
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
|
|
25
|
+
fermentum nisi nec placerat facilisis. Ut fringilla magna ac ipsum
|
|
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>
|
|
23
35
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
hendrerit, sit amet placerat odio blandit. Cras laoreet sapien id erat
|
|
34
|
-
ornare, in hendrerit tortor commodo.
|
|
35
|
-
</p>
|
|
36
|
+
<p>
|
|
37
|
+
Nulla porta quis sem id pellentesque. Aenean elit enim, vestibulum vitae
|
|
38
|
+
libero quis, pretium vestibulum nunc. Proin id dolor vulputate, rhoncus
|
|
39
|
+
tellus quis, condimentum mi. Morbi sed varius nisi, sed convallis
|
|
40
|
+
tellus. Cras imperdiet feugiat nisi at tristique. Suspendisse potenti.
|
|
41
|
+
Cras in quam fermentum, laoreet tortor non, euismod leo. Mauris
|
|
42
|
+
tincidunt massa quis malesuada pellentesque. Nulla auctor arcu vel orci
|
|
43
|
+
sodales porttitor.
|
|
44
|
+
</p>
|
|
36
45
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
<p>
|
|
47
|
+
Integer magna mi, consectetur vitae dui tempus, ultricies commodo magna.
|
|
48
|
+
Morbi aliquet varius enim eget ullamcorper. Vestibulum tristique, risus
|
|
49
|
+
eget tincidunt tristique, nibh dolor laoreet purus, id viverra mi ipsum
|
|
50
|
+
eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
51
|
+
Vestibulum imperdiet ut ex et convallis. Lorem ipsum dolor sit amet,
|
|
52
|
+
consectetur adipiscing elit. Phasellus auctor eget odio ut dignissim.
|
|
53
|
+
Mauris eget velit ut orci vestibulum bibendum. Vestibulum sit amet
|
|
54
|
+
tincidunt enim.
|
|
55
|
+
</p>
|
|
46
56
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
+
<p>
|
|
58
|
+
Donec eu mauris ac lectus rutrum blandit ut id ante. Phasellus volutpat
|
|
59
|
+
imperdiet mauris in aliquet. Duis auctor, tellus ac faucibus fermentum,
|
|
60
|
+
ligula quam hendrerit eros, ut vehicula erat mi non nulla. Fusce odio
|
|
61
|
+
massa, fermentum eget metus vitae, interdum viverra justo. Nam consequat
|
|
62
|
+
mauris orci, a rhoncus eros volutpat nec. Nunc iaculis erat efficitur,
|
|
63
|
+
pulvinar eros vel, commodo ligula. Praesent gravida, ipsum vitae tempus
|
|
64
|
+
aliquam, mauris elit pharetra sapien, vitae porttitor quam orci quis
|
|
65
|
+
dolor. Mauris et vulputate enim, et pellentesque libero. Proin cursus
|
|
66
|
+
malesuada condimentum. Donec scelerisque, quam in fringilla facilisis,
|
|
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>
|
|
57
72
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
<p>
|
|
74
|
+
Orci varius natoque penatibus et magnis dis parturient montes, nascetur
|
|
75
|
+
ridiculus mus. Nunc elementum non urna vel vulputate. Vestibulum vitae
|
|
76
|
+
felis turpis. Cras id mauris id ligula molestie eleifend. Vivamus in
|
|
77
|
+
ante at erat rutrum vulputate vel id arcu. Nam luctus sapien sed
|
|
78
|
+
fermentum fermentum. Ut dolor velit, elementum et metus vel, pretium
|
|
79
|
+
dapibus lectus. Nulla vulputate pulvinar elit quis convallis. Cras
|
|
80
|
+
pharetra, eros sit amet blandit ornare, eros odio accumsan urna, nec
|
|
81
|
+
vestibulum dolor purus nec neque. Phasellus vel quam sed magna vehicula
|
|
82
|
+
facilisis sit amet non risus. Phasellus libero eros, eleifend ut
|
|
83
|
+
vulputate non, malesuada sit amet purus. Etiam vel diam facilisis,
|
|
84
|
+
tempus quam eu, ullamcorper turpis. Duis nec enim ut est rutrum rhoncus.
|
|
85
|
+
Cras finibus urna at purus accumsan, viverra lacinia nunc faucibus. In
|
|
86
|
+
facilisis, ex eu commodo luctus, justo nisl hendrerit quam, quis
|
|
87
|
+
volutpat tellus lectus sit amet enim. Duis laoreet lorem vitae lorem
|
|
88
|
+
aliquam bibendum.
|
|
89
|
+
</p>
|
|
90
|
+
</main>
|
|
91
|
+
<script type="module">
|
|
92
|
+
import { create, html } from "/src/index.tsx";
|
|
73
93
|
|
|
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
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
94
|
+
const CustomLaunchButton = ({ className, onClick }) => {
|
|
95
|
+
return html`
|
|
96
|
+
<div
|
|
97
|
+
className=${className}
|
|
98
|
+
style=${{ width: "56px", height: "56px" }}
|
|
99
|
+
>
|
|
100
|
+
<Ripple
|
|
101
|
+
style=${{ color: "rgba(0, 64, 255, 0.2)" }}
|
|
102
|
+
className="rounded-outer"
|
|
103
|
+
/>
|
|
104
|
+
<button
|
|
105
|
+
className="relative rounded-outer p-2 after:content-[''] after:rounded-outer after:absolute after:inset-0 after:pointer-events-none hover:after:bg-primary-10"
|
|
106
|
+
style=${{ color: "#fff", backgroundColor: "rgba(0, 64, 255, 1)" }}
|
|
107
|
+
onClick=${onClick}
|
|
108
|
+
>
|
|
109
|
+
<svg
|
|
110
|
+
viewBox="0 0 24 24"
|
|
111
|
+
width="100%"
|
|
112
|
+
height="100%"
|
|
113
|
+
fill="currentColor"
|
|
114
|
+
>
|
|
115
|
+
<path
|
|
116
|
+
d="M13.5562 5.34835C12.2796 6.62498 12.4866 8.90179 14.0186 10.4337C14.3377 10.7529 14.5571 11.134 14.6767 11.5383C14.8007 11.9572 14.8177 12.4011 14.7277 12.8268C14.6656 13.1203 14.5526 13.4051 14.3887 13.6672C14.3259 13.7677 14.2557 13.865 14.1778 13.9581C14.1279 14.018 14.0747 14.0761 14.0186 14.1322C13.3341 14.8166 12.3641 15.0421 11.4917 14.8092L11.4728 14.8042C9.38654 14.2543 7.32235 15.2129 6.85652 16.9516C6.5761 17.9979 5.50065 18.6188 4.45431 18.3385C3.40798 18.0581 2.787 16.9826 3.06729 15.9363C3.34209 14.9111 4.38012 14.2942 5.40615 14.5335L5.40666 14.5317C5.42748 14.5378 5.44842 14.5437 5.46962 14.5493C7.21342 15.0166 9.08173 13.699 9.64244 11.6062C9.64857 11.5835 9.65521 11.5608 9.66185 11.5383C9.7815 11.134 10.0009 10.7529 10.32 10.4337L10.332 10.4214C10.339 10.4142 10.346 10.407 10.3533 10.4C11.8549 8.86865 12.0496 6.61566 10.7824 5.34835C10.0163 4.58237 10.0163 3.34047 10.7824 2.57449C11.5483 1.8085 12.7903 1.8085 13.5562 2.57449C14.3066 3.32501 14.3218 4.53237 13.6016 5.30135L13.6029 5.30263C13.5872 5.3177 13.5716 5.33289 13.5562 5.34835Z"
|
|
117
|
+
/>
|
|
118
|
+
<path
|
|
119
|
+
d="M19.327 6.83185C20.0311 6.83185 20.6019 7.40264 20.6019 8.10675C20.6019 8.81087 20.0311 9.38166 19.327 9.38166C18.6229 9.38166 18.0521 8.81087 18.0521 8.10675C18.0521 7.40264 18.6229 6.83185 19.327 6.83185Z"
|
|
120
|
+
/>
|
|
121
|
+
<path
|
|
122
|
+
d="M21.3237 16.4754C21.3237 15.3741 20.4309 14.4813 19.3297 14.4813C18.2284 14.4813 17.3356 15.3741 17.3356 16.4754C17.3356 17.5767 18.2284 18.4695 19.3297 18.4695C20.4309 18.4695 21.3237 17.5767 21.3237 16.4754Z"
|
|
123
|
+
/>
|
|
124
|
+
<path
|
|
125
|
+
d="M12.1025 19.3194C12.8246 19.3194 13.4101 19.9195 13.4101 20.6597C13.4101 21.4 12.8246 22 12.1025 22C11.3804 22 10.7949 21.4 10.7949 20.6597C10.7949 19.9195 11.3804 19.3194 12.1025 19.3194Z"
|
|
126
|
+
/>
|
|
127
|
+
<path
|
|
128
|
+
d="M6.28367 8.13944C6.28367 7.41726 5.68363 6.83185 4.94339 6.83185C4.20314 6.83185 3.6031 7.41726 3.6031 8.13944C3.6031 8.86163 4.20314 9.44704 4.94339 9.44704C5.68363 9.44704 6.28367 8.86163 6.28367 8.13944Z"
|
|
129
|
+
/>
|
|
130
|
+
</svg>
|
|
131
|
+
</button>
|
|
132
|
+
</div>
|
|
133
|
+
`;
|
|
134
|
+
};
|
|
115
135
|
|
|
136
|
+
const touchpoint = await create({
|
|
137
|
+
config: {
|
|
138
|
+
applicationUrl:
|
|
139
|
+
"https://bots.dev.studio.nlx.ai/c/kQwAgKCx86vJ4r0PUSxYR/ON4zgwWnVofsz2NaiD38Z",
|
|
140
|
+
headers: {
|
|
141
|
+
"nlx-api-key": "XDE2Th70VhBSlhz2YA",
|
|
142
|
+
},
|
|
143
|
+
userId: "1234-5678",
|
|
144
|
+
languageCode: "en-US",
|
|
145
|
+
},
|
|
146
|
+
input: "voice",
|
|
147
|
+
launchIcon: CustomLaunchButton,
|
|
148
|
+
initializeConversation: () => {},
|
|
149
|
+
});
|
|
150
|
+
</script>
|
|
151
|
+
</body>
|
|
116
152
|
</html>
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ComponentType } from 'react';
|
|
2
2
|
export interface LaunchButtonProps {
|
|
3
3
|
label: string;
|
|
4
4
|
className?: string;
|
|
5
5
|
showLabel?: boolean;
|
|
6
6
|
onClick?: () => void;
|
|
7
7
|
iconUrl?: string;
|
|
8
|
+
Custom?: ComponentType<{
|
|
9
|
+
className?: string;
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
}>;
|
|
8
12
|
}
|
|
9
13
|
export declare const LaunchButton: FC<LaunchButtonProps>;
|
package/lib/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ConversationHandler } from '@nlxai/chat-core';
|
|
2
2
|
import { TextButton } from './components/ui/TextButton';
|
|
3
3
|
import { IconButton } from './components/ui/IconButton';
|
|
4
|
+
import { Ripple } from './components/Ripple';
|
|
4
5
|
import { BaseText, SmallText } from './components/ui/Typography';
|
|
5
6
|
import { CustomCard, CustomCardRow, CustomCardImageRow } from './components/ui/CustomCard';
|
|
6
7
|
import { Carousel } from './components/ui/Carousel';
|
|
@@ -19,13 +20,17 @@ export { analyzePageForms, type InteractiveElementInfo, type PageForms, type Acc
|
|
|
19
20
|
* be running in the same React context as the Touchpoint UI using the correct version of React.
|
|
20
21
|
*/
|
|
21
22
|
export { default as React } from 'react';
|
|
23
|
+
/**
|
|
24
|
+
* Package version
|
|
25
|
+
*/
|
|
26
|
+
export declare const version: string;
|
|
22
27
|
export declare const html: (strings: TemplateStringsArray, ...values: any[]) => unknown;
|
|
23
|
-
export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, };
|
|
28
|
+
export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, Ripple, };
|
|
24
29
|
export { type CustomCardProps, type CustomCardRowProps, } from './components/ui/CustomCard';
|
|
25
30
|
export { type DateInputProps } from './components/ui/DateInput';
|
|
26
31
|
export { type IconButtonProps, type IconButtonType, } from './components/ui/IconButton';
|
|
27
32
|
export { type TextButtonProps } from './components/ui/TextButton';
|
|
28
|
-
export { type InitializeConversation, type ColorMode, type Input, type Theme, type WindowSize, type CustomModalityComponent, type TouchpointConfiguration, } from './types';
|
|
33
|
+
export { type InitializeConversation, type ColorMode, type Input, type Theme, type WindowSize, type CustomModalityComponent, type TouchpointConfiguration, type CustomLaunchButton, } from './types';
|
|
29
34
|
/**
|
|
30
35
|
* Instance of a Touchpoint UI component
|
|
31
36
|
*/
|