npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@openbot/aibot-uikit

v0.0.32

Published

React components to create chat conversations or livestream style chat

Downloads

38

Readme

Official React SDK for OneChat

The official React components for OneChat, a service for building chat applications.

Quick Links

With our component library, you can build a variety of chat use cases, including:

  • Livestream like Twitch or YouTube
  • In-game chat like Overwatch or Fortnite
  • Team-style chat like Slack
  • Messaging-style chat like WhatsApp or Facebook's Messenger
  • Customer support chat like Drift or Intercom

React Chat Tutorial

The best way to get started is to follow the React Chat Tutorial. It shows you how to use this SDK to build a fully functional chat application and includes common customizations.

Free for Makers

OneChat is free for most side and hobby projects. To qualify, your project/company must have no more than 5 team members and earn less than $10k in monthly revenue. For complete pricing and details visit our Chat Pricing Page.

Installation

Install with NPM

npm install react react-dom @openbot/aibot-uikit

Install with Yarn

yarn add react react-dom @openbot/aibot-uikit

Install via CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@openbot/aibot-uikit"></script>

Example Apps

We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these demos on our website.

Docs

We use a doc generator to build our component documentation. We provide a brief description of each chat component and define all of the props it accepts.

TypeScript Support

Please read the TypeScript guide for details and implementation assistance.

Component Reusability

For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the Message UI component with MessageTeam, without affecting any logic in the app.

<Channel Message={MessageTeam}>
  <Window>
    <ChannelHeader />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>

Customizing Styles

The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any OneChat styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:

import '@stream-io/stream-chat-css/dist/css/index.css';
import './App.css';

Internationalization

Our library supports auto-translation for various user languages. Please read our internationalization documentation for further details and setup guidance.

Contributing

We welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our Contributor License Agreement (CLA) first. See our license file for more details.

We are hiring!

Our APIs are used by more than a billion end-users, and by working at OpenBot, you have the chance to make a huge impact on a team of very strong engineers.

Check out our current openings and apply via OpenBot's website.