New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@startinblox/component-conversation

Package Overview
Dependencies
Maintainers
0
Versions
65
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@startinblox/component-conversation

Conversation component for startinblox

latest
npmnpm
Version
1.0.2
Version published
Weekly downloads
6
500%
Maintainers
0
Weekly downloads
 
Created
Source

SIB Conversation

<solid-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 :

<solid-conversation
  nested-field="conversations"
  bind-resources
></solid-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 solid-conversation component:

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

<body>
  <!-- use the component -->
  <solid-conversation
    data-src="[url]"
    nested-field="conversations"
  ></solid-conversation>
</body>
</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

NameDefaultDescription
data-srcundefinedURL 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/YYYYFormat of the date displayed. For more informations about available formats, look at the moment.js doc.
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:

: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

FAQs

Package last updated on 11 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Hidden Blast Radius of the Axios Compromise

Security News

The Hidden Blast Radius of the Axios Compromise

The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.

By Ahmad Nassri  -  Apr 01, 2026