This is small lib that allows interoperabilty with B2Chat Console
-
Properties
- activeChat
- agentInfo
- departments
- inputMessageContent
- Events
- Methods
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-sdkand start the development server at 3010 port.
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>
);
};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.
// 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 nothingstart 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'export const writable = <T>(
initialValue: T,
start?: StartStopNotifier<T>,
equalFn: EqualFn<T> = strictEquals
) => Writable<T>;It creates a mutable value observable
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 countIt 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()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
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 ticktockconst 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
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 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 trayWith 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>
);
};It contains the Chat actually selected by the agent.
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>;
};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
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>;
};It has the list the all posible departments for this merchant
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>
))}
</>
);
};It has the console input message. See setInputMessageContent to modify its value
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>;
};event emitted when a chat is closed wether by agent or contact
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);All types related to B2Chat are available at:
import {...} from "@b2chatorg/chat-center-widget-sdk/dist/types";Please take a look to all types.