@nlxai/touchpoint-ui 1.1.8-alpha.0 → 1.1.8-alpha.2

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, InitializeConversation, CustomModalityComponent } from '../interface';
 import { ModalitiesWithContext } from '../voice';
 interface Props {
     colorMode: ColorMode;

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/components/defaultModalities/shared.d.ts

@@ -3,10 +3,15 @@ export interface SaveAs {
     type: "slot" | "context";
     id: string;
 }
+export interface CardRow {
+    label: string;
+    value: string;
+}
 export interface CardData {
     id?: string;
     thumbnail?: string;
     thumbnailAlt?: string;
+    rows?: CardRow[];
     label?: string;
     value?: string;
 }

package/lib/index.d.ts

@@ -6,7 +6,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, BidirectionalCustomCommand } from './interface';
 import * as Icons from "./components/ui/Icons";
 export { analyzePageForms, type InteractiveElementInfo, type PageForms, type AccessibilityInformation, } from './bidirectional/analyzePageForms';
 /**
@@ -30,7 +30,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';
+export type { WindowSize, ColorMode, ChoiceMessage, CustomModalityComponent, Theme, InitializeConversation, CustomLaunchButton, Input, InputField, PageState, BidirectionalContext, BidirectionalConfig, TouchpointConfiguration, BidirectionalCustomCommand, } from './interface';
 /**
  * Instance of a Touchpoint UI component
  */
@@ -47,6 +47,59 @@ export interface TouchpointInstance {
      * Method to remove the Touchpoint UI from the DOM
      */
     teardown: () => void;
+    /**
+     * Sets currently available custom bidirectional commands.
+     * This allows you to define custom commands that can be used in the voice bot.
+     * The commands will be available in the voice bot and can be used to trigger actions.
+     *
+     * Example:
+     * ```javascript
+     * client.setCustomBidirectionalCommands([
+     *     {
+     *       action: "Meal",
+     *       description: "add a meal to your flight",
+     *       schema: {
+     *         enum: ["standard", "vegetarian", "vegan", "gluten-free"],
+     *       },
+     *       handler: (value) => {
+     *         console.log("Meal option:", value);
+     *       },
+     *     },
+     *   ]);
+     * ```
+     *
+     * This will allow the voice bot to use the command `Meal` with the value `standard`, `vegetarian`, `vegan`, or `gluten-free`.
+     *
+     * When using more complex arguments, a library such as [Zod](https://zod.dev) can be useful:
+     *
+     * ```javascript
+     * import * as z from "zod/v4";
+     *
+     * const schema = z.object({
+     *   "name": z.string().describe("The customer's name, such as John Doe"),
+     *   "email": z.string().email().describe("The customer's email address"),
+     * });
+     *
+     * client.setCustomBidirectionalCommands([
+     *     {
+     *       action: "Meal",
+     *       description: "add a meal to your flight",
+     *       schema: z.toJSONSchema(schema, {io: "input"}),
+     *       handler: (value) => {
+     *         const result = z.safeParse(schema, value);
+     *         if (result.success) {
+     *           // result.data is now type safe and TypeScript can reason about it
+     *           console.log("Meal option:", result.data);
+     *         } else {
+     *           console.error("Failed to parse Meal option:", result.error);
+     *         }
+     *       },
+     *     },
+     *   ]);
+     * ```
+     * @param commands - A list containing the custom commands to set.
+     */
+    setCustomBidirectionalCommands: (commands: BidirectionalCustomCommand[]) => void;
 }
 /**
  * Creates a new Touchpoint UI instance and appends it to the document body