@blockspark/chat-widget 1.0.15 → 1.0.17

package/dist/{core/stateManager.esm.js → ChatWidget-DKfLes8T.js}

@@ -1,5 +1,5 @@
-import { createDialogflowSession, sendDialogflowMessage } from "../services/dialogflowClient.esm.js";
-import { createChatService, ChatResolvedError } from "../services/chatService.esm.js";
+import { ref, computed, onUnmounted, watch, defineComponent, nextTick, onMounted, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, withModifiers, createCommentVNode, createTextVNode, Fragment, renderList, normalizeClass } from "vue";
+import { c as createChatService, a as createDialogflowSession, C as ChatResolvedError, s as sendDialogflowMessage, b as safeLinkifyText } from "./sanitize-O18C3eqP.js";
 class WidgetStateManager {
   constructor(config) {
     this.listeners = /* @__PURE__ */ new Set();
@@ -909,7 +909,453 @@ class WidgetStateManager {
     this.listeners.clear();
   }
 }
+function useChatWidget(config) {
+  const manager = new WidgetStateManager(config);
+  const state = ref(manager.getState());
+  const wsConnected = ref(false);
+  const agentTyping = ref(false);
+  const currentAgent = ref({ name: "Agent" });
+  const isConnectingToAgent = ref(false);
+  const unsubscribe = manager.subscribe((newState) => {
+    state.value = { ...newState };
+    const additional = manager.getAdditionalState();
+    wsConnected.value = additional.wsConnected;
+    agentTyping.value = additional.agentTyping;
+    currentAgent.value = additional.currentAgent;
+    isConnectingToAgent.value = additional.isConnectingToAgent;
+  });
+  const isOpen = computed(() => state.value.isOpen);
+  const messages = computed(() => state.value.messages);
+  const isLoading = computed(() => state.value.isLoading);
+  const error = computed(() => state.value.error);
+  const chatMode = computed(() => state.value.chatMode);
+  const openChat = async () => {
+    await manager.openChat();
+  };
+  const closeChat = () => {
+    manager.closeChat();
+  };
+  const sendMessage = async (text) => {
+    await manager.sendMessage(text);
+  };
+  const toggleChat = async () => {
+    await manager.toggleChat();
+  };
+  const setInputValue = (value) => {
+    manager.setInputValue(value);
+  };
+  const clearError = () => {
+    manager.clearError();
+  };
+  onUnmounted(() => {
+    unsubscribe();
+    manager.destroy();
+  });
+  watch(
+    () => config,
+    (newConfig) => {
+      manager.updateConfig(newConfig);
+    },
+    { deep: true }
+  );
+  return {
+    state,
+    isOpen,
+    messages,
+    isLoading,
+    error,
+    chatMode,
+    wsConnected,
+    agentTyping,
+    currentAgent,
+    isConnectingToAgent,
+    openChat,
+    closeChat,
+    sendMessage,
+    toggleChat,
+    setInputValue,
+    clearError,
+    manager
+  };
+}
+const _hoisted_1 = { class: "custom-welcome-header" };
+const _hoisted_2 = { class: "custom-welcome-title" };
+const _hoisted_3 = { class: "custom-welcome-message" };
+const _hoisted_4 = { class: "custom-welcome-cta" };
+const _hoisted_5 = {
+  key: 2,
+  class: "custom-chat-window"
+};
+const _hoisted_6 = { class: "custom-chat-header" };
+const _hoisted_7 = { class: "custom-chat-header-content" };
+const _hoisted_8 = { class: "custom-chat-title" };
+const _hoisted_9 = { class: "custom-chat-subtitle" };
+const _hoisted_10 = {
+  key: 0,
+  class: "custom-mode-indicator"
+};
+const _hoisted_11 = {
+  key: 0,
+  class: "custom-mode-badge"
+};
+const _hoisted_12 = {
+  key: 1,
+  class: "custom-agent-info"
+};
+const _hoisted_13 = { class: "custom-agent-name" };
+const _hoisted_14 = {
+  key: 2,
+  class: "custom-mode-badge"
+};
+const _hoisted_15 = {
+  key: 0,
+  class: "custom-chat-empty"
+};
+const _hoisted_16 = {
+  key: 1,
+  class: "custom-chat-empty"
+};
+const _hoisted_17 = ["innerHTML"];
+const _hoisted_18 = {
+  key: 0,
+  class: "custom-chips-container"
+};
+const _hoisted_19 = {
+  key: 0,
+  class: "custom-chips-group"
+};
+const _hoisted_20 = ["onClick"];
+const _hoisted_21 = {
+  key: 0,
+  class: "custom-chips-group"
+};
+const _hoisted_22 = ["onClick"];
+const _hoisted_23 = { class: "custom-message-time" };
+const _hoisted_24 = {
+  key: 2,
+  class: "custom-message custom-message-bot"
+};
+const _hoisted_25 = {
+  key: 3,
+  class: "custom-message custom-message-bot"
+};
+const _hoisted_26 = {
+  key: 4,
+  class: "custom-agent-typing-indicator"
+};
+const _hoisted_27 = ["value", "placeholder", "disabled"];
+const _hoisted_28 = ["disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+    // We handle attrs manually via v-bind="$attrs"
+  },
+  __name: "ChatWidget",
+  props: {
+    dfProjectId: {},
+    dfLocation: {},
+    dfAgentId: {},
+    serviceAccountKey: {},
+    accessToken: {},
+    languageCode: {},
+    backendBaseUrl: {},
+    backendWsUrl: {},
+    title: { default: "💬 BlockSpark AI Assistant" },
+    subtitle: { default: "We're here to help" },
+    welcomeTitle: { default: "👋 Welcome to BlockSpark" },
+    welcomeMessage: { default: "My name is BlockSpark AI Assistant and I'll guide you." },
+    welcomeCta: { default: "💬 Click here to start chatting!" },
+    showWelcomePopup: { type: Boolean, default: true },
+    welcomePopupDelay: { default: 1500 },
+    fallbackWelcomeMessage: { default: "Hello! I'm BlockSpark AI Assistant. How can I help you today?" },
+    inputPlaceholder: { default: "Type your message..." },
+    emptyStateMessage: { default: "Hi! I'm BlockSpark AI Assistant. How can I help you today?" },
+    debug: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      state,
+      isOpen,
+      messages,
+      isLoading,
+      error,
+      chatMode,
+      wsConnected,
+      agentTyping,
+      currentAgent,
+      isConnectingToAgent: isConnectingToAgentFromComposable,
+      openChat,
+      closeChat,
+      sendMessage,
+      toggleChat,
+      setInputValue,
+      clearError,
+      manager
+    } = useChatWidget(props);
+    const messagesEndRef = ref(null);
+    const messagesContainer = ref(null);
+    const config = computed(() => props);
+    const isInitializing = computed(() => {
+      return state.value.isLoading && state.value.messages.length === 0 && !state.value.sessionId;
+    });
+    const isStartingNewChat = computed(() => {
+      return false;
+    });
+    const isConnectingToAgent = isConnectingToAgentFromComposable;
+    watch(
+      () => messages.value.length,
+      () => {
+        nextTick(() => {
+          messagesEndRef.value?.scrollIntoView({ behavior: "smooth" });
+        });
+      }
+    );
+    const handleOpenChat = async () => {
+      if (!state.value.isOpen) {
+        state.value.isOpen = true;
+        state.value.showWelcomePopup = false;
+      }
+      await openChat();
+    };
+    const handleCloseChat = () => {
+      closeChat();
+    };
+    const handleCloseWelcomePopup = () => {
+      manager.closeWelcomePopup();
+    };
+    const handleInput = (event) => {
+      const target = event.target;
+      setInputValue(target.value);
+    };
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      if (state.value.inputValue.trim()) {
+        await sendMessage(state.value.inputValue);
+      }
+    };
+    const handleChipClick = async (chipText, payload) => {
+      const messageToSend = chipText || payload || "";
+      await sendMessage(messageToSend);
+    };
+    const formatTime = (date) => {
+      return date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    };
+    const isHandoffMessage = (text) => {
+      return text.includes("👤") || text.includes("being connected") || text.includes("live support agent") || text.includes("transfer your conversation");
+    };
+    onMounted(() => {
+      if (config.value.showWelcomePopup && typeof window !== "undefined") {
+        manager.initializeWelcomePopup();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({ class: "custom-chat-widget" }, _ctx.$attrs), [
+        unref(state).showWelcomePopup && !unref(state).isOpen ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "custom-welcome-popup",
+          onClick: handleOpenChat
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, toDisplayString(config.value.welcomeTitle), 1),
+            createElementVNode("button", {
+              class: "custom-close-popup",
+              onClick: withModifiers(handleCloseWelcomePopup, ["stop"]),
+              "aria-label": "Close welcome popup"
+            }, " × ")
+          ]),
+          createElementVNode("div", _hoisted_3, toDisplayString(config.value.welcomeMessage), 1),
+          createElementVNode("div", _hoisted_4, toDisplayString(config.value.welcomeCta), 1)
+        ])) : createCommentVNode("", true),
+        !unref(state).isOpen ? (openBlock(), createElementBlock("button", {
+          key: 1,
+          class: "custom-chat-toggle-btn",
+          onClick: handleOpenChat,
+          "aria-label": "Open chat"
+        }, [..._cache[0] || (_cache[0] = [
+          createElementVNode("svg", {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [
+            createElementVNode("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+          ], -1)
+        ])])) : createCommentVNode("", true),
+        unref(state).isOpen ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("div", _hoisted_8, toDisplayString(config.value.title), 1),
+              createElementVNode("div", _hoisted_9, [
+                createTextVNode(toDisplayString(config.value.subtitle) + " ", 1),
+                unref(state).chatMode === "human" ? (openBlock(), createElementBlock("span", _hoisted_10, " • " + toDisplayString(unref(wsConnected) ? "🟢 Connected" : "🟡 Connecting..."), 1)) : createCommentVNode("", true)
+              ]),
+              unref(state).chatMode === "human" ? (openBlock(), createElementBlock("div", _hoisted_11, " Human Support Mode ")) : createCommentVNode("", true),
+              unref(state).chatMode === "human" ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                _cache[1] || (_cache[1] = createElementVNode("span", { class: "custom-agent-label" }, "Agent:", -1)),
+                createElementVNode("span", _hoisted_13, toDisplayString(unref(currentAgent).name), 1)
+              ])) : createCommentVNode("", true),
+              unref(state).chatMode === "ai" ? (openBlock(), createElementBlock("div", _hoisted_14, " Bot Mode ")) : createCommentVNode("", true)
+            ]),
+            createElementVNode("button", {
+              class: "custom-chat-close-btn",
+              onClick: handleCloseChat,
+              "aria-label": "Close chat"
+            }, " × ")
+          ]),
+          createElementVNode("div", {
+            class: "custom-chat-messages",
+            ref_key: "messagesContainer",
+            ref: messagesContainer
+          }, [
+            isInitializing.value && unref(state).messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_15, [..._cache[2] || (_cache[2] = [
+              createElementVNode("div", { class: "custom-typing-indicator" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1),
+              createElementVNode("p", null, "Initializing chat...", -1)
+            ])])) : !isInitializing.value && unref(state).messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_16, [
+              _cache[3] || (_cache[3] = createElementVNode("div", { class: "custom-chat-empty-icon" }, "👋", -1)),
+              createElementVNode("p", null, toDisplayString(config.value.emptyStateMessage), 1)
+            ])) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(state).messages, (message) => {
+              return openBlock(), createElementBlock("div", {
+                key: message.id,
+                class: normalizeClass([
+                  "custom-message",
+                  `custom-message-${message.sender}`,
+                  { "custom-handoff-message": isHandoffMessage(message.text) }
+                ])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(["custom-message-content", { "custom-handoff-content": isHandoffMessage(message.text) }]),
+                  innerHTML: unref(safeLinkifyText)(message.text).replace(/\n/g, "<br>")
+                }, null, 10, _hoisted_17),
+                message.richContent && Array.isArray(message.richContent) && message.richContent.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_18, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(message.richContent, (contentGroup, groupIndex) => {
+                    return openBlock(), createElementBlock(Fragment, { key: groupIndex }, [
+                      !Array.isArray(contentGroup) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        contentGroup.type === "chips" && contentGroup.options ? (openBlock(), createElementBlock("div", _hoisted_19, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(contentGroup.options, (chip, chipIndex) => {
+                            return openBlock(), createElementBlock("button", {
+                              key: chipIndex,
+                              class: "custom-chip-button",
+                              type: "button",
+                              onClick: ($event) => handleChipClick(chip.text, chip.payload)
+                            }, toDisplayString(chip.text), 9, _hoisted_20);
+                          }), 128))
+                        ])) : createCommentVNode("", true)
+                      ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(contentGroup, (content, contentIndex) => {
+                        return openBlock(), createElementBlock(Fragment, {
+                          key: `${groupIndex}-${contentIndex}`
+                        }, [
+                          content.type === "chips" && content.options ? (openBlock(), createElementBlock("div", _hoisted_21, [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(content.options, (chip, chipIndex) => {
+                              return openBlock(), createElementBlock("button", {
+                                key: chipIndex,
+                                class: "custom-chip-button",
+                                type: "button",
+                                onClick: ($event) => handleChipClick(chip.text, chip.payload)
+                              }, toDisplayString(chip.text), 9, _hoisted_22);
+                            }), 128))
+                          ])) : createCommentVNode("", true)
+                        ], 64);
+                      }), 128))
+                    ], 64);
+                  }), 128))
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_23, toDisplayString(formatTime(message.timestamp)), 1)
+              ], 2);
+            }), 128)),
+            unref(state).isLoading ? (openBlock(), createElementBlock("div", _hoisted_24, [..._cache[4] || (_cache[4] = [
+              createElementVNode("div", { class: "custom-typing-indicator" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1)
+            ])])) : createCommentVNode("", true),
+            unref(isConnectingToAgent) ? (openBlock(), createElementBlock("div", _hoisted_25, [..._cache[5] || (_cache[5] = [
+              createElementVNode("div", { class: "custom-typing-indicator" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1),
+              createElementVNode("div", { class: "custom-message-content" }, " Connecting to agent... ", -1)
+            ])])) : createCommentVNode("", true),
+            unref(state).chatMode === "human" && unref(agentTyping) ? (openBlock(), createElementBlock("div", _hoisted_26, [..._cache[6] || (_cache[6] = [
+              createElementVNode("span", { class: "custom-typing-dots" }, [
+                createElementVNode("span"),
+                createElementVNode("span"),
+                createElementVNode("span")
+              ], -1),
+              createElementVNode("span", { class: "custom-typing-text" }, "Agent is typing...", -1)
+            ])])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              ref_key: "messagesEndRef",
+              ref: messagesEndRef
+            }, null, 512)
+          ], 512),
+          createElementVNode("form", {
+            class: "custom-chat-input-form",
+            onSubmit: withModifiers(handleSubmit, ["prevent"])
+          }, [
+            createElementVNode("input", {
+              type: "text",
+              class: "custom-chat-input",
+              value: unref(state).inputValue,
+              onInput: handleInput,
+              placeholder: config.value.inputPlaceholder,
+              disabled: unref(state).isLoading || isInitializing.value || isStartingNewChat.value
+            }, null, 40, _hoisted_27),
+            createElementVNode("button", {
+              type: "submit",
+              class: "custom-chat-send-btn",
+              disabled: !unref(state).inputValue.trim() || unref(state).isLoading || isInitializing.value || isStartingNewChat.value
+            }, [..._cache[7] || (_cache[7] = [
+              createElementVNode("svg", {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, [
+                createElementVNode("line", {
+                  x1: "22",
+                  y1: "2",
+                  x2: "11",
+                  y2: "13"
+                }),
+                createElementVNode("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+              ], -1)
+            ])], 8, _hoisted_28)
+          ], 32)
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const ChatWidgetComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0d32fcf4"]]);
 export {
-  WidgetStateManager
+  ChatWidgetComponent as C,
+  WidgetStateManager as W,
+  useChatWidget as u
 };
-//# sourceMappingURL=stateManager.esm.js.map
+//# sourceMappingURL=ChatWidget-DKfLes8T.js.map