使用 svelte 和 elizabot 构建简单的聊天机器人
您是否曾经想过创建一个简单的聊天机器人？在本文中，我们将使用 svelte 和经典的 elizabot 构建一个轻量级聊天机器人应用程序。您将学习如何处理用户交互、管理反应状态，甚至模拟打字延迟以获得真实的体验。
让我们开始吧！
先决条件
要继续操作，您需要：
- svelte的基本知识。
- 构建 svelte 应用程序的工作环境。如果您没有，请查看 svelte 入门指南。
设置项目
首先安装 elizabot，一个简单的聊天机器人库：
npm install elizabot
使用您喜欢的方法创建一个新的 svelte 应用程序，然后将以下代码包含在 svelte 组件文件中（例如 chatbot.svelte）。
守则
这是聊天机器人的完整代码：
脚本
<script> import eliza from 'elizabot'; import { afterupdate, beforeupdate } from 'svelte'; let div; let autoscroll; const eliza = new eliza(); let comments = [{ author: 'eliza', text: eliza.getinitial() }]; function handlekeydown(event) { if (event.key === 'enter') { const text = event.target.value.trim(); if (!text) return; comments = comments.concat({ author: 'user', text }); event.target.value = ''; const reply = eliza.transform(text); settimeout(() => { comments = comments.concat({ author: 'eliza', text: '...', placeholder: true }); settimeout(() => { comments = comments.filter((comment) => !comment.placeholder).concat({ author: 'eliza', text: reply }); }, math.random() * 500); }, math.random() * 200); } } beforeupdate(() => { autoscroll = div && (div.offsetheight + div.scrolltop) > (div.scrollheight - 20); }); afterupdate(() => { if (autoscroll) div.scrollto(0, div.scrollheight); }); </script>
造型
<style> .chat { display: flex; flex-direction: column; height: 100%; max-width: 320px; } .scrollable { flex: 1 1 auto; border-top: 1px solid #eee; margin: 0 0 0.5em 0; overflow-y: auto; } article { margin: 0.5em 0; } .user { text-align: right; } span { padding: 0.5em 1em; display: inline-block; } .eliza span { background-color: #eee; border-radius: 1em 1em 1em 0; } .user span { background-color: #ea0a0a; color: white; border-radius: 1em 1em 0 1em; word-break: break-all; } </style>
html 标记
<div class="chat"> <h1>Eliza</h1> <div class="scrollable" bind:this={div}> {#each comments as comment} <article class={comment.author}> <span>{comment.text}</span> </article> {/each} </div> <input type="text" on:keydown={handleKeydown} placeholder="Type your message and press Enter"> </div>
它是如何运作的
-
用户输入处理:
- 当用户键入消息并按“enter”键时，该消息就会添加到评论数组中，并将作者设置为用户。
-
elizabot 回复：
-
自动滚动:
- beforeupdate 和 afterupdate 生命周期挂钩确保聊天自动滚动到最新消息，除非用户手动向上滚动。
-
造型：
- 来自机器人和用户的消息使用动态 css 类（eliza 和用户）设置不同的样式。这有助于在视觉上区分机器人的响应和用户的输入。
运行应用程序
启动您的 svelte 应用程序，您将看到与 elizabot 的聊天界面。尝试输入消息并观察机器人的响应。延迟给交互带来自然的感觉。
增强功能
想要更进一步吗？这里有一些想法：
- 添加发送按钮：除了按“enter”之外，还包括一个发送消息的按钮。这可以提高可访问性和用户体验。
- 特定于关键字的响应：通过为某些关键字或短语添加自定义逻辑来增强 elizabot 的响应。
- 消息时间戳：显示每条消息的时间戳，让聊天感觉更真实。
- 保留聊天历史记录：将聊天历史记录保存在本地存储或数据库中，以便用户可以重新访问之前的对话。
- 打字动画：为 elizabot 添加动画或旋转器，使打字延迟更具视觉吸引力。
- 移动响应能力：确保聊天界面能够很好地适应不同的屏幕尺寸，从而在移动设备上提供无缝体验。
结论
在本教程中，我们使用 svelte 和 elizabot 构建了一个简单的聊天机器人。此示例演示了 svelte 的反应性和生命周期挂钩的实际应用，同时还提供了一种有趣且交互式的方式来试验聊天机器人。
