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

| Property | Type | Default | Required Case | Description | | :-------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | appName | String | | Always | The name of the dApp, which will be used as the 3Box space name by default. | | channelName | String | | Always | A unique ID/name for this chat | | organizer | ETH Address | | Always | The organizer of the chat, which will be used as the firstModerator parameter for a Persistent Thread in 3Box | | canJoin | Object | | Always | The contract and method for verifying whether an account can join the chat or not | | canModerate | Object | | Always | The contract and method to verifying whether an account can join as a moderator/admin of the chat | | members | Array of ETH Address | | Optional | The members of a chat will be added if provided. | | moderators | Array of ETH Address | | Optional | The moderators of a chat will be added if provided. | | secret | Boolean | False | Optional | A boolean - true - to make the chat content only visible to its members. False will make the chat visible to everyone. | | colorTheme | String/Boolean | False | Optional | Pass an rgb or hex color string to match the color theme of your application | | popup | Boolean | False | Optional | A boolean - true - to configure a pop up style chatbox with a button fixed to the bottom right of the window to pop open the chat UI. False will render the component in whichever container you have implemented. | | iconUrl | String | | Optional | Set the icon for the chat window | | onLoad({messages, likes, thread}) | Function | | Optional | The callback function which is called when the chat messages are loaded for the first time. The chat history of messages and likes, and the thread object will be returned | | onUpdate({messages, likes, thread}) | Function | | Optional | The callback function which is called when messages arrive. The messages and likes contains all the messages and likes | | onError | Function | | Optional | The callback function which is called when failed to send message to the chat. Parameters of (error, data, showError) will be sent to onError. error is the error thrown when failed, data contains the info membership data, and showError is the function to show error message which accepts message as its parameter |

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