feat: ✨ File message type and trailing parameter (for custom file i…

[TheCityzenApp]

✨ New Feature: Add File Message Type Support with Open File Capability and Enhanced Input Field Customization

Video Recording

file-message-demo.mp4

Description
This pull request significantly enhances ChatView by introducing a new file message type and improving the customizability of the chat input field. Users can now send and receive files, with the added functionality to open these files directly from the chat interface. Additionally, the existing trailing parameter of the text field is highlighted as a powerful way to add custom icons, such as a file picker, to the chat composer.

FEATURES

1. File Message Type and File Opening on Tap
   This feature introduces the capability to handle and display messages that represent files. A new FileMessageView widget is integrated to render these messages. Furthermore, users can now open these files directly from the chat UI by tapping on the message, facilitated by the open_filex package. The reply message view also supports a distinct display for file messages.

   Screenshots

   

   

   Code

   --- a/lib\src\widgets\message_view.dart
   +++ b/lib\src\widgets\message_view.dart
   @@ -16,6 +16,7 @@
    import 'image_message_view.dart';
    import 'reaction_widget.dart';
    import 'text_message_view.dart';
    import 'voice_message_view.dart';
    import 'file_message_view.dart'; // ADD THIS IMPORT
    
    class MessageView extends StatefulWidget {
   @@ -140,6 +141,15 @@
                                          highlightScale: widget.highlightScale,
                      );
                    }
   +                // ADDED THIS ELSE IF FOR MessageType.file
   +                else if (widget.message.messageType == MessageType.file) {
   +                  return FileMessageView(
   +                    message: widget.message,
   +                    isMessageBySender: widget.isMessageBySender,
   +                    // You can add more configurations here if FileMessageView needs them
   +                    // fileMessageConfig: messageConfig?.fileMessageConfig, // Uncomment if you add a fileMessageConfig to MessageConfiguration
   +                  );
   +                }
   +                // END OF ADDED ELSE IF
                    else if (widget.message.messageType.isText) {
                      return TextMessageView(
                        inComingChatBubbleConfig: widget.inComingChatBubbleConfig,

   --- a/lib\src\widgets\reply_message_type_view.dart
   +++ b/lib\src\widgets\reply_message_type_view.dart
   @@ -52,6 +52,21 @@
                  ),
              ],
            ),
   +      // Case for MessageType.file - Corrected to use a hardcoded string for now
   +      MessageType.file => Row(
   +          children: [
   +            Icon(
   +              Icons.file_copy, // Or any other suitable file icon
   +              size: 20,
   +              color:
   +                  sendMessageConfig?.replyMessageColor ?? Colors.grey.shade700,
   +            ),
   +            Text(
   +              'File', // Changed from PackageStrings.currentLocale.file to a hardcoded string
   +              style: TextStyle(
   +                color: sendMessageConfig?.replyMessageColor ?? Colors.black,
   +              ),
   +            ),
   +          ],
   +        ),
          MessageType.custom when customMessageReplyViewBuilder != null =>
            customMessageReplyViewBuilder!(message),
          MessageType.custom || MessageType.text => Text(

   --- a/pubsec.yaml
   +++ b/pubsec.yaml
   @@ -23,6 +23,7 @@
      image_picker: '>=0.8.9 <2.0.0'
      intl: ^0.20.0
      url_launcher: ^6.3.0
   +  open_filex: ^4.3.2
    
    dev_dependencies:
      flutter_lints: ^2.0.1

2. Enhanced Input Field Customization via trailing parameter
   This feature leverages the existing trailing parameter within SendMessageConfiguration to provide greater flexibility for adding custom widgets to the chat input field. Developers can now easily integrate elements like a file attachment icon, stickers button, or any other custom functionality directly into the message composer's right side.

   Screenshots

   

   Code

   // In lib\src\widgets\chatui_textfield.dart, within the build method's Row widget:
   if (sendMessageConfig?.trailing != null)
     ...sendMessageConfig!.trailing!,

Checklist

• The title of my PR starts with a Conventional Commit prefix (fix:, feat:, docs: etc).
• I have followed the Contributor Guide when preparing my PR.
• I have updated/added tests for ALL new/updated/fixed functionality.
• I have updated/added relevant documentation in docs and added dartdoc comments with ///.
• I have updated/added relevant examples in examples or docs.

Breaking Change?

• Yes, this PR is a breaking change.
• No, this PR is not a breaking change.

Related Issues