<<<<<<< HEAD # 8base Chat ## Usage 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

; } return ( ); }}

); } export default withLogout(ChatPage); ``` ## Styling 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); } ``` ## Development 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 ``` ## Polyfills 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](https://www.npmjs.com/package/abortcontroller-polyfill))