Nocturnal Pumpkin Maelstrom

    @assister/chat
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    npm version Built With Stencil

    Assister Chat

    Chatbot and live chat Web Components

    Demo Gif

    Live Demo

    Install

    Unpkg

    <script type="module" src="https://unpkg.com/@assister/chat@latest/dist/chat/chat.esm.js"></script>
    <script nomodule src="https://unpkg.com/@assister/chat@latest/dist/chat/chat.js"></script>
    <link href="https://unpkg.com/@assister/chat@latest/dist/chat/chat.css" rel="stylesheet">

    NPM

    npm install @assister/chat --save

    Components

    All-in-one

    View only

    Usage

    <!doctype html>
    <html lang="en">
      <head>
        <script type="module" src="https://unpkg.com/@assister/chat@latest/dist/chat/chat.esm.js"></script>
        <link href="https://unpkg.com/@assister/chat@latest/dist/chat/chat.css" rel="stylesheet">
        <style>
          :root {
            /* --message-incoming-color: yellow; */
          }
        </style>
        <script>
          const responses = [
            'Interesting!',
            'Yeah, I thought so too.',
            `That'd be really cool, though I'm not sure what my schedule is...
    
            I'll let you know.`,
            'You think so?',
            'Great!',
            'Ah sh**!',
            "Well, that's new!",
            'Alright',
            'OK'
          ];
          function randomResponse() {
            const index = Math.floor(Math.random() * responses.length);
            return responses[index];
          }
          const wait = () => new Promise(resolve => setTimeout(resolve, 500));
          window.onload = () => {
            const fab = document.getElementById('fab');
            document.getElementById('close').addEventListener('click', () => fab.close());
            const pane = document.getElementById('pane');
            function handleIncomingMessage(event) {
              const message = event.detail;
              wait()
                .then(() => message.state = 'delivered')
                .then(wait)
                .then(() => message.state = 'read')
                .then(wait)
                .then(() => pane.addIncomingMessage(randomResponse()));
            }
            pane.addEventListener('incoming', handleIncomingMessage);
          }
        </script>
      </head>
      <body>
        <ion-app>      
          <ion-header>
            <ion-toolbar color="primary">
              <ion-title>Home</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content>
            <ion-list>
              <ion-item style="height: 3000px">
                  I'm here for scroll!
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-app>
    
        <fab-app id="fab">
          <chat-pane id="pane">
              <ion-toolbar slot="header" color="primary">
                <ion-title>Assister Chat</ion-title>
                <ion-buttons slot="primary">
                  <ion-button id="close">
                    <ion-icon slot="icon-only" name="close" />
                  </ion-button>
                </ion-buttons>
              </ion-toolbar>
              <ion-card style="background: white;">
                <ion-card-content>
                <p>Chat with this <i>Simple-Bot</i>!</p>
                <p>It knows only a few responses...</p>
                </ion-card-content>
              </ion-card>
              <chat-message state="read" footer="10:00 AM">
                <p>yess!!</p>
              </chat-message>
              <chat-message direction="incoming">
                <h2>Welcome to Assister Chat!</h2>
                <p>This is a demo for <b>chat-pane</b> web component.</p>
                <br />
                <p>
                  <b>chat-pane</b> is an <i>"all-in-one"</i> element that
                  encapsulates other chat elements, designed for simple
                  use cases.
                </p>
                <h2>Use with other libraries?</h2>
                <p>That's exactly the purpose of our design!</p>
                <br />
                <p>
                  However, you might want to use our <i>"view components"</i> so
                  that you have fine-grained control over things that render
                  inside <b>DOM</b>.
                </p>
              </chat-message>
              <chat-message state="pending"  footer="Hello! I'm little-footer!">
                <p>This is a <b>chat-message</b>!</p>
                <p>It has <i>"footer"</i> and <i>"state"</i> attributes.</p>              
              </chat-message>
              <chat-message state="delivered" footer="10:01 AM">
                <p>This one is <i>"delivered"</i>!</p>
              </chat-message>
              <chat-message state="read" footer="10:01 AM">
                <p><i>"read"</i>!</p>
              </chat-message>
              <chat-message direction="incoming" footer="10:02 AM">
                <p>Your turn!</p>
              </chat-message>
          </chat-pane>
        </fab-app>
      </body>
    </html>

    Resources

    CSS variables

    StencilJS

    Ionic 4

    License

    MIT

    Install

    npm i @assister/chat

    DownloadsWeekly Downloads

    17

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    9.05 MB

    Total Files

    1520

    Last publish

    Collaborators

    • keyvan-m-sadeghi
    • assister.ai