smart-chat-react v0.1.15

Smart Chat

A Chat System SDK With On Chain Access Control List.

Built on top of 3Box, and enfources smart contract logic for ACL.

Try the demo here

Chat Access Control with Smart Contract

Smart Chat by default uses Persistent Thread to preserve the chat history, and control the permission of members and moderators. The messages in the chat will sustain unless the moderators delete them. By integrating smart contracts into the thread, it enforces on-chain ACL into a Chat System for your DApp, DAO, events, projects and teams.

We'll also extend the support to Ghost Thread, and Confidential Thread, and keep the access control with smart contract.

smart-chat-react

smart-chat-react provides:

1. a Chat React component called ChatRoom, built with the 3box-chatbox, and natively invoke smart contract functions to filter the members / moderators.
2. Chat APIs for listing members and moderators, getting posts, post messages, etc. (We may move chat APIs into a separate project later)

Getting Started

1. Install the component
2. Use the component
3. Use chat APIs

1. Install the component

npm i -S smart-chat-react

2. Use the component

Example

import ChatRoom from 'smart-chat-react';
const Chat = props => {
  const {
    party,
    web3,
  } = props

  const members = party.participants.map(p => p.user.address)
  const moderators = party.admins.map(p => p.user.address)
  const owner = moderators && moderators.length > 0 ? moderators[0] : members[0];

  let canJoin = null
  let canModerate = null
  if (web3) {
    try {
      const contract = new web3.eth.Contract(Conference.abi, party.address)
      canJoin = {
        contract,
        method: "isRegistered"
      }
      canModerate = {
        contract,
        method: "isAdmin"
      }
    } catch(e) {
      console.log("Failed to load contract", party, e)
    }
  }

  return (
    <ChatRoom
      appName="Kickback"
      channelName={party.address}
      canJoin={canJoin}
      canModerate={canModerate}
      organizer={owner}
      members={members}
      moderators={moderators}
      colorTheme="#6E76FF"
      popup
    />
  )
}

You can also refer to here as a more complete working example.

Prop Types

3. Use chat APIs

Here we support the APIs in both browser and node.js environment, for listing members and moderators of a chat, getting posts, etc. See the example below.

You can even build a chatbot based on the chat APIs. Will add a chatbot example later.

Let me know if you'd like to add more interfaces such as add members or moderators, which now are only supported via the React components.

Example

import { getChat } from 'smart-chat-react';

const chat = await getChat(appName, channelName, organizer)

const members = await chat.listMembers()
const moderaors = await chat.listModerators()

let posts = await chat.getHistory()
console.log(posts)

// you can also specify a number of posts you want
posts = await chat.getHistory({limit: 20})
console.log(posts)

// you may also want to listen on update
chat.onUpdate(() => {
  chat.getHistory({limit: 1}).then(res => {
    console.log('latest post', res)
  })
})

You can also list the members, moderators, and fetch the chat history in Browser in real time, without providing the appName, channelName and organizer parametes.

// window.smart_chat is the instance of the ChatRoom
const chat = window.smart_chat

const members = await chat.listMembers()
const moderaors = await chat.listModerators()

let posts = await chat.getHistory()
console.log(posts)

// you can also specify a number of posts you want
posts = await chat.getHistory({limit: 20})
console.log(posts)

// you may also want to listen on update
chat.onUpdate(() => {
  chat.getHistory({limit: 1}).then(res => {
    console.log('latest post', res)
  })
})

More options of the getHistory function can be found in thread.getPosts(opts)

An example of chat history:

{"postId": "zdpuAn2kLrHLMAF4s3ds8WdGzNDLdqQRMF7cfma4hyuVgivYm", "author": "did:3:bafyre...", "message": "hello", "timestamp": 1587051150, "address": "0xf4398..."}
{"postId": "zdpuAnAVvRyR2zoCZn9xps2ksoLHshanA874ereMixLqspPcS", "author": "did:3:bafyre...", "message": "how are you", "timestamp": 1587051155, "address": "0xf4398..."}
{"postId": "zdpuAmz7sQpvjyvCmQbpjtyALE29VA5AWvFtB9GndPEBjMTCN", "author": "did:3:bafhij...", "message": "awesome", "timestamp": 1587051171, "address": "0xghe3w..."}

Release Notes

• v0.1.12: (1) add onError callback for customizing error message and handling when failed to send message; (2) embed images and videos for URL preview in chat window.

License

MIT