Home >Web Front-end >JS Tutorial >Build a Simple Chatbot with Svelte and ElizaBot

Build a Simple Chatbot with Svelte and ElizaBot

Susan Sarandon
Susan SarandonOriginal
2024-12-13 13:43:09494browse

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:

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn