@gameon/web
Version:
Chat clients for web
171 lines (170 loc) • 6.07 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import SendbirdChat from '@sendbird/chat';
import { GroupChannelHandler, GroupChannelModule, } from '@sendbird/chat/groupChannel';
import { css, html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import '@gameon/on-ui-components/chat/window';
const CHANNEL_HANDLER_KEY = 'default-handler';
const DEFAULT_MESSAGE_LIMIT = 50;
let OnChatGroupClient = class OnChatGroupClient extends LitElement {
constructor() {
super(...arguments);
this.messages = [];
}
get speakers() {
var _a;
if ((_a = this.sbChannel) === null || _a === void 0 ? void 0 : _a.members) {
return this.sbChannel.members.map((member) => ({
avatarUrl: member.profileUrl,
id: member.userId,
username: member.nickname,
}));
}
return [];
}
disconnectedCallback() {
super.disconnectedCallback();
this.disconnectFromSendbird();
}
updated(changedProperties) {
if (changedProperties.has('appId')) {
this.initializeSendBirdClient();
}
if (changedProperties.has('authToken') ||
changedProperties.has('roomId') ||
changedProperties.has('userId') ||
changedProperties.has('appId')) {
this.connectToSendbird();
}
}
initializeSendBirdClient() {
if (this.appId) {
this.sbClient = SendbirdChat.init({
appId: this.appId,
localCacheEnabled: true,
modules: [new GroupChannelModule()],
});
}
}
async connectToSendbird() {
if (!this.sbClient) {
return;
}
this.sbChannel = undefined;
this.messages = [];
if (this.userId) {
await this.sbClient.connect(this.userId, this.authToken);
if (this.roomId) {
this.sbChannel = await this.sbClient.groupChannel.getChannel(this.roomId);
this.messages = await this.fetchPastMessages(this.sbChannel);
const channelHandler = new GroupChannelHandler();
channelHandler.onMessageReceived =
this.handleMessageReceived.bind(this);
this.sbClient.groupChannel.addGroupChannelHandler(CHANNEL_HANDLER_KEY, channelHandler);
}
}
}
async disconnectFromSendbird() {
if (!this.sbClient) {
return;
}
await this.sbClient.disconnect();
}
async fetchPastMessages(channel) {
const messageListQuery = channel.createPreviousMessageListQuery({
limit: DEFAULT_MESSAGE_LIMIT,
});
const messages = await messageListQuery.load();
const userMessages = messages.filter((message) => message.isUserMessage());
const result = userMessages.map((message) => ({
timestamp: message.createdAt,
speakerId: message.sender ? message.sender.userId : '',
contents: [
{
text: message.message,
},
],
messageId: message.messageId,
}));
return result;
}
sendMessage(content) {
if (this.sbChannel) {
if (content.text) {
this.sbChannel
.sendUserMessage({ message: content.text })
.onSucceeded((message) => {
if (this.sbChannel) {
this.handleMessageReceived(this.sbChannel, message);
}
});
}
}
}
handleMessageReceived(_, message) {
if (message.isUserMessage()) {
this.messages = [
...this.messages,
{
contents: [{ text: message.message }],
speakerId: message.sender.userId,
timestamp: message.createdAt,
},
];
}
}
handleChatInputSubmit(e) {
this.sendMessage({ text: e.detail.value });
this.onChatWindowEl.inputValue = '';
}
render() {
var _a;
return html `
<on-chat-window
.conversationMessages="${this.messages}"
.conversationPrimarySpeakerId="${(_a = this.userId) !== null && _a !== void 0 ? _a : ''}"
.conversationSpeakers="${this.speakers}"
-chat-input-submit="${this.handleChatInputSubmit}"
></on-chat-window>
`;
}
};
OnChatGroupClient.styles = css `
:host {
display: block;
}
on-chat-window {
height: 100%;
}
`;
__decorate([
property({ attribute: 'auth-token' })
], OnChatGroupClient.prototype, "authToken", void 0);
__decorate([
property({ attribute: 'room-id' })
], OnChatGroupClient.prototype, "roomId", void 0);
__decorate([
property({ attribute: 'user-id' })
], OnChatGroupClient.prototype, "userId", void 0);
__decorate([
property({ attribute: 'app-id' })
], OnChatGroupClient.prototype, "appId", void 0);
__decorate([
state()
], OnChatGroupClient.prototype, "speakers", null);
__decorate([
query('on-chat-window')
], OnChatGroupClient.prototype, "onChatWindowEl", void 0);
__decorate([
state()
], OnChatGroupClient.prototype, "messages", void 0);
OnChatGroupClient = __decorate([
customElement('on-chat-group-client')
], OnChatGroupClient);
export { OnChatGroupClient };
//# sourceMappingURL=group-client.js.map