@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

Dependencies (1)

Dev Dependencies (1)

Package Sidebar

Install

npm i @assister/chat

Weekly Downloads

35

Version

0.1.1

License

MIT

Unpacked Size

9.05 MB

Total Files

1520

Last publish

Collaborators

  • keyvan-m-sadeghi
  • assister.ai