props

• profile (Object) The personal information.

{
 "id":"913de90c-c15f-41ce-abb7-8376f8622ae9",
 "avatar":"https://picsum.photos/id/0/200/200",
 "name":"Mindy Zboncak",
 "bio":"cloth advocate"
}

• contacts {Array}

const contacts = [
  {
    "id":"8bd61e5b-1b89-4138-a780-0b87ca454551", // contact ID - required
    "avatar":"https://picsum.photos/id/20/200/200", // The src attribute for the img element.
    "name":"Jeremy Wunsch",
    "bio":"millet advocate"
  },
  {
    "id":"0fd37273-5092-43dc-831f-94be2759bec1",
    "avatar":"https://picsum.photos/id/40/200/200",
    "name":"Mrs. Gladys Quigley",
    "bio":"acid fan"
  },
  {
    "id":"204df535-3c09-4ec0-9ba2-631ebd10b5c8",
    "avatar":"https://picsum.photos/id/60/200/200",
    "name":"Brent Dooley",
    "bio":"fixture lover, environmentalist ❤️‍🩹"
  }
]

• messages {Object} The key of the object is the ID of the contact. Value is the chat history sorted by time (the most recent chat is recorded at the end of the array).The purpose of designing the data structure in this way is to quickly find the chat history by the contact's ID.

const messages = {
  pinned:{
    "3763a725-ded4-45c5-aa04-bef43191999e": [
      {
        metadata:{
          id:"5c28e428-b717-4b6e-904d-54d6e133b3e6",
          senderId: "913de90c-c15f-41ce-abb7-8376f8622ae9",
          receiverId: "3763a725-ded4-45c5-aa04-bef43191999e",
          sendTime: 1710026806089,
          receiveTime: 1710026809089,
          type:"text"
        },
        content:{
          text:"Hello!Can you send me a photo of the sea?"
        },
        signature:""
      },
      {
        metadata:{
          id:"12f44f15-2402-425e-bba0-09cdc5c644d7",
          senderId: "3763a725-ded4-45c5-aa04-bef43191999e",
          receiverId: "913de90c-c15f-41ce-abb7-8376f8622ae9",
          sendTime: 1710038413089,
          receiveTime: 1710038415089,
          type:"image"
        },
        content:{
          src:"https://fastly.picsum.photos/id/14/1000/1000.jpg?hmac=oaPLPwNgk6TJdckR6XJ0nJZ37h4Lrk55bdBa6gHR9Fo"
        }
      }
    ]
  },
  regular:{
    "961035e9-ff53-47fa-a617-ee1befb9ca6e": [
      {
        metadata:{
          id:"1b36ef84-ad86-4ee9-9203-b094281ff7f2",
          senderId: "913de90c-c15f-41ce-abb7-8376f8622ae9",
          receiverId: "961035e9-ff53-47fa-a617-ee1befb9ca6e",
          sendTime: 1710029338841,
          receiveTime: 1710029343841,
          type:"text"
        },
        content:{
          text:"Yes, I went there last weekend. It's quite impressive!"
        },
        signature:""
      },
      {
        metadata:{
          id:"b64b3421-858c-489a-a0ee-85ab484e0dfc",
          senderId: "961035e9-ff53-47fa-a617-ee1befb9ca6e",
          receiverId: "913de90c-c15f-41ce-abb7-8376f8622ae9",
          sendTime: 1710045796841,
          receiveTime: 1710045798841,
          type:"text"
        },
        content:{
          text:"Definitely worth a visit. Also, are we still on for the hike this Saturday?"
        }
      }
    ]
  }
}

• onProfileUpdated {function} The function will be called when the user edits their profile.

function onProfileUpdated(props) {
  console.log(props)
}

<Chat onProfileUpdated={onProfileUpdated}></Chat>

const props = {
  updatedProfile: {
    avatar:"data:image/jpeg;base64,/9j/4AAQS...rVx9YE/xGXJ/9k=", // base64 encoded image
    name:"Mindy Zboncak",
    bio:"cloth advocate"
  }
}

• onSettingsUpdated {function} The function will be called when the user updates their settings.

function onSettingsUpdated(props) {
  console.log(props)
}

<Chat onSettingsUpdated={onSettingsUpdated}></Chat>

const props = {
  updatedSettings: {
    darkMode: true,
  }
}

• onAddContact {function} The function will be called when the user adds a new contact.

function onAddContact(props) {
  console.log(props)
}

<Chat onAddContact={onAddContact}></Chat>

const props = {
  contactId: "8bd61e5b-1b89-4138-a780-0b87ca454551",
  contactRemark: "Jeremy Wunsch",
  additionalInfo: "cloth advocate"
}

• onDeleteContact {function} The function will be called when the user deletes a contact.

function onDeleteContact(props) {
  console.log(props);
}

<Chat onDeleteContact={onDeleteContact}></Chat>

const props = {
  contactId: "8bd61e5b-1b89-4138-a780-0b87ca454551",
}

• onEditContactRemark {function} The function will be called when the user edits a contact's remark.

function onEditContactRemark(props) {
  console.log(props);
}

<Chat onDeleteContact={onEditContactRemark}></Chat>

const props = {
  contactId: "8bd61e5b-1b89-4138-a780-0b87ca454551",
  remark: "Jeremy Wunsch",
}

• onSendMessage {function} The function will be called when the user sends a message.

function onSendMessage(props) {
  console.log(props)
}

<Chat onSendMessage={onSendMessage}></Chat>

const props = {
  contactId: "8bd61e5b-1b89-4138-a780-0b87ca454551",
  type: "text",
  content: {
    text: inputText,
  }
}

• onHandleFriendRequest {function} The function will be called when the user handles a friend request.

function onHandleFriendRequest(props) {
  console.log(props)
}

<Chat onHandleFriendRequest={onHandleFriendRequest}></Chat>

const props = {
  contactId: "8bd61e5b-1b89-4138-a780-0b87ca454551",
  isAccepted: true
}

• onMessagePin {function} The function will be called when the user pins a message.

function onMessagePin(props) {
  console.log(props)
}

<Chat onMessagePin={onMessagePin}></Chat>

const props = {
  messageId: "5c28e428-b717-4b6e-904d-54d6e133b3e6",
}

onDeleteMessage {function} The function will be called when the user deletes a message.

function onDeleteMessage(props) {
  console.log(props)
}

<Chat onDeleteMessage={onDeleteMessage}></Chat>

const props = {
  messageId: "5c28e428-b717-4b6e-904d-54d6e133b3e6",
}