npm - @nlxai/touchpoint-ui - Versions diffs - 1.0.4 → 1.0.5-alpha.0 - Mend

@nlxai/touchpoint-ui 1.0.4 → 1.0.5-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 (12) hide show

package/index.html +83 -85
package/lib/App.d.ts +18 -0
package/lib/components/ui/CustomCard.d.ts +24 -0
package/lib/components/ui/DateInput.d.ts +8 -2
package/lib/components/ui/IconButton.d.ts +28 -2
package/lib/components/ui/Icons.d.ts +12 -0
package/lib/components/ui/TextButton.d.ts +20 -2
package/lib/index.d.ts +23 -0
package/lib/index.js +96 -86
package/lib/index.umd.js +5 -5
package/package.json +7 -7
package/typedoc.cjs +14 -0

package/index.html CHANGED Viewed

@@ -1,95 +1,93 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <style>
+      main {
+        padding: 15px;
+      }
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-  <style>
-    main {
-      padding: 15px;
-    }
+      main * {
+        font-family: Helvetica, sans-serif;
+      }
+    </style>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Touchpoint prototype</title>
+  </head>
-    main * {
-      font-family: Helvetica, sans-serif;
-    }
-  </style>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Touchpoint prototype</title>
-</head>
+  <body>
+    <main>
+      <h1>Loreum ipsum dolor sit amet</h1>
-<body>
-  <main>
-    <h1>Loreum ipsum dolor sit amet</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
+        fermentum nisi nec placerat facilisis. Ut fringilla magna ac ipsum
+        finibus, vitae scelerisque magna molestie. Donec mollis ut elit a
+        tristique. Phasellus tempus velit quam, non tempor dolor tempus a.
+        Quisque sed risus tortor. Duis ultricies maximus imperdiet. Vivamus eget
+        accumsan nulla. Sed accumsan ipsum in pharetra ornare. In ac scelerisque
+        metus. In hac habitasse platea dictumst. Proin est massa, interdum ut
+        risus sit amet, congue bibendum dolor. Donec dapibus lacus vel sem
+        hendrerit, sit amet placerat odio blandit. Cras laoreet sapien id erat
+        ornare, in hendrerit tortor commodo.
+      </p>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
-      fermentum nisi nec placerat facilisis. Ut fringilla magna ac ipsum
-      finibus, vitae scelerisque magna molestie. Donec mollis ut elit a
-      tristique. Phasellus tempus velit quam, non tempor dolor tempus a.
-      Quisque sed risus tortor. Duis ultricies maximus imperdiet. Vivamus eget
-      accumsan nulla. Sed accumsan ipsum in pharetra ornare. In ac scelerisque
-      metus. In hac habitasse platea dictumst. Proin est massa, interdum ut
-      risus sit amet, congue bibendum dolor. Donec dapibus lacus vel sem
-      hendrerit, sit amet placerat odio blandit. Cras laoreet sapien id erat
-      ornare, in hendrerit tortor commodo.
-    </p>
+      <p>
+        Nulla porta quis sem id pellentesque. Aenean elit enim, vestibulum vitae
+        libero quis, pretium vestibulum nunc. Proin id dolor vulputate, rhoncus
+        tellus quis, condimentum mi. Morbi sed varius nisi, sed convallis
+        tellus. Cras imperdiet feugiat nisi at tristique. Suspendisse potenti.
+        Cras in quam fermentum, laoreet tortor non, euismod leo. Mauris
+        tincidunt massa quis malesuada pellentesque. Nulla auctor arcu vel orci
+        sodales porttitor.
+      </p>
-    <p>
-      Nulla porta quis sem id pellentesque. Aenean elit enim, vestibulum vitae
-      libero quis, pretium vestibulum nunc. Proin id dolor vulputate, rhoncus
-      tellus quis, condimentum mi. Morbi sed varius nisi, sed convallis
-      tellus. Cras imperdiet feugiat nisi at tristique. Suspendisse potenti.
-      Cras in quam fermentum, laoreet tortor non, euismod leo. Mauris
-      tincidunt massa quis malesuada pellentesque. Nulla auctor arcu vel orci
-      sodales porttitor.
-    </p>
+      <p>
+        Integer magna mi, consectetur vitae dui tempus, ultricies commodo magna.
+        Morbi aliquet varius enim eget ullamcorper. Vestibulum tristique, risus
+        eget tincidunt tristique, nibh dolor laoreet purus, id viverra mi ipsum
+        eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Vestibulum imperdiet ut ex et convallis. Lorem ipsum dolor sit amet,
+        consectetur adipiscing elit. Phasellus auctor eget odio ut dignissim.
+        Mauris eget velit ut orci vestibulum bibendum. Vestibulum sit amet
+        tincidunt enim.
+      </p>
-    <p>
-      Integer magna mi, consectetur vitae dui tempus, ultricies commodo magna.
-      Morbi aliquet varius enim eget ullamcorper. Vestibulum tristique, risus
-      eget tincidunt tristique, nibh dolor laoreet purus, id viverra mi ipsum
-      eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Vestibulum imperdiet ut ex et convallis. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit. Phasellus auctor eget odio ut dignissim.
-      Mauris eget velit ut orci vestibulum bibendum. Vestibulum sit amet
-      tincidunt enim.
-    </p>
-    <p>
-      Donec eu mauris ac lectus rutrum blandit ut id ante. Phasellus volutpat
-      imperdiet mauris in aliquet. Duis auctor, tellus ac faucibus fermentum,
-      ligula quam hendrerit eros, ut vehicula erat mi non nulla. Fusce odio
-      massa, fermentum eget metus vitae, interdum viverra justo. Nam consequat
-      mauris orci, a rhoncus eros volutpat nec. Nunc iaculis erat efficitur,
-      pulvinar eros vel, commodo ligula. Praesent gravida, ipsum vitae tempus
-      aliquam, mauris elit pharetra sapien, vitae porttitor quam orci quis
-      dolor. Mauris et vulputate enim, et pellentesque libero. Proin cursus
-      malesuada condimentum. Donec scelerisque, quam in fringilla facilisis,
-      nibh sapien varius justo, eget pellentesque erat leo ac lectus. Nulla eu
-      auctor sem. Cras condimentum sem non mauris facilisis imperdiet. Integer
-      eu dolor ipsum. Praesent maximus ornare felis, non faucibus sem
-      porttitor nec.
-    </p>
-    <p>
-      Orci varius natoque penatibus et magnis dis parturient montes, nascetur
-      ridiculus mus. Nunc elementum non urna vel vulputate. Vestibulum vitae
-      felis turpis. Cras id mauris id ligula molestie eleifend. Vivamus in
-      ante at erat rutrum vulputate vel id arcu. Nam luctus sapien sed
-      fermentum fermentum. Ut dolor velit, elementum et metus vel, pretium
-      dapibus lectus. Nulla vulputate pulvinar elit quis convallis. Cras
-      pharetra, eros sit amet blandit ornare, eros odio accumsan urna, nec
-      vestibulum dolor purus nec neque. Phasellus vel quam sed magna vehicula
-      facilisis sit amet non risus. Phasellus libero eros, eleifend ut
-      vulputate non, malesuada sit amet purus. Etiam vel diam facilisis,
-      tempus quam eu, ullamcorper turpis. Duis nec enim ut est rutrum rhoncus.
-      Cras finibus urna at purus accumsan, viverra lacinia nunc faucibus. In
-      facilisis, ex eu commodo luctus, justo nisl hendrerit quam, quis
-      volutpat tellus lectus sit amet enim. Duis laoreet lorem vitae lorem
-      aliquam bibendum.
-    </p>
-  </main>
-  <script type="module" src="/src/index.tsx"></script>
-</body>
+      <p>
+        Donec eu mauris ac lectus rutrum blandit ut id ante. Phasellus volutpat
+        imperdiet mauris in aliquet. Duis auctor, tellus ac faucibus fermentum,
+        ligula quam hendrerit eros, ut vehicula erat mi non nulla. Fusce odio
+        massa, fermentum eget metus vitae, interdum viverra justo. Nam consequat
+        mauris orci, a rhoncus eros volutpat nec. Nunc iaculis erat efficitur,
+        pulvinar eros vel, commodo ligula. Praesent gravida, ipsum vitae tempus
+        aliquam, mauris elit pharetra sapien, vitae porttitor quam orci quis
+        dolor. Mauris et vulputate enim, et pellentesque libero. Proin cursus
+        malesuada condimentum. Donec scelerisque, quam in fringilla facilisis,
+        nibh sapien varius justo, eget pellentesque erat leo ac lectus. Nulla eu
+        auctor sem. Cras condimentum sem non mauris facilisis imperdiet. Integer
+        eu dolor ipsum. Praesent maximus ornare felis, non faucibus sem
+        porttitor nec.
+      </p>
+      <p>
+        Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+        ridiculus mus. Nunc elementum non urna vel vulputate. Vestibulum vitae
+        felis turpis. Cras id mauris id ligula molestie eleifend. Vivamus in
+        ante at erat rutrum vulputate vel id arcu. Nam luctus sapien sed
+        fermentum fermentum. Ut dolor velit, elementum et metus vel, pretium
+        dapibus lectus. Nulla vulputate pulvinar elit quis convallis. Cras
+        pharetra, eros sit amet blandit ornare, eros odio accumsan urna, nec
+        vestibulum dolor purus nec neque. Phasellus vel quam sed magna vehicula
+        facilisis sit amet non risus. Phasellus libero eros, eleifend ut
+        vulputate non, malesuada sit amet purus. Etiam vel diam facilisis,
+        tempus quam eu, ullamcorper turpis. Duis nec enim ut est rutrum rhoncus.
+        Cras finibus urna at purus accumsan, viverra lacinia nunc faucibus. In
+        facilisis, ex eu commodo luctus, justo nisl hendrerit quam, quis
+        volutpat tellus lectus sit amet enim. Duis laoreet lorem vitae lorem
+        aliquam bibendum.
+      </p>
+    </main>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
 </html>

package/lib/App.d.ts CHANGED Viewed

@@ -1,8 +1,20 @@
 import { ConversationHandler, Config } from '@nlxai/chat-core';
 import { ColorMode, WindowSize, Theme, CustomModalityComponent } from './types';
+/**
+ * Main Touchpoint creation properties object
+ */
 export interface Props {
+    /**
+     * Configuration object for Touchpoint
+     */
     config: Config;
+    /**
+     * Optional window size for the chat window, defaults to `half`
+     */
     windowSize?: WindowSize;
+    /**
+     * Optional color mode for the chat window, defaults to `dark`
+     */
     colorMode?: ColorMode;
     /**
      * URL of icon used to display the brand in the chat header
@@ -14,7 +26,13 @@ export interface Props {
      * When set to `false`, no launch button is shown at all. When not set or set to `true`, the default launch icon is rendered.
      */
     launchIcon?: string | boolean;
+    /**
+     * Optional theme object to override default theme values
+     */
     theme?: Partial<Theme>;
+    /**
+     * Optional custom modality components to render in Touchpoint
+     */
     customModalities?: Record<string, CustomModalityComponent<any>>;
 }
 export interface AppRef {

package/lib/components/ui/CustomCard.d.ts CHANGED Viewed

@@ -1,8 +1,20 @@
 import { FC, ReactNode } from 'react';
 import { Icon } from '../ui/Icons';
+/**
+ * Props for the CustomCard component
+ */
 export interface CustomCardProps {
+    /**
+     * Content to be rendered inside the card.
+     */
     children: ReactNode;
+    /**
+     * Whether the card is in a selected state. Used to highlight the card.
+     */
     selected?: boolean;
+    /**
+     * Handler function for when the card is clicked
+     */
     onClick?: () => void;
 }
 export declare const CustomCard: FC<CustomCardProps>;
@@ -10,9 +22,21 @@ export declare const CustomCardImageRow: FC<{
     src: string;
     alt?: string;
 }>;
+/**
+ * Props for the CustomCardRow component
+ */
 export interface CustomCardRowProps {
+    /**
+     * Content to be displayed on the left side of the row
+     */
     left: ReactNode;
+    /**
+     * Content to be displayed on the right side of the row
+     */
     right: ReactNode;
+    /**
+     * Optional icon to be displayed in the center of the row
+     */
     icon?: Icon;
 }
 export declare const CustomCardRow: FC<CustomCardRowProps>;

package/lib/components/ui/DateInput.d.ts CHANGED Viewed

@@ -1,6 +1,12 @@
 import { FC } from 'react';
-interface DateInputProps {
+/**
+ * Props for the DateInput component
+ */
+export interface DateInputProps {
+    /**
+     * Handler function called when the date is submitted
+     * @param date - The submitted date in YYYY-MM-DD format
+     */
     onSubmit?: (date: string) => void;
 }
 export declare const DateInput: FC<DateInputProps>;
-export {};

package/lib/components/ui/IconButton.d.ts CHANGED Viewed

@@ -1,12 +1,38 @@
 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.
+ */
 export type IconButtonType = "main" | "ghost" | "activated" | "coverup" | "overlay";
-interface IconButtonProps {
+/**
+ * Props for the IconButton component
+ */
+export interface IconButtonProps {
+    /**
+     * 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 IconButtonType.
+     */
     type: IconButtonType;
+    /**
+     * Icon component to display inside the button
+     */
     Icon: FC<IconProps>;
 }
 export declare const IconButton: FC<IconButtonProps>;
-export {};

package/lib/components/ui/Icons.d.ts CHANGED Viewed

@@ -1,8 +1,20 @@
 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 Assistant: Icon;

package/lib/components/ui/TextButton.d.ts CHANGED Viewed

@@ -1,11 +1,29 @@
 import { FC } from 'react';
 import { IconProps } from './Icons';
-interface TextButtonProps {
+/**
+ * Props for the TextButton component
+ */
+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>;
 }
 export declare const TextButton: FC<TextButtonProps>;
-export {};

package/lib/index.d.ts CHANGED Viewed

@@ -10,10 +10,33 @@ import * as Icons from "./components/ui/Icons";
 export { default as React } from 'react';
 export declare const html: (strings: TemplateStringsArray, ...values: any[]) => unknown;
 export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, };
+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 Props } from './App';
+export { type ColorMode, type Theme, type WindowSize, type CustomModalityComponent, } from './types';
+/**
+ * Instance of a Touchpoint UI component
+ */
 export interface TouchpointInstance {
+    /**
+     * Controls whether the Touchpoint UI is expanded or collapsed
+     */
     expanded: boolean;
+    /**
+     * The conversation handler instance for interacting with the application
+     */
     conversationHandler: ConversationHandler;
+    /**
+     * Method to remove the Touchpoint UI from the DOM
+     */
     teardown: () => void;
 }
+/**
+ * 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
+ */
 export declare const create: (props: Props) => Promise<TouchpointInstance>;
 export { Container as PreviewContainer } from './preview';