The CometChat Vue UI Kit provides a pre-built user interface kit that developers can use to quickly integrate a reliable & fully-featured chat experience into an existing or a new app.
Prerequisites
Node.js >= 14.17.0
npm >= 7
Getting Started
To set up CometChat Vue UI Kit and utilize CometChat for your chat and calls functionality, you'll need to follow these steps:
After registering, log into your CometChat account and create a new app. Once created, CometChat will generate an Auth Key and App ID for you. Keep these credentials secure as you'll need them later.
Check the Key Concepts to understand the basic components of CometChat.
Refer to the Integration Steps in our documentation to integrate the UI Kit into your Vue app.
After having built the sample app from https://github.com/elbelel/CometChat-Vue-Chat-App/issues which uses this uikit, interactions like sending a message have a considerable lag. This is especially noticeable in group chats with dozens of messages, where it sometimes takes up to 5 seconds for a message to appear on screen after sending it.
Additionally, the app uses a lot of ram, when sending multiple messages in succession (almost reaching 1 gb) and having CPU spikes every time a message is sent.
Here's a video (using chrome performance monitor):
comet.vue.slow.mov
What was the expected behavior?
The sample app should be responsive, RAM usage should stay low and CPU spikes should be lower.
Reproduction
Step 1: Follow the instructions on the cometchat vue setup tutorial: https://www.cometchat.com/tutorials/create-a-chat-app-with-vue
Step 2: Run the app on your machine, select a group and send multiple messages in succession. The app will get slower and slower.
When clicking on an image in a chat, it is set to cover instead of contain. Furthermore, the close button on the top right gets hidden. I added a short video that shows the issue:
img.too.large.mov
What was the expected behavior?
The image should be contained in the view.
The close button should be on top of the image.
Reproduction
Join a chat, upload an image and click on it to open it.
if !isUser the avatar variable should be setted with the generation of the avatar using the guid instead of the uid.
Reproduction
Simple use the ui widget CometChatMessages and see that it does not mount the CometChatMessageHeader because of an exception when type prop is group and item prop is a group object.