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

package/build/components/ui/Icons.d.ts

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+/**
+ * Props for icon components
+ */
+export interface IconProps {
+    /**
+     * Additional CSS classes to apply to the icon
+     */
+    className?: string;
+    /**
+     * Custom size in pixels for the icon
+     */
+    size?: number;
+}
+/**
+ * Type definition for an icon component
+ */
+export type Icon = FC<IconProps>;
+export declare const Action: Icon;
+export declare const Touchpoint: Icon;
+export declare const AssistantOld: Icon;
+export declare const Add: Icon;
+export declare const ArrowDown: Icon;
+export declare const ArrowLeft: Icon;
+export declare const ArrowRight: Icon;
+export declare const ArrowUp: Icon;
+export declare const ArrowForward: Icon;
+export declare const Attachment: Icon;
+export declare const BotMessage: Icon;
+export declare const Camera: Icon;
+export declare const Check: Icon;
+export declare const Close: Icon;
+export declare const Copy: Icon;
+export declare const Date: Icon;
+export declare const Delete: Icon;
+export declare const Edit: Icon;
+export declare const Escalate: Icon;
+export declare const Error: Icon;
+export declare const FullScreen: Icon;
+export declare const Mic: Icon;
+export declare const MicOff: Icon;
+export declare const Location: Icon;
+export declare const Volume: Icon;
+export declare const VolumeOff: Icon;
+export declare const Translate: Icon;
+export declare const OpenInNew: Icon;
+export declare const Play: Icon;
+export declare const Preview: Icon;
+export declare const Reorder: Icon;
+export declare const Restart: Icon;
+export declare const Settings: Icon;
+export declare const Search: Icon;
+export declare const Share: Icon;
+export declare const Warning: Icon;
+export declare const ThumbDown: Icon;
+export declare const ThumbUp: Icon;
+export declare const Time: Icon;
+export declare const Undo: Icon;
+export declare const Refresh: Icon;
+export declare const Help: Icon;
+export declare const OpenLink: Icon;
+export declare const LightMode: Icon;
+export declare const DarkMode: Icon;

package/build/components/ui/LaunchButton.d.ts

@@ -0,0 +1,13 @@
+import { FC, ComponentType } from 'react';
+export interface LaunchButtonProps {
+    label: string;
+    className?: string;
+    showLabel?: boolean;
+    onClick?: () => void;
+    iconUrl?: string;
+    Custom?: ComponentType<{
+        className?: string;
+        onClick?: () => void;
+    }>;
+}
+export declare const LaunchButton: FC<LaunchButtonProps>;

package/build/components/ui/LightDarkToggle.d.ts

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+import { ColorMode } from '../../interface';
+/**
+ * Props for the LightDarkToggle component
+ * @inline
+ * @hidden
+ */
+interface Props {
+    /**
+     * Current theme state
+     */
+    value: ColorMode;
+    /**
+     * Callback fired when the toggle is changed
+     */
+    onChange: (value: ColorMode) => void;
+    /**
+     * Additional CSS classes to apply to the toggle
+     */
+    className?: string;
+    /**
+     * Accessible label for the toggle
+     */
+    label?: string;
+}
+/**
+ * A controlled light/dark mode toggle component
+ * @example
+ * ```tsx
+ * import { LightDarkToggle, React, useState } from '@nlx/touchpoint-ui';
+ *
+ * const MyToggle = () => {
+ *   const [theme, setTheme] = useState<'light' | 'dark'>('light');
+ *
+ *   return (
+ *     <LightDarkToggle
+ *       value={theme}
+ *       onChange={setTheme}
+ *       label="Toggle theme"
+ *     />
+ *   );
+ * };
+ * ```
+ * @category Modality components
+ */
+export declare const LightDarkToggle: FC<Props>;
+export {};

package/build/components/ui/Loader.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface LoaderProps {
+    label?: string;
+    className?: string;
+}
+export declare const LoaderAnimation: FC<unknown>;
+export declare const Loader: FC<LoaderProps>;

package/build/components/ui/MessageButton.d.ts

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import { IconProps } from './Icons';
+/**
+ * Represents the different types of icon buttons available in the application.
+ *
+ * - `main`: The primary icon button.
+ * - `ghost`: A transparent or less prominent icon button.
+ * - `activated`: An icon button that indicates an active state.
+ * - `coverup`: An icon button used to cover up or mask something.
+ * - `overlay`: An icon button that appears over other content.
+ * @category Modality components
+ */
+export type MessageButtonType = "main" | "activated";
+/**
+ * Props for the MessageButton component
+ * @inline
+ * @hidden
+ */
+export interface MessageButtonProps {
+    /**
+     * Handler function called when the button is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Accessible label for the button
+     */
+    label: string;
+    /**
+     * Additional CSS classes to apply to the button
+     */
+    className?: string;
+    /**
+     * Visual style variant of the button. One of MessageButtonType.
+     */
+    type: MessageButtonType;
+    /**
+     * Icon component to display inside the button
+     */
+    Icon: FC<IconProps>;
+}
+/**
+ * A button showing only an icon (textual label is provided for accessibility)
+ * @example
+ * ```tsx
+ * import { MessageButton, Icons, React } from '@nlx/touchpoint-ui';
+ *
+ * const MyMessageButton = () => (
+ *   <MessageButton
+ *     label="Send message"
+ *     onClick={() => alert('Icon button clicked!')}
+ *     type="main"
+ *     Icon={Icons.ArrowForward}
+ *   />
+ * );
+ * ```
+ * @category Modality components
+ */
+export declare const MessageButton: FC<MessageButtonProps>;

package/build/components/ui/PicturesContainer.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface PicturesProps {
+    imgSrc: string;
+}
+interface PicturesContainerProps {
+    payload: PicturesProps[];
+}
+export declare const PicturesContainer: FC<PicturesContainerProps>;
+export {};

package/build/components/ui/Radio.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+export interface RadioOption<T> {
+    value: T;
+    label: string;
+}
+interface RadioProps<T> {
+    options: Array<RadioOption<T>>;
+    value: T;
+    onChange?: (value: T) => void;
+    name: string;
+    className?: string;
+}
+export declare const Radio: FC<RadioProps<string | number>>;
+export {};

package/build/components/ui/TextButton.d.ts

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { IconProps } from './Icons';
+/**
+ * Props for the TextButton component
+ * @inline
+ * @hidden
+ */
+export interface TextButtonProps {
+    /**
+     * Handler function called when the button is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Text to display on the button
+     */
+    label: string;
+    /**
+     * Additional CSS classes to apply to the button
+     */
+    className?: string;
+    /**
+     * Visual style variant of the button
+     * Default value is "ghost"
+     */
+    type?: "main" | "ghost";
+    /**
+     * Icon component to display inside the button.
+     */
+    Icon: FC<IconProps>;
+}
+/**
+ * A button with a visible textual label
+ * @example
+ * ```tsx
+ * import { TextButton, ArrowForward, React } from '@nlx/touchpoint-ui';
+ *
+ * const MyTextButton = ({ onClickHandler }) => (
+ *  <TextButton
+ *    onClick={onClickHandler}
+ *    label="Continue"
+ *  />
+ * );
+ * ```
+ * @category Modality components
+ */
+export declare const TextButton: FC<TextButtonProps>;

package/build/components/ui/Typography.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from 'react';
+/**
+ * Standard text component with base typography styles applied.
+ * @example
+ * ```tsx
+ * import { BaseText, React } from '@nlx/touchpoint-ui';
+ *
+ * const MyText = () => (
+ *  <BaseText faded>This is some standard text.</BaseText>
+ * );
+ * ```
+ * @category Modality components
+ */
+export declare const BaseText: FC<{
+    children: ReactNode;
+    /** Show in a slightly dimmer style (primary-60 instead of primary-80). */
+    faded?: boolean;
+    /** Custom CSS class name */
+    className?: string;
+}>;
+/**
+ * Small text component with smaller typography styles applied.
+ * @category Modality components
+ */
+export declare const SmallText: FC<{
+    children: ReactNode;
+    /** Custom CSS class name */
+    className?: string;
+}>;

package/build/components/ui/ViewMediaModal.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface ViewMediaModalProps {
+    onClose: () => void;
+    src: string;
+    type: "picture" | "video";
+}
+declare const ViewMediaModal: FC<ViewMediaModalProps>;
+export default ViewMediaModal;

package/build/design-system.d.ts

@@ -0,0 +1 @@
+export declare const renderDesignSystem: (element: HTMLElement) => void;

package/build/feedback.d.ts

@@ -0,0 +1,38 @@
+import { ConversationHandler } from '@nlxai/core';
+interface FeedbackInfo {
+    rating: number | null;
+    commentSubmitted: boolean;
+    commentText: string;
+    pending: boolean;
+}
+export interface State {
+    comment: CommentState;
+    items: Record<string, FeedbackInfo>;
+}
+type CommentState = {
+    state: "idle";
+} | ({
+    state: "editing";
+} & ActiveCommentState) | ({
+    state: "submitting";
+} & ActiveCommentState) | ({
+    state: "submitted";
+} & ActiveCommentState) | ({
+    state: "error";
+} & ActiveCommentState);
+interface ActiveCommentState {
+    activeFeedbackUrl: string;
+    text: string;
+    prompt: string;
+}
+export declare const getFeedbackInfo: (state: State, feedbackUrl: string) => FeedbackInfo;
+export interface Actions {
+    clickRating: (feedbackUrl: string, value: number) => void;
+    clickCommentButton: (feedbackUrl: string, prompt: string) => void;
+    clickCommentEdit: () => void;
+    editCommentText: (text: string) => void;
+    submitComment: () => Promise<void>;
+    cancelComment: () => void;
+}
+export declare function useFeedback(handler: ConversationHandler): [State, Actions];
+export {};

package/build/index.d.ts

@@ -0,0 +1,63 @@
+import { TextButton } from './components/ui/TextButton';
+import { IconButton } from './components/ui/IconButton';
+import { Ripple } from './components/Ripple';
+import { BaseText, SmallText } from './components/ui/Typography';
+import { CustomCard, CustomCardRow, CustomCardImageRow } from './components/ui/CustomCard';
+import { Carousel } from './components/ui/Carousel';
+import { DateInput } from './components/ui/DateInput';
+import { TouchpointConfiguration, TouchpointInstance } from './interface';
+import * as Icons from "./components/ui/Icons";
+/**
+ * If you wish to build custom modalities using JSX, you will want to
+ *
+ * ```javascript
+ * import { React } from "@nlx/touchpoint-ui";
+ * ```
+ *
+ * instead of importing from "react" directly. This ensures that the custom modalities will
+ * be running in the same React context as the Touchpoint UI using the correct version of React.
+ * @category Modality components
+ */
+export { default as React } from 'react';
+/**
+ * Package version
+ * @category Utilities
+ */
+export declare const version: string;
+/**
+ * A tagged literal for creating reactive elements for custom modalities.
+ * It already knows about all Touchpoint UI components, so you can use them directly without the need to import them.
+ * Also very useful when using Touchpoint directly from CDN or in projects without a build step.
+ * @example
+ * ```ts
+ * import { html, Icons } from '@nlx/touchpoint-ui';
+ *
+ * const MyCustomModality = ({data, conversationHandler}) =>
+ *   html`<div style="display: flex; gap: 8px;">
+ *    <IconButton label="Cancel" Icon=${Icons.Close} type="ghost" onClick=${cancel()} />
+ *    <TextButton
+ *     label="Submit"
+ *     Icon=${Icons.ArrowForward}
+ *     type="main"
+ *     onClick=${() => conversationHandler.sendText('Button clicked!')}
+ *   />
+ *  </div>`;
+ * ```
+ * @category Modality components
+ */
+export declare const html: (strings: TemplateStringsArray, ...values: any[]) => unknown;
+export { type CustomCardProps, type CustomCardRowProps, } from './components/ui/CustomCard';
+export { type DateInputProps } from './components/ui/DateInput';
+export { type IconButtonProps, type IconButtonType, } from './components/ui/IconButton';
+export { type TextButtonProps } from './components/ui/TextButton';
+export type { WindowSize, ColorMode, ChoiceMessage, CustomModalityComponent, Theme, InitializeConversation, CustomLaunchButton, Input, InputField, PageState, BidirectionalContext, BidirectionalConfig, TouchpointConfiguration, BidirectionalCustomCommand, TouchpointInstance, } from './interface';
+export { analyzePageForms, type InteractiveElementInfo, type PageForms, type AccessibilityInformation, } from './bidirectional/analyzePageForms';
+/**
+ * Creates a new Touchpoint UI instance and appends it to the document body
+ * @param props - Configuration props for Touchpoint
+ * @returns A promise that resolves to a TouchpointInstance
+ * @category Basics
+ */
+export declare const create: (props: TouchpointConfiguration) => Promise<TouchpointInstance>;
+export { Container as PreviewContainer } from './preview';
+export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, Ripple, };

package/build/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Design System</title>
+  <script type="module" crossorigin src="/assets/index-B9Yzt2if.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-BbXI3y3Q.css">
+</head>
+<body>
+  <main></main>
+</body>
+</html>