Chat component that uses 8base

Usage no npm install needed!

<script type="module">
  import baseChat from 'https://cdn.skypack.dev/8base-chat';


<<<<<<< HEAD

8base Chat


You should have react and react-dom as dependencies.

Example of usage (you can find code in example/src/pages/chat/index.tsx):

// You need to import styles
import '8base-chat/dist/8base-chat.css';

import { withLogout } from '@8base/auth';
import React, { useCallback, useState } from 'react';
import { Query } from 'react-apollo';

// After you imported styles you can use Chat
import Chat from '8base-chat';
import { API_ENDPOINT, WORKSPACE_ID } from 'shared/constants';
import { USER_QUERY } from 'shared/graphql';

function ChatPage({ logout, auth }) {
  const [isSidebarVisible, setIsSidebarVisible] = useState(true);

  const toggleSidebar = useCallback(() => {
    setIsSidebarVisible(value => !value);
  }, []);

  const onLogoutClick = useCallback(() => {
  }, [logout]);

  return (
      <button onClick={onLogoutClick}>Logout</button>
      <button onClick={toggleSidebar}>Toggle sidebar</button>

      <Query query={USER_QUERY}>
        {({ loading, data }) => {
          if (loading || !data) {
            return <div>Loading...</div>;

          return (
              currentUser={data.user} // We need it to fetch data for currentUser (channels, etc.)
              uri={API_ENDPOINT} // Where requests will be sent
              authToken={auth.authState.token} // Will be used in requests 'authorization' header
              workspaceId={WORKSPACE_ID} // We need it for subscriptions
              // You can specify which sections to display
                channels: true,
                contacts: true,
                dm: true,

export default withLogout(ChatPage);


The chat uses CSS Variables for colors. If you want to change colors change the following variables:

:root {
  --chat-primary-color: #3eb7f9;
  --chat-primary-bg-color: #fff;
  --chat-hover-bg-color: #f4f7f9;
  --chat-primary-text-color: #323c47;
  --chat-secondary-text-color: #939ea7;
  --chat-primary-border-color: #d0d7dd;
  --chat-placeholder-color: var(--chat-secondary-text-color);
  --chat-active-presence-color: #00bb6e;
  --chat-message-bg-color: #4da1ff;
  --chat-message-text-color: #fff;
  --chat-message-link-color: var(--chat-message-text-color);
  --chat-my-message-bg-color: var(--chat-primary-bg-color);
  --chat-my-message-text-color: var(--chat-primary-text-color);
  --chat-my-message-link-color: var(--chat-primary-color);


Launch watch mode for the chat package

npm run dev

Launch the example in order to see how the chat works

cd example
npm start

In order to generate graphql types, apollo operations and so on, run the command below:

npm run graphql-types


It uses AbortController to cancel requests. If you need support browsers that don't support it you can add a polyfill (e.g. abortcontroller-polyfill)