作者簡介

Michael，攜程全棧開發(fā)專家，追求以技術手段解決業(yè)務上的共性問題，構建靈活可配置且可視化的系統(tǒng)，提高生產力，降低溝通成本。

CunShun，攜程后端開發(fā)工程師，專注系統(tǒng)架構、穩(wěn)定性、低代碼等領域。

一、引言

IVR（交互式語音應答，Interactive Voice Response）系統(tǒng)，是指用戶通過撥打指定號碼后可以根據語音提示，收聽和點送所需語音信息，并且協助完成自助服務。通過不斷完善IVR交互邏輯，可以實現客戶來電自助操作，減輕客服座席壓力，使之僅處理確實需要人工處理的呼叫。

本文將主要分享攜程機票IVR可視化系統(tǒng)的探索與實踐。

二、攜程機票IVR系統(tǒng)的演進過程

攜程呼叫中心系統(tǒng)結構如下圖所示，客人進線后由公共網關處理后轉到相應部門的IVR流程中，然后由各自部門完成IVR內部處理邏輯。

2.1 攜程機票IVR系統(tǒng)V1.0

最開始的機票IVR系統(tǒng)，主要面向國內市場的用戶，語種只有中文并且業(yè)務流程只有一套。系統(tǒng)采用的是“InTag-OutTag”+“策略模式”的設計方案，和公共平臺約定客戶來電后第一次請求IVR時傳入固定InTag，然后后續(xù)都使用客戶按鍵對應的OutTag作為下一次請求機票IVR自助服務的InTag，然后機票IVR采用策略模式根據InTag處理對應的業(yè)務場景。

公共平臺無需關心機票內部處理邏輯以及Tag的含義，機票方如果有業(yè)務變更也只需要新增InTag或OutTag場景即可。并且代碼采用策略模式，所以新增業(yè)務邏輯對原有系統(tǒng)代碼侵入很少。雖然業(yè)務場景是樹狀發(fā)散的，但是實際上從代碼設計的角度其實是將業(yè)務場景完全平鋪的。

2.2 攜程機票IVR系統(tǒng)V2.0

后來隨著業(yè)務擴張，在全球化戰(zhàn)略的背景下，也要面向國際市場的用戶，機票IVR系統(tǒng)也從原本單一的國內中文流程，擴展到20多條語言線。使得如果沿用原有IVR系統(tǒng)架構會存在以下痛點：

開關配置個數爆炸

由于各條語言線功能點上線速度不同、邏輯不一致等問題，采用硬編碼開發(fā)過程中會產生大量開關配置。并且隨著業(yè)務發(fā)展，上述問題愈發(fā)嚴重，業(yè)務邏輯也是愈發(fā)難以梳理。

無直觀的處理流程

語言線眾多，需求變更頻繁且各條語言線邏輯不一致，業(yè)務文檔往往無法及時更新，產品、流程等人員會經常找開發(fā)人員確認業(yè)務邏輯，開發(fā)人員需要花費大量時間翻代碼查邏輯。

話術配置效率低下

沒有直觀的配置頁面供業(yè)務人員使用，只能通過郵件溝通等方式來確認話術配置，然后由開發(fā)人員手動配置所有語言線的話術。在多語言背景下，溝通成本極大并且容易配置錯誤。

針對原有系統(tǒng)中存在的痛點，產研團隊溝通后提出了IVR可視化、可配置化的設想，為此設計并開發(fā)IVR可視化平臺。該系統(tǒng)完全顛覆原有的IVR系統(tǒng)架構，引入可視化流程樹、規(guī)則引擎、腳本引擎、話術模板動態(tài)配置、多版本管理等全新概念，業(yè)務和產品可隨時查看業(yè)務流程，通過配置調整快速需求上線，通過嚴格的權限控制、版本管理確保系統(tǒng)穩(wěn)定性，通過可視化來電軌跡協助快速排查問題。該系統(tǒng)使產品、業(yè)務、開發(fā)、測試及TS人員高效聯動，減少不必要的溝通成本，提高工作效率。

2.3 系統(tǒng)對比

三、攜程機票IVR可視化平臺介紹

3.1 系統(tǒng)架構設計

機票IVR可視化平臺分為兩個部分：IVR可視化管理頁面、IVR自助應答服務。

IVR可視化管理頁面

通過管理頁面提供可視化應答樹編輯器、版本管理、來電軌跡查詢等功能，開發(fā)、產品、業(yè)務、測試、TS人員都通過該頁面進行操作。

IVR自助應答服務

解析IVR應答樹配置并監(jiān)聽版本變更，根據流程樹配置真正對客提供IVR自助服務。

原有系統(tǒng)中業(yè)務處理流程、調用接口、話術配置等功能都是在代碼中編寫，無法做到靈活調整。為了實現IVR完全可視化、配置化的業(yè)務需求，就需要將這些邏輯從代碼中抽離出來，通過可配置的方式來實現。在系統(tǒng)設計過程中面臨以下幾個難點：如何通過配置調整修改業(yè)務流程、如何在配置中處理接口調用、如何優(yōu)雅的動態(tài)話術模板配置。

針對如上難點，對系統(tǒng)做出如下設計：

數據定義

根據業(yè)務流程定義所有需要用到的數據屬性，全局數據定義是后續(xù)一切可視化配置的基礎，后續(xù)所有的配置都是依托數據定義才能夠優(yōu)雅且合理的實現。

規(guī)則引擎

通過可視化的規(guī)則引擎，實現業(yè)務流程配置。

腳本引擎

在腳本引擎中，可以編輯`JavaScript`腳本實現服務調用，并且可以對接口返回的結果進行處理。

話術模板

可以插入動態(tài)話術、支持循環(huán)播報、支持時間格式化。

3.2 可視化平臺展示

話不多說，先展示一下配置頁面，讓大家能夠對IVR可視化平臺有比較直觀的印象。

平臺通過以下功能實現IVR可視化流程樹配置：

• 數據定義：將IVR流程中需要用到的數據（如邏輯判斷、話術播報場景）進行數據定義，為后續(xù)操作做準備。
• 編輯數據訪問腳本：在腳本中完成服務調用，將調用結果轉換成IVR流程中需要的數據格式，再setPropertyValue完成數據的值填充。
• 調整IVR流程樹：根據IVR業(yè)務特性，將可視化樹中節(jié)點定義為10種類型，然后根據節(jié)點類型的不同展示相應的右鍵菜單，實現流程配置。
• 編輯子節(jié)點路由規(guī)則：依托規(guī)則引擎，配置流程邏輯流轉的規(guī)則。
• 掛載數據訪問腳本：將數據訪問腳本掛載到節(jié)點中，當執(zhí)行到該節(jié)點時執(zhí)行腳本。
• 話術模板配置：配置播報話術模板。
  

同時該平臺支持仿真撥號和來電軌跡查詢，這兩個頁面中都會詳細記錄用戶進線后的每一次請求、響應以及內部處理流程，結合數據庫記錄及日志埋點等能夠更快、更直觀的分析數據。

• 仿真撥號：流程配置完成后提交申請發(fā)布的過程中，通過模擬進線的方式對業(yè)務流程進行測試。
• 來電軌跡查詢：支持查詢用戶進線后的IVR流程軌跡、播報話術等信息，便于分析數據和排查問題。
  

3.3 實現方案設計

IVR可視化平臺最核心的思想是：通過“腳本配置及解析”實現流程動態(tài)變更。

我們的首要任務就是確定選用何種腳本語言，IVR可視化平臺中有兩部分需要使用腳本配置（子節(jié)點路由規(guī)則、數據訪問腳本），特別是數據訪問腳本需要支持服務調用、數據轉換、數據值設置等功能。javascript語言既可以在服務端執(zhí)行腳本又可以直接在瀏覽器端直接調試腳本，和Node服務端無縫銜接，經過考量后我們選用javascript作為腳本語言。

然后圍繞選用的腳本語言，最終服務端采用Node+javascript腳本的實現方式。然后在前端頁面設計及開發(fā)的過程中，使用許多優(yōu)秀的第三方組件，包括react-awesome-query-builder、AntV G6、Monaco Editor等等，提高開發(fā)效率以及頁面美觀程度。

下面從前端頁面設計和服務端解析兩個方面，對IVR可視化平臺的設計方案中的關鍵點做說明：

（1）全局數據定義

"流程未動，數據定義先行"。只有數據定義完成后，后續(xù)規(guī)則配置、腳本編輯、動態(tài)話術配置時才能有數據可依。目前支持string、integer、boolean、datetime、date、object、array、enum類型定義，然后設置屬性值的來源（每一次請求參數、指定請求參數、腳本設置）。

（2）流程樹配置

根據業(yè)務特性選用樹狀結構展示業(yè)務流程，支持子樹，條理清晰，易于理解。技術上是選用`AntV G6`圖可視化引擎作為可視化展示的組件，該組件提供了圖的繪制、布局、交互等能力且具備高可擴展的自定義機制。

定義樹中Node類型并利用顏色、邊框、icon等區(qū)分。并且使用子樹把復雜的流程拆分后展示，避免流程樹過于龐大不利于維護，同時子樹可以掛在不同的節(jié)點后面，提高流程復用性。

（3）規(guī)則引擎

規(guī)則引擎用于IVR流程中條件分支規(guī)則判斷，我們基于react-awesome-query-builder開源組件，并對該組件進行擴展，支持輸出javascript腳本，滿足業(yè)務需要。該組件支持"=="、 ">"、 "<"、 "includes"、 "between"、 "startWith"、 "endWith"、 "some"、 "all"等十多種操作符，支持常用的函數，同時還支持"or"、"and"、"not"的自由組合。

（4）腳本編輯及調試

腳本編輯使用Monaco Editor編輯器，支持智能提示，并且我們對智能提示進行擴展，使編輯器支持自定義的方法和對象，更加人性化，操作更方便。

// 額外的類型(數據定義、自定義方法等)
MonacoEditorManager.setExtraLibs([{ content: extraLib }]);
MonacoEditorManager.addPageSuggestionCallback("TriggerListDialog", (model: any, 
position: any) => {
    const text = model.getValueInRange({
        startLineNumber: position.lineNumber,
        startColumn: 1,
        endLineNumber: position.lineNumber,
        endColumn: position.column
    });
    // 自定義智能提醒
    return getSuggestions(text, props.getPropertiesCallback, () => props.serviceOperations);
});

腳本如果無法調試的話，就無法保證腳本的正確性，不能在腳本上線之前發(fā)現問題。我們利用源映射(**Source Map**)實現將腳本生成JS文件，并在瀏覽器控制臺中調試。

// 構建__debug_script.js文件
const loadScriptCode = (scriptString: string) => {
    const sourceUrl = '//# sourceURL=__debug_script.js';
    const functionDef = 'async function __debug_script(Props, getPropertyValue, setPropertyValue, invokeServiceMethod){';
    const scriptLines = (scriptString?.split('\n') || []).map(line => '    ' + line);
    const lines = [sourceUrl, functionDef, ...scriptLines, "}"];
    const codeNode = window.document.createTextNode(lines.join('\n'));
    const script = window.document.createElement('script');
    script.type = 'text/javascript';
    script.appendChild(codeNode);
    window.document.body.appendChild(script);
    return scriptString;
};
// F12打開控制臺后,執(zhí)行腳本
const debugCode = async (inputPropertyValues) => {
    // 相關參數傳入，執(zhí)行腳本
    window["__debug_script"](Props,getPropertyValue,setPropertyValue,invokeServiceMethod);
   // ...
}

（5）腳本解析及執(zhí)行

為了保證執(zhí)行自定義腳本時的系統(tǒng)安全性，本系統(tǒng)選用在VM2沙箱中運行不受信任的代碼，并且限制VM2可使用的模塊，僅支持與業(yè)務相關的幾個自定義方法，如：getPropertyValue（從數據流讀取數據）、setPropertyValue（向數據流寫入數據）、invokeServiceMethod（服務調用）等 。

在運行沙箱中的代碼時，使用try/catch進行包裹，避免腳本出現問題導致全局崩潰。在服務初始化以及版本更新時采用預編譯VMScript腳本的方式來提升性能，經過性能測試，預編譯后的腳本和原生JS腳本執(zhí)行速度相當。

// 腳本編譯
const vmScript = `const asyncFunction = async () => {\n${this.script}\n};\r\n
 asyncFunction().then(result=>onVmScriptComplete(result)).catch(error=>onVmScriptError(error));`;
this.vmScript = new VMScript(vmScript).compile();
// 腳本運行
const runInVM(param: object, callback: () => void = null): any {
    return new Promise((resolve, reject) => {
        const vm = new NodeVM({
            console: 'inherit',
            sandbox: {
                ...param,
                onVmScriptComplete: (result) => resolve(result),
                onVmScriptError: (error) => reject(error)
            }
        });
        vm.run(this.vmScript);
    });
}

（6）話術配置

根據以往IVR開發(fā)經驗，各條語言線中關于數字、時間類型的話術TTS播報存在差異，所以在開發(fā)話術模板組件時，需要支持動態(tài)屬性配置并且可以自定義格式轉換?；趓eact-quill富文本組件友好的展示話術模板，并且支持自定義時間格式。

（7）服務端執(zhí)行流程

服務端執(zhí)行分為兩部分：配置初始化、IVR自助服務接口。

在服務啟動時，首先需要對配置初始化。包括從DB中加載IVR配置，對規(guī)則引擎和腳本引擎中的腳本預編譯，話術模板配置預處理，根據配置中的節(jié)點父子關系以及節(jié)點類型定義nextNode()方法，并且開啟監(jiān)聽版本變更，實現配置熱更新。

然后在IVR自助服務調用過程中，通過DataContext存放請求鏈路中的數據（配置版本、經過的路由、已經獲取的屬性信息等等），根據nodeId定位到當前處理節(jié)點后，執(zhí)行nextNode()方法找到下一個節(jié)點。如果節(jié)點中掛載腳本的話，則執(zhí)行腳本并將腳本中獲取的屬性值放入DataContext中。然后直到響應類型的節(jié)點，根據節(jié)點類型做最終的響應（轉人工、掛斷、拼接話術模板并播報等）。

（8）多版本管理

在該IVR可視化系統(tǒng)中，為了能夠保證系統(tǒng)靈活性，通過配置化的方式實現系統(tǒng)功能。但是可配置的功能越豐富，出錯的可能性越高，為了保證系統(tǒng)穩(wěn)定性，需要進行版本管理以及規(guī)范發(fā)布流程。

首先所有的流程修改都是在草稿版本中編輯，當草稿版本申請發(fā)布時可以進行版本對比以及仿真測試，如果測試通過后可以生成預發(fā)布版本。然后開發(fā)人員審核后發(fā)布灰度版本，配置灰度手機號碼，業(yè)務人員在生產驗收通過后才能發(fā)布正式版本。

四、結語

攜程機票可視化平臺正式上線近一年時間，一直平穩(wěn)運行，且給各方協調溝通帶來極大便利。隨著AI、ChatGpt等技術發(fā)展，攜程機票也在推進將語音識別技術應用到客戶來電交互中，通過ASR（Automatic Speech Recognition）優(yōu)化處理流程，提升客戶體驗。

該平臺其實算是低代碼結合特定領域的實踐，如果有其他小伙伴也希望在自己的業(yè)務中結合低代碼，希望該文章能夠對您有所幫助。