fix: improve chat layout

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

@@ -118,4 +118,7 @@ class AIChatPagePluginWidgetBuilder extends PluginWidgetBuilder
 
   @override
   List<NavigationItem> get navigationItems => [this];
+
+  @override
+  EdgeInsets get contentPadding => EdgeInsets.zero;
 }

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

@@ -1,3 +1,6 @@
+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/presentation/ai_message_bubble.dart';
@@ -10,12 +13,10 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/text.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_ui/flutter_chat_ui.dart' show Chat;
 import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
+import 'package:flutter_chat_ui/flutter_chat_ui.dart' show Chat;
 
 import 'presentation/chat_input.dart';
 import 'presentation/chat_popmenu.dart';
@@ -27,11 +28,11 @@ import 'presentation/message/user_text_message.dart';
 
 class AIChatUILayout {
   static EdgeInsets get chatPadding =>
-      isMobile ? EdgeInsets.zero : const EdgeInsets.symmetric(horizontal: 70);
+      isMobile ? EdgeInsets.zero : const EdgeInsets.symmetric(horizontal: 20);
 
   static EdgeInsets get welcomePagePadding => isMobile
       ? const EdgeInsets.symmetric(horizontal: 20)
-      : const EdgeInsets.symmetric(horizontal: 100);
+      : const EdgeInsets.symmetric(horizontal: 50);
 
   static double get messageWidthRatio => 0.85;
 
@@ -44,7 +45,8 @@ class AIChatUILayout {
             query.padding.right,
             query.viewInsets.bottom + query.padding.bottom,
           )
-        : const EdgeInsets.symmetric(horizontal: 70);
+        : const EdgeInsets.symmetric(horizontal: 50) +
+            const EdgeInsets.only(bottom: 20);
   }
 }
 
@@ -77,7 +79,8 @@ class _AIChatPageState extends State<AIChatPage> {
   Widget build(BuildContext context) {
     if (widget.userProfile.authenticator == AuthenticatorPB.AppFlowyCloud) {
       return buildChatWidget();
-    } else {
+    }
+
     return Center(
       child: FlowyText(
         LocaleKeys.chat_unsupportedCloudPrompt.tr(),
@@ -85,23 +88,23 @@ class _AIChatPageState extends State<AIChatPage> {
       ),
     );
   }
-  }
 
   Widget buildChatWidget() {
-    return SizedBox.expand(
-      child: Padding(
-        padding: AIChatUILayout.chatPadding,
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Flexible(
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 784),
             child: BlocProvider(
-          create: (context) => ChatBloc(
+              create: (_) => ChatBloc(
                 view: widget.view,
                 userProfile: widget.userProfile,
               )..add(const ChatEvent.initialLoad()),
               child: BlocBuilder<ChatBloc, ChatState>(
-            builder: (blocContext, state) {
-              return Chat(
+                builder: (blocContext, state) => Chat(
                   messages: state.messages,
-                onAttachmentPressed: () {},
-                onSendPressed: (types.PartialText message) {
+                  onSendPressed: (_) {
                     // We use custom bottom widget for chat input, so
                     // do not need to handle this event.
                   },
@@ -118,32 +121,27 @@ class _AIChatPageState extends State<AIChatPage> {
                     }
                   },
                   emptyState: BlocBuilder<ChatBloc, ChatState>(
-                  builder: (context, state) {
-                    return state.initialLoadingStatus ==
+                    builder: (_, state) => state.initialLoadingStatus ==
                             const LoadingState.finish()
                         ? Padding(
                             padding: AIChatUILayout.welcomePagePadding,
                             child: ChatWelcomePage(
-                              onSelectedQuestion: (question) {
-                                blocContext
+                              onSelectedQuestion: (question) => blocContext
                                   .read<ChatBloc>()
-                                    .add(ChatEvent.sendMessage(question));
-                              },
+                                  .add(ChatEvent.sendMessage(question)),
                             ),
                           )
                         : const Center(
                             child: CircularProgressIndicator.adaptive(),
-                          );
-                  },
+                          ),
                   ),
                   messageWidthRatio: AIChatUILayout.messageWidthRatio,
                   textMessageBuilder: (
                     textMessage, {
                     required messageWidth,
                     required showName,
-                }) {
-                  return _buildAITextMessage(blocContext, textMessage);
-                },
+                  }) =>
+                      _buildAITextMessage(blocContext, textMessage),
                   bubbleBuilder: (
                     child, {
                     required message,
@@ -154,15 +152,16 @@ class _AIChatPageState extends State<AIChatPage> {
                         message: message,
                         child: child,
                       );
-                  } else {
-                    return _buildAIBubble(message, blocContext, state, child);
                     }
-                },
-              );
+
+                    return _buildAIBubble(message, blocContext, state, child);
                   },
                 ),
               ),
             ),
+          ),
+        ),
+      ],
     );
   }
 

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

@@ -1,9 +1,10 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flutter/material.dart';
 
 import 'chat_input.dart';
 
@@ -31,19 +32,15 @@ class ChatWelcomePage extends StatelessWidget {
             size: Size.square(44),
           ),
           const SizedBox(height: 40),
-          GridView.builder(
-            shrinkWrap: true,
-            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: isMobile ? 2 : 4,
-              crossAxisSpacing: 6,
-              mainAxisSpacing: 6,
-              childAspectRatio: 16.0 / 9.0,
-            ),
-            itemCount: items.length,
-            itemBuilder: (context, index) => WelcomeQuestion(
-              question: items[index],
+          Wrap(
+            children: items
+                .map(
+                  (i) => WelcomeQuestion(
+                    question: i,
                     onSelected: onSelectedQuestion,
                   ),
+                )
+                .toList(),
           ),
         ],
       ),

frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_ai_view.dart

@@ -144,7 +144,7 @@ class _AISearchToggle extends StatelessWidget {
                 child: SizedBox(
                   height: 26,
                   width: 26,
-                  child: CircularProgressIndicator.adaptive(strokeWidth: 4),
+                  child: CircularProgressIndicator.adaptive(),
                 ),
               );
             } else {