@startinblox/component-conversation NPM

SIB Conversation

<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 Conversations, one can do :

<sib-conversation
  id-suffix="conversations"
  bind-resources
></sib-conversation>

Installation

In your django project, add the djangoldp_conversation package:

# settings.py
DJANGOLDP_PACKAGES = [
  'djangoldp_conversation',
]

How to use

Once the package is installed, you can use the sib-conversation component:

<html>
<head>
  <!-- import the module in the head of the page -->
  <script type="module" src="https://unpkg.com/@startinblox/component-conversation"></script>
</head>

<body>
  <!-- use the component -->
  <sib-conversation
    data-src="[url]"
    nested-field="conversations">
  </sib-conversation>
</body>
</html>

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 - kk:mm"`	Format of the date displayed. For more informations about available formats, look at the moment.js doc.

Design

To customize your component, you can set the css variable --sib-conversation-theme anywhere in your stylesheet to the color you want. For example:

:root{
  --sib-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, sib-conversation displays the avatar of this author, her name as well as the amount of time since the info was posted

dayjs sass vite

@everything-registry/sub-chunk-865 @zalastax/nolb-_star @infinitebrahmanuniverse/nolb-_star

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago