# SIB Conversation `` displays a conversation similar to what can be found within Facebook groups. To associate the conversation to a containing resource, for instance an `ActionGroup` that would contain `Conversation`s, one can do : ```html ``` ## Installation In your django project, add the `djangoldp_conversation` package: ```python # settings.py DJANGOLDP_PACKAGES = [ 'djangoldp_conversation', ] ``` ## How to use Once the package is installed, you can use the `solid-conversation` component: ```html ``` The component will look for these properties: `http://happy-dev.fr/owl/#title`: content of the initial message `http://happy-dev.fr/owl/#text`: content of a reply `http://happy-dev.fr/owl/#author_user`: author of a message `foaf:depiction`: avatar of a user ### Parameters | Name | Default | Description | | -------------------------------- | -------------------------- | :----------------------------------------------------------- | | `data-src` | `undefined` | URL of the LDP conversation(s) to display. | | `nested-field` | `""` | String added at the end of the data source URL. If you use the `djangoldp_conversation` package, leave it to `conversations`. | | `extra-context` | `{}` | Custom extra context | | `date-format` | `"DD/MM/YYYY` | Format of the date displayed. For more informations about available formats, look at the [moment.js doc](https://momentjs.com/docs/#/displaying/format/). | | `send-button-text` | `"Envoyer"` | Text of the 2 buttons validating the forms | | `comment-input-label-text` | `"Créer une conversation"` | Label displayed before the main textarea | | `comment-input-placeholder-text` | `"Votre message"` | Placeholder displayed in the main textarea | | `answer-label-text` | `"Répondre"` | Text of the "Reply" link | | `answer-input-placeholder-text` | `"Votre message"` | Placeholder displayed in the "reply" textarea | ### Design To customize your component, you can set the css variable `--solid-conversation-theme` anywhere in your stylesheet to the color you want. For example: ```css :root{ --solid-conversation-theme: #1abba6; } ``` ## Output * On the top, a textarea to create a conversation * Then, a list of conversations, or main posts, ordered anti chronologically * Each conversation is directly followed by a list of messages related to that conversation. These messages are also ordered chronologically * At the bottom of each list of comments, a textarea allows one to add a comment and participate to the discussion * For each conversation and message, solid-conversation displays the avatar of this author, her name as well as the amount of time since the info was posted