@nlxai/touchpoint-ui 1.0.4-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 (35) hide show
  1. package/.eslintrc.cjs +5 -0
  2. package/.prettierrc +1 -0
  3. package/LICENSE +20 -0
  4. package/README.md +10 -0
  5. package/index.html +95 -0
  6. package/lib/App.d.ts +17 -0
  7. package/lib/components/ChatHeader.d.ts +13 -0
  8. package/lib/components/ChatInput.d.ts +15 -0
  9. package/lib/components/ChatMessages.d.ts +21 -0
  10. package/lib/components/ChatSettings.d.ts +12 -0
  11. package/lib/components/Theme.d.ts +8 -0
  12. package/lib/components/ui/CustomCard.d.ts +21 -0
  13. package/lib/components/ui/DateInput.d.ts +6 -0
  14. package/lib/components/ui/IconButton.d.ts +12 -0
  15. package/lib/components/ui/Icons.d.ts +46 -0
  16. package/lib/components/ui/LaunchButton.d.ts +8 -0
  17. package/lib/components/ui/Loader.d.ts +6 -0
  18. package/lib/components/ui/PicturesContainer.d.ts +9 -0
  19. package/lib/components/ui/TextButton.d.ts +11 -0
  20. package/lib/components/ui/Typography.d.ts +8 -0
  21. package/lib/components/ui/ViewMediaModal.d.ts +8 -0
  22. package/lib/context.d.ts +6 -0
  23. package/lib/design-system.d.ts +0 -0
  24. package/lib/favicon.ico +0 -0
  25. package/lib/hooks.d.ts +1 -0
  26. package/lib/index.d.ts +18 -0
  27. package/lib/index.js +10193 -0
  28. package/lib/index.umd.cjs +161 -0
  29. package/lib/types.d.ts +138 -0
  30. package/package.json +59 -0
  31. package/postcss.config.js +6 -0
  32. package/public/favicon.ico +0 -0
  33. package/tailwind.config.js +50 -0
  34. package/tsconfig.json +10 -0
  35. package/vite.config.ts +47 -0
package/.eslintrc.cjs ADDED
@@ -0,0 +1,5 @@
1
+ /** @type {import('eslint').Linter.Config } */
2
+ module.exports = {
3
+ root: true,
4
+ extends: ["nlx", "nlx/documentation"],
5
+ };
package/.prettierrc ADDED
@@ -0,0 +1 @@
1
+ {}
package/LICENSE ADDED
@@ -0,0 +1,20 @@
1
+ Copyright (c) 2025, NLX Inc.
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy
4
+ of this software and associated documentation files (the "Software"), to deal
5
+ in the Software without restriction, including without limitation the rights
6
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7
+ copies of the Software, and to permit persons to whom the Software is
8
+ furnished to do so, subject to the following conditions:
9
+
10
+ The above copyright notice and this permission notice shall be included in all
11
+ copies or substantial portions of the Software.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19
+ SOFTWARE.
20
+
package/README.md ADDED
@@ -0,0 +1,10 @@
1
+ # touchpoint-prototype
2
+
3
+ ## Run locally
4
+
5
+ `npm install`
6
+ `npm run dev`
7
+
8
+ ## Standalone dev environment and design system
9
+
10
+ `npm run design-system`
package/index.html ADDED
@@ -0,0 +1,95 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="icon" href="/favicon.ico" type="image/x-icon" />
7
+ <style>
8
+ main {
9
+ padding: 15px;
10
+ }
11
+
12
+ main * {
13
+ font-family: Helvetica, sans-serif;
14
+ }
15
+ </style>
16
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
+ <title>Touchpoint prototype</title>
18
+ </head>
19
+
20
+ <body>
21
+ <main>
22
+ <h1>Loreum ipsum dolor sit amet</h1>
23
+
24
+ <p>
25
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
26
+ fermentum nisi nec placerat facilisis. Ut fringilla magna ac ipsum
27
+ finibus, vitae scelerisque magna molestie. Donec mollis ut elit a
28
+ tristique. Phasellus tempus velit quam, non tempor dolor tempus a.
29
+ Quisque sed risus tortor. Duis ultricies maximus imperdiet. Vivamus eget
30
+ accumsan nulla. Sed accumsan ipsum in pharetra ornare. In ac scelerisque
31
+ metus. In hac habitasse platea dictumst. Proin est massa, interdum ut
32
+ risus sit amet, congue bibendum dolor. Donec dapibus lacus vel sem
33
+ hendrerit, sit amet placerat odio blandit. Cras laoreet sapien id erat
34
+ ornare, in hendrerit tortor commodo.
35
+ </p>
36
+
37
+ <p>
38
+ Nulla porta quis sem id pellentesque. Aenean elit enim, vestibulum vitae
39
+ libero quis, pretium vestibulum nunc. Proin id dolor vulputate, rhoncus
40
+ tellus quis, condimentum mi. Morbi sed varius nisi, sed convallis
41
+ tellus. Cras imperdiet feugiat nisi at tristique. Suspendisse potenti.
42
+ Cras in quam fermentum, laoreet tortor non, euismod leo. Mauris
43
+ tincidunt massa quis malesuada pellentesque. Nulla auctor arcu vel orci
44
+ sodales porttitor.
45
+ </p>
46
+
47
+ <p>
48
+ Integer magna mi, consectetur vitae dui tempus, ultricies commodo magna.
49
+ Morbi aliquet varius enim eget ullamcorper. Vestibulum tristique, risus
50
+ eget tincidunt tristique, nibh dolor laoreet purus, id viverra mi ipsum
51
+ eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
52
+ Vestibulum imperdiet ut ex et convallis. Lorem ipsum dolor sit amet,
53
+ consectetur adipiscing elit. Phasellus auctor eget odio ut dignissim.
54
+ Mauris eget velit ut orci vestibulum bibendum. Vestibulum sit amet
55
+ tincidunt enim.
56
+ </p>
57
+
58
+ <p>
59
+ Donec eu mauris ac lectus rutrum blandit ut id ante. Phasellus volutpat
60
+ imperdiet mauris in aliquet. Duis auctor, tellus ac faucibus fermentum,
61
+ ligula quam hendrerit eros, ut vehicula erat mi non nulla. Fusce odio
62
+ massa, fermentum eget metus vitae, interdum viverra justo. Nam consequat
63
+ mauris orci, a rhoncus eros volutpat nec. Nunc iaculis erat efficitur,
64
+ pulvinar eros vel, commodo ligula. Praesent gravida, ipsum vitae tempus
65
+ aliquam, mauris elit pharetra sapien, vitae porttitor quam orci quis
66
+ dolor. Mauris et vulputate enim, et pellentesque libero. Proin cursus
67
+ malesuada condimentum. Donec scelerisque, quam in fringilla facilisis,
68
+ nibh sapien varius justo, eget pellentesque erat leo ac lectus. Nulla eu
69
+ auctor sem. Cras condimentum sem non mauris facilisis imperdiet. Integer
70
+ eu dolor ipsum. Praesent maximus ornare felis, non faucibus sem
71
+ porttitor nec.
72
+ </p>
73
+
74
+ <p>
75
+ Orci varius natoque penatibus et magnis dis parturient montes, nascetur
76
+ ridiculus mus. Nunc elementum non urna vel vulputate. Vestibulum vitae
77
+ felis turpis. Cras id mauris id ligula molestie eleifend. Vivamus in
78
+ ante at erat rutrum vulputate vel id arcu. Nam luctus sapien sed
79
+ fermentum fermentum. Ut dolor velit, elementum et metus vel, pretium
80
+ dapibus lectus. Nulla vulputate pulvinar elit quis convallis. Cras
81
+ pharetra, eros sit amet blandit ornare, eros odio accumsan urna, nec
82
+ vestibulum dolor purus nec neque. Phasellus vel quam sed magna vehicula
83
+ facilisis sit amet non risus. Phasellus libero eros, eleifend ut
84
+ vulputate non, malesuada sit amet purus. Etiam vel diam facilisis,
85
+ tempus quam eu, ullamcorper turpis. Duis nec enim ut est rutrum rhoncus.
86
+ Cras finibus urna at purus accumsan, viverra lacinia nunc faucibus. In
87
+ facilisis, ex eu commodo luctus, justo nisl hendrerit quam, quis
88
+ volutpat tellus lectus sit amet enim. Duis laoreet lorem vitae lorem
89
+ aliquam bibendum.
90
+ </p>
91
+ </main>
92
+ <script type="module" src="/src/index.tsx"></script>
93
+ </body>
94
+
95
+ </html>
package/lib/App.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ConversationHandler, Config } from '@nlxai/chat-core';
2
+ import { ColorMode, WindowSize, LogoUrl, Theme, CustomModalityComponent } from './types';
3
+ export interface Props {
4
+ config: Config;
5
+ windowSize?: WindowSize;
6
+ colorMode?: ColorMode;
7
+ logoUrl?: LogoUrl;
8
+ theme?: Partial<Theme>;
9
+ customModalities?: Record<string, CustomModalityComponent<any>>;
10
+ }
11
+ export interface AppRef {
12
+ expand: () => void;
13
+ collapse: () => void;
14
+ getConversationHandler: () => ConversationHandler | null;
15
+ }
16
+ declare const App: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<AppRef>>;
17
+ export default App;
package/lib/components/ChatHeader.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { FC } from 'react';
2
+ import { WindowSize, LogoUrl, ColorMode } from '../types';
3
+ interface ChatHeaderProps {
4
+ windowSize: WindowSize;
5
+ colorMode: ColorMode;
6
+ logoUrl?: LogoUrl;
7
+ collapse: () => void;
8
+ reset: () => void;
9
+ toggleSettings?: () => void;
10
+ isSettingsOpen: boolean;
11
+ }
12
+ export declare const ChatHeader: FC<ChatHeaderProps>;
13
+ export {};
package/lib/components/ChatInput.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { FC } from 'react';
2
+ import { ConversationHandler, UploadUrl } from '@nlxai/chat-core';
3
+ import { ChoiceMessage } from '../types';
4
+ interface ChatInputProps {
5
+ className?: string;
6
+ handler: ConversationHandler;
7
+ uploadUrl?: UploadUrl;
8
+ onFileUpload: (val: {
9
+ uploadId: string;
10
+ file: File;
11
+ }) => void;
12
+ choiceMessage?: ChoiceMessage;
13
+ }
14
+ declare const ChatInput: FC<ChatInputProps>;
15
+ export default ChatInput;
package/lib/components/ChatMessages.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { FC } from 'react';
2
+ import { Response, ConversationHandler, BotMessage } from '@nlxai/chat-core';
3
+ import { CustomModalityComponent, ColorMode } from '../types';
4
+ export interface ChatMessagesProps {
5
+ isWaiting: boolean;
6
+ handler: ConversationHandler;
7
+ responses: Response[];
8
+ colorMode: ColorMode;
9
+ uploadedFiles: Record<string, File>;
10
+ lastBotResponseIndex?: number;
11
+ customModalities: Record<string, CustomModalityComponent<any>>;
12
+ className?: string;
13
+ }
14
+ export declare const MessageChoices: FC<{
15
+ handler: ConversationHandler;
16
+ message: BotMessage;
17
+ responseIndex: number;
18
+ messageIndex: number;
19
+ className?: string;
20
+ }>;
21
+ export declare const ChatMessages: FC<ChatMessagesProps>;
package/lib/components/ChatSettings.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { FC, Dispatch, SetStateAction } from 'react';
2
+ import { ConversationHandler } from '@nlxai/chat-core';
3
+ import { WindowSize } from '../types';
4
+ interface ChatSettingsProps {
5
+ onClose: () => void;
6
+ handler: ConversationHandler;
7
+ windowSize: WindowSize;
8
+ setWindowSizeOverride: Dispatch<SetStateAction<WindowSize | null>>;
9
+ className?: string;
10
+ }
11
+ export declare const ChatSettings: FC<ChatSettingsProps>;
12
+ export {};
package/lib/components/Theme.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FC, ReactNode } from 'react';
2
+ import { ColorMode, Theme } from '../types';
3
+ export declare const CustomPropertiesContainer: FC<{
4
+ colorMode: ColorMode;
5
+ className?: string;
6
+ theme?: Partial<Theme>;
7
+ children?: ReactNode;
8
+ }>;
package/lib/components/ui/CustomCard.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { FC, ReactNode } from 'react';
2
+ import { Icon } from '../ui/Icons';
3
+ export interface CustomCardProps {
4
+ children: ReactNode;
5
+ selected?: boolean;
6
+ onClick?: () => void;
7
+ }
8
+ export declare const CustomCards: FC<{
9
+ children: ReactNode;
10
+ }>;
11
+ export declare const CustomCard: FC<CustomCardProps>;
12
+ export declare const CustomCardImageRow: FC<{
13
+ src: string;
14
+ alt?: string;
15
+ }>;
16
+ export interface CustomCardRowProps {
17
+ left: ReactNode;
18
+ right: ReactNode;
19
+ icon?: Icon;
20
+ }
21
+ export declare const CustomCardRow: FC<CustomCardRowProps>;
package/lib/components/ui/DateInput.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ interface DateInputProps {
3
+ onSubmit?: (date: string) => void;
4
+ }
5
+ export declare const DateInput: FC<DateInputProps>;
6
+ export {};
package/lib/components/ui/IconButton.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { FC } from 'react';
2
+ import { IconProps } from './Icons';
3
+ export type IconButtonType = "main" | "ghost" | "activated" | "coverup" | "overlay";
4
+ interface IconButtonProps {
5
+ onClick?: () => void;
6
+ label: string;
7
+ className?: string;
8
+ type: IconButtonType;
9
+ Icon: FC<IconProps>;
10
+ }
11
+ export declare const IconButton: FC<IconButtonProps>;
12
+ export {};
package/lib/components/ui/Icons.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { FC } from 'react';
2
+ export interface IconProps {
3
+ className?: string;
4
+ size?: number;
5
+ }
6
+ export type Icon = FC<IconProps>;
7
+ export declare const Action: Icon;
8
+ export declare const Assistant: Icon;
9
+ export declare const AssistantOld: Icon;
10
+ export declare const Add: Icon;
11
+ export declare const ArrowDown: Icon;
12
+ export declare const ArrowLeft: Icon;
13
+ export declare const ArrowRight: Icon;
14
+ export declare const ArrowUp: Icon;
15
+ export declare const ArrowForward: Icon;
16
+ export declare const Attachment: Icon;
17
+ export declare const Camera: Icon;
18
+ export declare const Check: Icon;
19
+ export declare const Close: Icon;
20
+ export declare const Copy: Icon;
21
+ export declare const Date: Icon;
22
+ export declare const Delete: Icon;
23
+ export declare const Escalate: Icon;
24
+ export declare const Error: Icon;
25
+ export declare const FullScreen: Icon;
26
+ export declare const Mic: Icon;
27
+ export declare const MicOff: Icon;
28
+ export declare const Location: Icon;
29
+ export declare const Volume: Icon;
30
+ export declare const VolumeOff: Icon;
31
+ export declare const Translate: Icon;
32
+ export declare const OpenInNew: Icon;
33
+ export declare const Play: Icon;
34
+ export declare const Preview: Icon;
35
+ export declare const Reorder: Icon;
36
+ export declare const Restart: Icon;
37
+ export declare const Settings: Icon;
38
+ export declare const Search: Icon;
39
+ export declare const Share: Icon;
40
+ export declare const Warning: Icon;
41
+ export declare const ThumbDown: Icon;
42
+ export declare const ThumbUp: Icon;
43
+ export declare const Time: Icon;
44
+ export declare const Undo: Icon;
45
+ export declare const Refresh: Icon;
46
+ export declare const Help: Icon;
package/lib/components/ui/LaunchButton.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FC } from 'react';
2
+ export interface LaunchButtonProps {
3
+ label: string;
4
+ className?: string;
5
+ showLabel?: boolean;
6
+ onClick?: () => void;
7
+ }
8
+ export declare const LaunchButton: FC<LaunchButtonProps>;
package/lib/components/ui/Loader.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export interface LoaderProps {
3
+ label: string;
4
+ className?: string;
5
+ }
6
+ export declare const Loader: FC<LoaderProps>;
package/lib/components/ui/PicturesContainer.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { FC } from 'react';
2
+ export interface PicturesProps {
3
+ imgSrc: string;
4
+ }
5
+ interface PicturesContainerProps {
6
+ payload: PicturesProps[];
7
+ }
8
+ export declare const PicturesContainer: FC<PicturesContainerProps>;
9
+ export {};
package/lib/components/ui/TextButton.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { FC } from 'react';
2
+ import { IconProps } from './Icons';
3
+ interface TextButtonProps {
4
+ onClick?: () => void;
5
+ label: string;
6
+ className?: string;
7
+ type?: "main" | "ghost";
8
+ Icon: FC<IconProps>;
9
+ }
10
+ export declare const TextButton: FC<TextButtonProps>;
11
+ export {};
package/lib/components/ui/Typography.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FC, ReactNode } from 'react';
2
+ export declare const BaseText: FC<{
3
+ children: ReactNode;
4
+ faded?: boolean;
5
+ }>;
6
+ export declare const SmallText: FC<{
7
+ children: ReactNode;
8
+ }>;
package/lib/components/ui/ViewMediaModal.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FC } from 'react';
2
+ interface ViewMediaModalProps {
3
+ onClose: () => void;
4
+ src: string;
5
+ type: "picture" | "video";
6
+ }
7
+ declare const ViewMediaModal: FC<ViewMediaModalProps>;
8
+ export default ViewMediaModal;
package/lib/context.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ConversationHandler } from '@nlxai/chat-core';
2
+ export interface ContextValue {
3
+ handler: ConversationHandler | null;
4
+ }
5
+ export declare const Context: import('react').Context<ContextValue>;
6
+ export declare const useTouchpointContext: () => ContextValue;
package/lib/design-system.d.ts ADDED
File without changes
package/lib/favicon.ico ADDED
Binary file
package/lib/hooks.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const useTailwindMediaQuery: (queryPrefix: "sm" | "md" | "lg") => boolean | undefined;
package/lib/index.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { ConversationHandler } from '@nlxai/chat-core';
2
+ import { Props } from './App';
3
+ import { TextButton } from './components/ui/TextButton';
4
+ import { IconButton } from './components/ui/IconButton';
5
+ import { BaseText, SmallText } from './components/ui/Typography';
6
+ import { CustomCards, CustomCard, CustomCardRow, CustomCardImageRow } from './components/ui/CustomCard';
7
+ import * as Icons from "./components/ui/Icons";
8
+ export { useTouchpointContext } from './context';
9
+ export { default as React } from 'react';
10
+ export declare const html: (strings: TemplateStringsArray, ...values: any[]) => unknown;
11
+ export { TextButton, IconButton, BaseText, SmallText, CustomCards, CustomCard, CustomCardRow, CustomCardImageRow, Icons, };
12
+ export interface TouchpointInstance {
13
+ expand: () => void;
14
+ collapse: () => void;
15
+ getConversationHandler: () => ConversationHandler | null;
16
+ teardown: () => void;
17
+ }
18
+ export declare const create: (props: Props) => TouchpointInstance;