Custom Messages HELP

[cjromanos92]

Hey all,

Beginner with Flutter here, but looking for an example of building and then displaying a customMessage.
Can't seem to figure out how customMessageBuilder quite works, but would love a little guidance.

I am attempting to using customMessageBuilder to display 3 buttons within a chat bubble that will be used in our Chatbot as multiple choice response options.

I am just looking for the simplest example of a custom message type using metadata and altering the way it displays with additional widgets.

Please and thank you in advance!

[SanginiG]

Hi, working on the same implementation, right now I'm using metadata to pass on the chat options and then using this data to build my custom buttons in the bubble

[SwiftyFlow]

Can you please show a bit of code? I have:

final metadata = {
  //message part
  'text': serverMessage.body,

  //prompt part
  'code': serverMessage.prompt!.code,
  'fieldName': serverMessage.prompt!.fieldName,
  'fieldType': serverMessage.prompt!.fieldType,
  'linkLabel': serverMessage.prompt!.linkLabel,
};

final customMessage = types.CustomMessage(
  author: _user,
  createdAt: DateTime.now().millisecondsSinceEpoch, //fixme
  id: serverMessage.messageId,
  metadata: metadata);

_addMessage(customMessage);

But then I remain with customMessageBuilder being null as I have no clue how to set it up.

Can you help?

[SwiftyFlow]

or should I alter the SizedBox and return what I need? but it seams odd to modify it there in the git

case types.MessageType.custom:
  final customMessage = message as types.CustomMessage;
  return customMessageBuilder != null 
    ? customMessageBuilder!(customMessage, messageWidth: messageWidth) 
    : const SizedBox();

[demchenkoalex]

customMessageBuilder will be used as soon as messages array will contain a CustomMessage and it will be visible on the screen. I see you properly create one. So similar to any other message, let's say you have [TextMessage, TextMessage, TextMessage, TextMessage, TextMessage, CustomMessage], as soon as you will scroll through all text messages customMessageBuilder will be called. This is a function that will have a message class (following your example it will be

types.CustomMessage(
  author: _user,
  createdAt: DateTime.now().millisecondsSinceEpoch, //fixme
  id: serverMessage.messageId,
  metadata: metadata
 );

and it will expect you to return a Widget - you need to build UI for your custom message, and as soon as you will return some UI it will be shown in chat alongside those text messages

[SanginiG]

Hi, SwiftyFlow

First I create my meta data according to the type of message I need to display using a converter function (CustomMetaData.fromStep(step))
Then I provide this meta data to my CustomMessage.
Likewise I resolve all the upcoming messages JSON from backend and convert them to CustomMessages.

class QuestionManager {
  types.Message resolve(Step step) {
    ChildType? childType = step.childType;
    types.Message resolvedMessage;
    Map<String, dynamic> metaData = {"metadata": CustomMetaData.fromStep(step)};
    if (childType == ChildType.singleSelect) {
        resolvedMessage = types.CustomMessage(
            createdAt: step.timestamp,
            author: Authors.bot,
            id: const Uuid().v1(),
            metadata: metaData);
  }
  else if (childType == ChildType.video) {
        resolvedMessage = types.VideoMessage(
            createdAt: step.timestamp,
            name: step.meta?['thumbnail'] ?? '',
            uri: step.desc ?? '',
            size: 15000000,
            author: Authors.bot,
            id: const Uuid().v1());
      }
   return resolvedMessage;
    }
}

Then, in my custom Message Builder I return the respective widget using the 'childType' property I defined in my CustomMetaData, in my case there is a list of radio buttons

Widget customMessageBuilder(types.CustomMessage customMessage,
      {required int messageWidth}) {
    CustomMetaData? metaData =
        customMessage.metadata?['metadata'] as CustomMetaData?;

      ChildType? childType = metaData?.childType;
     ...
      switch (childType) {
        case ChildType.singleSelect:
          return SingleSelectMessageWidget();
     default:
              return ErrorInResolvingMessageWidget();
      }
}

[SwiftyFlow]

Thanks to you both sadly my noob way to code (10 years of Xcode experience) doesn't understand yours, above not really helping. There is always something further down missing or incompatible + I don't get why I cannot extend any class to work inside my project and not alter the git (gonna do one pub get in 6 months and it will wipe all I have done) + being constantly alerted about altering git + having 0 code suggestion/verification until Run + having to restart every single time I alter one bit. Weird not to find a complete clear example, it's super cool and I was super impressed to have it to work straight off with the messages.json provided and it was as easy to make my server messages flow into it but then I'm turning in circles just to add a button into one classic text message to showModalBottomSheet()... Last screen of the app, such a shame as even the pop up goal is achieved but I have no way to show a button onto a message.

[demchenkoalex]

I can tell you have 10 years of Xcode experience, because you correctly write Xcode haha :) I started myself with the native iOS, but since then I professionally work in React Native and doing some Flutter on the side. I think you will get there eventually :) different technologies make us better engineers

[SwiftyFlow]

Olala imagine I can press it now... hahahah

[SwiftyFlow]

All working now 🎉