@nlxai/touchpoint-ui 1.1.8-alpha.1 → 1.1.8-alpha.3

package/index.html

@@ -90,6 +90,7 @@
     </main>
     <script type="module">
       import { create, html } from "/src/index.tsx";
+      import * as z from "zod/v4";
 
       const CustomLaunchButton = ({ className, onClick }) => {
         return html`
@@ -134,19 +135,50 @@
       };
 
       const touchpoint = await create({
+        // https://dev.platform.nlx.ai/applications/fe041de0-bc87-4120-a6db-443ab1107ad3 in the dev workspace
         config: {
           applicationUrl:
-            "https://bots.dev.studio.nlx.ai/c/CBuQ3LpsClG5EQoSObVkK/IPzJitiaN8qtJFL3Wz1Jp",
+            "https://bots.dev.studio.nlx.ai/c/XeHWunu1RQOVcVzKIQoo5/cKdh8IsqmA0syks0R9oBh",
           headers: {
-            "nlx-api-key": "m3kVBd9QeCc5bXInhWIPG3ns",
+            "nlx-api-key": "8afGyqKJoObPj4g-UFNUc65s",
           },
-          userId: "1234-5678",
+          userId: "sdk-test-user",
           languageCode: "en-US",
         },
-        input: "voice",
+        input: "voiceMini",
         launchIcon: CustomLaunchButton,
-        initializeConversation: () => {},
+        bidirectional: {
+          custom(action, payload) {
+            console.log("Custom bidirectional action:", action, payload);
+          },
+          customizeAutomaticContext(arg) {
+            console.log("Customizing automatic context with arg:", arg);
+            arg.context.uri = "foo";
+            return arg;
+          },
+        },
       });
+
+      touchpoint.setCustomBidirectionalCommands([
+        {
+          action: "burger",
+          description: "Order a hamburger",
+          schema: z.object({
+            type: z
+              .enum(["cheeseburger", "veggieburger", "hamburger"])
+              .describe("Which variety of burger to order"),
+            count: z
+              .number()
+              .min(1)
+              .max(200)
+              .default(1)
+              .describe("How many burgers to order"),
+          }),
+          handler: (burgerType) => {
+            console.log("Custom command executed with args:", burgerType);
+          },
+        },
+      ]);
     </script>
   </body>
 </html>

package/lib/App.d.ts

@@ -1,4 +1,5 @@
 import { ConversationHandler } from '@nlxai/core';
+import { BidirectionalCustomCommand } from './interface';
 import { NormalizedTouchpointConfiguration } from './types';
 /**
  * Main Touchpoint creation properties object
@@ -13,6 +14,7 @@ export interface AppRef {
     setExpanded: (val: boolean) => void;
     getExpanded: () => boolean;
     getConversationHandler: () => ConversationHandler;
+    setCustomBidirectionalCommands: (commands: BidirectionalCustomCommand[]) => void;
 }
 declare const App: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<AppRef>>;
 export default App;

package/lib/bidirectional/automaticContext.d.ts

@@ -1,5 +1,12 @@
 import { ConversationHandler } from '@nlxai/core';
-export declare const gatherAutomaticContext: (handler: ConversationHandler, setPageState: (state: {
-    formElements: any;
-    links: Record<string, string>;
-}) => void) => (() => void);
+import { BidirectionalContext, BidirectionalCustomCommand, PageState } from '../interface';
+export declare const gatherAutomaticContext: (handler: ConversationHandler, customCommands: BidirectionalCustomCommand[], override: (arg: {
+    context: BidirectionalContext;
+    state: PageState;
+}) => {
+    context: BidirectionalContext;
+    state: PageState;
+}, setPageState: (state: PageState) => void) => {
+    teardown: () => void;
+    onCustomCommandsChange: (commands: BidirectionalCustomCommand[]) => void;
+};

package/lib/bidirectional/commandHandler.d.ts

@@ -1,8 +1,5 @@
 import { ConversationHandler } from '@nlxai/core';
-import { BidirectionalConfig } from '../types';
+import { PageState, BidirectionalConfig } from '../interface';
 export declare const commandHandler: (handler: ConversationHandler, bidirectional: BidirectionalConfig, pageState: {
-    current: {
-        formElements: Record<string, Element>;
-        links: Record<string, string>;
-    };
+    current: PageState;
 }) => () => void;

package/lib/components/FullscreenVoice.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Context, ConversationHandler } from '@nlxai/core';
-import { ColorMode, InitializeConversation, CustomModalityComponent } from '../types';
+import { ColorMode, CustomModalityComponent } from '../interface';
 import { ModalitiesWithContext } from '../voice';
 interface Props {
     colorMode: ColorMode;
@@ -9,7 +9,6 @@ interface Props {
     brandIcon?: string;
     className?: string;
     context?: Context;
-    initializeConversation: InitializeConversation;
     customModalities?: Record<string, CustomModalityComponent<unknown>>;
 }
 export declare const VoiceModalities: FC<{

package/lib/components/Header.d.ts

@@ -1,5 +1,5 @@
 import { SetStateAction, Dispatch, FC } from 'react';
-import { WindowSize, ColorMode } from '../types';
+import { WindowSize, ColorMode } from '../interface';
 interface HeaderProps {
     windowSize: WindowSize | "embedded";
     colorMode: ColorMode;

package/lib/components/Messages.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Response, ConversationHandler, ApplicationMessage } from '@nlxai/core';
-import { CustomModalityComponent, ColorMode } from '../types';
+import { CustomModalityComponent, ColorMode } from '../interface';
 export interface MessagesProps {
     isWaiting: boolean;
     handler: ConversationHandler;

package/lib/components/Theme.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { ColorMode, Theme } from '../types';
+import { ColorMode, Theme } from '../interface';
 export declare const CustomPropertiesContainer: FC<{
     colorMode: ColorMode;
     className?: string;

package/lib/components/VoiceMini.d.ts

@@ -1,6 +1,6 @@
 import { Context, ConversationHandler } from '@nlxai/core';
 import { FC } from 'react';
-import { CustomModalityComponent } from '../types';
+import { CustomModalityComponent } from '../interface';
 export declare const VoiceMini: FC<{
     customModalities: Record<string, CustomModalityComponent<unknown>>;
     handler: ConversationHandler;

package/lib/components/defaultModalities/DefaultCard.d.ts

@@ -1,3 +1,3 @@
-import { CustomModalityComponent } from '../../types';
+import { CustomModalityComponent } from '../../interface';
 import { CardData } from './shared';
 export declare const DefaultCard: CustomModalityComponent<CardData>;

package/lib/components/defaultModalities/DefaultCarousel.d.ts

@@ -1,4 +1,4 @@
-import { CustomModalityComponent } from '../../types';
+import { CustomModalityComponent } from '../../interface';
 import { SaveAs, CardData } from './shared';
 export declare const DefaultCarousel: CustomModalityComponent<{
     cards: CardData[];

package/lib/components/defaultModalities/DefaultDateInput.d.ts

@@ -1,5 +1,5 @@
 import { SaveAs } from './shared';
-import { CustomModalityComponent } from '../../types';
+import { CustomModalityComponent } from '../../interface';
 export declare const DefaultDateInput: CustomModalityComponent<{
     $saveAs: SaveAs;
 }>;

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import { ConversationHandler } from '@nlxai/core';
 import { TextButton } from './components/ui/TextButton';
 import { IconButton } from './components/ui/IconButton';
 import { Ripple } from './components/Ripple';
@@ -6,7 +5,7 @@ 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 } from './types';
+import { TouchpointConfiguration, TouchpointInstance } from './interface';
 import * as Icons from "./components/ui/Icons";
 export { analyzePageForms, type InteractiveElementInfo, type PageForms, type AccessibilityInformation, } from './bidirectional/analyzePageForms';
 /**
@@ -30,24 +29,7 @@ export { type CustomCardProps, type CustomCardRowProps, } from './components/ui/
 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 InitializeConversation, type ColorMode, type Input, type Theme, type WindowSize, type CustomModalityComponent, type TouchpointConfiguration, type CustomLaunchButton, type BidirectionalConfig, } 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;
-}
+export type { WindowSize, ColorMode, ChoiceMessage, CustomModalityComponent, Theme, InitializeConversation, CustomLaunchButton, Input, InputField, PageState, BidirectionalContext, BidirectionalConfig, TouchpointConfiguration, BidirectionalCustomCommand, TouchpointInstance, } from './interface';
 /**
  * Creates a new Touchpoint UI instance and appends it to the document body
  * @param props - Configuration props for Touchpoint