8base-chat 中文文档教程

Question

<<<<<<<< HEAD

8base Chat

Usage

你应该有 react 和 react-dom 作为依赖。

使用示例（您可以在 example/src/pages/chat/index.tsx 中找到代码）：

// 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 (
    <div>
      <button onClick={onLogoutClick}>Logout</button>
      <button onClick={toggleSidebar}>Toggle sidebar</button>

      <Query query={USER_QUERY}>
        {({ loading, data }) => {
          if (loading || !data) {
            return <div>Loading...</div>;
          }

          return (
            <Chat
              currentUser={data.user} // We need it to fetch data for currentUser (channels, etc.)
              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,
              }}
            />
          );
        }}
      </Query>
    </div>
  );
}

export default withLogout(ChatPage);

Styling

聊天使用 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

启动聊天包

npm run dev

的监视模式 启动示例以查看聊天的工作方式

cd example
npm start

为了生成 graphql 类型、apollo 操作等，请运行以下命令：

npm run graphql-types

Polyfills

它使用 < code>AbortController 取消请求。 如果您需要支持不支持它的浏览器，您可以添加一个 polyfill（例如 abortcontroller-polyfill）