在Twilio Flex中建造巴别塔

为联络中心构建软件工具，使复杂的任务看起来毫不费力是Perficient客户产品开发部门的一个重要重点。例如，我们帮助说不同语言的代理和客户通过文本轻松沟通。有些公司的客户遍布世界各地，他们会说多种语言，而他们的代理只会说英语。

一位客户要求我们帮助讲英语的代理在与客户沟通之前翻译他们的信息，用其他语言在线聊天，然后再将客户的信息翻译成英语。让我们看看实现这类请求的步骤。

亚马逊翻译和其他AWS服务

我们的第一步是构建一个APIAWS翻译以及亚马逊的其他服务。

这需要三个参数:

• 一段文字，
• 文本的书写语言，以及
• 我们要翻译成的语言。

我们可以在Lambda函数中编写下面的代码块，将参数发送到Amazon Translate并返回翻译后的消息。

我们从queryStringParameters对象获取输入。语言参数采用AWS的形式语言代码．我们创建一个端点API网关在浏览器中测试我们的API。为了将“hello”翻译成西班牙语，我们将它插入到参数“text”中，并将语言代码“en”和“es”插入到参数“from”和“To”中:

“你好”

Twilio Flex WebChat

现在我们有了翻译器，我们可以从前端调用它。客户直接消息代理从客户的网站使用Twilio Flex WebChat．从Flex环境中，代理可以接收电话、SMS文本和网络聊天消息。这里我们只关注网络聊天。

我们写一个插件在发送代理的消息之前翻译它们。我们还需要在客户的消息到达代理之前将其翻译成英语，因此我们需要分别编辑客户页面的代码库。虽然我们需要客户和代理看到同一消息的两个不同版本，但Flex WebChat利用了web套接字，因此消息的主体对双方来说是相同的。

在阶段1中，我们将每个消息替换为包含翻译后的文本和原始文本的版本。下面是Flex代理端的代码示例:

我们的url是我们用API网关创建的端点。我们用“en”(英语)作为“from”参数，用客户的语言代码(从任务属性派生)作为“to”参数。注意“notYetTranslated”布尔开关初始化为“true”。我们在翻译消息后将其转换为false。注意:如果没有这个开关，我们将创造一个无限循环。事件将不断取消自己，消息将永远不会发送。

当我们将客户的消息翻译成英文时，它看起来几乎完全像上面的代理端代码。唯一的区别是“to”参数是“en”，而“from”参数是客户的语言代码，而不是相反。我们这样做是因为我们在翻译来英语，而不是从英语。

替换消息体

在我们编写了translateMessage函数并将其添加到Flex插件和客户端的Flex WebChat页面中的SendMessage侦听器之后，我们的消息将被双向翻译。但我们还没有结束。消息将以一种非用户友好的格式到达代理和客户:翻译后的消息后面跟着" TRANSLATEDFROM "解析器，然后是原始消息:

为了用各方的语言(且仅用他们的语言)显示消息，我们在UI级别上解析消息体。就像上一步中的事件侦听器一样，我们将执行两次:一次在我们的Flex插件中用于代理的屏幕，一次在客户的网页中用于客户的屏幕。这一次，两个环境中的代码可以完全相同。

“remove”命令删除每条消息的正文。我们将自己的自定义组件添加到消息气泡中，以替换已删除的消息。它是一个简单的React组件。Flex中的自定义组件继承了它们的父组件的属性，因此我们的消息保存在ReplaceMessageBody中，并保留了TRANSLATEDFROM解析器。我们可以在解析器中将字符串拆分为一个数组，只向用户显示他们能够理解的消息版本。

这是ReplaceMessageBody的呈现语句。在我们的Flex插件中，对于代理发送的所有消息，布尔值isFromMe将为真。如果消息是由代理发送的，则显示数组的第二个(未翻译的)项。如果消息是由客户发送的，则显示数组的第一个(翻译后的)项。

打开和关闭翻译器

我们可以在这里停下来，大致实现本文开头的外观和功能，Amazon Translate根据角色收费，因此我们希望避免在实际上没有翻译任何内容时调用它。

我们可以限制Flex前端的服务，只有在代理的技能集中没有找到任务的语言代码时才调用translateMessage函数。这样可以避免事件侦听器不必要地调用Lambda，但它只限制了代理端转换。在客户方面，我们不知道我们最初的消息是否需要翻译，直到它到达代理。一旦它这样做了，当且仅当代理返回的消息包括TRANSLATEDFROM解析器时，我们就可以翻译后续的消息。然后，我们添加逻辑来翻译客户的初始消息(如果它不是英语的)。我们修改代理的ReplaceMessageBody组件，以显示客户的未翻译的开头消息(如果代理精通该语言)。这允许代理仅在需要时才看到客户的第一条翻译消息。如果不需要，客户的后续消息将保持未翻译状态。

结论

这是一个用Twilio Flex和Amazon Web Services制作的简单网络聊天翻译器的概念证明大纲。除了添加样式和安全性之外，在商业环境中使用它之前还有很多事情需要考虑——比如在任何一方手动输入TRANSLATEDFROM解析器时去掉它，并在WebChat UI中添加静态翻译，以便客户完全沉浸在他们自己的语言中。这个例子假设我们的网络聊天只有两个参与者。有三个或更多参与者的聊天将需要更多未解析消息中的元数据。

如果你已经有了Twilio Flex环境和AWS实例，你可以fork以下三个存储库来开始你自己的网络聊天翻译:

• https://github.com/scriptkd/translate(后端)
• https://github.com/scriptkd/plugin-translate-webchat(前端代理端)
• https://github.com/scriptkd/flex-webchat-ui-translation(前端客户端)

如果您对亚马逊翻译或Twilio Flex感兴趣，并且需要一些关于最大限度地提高呼叫中心效率的指导，我们可以提供帮助。

Perficient以我们对客户旅程的个人方法感到自豪，我们通过Twilio Flex、Amazon Connect、ServiceNow等平台帮助企业客户改造和现代化他们的呼叫中心体验。

欲了解更多关于Perficient如何帮助您最大限度地利用您的呼叫中心的信息，请访问 在这里联系我们．