chore: optimize mobile ai chat page (#5897)

* feat: improve chat page UI on mobile

* feat: integrate add page menu into chat page on mobile

* fix: only display document view in @ menu

frontend/appflowy_flutter/ios/Podfile.lock

@@ -175,7 +175,7 @@ SPEC CHECKSUMS:
   file_picker: 09aa5ec1ab24135ccd7a1621c46c84134bfd6655
   flowy_infra_ui: 0455e1fa8c51885aa1437848e361e99419f34ebc
   Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
-  fluttertoast: 723e187574b149e68e63ca4d39b837586b903cfa
+  fluttertoast: e9a18c7be5413da53898f660530c56f35edfba9c
   image_gallery_saver: cb43cc43141711190510e92c460eb1655cd343cb
   image_picker_ios: 99dfe1854b4fa34d0364e74a78448a0151025425
   integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4
@@ -197,4 +197,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: d0d9b4ff572d8695c38eb3f9b490f55cdfc57eca
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.15.2

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_action_bloc.dart

@@ -11,6 +11,7 @@ import 'package:flutter/widgets.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
 import 'chat_input_action_control.dart';
+
 part 'chat_input_action_bloc.freezed.dart';
 
 class ChatInputActionBloc
@@ -34,7 +35,12 @@ class ChatInputActionBloc
               final views = result
                       .toNullable()
                       ?.items
-                      .where((v) => v.layout.isDocumentView)
+                      .where(
+                        (v) =>
+                            v.layout.isDocumentView &&
+                            !v.isSpace &&
+                            v.parentViewId.isNotEmpty,
+                      )
                       .toList() ??
                   [];
               if (!isClosed) {

frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart

@@ -1,30 +1,28 @@
 import 'dart:math';
 
-import 'package:appflowy/plugins/ai_chat/application/chat_file_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/other_user_message_bubble.dart';
-import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
-import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
-import 'package:desktop_drop/desktop_drop.dart';
-import 'package:flowy_infra/platform_extension.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_file_bloc.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_input_bloc.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/ai_message_bubble.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/chat_related_question.dart';
+import 'package:appflowy/plugins/ai_chat/presentation/other_user_message_bubble.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/user_message_bubble.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:desktop_drop/desktop_drop.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/platform_extension.dart';
 import 'package:flowy_infra/theme_extension.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart';
 import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
+import 'package:flutter_chat_types/flutter_chat_types.dart';
 import 'package:flutter_chat_ui/flutter_chat_ui.dart' show Chat;
 import 'package:styled_widget/styled_widget.dart';
 

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input.dart

@@ -1,6 +1,9 @@
+import 'package:appflowy/plugins/ai_chat/application/chat_input_action_bloc.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_input_action_control.dart';
 import 'package:appflowy/plugins/ai_chat/application/chat_input_bloc.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/chat_input_action_menu.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_control.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mobile_page_selector_sheet.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:extended_text_field/extended_text_field.dart';
 import 'package:flowy_infra/platform_extension.dart';
 import 'package:flowy_infra/theme_extension.dart';
@@ -12,8 +15,8 @@ import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
 import 'package:flutter_chat_ui/flutter_chat_ui.dart';
 
 import 'chat_at_button.dart';
-import 'chat_send_button.dart';
 import 'chat_input_span.dart';
+import 'chat_send_button.dart';
 
 class ChatInput extends StatefulWidget {
   /// Creates [ChatInput] widget.
@@ -96,19 +99,26 @@ class _ChatInputState extends State<ChatInput> {
 
   @override
   Widget build(BuildContext context) {
-    const textPadding = EdgeInsets.symmetric(horizontal: 16);
     const buttonPadding = EdgeInsets.symmetric(horizontal: 2);
     const inputPadding = EdgeInsets.all(6);
 
+    final textPadding = isMobile
+        ? const EdgeInsets.only(left: 8.0, right: 4.0)
+        : const EdgeInsets.symmetric(horizontal: 16);
+    final borderRadius = BorderRadius.circular(isMobile ? 10 : 30);
+    final color = isMobile
+        ? Colors.transparent
+        : Theme.of(context).colorScheme.surfaceContainerHighest;
+    final elevation = isMobile ? 0.0 : 0.6;
+    final space = isMobile ? 8.0 : 14.0;
+
     return Focus(
       child: Padding(
         padding: inputPadding,
         child: Material(
-          borderRadius: BorderRadius.circular(30),
+          borderRadius: borderRadius,
-          color: isMobile
+          color: color,
-              ? Theme.of(context).colorScheme.surfaceContainer
+          elevation: elevation,
-              : Theme.of(context).colorScheme.surfaceContainerHighest,
-          elevation: 0.6,
           child: Row(
             children: [
               if (widget.onAttachmentPressed != null)
@@ -117,14 +127,13 @@ class _ChatInputState extends State<ChatInput> {
                   onPressed: widget.onAttachmentPressed,
                   padding: buttonPadding,
                 ),
-              Expanded(child: _inputTextField(textPadding)),
+              Expanded(
-
+                child: _inputTextField(context, textPadding),
-              // TODO(lucas): support mobile
+              ),
-              if (PlatformExtension.isDesktop &&
+              if (widget.aiType == const AIType.appflowyAI())
-                  widget.aiType == const AIType.appflowyAI())
                 _atButton(buttonPadding),
               _sendButton(buttonPadding),
-              const HSpace(14),
+              HSpace(space),
             ],
           ),
         ),
@@ -160,33 +169,24 @@ class _ChatInputState extends State<ChatInput> {
     });
   }
 
-  Widget _inputTextField(EdgeInsets textPadding) {
+  Widget _inputTextField(BuildContext context, EdgeInsets textPadding) {
     return CompositedTransformTarget(
       link: _layerLink,
       child: Padding(
         padding: textPadding,
         child: ExtendedTextField(
           key: _textFieldKey,
-          specialTextSpanBuilder:
-              ChatInputTextSpanBuilder(inputActionControl: _inputActionControl),
           controller: _textController,
           focusNode: _inputFocusNode,
-          decoration: InputDecoration(
+          decoration: _buildInputDecoration(context),
-            border: InputBorder.none,
-            hintText: widget.hintText,
-            focusedBorder: InputBorder.none,
-            hintStyle: TextStyle(
-              color: AFThemeExtension.of(context).textColor.withOpacity(0.5),
-            ),
-          ),
-          style: TextStyle(
-            color: AFThemeExtension.of(context).textColor,
-            fontSize: 15,
-          ),
           keyboardType: TextInputType.multiline,
           textCapitalization: TextCapitalization.sentences,
           minLines: 1,
           maxLines: 10,
+          style: _buildTextStyle(context),
+          specialTextSpanBuilder: ChatInputTextSpanBuilder(
+            inputActionControl: _inputActionControl,
+          ),
           onChanged: (text) {
             _handleOnTextChange(context, text);
           },
@@ -195,13 +195,65 @@ class _ChatInputState extends State<ChatInput> {
     );
   }
 
-  void _handleOnTextChange(BuildContext context, String text) {
+  InputDecoration _buildInputDecoration(BuildContext context) {
+    if (!isMobile) {
+      return InputDecoration(
+        border: InputBorder.none,
+        hintText: widget.hintText,
+        focusedBorder: InputBorder.none,
+        hintStyle: TextStyle(
+          color: AFThemeExtension.of(context).textColor.withOpacity(0.5),
+        ),
+      );
+    }
+
+    final borderRadius = BorderRadius.circular(10);
+    return InputDecoration(
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      hintText: widget.hintText,
+      hintStyle: TextStyle(
+        color: AFThemeExtension.of(context).textColor.withOpacity(0.5),
+      ),
+      enabledBorder: OutlineInputBorder(
+        borderRadius: borderRadius,
+        borderSide: BorderSide(
+          color: Theme.of(context).colorScheme.outline,
+        ),
+      ),
+      focusedBorder: OutlineInputBorder(
+        borderRadius: borderRadius,
+        borderSide: BorderSide(
+          color: Theme.of(context).colorScheme.primary,
+          width: 1.2,
+        ),
+      ),
+    );
+  }
+
+  TextStyle? _buildTextStyle(BuildContext context) {
+    if (!isMobile) {
+      return TextStyle(
+        color: AFThemeExtension.of(context).textColor,
+        fontSize: 15,
+      );
+    }
+
+    return Theme.of(context).textTheme.bodyMedium?.copyWith(
+          fontSize: 15,
+          height: 1.2,
+        );
+  }
+
+  Future<void> _handleOnTextChange(BuildContext context, String text) async {
     if (widget.aiType != const AIType.appflowyAI()) {
       return;
     }
 
+    if (!_inputActionControl.onTextChanged(text)) {
+      return;
+    }
+
     if (PlatformExtension.isDesktop) {
-      if (_inputActionControl.onTextChanged(text)) {
       ChatActionsMenu(
         anchor: ChatInputAnchor(
           anchorKey: _textFieldKey,
@@ -213,9 +265,17 @@ class _ChatInputState extends State<ChatInput> {
             ? const ChatActionsMenuStyle.dark()
             : const ChatActionsMenuStyle.light(),
       ).show();
-      }
     } else {
-      // TODO(lucas): support mobile
+      // if the focus node is on focus, unfocus it for better animation
+      // otherwise, the page sheet animation will be blocked by the keyboard
+      if (_inputFocusNode.hasFocus) {
+        _inputFocusNode.unfocus();
+        Future.delayed(const Duration(milliseconds: 100), () async {
+          await _referPage(_inputActionControl);
+        });
+      } else {
+        await _referPage(_inputActionControl);
+      }
     }
   }
 
@@ -246,13 +306,32 @@ class _ChatInputState extends State<ChatInput> {
       child: ChatInputAtButton(
         onTap: () {
           _textController.text += '@';
+          if (!isMobile) {
             _inputFocusNode.requestFocus();
+          }
           _handleOnTextChange(context, _textController.text);
         },
       ),
     );
   }
 
+  Future<void> _referPage(ChatActionHandler handler) async {
+    handler.onEnter();
+    final selectedView = await showPageSelectorSheet(
+      context,
+      filter: (view) =>
+          view.layout.isDocumentView &&
+          !view.isSpace &&
+          view.parentViewId.isNotEmpty,
+    );
+    if (selectedView == null) {
+      handler.onExit();
+      return;
+    }
+    handler.onSelected(ViewActionPage(view: selectedView));
+    handler.onExit();
+  }
+
   @override
   void didUpdateWidget(covariant ChatInput oldWidget) {
     super.didUpdateWidget(oldWidget);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mention/mobile_page_selector_sheet.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/flowy_search_text_field.dart';
@@ -11,13 +9,17 @@ import 'package:appflowy/workspace/application/view/view_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flutter/material.dart';
 
-Future<String?> showPageSelectorSheet(
+Future<ViewPB?> showPageSelectorSheet(
   BuildContext context, {
   String? currentViewId,
   String? selectedViewId,
+  bool Function(ViewPB view)? filter,
 }) async {
-  return showMobileBottomSheet<String>(
+  filter ??= (v) => !v.isSpace && v.parentViewId.isNotEmpty;
+
+  return showMobileBottomSheet<ViewPB>(
     context,
     title: LocaleKeys.document_mobilePageSelector_title.tr(),
     showHeader: true,
@@ -32,16 +34,22 @@ Future<String?> showPageSelectorSheet(
       child: _MobilePageSelectorBody(
         currentViewId: currentViewId,
         selectedViewId: selectedViewId,
+        filter: filter,
       ),
     ),
   );
 }
 
 class _MobilePageSelectorBody extends StatefulWidget {
-  const _MobilePageSelectorBody({this.currentViewId, this.selectedViewId});
+  const _MobilePageSelectorBody({
+    this.currentViewId,
+    this.selectedViewId,
+    this.filter,
+  });
 
   final String? currentViewId;
   final String? selectedViewId;
+  final bool Function(ViewPB view)? filter;
 
   @override
   State<_MobilePageSelectorBody> createState() =>
@@ -79,7 +87,10 @@ class _MobilePageSelectorBodyState extends State<_MobilePageSelectorBody> {
               );
             }
 
-            final views = snapshot.data!;
+            final views = snapshot.data!
+                .where((v) => widget.filter?.call(v) ?? true)
+                .toList();
+
             if (widget.currentViewId != null) {
               views.removeWhere((v) => v.id == widget.currentViewId);
             }
@@ -118,7 +129,7 @@ class _MobilePageSelectorBodyState extends State<_MobilePageSelectorBody> {
                               ),
                         text: view.name,
                         isSelected: view.id == widget.selectedViewId,
-                        onTap: () => Navigator.of(context).pop(view.id),
+                        onTap: () => Navigator.of(context).pop(view),
                       ),
                     )
                     .toList(),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart

@@ -1,7 +1,5 @@
 import 'dart:async';
 
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/type_option_menu_item.dart';
@@ -21,6 +19,7 @@ import 'package:appflowy/workspace/presentation/home/menu/menu_shared_state.dart
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 final addBlockToolbarItem = AppFlowyMobileToolbarItem(
@@ -230,16 +229,16 @@ class _AddBlockMenu extends StatelessWidget {
           AppGlobals.rootNavKey.currentContext?.pop(true);
 
           final currentViewId = getIt<MenuSharedState>().latestOpenView?.id;
-          final viewId = await showPageSelectorSheet(
+          final view = await showPageSelectorSheet(
             context,
             currentViewId: currentViewId,
           );
 
-          if (viewId != null) {
+          if (view != null) {
             Future.delayed(const Duration(milliseconds: 100), () {
               editorState.insertBlockAfterCurrentSelection(
                 selection,
-                pageMentionNode(viewId),
+                pageMentionNode(view.id),
               );
             });
           }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart

@@ -106,7 +106,8 @@ class EditorStyleCustomizer {
     final theme = Theme.of(context);
     final fontSize = pageStyle.fontLayout.fontSize;
     final lineHeight = pageStyle.lineHeightLayout.lineHeight;
-    final fontFamily = pageStyle.fontFamily ?? defaultFontFamily;
+    final fontFamily = pageStyle.fontFamily ??
+        context.read<AppearanceSettingsCubit>().state.font;
     final defaultTextDirection =
         context.read<DocumentAppearanceCubit>().state.defaultTextDirection;
     final textScaleFactor =