Chat component that uses 8base
npm install @cobuildlab/8base-chat<<<<<<< HEAD
You should have react and react-dom as dependencies.
Example of usage (you can find code in example/src/pages/chat/index.tsx):
``jsx
// 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();
}, [logout]);
return (
{({ loading, data }) => {
if (loading || !data) {
return Loading...;
}
return (
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
isSidebarVisible={isSidebarVisible}
// You can specify which sections to display
sections={{
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:
`css`
: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)