volkeno-react-messenger

The 'volkeno-react-messenger' module is a powerful and flexible messaging solution designed specifically for Volkeno's internal needs. Seamlessly integrating with Volkeno's internal data structure, this module provides a smooth and intuitive messaging experience for users.

Install

npm install --save volkeno-react-messenger

Usage

import VolkenoReactMessenger from 'volkeno-react-messenger'
import 'volkeno-react-messenger/dist/index.css'

class Example extends Component {
  render() {
    return (
      <VolkenoReactMessenger
        user={user}
        token={'token'}
        apiBaseUrl={'api_base_url'}
        setApiPostEndpoint={'/api/messages'}
        setApiListUsersEndpoint={'/api/List_user_url'}
        setApiConversationUserEndpoint={'/api/List_conversation_user_url'}
        socketUrl={'socket_url'}
     />
    )
  }
}

Configuration - Props

Props require

| Property | Type | Required | Value | Default | Description | | ------------------------------- | :------: | :------: | :---: | :------: | ---------------------------------------------------------------------- | | user | object | true | - | { } | Provide logged in user data | | token | string | true | - | ' ' | Provide logged in user token | | apiBaseUrl | string | true | - | ' ' | Provide api base url | | setApiPostEndpoint | string | false | - | '/api/messages' | Provide the endpoint to post messages | | setApiListUsersEndpoint | string | true | - | ' ' | Provide an endpoint for the first list or list of all users the user can chat with | | setApiConversationUserEndpoint | string | true | - | ' ' | Provide the endpoint for the user's list of all conversations |

Other props

| Property | Type | Required | Value | Default | Description | | ------------------------------- | :------: | :------: | :---: | :------: | ---------------------------------------------------------------------- | | title | string | false | - | 'Messagerie' | Set the name of the chat | | newMessageTitle | string | false | - | 'Nouvelle discussion' | Set the name of new discussion modal | | setStyle | string | false | 'yad' | 'dag' | 'yad' | Set the messaging style | | isMultiList | boolean | false | - | 'false' | Define whether the list of users for chat is multiple or not | | setSecondListUsersEndpoint | string | false | - | ' ' | Provide an endpoint for the second list the user can chat with | | setFirstListLabel | string | false | - | 'Liste utilisateurs' | Set label for first user list | | setSecondListLabel | string | false | - | 'Liste utilisateur 2' | Set label for second user list | | dataStructure | string | false | 'old' | 'new' | 'old' | Define the messaging databstructure |

Styles

Some attribute for custom css

| Attribute ('yad' / 'dag') | Target | Description | | ------------------------------- | :------: | ------------------------------------------------------------------------------------------------ | | ._3oISP / ._Ib6zq | Text block of messages send | To be used to customize the style of the block for messages sent by the user | | ._N0eEV /  ._3PC7- | Text block of received messages | Use to customize the style of the block for messages received by the user | | ._3-4mn /  ._2RbgV | Input textarea | Use to customize the style of the textarea input | | ._3rDVm /  ._3kpUp | Input search | Use to customize the style of the conversations input search | | ._yBqpy /  ._13Qr- | Button new conversation | Use to customize the style of the add new conversation button | | ._3sqmx /  ._300kl | Conversation item | Use to customize the style of conversation items (list-group-item) | | ._3nSUg /  ._2o4zq | Conversation (user name) | Use to customize the username style in conversation item | | ._P9G0Y /  ._35Req | Conversation (time) | Use to customize the style of the sending date in conversation item | | ._1RfSY /  ._1RfSY | Conversation (last message preview) | Use to customize the style of the preview of the last message in conversation item | | ._1wrfJ | Modal (user item) | To be used to customize the style of the user list of the new discussion modal |

Troubleshoot

After installing the module, you may notice a style problem regarding the active conversation. This is due to the default style of bootstrap | react bootstrap. Add these lines of css code to your index.css file and that should solve the problem :)

Yad style

._3sqmx {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
._3sqmx.active,
._3sqmx:hover {
  background-color: #F5F6FD;
  border-color: #F5F6FD;
  color: #102844;
  cursor: pointer !important;
}

Dag style

._300kl {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
._300kl.active,
._300kl:hover {
  background-color: #00C2CB1A;
  border: none;
  color: #1D2026;
  cursor: pointer !important;
}

License

MIT © Papaul-msibiii