✨ Chat quote and reply

lib/widgets/chat/chat_message.dart

@@ -1,6 +1,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
+import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/user_directory.dart';
@@ -8,18 +9,23 @@ import 'package:surface/types/chat.dart';
 import 'package:surface/widgets/account/account_image.dart';
 import 'package:surface/widgets/attachment/attachment_list.dart';
 import 'package:surface/widgets/markdown_content.dart';
+import 'package:swipe_to/swipe_to.dart';
 
 class ChatMessage extends StatelessWidget {
   final SnChatMessage data;
+  final bool isCompact;
   final bool isMerged;
   final bool hasMerged;
   final bool isPending;
+  final Function()? onReply;
   const ChatMessage({
     super.key,
     required this.data,
+    this.isCompact = false,
     this.isMerged = false,
     this.hasMerged = false,
     this.isPending = false,
+    this.onReply,
   });
 
   @override
@@ -29,59 +35,92 @@ class ChatMessage extends StatelessWidget {
 
     final dateFormatter = DateFormat('MM/dd HH:mm');
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Row(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            if (!isMerged)
-              AccountImage(
-                content: user?.avatar,
+    return SwipeTo(
+      key: Key('chat-message-${data.id}'),
+      iconOnLeftSwipe: Symbols.reply,
+      swipeSensitivity: 20,
+      onLeftSwipe: onReply != null ? (_) => onReply!() : null,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (!isMerged && !isCompact)
+                AccountImage(
+                  content: user?.avatar,
+                )
+              else if (isMerged)
+                const Gap(40),
+              const Gap(8),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (!isMerged)
+                      Row(
+                        crossAxisAlignment: CrossAxisAlignment.baseline,
+                        textBaseline: TextBaseline.alphabetic,
+                        children: [
+                          if (isCompact)
+                            AccountImage(
+                              content: user?.avatar,
+                              radius: 12,
+                            ).padding(right: 6),
+                          Text(
+                            (data.sender.nick?.isNotEmpty ?? false)
+                                ? data.sender.nick!
+                                : user!.nick,
+                          ).bold(),
+                          const Gap(6),
+                          Text(
+                            dateFormatter.format(data.createdAt.toLocal()),
+                          ).fontSize(13),
+                        ],
+                      ),
+                    if (isCompact) const Gap(4),
+                    if (data.preload?.quoteEvent != null)
+                      StyledWidget(Container(
+                        decoration: BoxDecoration(
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(8)),
+                          border: Border.all(
+                            color: Theme.of(context).dividerColor,
+                            width: 1,
+                          ),
+                        ),
+                        padding: const EdgeInsets.only(
+                          left: 4,
+                          right: 4,
+                          top: 8,
+                          bottom: 6,
+                        ),
+                        child: ChatMessage(
+                          data: data.preload!.quoteEvent!,
+                          isCompact: true,
+                        ),
+                      )).padding(bottom: 4, top: isMerged ? 4 : 2),
+                    if (data.body['text'] != null)
+                      MarkdownTextContent(
+                        content: data.body['text'],
+                        isAutoWarp: true,
+                      ),
+                  ],
+                ),
               )
-            else
-              const Gap(40),
-            const Gap(8),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  if (!isMerged)
-                    Row(
-                      crossAxisAlignment: CrossAxisAlignment.baseline,
-                      textBaseline: TextBaseline.alphabetic,
-                      children: [
-                        Text(
-                          (data.sender.nick?.isNotEmpty ?? false)
-                              ? data.sender.nick!
-                              : user!.nick,
-                        ).bold(),
-                        const Gap(6),
-                        Text(
-                          dateFormatter.format(data.createdAt.toLocal()),
-                        ).fontSize(13),
-                      ],
-                    ),
-                  if (data.body['text'] != null)
-                    MarkdownTextContent(
-                      content: data.body['text'],
-                      isAutoWarp: true,
-                    ),
-                ],
-              ),
-            )
-          ],
-        ).opacity(isPending ? 0.5 : 1),
-        if (data.preload?.attachments?.isNotEmpty ?? false)
-          AttachmentList(
-            data: data.preload!.attachments!,
-            bordered: true,
-            noGrow: true,
-            maxHeight: 520,
-            listPadding: const EdgeInsets.only(top: 8),
-          ),
-        if (!hasMerged) const Gap(8),
-      ],
+            ],
+          ).opacity(isPending ? 0.5 : 1),
+          if (data.preload?.attachments?.isNotEmpty ?? false)
+            AttachmentList(
+              data: data.preload!.attachments!,
+              bordered: true,
+              noGrow: true,
+              maxHeight: 520,
+              listPadding: const EdgeInsets.only(top: 8),
+            ),
+          if (!hasMerged && !isCompact) const Gap(12),
+        ],
+      ),
     );
   }
 }

lib/widgets/chat/chat_message_input.dart

@@ -8,7 +8,9 @@ import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/controllers/chat_message_controller.dart';
 import 'package:surface/controllers/post_write_controller.dart';
 import 'package:surface/providers/sn_attachment.dart';
+import 'package:surface/types/chat.dart';
 import 'package:surface/widgets/dialog.dart';
+import 'package:surface/widgets/markdown_content.dart';
 import 'package:surface/widgets/post/post_media_pending_list.dart';
 
 class ChatMessageInput extends StatefulWidget {
@@ -16,16 +18,22 @@ class ChatMessageInput extends StatefulWidget {
   const ChatMessageInput({super.key, required this.controller});
 
   @override
-  State<ChatMessageInput> createState() => _ChatMessageInputState();
+  State<ChatMessageInput> createState() => ChatMessageInputState();
 }
 
-class _ChatMessageInputState extends State<ChatMessageInput> {
+class ChatMessageInputState extends State<ChatMessageInput> {
   bool _isBusy = false;
   double? _progress;
 
+  SnChatMessage? _replyingMessage;
+
   final TextEditingController _contentController = TextEditingController();
   final FocusNode _focusNode = FocusNode();
 
+  void setReply(SnChatMessage? value) {
+    setState(() => _replyingMessage = value);
+  }
+
   Future<void> _sendMessage() async {
     if (_isBusy) return;
 
@@ -69,6 +77,7 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
 
     attach.putCache(
       _attachments.where((e) => e.attachment != null).map((e) => e.attachment!),
+      noCheck: true,
     );
 
     // Send the message
@@ -80,9 +89,11 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
           .where((e) => e.attachment != null)
           .map((e) => e.attachment!.rid)
           .toList(),
+      quoteId: _replyingMessage?.id,
     );
     _contentController.clear();
     _attachments.clear();
+    _replyingMessage = null;
 
     setState(() => _isBusy = false);
   }
@@ -134,10 +145,45 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
               setState(() => _attachments.removeAt(idx));
             },
             onUpdateBusy: (state) => setState(() => _isBusy = state),
-          ).height(_attachments.isNotEmpty ? 80 + 8 : 0, animate: true).animate(
-              const Duration(milliseconds: 300),
-              Curves.fastEaseInToSlowEaseOut),
-        ),
+          ),
+        ).height(_attachments.isNotEmpty ? 80 + 8 : 0, animate: true).animate(
+            const Duration(milliseconds: 300), Curves.fastEaseInToSlowEaseOut),
+        SingleChildScrollView(
+          physics: const NeverScrollableScrollPhysics(),
+          child: Padding(
+            padding: _replyingMessage != null
+                ? const EdgeInsets.only(top: 8)
+                : EdgeInsets.zero,
+            child: _replyingMessage != null
+                ? MaterialBanner(
+                    padding: const EdgeInsets.only(left: 16.0),
+                    leading: const Icon(Symbols.reply),
+                    content: SingleChildScrollView(
+                      physics: const NeverScrollableScrollPhysics(),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          if (_replyingMessage?.body['text'] != null)
+                            MarkdownTextContent(
+                              content: _replyingMessage?.body['text'],
+                            ),
+                        ],
+                      ),
+                    ),
+                    actions: [
+                      TextButton(
+                        child: Text('cancel'.tr()),
+                        onPressed: () {
+                          setState(() => _replyingMessage = null);
+                        },
+                      ),
+                    ],
+                  )
+                : const SizedBox.shrink(),
+          ),
+        ).height(_replyingMessage != null ? 54 + 8 : 0, animate: true).animate(
+            const Duration(milliseconds: 300), Curves.fastEaseInToSlowEaseOut),
         SizedBox(
           height: 56,
           child: Row(