@mptransformation/omisdk 0.1.1

package/dist/omisdk.es.js

@@ -0,0 +1,786 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var AppEventType = /* @__PURE__ */ ((AppEventType2) => {
+  AppEventType2["READY"] = "ready";
+  AppEventType2["DISPLAY_CHANGED"] = "display_changed";
+  AppEventType2["BUBBLE_HIDDEN"] = "bubble_hidden";
+  AppEventType2["BUBBLE_SHOWN"] = "bubble_shown";
+  AppEventType2["LOGGED_IN"] = "logged_in";
+  AppEventType2["LOGGED_OUT"] = "logged_out";
+  AppEventType2["TOKEN_EXPIRED"] = "token_expired";
+  AppEventType2["ERROR"] = "error";
+  return AppEventType2;
+})(AppEventType || {});
+function createElement(tag, attributes = {}, children = []) {
+  const element = document.createElement(tag);
+  Object.entries(attributes).forEach(([key, value]) => {
+    element.setAttribute(key, value);
+  });
+  children.forEach((child) => {
+    if (typeof child === "string") {
+      element.appendChild(document.createTextNode(child));
+    } else {
+      element.appendChild(child);
+    }
+  });
+  return element;
+}
+function getElementById(id) {
+  return document.getElementById(id);
+}
+function createStyleElement(css, id) {
+  const style = document.createElement("style");
+  style.textContent = css;
+  if (id) {
+    style.id = id;
+  }
+  return style;
+}
+function addStyleToDocument(css, id) {
+  const style = createStyleElement(css, id);
+  document.head.appendChild(style);
+  return style;
+}
+function removeElement(element) {
+  if (element && element.parentNode) {
+    element.parentNode.removeChild(element);
+  }
+}
+var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
+  LogLevel2["DEBUG"] = "debug";
+  LogLevel2["INFO"] = "info";
+  LogLevel2["WARN"] = "warn";
+  LogLevel2["ERROR"] = "error";
+  return LogLevel2;
+})(LogLevel || {});
+const DEFAULT_CONFIG = {
+  enabled: false,
+  level: "info",
+  prefix: "[OmiSDK]"
+};
+class Logger {
+  /**
+   * Creates a new Logger instance
+   * @param config Logger configuration
+   */
+  constructor(config = {}) {
+    __publicField(this, "config");
+    this.config = { ...DEFAULT_CONFIG, ...config };
+  }
+  /**
+   * Updates the logger configuration
+   * @param config New configuration
+   */
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+  /**
+   * Logs a debug message
+   * @param message Message to log
+   * @param args Additional arguments
+   */
+  debug(message, ...args) {
+    this.log("debug", message, ...args);
+  }
+  /**
+   * Logs an info message
+   * @param message Message to log
+   * @param args Additional arguments
+   */
+  info(message, ...args) {
+    this.log("info", message, ...args);
+  }
+  /**
+   * Logs a warning message
+   * @param message Message to log
+   * @param args Additional arguments
+   */
+  warn(message, ...args) {
+    this.log("warn", message, ...args);
+  }
+  /**
+   * Logs an error message
+   * @param message Message to log
+   * @param args Additional arguments
+   */
+  error(message, ...args) {
+    this.log("error", message, ...args);
+  }
+  /**
+   * Internal log method
+   * @param level Log level
+   * @param message Message to log
+   * @param args Additional arguments
+   */
+  log(level, message, ...args) {
+    if (!this.config.enabled) return;
+    const logLevels = Object.values(LogLevel);
+    const configLevelIndex = logLevels.indexOf(this.config.level);
+    const messageLevelIndex = logLevels.indexOf(level);
+    if (messageLevelIndex < configLevelIndex) return;
+    const formattedMessage = `${this.config.prefix} ${message}`;
+    switch (level) {
+      case "debug":
+        console.debug(formattedMessage, ...args);
+        break;
+      case "info":
+        console.info(formattedMessage, ...args);
+        break;
+      case "warn":
+        console.warn(formattedMessage, ...args);
+        break;
+      case "error":
+        console.error(formattedMessage, ...args);
+        break;
+    }
+  }
+}
+const DEFAULT_THEME = {
+  primaryColor: "#3498db",
+  secondaryColor: "#2ecc71",
+  textColor: "#333333",
+  backgroundColor: "#ffffff",
+  fontFamily: "Arial, sans-serif",
+  borderRadius: "4px",
+  customClasses: {}
+};
+function generateThemeCSS(theme, namespace) {
+  const mergedTheme = { ...DEFAULT_THEME, ...theme };
+  return `
+    .${namespace} {
+      --primary-color: ${mergedTheme.primaryColor};
+      --secondary-color: ${mergedTheme.secondaryColor};
+      --text-color: ${mergedTheme.textColor};
+      --background-color: ${mergedTheme.backgroundColor};
+      --font-family: ${mergedTheme.fontFamily};
+      --border-radius: ${mergedTheme.borderRadius};
+      
+      font-family: var(--font-family);
+      color: var(--text-color);
+      background-color: var(--background-color);
+    }
+    
+    .${namespace} .btn {
+      background-color: var(--primary-color);
+      color: white;
+      border: none;
+      border-radius: var(--border-radius);
+      padding: 8px 16px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+    }
+    
+    .${namespace} .btn:hover {
+      background-color: var(--secondary-color);
+    }
+    
+    .${namespace} .container {
+      border-radius: var(--border-radius);
+      border: 1px solid #e0e0e0;
+      padding: 16px;
+      margin: 8px 0;
+    }
+    
+    .${namespace} .header {
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+    
+    ${Object.entries(mergedTheme.customClasses || {}).map(([className, css]) => `.${namespace} .${className} { ${css} }`).join("\n")}
+  `;
+}
+function applyTheme(theme, namespace) {
+  const css = generateThemeCSS(theme, namespace);
+  const styleId = `${namespace}-theme`;
+  const existingStyle = document.getElementById(styleId);
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+  return addStyleToDocument(css, styleId);
+}
+class SimpleEventEmitter {
+  constructor() {
+    __publicField(this, "events", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Subscribe to an event
+   * @param eventName Event name
+   * @param callback Callback function
+   */
+  on(eventName, callback) {
+    if (!this.events.has(eventName)) {
+      this.events.set(eventName, []);
+    }
+    this.events.get(eventName).push(callback);
+  }
+  /**
+   * Unsubscribe from an event
+   * @param eventName Event name
+   * @param callback Callback function
+   */
+  off(eventName, callback) {
+    if (!this.events.has(eventName)) {
+      return;
+    }
+    const callbacks = this.events.get(eventName);
+    const index = callbacks.indexOf(callback);
+    if (index !== -1) {
+      callbacks.splice(index, 1);
+    }
+    if (callbacks.length === 0) {
+      this.events.delete(eventName);
+    }
+  }
+  /**
+   * Emit an event
+   * @param eventName Event name
+   * @param data Event data
+   */
+  emit(eventName, data) {
+    if (!this.events.has(eventName)) {
+      return;
+    }
+    const callbacks = this.events.get(eventName);
+    for (const callback of callbacks) {
+      try {
+        callback(data);
+      } catch (error) {
+        console.error(`Error in event listener for "${eventName}":`, error);
+      }
+    }
+  }
+}
+const BUBBLE_CSS = `
+  .sdk-bubble {
+    position: fixed;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 9999;
+  }
+
+  .sdk-bubble:hover {
+    transform: scale(1.1);
+    background-color: var(--secondary-color);
+  }
+
+  .sdk-bubble-icon {
+    width: 30px;
+    height: 30px;
+    fill: white;
+  }
+
+  .sdk-bubble-content {
+    position: fixed;
+    width: 300px;
+    max-height: 400px;
+    background-color: var(--background-color);
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    display: none;
+    flex-direction: column;
+    z-index: 9998;
+  }
+
+  .sdk-bubble-content.active {
+    display: flex;
+  }
+
+  .sdk-bubble-header {
+    padding: 12px 16px;
+    background-color: var(--primary-color);
+    color: white;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .sdk-bubble-close {
+    cursor: pointer;
+    font-size: 18px;
+  }
+
+  .sdk-bubble-body {
+    padding: 16px;
+    overflow-y: auto;
+    flex-grow: 1;
+  }
+
+  .sdk-bubble-footer {
+    padding: 12px 16px;
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: flex-end;
+  }
+`;
+const BUBBLE_POSITIONS = {
+  "top-left": { top: "20px", left: "20px" },
+  "top-right": { top: "20px", right: "20px" },
+  "bottom-left": { bottom: "20px", left: "20px" },
+  "bottom-right": { bottom: "20px", right: "20px" }
+};
+const CONTENT_POSITIONS = {
+  "top-left": { top: "90px", left: "20px" },
+  "top-right": { top: "90px", right: "20px" },
+  "bottom-left": { bottom: "90px", left: "20px" },
+  "bottom-right": { bottom: "90px", right: "20px" }
+};
+class BubbleUI {
+  /**
+   * Creates a new BubbleUI instance
+   * @param container Container element
+   * @param theme Theme options
+   */
+  constructor(container, theme = {}) {
+    __publicField(this, "container");
+    __publicField(this, "bubble", null);
+    __publicField(this, "content", null);
+    __publicField(this, "isOpen", false);
+    __publicField(this, "theme");
+    __publicField(this, "position");
+    this.container = container;
+    this.theme = theme;
+    this.position = theme.bubblePosition || "bottom-right";
+  }
+  /**
+   * Creates and renders the bubble UI
+   */
+  render() {
+    this.bubble = createElement("div", { class: "sdk-bubble" });
+    const bubblePosition = BUBBLE_POSITIONS[this.position];
+    Object.entries(bubblePosition).forEach(([key, value]) => {
+      this.bubble.style[key] = value;
+    });
+    if (this.theme.primaryColor) {
+      this.bubble.style.setProperty("--primary-color", this.theme.primaryColor);
+    }
+    if (this.theme.secondaryColor) {
+      this.bubble.style.setProperty(
+        "--secondary-color",
+        this.theme.secondaryColor
+      );
+    }
+    const icon = this.createBubbleIcon();
+    this.bubble.appendChild(icon);
+    this.content = this.createContentContainer();
+    this.bubble.addEventListener("click", () => this.toggleContent());
+    this.container.appendChild(this.bubble);
+    this.container.appendChild(this.content);
+  }
+  /**
+   * Updates the bubble UI with new content
+   * @param title Content title
+   * @param body Content body
+   */
+  updateContent(title, body) {
+    if (!this.content) return;
+    const headerText = this.content.querySelector(".sdk-bubble-header-text");
+    if (headerText) {
+      headerText.textContent = title;
+    }
+    const bodyElement = this.content.querySelector(".sdk-bubble-body");
+    if (bodyElement) {
+      bodyElement.innerHTML = body;
+    }
+  }
+  /**
+   * Shows the bubble UI
+   */
+  show() {
+    if (this.bubble) {
+      this.bubble.style.display = "flex";
+    }
+  }
+  /**
+   * Hides the bubble UI
+   */
+  hide() {
+    if (this.bubble) {
+      this.bubble.style.display = "none";
+    }
+    this.closeContent();
+  }
+  /**
+   * Destroys the bubble UI
+   */
+  destroy() {
+    if (this.bubble && this.bubble.parentNode) {
+      this.bubble.parentNode.removeChild(this.bubble);
+    }
+    if (this.content && this.content.parentNode) {
+      this.content.parentNode.removeChild(this.content);
+    }
+    this.bubble = null;
+    this.content = null;
+  }
+  /**
+   * Creates the bubble icon
+   * @returns The bubble icon element
+   */
+  createBubbleIcon() {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "sdk-bubble-icon");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute(
+      "d",
+      "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"
+    );
+    svg.appendChild(path);
+    return svg;
+  }
+  /**
+   * Creates the content container
+   * @returns The content container element
+   */
+  createContentContainer() {
+    const content = createElement("div", {
+      class: "sdk-bubble-content"
+    });
+    const contentPosition = CONTENT_POSITIONS[this.position];
+    Object.entries(contentPosition).forEach(([key, value]) => {
+      content.style[key] = value;
+    });
+    const header = createElement("div", {
+      class: "sdk-bubble-header"
+    });
+    const headerText = createElement(
+      "div",
+      { class: "sdk-bubble-header-text" },
+      ["SDK"]
+    );
+    const closeButton = createElement(
+      "div",
+      { class: "sdk-bubble-close" },
+      ["×"]
+    );
+    closeButton.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.closeContent();
+    });
+    header.appendChild(headerText);
+    header.appendChild(closeButton);
+    const body = createElement(
+      "div",
+      { class: "sdk-bubble-body" },
+      ["SDK content goes here."]
+    );
+    const footer = createElement("div", {
+      class: "sdk-bubble-footer"
+    });
+    content.appendChild(header);
+    content.appendChild(body);
+    content.appendChild(footer);
+    return content;
+  }
+  /**
+   * Toggles the content visibility
+   */
+  toggleContent() {
+    if (this.isOpen) {
+      this.closeContent();
+    } else {
+      this.openContent();
+    }
+  }
+  /**
+   * Opens the content
+   */
+  openContent() {
+    if (!this.content) return;
+    this.content.classList.add("active");
+    this.isOpen = true;
+  }
+  /**
+   * Closes the content
+   */
+  closeContent() {
+    if (!this.content) return;
+    this.content.classList.remove("active");
+    this.isOpen = false;
+  }
+  /**
+   * Gets the bubble CSS
+   * @returns The bubble CSS
+   */
+  static getCSS() {
+    return BUBBLE_CSS;
+  }
+}
+const DEFAULT_OPTIONS = {
+  targetElementId: "omi-sdk-container",
+  mode: "bubble",
+  debug: false
+};
+const SDK_NAMESPACE = "OmiSDK";
+const SDK_VERSION = "0.1.0";
+class OmiSDK {
+  /**
+   * Creates a new SDK instance
+   * @param options SDK options
+   */
+  constructor(options = {}) {
+    __publicField(this, "options");
+    __publicField(this, "container", null);
+    __publicField(this, "logger");
+    __publicField(this, "initialized", false);
+    __publicField(this, "styleElement", null);
+    __publicField(this, "eventEmitter");
+    __publicField(this, "bubbleUI", null);
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+    this.logger = new Logger({
+      enabled: !!this.options.debug,
+      prefix: "[OmiSDK]",
+      level: LogLevel.DEBUG
+    });
+    this.eventEmitter = new SimpleEventEmitter();
+  }
+  login(_) {
+    return Promise.resolve({ success: true, message: "Logged in" });
+  }
+  loginSSO(_) {
+    return Promise.resolve({ success: true, message: "Logged in" });
+  }
+  logout() {
+    return Promise.resolve({ success: true, message: "Logged out" });
+  }
+  makeCall(_) {
+    return Promise.resolve({ success: true, message: "Call made" });
+  }
+  hangup() {
+    return Promise.resolve({ success: true, message: "Call hung up" });
+  }
+  answerCall(_) {
+    return Promise.resolve({ success: true, message: "Call answered" });
+  }
+  rejectCall() {
+    return Promise.resolve({ success: true, message: "Call rejected" });
+  }
+  hold() {
+    return Promise.resolve({ success: true, message: "Held" });
+  }
+  unhold() {
+    return Promise.resolve({ success: true, message: "Unheld" });
+  }
+  mute() {
+    return Promise.resolve({ success: true, message: "Muted" });
+  }
+  unmute() {
+    return Promise.resolve({ success: true, message: "Unmuted" });
+  }
+  cameraOn() {
+    return Promise.resolve({ success: true, message: "Camera on" });
+  }
+  cameraOff() {
+    return Promise.resolve({ success: true, message: "Camera off" });
+  }
+  transfer(_) {
+    return Promise.resolve({ success: true, message: "Call transferred" });
+  }
+  changeAgentStatus(_) {
+    return Promise.resolve({ success: true, message: "Agent status changed" });
+  }
+  getAgentStatus() {
+    return Promise.resolve({ success: true, message: "Agent status" });
+  }
+  hideBubble() {
+    var _a;
+    (_a = this.bubbleUI) == null ? void 0 : _a.hide();
+    return Promise.resolve({ success: true, message: "Bubble hidden" });
+  }
+  showBubble() {
+    var _a;
+    (_a = this.bubbleUI) == null ? void 0 : _a.show();
+    return Promise.resolve({ success: true, message: "Bubble shown" });
+  }
+  on(eventName, callback) {
+    this.eventEmitter.on(eventName, callback);
+  }
+  off(eventName, callback) {
+    this.eventEmitter.off(eventName, callback);
+  }
+  /**
+   * Initializes the SDK
+   * @param options SDK options
+   */
+  init(options = {}) {
+    if (this.initialized) {
+      this.logger.warn("SDK is already initialized");
+      return;
+    }
+    this.updateOptions(options);
+    this.logger.debug("Initializing SDK with options:", this.options);
+    try {
+      const targetId = this.options.targetElementId || DEFAULT_OPTIONS.targetElementId;
+      let targetElement = getElementById(targetId);
+      if (!targetElement) {
+        this.logger.debug(
+          `Target element with ID "${targetId}" not found, creating it`
+        );
+        targetElement = createElement("div", { id: targetId });
+        document.body.appendChild(targetElement);
+      }
+      this.container = createElement("div", {
+        class: SDK_NAMESPACE,
+        "data-version": SDK_VERSION,
+        "data-mode": this.options.mode || DEFAULT_OPTIONS.mode
+      });
+      targetElement.appendChild(this.container);
+      if (this.options.theme) {
+        this.styleElement = applyTheme(this.options.theme, SDK_NAMESPACE);
+      }
+      this.initializeUI();
+      this.initialized = true;
+      this.logger.info("SDK initialized successfully");
+      setTimeout(() => {
+        this.eventEmitter.emit("AppEvent", {
+          name: "ready",
+          type: AppEventType.READY,
+          message: "SDK initialized successfully",
+          timestamp: Date.now()
+        });
+      }, 0);
+    } catch (error) {
+      this.logger.error("Failed to initialize SDK:", error);
+      this.eventEmitter.emit("AppEvent", {
+        name: "error",
+        type: AppEventType.ERROR,
+        message: "Failed to initialize SDK",
+        error,
+        timestamp: Date.now()
+      });
+    }
+  }
+  /**
+   * Destroys the SDK instance
+   */
+  destroy() {
+    if (!this.initialized) {
+      this.logger.warn("SDK is not initialized");
+      return;
+    }
+    this.logger.debug("Destroying SDK");
+    try {
+      if (this.bubbleUI) {
+        this.bubbleUI.destroy();
+        this.bubbleUI = null;
+      }
+      if (this.container) {
+        removeElement(this.container);
+        this.container = null;
+      }
+      if (this.styleElement) {
+        removeElement(this.styleElement);
+        this.styleElement = null;
+      }
+      this.initialized = false;
+      this.logger.info("SDK destroyed successfully");
+    } catch (error) {
+      this.logger.error("Failed to destroy SDK:", error);
+      this.eventEmitter.emit("AppEvent", {
+        name: "error",
+        type: AppEventType.ERROR,
+        message: "Failed to destroy SDK",
+        error,
+        timestamp: Date.now()
+      });
+    }
+  }
+  /**
+   * Updates SDK options
+   * @param options New options
+   */
+  updateOptions(options) {
+    const previousMode = this.options.mode;
+    this.options = { ...this.options, ...options };
+    this.logger.updateConfig({
+      enabled: !!this.options.debug
+    });
+    this.logger.debug("Options updated:", this.options);
+    if (this.initialized && this.options.theme) {
+      this.styleElement = applyTheme(this.options.theme, SDK_NAMESPACE);
+    }
+    if (this.initialized && previousMode !== this.options.mode) {
+      this.initializeUI();
+    }
+  }
+  /**
+   * Gets the SDK version
+   * @returns SDK version
+   */
+  getVersion() {
+    return SDK_VERSION;
+  }
+  /**
+   * Gets the current SDK options
+   * @returns SDK options
+   */
+  getOptions() {
+    return { ...this.options };
+  }
+  /**
+   * Initializes the UI based on the mode
+   */
+  initializeUI() {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    if (this.bubbleUI) {
+      this.bubbleUI.destroy();
+      this.bubbleUI = null;
+    }
+    if (this.options.mode === "bubble") {
+      const bubbleCSS = BubbleUI.getCSS();
+      addStyleToDocument(bubbleCSS, `${SDK_NAMESPACE}-bubble-style`);
+      this.bubbleUI = new BubbleUI(this.container, this.options.theme);
+      this.bubbleUI.render();
+      this.bubbleUI.updateContent("SDK", "Connected and ready to use.");
+    } else {
+      this.logger.debug("SDK initialized in headless mode");
+      const existingStyle = document.getElementById(
+        `${SDK_NAMESPACE}-bubble-style`
+      );
+      if (existingStyle && existingStyle.parentNode) {
+        existingStyle.parentNode.removeChild(existingStyle);
+      }
+    }
+  }
+}
+const sdkInstance = new OmiSDK();
+document.addEventListener("DOMContentLoaded", () => {
+  const scriptTag = document.querySelector("script[data-auto-init]");
+  if (scriptTag) {
+    const options = {};
+    const targetElementId = scriptTag.getAttribute("data-target-element-id");
+    if (targetElementId) {
+      options.targetElementId = targetElementId;
+    }
+    const mode = scriptTag.getAttribute("data-mode");
+    if (mode && (mode === "none" || mode === "bubble")) {
+      options.mode = mode;
+    }
+    const baseUrl = scriptTag.getAttribute("data-base-url");
+    if (baseUrl) {
+      options.baseUrl = baseUrl;
+    }
+    const debug = scriptTag.getAttribute("data-debug") === "true";
+    if (debug) {
+      options.debug = debug;
+    }
+    sdkInstance.init(options);
+  }
+});
+export {
+  OmiSDK,
+  sdkInstance as default
+};
+//# sourceMappingURL=omisdk.es.js.map