@xapp/stentor-chat-widget 1.82.1 → 1.85.1

package/lib/ActionBar.d.ts

@@ -0,0 +1,287 @@
+/*! Copyright (c) 2021, XAPPmedia */
+/**
+ * Types of buttons available in the Action Bar
+ */
+export type ActionBarButtonType = "chat" | "form" | "schedule" | "phone" | "email" | "url" | "help" | "payment";
+/**
+ * Available built-in icons for Action Bar buttons.
+ * Can be used independently of button type via the `icon` property.
+ * Matches the GraphQL schema ActionBarIconType enum.
+ */
+export type ActionBarIconType = "calendar" | "chat" | "custom" | "email" | "help" | "link" | "payment" | "phone" | "form" | "schedule" | "url";
+/**
+ * Visibility configuration for responsive display
+ */
+export type ActionBarButtonVisibility = "all" | "mobile-only" | "desktop-only";
+/**
+ * Horizontal positioning for the action bar on desktop/tablet
+ */
+export type ActionBarPosition = "left" | "center" | "right";
+/**
+ * Base configuration shared by all button types
+ */
+export interface ActionBarButtonBase {
+    /**
+     * Unique identifier for the button
+     */
+    readonly id: string;
+    /**
+     * The type of action this button performs
+     */
+    readonly type: ActionBarButtonType;
+    /**
+     * Optional label text to display below the icon.
+     * When undefined, only the icon is shown.
+     */
+    readonly label?: string;
+    /**
+     * Override the default icon with a different built-in icon.
+     * This allows using any icon regardless of button type.
+     * Takes precedence over type-based icon, but iconUrl takes precedence over this.
+     */
+    readonly icon?: ActionBarIconType;
+    /**
+     * Custom icon URL. If not provided, a default icon for the button type is used.
+     * Takes precedence over both `icon` and type-based icon.
+     */
+    readonly iconUrl?: string;
+    /**
+     * Control which devices show this button.
+     * @default "all"
+     */
+    readonly visibility?: ActionBarButtonVisibility;
+    /**
+     * Tab index for keyboard navigation accessibility.
+     */
+    readonly tabIndex?: number;
+}
+/**
+ * Chat button - opens the chat widget (existing behavior)
+ */
+export interface ActionBarChatButton extends ActionBarButtonBase {
+    readonly type: "chat";
+}
+/**
+ * Form configuration for dedicated form-widget instance
+ */
+export interface ActionBarFormConfig {
+    readonly api: {
+        readonly url: string;
+        readonly key?: string;
+    };
+    readonly intentId?: string;
+    readonly autoGreeting?: string;
+    readonly googleMapsApiKey?: string;
+    readonly mapsBaseUrl?: string;
+}
+/**
+ * Form button configuration - opens form-widget in a modal overlay.
+ * Supports two modes:
+ * 1. Dedicated form config (formConfig) - uses separate API/settings
+ * 2. Shared chat-widget settings (intentId) - leverages existing connection
+ */
+export interface ActionBarFormButton extends ActionBarButtonBase {
+    readonly type: "form";
+    /**
+     * Dedicated form widget configuration.
+     * When provided, the form operates independently with its own API settings.
+     */
+    readonly formConfig?: ActionBarFormConfig;
+    /**
+     * Intent ID to trigger when using shared chat-widget connection.
+     * Used when formConfig is not provided.
+     */
+    readonly intentId?: string;
+    /**
+     * Auto-greeting query when using shared chat-widget connection.
+     * Used when formConfig is not provided.
+     */
+    readonly autoGreeting?: string;
+    /**
+     * Label of a chip to auto-select after the form loads.
+     * If the first step of the form contains chips, the form will
+     * automatically click the chip matching this label.
+     */
+    readonly preselectChipLabel?: string;
+}
+/**
+ * Schedule/Book button configuration - opens form-widget for scheduling.
+ * Uses the same form-widget infrastructure but with a calendar-themed icon.
+ * Supports two modes:
+ * 1. Dedicated form config (formConfig) - uses separate API/settings
+ * 2. Shared chat-widget settings (intentId) - leverages existing connection
+ */
+export interface ActionBarScheduleButton extends ActionBarButtonBase {
+    readonly type: "schedule";
+    /**
+     * Dedicated form widget configuration.
+     * When provided, the form operates independently with its own API settings.
+     */
+    readonly formConfig?: ActionBarFormConfig;
+    /**
+     * Intent ID to trigger when using shared chat-widget connection.
+     * Used when formConfig is not provided.
+     */
+    readonly intentId?: string;
+    /**
+     * Auto-greeting query when using shared chat-widget connection.
+     * Used when formConfig is not provided.
+     */
+    readonly autoGreeting?: string;
+    /**
+     * Label of a chip to auto-select after the form loads.
+     * If the first step of the form contains chips, the form will
+     * automatically click the chip matching this label.
+     */
+    readonly preselectChipLabel?: string;
+}
+/**
+ * Phone button - click-to-call with tel: link
+ */
+export interface ActionBarPhoneButton extends ActionBarButtonBase {
+    readonly type: "phone";
+    /**
+     * Phone number to call (will be formatted as tel: link)
+     */
+    readonly phoneNumber: string;
+}
+/**
+ * Email button - click-to-email with mailto: link
+ */
+export interface ActionBarEmailButton extends ActionBarButtonBase {
+    readonly type: "email";
+    /**
+     * Email address (will be formatted as mailto: link)
+     */
+    readonly emailAddress: string;
+    /**
+     * Optional subject line for the email
+     */
+    readonly subject?: string;
+    /**
+     * Optional body text for the email
+     */
+    readonly body?: string;
+}
+/**
+ * Help button - links to documentation or help center
+ * Uses the URL button infrastructure with a help-themed icon
+ */
+export interface ActionBarHelpButton extends ActionBarButtonBase {
+    readonly type: "help";
+    /**
+     * URL to the help center or documentation
+     */
+    readonly url: string;
+    /**
+     * How the URL should be opened
+     * @default "newTab"
+     */
+    readonly target?: ActionBarUrlTarget;
+}
+/**
+ * Payment button - links to payment portal
+ * Uses the URL button infrastructure with a payment-themed icon
+ */
+export interface ActionBarPaymentButton extends ActionBarButtonBase {
+    readonly type: "payment";
+    /**
+     * URL to the payment portal
+     */
+    readonly url: string;
+    /**
+     * How the URL should be opened
+     * @default "newTab"
+     */
+    readonly target?: ActionBarUrlTarget;
+}
+/**
+ * URL target behavior type
+ */
+export type ActionBarUrlTarget = "sameWindow" | "newWindow" | "newTab";
+/**
+ * URL button - opens an arbitrary hyperlink
+ */
+export interface ActionBarUrlButton extends ActionBarButtonBase {
+    readonly type: "url";
+    /**
+     * URL to open when clicked
+     */
+    readonly url: string;
+    /**
+     * How the URL should be opened
+     * @default "newTab"
+     */
+    readonly target?: ActionBarUrlTarget;
+    /**
+     * Window dimensions when target is "newWindow"
+     */
+    readonly windowOptions?: {
+        readonly width?: number;
+        readonly height?: number;
+    };
+}
+/**
+ * Union type of all button configurations
+ */
+export type ActionBarButton = ActionBarChatButton | ActionBarFormButton | ActionBarScheduleButton | ActionBarPhoneButton | ActionBarEmailButton | ActionBarUrlButton | ActionBarHelpButton | ActionBarPaymentButton;
+/**
+ * Main Action Bar configuration.
+ * When enabled, replaces the default ChatButton with a configurable dock
+ * of action buttons.
+ */
+export interface ActionBarConfig {
+    /**
+     * Enable the action bar (replaces ChatButton when true)
+     * @default false
+     */
+    readonly enabled: boolean;
+    /**
+     * Array of buttons to display in the action bar.
+     * Buttons are rendered in order from left to right.
+     */
+    readonly buttons: readonly ActionBarButton[];
+    /**
+     * Horizontal position of the action bar on desktop/tablet.
+     * On mobile, the bar is always full-width at the bottom.
+     * @default "right"
+     */
+    readonly position?: ActionBarPosition;
+    /**
+     * Screen width breakpoint (in pixels) below which mobile layout is applied.
+     * @default 768
+     */
+    readonly mobileBreakpoint?: number;
+}
+/**
+ * Type guard for ActionBarChatButton
+ */
+export declare function isActionBarChatButton(button: ActionBarButton): button is ActionBarChatButton;
+/**
+ * Type guard for ActionBarFormButton
+ */
+export declare function isActionBarFormButton(button: ActionBarButton): button is ActionBarFormButton;
+/**
+ * Type guard for ActionBarScheduleButton
+ */
+export declare function isActionBarScheduleButton(button: ActionBarButton): button is ActionBarScheduleButton;
+/**
+ * Type guard for ActionBarPhoneButton
+ */
+export declare function isActionBarPhoneButton(button: ActionBarButton): button is ActionBarPhoneButton;
+/**
+ * Type guard for ActionBarUrlButton
+ */
+export declare function isActionBarUrlButton(button: ActionBarButton): button is ActionBarUrlButton;
+/**
+ * Type guard for ActionBarEmailButton
+ */
+export declare function isActionBarEmailButton(button: ActionBarButton): button is ActionBarEmailButton;
+/**
+ * Type guard for ActionBarHelpButton
+ */
+export declare function isActionBarHelpButton(button: ActionBarButton): button is ActionBarHelpButton;
+/**
+ * Type guard for ActionBarPaymentButton
+ */
+export declare function isActionBarPaymentButton(button: ActionBarButton): button is ActionBarPaymentButton;

package/lib/ActionBar.js

@@ -0,0 +1,60 @@
+"use strict";
+/*! Copyright (c) 2021, XAPPmedia */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isActionBarChatButton = isActionBarChatButton;
+exports.isActionBarFormButton = isActionBarFormButton;
+exports.isActionBarScheduleButton = isActionBarScheduleButton;
+exports.isActionBarPhoneButton = isActionBarPhoneButton;
+exports.isActionBarUrlButton = isActionBarUrlButton;
+exports.isActionBarEmailButton = isActionBarEmailButton;
+exports.isActionBarHelpButton = isActionBarHelpButton;
+exports.isActionBarPaymentButton = isActionBarPaymentButton;
+/**
+ * Type guard for ActionBarChatButton
+ */
+function isActionBarChatButton(button) {
+    return button.type === "chat";
+}
+/**
+ * Type guard for ActionBarFormButton
+ */
+function isActionBarFormButton(button) {
+    return button.type === "form";
+}
+/**
+ * Type guard for ActionBarScheduleButton
+ */
+function isActionBarScheduleButton(button) {
+    return button.type === "schedule";
+}
+/**
+ * Type guard for ActionBarPhoneButton
+ */
+function isActionBarPhoneButton(button) {
+    return button.type === "phone";
+}
+/**
+ * Type guard for ActionBarUrlButton
+ */
+function isActionBarUrlButton(button) {
+    return button.type === "url";
+}
+/**
+ * Type guard for ActionBarEmailButton
+ */
+function isActionBarEmailButton(button) {
+    return button.type === "email";
+}
+/**
+ * Type guard for ActionBarHelpButton
+ */
+function isActionBarHelpButton(button) {
+    return button.type === "help";
+}
+/**
+ * Type guard for ActionBarPaymentButton
+ */
+function isActionBarPaymentButton(button) {
+    return button.type === "payment";
+}
+//# sourceMappingURL=ActionBar.js.map

package/lib/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","sourceRoot":"","sources":["../src/ActionBar.ts"],"names":[],"mappings":";AAAA,oCAAoC;;AAwSpC,sDAEC;AAKD,sDAEC;AAKD,8DAEC;AAKD,wDAEC;AAKD,oDAEC;AAKD,wDAEC;AAKD,sDAEC;AAKD,4DAEC;AAtDD;;GAEG;AACH,SAAgB,qBAAqB,CAAC,MAAuB;IACzD,OAAO,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC;AAClC,CAAC;AAED;;GAEG;AACH,SAAgB,qBAAqB,CAAC,MAAuB;IACzD,OAAO,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC;AAClC,CAAC;AAED;;GAEG;AACH,SAAgB,yBAAyB,CAAC,MAAuB;IAC7D,OAAO,MAAM,CAAC,IAAI,KAAK,UAAU,CAAC;AACtC,CAAC;AAED;;GAEG;AACH,SAAgB,sBAAsB,CAAC,MAAuB;IAC1D,OAAO,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC;AACnC,CAAC;AAED;;GAEG;AACH,SAAgB,oBAAoB,CAAC,MAAuB;IACxD,OAAO,MAAM,CAAC,IAAI,KAAK,KAAK,CAAC;AACjC,CAAC;AAED;;GAEG;AACH,SAAgB,sBAAsB,CAAC,MAAuB;IAC1D,OAAO,MAAM,CAAC,IAAI,KAAK,OAAO,CAAC;AACnC,CAAC;AAED;;GAEG;AACH,SAAgB,qBAAqB,CAAC,MAAuB;IACzD,OAAO,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC;AAClC,CAAC;AAED;;GAEG;AACH,SAAgB,wBAAwB,CAAC,MAAuB;IAC5D,OAAO,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC;AACrC,CAAC"}

package/lib/WidgetEnv.d.ts

@@ -1,6 +1,7 @@
 /*! Copyright (c) 2021, XAPPmedia */
 import type { ReactNode } from "react";
 import { Response } from "stentor-models";
+import { ActionBarConfig } from "./ActionBar";
 import { WidgetTheme } from "./WidgetTheme";
 import { ChatUserInfo } from "./UserInfo";
 export interface CtaConfig {
@@ -223,6 +224,17 @@ export interface WidgetEnv extends WidgetEnvDeprecated {
      * In React Native, defaults to true in development mode (__DEV__).
      */
     readonly enableErrorOverlay?: boolean;
+    /**
+     * Optional key for the form-widget. When provided, the form-widget script
+     * will be pre-loaded from https://form.xapp.ai/xapp-form-widget.js?key={formWidgetKey}
+     * This enables the Form and Schedule buttons in the ActionBar to open the form widget.
+     */
+    readonly formWidgetKey?: string;
+    /**
+     * Action Bar configuration. When enabled, replaces the default ChatButton
+     * with a configurable dock of action buttons (Chat, Form, Phone, URL).
+     */
+    readonly actionBar?: ActionBarConfig;
 }
 export interface WidgetAutoOpenOnPattern {
     readonly patterns?: string[];

package/lib/WidgetTheme.d.ts

@@ -40,6 +40,8 @@ export interface WidgetTheme {
     readonly border?: WidgetBorderTheme;
     /** Widget call-to-action styling  */
     readonly cta?: WidgetCtaTheme;
+    /** Widget action bar styling */
+    readonly actionBar?: WidgetActionBarTheme;
 }
 export interface WidgetMenuTheme {
     readonly item?: WidgetMenuItemTheme;
@@ -163,3 +165,43 @@ export interface WidgetBrandingTheme {
 export interface WidgetTextTypingStatusTheme {
     readonly text?: WidgetTextTheme;
 }
+/**
+ * Action bar container theme
+ */
+export interface WidgetActionBarTheme {
+    /** Background color/style of the action bar container */
+    readonly background?: WidgetBackgroundTheme;
+    /** Border styling for the action bar */
+    readonly border?: WidgetBorderTheme;
+    /** Padding around the action bar */
+    readonly padding?: WidgetPaddingsTheme;
+    /** Margin around the action bar (desktop only) */
+    readonly margin?: WidgetMarginsTheme;
+    /** Box shadow for elevation effect */
+    readonly boxShadow?: string;
+    /** Border radius for the action bar */
+    readonly borderRadius?: string;
+    /** Button styling within the action bar */
+    readonly button?: WidgetActionBarButtonTheme;
+}
+/**
+ * Action bar button theme
+ */
+export interface WidgetActionBarButtonTheme {
+    /** Background color/style for buttons */
+    readonly background?: WidgetBackgroundTheme;
+    /** Background on hover */
+    readonly hoverBackground?: WidgetBackgroundTheme;
+    /** Icon size */
+    readonly iconSize?: WidgetSizeTheme;
+    /** Icon color */
+    readonly iconColor?: string;
+    /** Label text styling */
+    readonly label?: WidgetTextTheme;
+    /** Spacing between buttons */
+    readonly gap?: string;
+    /** Button border radius */
+    readonly borderRadius?: string;
+    /** Button padding */
+    readonly padding?: WidgetPaddingsTheme;
+}

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 /*! Copyright (c) 2021, XAPPmedia */
+export * from "./ActionBar";
 export * from "./ChannelData";
 export * from "./Constants";
 export * from "./Types";

package/lib/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /*! Copyright (c) 2021, XAPPmedia */
+__exportStar(require("./ActionBar"), exports);
 __exportStar(require("./ChannelData"), exports);
 __exportStar(require("./Constants"), exports);
 __exportStar(require("./Types"), exports);

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oCAAoC;AACpC,gDAA8B;AAC9B,8CAA4B;AAC5B,0CAAwB;AACxB,6CAA2B;AAC3B,8CAA4B;AAC5B,gDAA8B;AAC9B,2CAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oCAAoC;AACpC,8CAA4B;AAC5B,gDAA8B;AAC9B,8CAA4B;AAC5B,0CAAwB;AACxB,6CAA2B;AAC3B,8CAA4B;AAC5B,gDAA8B;AAC9B,2CAAyB"}

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "1.82.1",
+    "version": "1.85.1",
     "description": "Chat Widget channel for stentor",
     "types": "lib/index",
     "main": "lib/index",
@@ -24,13 +24,13 @@
         "mocha": "9.2.2",
         "sinon": "13.0.2",
         "sinon-chai": "3.7.0",
-        "stentor-models": "1.67.0",
+        "stentor-models": "1.68.6",
         "ts-node": "10.9.2",
         "typescript": "5.9.3"
     },
     "dependencies": {
-        "stentor-constants": "1.67.0",
-        "stentor-guards": "1.67.0"
+        "stentor-constants": "1.68.6",
+        "stentor-guards": "1.68.6"
     },
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
@@ -40,5 +40,5 @@
         "build": "tsc -d true -p .",
         "clean": "rm -rf ./lib/*"
     },
-    "gitHead": "568eaf1518bfe2aa4dc0f8f14effd0616c2cb63a"
+    "gitHead": "5c99ab44e56acebb675aede84a8cc5a42a37f051"
 }