Skip to content

Latest commit

 

History

History
84 lines (66 loc) · 4.36 KB

circuit-chat.md

File metadata and controls

84 lines (66 loc) · 4.36 KB
Raw

circuit-chat

Usage

// Render text messages of conversation with an input field to post messages.
<circuit-chat
  domain="circuitsandbox.net"
  clientId="f06c51a30f0d4eb6acc05829c3e86266"
  convId="161e974d-8531-45fe-b951-26cd40fee8fd"
  initNumOfItems="40"
  sendOnEnter
  showTitle></circuit-chat>

API

Attributes

Name Required Default Description
client no* Initialized on client instance
clientId no* client_id of your app 2
domain no circuitsandbox.net Url of Circuit system
inprogress no omitted (false) Attribute set by the web component to allow easy CSS attribute styling
connected no omitted (false) Attribute set by the web component to indicate if component if connected to the Circuit servers. Can be used to change the button style via CSS if connection is lost.
convId yes String attribute. The conversation Id of the conversation to be rendered.
sendOnEnter no false Non-value attribute. When present messages will be sent to the conversations on an enter press.
showTitle no false Non-value attribute. When present the title of the conversation will be displayed above.
reverse no false Non-value attribute. When present new items will appear at the top of the feed rather than the bottom.
initNumOfItems no 25 Number attribute. Sets the inital number of items to retrieve.

*: Either a client Id or a initialized client instance must be passed.

2: See dev portal for instructions on how to get your own sandbox tenant and how to register an app to get the credentials (client_id).

Properties

Name Type Read/Write Description
client Client read Circuit Client object as defined in the Circuit JS SDK.
conversation Conversation read Object containing the conversation.
feed Item[] read Array of Items from the conversation.
users User[] read Array of User objects from the conversation feed.

Events

Name Arguments Description
loaded Client Raised when the component has retrieved the conversation feed.
initialized --- Raised when Circuit.Client is initialized.
itemAdded Item Raised when a new item in the conversation is added.
itemUpdated Item Raised when a new item in the conversation feed is updated.
conversationUpdated Conversation Raised when the conversation is updated.

Exposed Methods

Name parameters Description
scrollTo direction Scrolls the feed to the top or bottom depending on the parameter passed. If bottom is passed it will scroll to the bottom, similarly top will scroll to the top.

Styling (CSS)

Styling can be done using css variables. Using css variables the height, width, and the style of each individual item in the conversation can be changed.

Here are some example CSS rules:

      circuit-chat {
        padding-left: 30px;
        --width: 500px;
        --chat-height: 250px;
        --item-padding: 5px 0;
        --title-font: Monospace;
        --title-font-size: 24px;
        --title-padding: 0 0 10px 0;
        --item-font: sans-serif;
        --item-font-size: 13px;
        --item-border: 1px solid #dadada;
        --input-margin: 15px 0 0 0;
        --input-float: right;
      }