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

1. User Input Handling:

   • When the user types a message and presses "Enter," it's added to the comments array with the author set as user.

2. 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.

3. Auto-Scroll:

   • The beforeUpdate and afterUpdate lifecycle hooks ensure the chat automatically scrolls to the latest message unless the user manually scrolls up.

4. Styling:

   • 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.

---

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.