Orion Chat & Discussions

This component is relatively complex due to the mechanisms it entails, including interactions with your BackEnd and real-time events.
However, we will try to explain it in a simple way based on the playground below.

TIP

It can be used with the OrionChatDiscussionList component if you need to manage multiple conversations.
More information can be found in the OrionChatDiscussionList section.

ChatSimple

Props

Name
chatChatService = undefined
Required
discussionIdnumber = undefined
Required
focusOnOpenboolean = false
hideSearchboolean = false

Events

Name
Payload type
new-message
Orion.Chat.NewMessage

Slots

Name
Bindings
discussion-title
discussion: OrionChatEntity
prepend-discussion-actions
discussion: OrionChatEntity
showSearch: boolean
append-discussion-actions
discussion: OrionChatEntity

PublicInstance

Name
Type
checkUnreadMessagesInDom
() => Promise<void>
getDiscussionId
() => number | undefined
_el
(() => HTMLElement | undefined) | undefined

ChatMultipleDiscussions

Props

Name
chatChatService = undefined
Required

Events

Name
Payload type
new-discussion
No payload
select-discussion
number

Slots

Name
Bindings
append-discussion-list-header
No bindings
before-discussion-list
No bindings
discussion-item
discussion: OrionChatEntity
append-discussion-item
No bindings

ChatService configuration

You can define the configuration of your instance at the time of its creation or later through the config property.

// Configuration du user à la création
const chat = useChat({ user });

// Configuration de l'écouteur par la suite
chat.config.onNewMessageAsync = async (message, registerMessage) => {
	// ...
};

List of parameters:

userOrion.Chat.User

The user of your application. This parameter is required upon creation.

allowMessageStatusboolean

Display the message status (read/unread)

allowDiscussionCreationboolean

Display the icon for creating a new discussion in the OrionChatDiscussionList component

allowDiscussionSearchboolean

Enable searching among discussions in the OrionChatDiscussionList component

discussionSearchTimernumber : 500

The delay before triggering the search within discussions

discussionFetcherAsync(params: { oldestDiscussionId?: number, oldestDiscussionUpdatedDate?: Date, searchTerm?: string, searchTermHasChanged?: boolean }) => Promise<Discussion[]>

The function to fetch the list of discussions from the BackEnd

discussionTitleFormatter(discussion: OrionChatEntity) => string

The function to format the title of discussions

discussionInterlocutorsFormatter(discussion: OrionChatEntity) => User[]

The function to format the participants of the discussion

discussionUnreadMessagesCounter(params: {discussion: OrionChatEntity, discussionId: number, messages: OrionChatMessageEntity[] }) => number

The function to determine the number of unread messages in a discussion

messageFetcherAsync(params: { discussion: OrionChatEntity, discussionId: number, oldestMessageId?: number }) => Promise<Message[]>

The function to fetch the list of messages from the BackEnd

onMessageReadAsync(message: OrionChatMessageEntity) => void

Callback to execute when reading a message (e.g., to save its status in the BackEnd)

onNewMessageAsync(message: OrionChatMessageEntity, registerMessage: () => void) => void

Callback to execute when the user creates a new message

onActiveDiscussionChange(discussionId?: number, oldDiscussionId?: number) => void

Callback to execute when changing the current discussion