talkjs / talkjs-examples Goto Github PK

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

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

Description

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:

Steps to reproduce the error

Dependencies

@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

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.

Hi there, i'm getting this error when using Flutter SDK,

Only added this flutter_inappwebview: ^6.0.0 to yaml.

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;

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

uncaught error with reading PostMessage.log

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?

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.

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?

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

resolved via 'npm install har-validator@latest --save-dev'

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

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)

Is there any available Vue Implementation you can refer me to?

Can you add dart code samples or websocket samples?

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!

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

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?

This is my pubspec.yaml file
webview_flutter: ^4.0.2 talkjs_flutter: ^0.6.0