Axure 实现 AI 对话机器人原型，支持自动回复与打字效果

中继器表格里添加两列：

• who 列用来确认是谁说的话，我们定义如果 who 列的值等于'我'，那该行内容就是用户说的，如果不等于'我'，那就是机器人说的。
• Text 列对应具体说的内容。

中继器表格里默认为空，如果你想默认展示以前的聊天记录也可以在中继器表格里填写。

在中继器每项加载时，我们需要判断每一行是谁说的。如果 who 列的值等于'我'，就显示蓝色矩形，隐藏灰色矩形；如果 who 列的值不等于'我'，就显示灰色矩形，隐藏蓝色矩形。

然后我们把中继器 text 列的值都设置到灰色和蓝色的矩形里，我们在中继器每项加载时，用设置文本的交互，将 text 列的值都设置到两个矩形里即可。

因为矩形不会自适应宽度和高度，所以这里我们要先定一个宽度的最大值，案例里是 850。如果矩形的宽度小于 850 时，我们设置矩形高度不变，宽度和文字的宽度一样；如果宽度大于 850 时，我们设置矩形宽度为 850，设置高度为文本宽度为 850 时的高度。

怎么做自适应文本的尺寸，这里我们需要动态面板和锚链接滚动的交互来获取。

设置矩形的宽度需要注意，蓝色矩形（我的对话）的锚点是在右侧，灰色矩形（机器人的对话）的锚点是在左侧。

最后考虑到对话内容较多时，会超过指定的区域，所以可以把中继器转为动态面板，并调出垂直滚动条。

5. 输入区域

输入区域包括矩形、多行输入框、按钮，按照下图摆放。

发送按钮按下时，我们要先判断文本内容是否为空。如果为空就不操作，如果不为空再进行操作。

首先我们要先把欢迎区域的文字图标组合隐藏，然后把输入框的内容添加到对话记录的中继器里。

考虑到内容较多时，我们先把最新的内容显示出来，所以我们需要动态面板的滚动条滚动到最下方。这里我们需要在对话记录的动态面板内添加一个默认隐藏的元件作为锚点。然后用移动的交互，移动到对话记录中继器的底部，最后用滚动到元件的交互，让动态面板的滚动条滚动到底部元件的位置。

问题问完后，我们要自动回复答案。我们首先对问题列表的中继器进行筛选，筛选出符合条件的答案。这里是通过简单判断，判断中继器表格里 wenti 列是否包含有输入框里的文本值。

如果有筛选结果，就是中继器筛选后的条数不等于 0，我们就用设置文本的交互，将问题的答案，就是在中继器里文本标签的值记录下来；如果等于 0，就是没有筛选结果，就是没有找到答案，用设置文本的交互，记录默认的话术，例如：'对不起，目前没有找到该问题相关的知识点，您可以提问右侧问题列表相关的问题，或者在中继器里的添加对应的问题'。

这样我们记录下了要回答的内容后，用移出筛选的交互，将问题列表还原，并且触发将记录的文本逐字显示。

文本逐字显示，其实就是通过文本提取函数，将文本值逐一提取，先提取第一个，然后是第二个……如此循环，直到最后一个字为止。这里的区别，要在先把第一个字的文本，用添加行的交互添加到对话的中继器里，然后再进入循环依次将第 2、3、4、5、6……直到末尾的字，通过循环判断的方式添加上去。

完成之后，我们要用移动的交互，将动态面板内的锚点元件移动到中继器表格的下方，然后用滚动到元件的交互，让动态面板的滚动条滚动到最下方锚点的位置。

这样我们就完成了 AI 对话机器人的原型模板了，后续使用也是很方便，问题和答案在中继器表格中填写即可，即可自动生成的交互效果。