Logo

dev-resources.site

for different kinds of informations.

Build a Simple Chatbot with Svelte and ElizaBot

Published at
12/5/2024
Categories
svelte
javascript
chatbot
tutorial
Author
blamsa0mine
Author
11 person written this
blamsa0mine
open
Build a Simple Chatbot with Svelte and ElizaBot

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:


Setting Up the Project

Start by installing ElizaBot, a simple chatbot library:

npm install elizabot
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

svelte Article's
30 articles in total
Favicon
🚀 I have released Eurlexa!!! EU Regulation at Your Fingertips!
Favicon
Building "Digital DSA": The Journey of Crafting a Smarter Loan Comparison Platform
Favicon
Tower defense clicker game built with Svelte 5, without canvas. Only CSS transitions and the power of Runes
Favicon
Optimize SvelteKit performance with brotli compression
Favicon
Migrating the VSCode theme generator to oklch
Favicon
Beatbump: Exploring Svelte Best Practices for Dynamic Web Applications
Favicon
SvelteJs vs ReactJs : But both can co-exists!
Favicon
Build a Simple Chatbot with Svelte and ElizaBot
Favicon
A minimalist password manager desktop app: a foray into Golang's Wails framework (Part 2)
Favicon
The Perfect Trio: Wails, Go & Svelte in Action
Favicon
Svelte 5: Share state between components (for Dummies)
Favicon
Integrating SvelteKit with Storyblok (Using Svelte 5)
Favicon
Changelog 2024/48 aka We 🖤 Svelte 5
Favicon
My first Micro SaaS | Automated, SEO-friendly Changelogs
Favicon
Quit Using Anonymous Functions in Props!
Favicon
From Svelte 4 to Svelte 5: Understanding Slots (default and named)
Favicon
Make EditorJS work in Svelte(kit) SSR
Favicon
Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.
Favicon
A short guide to Async Components in Svelte 5
Favicon
New Post here!🍻
Favicon
Svelte vs Vue: Choosing the Best Front-End Framework
Favicon
Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation
Favicon
Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung
Favicon
ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development
Favicon
Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI
Favicon
Svelte
Favicon
A minimalist password manager desktop app: a foray into Golang's Wails framework (Part 1)
Favicon
When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte
Favicon
Deploying Your SvelteKit App to GitHub Pages with a Custom Domain (Ditch GoDaddy for Porkbun)
Favicon
Syncing DOM State and Data without IDs

Featured ones: