Build a Simple Chatbot with Svelte and ElizaBot
Have you ever wanted to create a simple chatbot? In this article, we'll use Svelte and the classic ElizaBot to build a lightweight chatbot application. You'll learn how to handle user interactions, manage reactive state, and even simulate a typing delay for a realistic experience.
Let's dive in!
Prerequisites
To follow along, you'll need:
- Basic knowledge of Svelte.
- A working environment to build Svelte apps. If you don't have one, check out the Svelte Getting Started guide.
Setting Up the Project
Start by installing ElizaBot, a simple chatbot library:
npm install elizabot
Create a new Svelte app using your preferred method, and then include the following code in a Svelte component file (e.g., Chatbot.svelte
).
The Code
Here’s the complete code for the chatbot:
Script
<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>
Styling
<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 Markup
<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>
How It Works
-
User Input Handling:
- When the user types a message and presses "Enter," it's added to the
comments
array with the author set asuser
.
- When the user types a message and presses "Enter," it's added to the
-
ElizaBot Reply:
- The message is passed to ElizaBot for a response using
eliza.transform(text)
. - A placeholder message (
...
) is shown during the simulated typing delay. The final response is then displayed after a short random delay to simulate typing.
- The message is passed to ElizaBot for a response using
-
Auto-Scroll:
- The
beforeUpdate
andafterUpdate
lifecycle hooks ensure the chat automatically scrolls to the latest message unless the user manually scrolls up.
- The
-
Styling:
- Messages from the bot and user are styled differently using dynamic CSS classes (
eliza
anduser
). This helps visually distinguish between the bot's responses and the user's input.
- Messages from the bot and user are styled differently using dynamic CSS classes (
Running the App
Start your Svelte app, and you'll see a chat interface with ElizaBot. Try typing messages and watch the bot respond. The delay gives a natural feel to the interaction.
Enhancements
Want to take this further? Here are some ideas:
- Add a Send Button: Include a button to send messages in addition to pressing "Enter." This can improve accessibility and user experience.
- Keyword-Specific Responses: Enhance ElizaBot's responses by adding custom logic for certain keywords or phrases.
- Message Timestamps: Display timestamps for each message to give the chat a more realistic feel.
- Persist Chat History: Save the chat history in local storage or a database so users can revisit their previous conversations.
- Typing Animation: Add an animation or spinner for ElizaBot to make the typing delay more visually engaging.
- Mobile Responsiveness: Ensure the chat interface adapts well to different screen sizes for a seamless experience on mobile devices.
Conclusion
In this tutorial, we built a simple chatbot using Svelte and ElizaBot. This example demonstrates Svelte’s reactivity and lifecycle hooks in action, while also providing a fun and interactive way to experiment with chatbots.
Top comments (1)
Bold choice. I mean, ElizaBot's been around since, what, the 60s? But hey, if you can make something that actually works with Svelte, more power to you. Props for keeping it old school while using modern tools, I guess.