Create demo of alternative UI layout where UI is separate to the conversation

[jacobsimionato]

We want to create a demo of a non-conversational UI.

There are maybe two alternatives:

• Chat on the right, UI on the left
• Just UI, with all interactions driven by clicks.

[jacobsimionato]

Let's implement this in the travel app codebase

[jacobsimionato]

Coding agent prompt:

The travel_app currently has a single screen which contains a conversation view where the user can chat, and UI elements will appear within the chat

1. Review the important files in travel_app - lib/main.dart, lib/src/widgets/conversation.dart. Also look at genui_manager.dart and genui_surface.dart in the flutter_genui package

2. Break up the content in lib/main.dart. Move _ChatInput to a new file at lib/src/widgets/chat_input.dart . Move TravelPlannerPage to a new file lib/src/widgets/inline_chat_travel_planner.dart and rename it InlineChatTravelPlanner. The prompt should move to this new inline_chat_travel_planner.dart file.

3. Implement a TravelPlannerCanvasController class which is responsible for maintaining a set of Gen UI surfaces for the travel app. It should be inspired by the logic in InlineChatTravelPlanner.

It exposes the following methods:

Stream<Iterable<AiUiMessage>> get surfaces; // An updating list of messages which is used to render.

Stream<Iterable<ChatMessage>> get textMessages; // An updating stream of chat messages to render

void sendUserTextMessage(String message); // Sends a text message, adding it to the textMessages stream.

Stream<bool> isThinking; // Whether the LLM is working

It should have the following parameters in the constructor:
bool enableChatOutput // If true, the _aiClient.generateContent call should include a 'message' in its schema which is appended to the textMessages list as an AiTextMessage. If false, there should be no 'message' output and the agent communicates only through UI. The system prompt should have a conditional section which tells the LLM about this depending on the boolean value.

This class should create GenUiManager and FirebaseAiClient internally by default, but have parameters exposed in the constructor also to make testing easier.

Include a system prompt in TravelPlannerCanvasController that is based on the one in the travel app, but has different instructions around adding/creating/deleting surfaces. It should be clear that irrelevant surfaces should be deleted, and that a maximum of 4 surfaces should be shown at any time.

In the method equivalent to _triggerInference, the conversation should be passed to the LLM in this order.

• textMessages which are stored and have already been seen by the LLM
• surfaces
• The event that is triggering the new inference, which could be a UserUiInteractionMessage from an interaction from the UI, or a UserMessage created when sendUserTextMessage is called.

Write a test for this class and make sure it passes.

5. Implement a new screen SideChatTravelPlanner which shows UI on the left and chat on the right, and uses a TravelPlannerCanvasController instance to control it. It should create the TravelPlannerCanvasController internally, but include a parameter to pass it in for testing. It should use the Conversation widget to implement the UI section, driven by TravelPlannerCanvasController.surfaces. On the right, should be a pane which has a Conversation widget at the top, driven by TravelPlannerCanvasController.textMessages and a ChatInput below which is wired to TravelPlannerCanvasController.sendUserTextMessage and TravelPlannerCanvasController.isThinking.

The screen should be added to the TravelApp as a new route, and there should be a menu item in the hamburger menu to switch to this view.

Write a test for this class which uses a fake TravelPlannerCanvasController implementation.

6. Implement a new screen NoChatTravelPlanner which is similar to SideChatTravelPlanner, but with just one pane that contains UI, rendered by the Conversation widget driven by TravelPlannerCanvasController.surfaces. However, if the surfaces are empty, it should show an alternative empty state with bold text that says "Where do you want to go" and a chat box underneath which calls sendUserTextMessage when entered. The text and chatbox should be centered in the screen.

The NoChatTravelPlanner screens should include a loading spinner that appears at the top center of the screen when content is loading.

As above, write a test for this and make sure it passes.

[mhmzdev]

Something like this would work? I used your prompt from above, did some minor adjustments. Added tests for new screens too and they are being passed including the TravelPlannerCanvasController.

Created a PR: #297 if its valuable, otherwise I'm happy to close it.

Side Chat

Screen.Recording.2025-09-11.at.4.20.58.PM.mov

No Chat | Only Clicks

Screen.Recording.2025-09-11.at.4.22.00.PM.mov