高效聯動，攜程機票IVR可視化的探索和實踐
作者簡介
Michael，攜程全棧開發專家，追求以技術手段解決業務上的共性問題，構建靈活可配置且可視化的系統，提高生產力，降低溝通成本。
CunShun，攜程后端開發工程師，專注系統架構、穩定性、低代碼等領域。
一、引言
IVR（交互式語音應答，Interactive Voice Response）系統，是指用戶通過撥打指定號碼后可以根據語音提示，收聽和點送所需語音信息，并且協助完成自助服務。通過不斷完善IVR交互邏輯，可以實現客戶來電自助操作，減輕客服座席壓力，使之僅處理確實需要人工處理的呼叫。
本文將主要分享攜程機票IVR可視化系統的探索與實踐。
二、攜程機票IVR系統的演進過程
攜程呼叫中心系統結構如下圖所示，客人進線后由公共網關處理后轉到相應部門的IVR流程中，然后由各自部門完成IVR內部處理邏輯。
2.1 攜程機票IVR系統V1.0
最開始的機票IVR系統，主要面向國內市場的用戶，語種只有中文并且業務流程只有一套。系統采用的是“InTag-OutTag”+“策略模式”的設計方案，和公共平臺約定客戶來電后第一次請求IVR時傳入固定InTag，然后后續都使用客戶按鍵對應的OutTag作為下一次請求機票IVR自助服務的InTag，然后機票IVR采用策略模式根據InTag處理對應的業務場景。
公共平臺無需關心機票內部處理邏輯以及Tag的含義，機票方如果有業務變更也只需要新增InTag或OutTag場景即可。并且代碼采用策略模式，所以新增業務邏輯對原有系統代碼侵入很少。雖然業務場景是樹狀發散的，但是實際上從代碼設計的角度其實是將業務場景完全平鋪的。
2.2 攜程機票IVR系統V2.0
后來隨著業務擴張，在全球化戰略的背景下，也要面向國際市場的用戶，機票IVR系統也從原本單一的國內中文流程，擴展到20多條語言線。使得如果沿用原有IVR系統架構會存在以下痛點：
開關配置個數爆炸
由于各條語言線功能點上線速度不同、邏輯不一致等問題，采用硬編碼開發過程中會產生大量開關配置。并且隨著業務發展，上述問題愈發嚴重，業務邏輯也是愈發難以梳理。
無直觀的處理流程
語言線眾多，需求變更頻繁且各條語言線邏輯不一致，業務文檔往往無法及時更新，產品、流程等人員會經常找開發人員確認業務邏輯，開發人員需要花費大量時間翻代碼查邏輯。
話術配置效率低下
沒有直觀的配置頁面供業務人員使用，只能通過郵件溝通等方式來確認話術配置，然后由開發人員手動配置所有語言線的話術。在多語言背景下，溝通成本極大并且容易配置錯誤。
針對原有系統中存在的痛點，產研團隊溝通后提出了IVR可視化、可配置化的設想，為此設計并開發IVR可視化平臺。該系統完全顛覆原有的IVR系統架構，引入可視化流程樹、規則引擎、腳本引擎、話術模板動態配置、多版本管理等全新概念，業務和產品可隨時查看業務流程，通過配置調整快速需求上線，通過嚴格的權限控制、版本管理確保系統穩定性，通過可視化來電軌跡協助快速排查問題。該系統使產品、業務、開發、測試及TS人員高效聯動，減少不必要的溝通成本，提高工作效率。
2.3 系統對比
機票IVR系統V1.0 | 機票IVR系統V2.0 | |
語種 | 只有中文 | 20多條語言線 |
流程是否可視化 | 無可視化流程，只有流程圖 | 完全可視化的業務流程 |
軌跡是否可視化 | 可視化頁面，需要通過DB數據反推執行流程。需要對業務邏輯以及字段含義有較深理解才能看懂 | 有可視化頁面，并記錄經過節點以及中間數據，一目了然 |
業務邏輯實現方式 | 定義`InTag/OutTag`，通過硬編碼實現業務邏輯 | 通過可視化平臺配置業務邏輯 |
話術配置 | 話術模板存放在配置中心，然后硬編碼解析動態話術 | 提供可視化的話術配置頁面，并且實現通用解析話術邏輯 |
開關 | 需要在代碼中定義開關 | 通過語言線配置解耦、灰度版本控制支持開關功能，無需硬編碼 |
三、攜程機票IVR可視化平臺介紹
3.1 系統架構設計
機票IVR可視化平臺分為兩個部分：IVR可視化管理頁面、IVR自助應答服務。
IVR可視化管理頁面
通過管理頁面提供可視化應答樹編輯器、版本管理、來電軌跡查詢等功能，開發、產品、業務、測試、TS人員都通過該頁面進行操作。
IVR自助應答服務
解析IVR應答樹配置并監聽版本變更，根據流程樹配置真正對客提供IVR自助服務。
原有系統中業務處理流程、調用接口、話術配置等功能都是在代碼中編寫，無法做到靈活調整。為了實現IVR完全可視化、配置化的業務需求，就需要將這些邏輯從代碼中抽離出來，通過可配置的方式來實現。在系統設計過程中面臨以下幾個難點：如何通過配置調整修改業務流程、如何在配置中處理接口調用、如何優雅的動態話術模板配置。
針對如上難點，對系統做出如下設計：
數據定義
根據業務流程定義所有需要用到的數據屬性，全局數據定義是后續一切可視化配置的基礎，后續所有的配置都是依托數據定義才能夠優雅且合理的實現。
規則引擎
通過可視化的規則引擎，實現業務流程配置。
腳本引擎
在腳本引擎中，可以編輯`JavaScript`腳本實現服務調用，并且可以對接口返回的結果進行處理。
話術模板
可以插入動態話術、支持循環播報、支持時間格式化。
3.2 可視化平臺展示
話不多說，先展示一下配置頁面，讓大家能夠對IVR可視化平臺有比較直觀的印象。
平臺通過以下功能實現IVR可視化流程樹配置：
- 數據定義：將IVR流程中需要用到的數據（如邏輯判斷、話術播報場景）進行數據定義，為后續操作做準備。
- 編輯數據訪問腳本：在腳本中完成服務調用，將調用結果轉換成IVR流程中需要的數據格式，再setPropertyValue完成數據的值填充。
- 調整IVR流程樹：根據IVR業務特性，將可視化樹中節點定義為10種類型，然后根據節點類型的不同展示相應的右鍵菜單，實現流程配置。
- 編輯子節點路由規則：依托規則引擎，配置流程邏輯流轉的規則。
- 掛載數據訪問腳本：將數據訪問腳本掛載到節點中，當執行到該節點時執行腳本。
- 話術模板配置：配置播報話術模板。
同時該平臺支持仿真撥號和來電軌跡查詢，這兩個頁面中都會詳細記錄用戶進線后的每一次請求、響應以及內部處理流程，結合數據庫記錄及日志埋點等能夠更快、更直觀的分析數據。
- 仿真撥號：流程配置完成后提交申請發布的過程中，通過模擬進線的方式對業務流程進行測試。
- 來電軌跡查詢：支持查詢用戶進線后的IVR流程軌跡、播報話術等信息，便于分析數據和排查問題。
3.3 實現方案設計
IVR可視化平臺最核心的思想是：通過“腳本配置及解析”實現流程動態變更。
我們的首要任務就是確定選用何種腳本語言，IVR可視化平臺中有兩部分需要使用腳本配置（子節點路由規則、數據訪問腳本），特別是數據訪問腳本需要支持服務調用、數據轉換、數據值設置等功能。javascript語言既可以在服務端執行腳本又可以直接在瀏覽器端直接調試腳本，和Node服務端無縫銜接，經過考量后我們選用javascript作為腳本語言。
然后圍繞選用的腳本語言，最終服務端采用Node+javascript腳本的實現方式。然后在前端頁面設計及開發的過程中，使用許多優秀的第三方組件，包括react-awesome-query-builder、AntV G6、Monaco Editor等等，提高開發效率以及頁面美觀程度。
下面從前端頁面設計和服務端解析兩個方面，對IVR可視化平臺的設計方案中的關鍵點做說明：
（1）全局數據定義
"流程未動，數據定義先行"。只有數據定義完成后，后續規則配置、腳本編輯、動態話術配置時才能有數據可依。目前支持string、integer、boolean、datetime、date、object、array、enum類型定義，然后設置屬性值的來源（每一次請求參數、指定請求參數、腳本設置）。
（2）流程樹配置
根據業務特性選用樹狀結構展示業務流程，支持子樹，條理清晰，易于理解。技術上是選用`AntV G6`圖可視化引擎作為可視化展示的組件，該組件提供了圖的繪制、布局、交互等能力且具備高可擴展的自定義機制。
定義樹中Node類型并利用顏色、邊框、icon等區分。并且使用子樹把復雜的流程拆分后展示，避免流程樹過于龐大不利于維護，同時子樹可以掛在不同的節點后面，提高流程復用性。
（3）規則引擎
規則引擎用于IVR流程中條件分支規則判斷，我們基于react-awesome-query-builder開源組件，并對該組件進行擴展，支持輸出javascript腳本，滿足業務需要。該組件支持"=="、 ">"、 "<"、 "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);
});腳本如果無法調試的話，就無法保證腳本的正確性，不能在腳本上線之前發現問題。我們利用源映射(**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打開控制臺后,執行腳本
const debugCode = async (inputPropertyValues) => {
// 相關參數傳入，執行腳本
window["__debug_script"](Props,getPropertyValue,setPropertyValue,invokeServiceMethod);
// ...
}
（5）腳本解析及執行
為了保證執行自定義腳本時的系統安全性，本系統選用在VM2沙箱中運行不受信任的代碼，并且限制VM2可使用的模塊，僅支持與業務相關的幾個自定義方法，如：getPropertyValue（從數據流讀取數據）、setPropertyValue（向數據流寫入數據）、invokeServiceMethod（服務調用）等 。
在運行沙箱中的代碼時，使用try/catch進行包裹，避免腳本出現問題導致全局崩潰。在服務初始化以及版本更新時采用預編譯VMScript腳本的方式來提升性能，經過性能測試，預編譯后的腳本和原生JS腳本執行速度相當。
// 腳本編譯
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開發經驗，各條語言線中關于數字、時間類型的話術TTS播報存在差異，所以在開發話術模板組件時，需要支持動態屬性配置并且可以自定義格式轉換。基于react-quill富文本組件友好的展示話術模板，并且支持自定義時間格式。
（7）服務端執行流程
服務端執行分為兩部分：配置初始化、IVR自助服務接口。
在服務啟動時，首先需要對配置初始化。包括從DB中加載IVR配置，對規則引擎和腳本引擎中的腳本預編譯，話術模板配置預處理，根據配置中的節點父子關系以及節點類型定義nextNode()方法，并且開啟監聽版本變更，實現配置熱更新。
然后在IVR自助服務調用過程中，通過DataContext存放請求鏈路中的數據（配置版本、經過的路由、已經獲取的屬性信息等等），根據nodeId定位到當前處理節點后，執行nextNode()方法找到下一個節點。如果節點中掛載腳本的話，則執行腳本并將腳本中獲取的屬性值放入DataContext中。然后直到響應類型的節點，根據節點類型做最終的響應（轉人工、掛斷、拼接話術模板并播報等）。
（8）多版本管理
在該IVR可視化系統中，為了能夠保證系統靈活性，通過配置化的方式實現系統功能。但是可配置的功能越豐富，出錯的可能性越高，為了保證系統穩定性，需要進行版本管理以及規范發布流程。
首先所有的流程修改都是在草稿版本中編輯，當草稿版本申請發布時可以進行版本對比以及仿真測試，如果測試通過后可以生成預發布版本。然后開發人員審核后發布灰度版本，配置灰度手機號碼，業務人員在生產驗收通過后才能發布正式版本。
四、結語
攜程機票可視化平臺正式上線近一年時間，一直平穩運行，且給各方協調溝通帶來極大便利。隨著AI、ChatGpt等技術發展，攜程機票也在推進將語音識別技術應用到客戶來電交互中，通過ASR（Automatic Speech Recognition）優化處理流程，提升客戶體驗。
該平臺其實算是低代碼結合特定領域的實踐，如果有其他小伙伴也希望在自己的業務中結合低代碼，希望該文章能夠對您有所幫助。
