talkjs / talkjs-examples Goto Github PK
View Code? Open in Web Editor NEWTalkJS (https://talkjs.com) examples
TalkJS (https://talkjs.com) examples
Is there any available Vue Implementation you can refer me to?
The chatbox screen loads sometimes and other time it does not. This happens when I want to create a new conversation. I have followed the doc and its code step by step and still getting same error.
The code i am working with:
class ChatBoxPage extends StatefulWidget {
const ChatBoxPage({Key? key}) : super(key: key);
@override
State<ChatBoxPage> createState() => _ChatBoxPageState();
}
class _ChatBoxPageState extends State<ChatBoxPage> {
bool isLoading = false;
@override
Widget build(BuildContext context) {
final session = Session(appId: 'MyAPPID'); //my app id
final me = session.getUser(
id: '99876',
name: 'collins',
email: ['[email protected]'],
photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
welcomeMessage: 'Hey there! How are you? :-)',
role: 'default',
);
session.me = me;
final other = session.getUser(
id: '09087',
name: 'Ify',
email: ['[email protected]'],
photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
welcomeMessage: 'Hey, how can I help?',
role: 'default',
);
final conversation = session.getConversation(
id: Talk.oneOnOneId(me.id, other.id),
participants: {Participant(me), Participant(other)},
);
return Scaffold(
appBar: AppBar(
title: const Text('TalkJS Demo'),
),
body: ChatBox(
session: session,
conversation: conversation,
asGuest: true,
),
);
}
}
Please i will really appreciate a quick response as my appplication depends on the chat functionality
So I followed the react-native example in my project with the @talkjs/expo
package. Everything works well except the following:
When loading the Chatbox or ConversationList component, the webview shows a white screen for a second before the chats are loaded. This does not look good as the theme of my app has a dark/black background. I can't change the styling of this in the talkjs dashboard nor can I do any style changes in my own code.
What I would like to do is show a loadingScreen with loading indicator (and dark bg) until the Chatbox/ConversationList component is loaded. In react-native-webview
package there is a prop called renderLoading
that can be used for this. Could it be possible to add this prop to the Chatbox/ConversationList components? I see this has been suggested before => #288 (comment)
Or is there another way for me to work around this? Below is a code snippet of how I got it working as of now in my project for the Chatbox component.
export interface ChatBoxScreenProps {
me: TalkRn.User;
conversationId: TalkRn.ConversationBuilder | string;
}
const ChatBoxScreen = (props: ChatBoxScreenProps) => {
const {me, conversationId} = props;
const {user} = useAuth();
const conversationBuilder = TalkRn.getConversationBuilder(
conversationId as string,
);
conversationBuilder.setParticipant(me);
return (
user &&
<TalkRn.Session appId='_app_id_' me={me} signature={user.talkjsSignature}>
<TalkRn.Chatbox
theme="default_mobile"
conversationBuilder={conversationBuilder}
/>
</TalkRn.Session>
);
};
export default ChatBoxScreen;
I am playing the example of this repo using a fresh project. Everythin works almost okay except for the following error
It happens when I press the conversation item from the list:
@notifee/react-native: "^7.8.0"
@react-native-async-storage/async-storage: "^1.19.3"
@react-native-community/push-notification-ios: "^1.11.0"
@react-native-firebase/app: "^18.5.0"
@react-native-firebase/messaging: "^18.5.0"
@react-navigation/native: "^6.1.8"
@talkjs/react-native: "^0.6.0"
react: "18.2.0"
react-native: "0.72.5"
react-native-navigation: "^7.37.0-hotfix.1"
react-native-safe-area-context: "^4.7.2"
react-native-screens: "^3.25.0"
react-native-webview: "^13.6.0"
Can you guys please help me?
NOTE: I have downgraded @talkjs/react-native to 0.5.1 and it works
resolved via 'npm install har-validator@latest --save-dev'
Hi there,
My team is having this error creeping up and was wondering if you could clarify on this as it is not in talk.types.d.ts
for postMessage.
Updated after bumping TalkJS from "^0.15.2" to "^0.15.4" error issue is no more. please update this in the readme changelogs cheers
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'postMessage')
at u (talk.js:18:5962)
at Object.r (talk.js:18:5434)
at talk.js:18:58215
u @ talk.js:18
r @ talk.js:18
(anonymous) @ talk.js:18
Promise.then (async)
post @ talk.js:18
t.onWindowVisibleChanged @ talk.js:18
n @ talk.js:18
(anonymous) @ talk.js:18
Hello 👋
I upgraded @talkjs/expo
from 0.4.2
to 0.5.0
and I am getting the following error in ChatBox component:
TypeError: Attempted to assign to readonly property.
On version 0.4.2
it worked fine, I see that the only breaking change is the addition of @react-native-async-storage/async-storage as peer dep, but my project had already installed this package. I have tried to get it working on 0.5.0
with the code that I already had working on 0.4.2
and also tried the same code as is shown in the React Native example https://talkjs.com/docs/Reference/React_Native_SDK/API/getConversationBuilder/#example but nothing seems to work. I am running @react-native-async-storage/async-storage on version 1.17.3
but have tried different version too.
Am I missing/forgetting something, have other people ran into the same problem?
Im try to use TalksJS on NextJS, and its giving me a TypeError
`
27 | const session = new Talk.Session({
| ^
28 | appId: 'MY_APP_ID',
29 | me: currentUser,
30 | });
`
Im using Next 12.2.2
I don't know if this is the right forum for this, so let me know if there is a better place to post this.
When using the theme editor, there is currently a prop called previousMessage that is very useful for knowing if the message is the first from a user, which allows you to for example only show the Avatar if it's the first message from a user, in this way
But there is no way (or at least that I can find) that allows you to the same thing but having it only for the last message. So for only showing the Avatar for the message if it is the last message instead of the first, this is for example how Instagram has it. Also, this would be very useful for styling messages like Instagram with different border-radiuses for only the first and last message of the group, like the image below. Which is what I want here, as I'm trying to make an Instagram clone for the chat and this seems pretty impossible at the moment
I think a nextMessage prop would solve this very easily as it could be used just like previousMessage is working now but the reverse. Im open to solving this another way, but i think this solution makes sense and should not be difficult to add (but could also very easily be wrong)
Hi, I checked out example inside "react/marketplace/marketplace-with-chat" to know how to logout as a talkjs user. From what I understand, the application reloads itself after clearing its token and dispatching a logout event. This works, but I was wondering if there were a way to deactivate/un-register a session (from talkjs session object) without reloading the whole application.
PS: I tried using unregisterDevice() method on TalkJS session object but it didn't change the status to offiline ergo, a user in other browser session can still see this user as online. But reloading the browser window changes this user's status to offline.
Hello,
I have a use case where I need to add a new participant to an existing chat only when they click on the chat icon(I am using the popup). However i get this message when i try to do that:
You are trying to read a conversation, which doesn't exist or doesn't belong to you. Make sure that the conversation exists or you call conversation.setParticipant(me) before mounting the TalkJS UI.
Is there a way to add a new participant after the Chat component has mounted?
Thanks in advance!
I created a flutter Module, add talkJs flutter SDK. things are alright when I run module simply.
After that I mixed the flutter Module to my iOS project, when I start talkjs screen it always show loading, that loading took a long time before it disappear.
The way I integrated a Flutter module into my iOS project
Can you add dart code samples or websocket samples?
We were able to successfully able to have working chat app with the example, but the screens are zoomable, that is a user can pinch to zoom.
We found something related to this in the documentation : https://talkjs.com/docs/Features/Supporting_Mobile_Devices/#fixing-the-viewport, but this is related to react and not react native. I was not able to find any thing else regarding this.
can someone help us to disable this zoom.
Hey,
I am building a chat application using talkjs react-native sdk. The react-native SKD is really awesome. The only issue I am facing is to add custom actions on custom button in the UI. I went through the whole documentation but couldn't find a way to add custom actions.
Can you please help me with how to do that?
I really appreciate any help you can provide.
Does Talk.js provide a destroy(), unload(), or similar function?
In SPAs, sometimes the same page is loaded more than once, and I want to prevent possible memory leaks:
https://reactjs.org/docs/integrating-with-other-libraries.html
Example of what I think would happen:
facebook/react#7128
Thanks
When opening the chat in one of our React Native apps in production some users receive an error (see image below). Our error logging/reporting doesn't catch any crashes/exceptions. I would assume this would be a 500 error from the API or something related to that. It happens occasionally but not for all devices/users.
I was wondering how one could figure out what is going wrong? Would be nice for our error reporting that if something went wrong on the TalkJS side that our system notifies us about this as well. I couldn't find anything about that in the docs. Maybe I missed something. For example add a callback which you could configure to send something to Sentry.
new Talk.Session({
appId: 'YOUR_APP_ID',
me: me,
onError: (e) => Sentry.captureException(e),
});
Besides this, do you maybe know what is causing some users to see the following error?
The chat works in my simulator 15+, but when I tested it on a device with iOS 13.4, it just didn't work.
After reading this page https://talkjs.com/docs/Getting_Started/
I manually changed this method in the WebView.js file
try {
await Talk.ready;
....
} catch {}
for this ...
Talk.ready.then(() => {....})
And, it worked!
Where can I update this in @talkjs/react-native
?
Can someone help me?
I have installed this visitor chat on my website and have had a number of complaints from users saying that they are receiving messages that are not intended for them. I have checked that this is the case and can see that in some instances multiple users are added to the same conversation ID
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.