GithubHelp home page GithubHelp logo

cometchat / cometchat-uikit-vue Goto Github PK

View Code? Open in Web Editor NEW
30.0 14.0 19.0 15.31 MB

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

License: Other

JavaScript 15.04% TypeScript 73.70% HTML 11.26%
chat ui ui-components vue vuejs javascript web voice video calling conference uikit messaging

cometchat-uikit-vue's Introduction

CometChat

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 People

Contributors

prakash-cometchat avatar prathamesh-cometchat avatar priyadarshininadar avatar nakul-cometchat avatar ketanyekale avatar gajraajay avatar ajaygajra avatar raj-dubey1 avatar

Stargazers

Kevin Wan avatar pjabang avatar  avatar Ashfaaq Ali (CometChat) avatar Afroz.Cometchat avatar  avatar  avatar Vivek Prajapati avatar  avatar Gaurav Singh avatar Raj Shah avatar  avatar  avatar shin avatar  avatar Alan avatar Andriy avatar Boma Anjang Pertala avatar Trường Phạm avatar valley avatar  avatar Arsham Mohammadi Neyshabori avatar Vicente Russo avatar Dmitriev Sergey avatar  avatar Marco avatar Break Bread avatar Ruben Krueger avatar Eimantas avatar  avatar

Watchers

James Cloos avatar  avatar Taru Agarwal avatar  avatar Jitvar.CometChat avatar  avatar ravi.cometchat avatar Raj Shah avatar Vivek Prajapati avatar  avatar Afroz.Cometchat avatar  avatar Gaurav Singh avatar Ashfaaq Ali (CometChat) avatar

cometchat-uikit-vue's Issues

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.

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"
    ]
}

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.

Package install issue

Describe the problem

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.