Even is CustomerMetadata is set, messages are received as Anonymous User in the website given by Papercups to answer them.

Attached is the piece of code that handles the screen where PaperCupsWidget is used (accountId is not present for security purposes):

class ChatSupportScreen extends StatefulWidget {
  @override
  _ChatSupportScreenState createState() => _ChatSupportScreenState();
}

class _ChatSupportScreenState extends State<ChatSupportScreen> {
  FirebaseAuth _firebaseAuth;
  String _name;
  String _email;
  String _userId;
  CustomerMetadata _customerMetadata;

  @override
  void initState() {
    super.initState();
    _firebaseAuth = context.read(firebaseAuthProvider);
    if (_firebaseAuth != null) {
      _name = _firebaseAuth.currentUser.displayName.substring(11);
      _email = _firebaseAuth.currentUser.email;
      _userId = _firebaseAuth.currentUser.uid;
    }
    _customerMetadata = CustomerMetadata(
      name: _name,
      email: _email,
      externalId: _userId,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: greenColor,
        leading: IconButton(
          icon: Icon(
            Icons.chevron_left_rounded,
            color: Colors.white,
          ),
          onPressed: () => _endChat(context),
        ),
        title: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Text(
              "Atención al afiliado",
              style: TextStyle(
                fontFamily: "Roboto-Regular",
                fontSize: getProportionateScreenWidth(18),
                fontWeight: FontWeight.bold,
                color: Colors.white,
                letterSpacing: 1,
              ),
            ),
          ],
        ),
        elevation: 0.0,
        centerTitle: false,
      ),
      body: SafeArea(
        child: PaperCupsWidget(
          props: Props(
            accountId: "",
            title: "Bienvenido a la atención al afiliado de S. P. G. y BIO.",
            subtitle: "¿Cómo podemos ayudarlo?",
            newMessagePlaceholder: "Escriba su consulta aquí...",
            primaryColor: greenColor,
            customer: this._customerMetadata,
            companyName: "S. P. G. y BIO.",
          ),
          dateLocale: "es-AR",
          timeagoLocale: EsMessages(),
          sendingText: "Enviando...",
          sentText: "Enviado",
          floatingSendMessage: true,
        ),
      ),
    );
  }

  void _endChat(BuildContext context) {
    showAlertDialog(
      context: context,
      title: "Cerrar soporte",
      content:
          "Recuerde que si cierra este chat y su conversación no ha finalizado, perderá todos los mensajes enviados y recibidos",
      defaultActionText: "Aceptar",
      cancelActionText: "Cancelar",
    ).then((value) {
      if (value) {
        Navigator.of(context).pop();
      }
    });
  }
}

Hi @aguilaair!

This PR implements a couple of things:

1. The new PapercupsIntl() class that brings translations for all strings I was able to find in the source code. One can now use it as such:

PaperCupsWidget(
  props: Props(
    accountId: "xxxxxxxx-xxxxxxx-xxxx-xxxxxx",
    translations: PapercupsIntl(
      title: "Welcome 👋"
      subtitle: "How can we help you today?",
      greeting: "We'll make sure to reply in an hour or less",
      // ...
    ),
  ),
)

⚠️ BREAKING CHANGE

This is a breaking change as I've removed the duplicated properties from both Props and PapercupsWidget. My rationale is that this could be valid enough for a major release if coupled with the Availability feature for instance. Let me know If you'd rather have it in a minor release so that I add deprecation notices a little bit everywhere.

2. A fix for a bug I found when running apps in profile or release mode: event.event.toString() only returns "PhoenixChannelEvent" in those modes. So this case was never true https://github.com/papercups-io/papercups_flutter/blob/95252be186b383b0cbfad8c059e6dd3bf57793e9/lib/utils/socket/joinConversation.dart#L32-L33 which means that whenever a message was sent from the dashboard to an app, it wouldn't show up in real-time.

3. Replacing the use of Papercups fullName for displayName as that seems more appropriate in this context.

4. A couple of minor typos corrections here and there.

First things first, thanks for this library: it works wonders! 🎉

I'm just facing an issue right now that could be coming either from this package or Papercups API itself, maybe you could shed some lights on what's going on. Long story short: I cannot set customers metadata.

If I provide the following to the widget:

customer: CustomerMetadata(
  name: 'userName',
  externalId: 'userId',
  otherMetadata: {
    'random_field': 'random field value',
  },
),

Both name and externalId are saved and shown in the Papercups dashboard but the content of otherMetadata is not and metadata is still null.

I dug a little bit in the source code and things seems to be happening over here:

https://github.com/papercups-io/papercups_flutter/blob/1360acf5bfa4bfb589db1615d915532ead9458d2/lib/utils/apiInteraction/updateUserMetadata.dart#L22-L29

If I use https://app.papercups.io/api/v1/customers as done in the API endpoint docs (instead of the https://app.papercups.io/api/customers used by the package here), then https://app.papercups.io/api/v1/customers/[id]/metadata returns a 404 with {"errors":{"detail":"Bad Request"}}%. Maybe there was a change over there?

FWIW I also created an issue in the the main repo https://github.com/papercups-io/papercups/issues/995 as when I try to perform the same action via the call mentioned in the API endpoint docs, I get the same result: metadata is null.

Hello guys! I found I bug that my messages won't loading for first time and I found there is an error when loading the customer infos. I debugged and found a wrong variable name, maybe it changed between versions but not fixed in this lib.

I'm making this PR to fix this variable, the main fix was change the variable name: lastSeen to lastSeenAt last_seen to last_seen_at

Hey! I have been using papercups with no issue in my web page using vue-papercups. I've had no issue. Recently, I have developed a mobile app using flutter. It seems like there is an issue with it. We are able to receive users' messages, but when we replied through slack/papercups dashboard, users aren't able to receive our messages. I have reached out to the papercups team through chat but haven't gotten further response regarding this.

this is how I integrated it in our mobile app

  @override
    Widget build(BuildContext context) {
      return Scaffold(
        floatingActionButton: PaperCupsButton(
          onTap: onClickPapercups,
          show: _show,
          isNavAvailable: widget.isNavigationAvailable,
        ),
        body: Stack(
          children: [
            widget.body,
            PaperCupsChatBox(
              onTap: onClickPapercups,
              show: _show,
              email: _email,
              name: _name,
              isNavAvailable: widget.isNavigationAvailable,
            ),
          ],
        ),
      );
    }

Papercups button:

@override
Widget build(BuildContext context) {
  return Container(
    height: 55,
    width: 55,
    margin: EdgeInsets.only(bottom: isNavAvailable ? 50 : 0),
    decoration: const BoxDecoration(
      color: colorPapercups,
      shape: BoxShape.circle,
    ),
    child: InkWell(
      customBorder: const CircleBorder(),
      onTap: onTap,
      child: Icon(
        show ? Icons.close : Icons.chat_bubble_rounded,
        color: colorPapercups.computeLuminance() < 0.5
            ? Colors.white
            : Colors.black,
        size: 25,
      ),
    ),
  );
}

Papercups chatbox:

@override
Widget build(BuildContext context) {
  final AppLocalizations _local = AppLocalizations.of(context)!;
  MediaQueryData queryData = MediaQuery.of(context);

  double _marginBottom = queryData.size.width * 0.18;

  if (queryData.size.width > 400) {
    _marginBottom = queryData.size.width * 0.24;
  }

  return Container(
    width: double.infinity,
    alignment: Alignment.bottomRight,
    margin: EdgeInsets.only(bottom: _marginBottom, top: 10),
    child: Visibility(
      visible: show,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          boxShadow: [
            BoxShadow(
              blurRadius: 10,
              color: Theme.of(context).shadowColor.withOpacity(0.2),
            ),
          ],
        ),
        constraints: BoxConstraints(
          minWidth: 100,
          maxWidth: 380,
          minHeight: 100,
          maxHeight: queryData.size.width * 1.3,
        ),
        margin: const EdgeInsets.all(20),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(15),
          child: PaperCupsWidget(
            floatingSendMessage: false,
            closeAction: onTap,
            props: Props(
              accountId: "x",
              title: "Welcome to x",
              primaryColor: colorPapercups,
              greeting: _local.hiThere,
              subtitle: _local.askAnything,
              requireEmailUpfront: email != null ? false : true,
              newMessagePlaceholder: _local.startTyping,
              companyName: _local.x,
              customer: CustomerMetadata(
                email: email,
                name: name,
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Hello folks, seems like the issue has been resolved using https://pub.dev/packages/pointer_interceptor

source: https://github.com/flutter/flutter/issues/54027#issuecomment-747132587

This is a complete rewrite of the library, with native chat support, meaning it is faster and with many more customization possibilities, including:

• Dark mode
• Gradient support
• Immediate loading of chat widget
• Exact time on click
• Minimal libraries
• Performant

Additionally, This enables many more modifications tailored to apps that the web version can't (for future version, will not be included in 2.0.0):

• Proactive messaging, in other words new messages will appear ovelayed on the user. The user must have initiated a conversation before, we can't do this without a conversation ID, that conversation ID can then be listened for if initialized on app boot.
• Local, encrypted chat sessions -- We will be using Hive for this. Stops the few seconds of requesting data and loading it up. Will still be requested and updated, but should first load the local verision for speed
• Multiple conversations -- Similar to what Intercom does
• Image upload -- Should be relatively simple once the logic is ready on the Papercups backend
• Even deeper theming -- Maybe multiple, completely different styles?
• Replying to certain conversations by sliding like in Telegram/Whatsapp? we could just use the quote block feature from markdown for this.

Hi @aguilaair!

This PR includes a couple of changes listed as follow:

Flutter 3 support

The change made in 1aa632234a7163095bacf502537427348fdfa93a fixes the redundant null-aware operators warning introduced in Flutter 3.0, while keeping backwards compatibility for previous Flutter versions.

Full theming support via new PapercupsStyle

Even with the work made for #18, I encountered some visual discrepancies after enabling dark mode in my app via:

MaterialApp(
  theme: Themes.lightMode, // Light mode ThemeData
  darkTheme: Themes.darkMode, // Dark mode ThemeData
)

That's why I exposed most of the styling params via the new PapercupsStyle class. The new API has been detailed in the updated README. Please feel free to double-check I didn't make any mistake there 😅.

⚠️ BREAKING CHANGE

This change also required a breaking change to PaperCupsWidget & Props in order to collocate all visual params.

Prefix all user-facing classes with Papercups

In order to add consistency and avoid potential naming conflicts, I add Papercups as a prefix to all the user-facing classes (PapercupsCustomerMetadata, PapercupsProps, PapercupsStyle & PapercupsIntl).

⚠️ BREAKING CHANGE

In the same spirit, I made another breaking change which was renaming PaperCupsWidget to PapercupsWidget, so that it'd follow the official spelling.

Update README with missing params

On top of the new PapercupsStyle and moving some of the old PapercupsWidget & PapercupsProps params around, I also added some existing params that were not documented yet.

I hope all these changes make sense to you and can fit in with what you had planned for the upcoming v3.

Let me know if you'd like me to make some changes! 🙌

When I render the widget, write a message, then close and re-open, all messages are gone. It seems that the messages re-appear once the chat text input is focused. Also, another thing which is a bit weird: once re-opened, it seems that a new conversation is created instead of using the old one. It seems to be easily reproducible. I'm using 2.1.0+1.

My code:

PaperCupsWidget(
  closeAction: () {
    Navigator.of(context, rootNavigator: true).pop();
  },
  props: Props(
    accountId: "...",
    customer: CustomerMetadata(
      externalId: res.viewer.id,
      email: res.viewer.email,
      name: res.viewer.name,
    ),
  ),
);

It seems #68 is related

Currently markdown is not supported. I'd like to keep dependencies minimal to avoid dependency issues (e.g. not including provider, get, etc), so I am not a fan of adding more deps. However, markdown is pretty complex and I don't have the time to implement a custom renderer, especially having flutter_markdown, which we might be able to use https://pub.dev/packages/flutter_markdown

Investigate allowing functions being passed to onPageStarted, onPageFinished, onWebViewCreated, etc, This could be used for controlling the loading and show a loading spinner while it loads.

Bumps http from 0.13.4 to 0.13.5.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

When re-opening the widget, it takes some time until the history is fetched. This is obviously not ideal as it takes a few seconds until the user can see the history, but it also introduces another problem, which is that it actually creates a new conversation for just that messages. Once it loads, the new conversion still appears in the admin conversations panel, but once loaded the old conversion is used.

A simple workaround for this might be to just add a loading indicator and prevent the user from sending messages until fully loaded, which would automatically prevent this bug where it creates a new conversation. Ideally it would just load faster, and that could probably be achieved by caching the chat history. Maybe the user can provide an optional store to cache the data, like a hive box (which I for example use anyway).

Having the ability to have multiple, concurrent conversations. @phr34k started modularizing the package and adding the ability to do it but there is still a lot of work to be done

Should cover the basics for the time being

• [x] Classes
• [x] Theming
• [x] Get customer
• [ ] Messages added
• [ ] Get previous messages
• [x] Update customer
• [ ] Socket creation
• [ ] Channel joining

Any others?