javascript - 使用 DirectLine 逐步打开网络聊天窗口

Question

客户要求我为在其网站上与聊天机器人交互的用户提供更好的 UI/UX 体验。

客户想要以下内容:

1. 网站右下角有一个机器人图标(完成)
2. 当用户单击机器人图标时，他们会看到下图中的窗口。它基本上是一个较小的网络聊天窗口。

用户在聊天框中键入内容后，完整的聊天窗口将显示如下:

我只关心从第 1 部分到第 2 部分和第 3 部分的过渡。我已经设计了差不多的机器人 UI，我可以直接从第 1 部分过渡到第 3 部分。我不知道如何执行 2. 如何将较小的窗口滚动到全尺寸的聊天窗口。

我正在研究网络聊天框架，并且已经基本完成了颜色、字体和 UI 的更改，如第二张图片所示。我需要帮助两件事:

1. 像我上面解释的那样进行过渡是个好主意吗？
2. 有关如何操作的说明。我还没有找到任何可以帮助我做到这一点的东西。为我指明正确的方向将会很有帮助!

Answer 1

考虑在您的页面上实现一个模式或类似模式来模仿最小化的网络聊天按钮。选择后，模式将打开并显示#2。因为它是在您的网站上构建的模式，所以您可以控制样式，以便您可以根据需要设置其格式，包括添加“在此处键入消息”输入字段。当用户输入消息并提交(按回车键)时，这将打开/开始网络聊天 session ，用户的初始消息在连接后将转发到网络聊天。

希望得到帮助!