@nlxai/touchpoint-ui 1.2.7-alpha.1 → 1.2.7-alpha.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/.claude/settings.local.json +7 -0
- package/lib/index.js +355 -347
- package/lib/index.umd.js +16 -16
- package/lib/website/ConnectChat.d.ts +9 -0
- package/lib/website/index.d.ts +1 -0
- package/package.json +6 -6
- package/vite.config.ts +7 -4
- package/connect-chat.html +0 -197
- package/lib/design-system/index.d.ts +0 -1
- /package/lib/{design-system → website}/LightDarkToggle.d.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const renderWebsite: (element: HTMLElement) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nlxai/touchpoint-ui",
|
|
3
|
-
"version": "1.2.7-alpha.
|
|
3
|
+
"version": "1.2.7-alpha.2",
|
|
4
4
|
"description": "Web UI for Touchpoint",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -11,9 +11,8 @@
|
|
|
11
11
|
"types": "lib/index.d.ts",
|
|
12
12
|
"scripts": {
|
|
13
13
|
"dev": "vite",
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"build:design-system": "vite build --mode design-system",
|
|
14
|
+
"website": "vite --mode website",
|
|
15
|
+
"build:website": "vite build --mode website",
|
|
17
16
|
"build": "tsc && vite build",
|
|
18
17
|
"lint:check": "eslint src/",
|
|
19
18
|
"prepublish": "npm run build",
|
|
@@ -27,7 +26,8 @@
|
|
|
27
26
|
},
|
|
28
27
|
"dependencies": {
|
|
29
28
|
"@base-ui/react": "^1.1.0",
|
|
30
|
-
"@nlxai/
|
|
29
|
+
"@nlxai/connect-chat-adapter": "^1.2.7-alpha.2",
|
|
30
|
+
"@nlxai/core": "^1.2.7-alpha.2",
|
|
31
31
|
"@react-hookz/web": "^25.0.1",
|
|
32
32
|
"@react-input/mask": "^2.0.4",
|
|
33
33
|
"@rive-app/webgl2": "^2.31.5",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "28deac5208ff64f99a3d038050172c1ac9a78630"
|
|
75
75
|
}
|
package/vite.config.ts
CHANGED
|
@@ -21,14 +21,17 @@ const designSystemEntryPoint = (): PluginOption => {
|
|
|
21
21
|
<head>
|
|
22
22
|
<meta charset="UTF-8" />
|
|
23
23
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
24
|
-
<title>
|
|
24
|
+
<title>NLX SDK</title>
|
|
25
|
+
<style>
|
|
26
|
+
html, body, main, nlx-touchpoint { margin: 0; padding: 0px; height: 100%; }
|
|
27
|
+
</style>
|
|
25
28
|
</head>
|
|
26
29
|
<body>
|
|
27
30
|
<main></main>
|
|
28
31
|
<script type="module">
|
|
29
|
-
import {
|
|
32
|
+
import { renderWebsite } from "./src/website/index.tsx";
|
|
30
33
|
|
|
31
|
-
|
|
34
|
+
renderWebsite(document.querySelector("main"));
|
|
32
35
|
</script>
|
|
33
36
|
</body>
|
|
34
37
|
</html>
|
|
@@ -55,7 +58,7 @@ const sharedPlugins = (command: "serve" | "build"): PluginOption[] => [
|
|
|
55
58
|
|
|
56
59
|
// https://vitejs.dev/config/
|
|
57
60
|
export default defineConfig(({ mode, command }) =>
|
|
58
|
-
mode === "
|
|
61
|
+
mode === "website"
|
|
59
62
|
? {
|
|
60
63
|
plugins: [designSystemEntryPoint(), ...sharedPlugins(command)],
|
|
61
64
|
base: "./",
|
package/connect-chat.html
DELETED
|
@@ -1,197 +0,0 @@
|
|
|
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>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const renderDesignSystem: (element: HTMLElement) => void;
|
|
File without changes
|