Build a Simple Chatbot with Svelte and ElizaBot

Prerequisites

To follow along, you’ll need:

Setting Up the Project

Start by installing ElizaBot, a simple chatbot library:

npm install elizabot


The Code
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);
    });

Styling


HTML Markup


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 as user.

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.

Auto-Scroll:

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

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.

				 Post Views: 31