ai12z 3.7.1-alpha.5 → 3.7.1-alpha.6

package/dist/cjs/{ai12z-bot-35b3fdce.js → ai12z-bot-5f633ca7.js}

@@ -9,6 +9,7 @@ const utils = require('./utils-266a1a10.js');
 const index$1 = require('./index-da6bd623.js');
 const globalStore = require('./global-store-bca518b1.js');
 const ai12zManager = require('./ai12z-manager-76d339ff.js');
+const keyboardShortcuts = require('./keyboard-shortcuts-1dd43e6c.js');
 
 // ILiveAgentProvider.ts
 const envMode = index.Env.DATA_MODE ;
@@ -1320,6 +1321,10 @@ const Ai12zBot = class {
             bubbleText = bubbleText + data;
             // console.log("bubbleText", bubbleText)
             aiMessageBubble.setAttribute("data-bubbleText", bubbleText);
+            aiMessageBubble.setAttribute("aria-label", bubbleText);
+            aiMessageBubble.setAttribute("role", "log");
+            aiMessageBubble.setAttribute("aria-live", "polite");
+            aiMessageBubble.setAttribute("aria-atomic", "false");
             // Assuming data is a string containing the message content
             let html = converter.makeHtml(bubbleText);
             // Append new content to the existing chat bubble
@@ -1513,6 +1518,9 @@ const Ai12zBot = class {
         ;
         this.isRendered = false // Flag to track if the component has been rendered
         ;
+        this.showShortcutsDialog = false // Keyboard shortcuts help dialog
+        ;
+        this.shortcuts = keyboardShortcuts.DEFAULT_SHORTCUTS;
     }
     get mainObject() {
         if (!window["ai12z"]) {
@@ -1522,6 +1530,45 @@ const Ai12zBot = class {
     }
     handleKeyDown(ev) {
         var _a;
+        // console.log("key:", ev.key, "shift?", ev.shiftKey)
+        // Handle keyboard shortcuts dialog - ? key is actually Shift + /
+        if ((ev.key === "?" || (ev.key === "/" && ev.shiftKey)) && !this.isInputFocused()) {
+            ev.preventDefault();
+            this.showShortcutsDialog = !this.showShortcutsDialog;
+            return;
+        }
+        // Close shortcuts dialog with Escape or ?
+        if (this.showShortcutsDialog && (ev.key === "Escape" || ev.key === "?" || (ev.key === "/" && ev.shiftKey))) {
+            ev.preventDefault();
+            this.showShortcutsDialog = false;
+            return;
+        }
+        // Handle Cmd/Ctrl+K for search
+        if (ev.key === "k" && (ev.metaKey || ev.ctrlKey)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            // TODO: Implement search functionality
+            this.action("open");
+            console.log("Open search");
+            return;
+        }
+        // Handle Cmd/Ctrl+H for history
+        if (ev.key === "h" && (ev.metaKey || ev.ctrlKey)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.showHistory = !this.showHistory;
+            this.showWelcomeScreen = false;
+            this.loadConversation();
+            return;
+        }
+        // Handle Cmd/Ctrl+N for new conversation
+        if (ev.key === "n" && (ev.metaKey || ev.ctrlKey)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.handleNewConversation();
+            return;
+        }
+        // Handle Enter key for sending messages
         if (ev.key === "Enter" && !ev.shiftKey) {
             // console.log("down arrow pressed")
             ev.preventDefault();
@@ -1529,6 +1576,32 @@ const Ai12zBot = class {
                 this.handleSend(this.inputEl.value);
             }
         }
+        // Handle Escape to close modals
+        if (ev.key === "Escape") {
+            this.action("minimize");
+            if (this.showPrivacy) {
+                this.showPrivacy = false;
+                ev.preventDefault();
+            }
+        }
+    }
+    isInputFocused() {
+        var _a;
+        const activeElement = ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) || document.activeElement;
+        return (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === "TEXTAREA" || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) === "INPUT";
+    }
+    handleNewConversation() {
+        // Clear messages and start a new conversation
+        this.messages = [];
+        this.conversationId = "";
+        this.showWelcomeScreen = true;
+        this.showHistory = false;
+        this.isOpened = true;
+        // Focus input if available
+        setTimeout(() => {
+            var _a;
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 100);
     }
     buttonClickHandler(event) {
         this.showWelcomeScreen = false;
@@ -2409,6 +2482,10 @@ const Ai12zBot = class {
                 behavior: "smooth",
             });
         }
+        if (this.isOpened) {
+            document.title = this.originalTitle;
+            this.unreadCount = 0;
+        }
     }
     toggleTextarea() {
         // console.log("toggleTextarea", this.showTextarea)
@@ -2608,7 +2685,7 @@ const Ai12zBot = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         if (!this.canRender) {
             return (index.h(index.Host, null, index.h("span", { style: { display: "none" } }, "Failed to load ai12z bot control due to insufficient fund")));
         }
@@ -2646,7 +2723,10 @@ const Ai12zBot = class {
                 }
             }, onToggledChange: (event) => {
                 this.isToggled = event.detail;
-            } })), ((_k = this.botSettings) === null || _k === void 0 ? void 0 : _k.botLogo) && index.h("img", { src: (_l = this.botSettings) === null || _l === void 0 ? void 0 : _l.botLogo, class: "w-8 h-8 rounded-lg", alt: "Bot Logo" }), index.h("h2", { class: "flex-1 pl-2 heading text-body1" }, (_m = this.botSettings) === null || _m === void 0 ? void 0 : _m.botName), index.h("div", { class: "buttons flex gap-2 p-[10px]" }, index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 hidden md:flex bot-btn-primary", tabindex: "0", onClick: () => {
+            } })), ((_k = this.botSettings) === null || _k === void 0 ? void 0 : _k.botLogo) && index.h("img", { src: (_l = this.botSettings) === null || _l === void 0 ? void 0 : _l.botLogo, class: "w-8 h-8 rounded-lg", alt: "Bot Logo" }), index.h("h2", { class: "flex-1 pl-2 heading text-body1" }, (_m = this.botSettings) === null || _m === void 0 ? void 0 : _m.botName), index.h("div", { class: "buttons flex gap-2 p-[10px]" }, index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 bot-btn-primary", tabindex: "0", onClick: (e) => {
+                e.preventDefault();
+                this.showShortcutsDialog = true;
+            }, "aria-label": "Keyboard Shortcuts", title: "Keyboard Shortcuts (Press ? for help)" }, index.h("i", { class: "wes-block wes-icon--loading wes-text-body2 modal-toolbar-icon", title: "Keyboard Shortcuts" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M3 5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V14C21 15.1046 20.1046 16 19 16H13L9 21V16H5C3.89543 16 3 15.1046 3 14V5Z", stroke: "currentColor", "stroke-width": "2" }), index.h("circle", { cx: "12", cy: "10", r: "1", fill: "currentColor" }), index.h("path", { d: "M9 10C9 8.34315 10.3431 7 12 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 hidden md:flex bot-btn-primary", tabindex: "0", onClick: () => {
                 this.isExpanded = !this.isExpanded;
                 this.isAnimated = true;
             }, "aria-label": "Collapse Bot to Side Panel" }, index.h("i", { class: "wes-block wes-icon--loading wes-text-body2 modal-toolbar-icon", title: "Collapse Bot to Side Panel" }, this.isExpanded && (index.h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.215 14.7076H27.692C28.3074 14.7076 28.492 14.0307 27.9997 13.5383L24.9843 10.4614L30.5228 4.86149C30.8305 4.5538 30.8305 3.99995 30.5228 3.69226L28.2459 1.41536C27.9382 1.16921 27.4459 1.16921 27.0767 1.4769L21.5381 7.01532L18.3997 3.99995C17.9073 3.50765 17.2304 3.69226 17.2304 4.30764V13.7845C17.2304 14.2153 17.7843 14.7076 18.215 14.7076ZM13.7847 17.2308H4.30766C3.69227 17.2308 3.50765 17.9077 3.99996 18.4L7.01537 21.4769L1.47686 27.0769C1.16917 27.3846 1.16917 27.9384 1.47686 28.2461L3.75381 30.523C4.0615 30.8307 4.55381 30.8307 4.92305 30.523L10.5231 24.923L13.6616 27.9384C14.0924 28.4923 14.7693 28.3076 14.7693 27.6923V18.2769C14.7693 17.8462 14.2154 17.2308 13.7847 17.2308Z" }))), !this.isExpanded && (index.h("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M30.0308 1.23071H20.4923C19.8769 1.23071 19.6923 1.78455 20.1846 2.27686L23.2 5.29222L17.6615 10.8306C17.3538 11.1383 17.3538 11.6306 17.6615 11.9999L19.9384 14.2768C20.2461 14.5845 20.7384 14.5845 21.1077 14.2768L26.7077 8.67681L29.7231 11.6922C30.2154 12.1845 30.7692 11.9999 30.7692 11.3845V1.90763C30.7692 1.5384 30.4 1.23071 30.0308 1.23071ZM2.15379 30.7692H11.6307C12.2461 30.7692 12.4307 30.0923 11.9384 29.6L8.92303 26.5231L14.4615 20.9231C14.7692 20.6154 14.7692 20.0616 14.4615 19.7539L12.1846 17.477C11.8769 17.1693 11.3846 17.1693 11.0153 17.477L5.47687 23.0154L2.39995 20C1.8461 19.5077 1.23071 19.6923 1.23071 20.3077V29.7846C1.23071 30.2153 1.72302 30.7692 2.15379 30.7692Z" }))))), index.h("button", { class: "rounded-full flex items-center justify-center disabled:cursor-not-allowed bg-transparent hover:bg-blue-95 disabled:bg-transparent disabled:hover:bg-transparent h-6 w-6 bot-btn-primary", "data-testid": "modal-minimize", tabindex: "0", "aria-label": "Minimize", onClick: () => {
@@ -2666,7 +2746,7 @@ const Ai12zBot = class {
                 // const email = ""
                 return (index.h("div", { class: `flex pb-3 gap-x-2 @md:gap-x-3 
                     ${message.isUser ? "self-end" : ""}
-                    ${message.isUser ? "justify-end" : ""} end-user-message message-item`, style: { opacity: "1", transform: "none" }, role: "listitem", tabindex: idx === this.focusedIndex ? 0 : -1, onKeyDown: (e) => this.handleMessageKeyNav(e, idx), ref: el => (this.messageRefs[idx] = el), "aria-label": `Message from ${message.isUser ? "User" : "Bot"}` }, message.isUser && (index.h("div", { class: "flex flex-col items-end" }, index.h("div", { "data-testid": "message", class: "break-words @md:text-body2 box-border @md:pr-4 flex-1 rounded-lg py-2 px-4 user-msg text-body3", innerHTML: message.text, id: message.id }, (_a = message === null || message === void 0 ? void 0 : message.images) === null || _a === void 0 ? void 0 : _a.map(img => {
+                    ${message.isUser ? "justify-end" : ""} end-user-message message-item`, style: { opacity: "1", transform: "none" }, role: "listitem", tabindex: idx === this.focusedIndex ? 0 : -1, onKeyDown: (e) => this.handleMessageKeyNav(e, idx), ref: el => (this.messageRefs[idx] = el), "aria-label": `Message from ${message.isUser ? "User" : "Bot"}` }, message.isUser && (index.h("div", { class: "flex flex-col items-end" }, index.h("div", { "data-testid": "message", class: "break-words @md:text-body2 box-border @md:pr-4 flex-1 rounded-lg py-2 px-4 user-msg text-body3", innerHTML: message.text, id: message.id, "aria-live": "polite", "aria-atomic": "false", "aria-label": message.text, role: "log" }, (_a = message === null || message === void 0 ? void 0 : message.images) === null || _a === void 0 ? void 0 : _a.map(img => {
                     return index.h("img", { src: img, class: "thumbnail", alt: "thumbnail images" });
                 })), index.h("div", { class: "text-gray-30 pt-2 text-right text-body4" }, "Sent ", message.timestamp))), !message.isUser && (index.h("div", { class: "avatar-column" }, index.h("chat-avatar", { id: `la${message.id}`, senderType: (message === null || message === void 0 ? void 0 : message.sender) ? "agent" : "bot", avatarUrl: (_b = this.botSettings) === null || _b === void 0 ? void 0 : _b.botAvatar }))), !message.isUser && (index.h("div", { class: "flex flex-col", style: { width: "100%" } }, index.h("div", { "data-testid": "message", class: {
                         "prose": message.controlType === "form" ? false : true,
@@ -2701,9 +2781,11 @@ const Ai12zBot = class {
                 }
                 // Force a re-render by updating the state
                 this.imagesBase64List = [...this.imagesBase64List];
-            } }, "\u00D7")))))), index.h("label", { htmlFor: "message-input", class: "sr-only" }, "Your message"), index.h("textarea", { id: "message-input", "aria-describedby": "message-hint", class: `resize-none overflow-hidden text-ellipsis focus:outline-none w-full custom-input ${this.hideAllButtons ? "hidden" : ""}`, "data-testid": "user-input-textarea", rows: this.rowCount, name: "userMessage", placeholder: this.isLiveAgent
+            } }, "\u00D7")))))), index.h("label", { htmlFor: "message-input", class: "sr-only" }, "Your message"), index.h("textarea", { id: "message-input", "aria-describedby": "message-hint", "aria-placeholder": this.isLiveAgent
+                ? "Type a message to the agent..."
+                : (((_r = this.botSettings) === null || _r === void 0 ? void 0 : _r.botPlaceholderText) !== "" ? (_s = this.botSettings) === null || _s === void 0 ? void 0 : _s.botPlaceholderText : "Ask me anything"), "aria-label": "Type your message here", class: `resize-none overflow-hidden text-ellipsis focus:outline-none w-full custom-input ${this.hideAllButtons ? "hidden" : ""}`, "data-testid": "user-input-textarea", rows: this.rowCount, name: "userMessage", placeholder: this.isLiveAgent
                 ? "Type a message to the agent..."
-                : ((_s = (_r = this.botSettings) === null || _r === void 0 ? void 0 : _r.botPlaceholderText) !== null && _s !== void 0 ? _s : "Ask me anything"),
+                : (((_t = this.botSettings) === null || _t === void 0 ? void 0 : _t.botPlaceholderText) !== "" ? (_u = this.botSettings) === null || _u === void 0 ? void 0 : _u.botPlaceholderText : "Ask me anything"),
             // placeholder={this.botSettings?.botPlaceholderText ?? "Ask me anything"}
             // aria-labelledby="message-submit"
             ref: el => (this.inputEl = el), onKeyUp: _e => {
@@ -2760,8 +2842,10 @@ const Ai12zBot = class {
             }, onClick: () => {
                 this.openChat();
             }
-        }, this.isBot && index.h("slot", { name: "bot" }), !this.isBot && (index.h("button", { class: "rounded-full flex cursor-pointer items-center pr-[14px]  md:gap-x-3 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-focused bot-btn-primary", tabindex: "0", "aria-label": "open Bot" }, index.h("div", { class: "w-10 h-10 flex items-center justify-center bg-white rounded-full border relative" }, this.botSettings.botLaunchIcon && index.h("img", { src: this.botSettings.botLaunchIcon, alt: "bot icon", class: "w-8 h-8 rounded-lg" }), !this.botSettings.botLaunchIcon && (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#2095ae" }, index.h("g", { "stroke-width": "0" }), index.h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("g", null, " ", index.h("path", { d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "#2095ae", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), " ")))), index.h("span", { class: "bot-name" }, "Ask ", (_t = this.botSettings) === null || _t === void 0 ? void 0 :
-            _t.botName))))))));
+        }, this.isBot && index.h("slot", { name: "bot" }), !this.isBot && (index.h("button", { class: "rounded-full flex cursor-pointer items-center pr-[14px]  md:gap-x-3 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-focused bot-btn-primary", tabindex: "0", "aria-label": "open Bot" }, index.h("div", { class: "w-10 h-10 flex items-center justify-center bg-white rounded-full border relative" }, this.botSettings.botLaunchIcon && index.h("img", { src: this.botSettings.botLaunchIcon, alt: "bot icon", class: "w-8 h-8 rounded-lg" }), !this.botSettings.botLaunchIcon && (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "#2095ae" }, index.h("g", { "stroke-width": "0" }), index.h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("g", null, " ", index.h("path", { d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "#2095ae", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), " ")))), index.h("span", { class: "bot-name" }, "Ask ", (_v = this.botSettings) === null || _v === void 0 ? void 0 :
+            _v.botName)))))), index.h("keyboard-shortcuts-dialog", { show: this.showShortcutsDialog, shortcuts: this.shortcuts, onCloseDialog: () => {
+                this.showShortcutsDialog = false;
+            } })));
     }
     get el() { return index.getElement(this); }
 };
@@ -2769,4 +2853,4 @@ Ai12zBot.style = Ai12zBotStyle0 + (Ai12zBotStyle1 + (Ai12zBotStyle2 + Ai12zBotSt
 
 exports.Ai12zBot = Ai12zBot;
 
-//# sourceMappingURL=ai12z-bot-35b3fdce.js.map
+//# sourceMappingURL=ai12z-bot-5f633ca7.js.map