@nlxai/touchpoint-ui 1.2.7-alpha.0 → 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.
Files changed (70) hide show
  1. package/connect-chat.html +197 -0
  2. package/eslint.config.js +5 -0
  3. package/index.html +6 -6
  4. package/lib/components/Messages.d.ts +0 -1
  5. package/lib/index.js +21094 -18260
  6. package/lib/index.umd.js +121 -116
  7. package/lib/interface.d.ts +9 -2
  8. package/lib/types.d.ts +1 -1
  9. package/package.json +13 -15
  10. package/tsdoc.json +15 -2
  11. package/vite.config.ts +1 -0
  12. package/.eslintrc.cjs +0 -5
  13. package/build/App.d.ts +0 -20
  14. package/build/ProviderStack.d.ts +0 -10
  15. package/build/assets/index-B9Yzt2if.js +0 -233
  16. package/build/assets/index-BbXI3y3Q.css +0 -1
  17. package/build/bidirectional/analyzePageForms.d.ts +0 -35
  18. package/build/bidirectional/automaticContext.d.ts +0 -12
  19. package/build/bidirectional/commandHandler.d.ts +0 -5
  20. package/build/bidirectional/debug.d.ts +0 -1
  21. package/build/components/ErrorMessage.d.ts +0 -4
  22. package/build/components/FeedbackComment.d.ts +0 -6
  23. package/build/components/FullscreenError.d.ts +0 -2
  24. package/build/components/FullscreenVoice.d.ts +0 -32
  25. package/build/components/Header.d.ts +0 -20
  26. package/build/components/Input.d.ts +0 -14
  27. package/build/components/Layout.d.ts +0 -23
  28. package/build/components/Messages.d.ts +0 -33
  29. package/build/components/Notice.d.ts +0 -4
  30. package/build/components/Ripple.d.ts +0 -9
  31. package/build/components/RiveAnimation.d.ts +0 -4
  32. package/build/components/SafeMarkdown.d.ts +0 -4
  33. package/build/components/Settings.d.ts +0 -10
  34. package/build/components/Theme.d.ts +0 -4
  35. package/build/components/VoiceMini.d.ts +0 -13
  36. package/build/components/VoiceModalities.d.ts +0 -11
  37. package/build/components/defaultModalities/DefaultCard.d.ts +0 -3
  38. package/build/components/defaultModalities/DefaultCarousel.d.ts +0 -6
  39. package/build/components/defaultModalities/DefaultDateInput.d.ts +0 -5
  40. package/build/components/defaultModalities/shared.d.ts +0 -20
  41. package/build/components/ui/Carousel.d.ts +0 -26
  42. package/build/components/ui/CustomCard.d.ts +0 -101
  43. package/build/components/ui/DateInput.d.ts +0 -30
  44. package/build/components/ui/IconButton.d.ts +0 -68
  45. package/build/components/ui/Icons.d.ts +0 -63
  46. package/build/components/ui/LaunchButton.d.ts +0 -13
  47. package/build/components/ui/LightDarkToggle.d.ts +0 -47
  48. package/build/components/ui/Loader.d.ts +0 -7
  49. package/build/components/ui/MessageButton.d.ts +0 -58
  50. package/build/components/ui/PicturesContainer.d.ts +0 -9
  51. package/build/components/ui/Radio.d.ts +0 -14
  52. package/build/components/ui/TextButton.d.ts +0 -46
  53. package/build/components/ui/Typography.d.ts +0 -29
  54. package/build/components/ui/ViewMediaModal.d.ts +0 -8
  55. package/build/design-system.d.ts +0 -1
  56. package/build/favicon.ico +0 -0
  57. package/build/feedback.d.ts +0 -38
  58. package/build/index.d.ts +0 -63
  59. package/build/index.html +0 -13
  60. package/build/interface.d.ts +0 -569
  61. package/build/mocks/MockText.d.ts +0 -10
  62. package/build/mocks/MockVoice.d.ts +0 -10
  63. package/build/mocks/MockVoiceMini.d.ts +0 -8
  64. package/build/mocks/shared.d.ts +0 -5
  65. package/build/preview.d.ts +0 -10
  66. package/build/types.d.ts +0 -5
  67. package/build/utils/useAppRoot.d.ts +0 -3
  68. package/build/utils/useCopy.d.ts +0 -4
  69. package/build/utils/useTailwindMediaQuery.d.ts +0 -1
  70. package/build/voice.d.ts +0 -70
package/connect-chat.html ADDED
@@ -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
@@ -0,0 +1,5 @@
1
+ import baseConfig from "@nlxai/eslint-config";
2
+ import documentation from "@nlxai/eslint-config/documentation";
3
+
4
+ /** @type {import('eslint').Linter.Config[]} */
5
+ export default [...baseConfig, ...documentation];
package/index.html CHANGED
@@ -21,13 +21,13 @@
21
21
  import { create, html } from "./src/index.tsx";
22
22
 
23
23
  const config = {
24
- protocol: "https",
25
- host: "dev.apps.nlx.ai",
26
- deploymentKey: "gFS1N2WyDTfDffIqKxSI0",
27
- channelKey: "gCinjDrCSoQvbhBBaiiZf",
28
- apiKey: "w0P5c3y3TR80jnvmpzsLDRYe",
24
+ protocol: "httpsWithStreaming",
25
+ host: "bots.dev.studio.nlx.ai",
26
+ deploymentKey: "Nji0Tkk8UOqaFc3Z3mDW9",
27
+ channelKey: "5p7ZdO_XgcnCKnuxbhNAS",
28
+ apiKey: "crLjtXvXIOPtc1AgnPHoEE1y",
29
29
  languageCode: "en-US",
30
- userId: self.crypto.randomUUID(),
30
+ userId: self.crypto.randomUUID()
31
31
  };
32
32
 
33
33
  const touchpointConfig = {
package/lib/components/Messages.d.ts CHANGED
@@ -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[];