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>




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

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

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!