使用 svelte 和 elizabot 构建简单的聊天机器人

您是否曾经想过创建一个简单的聊天机器人？在本文中，我们将使用 svelte 和经典的 elizabot 构建一个轻量级聊天机器人应用程序。您将学习如何处理用户交互、管理反应状态，甚至模拟打字延迟以获得真实的体验。

让我们开始吧！

先决条件

要继续操作，您需要：

• svelte的基本知识。
• 构建 svelte 应用程序的工作环境。如果您没有，请查看 svelte 入门指南。

设置项目

首先安装 elizabot，一个简单的聊天机器人库：

npm install elizabot

使用您喜欢的方法创建一个新的 svelte 应用程序，然后将以下代码包含在 svelte 组件文件中（例如 chatbot.svelte）。

守则

这是聊天机器人的完整代码：

脚本

造型

html 标记

    
Eliza
    

        {#each comments as comment}
            

                {comment.text}
            
        {/each}
    
    

它是如何运作的

1. 用户输入处理:

   

   StickerBaker

   免费开源的AI贴纸头像生成工具

   下载
   • 当用户键入消息并按“enter”键时，该消息就会添加到评论数组中，并将作者设置为用户。

2. elizabot 回复：

   • 消息通过 eliza.transform(text) 传递给 elizabot 进行响应。
   • 在模拟打字延迟期间会显示占位符消息 (...)。然后在短暂的随机延迟后显示最终响应以模拟打字。

3. 自动滚动:

   • beforeupdate 和 afterupdate 生命周期挂钩确保聊天自动滚动到最新消息，除非用户手动向上滚动。

4. 造型：

   • 来自机器人和用户的消息使用动态 css 类（eliza 和用户）设置不同的样式。这有助于在视觉上区分机器人的响应和用户的输入。

运行应用程序

启动您的 svelte 应用程序，您将看到与 elizabot 的聊天界面。尝试输入消息并观察机器人的响应。延迟给交互带来自然的感觉。

增强功能

想要更进一步吗？这里有一些想法：

• 添加发送按钮：除了按“enter”之外，还包括一个发送消息的按钮。这可以提高可访问性和用户体验。
• 特定于关键字的响应：通过为某些关键字或短语添加自定义逻辑来增强 elizabot 的响应。
• 消息时间戳：显示每条消息的时间戳，让聊天感觉更真实。
• 保留聊天历史记录：将聊天历史记录保存在本地存储或数据库中，以便用户可以重新访问之前的对话。
• 打字动画：为 elizabot 添加动画或旋转器，使打字延迟更具视觉吸引力。
• 移动响应能力：确保聊天界面能够很好地适应不同的屏幕尺寸，从而在移动设备上提供无缝体验。

结论

在本教程中，我们使用 svelte 和 elizabot 构建了一个简单的聊天机器人。此示例演示了 svelte 的反应性和生命周期挂钩的实际应用，同时还提供了一种有趣且交互式的方式来试验聊天机器人。