Home >Web Front-end >JS Tutorial >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!
To follow along, you'll need:
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).
Here’s the complete code for the chatbot:
<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>
<div> <hr> <h2> How It Works </h2> <ol> <li> <p><strong>User Input Handling</strong>:</p> <ul> <li>When the user types a message and presses "Enter," it's added to the comments array with the author set as user.</li> </ul> </li> <li> <p><strong>ElizaBot Reply</strong>:</p> <ul> <li>The message is passed to ElizaBot for a response using eliza.transform(text).</li> <li>A placeholder message (...) is shown during the simulated typing delay. The final response is then displayed after a short random delay to simulate typing.</li> </ul> </li> <li> <p><strong>Auto-Scroll</strong>:</p> <ul> <li>The beforeUpdate and afterUpdate lifecycle hooks ensure the chat automatically scrolls to the latest message unless the user manually scrolls up.</li> </ul> </li> <li> <p><strong>Styling</strong>:</p> <ul> <li>Messages from the bot and user are styled differently using dynamic CSS classes (eliza and user). This helps visually distinguish between the bot's responses and the user's input.</li> </ul> </li> </ol> <hr> <h2> Running the App </h2> <p>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.</p> <hr> <h2> Enhancements </h2> <p>Want to take this further? Here are some ideas:</p>
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.
The above is the detailed content of Build a Simple Chatbot with Svelte and ElizaBot. For more information, please follow other related articles on the PHP Chinese website!