@nlxai/touchpoint-ui 1.2.5 → 1.2.7-alpha.0

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 (83) hide show
  1. package/.eslintrc.cjs +1 -1
  2. package/README.md +8 -0
  3. package/build/App.d.ts +20 -0
  4. package/build/ProviderStack.d.ts +10 -0
  5. package/build/assets/index-B9Yzt2if.js +233 -0
  6. package/build/assets/index-BbXI3y3Q.css +1 -0
  7. package/build/bidirectional/analyzePageForms.d.ts +35 -0
  8. package/build/bidirectional/automaticContext.d.ts +12 -0
  9. package/build/bidirectional/commandHandler.d.ts +5 -0
  10. package/build/bidirectional/debug.d.ts +1 -0
  11. package/build/components/ErrorMessage.d.ts +4 -0
  12. package/build/components/FeedbackComment.d.ts +6 -0
  13. package/build/components/FullscreenError.d.ts +2 -0
  14. package/build/components/FullscreenVoice.d.ts +32 -0
  15. package/build/components/Header.d.ts +20 -0
  16. package/build/components/Input.d.ts +14 -0
  17. package/build/components/Layout.d.ts +23 -0
  18. package/build/components/Messages.d.ts +33 -0
  19. package/build/components/Notice.d.ts +4 -0
  20. package/build/components/Ripple.d.ts +9 -0
  21. package/build/components/RiveAnimation.d.ts +4 -0
  22. package/build/components/SafeMarkdown.d.ts +4 -0
  23. package/build/components/Settings.d.ts +10 -0
  24. package/build/components/Theme.d.ts +4 -0
  25. package/build/components/VoiceMini.d.ts +13 -0
  26. package/build/components/VoiceModalities.d.ts +11 -0
  27. package/build/components/defaultModalities/DefaultCard.d.ts +3 -0
  28. package/build/components/defaultModalities/DefaultCarousel.d.ts +6 -0
  29. package/build/components/defaultModalities/DefaultDateInput.d.ts +5 -0
  30. package/build/components/defaultModalities/shared.d.ts +20 -0
  31. package/build/components/ui/Carousel.d.ts +26 -0
  32. package/build/components/ui/CustomCard.d.ts +101 -0
  33. package/build/components/ui/DateInput.d.ts +30 -0
  34. package/build/components/ui/IconButton.d.ts +68 -0
  35. package/build/components/ui/Icons.d.ts +63 -0
  36. package/build/components/ui/LaunchButton.d.ts +13 -0
  37. package/build/components/ui/LightDarkToggle.d.ts +47 -0
  38. package/build/components/ui/Loader.d.ts +7 -0
  39. package/build/components/ui/MessageButton.d.ts +58 -0
  40. package/build/components/ui/PicturesContainer.d.ts +9 -0
  41. package/build/components/ui/Radio.d.ts +14 -0
  42. package/build/components/ui/TextButton.d.ts +46 -0
  43. package/build/components/ui/Typography.d.ts +29 -0
  44. package/build/components/ui/ViewMediaModal.d.ts +8 -0
  45. package/build/design-system.d.ts +1 -0
  46. package/build/favicon.ico +0 -0
  47. package/build/feedback.d.ts +38 -0
  48. package/build/index.d.ts +63 -0
  49. package/build/index.html +13 -0
  50. package/build/interface.d.ts +569 -0
  51. package/build/mocks/MockText.d.ts +10 -0
  52. package/build/mocks/MockVoice.d.ts +10 -0
  53. package/build/mocks/MockVoiceMini.d.ts +8 -0
  54. package/build/mocks/shared.d.ts +5 -0
  55. package/build/preview.d.ts +10 -0
  56. package/build/types.d.ts +5 -0
  57. package/build/utils/useAppRoot.d.ts +3 -0
  58. package/build/utils/useCopy.d.ts +4 -0
  59. package/build/utils/useTailwindMediaQuery.d.ts +1 -0
  60. package/build/voice.d.ts +70 -0
  61. package/index.html +43 -47
  62. package/lib/ProviderStack.d.ts +0 -21
  63. package/lib/components/FullscreenVoice.d.ts +5 -10
  64. package/lib/components/Layout.d.ts +23 -0
  65. package/lib/components/VoiceModalities.d.ts +11 -0
  66. package/lib/components/defaultModalities/index.d.ts +2 -0
  67. package/lib/components/ui/Radio.d.ts +14 -0
  68. package/lib/design-system/LightDarkToggle.d.ts +50 -0
  69. package/lib/design-system/index.d.ts +1 -0
  70. package/lib/index.js +12483 -12412
  71. package/lib/index.umd.js +83 -83
  72. package/lib/interface.d.ts +4 -0
  73. package/lib/mocks/MockText.d.ts +10 -0
  74. package/lib/mocks/MockVoice.d.ts +10 -0
  75. package/lib/mocks/MockVoiceMini.d.ts +8 -0
  76. package/lib/mocks/shared.d.ts +5 -0
  77. package/package.json +6 -6
  78. package/vite.config.ts +61 -32
  79. package/docs/@nlxai/namespaces/Icons.md +0 -377
  80. package/docs/@nlxai/namespaces/React/README.md +0 -221390
  81. package/docs/@nlxai/namespaces/React/namespaces/JSX.md +0 -3050
  82. package/docs/README.md +0 -1394
  83. package/lib/design-system.d.ts +0 -0
package/build/voice.d.ts ADDED
@@ -0,0 +1,70 @@
1
+ import { Context, ModalityPayloads, ConversationHandler, ApplicationMessage } from '@nlxai/core';
2
+ type DebugEvent = any;
3
+ /**
4
+ * Contains modality data paired with timing information.
5
+ */
6
+ export interface RoomDataEventsWithContext {
7
+ /** The modality data. */
8
+ data: RoomDataEvent;
9
+ /** The participant identity the data is from, if available. */
10
+ from?: string;
11
+ /** The timestamp when the data was received. */
12
+ timestamp: number;
13
+ }
14
+ type RoomDataEvent = {
15
+ type: "agent_interim_response";
16
+ message: string;
17
+ } | {
18
+ type: "agent_response";
19
+ message: string;
20
+ debugEvents?: DebugEvent[];
21
+ } | {
22
+ type: "agent_final_response";
23
+ messages: ApplicationMessage[];
24
+ debugEvents?: DebugEvent[];
25
+ modalities?: ModalityPayloads;
26
+ };
27
+ /**
28
+ * How to handle voice connections.
29
+ */
30
+ export interface VoiceHandler {
31
+ /** Enable or disable the microphone. */
32
+ setMicrophone: (micEnabled: boolean) => Promise<void>;
33
+ /** Enable or disable the speakers. */
34
+ setSpeakers: (speakersEnabled: boolean) => Promise<void>;
35
+ /** Retry connecting to the voice service. */
36
+ retry: () => Promise<void>;
37
+ /** Disconnect from the voice service. Must be called at the end of the session. */
38
+ disconnect: () => Promise<void>;
39
+ }
40
+ /**
41
+ * The state of the voice connection.
42
+ */
43
+ export interface VoiceState {
44
+ /** Whether the voice connection has been terminated from the remote end. */
45
+ isTerminated: boolean;
46
+ /** Is the user speaking at the moment. */
47
+ isUserSpeaking: boolean;
48
+ /** Is the application/agent speaking at the moment. */
49
+ isApplicationSpeaking: boolean;
50
+ /** Are the speakers enabled */
51
+ isSpeakersEnabled: boolean;
52
+ /** Is the mic enabled */
53
+ isMicEnabled: boolean;
54
+ /** Interim message */
55
+ interimMessage?: string;
56
+ }
57
+ /** Thrown when we detect missing audio permissions */
58
+ export declare class MissingAudioPermissionsError extends Error {
59
+ /** */
60
+ constructor();
61
+ }
62
+ /**
63
+ * How to handle voice connections.
64
+ * @param handler - The conversation handler.
65
+ * @param context - The context for the voice connection.
66
+ * @param onRoomStateChanged - Callback for when the room state changes.
67
+ * @returns The voice handler.
68
+ */
69
+ export declare const initiateVoice: (handler: ConversationHandler, context: Context, onRoomStateChanged?: (state: VoiceState) => void) => Promise<VoiceHandler>;
70
+ export {};
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
- <head>
5
- <style>
6
- html,
7
- body,
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
- <body>
20
- <nlx-touchpoint></nlx-touchpoint>
21
- <script type="module">
22
- import {create, html} from "./src/index.tsx";
23
-
24
- const touchpointConfig = {
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: "https",
25
+ host: "dev.apps.nlx.ai",
26
+ deploymentKey: "gFS1N2WyDTfDffIqKxSI0",
27
+ channelKey: "gCinjDrCSoQvbhBBaiiZf",
28
+ apiKey: "w0P5c3y3TR80jnvmpzsLDRYe",
32
29
  languageCode: "en-US",
33
- conversationId: "12345",
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
- // fontFamily: "'BW Haas Text Mono C 55 Rom Regular', monospace",
48
- // },
49
- };
50
-
51
- document.querySelector("nlx-touchpoint").touchpointConfiguration = touchpointConfig;
52
- </script>
53
- </body>
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
  }>;
package/lib/components/FullscreenVoice.d.ts CHANGED
@@ -21,17 +21,12 @@ export type WidgetVoiceState = null | "loading" | {
21
21
  handler: VoiceHandler;
22
22
  state?: VoiceState;
23
23
  };
24
- export declare const useWidgetVoiceState: () => [
25
- WidgetVoiceState,
26
- Dispatch<SetStateAction<WidgetVoiceState>>
27
- ];
28
- export declare const VoiceModalities: FC<{
24
+ export declare const useWidgetVoiceState: () => [WidgetVoiceState, Dispatch<SetStateAction<WidgetVoiceState>>];
25
+ export declare const VoiceIcon: FC<{
26
+ brandIcon?: string;
27
+ colorMode: ColorMode;
28
+ addRipple: boolean;
29
29
  className?: string;
30
- responses: Response[];
31
- modalityComponents: Record<string, CustomModalityComponent<unknown>>;
32
- renderedAsOverlay: boolean;
33
- showTranscript: boolean;
34
- handler: ConversationHandler;
35
30
  }>;
36
31
  export declare const FullscreenVoice: FC<Props>;
37
32
  export {};
package/lib/components/Layout.d.ts ADDED
@@ -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
+ }>;
package/lib/components/VoiceModalities.d.ts ADDED
@@ -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
+ }>;
package/lib/components/defaultModalities/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { CustomModalityComponent } from '../../interface';
2
+ export declare const defaultModalities: Record<string, CustomModalityComponent<unknown>>;
package/lib/components/ui/Radio.d.ts ADDED
@@ -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 {};
package/lib/design-system/LightDarkToggle.d.ts ADDED
@@ -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 {};
package/lib/design-system/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const renderDesignSystem: (element: HTMLElement) => void;