@b2chatorg/chat-center-widget-sdk

This is small lib that allows interoperabilty with B2Chat Console

Getting start

• Installation
• Usage

Core

• EventEmitter
• Writable
• Readable
• React hook useAsyncFunction

B2ChatStore

• Properties
  • activeChat
  • agentInfo
  • departments
  • inputMessageContent
• Events
  • chatClosed
• Methods
  • findChat
  • getTags
  • assignedTags
  • assignTags
  • unassignTags
  • setInputMessageContent
  • updateChatInfo
  • getContactInfoProperties
  • getUUID
  • sendMessage
  • findContact
  • Types

Installation

We recommend to use this React template to bootstrap a widget

But if you prefer use a different UI lib than React as Svelte or Vue, only need to install this package:

npm install @b2chatorg/chat-center-widget-sdk

and start the development server at 3010 port.

Usage

You can subscribe to properties.

import { getB2ChatStore } from "@b2chatorg/chat-center-widget-sdk";

/// get b2chat store instance
const store = getB2ChatStore();

// subscribe to new changes
const unsub = store.state.activeChat.subscribe((chat) => {
  console.log(chat);
});

// stop receive changes
unsub();

You can do the same with React.

import { useEffect, useState } from "react";
import { useB2ChatStore } from "@b2chatorg/chat-center-widget-sdk/dist/react";

const App = () => {
  const { state } = useB2ChatStore();

  useEffect(() => { // subscribe to new changes
    console.log(state.activeChat);
  }, [state.activeChat]);

  return (
    <div>{state.activeChat.chatId}<div>
  );
};

Core

These are utils that are available for public usage and are the core of this SDK.

EventEmitter ➡️

import { eventEmitter } from "@b2chatorg/chat-center-widget-sdk/dist/utils/eventEmitter";

const eventEmitter: <T>(start?: StartStopNotifier<T>) => EventEmitter<T>;

A function that create a minimal EventEmitter to dispatch a single event type. It is an object with dispatch and subscribe methods.

subscribe, dispatch Methods

// start: StartStopNotifier
const emitter = eventEmitter<string>();

const unsubscribe = emitter.subscribe((event) => console.log(event));

emitter.dispatch("hello"); // logs 'hello'

unsubscribe(); // unsubscribe

emitter.dispatch("world"); // does nothing

start/stop Lifecycle

start is executed just before the first subscription, it could returns a stop callback that will be executed by the emitter after the last unsubscription.

// `start` callback
const emitter = eventEmitter<string>((dispatch) => {
  console.log("first subscriber");

  // `stop` callback
  return () => console.log("no subscribers");
});

emitter.dispatch("hello"); // does nothing

const unsub = emitter.subscribe((event) => {
  console.log(event);
}); // logs `first subscriber`;

emitter.dispatch("hello"); // logs 'hello'

unsub(); // will exec `stop` callback and logs 'no subscribers'

Writable

export const writable = <T>(
  initialValue: T,
  start?: StartStopNotifier<T>,
  equalFn: EqualFn<T> = strictEquals
) => Writable<T>;

It creates a mutable value observable

Usage

subscribe, get, set and update

import { writable } from "@b2chatorg/chat-center-widget-sdk/dist/utils/store";

const count = writable<number>(0);

const unsub = count.subscribe((value) => console.log(value));

count.set(2); // logs '1'
console.log(count.get()); // logs '1'

count.update((current) => current + 1); // increments count and logs '2'

unsub(); // unobserve count

when(predicate)

It waits for condition to be fulfill

const counter = writable(0, (set, update) => {
  const interval = setInterval(() => {
    update(val => val + 1)
  }, 1000)

  return () => clearInterval(interval)
});

async waitUntil10() {
  await counter.when(val => val === 10)
  console.log('10 reached!')
}

waitUntil10()

Readable

export const readable = <T>(
  initialValue: T,
  start?: StartStopNotifier<T>,
  equalFn: EqualFn<T> = strictEquals
): Readable<T> => writable(initialValue, start, equalFn);

Similar to a Writable but it is a non-mutable observable

Example:

import { readable } from "@b2chatorg/chat-center-widget-sdk/dist/utils/store";

const ticktock = readable("tick", (set, update) => {
  const interval = setInterval(() => {
    update((sound) => (sound == "tick" ? "tock" : "tick"));
  }, 1000);

  return () => clearInterval(interval);
});

const unsub = ticktock.subscribe((value) => console.log(value)); // logs 'tick' or 'tock' each seg

unsub(); // unobserve tictock and stop ticktock

React Hook UseAsyncFunction

const useAsyncFunction = <
  Fn extends (...args: any[]) => Promise<any>,
  E = Error
>(
  fn: Fn,
  initialResult?: Awaited<ReturnType<Fn>>
) => UseAsyncFunctionInstance<Fn, E>;

type UseAsyncFunctionInstance<
  Fn extends (...args: any[]) => Promise<any>,
  E = unknown
> = {
  args: Parameters<Fn> | [];
  result: Awaited<ReturnType<Fn>>;
  error: E;
  isPending: boolean;
  isSuccess: true;
  isError: false;
};

This is a React hook to manage async calls, it takes a async fn and optionally an initialResult to use as initial value for result prop

Usage

import useAsyncFunction from "@b2chatorg/chat-center-widget-sdk/dist/react/useAsyncFunction";

const doLogin = async (user: string) => {
  await new Promise(r => setTimeout(r, 2000)); // wait 2 seg

  if (user === "david") return { user };

  throw new Error("Unknown user");
};

const App = () => {
  const login = useAsyncFunction(doLogin);

  useEffect(() => {
    login('david')
  }, [])

  return (
    <div>
      {login.isPending & "loading..."}
      {login.isSuccess && (<div>Login success: {login.result.user}<div>)}
      {login.isError && (<div>Login failed: {login.error.message}<div>)}
    </div>
  );
};

B2ChatStore

B2ChatStore is simply a set of properties, events and methods that allow subscribe, listen or take actions inside the B2Chat console. It is agnostic to any UI library but there are some pretty easy utils to work with React.

JS vanilla

import { getB2ChatStore } from "@b2chatorg/chat-center-widget-sdk";

/// get b2chat store instance
const store = getB2ChatStore();

// subscribe to new changes
const unsub = store.state.activeChat.subscribe((chat) => {
  console.log(chat);
});

// stop receive changes
unsub();

const result = await store.methods.findChat({ contactName: "foo" }); // find a chat in the current tray

With React library

import { useEffect, useState } from "react";
import { useB2ChatStore } from "@b2chatorg/chat-center-widget-sdk/dist/react";

const App = () => {
  const { state } = useB2ChatStore();

  useEffect(() => { // subscribe to new changes
    console.log(state.activeChat);
  }, [state.activeChat]);

  return (
    <div>{state.activeChat.chatId}<div>
  );
};

Properties

activeChat: Readable<Chat>

It contains the Chat actually selected by the agent.

Example

const { state } = getB2ChatStore();
state.activeChat.subscribe((activeChat) => {
  console.log(activeChat.chatId);
});

// or with React
const App = () => {
  const { state } = useB2ChatStore();
  return <div>{state.activeChat.chatId}</div>;
};

agentInfo: Readable<AgentInfo>

It has the basic information about the agent and the departments which it belongs. If you want to search for an specific chat use : findChat

Example

const { state } = getB2ChatStore();
state.agentInfo.subscribe((agentInfo) => {
  console.log(agentInfo.username);
});

// or with React
const App = () => {
  const { state } = useB2ChatStore();
  return <div>{state.agentInfo.username}</div>;
};

departments: Readable<Department[]>

It has the list the all posible departments for this merchant

Example

const { state } = getB2ChatStore();
state.departments.subscribe((departments) => {
  departments.forEach((item) => console.log(item.tagName));
});

// or with React
const App = () => {
  const { state } = useB2ChatStore();
  return (
    <>
      {state.departments.map((item) => (
        <div>{item.tagName}</div>
      ))}
    </>
  );
};

inputMessageContent: InputMessageContent

It has the console input message. See setInputMessageContent to modify its value

Example

const { state } = getB2ChatStore();
state.inputMessageContent.subscribe((content) => {
  console.log(content.chatId, content.text);
});

// or with React
const App = () => {
  const { state } = useB2ChatStore();
  return <div>{state.inputMessageContent.text}</div>;
};

Events

onChatClosed: Emitter

event emitted when a chat is closed wether by agent or contact

Methods

findChat: (query: FindChatQuery) => Promise<FindChatResponse>

Find a chat by name, chatId or tags.

The query can be omitted to traverse through all chats

const { methods } = getB2ChatStore();
const response = await findChat({ contactName: "jean", limit: 10 });
console.log(response.data);

Types

All types related to B2Chat are available at:

import {...} from "@b2chatorg/chat-center-widget-sdk/dist/types";

Please take a look to all types.