AI 对话机器人的应用已经非常广泛，从手机助手到企业客服系统背后都有它的身影。本文介绍如何在 Axure 中制作 AI 对话机器人原型模版，制作完成后只需要在中继器表格里输入问题和答案，预览时就可以实现自动回复。
原型效果
- 在输入框里输入问题后，自动搜索问题列表，如果找到答案，机器人自动回复；如果找不到答案，也会回复引导话术。
- 机器人回复时，会模拟打字输入效果，逐字回复。
- 问题和答案，可以在中继器表格里添加或修改。
![图片]
制作教程
本原型模版主要分成底部背景、欢迎区域、问题列表、对话区域、输入区域。
1. 底部背景
底部背景用矩形和线段制作，如下图所示摆放。
![图片]
2. 欢迎区域
欢迎区域包括图标和文字，默认未提问时显示。
![图片]
3. 问题列表
问题列表用中继器制作，中继器里摆放矩形和文本标签，矩形用于显示文字，文本标签用于记录答案，默认不显示。
中继器表格里包含两列，wenti 列对应问题，daan 列对应答案。
![图片]
如果是 Axure10 或以上的版本，点击表格里的连接元件，选择中继器里的矩形和文本标签，就可以将问题设置到矩形，将答案设置到文本标签；如果是 Axure9 或以下的版本，就要在中继器每项加载时，通过设置文本的交互，将 wenti 列和答案列的值设置到对应的元件里。
![图片]
4. 对话区域
对话区域我们用中继器来制作，中继器里需要有两个颜色不同的矩形，蓝色矩形对应我输入的内容，灰色矩形对应机器人的回答。
![图片]
中继器表格里添加两列，who 列用来确认是谁说的话，我们定义如果 who 列的值等于我，那该行内容就是我说的，如果 who 列的值不等于我，那就是机器人说的。Text 列对应具体说的内容。中继器表格里默认为空，如果你想默认展示以前的聊天记录也可以在中继器表格里填写。
![图片]
在中继器每项加载时，我们需要判断每一行是谁说的，如果 who 列的值等于我，就是我说的，所以显示蓝色矩形，隐藏灰色矩形；如果 who 列的值不等于我，就是机器人说的，我们就显示灰色矩形，隐藏蓝色矩形。
![图片]
然后我们把中继器 text 列的值都设置到灰色和蓝色的矩形里，我们在中继器每项加载时，用设置文本的交互，将 text 列的值都设置到两个矩形里即可。
![图片]
因为矩形不会自适应宽度和高度，所以这里我们要先定一个宽度的最大值，案例里是 850，如果矩形的宽度小于 850 时，我们设置矩形高度不变，宽度和文字的宽度一样；如果宽度大于 850 时，我们设置矩形宽度为 850，设置高度为文本宽度为 850 时的高度。
怎么做自适应文本的尺寸，这里我们需要动态面板和锚链接滚动的交互来获取。
![图片]
设置矩形的宽度是需要注意，蓝色矩形我的对话的锚点是在右侧，灰色矩形机器人的对话的锚点是在左侧。
最后考虑到对话内容较多时，会超过指定的区域，所以可以把中继器转为动态面板，并调出垂直滚动条。
5. 输入区域
输入区域包括矩形、多行输入框，按钮，如下图所示摆放。
![图片]
发送按钮按下时，我们要先判断文本内容是否为空，如果为空就不操作，如果不为空再进行操作。
首先我们要先把欢迎区域的文字图标组合隐藏，然后把输入框的内容添加到对话记录的中继器里。
![图片]
考虑到内容较多时，我们先把最新的内容显示出来，所以我们需要动态面板的滚动条滚动到最下方，这里我们需要在对话记录的动态面板内添加一个默认隐藏的元件作为锚点。然后用移动的交互，移动到对话记录中继器的底部，最后用滚动到元件的交互，让动态面板的滚动条滚动到底部元件的位置。
![图片]
问题问完后，我们要自动回复答案，我们首先对问题列表的中继器进行筛选，筛选出符合条件的答案，这里是通过简单判断，判断中继器表格里 wenti 列是否包含有输入框里的文本值。
![图片]
如果有筛选结果，就是中继器筛选后的条数不等于 0，我们就用设置文本的交互，将问题的答案，就是在中继器里文本标签的值记录下来，如果等于 0，就是没有筛选结果，就是没有找到答案，用设置文本的交互，记录默认的话术，案例中是对不起，目前没有找到该问题相关的知识点，您可以提问右侧问题列表相关的问题，或者在中继器里的添加对应的问题。
![图片]
这样我们记录下了要回答的内容后，用移出筛选的交互，将问题列表还原，并且触发将记录的文本逐字显示。
![图片]
文本逐字显示，其实就是通过文本提取函数，将文本值逐一提取，先提取第一个，然后是第二个……如此循环，直到最后一个字为止。
