cometchat / cometchat-uikit-vue

Ready-to-use Chat UI Components for Vue (JavaScript/Web)

CometChat UI Kit for Vue

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:

• Register at the CometChat Dashboard to create an account.
• 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.

Help and Support

For issues running the project or integrating with our UI Kits, consult our documentation or create a support ticket or seek real-time support via the CometChat Dashboard.

cometchat-uikit-vue's Issues

Package install issue

Describe the problem

I installed cometchat repository but there are too many package issue.

Sample App slow, using a lot of RAM and CPU

Describe the problem

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.

Environment

Here's my package.json:

{
    "name": "chat",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11",
        "dateformat": "^4.5.1",
        "emoji-mart-vue-fast": "^10.0.1",
        "twemoji": "^13.0.2",
        "vue-router": "^3.5.1",
        "@cometchat-pro/chat": "^3.0.0-beta1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {}
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ]
}

Instructions in the ReadMe file is wrong

Describe the problem

This is not really a bug but a request to review the set of instructions stated on the README section of this repository.

What was the expected behavior?

The instructions should reference the name of the new repository and not the previous one. It's becoming pretty difficult to follow properly.

Emoji picker disappears if someone sends a new message

Describe the problem

If someone sends a message when the emoji picker is open, the emoji picker disappears.
I added a video for clarification:

reaction.disappear.mov

What was the expected behavior?

The emoji picker should stay open.

Reproduction

1. Click on a message from someone else and then click on the emoji icon.
2. The emoji picker should open up
3. Send a message from another user on another chat instance
4. emoji picker disappears

Environment

"vue": "^2.6.11",
"@cometchat-pro/chat": "^3.0.0-beta1"

Wrong condition on CometChatMessageHeader component

Describe the problem

The wrong parts is on line 188-198 on the CometChatMessageHeader .vue file

if (!isUser) {
  avatar = SvgAvatar.getAvatar(
    this.item.uid,
    this.item.name.charAt(0).toUpperCase()
  );
} else {
  avatar = SvgAvatar.getAvatar(
    this.item.guid,
    this.item.name.charAt(0).toUpperCase()
  );
}

What was the expected behavior?

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.

Environment

Please provide the following:

• "@cometchat-pro/chat": "^2.4.0"
• cometchat-pro-vue-ui-kit: 2.4.0-1

login issue

Describe the problem

how do I have to integrate login function?

Image Preview cover instead of contain

Describe the problem

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.