Add example data and expose onsubmit in catalog view. (#299)

Author: polina-c

examples/travel_app/lib/main.dart

@@ -23,7 +23,14 @@ void main() async {
     webProvider: ReCaptchaV3Provider('debug'),
   );
   await loadImagesJson();
-  configureGenUiLogging(level: Level.ALL);
+  final logger = configureGenUiLogging(level: Level.ALL);
+  logger.onRecord.listen((record) {
+    // ignore: avoid_print
+    print(
+      '${record.level.name}: ${record.time}: ${record.loggerName}: '
+      '${record.message}',
+    );
+  });
   runApp(const TravelApp());
 }
 

examples/travel_app/lib/src/catalog/travel_carousel.dart

@@ -70,6 +70,89 @@ final travelCarousel = CatalogItem(
           dispatchEvent: dispatchEvent,
         );
       },
+  exampleData: {
+    'root': 'greece_inspiration_column',
+    'widgets': [
+      {
+        'id': 'greece_inspiration_column',
+        'widget': {
+          'Column': {
+            'children': ['inspiration_title', 'inspiration_carousel'],
+          },
+        },
+      },
+      {
+        'id': 'inspiration_title',
+        'widget': {
+          'Text': {
+            'text':
+                "Let's plan your dream trip to Greece! What kind of experience"
+                ' are you looking for?',
+          },
+        },
+      },
+      {
+        'widget': {
+          'TravelCarousel': {
+            'items': [
+              {
+                'title': 'Relaxing Beach Holiday',
+                'imageChildId': 'santorini_beach_image',
+              },
+              {
+                'imageChildId': 'akrotiri_fresco_image',
+                'title': 'Cultural Exploration',
+              },
+              {
+                'imageChildId': 'santorini_caldera_image',
+                'title': 'Adventure & Outdoors',
+              },
+              {'title': 'Foodie Tour', 'imageChildId': 'greece_food_image'},
+            ],
+          },
+        },
+        'id': 'inspiration_carousel',
+      },
+      {
+        'id': 'santorini_beach_image',
+        'widget': {
+          'Image': {
+            'fit': 'cover',
+            'assetName': 'assets/travel_images/santorini_panorama.jpg',
+          },
+        },
+      },
+      {
+        'id': 'akrotiri_fresco_image',
+        'widget': {
+          'Image': {
+            'fit': 'cover',
+            'assetName':
+                'assets/travel_images/akrotiri_spring_fresco_santorini.jpg',
+          },
+        },
+      },
+      {
+        'id': 'santorini_caldera_image',
+        'widget': {
+          'Image': {
+            'assetName': 'assets/travel_images/santorini_from_space.jpg',
+            'fit': 'cover',
+          },
+        },
+      },
+      {
+        'widget': {
+          'Image': {
+            'fit': 'cover',
+            'assetName':
+                'assets/travel_images/saffron_gatherers_fresco_santorini.jpg',
+          },
+        },
+        'id': 'greece_food_image',
+      },
+    ],
+  },
 );
 
 extension type _TravelCarouselData.fromMap(Map<String, Object?> _json) {

packages/flutter_genui/USAGE.md

@@ -153,6 +153,19 @@ If something is unclear or missing, please [create an issue](https://github.com/
 
 ## Troubleshooting
 
+### Configure logging
+
+To observe interaction between app and agent, enable logging:
+
+```dart
+final logger = configureGenUiLogging(level: Level.ALL);
+logger.onRecord.listen((record) {
+  print(
+    '${record.loggerName}: ${record.message}',
+  );
+});
+```
+
 ### Higher minimum macOS version is required
 
 If you are getting the error similar to one below, re-clone your repo.

packages/flutter_genui/lib/flutter_genui_dev.dart

@@ -2,4 +2,4 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export 'src/development_utilities/gallery.dart';
+export 'src/development_utilities/catalog_view.dart';

packages/flutter_genui/lib/src/development_utilities/gallery.dart renamed to packages/flutter_genui/lib/src/development_utilities/catalog_view.dart

@@ -2,21 +2,25 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:async' show StreamSubscription;
+
 import 'package:flutter/material.dart';
 
 import '../core/genui_manager.dart';
 import '../core/genui_surface.dart';
 import '../model/catalog.dart';
 import '../model/catalog_item.dart';
+import '../model/chat_message.dart';
 
 /// A widget that displays a catalog of items using GenUI surfaces.
 ///
 /// In order for a catalog item to be displayed, it must have example data
 /// defined.
 class CatalogView extends StatefulWidget {
-  const CatalogView({required this.catalog});
+  const CatalogView({this.onSubmit, required this.catalog});
 
   final Catalog catalog;
+  final ValueChanged<UserMessage>? onSubmit;
 
   @override
   State<CatalogView> createState() => _CatalogViewState();
@@ -25,12 +29,18 @@ class CatalogView extends StatefulWidget {
 class _CatalogViewState extends State<CatalogView> {
   late final GenUiManager _genUi;
   final surfaceIds = <String>[];
+  late final StreamSubscription<UserMessage>? _subscription;
 
   @override
   void initState() {
     super.initState();
 
     _genUi = GenUiManager(catalog: widget.catalog);
+    if (widget.onSubmit != null) {
+      _subscription = _genUi.onSubmit.listen(widget.onSubmit);
+    } else {
+      _subscription = null;
+    }
 
     final items = widget.catalog.items.where(
       (CatalogItem item) => item.exampleData != null,
@@ -44,6 +54,13 @@ class _CatalogViewState extends State<CatalogView> {
     }
   }
 
+  @override
+  void dispose() {
+    _subscription?.cancel();
+    _genUi.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ListView.builder(

packages/flutter_genui/lib/src/model/catalog_item.dart

@@ -63,5 +63,9 @@ class CatalogItem {
   final CatalogWidgetBuilder widgetBuilder;
 
   /// Example data for this widget, for testing purposes.
+  ///
+  /// To catch real data returned by the AI,
+  /// [configure logging](https://github.com/flutter/genui/blob/main/packages/flutter_genui/USAGE.md#configure-logging)
+  /// to Level.ALL and search for the string `"definition": {` in the logs.
   final JsonMap? exampleData;
 }

packages/flutter_genui/lib/src/primitives/logging.dart

@@ -11,7 +11,7 @@ final genUiLogger = Logger('GenUI');
 ///
 /// This function should be called by applications using the GenUI package to
 /// configure the desired log level and to listen for log messages.
-void configureGenUiLogging({
+Logger configureGenUiLogging({
   Level level = Level.INFO,
   void Function(Level, String)? logCallback,
 }) {
@@ -36,4 +36,6 @@ void configureGenUiLogging({
       }
     }
   });
+
+  return genUiLogger;
 }