Loading Bubble is not working with a websocket connection
I'm using Deep Chat connected to a WebSocket server. When a message is sent to the server, I expected the Loading Bubble to be displayed until the component receives the server's response. However, the Loading Bubble is not being displayed at any time.
Is there a way to force the component to display the Loading Bubble?
Did I configure the component incorrectly?
What would be the correct way to display the Loading Bubble?
.vue
<deep-chat
ref="chatRef"
introMessage='{"text": "Projeto inicial de componente para o chat"}'
displayLoadingBubble="true"
></deep-chat>.ts
mounted(): void {
this.chatInstance = this.$refs.chatRef
this.chatInstance.connect = {
websocket: true,
handler: this.websocketHandler
}
}
public websocketHandler(_: any, signals: any) {
try {
const websocket = new WebSocket('wss://my-server.foo/echo');
websocket.onopen = () => {
signals.onOpen();
};
websocket.onmessage = (message) => {
const response = JSON.parse(message.data);
signals.onResponse({ role: 'ai', text: response.data.data });
};
websocket.onclose = () => {
signals.onClose();
};
websocket.onerror = () => {
signals.onResponse({ error: 'Connection error' });
};
signals.newUserMessage.listener = (body: any) => {
const messageData = body.messages[0].text
websocket.send(JSON.stringify({ "data": [messageData, 587] }));
};
} catch (e) {
signals.onResponse({ error: 'error' });
signals.onClose();
}
}
OvidijusParsiunas / deep-chat
Fully customizable AI chatbot component for your website
1.7k
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too