使用 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 回复：
- 消息通过 eliza.transform(text) 传递给 elizabot 进行响应。
- 在模拟打字延迟期间会显示占位符消息 (...)。然后在短暂的随机延迟后显示最终响应以模拟打字。
-
自动滚动:
- beforeupdate 和 afterupdate 生命周期挂钩确保聊天自动滚动到最新消息，除非用户手动向上滚动。
-
造型：
- 来自机器人和用户的消息使用动态 css 类（eliza 和用户）设置不同的样式。这有助于在视觉上区分机器人的响应和用户的输入。
运行应用程序
启动您的 svelte 应用程序，您将看到与 elizabot 的聊天界面。尝试输入消息并观察机器人的响应。延迟给交互带来自然的感觉。
增强功能
想要更进一步吗？这里有一些想法：
- 添加发送按钮：除了按“enter”之外，还包括一个发送消息的按钮。这可以提高可访问性和用户体验。
- 特定于关键字的响应：通过为某些关键字或短语添加自定义逻辑来增强 elizabot 的响应。
- 消息时间戳：显示每条消息的时间戳，让聊天感觉更真实。
- 保留聊天历史记录：将聊天历史记录保存在本地存储或数据库中，以便用户可以重新访问之前的对话。
- 打字动画：为 elizabot 添加动画或旋转器，使打字延迟更具视觉吸引力。
- 移动响应能力：确保聊天界面能够很好地适应不同的屏幕尺寸，从而在移动设备上提供无缝体验。
结论
在本教程中，我们使用 svelte 和 elizabot 构建了一个简单的聊天机器人。此示例演示了 svelte 的反应性和生命周期挂钩的实际应用，同时还提供了一种有趣且交互式的方式来试验聊天机器人。
