test: send messages without default messages

LucasXu0 · LucasXu0 · commit 0f3b24946356 · 2025-05-09T16:35:41.000+08:00
diff --git a/frontend/appflowy_flutter/integration_test/desktop/chat/chat_page_test.dart b/frontend/appflowy_flutter/integration_test/desktop/chat/chat_page_test.dart
@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/ai_chat/presentation/chat_page/chat_animation_list_widget.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter_chat_core/flutter_chat_core.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -10,7 +11,9 @@ void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   group('chat page:', () {
-    testWidgets('send messages', (tester) async {
+    testWidgets('send messages with default messages', (tester) async {
+      skipAIChatWelcomePage = true;
+
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
 
@@ -22,12 +25,46 @@ void main() {
         openAfterCreated: false,
       );
 
+      await tester.pumpAndSettle(const Duration(milliseconds: 300));
+
       final userId = '457037009907617792';
       final user = User(id: userId, lastName: 'Lucas');
-      final aiUserId = '457037009907617793';
+      final aiUserId = '0';
       final aiUser = User(id: aiUserId, lastName: 'AI');
 
-      // focus on the chat page
+      await tester.loadDefaultMessages(
+        [
+          Message.text(
+            id: '1746776401',
+            text: 'How to use Kanban to manage tasks?',
+            author: user,
+            createdAt: DateTime.now().add(const Duration(seconds: 1)),
+          ),
+          Message.text(
+            id: '1746776401_ans',
+            text:
+                'I couldn’t find any relevant information in the sources you selected. Please try asking a different question',
+            author: aiUser,
+            createdAt: DateTime.now().add(const Duration(seconds: 2)),
+          ),
+          Message.text(
+            id: '1746776402',
+            text: 'How to use Kanban to manage tasks?',
+            author: user,
+            createdAt: DateTime.now().add(const Duration(seconds: 3)),
+          ),
+          Message.text(
+            id: '1746776402_ans',
+            text:
+                'I couldn’t find any relevant information in the sources you selected. Please try asking a different question',
+            author: aiUser,
+            createdAt: DateTime.now().add(const Duration(seconds: 4)),
+          ),
+        ].reversed.toList(),
+      );
+      await tester.pumpAndSettle(Duration(seconds: 1));
+
+      // start chat
       final int messageId = 1;
 
       // send a message
@@ -39,6 +76,7 @@ void main() {
           createdAt: DateTime.now(),
         ),
       );
+      await tester.pumpAndSettle(Duration(seconds: 1));
 
       // receive a message
       await tester.receiveAIMessage(
@@ -52,8 +90,175 @@ void main() {
           createdAt: DateTime.now(),
         ),
       );
+      await tester.pumpAndSettle(Duration(seconds: 1));
+
+      final chatBloc = tester.getCurrentChatBloc();
+      expect(chatBloc.chatController.messages.length, equals(6));
+    });
+
+    testWidgets('send messages without default messages', (tester) async {
+      skipAIChatWelcomePage = true;
+
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a chat page
+      final pageName = 'Untitled';
+      await tester.createNewPageWithNameUnderParent(
+        name: pageName,
+        layout: ViewLayoutPB.Chat,
+        openAfterCreated: false,
+      );
+
+      await tester.pumpAndSettle(const Duration(milliseconds: 300));
+
+      final userId = '457037009907617792';
+      final user = User(id: userId, lastName: 'Lucas');
+      final aiUserId = '0';
+      final aiUser = User(id: aiUserId, lastName: 'AI');
+
+      // start chat
+      int messageId = 1;
+
+      // round 1
+      {
+        // send a message
+        await tester.sendUserMessage(
+          Message.text(
+            id: messageId.toString(),
+            text: 'How to use AppFlowy?',
+            author: user,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+
+        // receive a message
+        await tester.receiveAIMessage(
+          Message.text(
+            id: '${messageId}_ans',
+            text: '''# How to Use AppFlowy
+- Download and install AppFlowy from the official website (appflowy.io) or through app stores for your operating system (Windows, macOS, Linux, or mobile)
+- Create an account or sign in when you first launch the app
+- The main interface shows your workspace with a sidebar for navigation and a content area''',
+            author: aiUser,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+        messageId++;
+      }
+
+      // round 2
+      {
+        // send a message
+        await tester.sendUserMessage(
+          Message.text(
+            id: messageId.toString(),
+            text: 'How to use AppFlowy?',
+            author: user,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+
+        // receive a message
+        await tester.receiveAIMessage(
+          Message.text(
+            id: '${messageId}_ans',
+            text:
+                'I couldn’t find any relevant information in the sources you selected. Please try asking a different question',
+            author: aiUser,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+        messageId++;
+      }
+
+      // round 3
+      {
+        // send a message
+        await tester.sendUserMessage(
+          Message.text(
+            id: messageId.toString(),
+            text: 'What document formatting options are available?',
+            author: user,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+
+        // receive a message
+        await tester.receiveAIMessage(
+          Message.text(
+            id: '${messageId}_ans',
+            text:
+                '# AppFlowy Document Formatting\n- Basic formatting: Bold, italic, underline, strikethrough\n- Headings: 6 levels of headings for structuring content\n- Lists: Bullet points, numbered lists, and checklists\n- Code blocks: Format text as code with syntax highlighting\n- Tables: Create and format data tables\n- Embedded content: Add images, files, and other rich media',
+            author: aiUser,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+        messageId++;
+      }
+
+      // round 4
+      {
+        // send a message
+        await tester.sendUserMessage(
+          Message.text(
+            id: messageId.toString(),
+            text: 'How do I export my data from AppFlowy?',
+            author: user,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+
+        // receive a message
+        await tester.receiveAIMessage(
+          Message.text(
+            id: '${messageId}_ans',
+            text:
+                '# Exporting from AppFlowy\n- Export documents in multiple formats: Markdown, HTML, PDF\n- Export databases as CSV or Excel files\n- Batch export entire workspaces for backup\n- Use the export menu (three dots → Export) on any page\n- Exported files maintain most formatting and structure',
+            author: aiUser,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+        messageId++;
+      }
+
+      // round 5
+      {
+        // send a message
+        await tester.sendUserMessage(
+          Message.text(
+            id: messageId.toString(),
+            text: 'Is there a mobile version of AppFlowy?',
+            author: user,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+
+        // receive a message
+        await tester.receiveAIMessage(
+          Message.text(
+            id: '${messageId}_ans',
+            text:
+                '# AppFlowy on Mobile\n- Yes, AppFlowy is available for iOS and Android devices\n- Download from the App Store or Google Play Store\n- Mobile app includes core functionality: document editing, databases, and boards\n- Offline mode allows working without internet connection\n- Sync automatically when you reconnect\n- Responsive design adapts to different screen sizes',
+            author: aiUser,
+            createdAt: DateTime.now(),
+          ),
+        );
+        await tester.pumpAndSettle(Duration(seconds: 1));
+        messageId++;
+      }
 
-      await tester.wait(100000);
+      final chatBloc = tester.getCurrentChatBloc();
+      expect(chatBloc.chatController.messages.length, equals(10));
     });
   });
 }
diff --git a/frontend/appflowy_flutter/integration_test/shared/ai_test_op.dart b/frontend/appflowy_flutter/integration_test/shared/ai_test_op.dart
@@ -44,15 +44,25 @@ extension AppFlowyAITest on WidgetTester {
     await pumpAndSettle(const Duration(milliseconds: 300));
   }
 
+  ChatBloc getCurrentChatBloc() {
+    return element(find.byType(ChatContentPage)).read<ChatBloc>();
+  }
+
+  Future<void> loadDefaultMessages(List<Message> messages) async {
+    final chatBloc = getCurrentChatBloc();
+    chatBloc.add(ChatEvent.didLoadLatestMessages(messages));
+    await blocResponseFuture();
+  }
+
   Future<void> sendUserMessage(Message message) async {
-    final chatBloc = element(find.byType(ChatContentPage)).read<ChatBloc>();
+    final chatBloc = getCurrentChatBloc();
     // using received message to simulate the user message
     chatBloc.add(ChatEvent.receiveMessage(message));
     await blocResponseFuture();
   }
 
   Future<void> receiveAIMessage(Message message) async {
-    final chatBloc = element(find.byType(ChatContentPage)).read<ChatBloc>();
+    final chatBloc = getCurrentChatBloc();
     chatBloc.add(ChatEvent.receiveMessage(message));
     await blocResponseFuture();
   }
diff --git a/frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/animated_chat_list.dart b/frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/animated_chat_list.dart
@@ -152,8 +152,6 @@ class ChatAnimatedListState extends State<ChatAnimatedList>
     itemPositionsListener.itemPositions.addListener(() {
       _handleLoadPreviousMessages();
     });
-
-    // A trick to avoid the first message being scrolled to the top
   }
 
   @override
@@ -170,6 +168,7 @@ class ChatAnimatedListState extends State<ChatAnimatedList>
     final builders = context.watch<Builders>();
     final height = MediaQuery.of(context).size.height;
 
+    // A trick to avoid the first message being scrolled to the top
     initialScrollIndex = messages.length;
     initialAlignment = 1.0;
     if (messages.length <= 2) {
diff --git a/frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_page/chat_animation_list_widget.dart b/frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_page/chat_animation_list_widget.dart
@@ -1,6 +1,4 @@
-import 'dart:async';
-
-import 'package:appflowy/ai/service/ai_prompt_input_bloc.dart';
+import 'package:appflowy/ai/ai.dart';
 import 'package:appflowy/plugins/ai_chat/application/ai_chat_prelude.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/animated_chat_list.dart';
 import 'package:appflowy/plugins/ai_chat/presentation/animated_chat_list_reversed.dart';
@@ -11,6 +9,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_chat_core/flutter_chat_core.dart';
 
+@visibleForTesting
+bool skipAIChatWelcomePage = false;
+
 class ChatAnimationListWidget extends StatefulWidget {
   const ChatAnimationListWidget({
     super.key,
@@ -31,45 +32,12 @@ class ChatAnimationListWidget extends StatefulWidget {
 }
 
 class _ChatAnimationListWidgetState extends State<ChatAnimationListWidget> {
-  bool hasMessage = false;
-  StreamSubscription<ChatOperation>? subscription;
-
-  @override
-  void initState() {
-    super.initState();
-
-    final bloc = context.read<ChatBloc>();
-    if (bloc.chatController.messages.isNotEmpty) {
-      hasMessage = true;
-    }
-
-    subscription = bloc.chatController.operationsStream.listen((operation) {
-      final newHasMessage = bloc.chatController.messages.isNotEmpty;
-
-      if (!mounted) {
-        return;
-      }
-
-      if (hasMessage != newHasMessage) {
-        setState(() {
-          hasMessage = newHasMessage;
-        });
-      }
-    });
-  }
-
-  @override
-  void dispose() {
-    subscription?.cancel();
-
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
     final bloc = context.read<ChatBloc>();
 
-    if (!hasMessage) {
+    // this logic is quite weird, why don't we just get the message from the state?
+    if (bloc.chatController.messages.isEmpty && !skipAIChatWelcomePage) {
       return ChatWelcomePage(
         userProfile: widget.userProfile,
         onSelectedQuestion: (question) {
