cometchat / cometchat-uikit-react Goto Github PK
View Code? Open in Web Editor NEWReady-to-use Chat UI Components for React (JavaScript/Web)
License: Other
Ready-to-use Chat UI Components for React (JavaScript/Web)
License: Other
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.
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();
Please provide the following:
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"
}
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
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
Have docs on version 4 of the UI Kit
Please provide the following:
React UI Kit v4
Next Js
Not a bug but a question.
How does one add pagination to a component like ConversationsWithMessages. I'm trying to allow the conversations list to be paginated on scroll (so if a user has more than 50-100 conversations, scrolling down can still show those convos.
Thanks in advance!
Provide a clear and concise description of the issue
CometChat Conversation List Item miss the conversation select state
Select a conversation from the conversation list
The background color of the selected conversation doesn't change.
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}
/>
);
}
);
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
It was expected to load the CometChat UI on the browser
Please provide the following:
"react": "^17.0.1"
Why don't you publish this as you do with the SDK and make it easier for developers to implement?
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.
Receive the new message in real-time
Please provide the following:
I would like to know if I am missing something in the docs, or should implement this myself somehow.
Thanks!
Using CometChatMessages got type error
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.
We have enabled the Poll extension on the Cometchat Dashboard but the create Poll is not visible in UI.
We have also upgraded to the latest package which is v4.3.7 ["@cometchat/chat-uikit-react-native": "^4.3.7"]
We are using CometChatConversationsWithMessages to show all the messages in the chat app.
We have already reached out to Cometchat Support 2 weeks ago, and this issue is still not fixed, and it's blocking our crucial feature release on our side.
After enabling the Poll extension from the Dashboard the create Poll option should be available on the attachment options on the message composer
Where applicable, please include:
- The smallest possible sample app that reproduces the undesirable behavior
<CometChatConversationsWithMessages
conversationsConfiguration={conversationConfigurations}
messagesConfigurations={messagesConfigurations}
onError={e => console.log('chat error ', e)}
/>
const conversationConfigurations = {
AppBarOption: () => {},
conversationsStyle: {
titleColor: Colors.themeTitle,
titleFont: {
fontFamily: fonts.type.InterMedium,
fontWeight: fonts.weight.w500,
fontSize: fonts.size.s20,
},
},
title: Strings.GroupChat,
onError: e => {
console.log('conversation error ', e);
},
EmptyStateView: () => (
<View style={styles.noChatContainer}>
<Text style={styles.noChatText}>No Group Chats Found</Text>
</View>
),
};
let messageComposerConfiguration = {
attachmentIcon: Icons.attachment,
hideVoiceRecording: true,
hideLiveReaction: true,
placeHolderText: Strings.writeYourMessage,
messageComposerStyle: {
attachIcontint: Colors.black,
sendIconTint: Colors.primaryBlue,
inputBackground: Colors.composerBg,
placeholderTextColor: Colors.grey2,
},
};
const messagesConfigurations = {
AuxilaryAppBarOptions: () => {},
messageHeaderConfiguration: {},
messageComposerConfiguration: {
...messageComposerConfiguration,
CustomComposerView: CustomComposerView,
},
threadedMessagesConfiguration: {
messageComposerConfiguration: {
...messageComposerConfiguration,
CustomComposerView: CustomComposerView,
},
messageListConfiguration: {
messageListStyle: {},
},
threadedMessagesStyle: {
background: Colors.white,
},
},
messagesStyle: {
backgroundColor: Colors.composerBg,
},
messageListConfiguration: {
showAvatar: true,
avatarStyle: {
nameTextFont: {
fontSize: fonts.size.s14,
},
outerView: {
borderWidth: 0.5,
borderColor: Colors.primaryBrown,
},
},
messageListStyle: {
nameTextColor: Colors.primaryBrown,
loadingIconTint: Colors.primaryBlue,
},
wrapperMessageBubbleStyle: {},
},
};
- Log files (redact/remove sensitive information) - NA
- Application settings (redact/remove sensitive information) - NA
Please provide the following:
Clone cometchat-pro-react-ui-kit repo
and import CometChatUI got error
Import and use as normal
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!”)
});
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:
Next.js dev mode is failing
ReferenceError: window is not defined
Use these dependencies:
"dependencies": {
"@cometchat-pro/chat": "^2.2.1",
"next": "^10.0.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
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.
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
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.
Test GitHub
Hey guys,
When sending a message to a user, the conversation does not appear on the receiver until I update the page.
The new conversation should appear
Run your react sample app with UI Kit v4
Use the API to send a message to the user
The message does not appear until updating the page
Video of the bug: https://youtu.be/eIzsP1qV1D0
React UI Kit v4
React Sample with UI Kit v4
I'm running this with a NextJS project
App compiling and rendering as expected
Please provide the following:
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
"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"
},
When using Cometchat.sendMessage to a group, it is giving INVALID_GUID error, even though the message is sent successfully and do not affect any other thing
No errors on console
Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent.
Note: If clear, reproducable steps or the smallest sample app demonstrating misbehavior cannot be provided, we may not be able to follow up on this bug report.
messageCopyInGroup.setReceiverId(this.broadcastChannel.getGuid());
messageCopyInGroup.setReceiverType('group');
try {
await CometChat.sendMessage(messageCopyInGroup);
} catch {
console.log('erro');
}
this.loading = false;
this.shouldUpdateConversations.emit(messageCopyInGroup);
Please provide the following:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.