@nlxai/touchpoint-ui 1.2.3-alpha.2 → 1.2.4-alpha.1
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/README.md +1371 -7
- package/index.html +30 -168
- package/lib/bidirectional/analyzePageForms.d.ts +5 -1
- package/lib/components/FeedbackComment.d.ts +6 -0
- package/lib/components/FullscreenVoice.d.ts +1 -0
- package/lib/components/Messages.d.ts +3 -0
- package/lib/components/Ripple.d.ts +4 -0
- package/lib/components/ui/Carousel.d.ts +18 -0
- package/lib/components/ui/CustomCard.d.ts +47 -0
- package/lib/components/ui/DateInput.d.ts +15 -1
- package/lib/components/ui/IconButton.d.ts +22 -2
- package/lib/components/ui/Icons.d.ts +2 -0
- package/lib/components/ui/MessageButton.d.ts +58 -0
- package/lib/components/ui/TextButton.d.ts +17 -0
- package/lib/components/ui/Typography.d.ts +19 -0
- package/lib/feedback.d.ts +40 -0
- package/lib/index.d.ts +26 -2
- package/lib/index.js +8395 -8070
- package/lib/index.umd.js +54 -54
- package/lib/interface.d.ts +153 -127
- package/package.json +11 -6
- package/typedoc.cjs +19 -6
package/index.html
CHANGED
|
@@ -2,186 +2,48 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
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>
|
|
5
|
+
<title>Touchpoint</title>
|
|
6
|
+
<link
|
|
7
|
+
href="https://db.onlinewebfonts.com/c/0970e3fd1aa7e6ff6937c76a583f3a30?family=BW+Haas+Text+Mono+C+55+Rom+Regular"
|
|
8
|
+
rel="stylesheet"
|
|
9
|
+
/>
|
|
17
10
|
</head>
|
|
18
11
|
|
|
19
|
-
<body
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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>
|
|
35
|
-
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
12
|
+
<body
|
|
13
|
+
style="
|
|
14
|
+
background-image: url(https://platform.nlx.ai/onboarding-bg/voiceplus.webp);
|
|
15
|
+
background-size: cover;
|
|
16
|
+
color: white;
|
|
17
|
+
"
|
|
18
|
+
>
|
|
19
|
+
<div
|
|
20
|
+
style="width: 40vw; height: 80vh; margin: auto; padding-top: 10vh"
|
|
21
|
+
></div>
|
|
91
22
|
<script type="module">
|
|
92
|
-
import { create, html } from "
|
|
93
|
-
import * as z from "zod/v4";
|
|
94
|
-
|
|
95
|
-
const CustomLaunchButton = ({ className, onClick }) => {
|
|
96
|
-
return html`
|
|
97
|
-
<div
|
|
98
|
-
className=${className}
|
|
99
|
-
style=${{ width: "56px", height: "56px" }}
|
|
100
|
-
>
|
|
101
|
-
<Ripple
|
|
102
|
-
style=${{ color: "rgba(0, 64, 255, 0.2)" }}
|
|
103
|
-
className="rounded-outer"
|
|
104
|
-
/>
|
|
105
|
-
<button
|
|
106
|
-
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"
|
|
107
|
-
style=${{ color: "#fff", backgroundColor: "rgba(0, 64, 255, 1)" }}
|
|
108
|
-
onClick=${onClick}
|
|
109
|
-
>
|
|
110
|
-
<svg
|
|
111
|
-
viewBox="0 0 24 24"
|
|
112
|
-
width="100%"
|
|
113
|
-
height="100%"
|
|
114
|
-
fill="currentColor"
|
|
115
|
-
>
|
|
116
|
-
<path
|
|
117
|
-
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"
|
|
118
|
-
/>
|
|
119
|
-
<path
|
|
120
|
-
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"
|
|
121
|
-
/>
|
|
122
|
-
<path
|
|
123
|
-
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"
|
|
124
|
-
/>
|
|
125
|
-
<path
|
|
126
|
-
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"
|
|
127
|
-
/>
|
|
128
|
-
<path
|
|
129
|
-
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"
|
|
130
|
-
/>
|
|
131
|
-
</svg>
|
|
132
|
-
</button>
|
|
133
|
-
</div>
|
|
134
|
-
`;
|
|
135
|
-
};
|
|
23
|
+
import { create, html } from "./src/index.tsx";
|
|
136
24
|
|
|
137
25
|
const touchpoint = await create({
|
|
138
|
-
// https://dev.platform.nlx.ai/applications/fe041de0-bc87-4120-a6db-443ab1107ad3 in the dev workspace
|
|
139
26
|
config: {
|
|
140
27
|
applicationUrl:
|
|
141
|
-
"https://
|
|
28
|
+
"https://apps.nlx.ai/c/Xq3kT5uVOCGipRW8kW9pB/BajtUGSLN5hoqiSmgTA7B",
|
|
142
29
|
headers: {
|
|
143
|
-
"nlx-api-key": "
|
|
30
|
+
"nlx-api-key": "VkvGvxQ-iQQ/EgpgyJQxkDL-OhmhVwzV",
|
|
144
31
|
},
|
|
145
|
-
userId: "sdk-test-user",
|
|
146
32
|
languageCode: "en-US",
|
|
147
33
|
},
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
},
|
|
34
|
+
windowSize: "full",
|
|
35
|
+
// colorMode: "light dark",
|
|
36
|
+
// userMessageBubble: true,
|
|
37
|
+
// agentMessageBubble: true,
|
|
38
|
+
// chatMode: true,
|
|
39
|
+
// theme: {
|
|
40
|
+
// accent: "rgba(255, 253, 114, 1)",
|
|
41
|
+
// primary80:
|
|
42
|
+
// "light-dark(rgba(12, 12, 200, 0.8), rgba(255, 255, 255, 0.85))",
|
|
43
|
+
|
|
44
|
+
// fontFamily: "'BW Haas Text Mono C 55 Rom Regular', monospace",
|
|
45
|
+
// },
|
|
161
46
|
});
|
|
162
|
-
|
|
163
|
-
touchpoint.expanded = true;
|
|
164
|
-
|
|
165
|
-
touchpoint.setCustomBidirectionalCommands([
|
|
166
|
-
{
|
|
167
|
-
action: "burger",
|
|
168
|
-
description: "Order a hamburger",
|
|
169
|
-
schema: z.object({
|
|
170
|
-
type: z
|
|
171
|
-
.enum(["cheeseburger", "veggieburger", "hamburger"])
|
|
172
|
-
.describe("Which variety of burger to order"),
|
|
173
|
-
count: z
|
|
174
|
-
.number()
|
|
175
|
-
.min(1)
|
|
176
|
-
.max(200)
|
|
177
|
-
.default(1)
|
|
178
|
-
.describe("How many burgers to order"),
|
|
179
|
-
}),
|
|
180
|
-
handler: (burgerType) => {
|
|
181
|
-
console.log("Custom command executed with args:", burgerType);
|
|
182
|
-
},
|
|
183
|
-
},
|
|
184
|
-
]);
|
|
185
47
|
</script>
|
|
186
48
|
</body>
|
|
187
49
|
</html>
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Accessibility information
|
|
3
|
+
* @inline @hidden
|
|
3
4
|
*/
|
|
4
5
|
export type AccessibilityInformation = Record<string, any>;
|
|
5
6
|
/**
|
|
6
7
|
* Accessibility information with ID
|
|
8
|
+
* @category Bidirectional Voice+
|
|
7
9
|
*/
|
|
8
10
|
export interface InteractiveElementInfo extends AccessibilityInformation {
|
|
9
11
|
/**
|
|
@@ -13,6 +15,7 @@ export interface InteractiveElementInfo extends AccessibilityInformation {
|
|
|
13
15
|
}
|
|
14
16
|
/**
|
|
15
17
|
* Page forms with elements
|
|
18
|
+
* @category Bidirectional Voice+
|
|
16
19
|
*/
|
|
17
20
|
export interface PageForms {
|
|
18
21
|
/**
|
|
@@ -26,6 +29,7 @@ export interface PageForms {
|
|
|
26
29
|
}
|
|
27
30
|
/**
|
|
28
31
|
* Analyze page forms
|
|
29
|
-
* @returns
|
|
32
|
+
* @returns Context and state about all the form elements detected on the page using accessibility APIs.
|
|
33
|
+
* @category Bidirectional Voice+
|
|
30
34
|
*/
|
|
31
35
|
export declare const analyzePageForms: () => PageForms;
|
|
@@ -15,6 +15,7 @@ export declare const VoiceModalities: FC<{
|
|
|
15
15
|
className?: string;
|
|
16
16
|
modalities: ModalitiesWithContext[];
|
|
17
17
|
modalityComponents: Record<string, CustomModalityComponent<unknown>>;
|
|
18
|
+
renderedAsOverlay: boolean;
|
|
18
19
|
handler: ConversationHandler;
|
|
19
20
|
}>;
|
|
20
21
|
export declare const FullscreenVoice: FC<Props>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { Response, ConversationHandler, ApplicationMessage } from '@nlxai/core';
|
|
3
3
|
import { CustomModalityComponent, ColorMode } from '../interface';
|
|
4
|
+
import * as Feedback from "../feedback";
|
|
4
5
|
export interface MessagesProps {
|
|
5
6
|
isWaiting: boolean;
|
|
6
7
|
handler: ConversationHandler;
|
|
@@ -14,6 +15,8 @@ export interface MessagesProps {
|
|
|
14
15
|
modalityComponents: Record<string, CustomModalityComponent<unknown>>;
|
|
15
16
|
className?: string;
|
|
16
17
|
enabled: boolean;
|
|
18
|
+
feedbackState: Feedback.State;
|
|
19
|
+
feedbackActions: Feedback.Actions;
|
|
17
20
|
}
|
|
18
21
|
export declare const MessageChoices: FC<{
|
|
19
22
|
handler: ConversationHandler;
|
|
@@ -2,6 +2,24 @@ import { FC, ReactNode } from 'react';
|
|
|
2
2
|
export declare const CarouselContext: import('react').Context<{
|
|
3
3
|
recentlyEndedScrolling: boolean;
|
|
4
4
|
}>;
|
|
5
|
+
/**
|
|
6
|
+
* Renders a carousel of cards.
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import { Carousel, CustomCard, CustomCardImageRow, React } from '@nlx/touchpoint-ui';
|
|
10
|
+
*
|
|
11
|
+
* const MyCarousel = ({ data }) => (
|
|
12
|
+
* <Carousel>
|
|
13
|
+
* {data.map((item) => (
|
|
14
|
+
* <CustomCard key={item.id}>
|
|
15
|
+
* <CustomCardImageRow src={item.image} alt={item.description} />
|
|
16
|
+
* </CustomCard>
|
|
17
|
+
* ))}
|
|
18
|
+
* </Carousel>
|
|
19
|
+
* );
|
|
20
|
+
* ```
|
|
21
|
+
* @category Modality components
|
|
22
|
+
*/
|
|
5
23
|
export declare const Carousel: FC<{
|
|
6
24
|
className?: string;
|
|
7
25
|
children?: ReactNode;
|
|
@@ -2,6 +2,8 @@ import { FC, ReactNode } from 'react';
|
|
|
2
2
|
import { Icon } from '../ui/Icons';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the CustomCard component
|
|
5
|
+
* @inline
|
|
6
|
+
* @hidden
|
|
5
7
|
*/
|
|
6
8
|
export interface CustomCardProps {
|
|
7
9
|
/**
|
|
@@ -29,13 +31,38 @@ export interface CustomCardProps {
|
|
|
29
31
|
*/
|
|
30
32
|
newTab?: boolean;
|
|
31
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* A customizable card component that can function as a button or link.
|
|
36
|
+
* @example
|
|
37
|
+
* ```tsx
|
|
38
|
+
* import { CustomCard, CustomCardImageRow, CustomCardRow, React } from '@nlx/touchpoint-ui';
|
|
39
|
+
*
|
|
40
|
+
* const MyCard = ({data}) => (
|
|
41
|
+
* <CustomCard selected={data.active} onClick={() => alert('Card clicked!')}>
|
|
42
|
+
* <CustomCardImageRow src="https://example.com/image.jpg" alt="Example Image" />
|
|
43
|
+
* <CustomCardRow
|
|
44
|
+
* left={<div>Left Content</div>}
|
|
45
|
+
* right={<div>Right Content</div>}
|
|
46
|
+
* icon={MyIcon}
|
|
47
|
+
* />
|
|
48
|
+
* </CustomCard>
|
|
49
|
+
* );
|
|
50
|
+
* ```
|
|
51
|
+
* @category Modality components
|
|
52
|
+
*/
|
|
32
53
|
export declare const CustomCard: FC<CustomCardProps>;
|
|
54
|
+
/**
|
|
55
|
+
* A row within a CustomCard that displays an image.
|
|
56
|
+
* @category Modality components
|
|
57
|
+
*/
|
|
33
58
|
export declare const CustomCardImageRow: FC<{
|
|
34
59
|
src: string;
|
|
35
60
|
alt?: string;
|
|
36
61
|
}>;
|
|
37
62
|
/**
|
|
38
63
|
* Props for the CustomCardRow component
|
|
64
|
+
* @inline
|
|
65
|
+
* @hidden
|
|
39
66
|
*/
|
|
40
67
|
export interface CustomCardRowProps {
|
|
41
68
|
/**
|
|
@@ -50,5 +77,25 @@ export interface CustomCardRowProps {
|
|
|
50
77
|
* Optional icon to be displayed in the center of the row
|
|
51
78
|
*/
|
|
52
79
|
icon?: Icon;
|
|
80
|
+
/**
|
|
81
|
+
* Class name
|
|
82
|
+
*/
|
|
83
|
+
className?: string;
|
|
53
84
|
}
|
|
85
|
+
/**
|
|
86
|
+
* A row within a CustomCard that displays left and right content, with an optional centered icon.
|
|
87
|
+
* @example
|
|
88
|
+
* ```tsx
|
|
89
|
+
* import { CustomCardRow, Icons, BaseText, React } from '@nlx/touchpoint-ui';
|
|
90
|
+
*
|
|
91
|
+
* const MyCardRow = () => (
|
|
92
|
+
* <CustomCardRow
|
|
93
|
+
* left={<BaseText>Left Content</BaseText>}
|
|
94
|
+
* right={<BaseText>Right Content</BaseText>}
|
|
95
|
+
* icon={Icons.ArrowRight}
|
|
96
|
+
* />
|
|
97
|
+
* );
|
|
98
|
+
* ```
|
|
99
|
+
* @category Modality components
|
|
100
|
+
*/
|
|
54
101
|
export declare const CustomCardRow: FC<CustomCardRowProps>;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Props for the DateInput component
|
|
4
|
+
* @inline
|
|
5
|
+
* @hidden
|
|
4
6
|
*/
|
|
5
7
|
export interface DateInputProps {
|
|
6
8
|
/**
|
|
@@ -9,8 +11,20 @@ export interface DateInputProps {
|
|
|
9
11
|
*/
|
|
10
12
|
onSubmit?: (date: string) => void;
|
|
11
13
|
/**
|
|
12
|
-
*
|
|
14
|
+
* Custom CSS class name
|
|
13
15
|
*/
|
|
14
16
|
className?: string;
|
|
15
17
|
}
|
|
18
|
+
/**
|
|
19
|
+
* A date input
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* import { DateInput, React } from '@nlx/touchpoint-ui';
|
|
23
|
+
*
|
|
24
|
+
* const MyDateInput = ({conversationHandler}) => (
|
|
25
|
+
* <DateInput onSubmit={(date) => conversationHandler.sendContext({myDate: date}) } />
|
|
26
|
+
* );
|
|
27
|
+
* ```
|
|
28
|
+
* @category Modality components
|
|
29
|
+
*/
|
|
16
30
|
export declare const DateInput: FC<DateInputProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { MouseEventHandler, FC } from 'react';
|
|
2
2
|
import { IconProps } from './Icons';
|
|
3
3
|
/**
|
|
4
4
|
* Represents the different types of icon buttons available in the application.
|
|
@@ -8,16 +8,19 @@ import { IconProps } from './Icons';
|
|
|
8
8
|
* - `activated`: An icon button that indicates an active state.
|
|
9
9
|
* - `coverup`: An icon button used to cover up or mask something.
|
|
10
10
|
* - `overlay`: An icon button that appears over other content.
|
|
11
|
+
* @category Modality components
|
|
11
12
|
*/
|
|
12
13
|
export type IconButtonType = "main" | "ghost" | "activated" | "coverup" | "error" | "overlay";
|
|
13
14
|
/**
|
|
14
15
|
* Props for the IconButton component
|
|
16
|
+
* @inline
|
|
17
|
+
* @hidden
|
|
15
18
|
*/
|
|
16
19
|
export interface IconButtonProps {
|
|
17
20
|
/**
|
|
18
21
|
* Handler function called when the button is clicked
|
|
19
22
|
*/
|
|
20
|
-
onClick?:
|
|
23
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
21
24
|
/**
|
|
22
25
|
* Accessible label for the button
|
|
23
26
|
*/
|
|
@@ -39,4 +42,21 @@ export declare const UnsemanticIconButton: FC<{
|
|
|
39
42
|
type: IconButtonType;
|
|
40
43
|
Icon: FC<IconProps>;
|
|
41
44
|
}>;
|
|
45
|
+
/**
|
|
46
|
+
* A button showing only an icon (textual label is provided for accessibility)
|
|
47
|
+
* @example
|
|
48
|
+
* ```tsx
|
|
49
|
+
* import { IconButton, Icons, React } from '@nlx/touchpoint-ui';
|
|
50
|
+
*
|
|
51
|
+
* const MyIconButton = () => (
|
|
52
|
+
* <IconButton
|
|
53
|
+
* label="Send message"
|
|
54
|
+
* onClick={() => alert('Icon button clicked!')}
|
|
55
|
+
* type="main"
|
|
56
|
+
* Icon={Icons.ArrowForward}
|
|
57
|
+
* />
|
|
58
|
+
* );
|
|
59
|
+
* ```
|
|
60
|
+
* @category Modality components
|
|
61
|
+
*/
|
|
42
62
|
export declare const IconButton: FC<IconButtonProps>;
|
|
@@ -26,12 +26,14 @@ export declare const ArrowRight: Icon;
|
|
|
26
26
|
export declare const ArrowUp: Icon;
|
|
27
27
|
export declare const ArrowForward: Icon;
|
|
28
28
|
export declare const Attachment: Icon;
|
|
29
|
+
export declare const BotMessage: Icon;
|
|
29
30
|
export declare const Camera: Icon;
|
|
30
31
|
export declare const Check: Icon;
|
|
31
32
|
export declare const Close: Icon;
|
|
32
33
|
export declare const Copy: Icon;
|
|
33
34
|
export declare const Date: Icon;
|
|
34
35
|
export declare const Delete: Icon;
|
|
36
|
+
export declare const Edit: Icon;
|
|
35
37
|
export declare const Escalate: Icon;
|
|
36
38
|
export declare const Error: Icon;
|
|
37
39
|
export declare const FullScreen: Icon;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { IconProps } from './Icons';
|
|
3
|
+
/**
|
|
4
|
+
* Represents the different types of icon buttons available in the application.
|
|
5
|
+
*
|
|
6
|
+
* - `main`: The primary icon button.
|
|
7
|
+
* - `ghost`: A transparent or less prominent icon button.
|
|
8
|
+
* - `activated`: An icon button that indicates an active state.
|
|
9
|
+
* - `coverup`: An icon button used to cover up or mask something.
|
|
10
|
+
* - `overlay`: An icon button that appears over other content.
|
|
11
|
+
* @category Modality components
|
|
12
|
+
*/
|
|
13
|
+
export type MessageButtonType = "main" | "activated";
|
|
14
|
+
/**
|
|
15
|
+
* Props for the MessageButton component
|
|
16
|
+
* @inline
|
|
17
|
+
* @hidden
|
|
18
|
+
*/
|
|
19
|
+
export interface MessageButtonProps {
|
|
20
|
+
/**
|
|
21
|
+
* Handler function called when the button is clicked
|
|
22
|
+
*/
|
|
23
|
+
onClick?: () => void;
|
|
24
|
+
/**
|
|
25
|
+
* Accessible label for the button
|
|
26
|
+
*/
|
|
27
|
+
label: string;
|
|
28
|
+
/**
|
|
29
|
+
* Additional CSS classes to apply to the button
|
|
30
|
+
*/
|
|
31
|
+
className?: string;
|
|
32
|
+
/**
|
|
33
|
+
* Visual style variant of the button. One of MessageButtonType.
|
|
34
|
+
*/
|
|
35
|
+
type: MessageButtonType;
|
|
36
|
+
/**
|
|
37
|
+
* Icon component to display inside the button
|
|
38
|
+
*/
|
|
39
|
+
Icon: FC<IconProps>;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* A button showing only an icon (textual label is provided for accessibility)
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* import { MessageButton, Icons, React } from '@nlx/touchpoint-ui';
|
|
46
|
+
*
|
|
47
|
+
* const MyMessageButton = () => (
|
|
48
|
+
* <MessageButton
|
|
49
|
+
* label="Send message"
|
|
50
|
+
* onClick={() => alert('Icon button clicked!')}
|
|
51
|
+
* type="main"
|
|
52
|
+
* Icon={Icons.ArrowForward}
|
|
53
|
+
* />
|
|
54
|
+
* );
|
|
55
|
+
* ```
|
|
56
|
+
* @category Modality components
|
|
57
|
+
*/
|
|
58
|
+
export declare const MessageButton: FC<MessageButtonProps>;
|
|
@@ -2,6 +2,8 @@ import { FC } from 'react';
|
|
|
2
2
|
import { IconProps } from './Icons';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the TextButton component
|
|
5
|
+
* @inline
|
|
6
|
+
* @hidden
|
|
5
7
|
*/
|
|
6
8
|
export interface TextButtonProps {
|
|
7
9
|
/**
|
|
@@ -26,4 +28,19 @@ export interface TextButtonProps {
|
|
|
26
28
|
*/
|
|
27
29
|
Icon: FC<IconProps>;
|
|
28
30
|
}
|
|
31
|
+
/**
|
|
32
|
+
* A button with a visible textual label
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* import { TextButton, ArrowForward, React } from '@nlx/touchpoint-ui';
|
|
36
|
+
*
|
|
37
|
+
* const MyTextButton = ({ onClickHandler }) => (
|
|
38
|
+
* <TextButton
|
|
39
|
+
* onClick={onClickHandler}
|
|
40
|
+
* label="Continue"
|
|
41
|
+
* />
|
|
42
|
+
* );
|
|
43
|
+
* ```
|
|
44
|
+
* @category Modality components
|
|
45
|
+
*/
|
|
29
46
|
export declare const TextButton: FC<TextButtonProps>;
|
|
@@ -1,10 +1,29 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Standard text component with base typography styles applied.
|
|
4
|
+
* @example
|
|
5
|
+
* ```tsx
|
|
6
|
+
* import { BaseText, React } from '@nlx/touchpoint-ui';
|
|
7
|
+
*
|
|
8
|
+
* const MyText = () => (
|
|
9
|
+
* <BaseText faded>This is some standard text.</BaseText>
|
|
10
|
+
* );
|
|
11
|
+
* ```
|
|
12
|
+
* @category Modality components
|
|
13
|
+
*/
|
|
2
14
|
export declare const BaseText: FC<{
|
|
3
15
|
children: ReactNode;
|
|
16
|
+
/** Show in a slightly dimmer style (primary-60 instead of primary-80). */
|
|
4
17
|
faded?: boolean;
|
|
18
|
+
/** Custom CSS class name */
|
|
5
19
|
className?: string;
|
|
6
20
|
}>;
|
|
21
|
+
/**
|
|
22
|
+
* Small text component with smaller typography styles applied.
|
|
23
|
+
* @category Modality components
|
|
24
|
+
*/
|
|
7
25
|
export declare const SmallText: FC<{
|
|
8
26
|
children: ReactNode;
|
|
27
|
+
/** Custom CSS class name */
|
|
9
28
|
className?: string;
|
|
10
29
|
}>;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { ConversationHandler } from '@nlxai/core';
|
|
2
|
+
interface FeedbackInfo {
|
|
3
|
+
rating: number | null;
|
|
4
|
+
commentSubmitted: boolean;
|
|
5
|
+
commentText: string;
|
|
6
|
+
}
|
|
7
|
+
export interface State {
|
|
8
|
+
comment: CommentState;
|
|
9
|
+
items: Record<string, FeedbackInfo>;
|
|
10
|
+
}
|
|
11
|
+
type CommentState = {
|
|
12
|
+
state: "idle";
|
|
13
|
+
} | {
|
|
14
|
+
state: "editing";
|
|
15
|
+
activeFeedbackUrl: string;
|
|
16
|
+
text: string;
|
|
17
|
+
} | {
|
|
18
|
+
state: "submitting";
|
|
19
|
+
activeFeedbackUrl: string;
|
|
20
|
+
text: string;
|
|
21
|
+
} | {
|
|
22
|
+
state: "submitted";
|
|
23
|
+
activeFeedbackUrl: string;
|
|
24
|
+
text: string;
|
|
25
|
+
} | {
|
|
26
|
+
state: "error";
|
|
27
|
+
activeFeedbackUrl: string;
|
|
28
|
+
text: string;
|
|
29
|
+
};
|
|
30
|
+
export declare const getFeedbackInfo: (state: State, feedbackUrl: string) => FeedbackInfo;
|
|
31
|
+
export interface Actions {
|
|
32
|
+
clickRating: (feedbackUrl: string, value: number) => void;
|
|
33
|
+
clickCommentButton: (feedbackUrl: string) => void;
|
|
34
|
+
clickCommentEdit: () => void;
|
|
35
|
+
editCommentText: (text: string) => void;
|
|
36
|
+
submitComment: () => Promise<void>;
|
|
37
|
+
cancelComment: () => void;
|
|
38
|
+
}
|
|
39
|
+
export declare function useFeedback(handler: ConversationHandler): [State, Actions];
|
|
40
|
+
export {};
|