@94ai/softphone 5.0.10 → 5.0.12

package/html-softphone-demo/embed-ui/softphone.js

@@ -0,0 +1,465 @@
+class SoftphoneManager {
+
+  id
+  timer
+
+  constructor() {
+    /**
+     * 隔离链接实例
+     */
+    this.id = generateUUID()
+  }
+
+  option = {
+    origin: 'ai-softphone',
+    ancestorOrigin: 'nf-softphone',
+    destinationOrigin: '*',
+
+    scrollview: undefined,
+    scrollingText: '正在滚动中...',
+
+    envMap: {
+      test: 'http://softphone.test.k8s.com',
+      dev: 'http://softphone.dev.k8s.com',
+      sg: 'https://seat.teleai.com',
+      gray: 'http://softphone.gray.94ai.com',
+      prod: 'https://seat.94ai.com',
+    },
+    env: 'prod',
+    selector: undefined,
+    el: undefined,
+
+    agentId: undefined,
+    agentTag: undefined,
+    appKey: undefined,
+    appSecret: undefined,
+
+    sgGateway: undefined,
+    sgBase: undefined,
+    sgOpen: undefined,
+    sgDomain: undefined,
+
+    timestamp: undefined,
+    sign: undefined,
+
+    extStatus: '0',
+
+    callShow: '1',
+    transferToLaborShow: '1',
+    restShow: '1',
+    networkDetectShow: '1',
+    muteShow: '1',
+    logShow: '1',
+    timingShow: '1',
+    signShow: '1',
+
+    instanceMap: {},
+
+    softphoneConnectCallBack: () => {console.log('softphone-connect')},
+    softphoneCallRefreshCallBack: () => {console.log('softphone-call-refresh')},
+    softphoneSeatStatusChangeCallBack: () => {console.log('softphone-seats-status-change')},
+    softphoneAcceptCallBack: () => {console.log('softphone-accept')},
+    softphoneIgnoreCallBack: () => {console.log('softphone-ignore')},
+    softphoneHangupCallBack: () => {console.log('softphone-hangup')},
+    softphoneSessionStateChangeCallBack: () => {console.log('softphone-session-state-change')},
+    softphoneIncomingCallBack: () => {console.log('softphone-incoming')},
+    softphoneSendDtmfCallBack: () => {console.log('softphone-send-dtmf')},
+    softphoneConnectRegisteredCallBack: () => {console.log('softphone-connect-registered')},
+    softphoneSignOverduedCallBack: (done) => {
+      done({
+        timestamp: undefined,
+        sign: undefined
+      })
+    },
+  }
+
+
+  loadCssCode = (code) => {
+    const styleId = 'nf-softphone'
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style');
+      style.id = styleId
+      style.type = 'text/css';
+      // @ts-ignore
+      style.rel = 'stylesheet';
+      //for Chrome Firefox Opera Safari
+      style.appendChild(document.createTextNode(code));
+      //for IE
+      //style.styleSheet.cssText = code;
+      const head = document.getElementsByTagName('head')[0];
+      head.appendChild(style);
+    }
+  }
+
+  removeCssCode = () => {
+    const styleId = 'nf-softphone'
+    const css = document.getElementById(styleId)
+    if (css) {
+      if (css.parentNode) {
+        css.parentNode.removeChild(css);
+      }
+    }
+  }
+
+  /**
+   * 隔离软电话容器
+   */
+  getContextDomElement = (el) => {
+    return (this.option.selector ? (document.querySelector(this.option.selector) ?? document) : document).querySelector(el)
+  }
+  /**
+   * 隔离软电话容器内容
+   */
+  getSoftphoneDomElement = (el) => {
+    return this.getContextDomElement(this.option.el).querySelector(el) || this.getContextDomElement(el) || document.querySelector(el)
+  }
+
+  signOverdued = (data) => {
+    const iframe = this.getSoftphoneDomElement('.nf-softphone-iframe')
+    iframe?.contentWindow?.postMessage(JSON.stringify({
+      origin: 'nf-softphone',
+      ancestorOrigin: this.option.ancestorOrigin,
+      destinationOrigin: 'ai-softphone',
+      type: 'softphone-sign-overdued',
+      data
+    }), '*')
+  }
+
+  handlingCommunication = (e) => {
+    const iframe = this.getSoftphoneDomElement('.nf-softphone-iframe')
+    if (iframe) {
+      let data = {}
+      try {
+        data = JSON.parse(e.data)
+      } catch (e) {}
+      if ((data.ancestorOrigin === this.option.ancestorOrigin && data.origin !== this.option.ancestorOrigin) ||
+        (data.ancestorOrigin === this.option.origin && data.origin === this.option.origin)) {
+        if (data.destinationOrigin === '*' || data.destinationOrigin === this.option.destinationOrigin) {
+          if (data.type === 'softphone-expand') {
+            if (data.data === 'expand') {
+              iframe.setAttribute('style', 'position: fixed;z-index:999;');
+            } else if (data.data === 'shrink') {
+              iframe.removeAttribute('style');
+            }
+            return
+          }
+          if (data.type === 'softphone-connect') {
+            this.option.softphoneConnectCallBack?.(data)
+          } else if (data.type === 'softphone-call-refresh') {
+            this.option.softphoneCallRefreshCallBack?.(data)
+          } else if (data.type === 'softphone-seats-status-change') {
+            this.option.softphoneSeatStatusChangeCallBack?.(data)
+          } else if (data.type === 'softphone-accept') {
+            this.option.softphoneAcceptCallBack?.(data)
+          } else if (data.type === 'softphone-ignore') {
+            this.option.softphoneIgnoreCallBack?.(data)
+          } else if (data.type === 'softphone-hangup') {
+            this.option.softphoneHangupCallBack?.(data)
+          } else if (data.type === 'softphone-session-state-change') {
+            this.option.softphoneSessionStateChangeCallBack?.(data)
+          } else if (data.type === 'softphone-incoming') {
+            this.option.softphoneIncomingCallBack?.(data)
+          } else if (data.type === 'softphone-send-dtmf') {
+            this.option.softphoneSendDtmfCallBack?.(data)
+          } else if (data.type === 'softphone-connect-registered') {
+            this.option.softphoneConnectRegisteredCallBack?.(data)
+          } else if (data.type === 'softphone-sign-overdued') {
+            const done = (data) => {
+              const {
+                sign,
+                timestamp
+              } = data
+              this.signOverdued({
+                sign,
+                timestamp
+              })
+            }
+            this.option.softphoneSignOverduedCallBack?.(done)
+          }
+        }
+      }
+    }
+  }
+
+  handlingScroll = debounce(async () => {
+    const {
+      top,
+      left,
+    } = (await this.refreshStyle() || {})
+    if (top && left) {
+      (this.getSoftphoneDomElement('.nf-softphone-iframe')).contentWindow.postMessage(JSON.stringify({
+        type: 'softphone-scroll',
+        origin: this.option.origin,
+        ancestorOrigin: this.option.ancestorOrigin,
+        destinationOrigin: this.option.destinationOrigin,
+        data: {
+          paddingTop: top + 'px',
+        }
+      }), '*')
+    }
+  }, 500, false)
+
+  handlerInteractive = () => {
+    /**
+     * 实时处理层级
+     */
+    window.addEventListener('message', this.handlingCommunication, false);
+    if (this.option.scrollview) {
+      document.querySelector(this.option.scrollview)?.addEventListener('scroll', this.handlingScroll)
+      document.querySelector(this.option.scrollview)?.addEventListener('scroll', this.handlingScrollTransparent)
+    }
+
+    this.loadCssCode(`
+        .nf-transparent {
+          visibility: hidden;
+        }
+        .nf-softphone-text {
+          text-align: center;
+          line-height: 32px;
+          margin-top: -32px;
+        }
+        .nf-softphone-container {
+          margin-left: 10px;
+          height: 32px;
+          min-width: 600px;
+        }
+        .nf-softphone-iframe-container {
+          height: 32px;
+          width: 100%;
+          overflow: visible;
+        }
+        .nf-softphone-iframe {
+          width: 100vw;
+          height: 100vh;
+          top: 0;
+          left: 0;
+        }
+    `);
+  }
+
+  handlerDomRemove = () => {
+    Object.keys(this.option.instanceMap).forEach(key => {
+      const el = document.getElementById(key)
+      if (el && el.parentNode) {
+        el.parentNode.removeChild(el)
+      }
+    })
+  }
+
+  _containerScrolling
+
+  get containerScrolling() {
+    return this._containerScrolling
+  }
+
+  set containerScrolling(value) {
+    if (this.containerScrolling !== value) {
+      this._containerScrolling = value
+      const nfSoftphoneContainer = this.getSoftphoneDomElement('.nf-softphone-container')
+      const nfSoftphoneText = this.getSoftphoneDomElement('.nf-softphone-text')
+      nfSoftphoneContainer?.setAttribute('class', `nf-softphone-container ${value === true ? 'nf-transparent' : ''}`)
+      nfSoftphoneText?.setAttribute('style', `display: ${value === true ? 'block' : 'none'}`)
+    }
+  }
+
+  handlingScrollTransparent = () => {
+    this.containerScrolling = true
+  }
+
+  refreshStyle = async () => {
+    clearTimeout(this.timer)
+    this.timer = undefined
+    const nfSoftphoneContainer = this.getSoftphoneDomElement('.nf-softphone-container')
+    const nfSoftphoneIframeContainer = this.getSoftphoneDomElement('.nf-softphone-iframe-container')
+    if (nfSoftphoneContainer && nfSoftphoneIframeContainer) {
+      const containerStyle = nfSoftphoneContainer.getAttribute('style')
+      const iframeContainerStyle = nfSoftphoneIframeContainer.getAttribute('style')
+      nfSoftphoneContainer.removeAttribute('style')
+      nfSoftphoneIframeContainer.removeAttribute('style')
+      const leftMargin = getComputedStyle(nfSoftphoneContainer).marginLeft
+      const top = nfSoftphoneContainer.getBoundingClientRect().top
+      if (top <= 0) {
+        nfSoftphoneContainer.setAttribute('style', containerStyle)
+        nfSoftphoneIframeContainer.setAttribute('style', iframeContainerStyle)
+        return {
+          top: 0,
+          left: 0,
+          leftMargin
+        }
+      }
+      const left = nfSoftphoneContainer.getBoundingClientRect().left
+      if (left <= 0) {
+        nfSoftphoneContainer.setAttribute('style', containerStyle)
+        nfSoftphoneIframeContainer.setAttribute('style', iframeContainerStyle)
+        return {
+          top: 0,
+          left: 0,
+          leftMargin
+        }
+      }
+      nfSoftphoneContainer.setAttribute('style', `margin-top:${top}px;margin-left:${leftMargin};margin-bottom:${top}px;`)
+      nfSoftphoneIframeContainer.setAttribute('style', `margin-top:-${2 * top}px;margin-left:-${left}px;`)
+      this.timer = setTimeout(() => {
+        clearTimeout(this.timer)
+        this.timer = undefined
+        this.containerScrolling = false
+      }, 100)
+      return {
+        leftMargin,
+        top,
+        left
+      }
+    }
+    return {
+      leftMargin: 0,
+      top: 0,
+      left: 0
+    }
+  }
+
+  handlerDomGenerater = async () => {
+    const nfSoftphone = document.createElement('div');
+    const nfSoftphoneText = document.createElement('div');
+    nfSoftphoneText.innerText = this.option.scrollingText || '正在滚动中...'
+
+    const nfSoftphoneContainer = document.createElement('div');
+    const iframeContainer = document.createElement('div');
+    const iframe = document.createElement('iframe');
+
+    const uuid = this.id + '-container'
+    this.option.instanceMap[uuid] = nfSoftphone
+    nfSoftphone.setAttribute('id', uuid)
+    nfSoftphone.setAttribute('class', 'nf-softphone')
+    nfSoftphoneText.setAttribute('class', 'nf-softphone-text')
+    nfSoftphoneText.setAttribute('style', "display: none;")
+    nfSoftphoneContainer.setAttribute('class', "nf-softphone-container")
+    iframeContainer.setAttribute('class', "nf-softphone-iframe-container")
+    iframe.setAttribute('class', "nf-softphone-iframe")
+    iframe.setAttribute('src', "")
+    iframe.setAttribute('frameborder', "0")
+    iframe.setAttribute('scrolling', "no")
+    iframe.setAttribute('allow', "camera *; microphone *")
+    iframeContainer.appendChild(iframe)
+    nfSoftphoneContainer.appendChild(iframeContainer)
+    nfSoftphone.appendChild(nfSoftphoneContainer)
+    nfSoftphone.appendChild(nfSoftphoneText)
+    const destination = (this.option.el ? this.getSoftphoneDomElement(this.option.el) ?? document.body : document.body)
+    destination.appendChild(nfSoftphone)
+    await nextTick()
+    const {
+      top,
+      left,
+    } = await this.refreshStyle()
+    const {
+      envMap,
+      env,
+      agentTag,
+      agentId,
+      appSecret,
+      extStatus,
+      appKey,
+      ancestorOrigin,
+      destinationOrigin,
+      callShow,
+      transferToLaborShow,
+      restShow,
+      networkDetectShow,
+      muteShow,
+      logShow,
+      timingShow,
+      signShow,
+      sign,
+      timestamp,
+      sgGateway,
+      sgBase,
+      sgOpen,
+      sgDomain,
+    } = this.option
+    let url = `${ envMap?.[env] ?? env }/#/?cross=1&open=1`
+    url += agentTag ? `&agentTag=${agentTag}` : ''
+    url += agentId ? `&agentId=${agentId}` : ''
+    url += appSecret ? `&appSecret=${appSecret}` : ''
+    url += sign ? `&sign=${sign}` : ''
+    url += timestamp ? `&timestamp=${timestamp}` : ''
+    url += sgGateway ? `&sgGateway=${sgGateway}` : ''
+    url += sgBase ? `&sgBase=${sgBase}` : ''
+    url += sgOpen ? `&sgOpen=${sgOpen}` : ''
+    url += sgDomain ? `&sgDomain=${sgDomain}` : ''
+    url += `&appKey=${appKey}&extStatus=${extStatus}&paddingTop=${top}px&paddingLeft=${left}px&ancestorOrigin=${ancestorOrigin}&destinationOrigin=${destinationOrigin}`
+    url += `&callShow=${callShow}`
+    url += `&transferToLaborShow=${transferToLaborShow}`
+    url += `&restShow=${restShow}`
+    url += `&networkDetectShow=${networkDetectShow}`
+    url += `&muteShow=${muteShow}`
+    url += `&logShow=${logShow}`
+    url += `&timingShow=${timingShow}`
+    url += `&signShow=${signShow}`
+    iframe.src = url
+  }
+
+  initSoftphone = (option) => {
+    this.option = option ? { ...this.option, ...option } :this.option
+    this.handlerInteractive()
+    this.handlerDomGenerater()
+    return this
+  }
+
+  postMessageCommunicate = (type, status) => {
+    const iframe = this.getSoftphoneDomElement('.nf-softphone-iframe')
+    if (iframe) {
+      iframe.contentWindow.postMessage(JSON.stringify({
+        origin: 'nf-softphone',
+        ancestorOrigin: this.option.ancestorOrigin,
+        destinationOrigin: this.option.destinationOrigin,
+        type,
+        data: {
+          status,
+          type: 'manual'
+        }
+      }), '*')
+    }
+  }
+  connect = () => {
+    this.postMessageCommunicate('softphone-connect', true)
+  }
+
+
+  disconnect = () => {
+    this.postMessageCommunicate('softphone-connect', false)
+  }
+
+  seatsStatusChange = (status) => {
+    this.postMessageCommunicate('softphone-seats-status-change', status)
+  }
+
+  accept = () => {
+    this.postMessageCommunicate('softphone-accept')
+  }
+  ignore = () => {
+    this.postMessageCommunicate('softphone-ignore')
+  }
+  hangup = () => {
+    this.postMessageCommunicate('softphone-hangup')
+  }
+  sendDtmf = () => {
+    this.postMessageCommunicate('softphone-send-dtmf')
+  }
+
+  removeTimer = () => {
+    clearTimeout(this.timer)
+    this.timer = undefined
+  }
+
+  destroy = () => {
+    window.removeEventListener('message', this.handlingCommunication, false);
+    if (this.option.scrollview) {
+      document.querySelector(this.option.scrollview)?.removeEventListener('scroll', this.handlingScroll)
+      document.querySelector(this.option.scrollview)?.removeEventListener('scroll', this.handlingScrollTransparent)
+    }
+    this.removeCssCode()
+    this.handlerDomRemove()
+    this.removeTimer()
+  }
+}
+
+const softphoneManager = new SoftphoneManager()

package/html-softphone-demo/embed-ui/util.js

@@ -0,0 +1,123 @@
+function generateUUID() { // Public Domain/MIT
+  let d = Date.now();
+  if (typeof performance !== 'undefined' && typeof performance.now === 'function'){
+    d += performance.now(); //use high-precision timer if available
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (d + Math.random() * 16) % 16 | 0;
+    d = Math.floor(d / 16);
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+}
+
+function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function(...args) {
+    // @ts-ignore
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      // @ts-ignore
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+// 用于存储传入 nextTick 的回调函数
+const callbacks = [];
+// 标记是否已经安排了回调函数的执行
+let pending = false;
+
+// 执行队列中的所有回调函数
+function flushCallbacks() {
+  pending = false;
+  // 复制一份当前的回调队列，避免在执行过程中添加新的回调影响循环
+  const copies = callbacks.slice(0);
+  callbacks.length = 0;
+  // 依次执行每个回调函数，并处理可能出现的异常
+  for (let i = 0; i < copies.length; i++) {
+    try {
+      copies[i]();
+    } catch (e) {
+      console.error('Error in nextTick callback:', e);
+    }
+  }
+}
+
+// 根据浏览器支持情况选择合适的异步执行方式
+let timerFunc;
+if (typeof Promise !== 'undefined') {
+  // 如果支持 Promise，使用 Promise 的 then 方法创建微任务
+  const p = Promise.resolve();
+  timerFunc = () => {
+    p.then(flushCallbacks);
+  };
+} else if (typeof MutationObserver !== 'undefined') {
+  // 如果支持 MutationObserver，使用它创建微任务
+  let counter = 1;
+  const observer = new MutationObserver(flushCallbacks);
+  const textNode = document.createTextNode(String(counter));
+  observer.observe(textNode, {
+    characterData: true
+  });
+  timerFunc = () => {
+    counter = (counter + 1) % 2;
+    textNode.data = String(counter);
+  };
+} else if (typeof setImmediate !== 'undefined') {
+  // 如果支持 setImmediate，使用它创建宏任务
+  timerFunc = () => {
+    setImmediate(flushCallbacks);
+  };
+} else {
+  // 最后使用 setTimeout 作为兜底方案创建宏任务
+  timerFunc = () => {
+    setTimeout(flushCallbacks, 0);
+  };
+}
+// 实现 nextTick 函数，支持传入回调函数或返回 Promise
+async function nextTick(cb) {
+  return new Promise((resolve) => {
+    // 将回调函数和 resolve 函数封装成一个新的回调
+    callbacks.push(() => {
+      if (cb) {
+        try {
+          cb();
+        } catch (e) {
+          console.error('Error in nextTick callback:', e);
+        }
+      }
+      // 当回调执行完毕后，resolve Promise
+      resolve(true);
+    });
+    // 如果当前没有正在执行的回调安排，安排一次新的执行
+    if (!pending) {
+      pending = true;
+      timerFunc();
+    }
+  });
+}