talkjs/talkjs-flutter

Flutter SDK for the TalkJS Chat API

TalkJS Flutter SDK

Official TalkJS SDK for Flutter

What is TalkJS?

TalkJS lets you add user-to-user chat to your marketplace, on-demand app, or social platform. For more information, visit talkjs.com.

Don't hesitate to let us know if you have any questions about TalkJS.

Requirements

• Dart sdk: ">=2.15.0 <3.0.0"
• Flutter: ">=2.8.1"
• Android: minSDKVersion 19

Installation

Edit the dependencies section of your project's pubspec.yaml file in your Flutter project as follows:

dependencies:
  talkjs_flutter: ^0.1.0

Run the command: flutter pub get on the command line or through Android Studio's Get dependencies button.

Usage

Import TalkJS in your project source files.

import 'package:talkjs_flutter/talkjs_flutter.dart';

Then follow our Flutter guide to start using TalkJS in your project.

TalkJS is fully forward compatible

We promise to never break API compatibility. We may at times deprecate methods or fields, but we will never remove them. If something that used to work stops working, then that's a bug. Please report it and we'll fix it asap.

The package is being released in a beta state. The reason for this is that there are things that one can do with the TalkJS JavaScript SDK that aren't possible with the Flutter SDK. We will release v1.0.0 of this package once the two SDKs are similar in terms of features. This however does not take away from our commitment to always maintain backward compatibility. So you can be assured that the package is stable for production use.

talkjs-flutter's Issues

Do you have a plan to support Windows platform?

Do you have a plan to support Windows platform for this Flutter SDK?

Bug in iphone

i am using talkjs_flutter: ^0.2.1 and in iphone i am getting extra white space above Say something text field, Please fix it ASAP(Same is working fine in android

WhatsApp.Video.2022-05-11.at.9.50.43.PM.mp4

)

Push notifications from another user

Hello!

I have problem with "too many" push notifications I shouldn't receive.
I am testing on Android 12 and 13.

Case:

• log in to my app with user_1
• create talkJs session
• chat with user_2
• log out from my app
• _session.dispose(); and _session = null;
• log in to my app with user_2
• create new talkJs session
• send message to another user
• RECEIVING PUSH NOTIFICATIONS FROM MYSELF and another user

Additionally all the push notifications messages are combined like they are sent from another user even if it's me.

Can any1 check this behavior or tell me how can I really kill the previous session?
Thank you!

[Android] No push notifications while app is killed

Hello!

I have problem with push notifications on Android while app is killed.
I do have Firebase push notifications in my app which are working fine. While sending push from Firebase console I am receiving it no matter if the app is in foreground, background or killed.
Push notification from talkJs are showing only while the app is in foreground or background.
No chat notifications are received while app is killed. This behavior appy only to Android (iOS is seems to be working).

Looking for help or confirmation that pushes from talkJs chat are working on Android while the app is terminated.
Thank you!

talkjs lib broke Firebase lib on iOS

After instilling talkjs lib, Firebase lib starts throwing this error on Firebase.initializeApp:

PlatformException(channel-error, Unable to establish connection on channel., null, null)

Here dependencies from my pubspec.yaml:

firebase_core: ^2.3.0
talkjs_flutter: ^0.6.0

Need firebase versions update. iOS PlatformException while using Firebase (versions conflict)

Hey,

I use firebase core and firebase messaging in my app. It works fine in Android but there is an error in iOS:
PlatformException(channel-error, unable to establish connection on channel., null, null)

After some research I found that problem is in outdated versions and every solution included update of them.

I have the latest versions:

firebase_core: ^2.13.0
firebase_messaging: ^14.6.1

However your versions are different. When I removed your package, the error gone.

Could you please update versions of firebase_core and firebase_messaging to the latest? I hope it will help me.

Thank you.

No way to logout/end a session

I have been battling with this issue for days. There seems to be no way to end the current session so a user can start another session. The use case here is logging out. Once I log out, I want to be able to login back with my previous credential or a new one with a new talkjs session. Each time i try that i get a 'The me property has already been set for the Session object'. I have tried disposing the session, but I still cannot create a new session with a new .me property. Below is a snapshot of the code and error
Flutter 3.10
talkjs_flutter 0.8.1

Firebase PlatformException(channel-error, unable to establish connection on channel., null, null)

Hey,

I integrated firebase core and firebase messaging in my app. It works fine in Android but there is an error in iOS:
PlatformException(channel-error, unable to establish connection on channel., null, null)

After removing packages one by one, i discovered removal of talkjs_flutter solved the issue.
I am using the latest firebase_core: 2.14.0 and firebase_messaging: 14.6.3 with talkjs_flutter: 0.8.1

Add partecipants to a Conversation

Is there a way to add/remove a partecipant or change its permission?

In JS SDK I see this conversation.setParticipant(me); but not found anything in Dart SDK

Ref: https://talkjs.com/docs/Features/Group_Chats/Access_rights/

NavigationDelegate for handling links inside chat

We are using the TalksJs-Flutter plugin in our project to do the livechat for customer service.
With the current version of the plugin when tapping a link in the chat the link is opened inside the webview from te plugin. We do not want our links to open inside our app but want to open show a popup telling the customer that they are leaving the app and then open the link in the browser.

We would like to have a navigationDelegate parameter on the ChatBox which passes the NavigationDelegate to the webview for handling links

Example solution:

class ChatBox extends StatefulWidget {
  final Session session;

  final TextDirection? dir;
  final MessageFieldOptions? messageField;
  final bool? showChatHeader;
  final TranslationToggle? showTranslationToggle;
  final String? theme;
  final TranslateConversations? translateConversations;
  final List<String> highlightedWords = const <String>[];
  final MessagePredicate messageFilter;

  final Conversation? conversation;
  final bool? asGuest;

  final SendMessageHandler? onSendMessage;
  final TranslationToggledHandler? onTranslationToggled;
  final LoadingStateHandler? onLoadingStateChanged;
  final Map<String, MessageActionHandler>? onCustomMessageAction;
  final NavigationDelegate? navigationDelegate; // <--- ADD HERE

  const ChatBox({
    Key? key,
    required this.session,
    this.dir,
    this.messageField,
    this.showChatHeader,
    this.showTranslationToggle,
    this.theme,
    this.translateConversations,
    //this.highlightedWords = const <String>[], // Commented out due to bug #1953
    this.messageFilter = const MessagePredicate(),
    this.conversation,
    this.asGuest,
    this.onSendMessage,
    this.onTranslationToggled,
    this.onLoadingStateChanged,
    this.onCustomMessageAction,
    this.navigationDelegate, // <--- ADD HERE
  }) : super(key: key);

  @override
  State<ChatBox> createState() => ChatBoxState();
}

return WebView(
      initialUrl: 'about:blank',
      javascriptMode: JavascriptMode.unrestricted,
      debuggingEnabled: kDebugMode,
      onWebViewCreated: _webViewCreatedCallback,
      onPageFinished: _onPageFinished,
      javascriptChannels: <JavascriptChannel>{
        JavascriptChannel(
            name: 'JSCSendMessage', onMessageReceived: _jscSendMessage),
        JavascriptChannel(
            name: 'JSCTranslationToggled',
            onMessageReceived: _jscTranslationToggled),
        JavascriptChannel(
            name: 'JSCLoadingState', onMessageReceived: _jscLoadingState),
        JavascriptChannel(
            name: 'JSCCustomMessageAction',
            onMessageReceived: _jscCustomMessageAction),
      },
      gestureRecognizers: {
        // We need only the VerticalDragGestureRecognizer in order to be able to scroll through the messages
        Factory(() => VerticalDragGestureRecognizer()),
      },
      navigationDelegate: widget.navigationDelegate, // <--- ADD HERE
    );

http package version issue

When I upgrade talkjs_flutter sdk version to 0.10.0 from 0.2.1 I get this error :

Because talkjs_flutter >=0.9.0 depends on http ^0.13.6 and mlc_concierge depends on http ^1.1.2, talkjs_flutter >=0.9.0 is forbidden.
So, because mlc_concierge depends on talkjs_flutter ^0.10.0, version solving failed.

I can't downgrade my version of http because of other dependencies.

No push notifications until ChatBox widget created

Hello!

I have problem with push notifications on clean installation of my app.
I am testing on Android 12 and 13.

Case:

• create talkJs session
• create talkJs user
• assign talkJs user to talkJs session
• send message from another user to me
• NO PUSH NOTIFICATION RECEIVED

When I open my view where I return ChatBox with session and conversation then the push notifications are showing.
After that I can close and kill the app and next time I run it, it is working fine.
It looks like a bug on a "first run".

Can any1 check this behavior?
Thank you!

Conversation.sendMessage not implemented

The Conversation.sendMessage method is not yet implemented. When can we expect it to be implemented? Is there a workaround for now?

Flutter SDK always loading in flutter module

talkjs/talkjs-examples#442 (comment)

Need customising webview color and keyboard color

Hello talkjs team!

I am working on an application and I have faced to some problems:

1. On screen loading or when I am scrolling the view up or down, I can see white background. I think it is webview background and I found some possible solutions here and here.
2. My application is in dark mode but I can't open a keyboard in ChatBox using necessary styles. Global setting in themeData brightness: Brightness.dark doesn't help with the situation. I need to be able to change keyboard color to Brightness.dark.

Could you please help me and fix it as soon as possible?

Here is a video of the problem.
https://user-images.githubusercontent.com/24383434/214597541-e6ec7b2c-3850-453b-8b9c-33df5c3f1143.mp4

And part of my code (build):

  Widget build(BuildContext context) {
    final themeData = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        // title: Text(conversation?.subject ?? ''),
      ),
      body: Container(
        padding: const EdgeInsets.only(bottom: 20),
        color: themeData.scaffoldBackgroundColor,
        child: FutureBuilder(
          future: getChatBasicInfo(),
          builder: (_, snapshot) {
            if (!snapshot.hasData || session == null) {
              return Container();
            }
            return LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) => Column(
                children: <Widget>[
                  Visibility(
                    visible: !_chatBoxLoaded,
                    child: SizedBox(
                      width: min(constraints.maxWidth, constraints.maxHeight),
                      height: min(constraints.maxWidth, constraints.maxHeight),
                      child: Center(
                        child: SizedBox(
                          width: 16,
                          height: 16,
                          child: CircularProgressIndicator(
                            color: themeData.primaryColor,
                            strokeWidth: 2,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Visibility(
                    maintainState: true,
                    visible: _chatBoxLoaded,
                    child: ConstrainedBox(
                      constraints: constraints,
                      child: ChatBox(
                        session: session!,
                        conversation: conversation,
                        theme: 'dark_theme',
                        onLoadingStateChanged: (state) {
                          setState(() {
                            _chatBoxLoaded = state == LoadingState.loaded;
                          });
                        },
                        messageField: const MessageFieldOptions(
                          enterSendsMessage: true,
                        ),
                        showChatHeader: false,
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }

Conflict with FCM which breaks one of the packages

Hi,
thank you for the project!

I need firebase cloud messaging to get notifications in background.
But it didn't work because of needed settings by talkjs-flutter project
flutter_apns.disable_swizzling: true

If I remove it, there is a problem
Firebase PlatformException(channel-error, unable to establish connection on channel., null, null)

It breaks the key feature in my application.

Please, help me to fix it. It's really urgent.

Thank you!

ChatBox.messageField.enterSendsMessage doesn't work

The property ChatBox.messageField.enterSendsMessage does not work. When I tap the return button (on iOS or Android) the message is being sent. Here the code I'm using to build the chatbox:

ChatBox(
  session: _session,
  conversation: _conversation,
  showChatHeader: false,
  messageField: MessageFieldOptions(
    spellcheck: true,
    enterSendsMessage: false, // <-- always set to false
  ),
  theme: Theme.of(context).brightness == Brightness.light ? 'default' : 'default-dark',
)

I could be a wrong mapping of the "return" button on mobile platforms? In JS SDK is everything ok.