Svelte ? ElizaBot? ???? ??? Chatbot ??

??? ??? ??? ??? ?? ???? ? ????? Svelte? ??? ElizaBot? ???? ??? ?? ??????? ??? ?????. ??? ?? ??? ????, ?? ??? ????, ???? ??? ?? ??? ??? ??????? ??? ??? ???.

????!

?? ??

????? ??? ?????.

• Svelte? ?? ?? ??
• Svelte ?? ???? ?? ?? ??. ?? ?? Svelte ???? ???? ?????.

???? ??

??? ?? ?????? ElizaBot? ???? ??? ?????.

npm install elizabot

??? ??? ???? ? Svelte ?? ?? ? Svelte ?? ?? ??(?: Chatbot.svelte)? ?? ??? ?????.

??

??? ??? ?? ?????.

????

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

????

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

<div>




<hr>

<h2>
  
  
  ?? ??
</h2>

<ol>
<li>
<p><strong>??? ?? ??</strong>:</p>

<ul>
<li>???? ???? ???? "Enter"? ??? ???? ???? ??? ?? ??? ???? ?????.</li>
</ul>
</li>
<li>
<p><strong>ElizaBot ??</strong>:</p>

<ul>
<li>eliza.transform(text)? ???? ??? ?? ???? ElizaBot?? ?????.</li>
<li>?????? ?? ?? ??? ?? ??? ???(...)? ?????. ?? ?? ??? ??????? ?? ?? ??? ?? ?? ?? ??? ?????.</li>
</ul>
</li>
<li>
<p><strong>?? ???</strong>:</p>

<ul>
<li>beforeUpdate ? afterUpdate ?? ?? ??? ???? ???? ?? ????? ?? ? ??? ???? ?? ???? ?????? ???.</li>
</ul>
</li>
<li>
<p><strong>????</strong>:</p>

<ul>
<li>?? ???? ???? ?? CSS ???(eliza ? ???)? ???? ??? ??? ?????. ?? ?? ??? ???? ??? ????? ???? ? ??? ???.</li>
</ul>
</li>
</ol>


<hr>

<h2>
  
  
  ? ??
</h2>

<p>Svelte ?? ???? ElizaBot?? ?? ?????? ?????. ???? ???? ?? ???? ?? ?????. ??? ?? ??? ????? ??? ???.</p>


<hr>

<h2>
  
  
  ??? ??
</h2>

<p>? ??? ???? ?????? ? ?? ????? ??? ????.</p>

• ??? ?? ??: "Enter" ?? ??? ? ?? ???? ??? ??? ?????. ?? ?? ???? ??? ??? ??? ? ????.
• ???? ??: ?? ???? ??? ?? ?? ??? ???? ElizaBot? ??? ?????.
• ??? ?????: ? ???? ?????? ???? ??? ?? ???? ??? ???.
• ?? ?? ??: ???? ?? ??? ?? ??? ? ??? ?? ???? ??????? ?? ??? ?????.
• ??? ?????: ElizaBot? ??????? ???? ???? ??? ??? ????? ?? ????? ????.
• ??? ???: ??? ???? ??? ??? ?? ?? ?????? ??? ?? ??? ? ????? ?????.

??

? ??????? Svelte? ElizaBot? ???? ??? ??? ??????. ? ???? Svelte? ??? ? ?? ?? ??? ??? ???? ??? ?? ?? ??? ??? ??? ? ?? ???? ??? ??? ?????.

? ??? Svelte ? ElizaBot? ???? ??? Chatbot ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!