@nlxai/touchpoint-ui 1.2.6 → 1.2.7-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/connect-chat.html +197 -0
- package/eslint.config.js +5 -0
- package/index.html +43 -47
- package/lib/ProviderStack.d.ts +0 -21
- package/lib/components/FullscreenVoice.d.ts +4 -6
- package/lib/components/Layout.d.ts +23 -0
- package/lib/components/Messages.d.ts +0 -1
- package/lib/components/VoiceModalities.d.ts +11 -0
- package/lib/components/defaultModalities/index.d.ts +2 -0
- package/lib/components/ui/Radio.d.ts +14 -0
- package/lib/design-system/LightDarkToggle.d.ts +50 -0
- package/lib/design-system/index.d.ts +1 -0
- package/lib/index.js +30333 -27428
- package/lib/index.umd.js +124 -119
- package/lib/interface.d.ts +9 -2
- package/lib/mocks/MockText.d.ts +10 -0
- package/lib/mocks/MockVoice.d.ts +10 -0
- package/lib/mocks/MockVoiceMini.d.ts +8 -0
- package/lib/mocks/shared.d.ts +5 -0
- package/lib/types.d.ts +1 -1
- package/package.json +14 -15
- package/tsdoc.json +15 -2
- package/vite.config.ts +62 -32
- package/.eslintrc.cjs +0 -5
- package/lib/design-system.d.ts +0 -0
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<style>
|
|
5
|
+
html,
|
|
6
|
+
body,
|
|
7
|
+
nlx-touchpoint {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.config-form {
|
|
15
|
+
font-family:
|
|
16
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
17
|
+
max-width: 480px;
|
|
18
|
+
margin: 60px auto;
|
|
19
|
+
padding: 32px;
|
|
20
|
+
background: #1a1a2e;
|
|
21
|
+
border-radius: 12px;
|
|
22
|
+
color: #e0e0e0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.config-form h1 {
|
|
26
|
+
font-size: 20px;
|
|
27
|
+
margin: 0 0 8px;
|
|
28
|
+
color: #fff;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.config-form p {
|
|
32
|
+
font-size: 13px;
|
|
33
|
+
color: #999;
|
|
34
|
+
margin: 0 0 24px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.config-form label {
|
|
38
|
+
display: block;
|
|
39
|
+
font-size: 12px;
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
margin-bottom: 4px;
|
|
42
|
+
color: #aaa;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.config-form input {
|
|
46
|
+
width: 100%;
|
|
47
|
+
padding: 8px 12px;
|
|
48
|
+
margin-bottom: 16px;
|
|
49
|
+
border: 1px solid #333;
|
|
50
|
+
border-radius: 6px;
|
|
51
|
+
background: #0f0f1a;
|
|
52
|
+
color: #fff;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.config-form input::placeholder {
|
|
58
|
+
color: #555;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.config-form button {
|
|
62
|
+
width: 100%;
|
|
63
|
+
padding: 12px;
|
|
64
|
+
background: #0972d3;
|
|
65
|
+
color: #fff;
|
|
66
|
+
border: none;
|
|
67
|
+
border-radius: 6px;
|
|
68
|
+
font-size: 14px;
|
|
69
|
+
font-weight: 600;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.config-form button:hover {
|
|
74
|
+
background: #0860b0;
|
|
75
|
+
}
|
|
76
|
+
</style>
|
|
77
|
+
<meta charset="UTF-8" />
|
|
78
|
+
<title>Touchpoint — Connect Chat Demo</title>
|
|
79
|
+
</head>
|
|
80
|
+
|
|
81
|
+
<body>
|
|
82
|
+
<div id="config-screen" class="config-form">
|
|
83
|
+
<h1>Connect Chat + Touchpoint</h1>
|
|
84
|
+
<p>
|
|
85
|
+
Enter your Amazon Connect details to launch a chat session powered by
|
|
86
|
+
Touchpoint UI.
|
|
87
|
+
</p>
|
|
88
|
+
|
|
89
|
+
<label for="endpoint">API Gateway Endpoint URL</label>
|
|
90
|
+
<input
|
|
91
|
+
id="endpoint"
|
|
92
|
+
type="text"
|
|
93
|
+
placeholder="https://abc123.execute-api.us-east-1.amazonaws.com/Prod"
|
|
94
|
+
/>
|
|
95
|
+
|
|
96
|
+
<label for="instanceId">Instance ID</label>
|
|
97
|
+
<input
|
|
98
|
+
id="instanceId"
|
|
99
|
+
type="text"
|
|
100
|
+
placeholder="11111111-1111-1111-1111-111111111111"
|
|
101
|
+
/>
|
|
102
|
+
|
|
103
|
+
<label for="contactFlowId">Contact Flow ID</label>
|
|
104
|
+
<input
|
|
105
|
+
id="contactFlowId"
|
|
106
|
+
type="text"
|
|
107
|
+
placeholder="22222222-2222-2222-2222-222222222222"
|
|
108
|
+
/>
|
|
109
|
+
|
|
110
|
+
<label for="displayName">Display Name</label>
|
|
111
|
+
<input
|
|
112
|
+
id="displayName"
|
|
113
|
+
type="text"
|
|
114
|
+
placeholder="Customer"
|
|
115
|
+
value="Customer"
|
|
116
|
+
/>
|
|
117
|
+
|
|
118
|
+
<label for="region">Region</label>
|
|
119
|
+
<input
|
|
120
|
+
id="region"
|
|
121
|
+
type="text"
|
|
122
|
+
placeholder="us-east-1"
|
|
123
|
+
value="us-east-1"
|
|
124
|
+
/>
|
|
125
|
+
|
|
126
|
+
<button id="start-btn">Start Chat</button>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<nlx-touchpoint id="touchpoint" style="display: none"></nlx-touchpoint>
|
|
130
|
+
|
|
131
|
+
<script type="module">
|
|
132
|
+
import { create } from "./src/index.tsx";
|
|
133
|
+
|
|
134
|
+
document
|
|
135
|
+
.getElementById("start-btn")
|
|
136
|
+
.addEventListener("click", async () => {
|
|
137
|
+
const endpoint = document.getElementById("endpoint").value.trim();
|
|
138
|
+
const instanceId = document.getElementById("instanceId").value.trim();
|
|
139
|
+
const contactFlowId = document
|
|
140
|
+
.getElementById("contactFlowId")
|
|
141
|
+
.value.trim();
|
|
142
|
+
const displayName =
|
|
143
|
+
document.getElementById("displayName").value.trim() || "Customer";
|
|
144
|
+
const region =
|
|
145
|
+
document.getElementById("region").value.trim() || "us-east-1";
|
|
146
|
+
|
|
147
|
+
if (!endpoint) {
|
|
148
|
+
alert("API Gateway Endpoint URL is required.");
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// Hide config, show touchpoint
|
|
153
|
+
document.getElementById("config-screen").style.display = "none";
|
|
154
|
+
const tpEl = document.getElementById("touchpoint");
|
|
155
|
+
tpEl.style.display = "block";
|
|
156
|
+
tpEl.style.width = "100%";
|
|
157
|
+
tpEl.style.height = "100%";
|
|
158
|
+
|
|
159
|
+
// Import the adapter — it's in the sibling package
|
|
160
|
+
const { createConnectChatConversation, fetchChatDetails } =
|
|
161
|
+
await import("../../packages/connect-chat-adapter/src/index.ts");
|
|
162
|
+
|
|
163
|
+
const conversationHandler = createConnectChatConversation({
|
|
164
|
+
details: () =>
|
|
165
|
+
fetchChatDetails(endpoint, {
|
|
166
|
+
instanceId,
|
|
167
|
+
contactFlowId,
|
|
168
|
+
participantDisplayName: displayName,
|
|
169
|
+
}),
|
|
170
|
+
region,
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
tpEl.touchpointConfiguration = {
|
|
174
|
+
conversationHandler,
|
|
175
|
+
config: {
|
|
176
|
+
languageCode: "en-US",
|
|
177
|
+
},
|
|
178
|
+
windowSize: "half",
|
|
179
|
+
colorMode: "dark",
|
|
180
|
+
input: "text",
|
|
181
|
+
chatMode: true,
|
|
182
|
+
theme: {
|
|
183
|
+
fontFamily:
|
|
184
|
+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
185
|
+
accent: "#e8600a",
|
|
186
|
+
primary: "rgb(255, 255, 255)",
|
|
187
|
+
secondary: "rgb(0, 2, 9)",
|
|
188
|
+
background: "rgba(0, 2, 9, 0.95)",
|
|
189
|
+
},
|
|
190
|
+
initializeConversation: () => {
|
|
191
|
+
// No-op: Connect Chat starts the flow on connection automatically
|
|
192
|
+
},
|
|
193
|
+
};
|
|
194
|
+
});
|
|
195
|
+
</script>
|
|
196
|
+
</body>
|
|
197
|
+
</html>
|
package/eslint.config.js
ADDED
package/index.html
CHANGED
|
@@ -1,55 +1,51 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<style>
|
|
5
|
+
html,
|
|
6
|
+
body,
|
|
7
|
+
nlx-touchpoint {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
<meta charset="UTF-8" />
|
|
15
|
+
<title>Touchpoint</title>
|
|
16
|
+
</head>
|
|
3
17
|
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
nlx-touchpoint {
|
|
9
|
-
width: 100%;
|
|
10
|
-
height: 100%;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
|
-
}
|
|
14
|
-
</style>
|
|
15
|
-
<meta charset="UTF-8" />
|
|
16
|
-
<title>Touchpoint</title>
|
|
17
|
-
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<nlx-touchpoint></nlx-touchpoint>
|
|
20
|
+
<script type="module">
|
|
21
|
+
import { create, html } from "./src/index.tsx";
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
config: {
|
|
26
|
-
applicationUrl:
|
|
27
|
-
"https://bots.dev.studio.nlx.ai/c/Nji0Tkk8UOqaFc3Z3mDW9/5p7ZdO_XgcnCKnuxbhNAS",
|
|
28
|
-
|
|
29
|
-
headers: {
|
|
30
|
-
"nlx-api-key": "crLjtXvXIOPtc1AgnPHoEE1y",
|
|
31
|
-
},
|
|
23
|
+
const config = {
|
|
24
|
+
protocol: "httpsWithStreaming",
|
|
25
|
+
host: "bots.dev.studio.nlx.ai",
|
|
26
|
+
deploymentKey: "Nji0Tkk8UOqaFc3Z3mDW9",
|
|
27
|
+
channelKey: "5p7ZdO_XgcnCKnuxbhNAS",
|
|
28
|
+
apiKey: "crLjtXvXIOPtc1AgnPHoEE1y",
|
|
32
29
|
languageCode: "en-US",
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
windowSize: "full",
|
|
36
|
-
input: "text",
|
|
37
|
-
bidirectional: {},
|
|
38
|
-
// colorMode: "light dark",
|
|
39
|
-
// userMessageBubble: true,
|
|
40
|
-
// agentMessageBubble: true,
|
|
41
|
-
// chatMode: true,
|
|
42
|
-
// theme: {
|
|
43
|
-
// accent: "rgba(255, 253, 114, 1)",
|
|
44
|
-
// primary80:
|
|
45
|
-
// "light-dark(rgba(12, 12, 200, 0.8), rgba(255, 255, 255, 0.85))",
|
|
30
|
+
userId: self.crypto.randomUUID()
|
|
31
|
+
};
|
|
46
32
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
33
|
+
const touchpointConfig = {
|
|
34
|
+
config,
|
|
35
|
+
windowSize: "full",
|
|
36
|
+
colorMode: "dark",
|
|
37
|
+
input: "text",
|
|
38
|
+
theme: {
|
|
39
|
+
fontFamily:
|
|
40
|
+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
41
|
+
accent: "#AECAFF",
|
|
42
|
+
},
|
|
43
|
+
brandIcon: undefined,
|
|
44
|
+
showTranscript: true,
|
|
45
|
+
};
|
|
54
46
|
|
|
47
|
+
document.querySelector("nlx-touchpoint").touchpointConfiguration =
|
|
48
|
+
touchpointConfig;
|
|
49
|
+
</script>
|
|
50
|
+
</body>
|
|
55
51
|
</html>
|
package/lib/ProviderStack.d.ts
CHANGED
|
@@ -1,31 +1,10 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { Copy, ColorMode, Theme } from './interface';
|
|
3
|
-
/**
|
|
4
|
-
*
|
|
5
|
-
*/
|
|
6
3
|
export declare const ProviderStack: FC<{
|
|
7
|
-
/**
|
|
8
|
-
*
|
|
9
|
-
*/
|
|
10
4
|
colorMode: ColorMode;
|
|
11
|
-
/**
|
|
12
|
-
*
|
|
13
|
-
*/
|
|
14
5
|
className?: string;
|
|
15
|
-
/**
|
|
16
|
-
*
|
|
17
|
-
*/
|
|
18
6
|
theme?: Partial<Theme>;
|
|
19
|
-
/**
|
|
20
|
-
*
|
|
21
|
-
*/
|
|
22
7
|
children?: ReactNode;
|
|
23
|
-
/**
|
|
24
|
-
*
|
|
25
|
-
*/
|
|
26
8
|
languageCode: string;
|
|
27
|
-
/**
|
|
28
|
-
*
|
|
29
|
-
*/
|
|
30
9
|
copy?: Partial<Copy>;
|
|
31
10
|
}>;
|
|
@@ -22,13 +22,11 @@ export type WidgetVoiceState = null | "loading" | {
|
|
|
22
22
|
state?: VoiceState;
|
|
23
23
|
};
|
|
24
24
|
export declare const useWidgetVoiceState: () => [WidgetVoiceState, Dispatch<SetStateAction<WidgetVoiceState>>];
|
|
25
|
-
export declare const
|
|
25
|
+
export declare const VoiceIcon: FC<{
|
|
26
|
+
brandIcon?: string;
|
|
27
|
+
colorMode: ColorMode;
|
|
28
|
+
addRipple: boolean;
|
|
26
29
|
className?: string;
|
|
27
|
-
responses: Response[];
|
|
28
|
-
modalityComponents: Record<string, CustomModalityComponent<unknown>>;
|
|
29
|
-
renderedAsOverlay: boolean;
|
|
30
|
-
showTranscript: boolean;
|
|
31
|
-
handler: ConversationHandler;
|
|
32
30
|
}>;
|
|
33
31
|
export declare const FullscreenVoice: FC<Props>;
|
|
34
32
|
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { WindowSize } from '../interface';
|
|
3
|
+
export declare const Main: FC<{
|
|
4
|
+
windowSize: WindowSize;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
}>;
|
|
7
|
+
export declare const HeaderContainer: FC<{
|
|
8
|
+
leftColumn: boolean;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}>;
|
|
11
|
+
export declare const InputContainer: FC<{
|
|
12
|
+
windowSize: WindowSize;
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}>;
|
|
15
|
+
export declare const VoiceMiniControls: FC<{
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
className?: string;
|
|
18
|
+
}>;
|
|
19
|
+
export declare const voiceMiniPanelClass = "bg-background backdrop-blur-overlay text-primary-80 rounded-outer p-2 w-[calc(100vw-16px)] max-w-[360px] space-y-4";
|
|
20
|
+
export declare const VoiceMiniPanel: FC<{
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
onClose?: () => void;
|
|
23
|
+
}>;
|
|
@@ -3,7 +3,6 @@ import { Response, ConversationHandler, ApplicationMessage } from '@nlxai/core';
|
|
|
3
3
|
import { CustomModalityComponent, ColorMode } from '../interface';
|
|
4
4
|
import * as Feedback from "../feedback";
|
|
5
5
|
export interface MessagesProps {
|
|
6
|
-
isWaiting: boolean;
|
|
7
6
|
interimMessage?: string;
|
|
8
7
|
handler: ConversationHandler;
|
|
9
8
|
responses: Response[];
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { CustomModalityComponent } from '../interface';
|
|
3
|
+
import { Response, ConversationHandler } from '@nlxai/core';
|
|
4
|
+
export declare const VoiceModalities: FC<{
|
|
5
|
+
className?: string;
|
|
6
|
+
responses: Response[];
|
|
7
|
+
modalityComponents: Record<string, CustomModalityComponent<unknown>>;
|
|
8
|
+
renderedAsOverlay: boolean;
|
|
9
|
+
showTranscript: boolean;
|
|
10
|
+
handler: ConversationHandler;
|
|
11
|
+
}>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export interface RadioOption<T> {
|
|
3
|
+
value: T;
|
|
4
|
+
label: string;
|
|
5
|
+
}
|
|
6
|
+
interface RadioProps<T> {
|
|
7
|
+
options: Array<RadioOption<T>>;
|
|
8
|
+
value: T;
|
|
9
|
+
onChange?: (value: T) => void;
|
|
10
|
+
name: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const Radio: FC<RadioProps<string | number>>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { ColorMode } from '../interface';
|
|
3
|
+
import { Icon } from '../components/ui/Icons';
|
|
4
|
+
export declare const LightMode: Icon;
|
|
5
|
+
export declare const DarkMode: Icon;
|
|
6
|
+
/**
|
|
7
|
+
* Props for the LightDarkToggle component
|
|
8
|
+
* @inline
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
interface Props {
|
|
12
|
+
/**
|
|
13
|
+
* Current theme state
|
|
14
|
+
*/
|
|
15
|
+
value: ColorMode;
|
|
16
|
+
/**
|
|
17
|
+
* Callback fired when the toggle is changed
|
|
18
|
+
*/
|
|
19
|
+
onChange: (value: ColorMode) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Additional CSS classes to apply to the toggle
|
|
22
|
+
*/
|
|
23
|
+
className?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Accessible label for the toggle
|
|
26
|
+
*/
|
|
27
|
+
label?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* A controlled light/dark mode toggle component
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* import { LightDarkToggle, React, useState } from '@nlx/touchpoint-ui';
|
|
34
|
+
*
|
|
35
|
+
* const MyToggle = () => {
|
|
36
|
+
* const [theme, setTheme] = useState<'light' | 'dark'>('light');
|
|
37
|
+
*
|
|
38
|
+
* return (
|
|
39
|
+
* <LightDarkToggle
|
|
40
|
+
* value={theme}
|
|
41
|
+
* onChange={setTheme}
|
|
42
|
+
* label="Toggle theme"
|
|
43
|
+
* />
|
|
44
|
+
* );
|
|
45
|
+
* };
|
|
46
|
+
* ```
|
|
47
|
+
* @category Modality components
|
|
48
|
+
*/
|
|
49
|
+
export declare const LightDarkToggle: FC<Props>;
|
|
50
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const renderDesignSystem: (element: HTMLElement) => void;
|