The problem.

Installed the cometChat react UI kit on a react app run with vite. Everything works fine locally.

When deploying on our prodEnvironment on Aws amplify (Builds and deploys without errors) and running the App, it breaks when compiling and throws this error:

“Uncaught TypeError: Cannot convert undefined or null to object at Function.keys”

here is a sample of the code that fails when attempting to start the app:

var fv = Fi.exports.EVENTS;
Object.keys(fv).forEach(function(e) {     <--------- error: TypeError Canot convert…
if (fv[e] === 0)
cv.prototype[“on” + e] = function() {
this.scope.emit(e)
}
;
else if (fv[e] === 1)
cv.prototype[“on” + e] = function(t) {
this.scope.emit(e, t)
}
;
else if (fv[e] === 2)
cv.prototype[“on” + e] = function(t, n) {
this.scope.emit(e, t, n)
}
;
else
throw Error(“wrong number of arguments!”)
});

Environment

We modified the extensions and imports on some of the files from .js to .jsx for vite to be able to compile and locally it works just fine but it might have something to do with the issue when running on production Env(aws amplify).

Please provide the following:

• Version used: "@cometchat-pro/chat": "3.0.2-beta1",
• Other modules/plugins/libraries that might be involved:
  "vite": "^2.6.2",
  "aws-amplify": "^4.2.9",

Describe the problem

Tried to integrate the CometChat UI.

Failed to compile.

(undefined) ./src/CometChatWorkspace/src/components/Messages/CometChatMessageList/index.js
Line 111: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 121: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 143: Expected an assignment or function call and instead saw an expression no-unused-expressions

Reproduction

• Step 1.. Followed Steps 1-3 in the README
• Step 2.. Ran npm start
• ...

Environment

"engines": {
"node": "10"
},

"dependencies": {
"@babel/polyfill": "^7.7.0",
"@babel/runtime": "^7.7.7",
"@firebase/app": "^0.5.1",
"@firebase/auth": "^0.13.4",
"@material-ui/core": "^4.8.3",
"@material-ui/icons": "^4.5.1",
"body-parser": "^1.19.0",
"clsx": "^1.0.4",
"cookie": "^0.4.0",
"cookie-parser": "^1.4.4",
"dataloader": "^2.0.0",
"dotenv": "^8.2.0",
"ejs": "^3.0.1",
"express": "^4.17.1",
"express-graphql": "^0.9.0",
"firebase-admin": "^8.9.0",
"firebase-functions": "^3.3.0",
"got": "^10.2.2",
"graphql": "^14.5.8",
"graphql-relay": "^0.6.0",
"history": "^4.10.1",
"hoist-non-react-statics": "^3.3.1",
"idx": "^2.5.6",
"jsonwebtoken": "^8.5.1",
"jwt-passport": "^0.0.5",
"knex": "^0.20.7",
"load-script": "^1.0.0",
"lodash": "^4.17.15",
"moment-timezone": "^0.5.27",
"passport": "^0.4.1",
"passport-facebook": "^3.0.0",
"passport-google-oauth20": "^2.0.0",
"pg": "^7.17.0",
"prop-types": "^15.7.2",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-relay": "^8.0.0",
"recompose": "^0.30.0",
"relay-runtime": "^8.0.0",
"request": "^2.88.0",
"request-promise-native": "^1.0.8",
"serialize-javascript": "^2.1.2",
"slugify": "^1.3.6",
"universal-router": "^8.3.0",
"uuid": "^3.3.3",
"validator": "^12.1.0"
},
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/register": "^7.7.7",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-relay": "^8.0.0",
"chai": "^4.2.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-prettier": "^3.1.2",
"husky": "^4.0.4",
"lint-staged": "^9.5.0",
"minimist": "^1.2.0",
"prettier": "^1.19.1",
"raw-loader": "^4.0.0",
"react-app-tools": "^3.1.0-preview.7",
"relay-compiler": "^8.0.0"
},

After scrolling up, when a new message arrives it was not rendered to the DOM even though scrolled to the bottom, need to click the new messages button to show it in the screen

Describe the problem

I would like to have docs on how to easily integrate the React UI kit with Next.js

There is an example with previous versions but not with v4

What was the expected behavior?

Have docs on version 4 of the UI Kit

Environment

Please provide the following:

React UI Kit v4
Next Js

Describe the problem

Component CometChatTabs appears to use some undocumented "dragging" functionality which cannot be disabled and floats in a random place as a result. It could also be noted, that component has undocumented prop isDraggable, but setting it to false does nothing.

What was the expected behavior?

Tabs should be functioning properly, non-draggable and anchored in place at the bottom. It should look like the screenshot in your own guide here: https://www.cometchat.com/docs/v4/react-uikit/guides-cometchat-ui

Reproduction

This can be easily reproduced by just rendering the component on numerous versions from 4.0.0 and up (I tested specifically latest 4.0.5 and 4.0.6-alpha.2 and a few others starting with 4.0.0).

It can also be reproduced by following your guide: https://www.cometchat.com/docs/v4/react-uikit/guides-cometchat-ui
How did you even get the screenshot at the bottom of this page?

The code from the guide above can be seen here: https://codesandbox.io/s/zealous-field-x3frvc?file=/src/App.js
No need to even initialize CometChat, the tabs issue is visible right away, after turning of Sandbox error boundaries.

Environment

• Version used: 4.0.5 and others

Describe the problem

Hey guys,

When sending a message to a user, the conversation does not appear on the receiver until I update the page.

What was the expected behavior?

The new conversation should appear

Reproduction

1. Run your react sample app with UI Kit v4

2. Use the API to send a message to the user

3. The message does not appear until updating the page

Video of the bug: https://youtu.be/eIzsP1qV1D0

Environment

React UI Kit v4
React Sample with UI Kit v4

Describe the problem

Using CometChatMessages got type error

Reproduction

• Step 1: Clone comet pro UI kit
• Step 2: Comment all the audio cause #60
• Step 3: using
• Step 4: error

code:

Environment

• @cometchat-pro/chat": "2.1.4"
• "next": "^10.0.0",
• "react": "^17.0.1",

Describe the problem

Using "react": "^17.0.1" to create a chatApp with CometChat, it throws the following error at build time: Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic

What was the expected behavior?

It was expected to load the CometChat UI on the browser

Reproduction

• Step 1. Create a react boilerplate (with the latest version)
• Step 2. Follow the steps in the documentation to create a chatApp with CometChat

Environment

Please provide the following:

• Version used: "react": "^17.0.1"

Describe the problem

Clone cometchat-pro-react-ui-kit repo
and import CometChatUI got error

What was the expected behavior?

Import and use as normal

Reproduction

• Step 1: git clone https://github.com/cometchat-pro/cometchat-pro-react-ui-kit.git
• Step 2: and Import as docs
  

Environment

• @cometchat-pro/chat": "2.1.4"
• "next": "^10.0.0",
• "react": "^17.0.1",

Describe the problem

I'm running this with a NextJS project

What was the expected behavior?

App compiling and rendering as expected

Environment

Please provide the following:

• Version used: 3.0.0-beta1

Describe the problem

when using the class ConversationListManager, the conversationRequest cannot be filtered by custom tags.

Please advise the way to filter the conversations list by custom tags.

What was the expected behavior?

As below code is working on the class GroupListManager,
this.groupRequest = new CometChat.GroupsRequestBuilder().setLimit(30).setTags(["custom_tag_key: custom_tag_value"]).build();

The class ConversationListManager should also have the setTags function, eg
this.conversationRequest = new CometChat.ConversationsRequestBuilder().setLimit(30).setTags(["custom_tag_key: custom_tag_value"]).build();

Environment

Please provide the following:

• Version used:
• "@cometchat-pro/chat": "3.0.0"

Describe the problem

Provide a clear and concise description of the issue

What was the expected behavior?

CometChat Conversation List Item miss the conversation select state

Reproduction

Select a conversation from the conversation list
The background color of the selected conversation doesn't change.

Environment

cometchat-pro-react-ui-kit 3.0.2-beta1

The problem is this file: src/components/Chats/CometChatConversationListItem/style.js
Using the props.selectedConversation.conversationId to identify the selected conversation.
However, the props of <CometChatConversationListItem /> in "src/components/Chats/CometChatConversationList/index.js" doesn't provide selectedConversation.

I added selectedConversation={conversationObj} and fixed this issue.

    const conversationObj = this.filterConversation();
    const conversationList = this.state.conversationlist.map(
      (conversation, key) => {
        return (
          <CometChatConversationListItem
            key={conversation.conversationId}
            conversation={conversation}
            loggedInUser={this.loggedInUser}
            handleClick={this.handleClick}
            actionGenerated={this.actionHandler}
            selectedConversation={conversationObj}
          />
        );
      }
    );

Messages not appearing through the react component. Unable to see sent and received messages on either end, messages do appear to show on the list.
React UI kit documentation unavailable.

WARN Require cycle: node_modules/@cometchat/chat-uikit-react-native/src/shared/index.ts -> node_modules/@cometchat/chat-uikit-react-native/src/shared/framework/index.ts -> node_modules/@cometchat/chat-uikit-react-native/src/shared/framework/DataSource.ts -> node_modules/@cometchat/chat-uikit-react-native/src/AI/AIOptionsStyle.ts -> node_modules/@cometchat/chat-uikit-react-native/src/shared/index.ts

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

This is the dependency I currently have
cometchat/chat-uikit-react-native": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/@cometchat/chat-uikit-react-native/-/chat-uikit-react-native-4.1.2.tgz",
"integrity": "sha512-oNW4h77q+PnwwF+dz+VvMRvwi9EifpncnEr+nz+dUeDeTtciXc2iD/443/2AZcNOCKEGWT+V9BhHFcN6GVp1yQ==",
"requires": {
"@react-native-async-storage/async-storage": "^1.17.10",
"@react-native-community/clipboard": "^1.5.1"
}

Why don't you publish this as you do with the SDK and make it easier for developers to implement?

Describe the problem

I am sending a message to a user using the api. After sending the message I go to the chat and I don't see the new chat with the sent message. If I reload the chat, I can see the message sent.

What was the expected behavior?

Receive the new message in real-time

Reproduction

• Integrate the UI Kit version 4
• Send a message to the user using the API

Environment

Please provide the following:

• React UI Kit v4

I would like to know if I am missing something in the docs, or should implement this myself somehow.

Thanks!

Test GitHub

Describe the problem

Next.js dev mode is failing

Error:

ReferenceError: window is not defined

Reproduction

Use these dependencies:

  "dependencies": {
    "@cometchat-pro/chat": "^2.2.1",
    "next": "^10.0.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",