NavigationDelegate for handling links inside chat

[Alexander-Ordina]

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
    );

[bugnano]

Fixed in talkjs_flutter version 0.5.0

[vickz84259]

@Alexander-Ordina Hey there, my name is Victor. I'm a developer at TalkJS. We are about to release a new version of the SDK which would affect your use of the navigationDelegate. The main catalyst for this release is a switch to a different WebView package. As part of this switch we have implemented the SDK to always open links in a separate browser instance (#19). This removes the navigationDelegate. The goal of this change is to bring this SDK's behaviour in line with our React Native SDK.

We would like to know if this change is aligned with the intentions you had highlighted initially. We also just wanted to ensure you don't get any surprises once you upgrade to this new version.

[vickz84259]

We have gone ahead and released version 0.7.0 of the SDK. Should you have an issue with this release feel free to reopen this issue or create a new one.