Introduction

LiveChat is a React component that enables the GJW visitors/Studio managers to chat live with other members.

Features

• Message List:
  • Show chat message history.
  • Support loading more old messages when scrolling to top
• Chat Editor:
  • Send a new message
  • Send a Reply message
  • Show total word count(max 200 characters)
• Context Menu:
  • Pin/Unpin message
  • Delete message
  • Reply message
  • Hide/Unhide member
• Realtime Channel:
  • Capture chat events in realtime: member join channel, incoming new msgs, deleted status, pin/unpin msg, hide/unhide member status, etc...
• UI:
  • Followed by design
  • Theming support: Dark & Light
  • CSS customization support
  • Chat Header:
    • Title
    • Close button
  • Chat Body:
    • Pinned message
    • Chat message history:
      • Show avatar, name of a chat message author, highlight it if this is channel name.
      • Show chat content
    • Hidden user list
    • Context Menu
    • Welcome message: Welcome to live chat! Remember to protect your privacy and respect others.
  • Chat Footer:
    • Editor
    • Show/Hide chat button
    • Render ShowChatButton element that defined by user(in case isOpened=false).
    • Show SignIn button in Guest mode
• Chat Visibility: Available only when isFree=true or purchased=true or current user is channel owner/manager.
• Allow to disable LiveChat and show the message in Disabled mode
• Allow to highlight author name if this is channel owner.
• Show disappear message when connection is disconnected.
• Toggle showing timestamp
• Localization support: Support localization in English/Traditional Chinese/Simplified Chinese

Some main concepts

• LiveChat component: The UI to show chat history, chat editor and allow the user to interact on that.
• The events object: Allow components/services to talk to each other
• LiveChatRealtime component:
  • Start websocket and keep it to be alive if needed.
  • Listen websocket events and process incoming data that pushed from Talk Server over websocket, e.g: new msg, pin/unpin msg, delete msg, etc... then save them to the store or push to the events object
  • Allow sending requests back to the backend over websocket.
• The useAppStore object: A place to keep application state and global data. States used to render UI components.
  • use const x = useAppStore(state => state.x); to capture data whenever the state.x changes.
  • To get current state, use useAppState.getState() function.
  • To update some data to the store, use the way as in below:

    useAppStore.setState(state => {
      state.x = x;
      state.y = y;
          
      return {...state};
    });

📦 Installation

Use the package manager npm or yarn to install choosen package in your project.

npm install gjw-live-chat
# or
yarn add gjw-live-chat

🚀 Usage

// LiveChatPage.tsx
import React, { useEffect } from "react";

import { LiveChat } from "../components";
import { Login } from "./Login";
import { useAppStore } from "../store";
import { ContentList } from "./ContentList";

import styles from './LiveChatPage.module.css';

export const LiveChatPage = (props: {
  userId?: string,
  contentId?: string,
  channelId?: string,
  token?: string,
  identity: TIdentity,
  style?: React.CSSProperties,
  locale?: TLanguageCode,
  disabled?: boolean,
  status?: TLiveStatus,
  wsEndpoint: string,
  apiEndpoint: string,
  collapseWhenDisabled?: boolean;
  opened?: boolean;
  hideHideChatButton?: boolean;
}) => {
  const token = useAppStore(s => props.token ?? s.token);
  const locale = useAppStore(s => s.locale);

  const userId = useAppStore(s => props.userId || s.userId);
  const channelId = useAppStore(s => props.channelId || s.current.channelId);
  const contentId = useAppStore(s => props.contentId || s.current.contentId);

  const apiEndpoint = useAppStore(s => s.environments.apiEndpoint);
  const isLoggedIn = useAppStore(s => s.isLoggedIn || !!s.token);

  const onLoginRequired = () => {
    useAppStore.setState(s => {
      s.isLoggedIn = false;
      s.current.contentId = '';
      s.current.channelId = '';
      s.token = '';

      return { ...s };
    });
  };

  return (
    <LiveChat
      showGettingStarted={!contentId || !isLoggedIn}
      contentId={contentId}
      channelId={channelId}
      userId={userId}
      token={token}
      disabled={props.disabled}
      style={{ height: 600, width: 450 }}
      onLoginRequired={onLoginRequired}
      locale="en-US"
      status={props.status}
      wsEndpoint={props.wsEndpoint}
      apiEndpoint={props.apiEndpoint}
      identity={props.identity}
      collapseWhenDisabled={props.collapseWhenDisabled}
      opened={props.opened}
      showCloseButton
      hideHideChatButton={props.hideHideChatButton}
      GettingStartedComponent={() => {
        if (!isLoggedIn) {
          return (
            <Layout style={props.style}>
              <Login />
            </Layout>
          );
        }

        if (!contentId) {
          return (
            <Layout style={props.style}>
              <ContentList />
            </Layout>
          );
        }

        return null;
      }}
    />
  );
};

const Layout = (props) => {
  return (
    <div className={styles.root}
      style={{ border: '1px solid #DCDCDC', height: 600, width: 400, ...props.style }}>
      {props.children}
    </div>
  );
};

MessageList Rendering Flow

Publish to NPM registry

• Build and bundle LiveChat component: yarn build (macos) or yarn win-build (windows)
• Increase package version, e.g: 2.3.80 --> 2.3.81
• Publish to NPM registry: npm publish

📃 License

The code and documentation in this project are released under the MIT License.