test: simple ai chat tests

frontend/appflowy_flutter/integration_test/desktop/chat/chat_page_test.dart

@@ -0,0 +1,264 @@
+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';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/ai_test_op.dart';
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('chat page:', () {
+    testWidgets('send messages with 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');
+
+      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
+      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));
+
+      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++;
+      }
+
+      final chatBloc = tester.getCurrentChatBloc();
+      expect(chatBloc.chatController.messages.length, equals(10));
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop_runner_9.dart

@@ -1,5 +1,6 @@
 import 'package:integration_test/integration_test.dart';
 
+import 'desktop/chat/chat_page_test.dart' as chat_page_test;
 import 'desktop/database/database_icon_test.dart' as database_icon_test;
 import 'desktop/first_test/first_test.dart' as first_test;
 import 'desktop/uncategorized/code_block_language_selector_test.dart'
@@ -17,4 +18,5 @@ Future<void> runIntegration9OnDesktop() async {
   tabs_test.main();
   code_language_selector.main();
   database_icon_test.main();
+  chat_page_test.main();
 }

frontend/appflowy_flutter/integration_test/shared/ai_test_op.dart

@@ -1,9 +1,14 @@
 import 'package:appflowy/ai/ai.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
+import 'package:appflowy/plugins/ai_chat/presentation/chat_page/chat_content_page.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/ai/ai_writer_toolbar_item.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/ai/operations/ai_writer_entities.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_chat_core/flutter_chat_core.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+import '../../test/util.dart';
 import 'util.dart';
 
 extension AppFlowyAITest on WidgetTester {
@@ -38,4 +43,27 @@ extension AppFlowyAITest on WidgetTester {
     testTextInput.enterText(text);
     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 = getCurrentChatBloc();
+    // using received message to simulate the user message
+    chatBloc.add(ChatEvent.receiveMessage(message));
+    await blocResponseFuture();
+  }
+
+  Future<void> receiveAIMessage(Message message) async {
+    final chatBloc = getCurrentChatBloc();
+    chatBloc.add(ChatEvent.receiveMessage(message));
+    await blocResponseFuture();
+  }
 }

frontend/appflowy_flutter/integration_test/shared/common_operations.dart

@@ -1051,6 +1051,8 @@ extension ViewLayoutPBTest on ViewLayoutPB {
         return LocaleKeys.document_menuName.tr();
       case ViewLayoutPB.Calendar:
         return LocaleKeys.calendar_menuName.tr();
+      case ViewLayoutPB.Chat:
+        return LocaleKeys.chat_newChat.tr();
       default:
         throw UnsupportedError('Unsupported layout: $this');
     }

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

@@ -82,7 +82,12 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
         await event.when(
           // Loading messages
           didLoadLatestMessages: (List<Message> messages) async {
+            Log.debug(
+              "[ChatBloc] did load latest messages: ${messages.length}",
+            );
+
             for (final message in messages) {
+              Log.debug("[ChatBloc] insert message: ${message.toJson()}");
               await chatController.insert(message, index: 0);
             }
 
@@ -160,6 +165,7 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
             chatController.insert(message);
           },
           receiveMessage: (Message message) {
+            Log.debug("[ChatBloc] receive message: ${message.toJson()}");
             final oldMessage = chatController.messages
                 .firstWhereOrNull((m) => m.id == message.id);
             if (oldMessage == null) {