Integrate JSON Response into AgentMessageTile

This commit integrates the actual JSON response received from the API into the AgentMessageTile. Now, each AgentMessageTile will display the associated JSON response when expanded.

- Converted Map<String, dynamic> JSON response to a string using jsonEncode.
- Passed the JSON-formatted string to JsonCodeSnippetView.
- Updated AgentMessageTile to include this change.

This change enhances the debugging and transparency features of the chat interface.

frontend/lib/models/chat.dart

@@ -7,6 +7,7 @@ class Chat {
   final String message;
   final DateTime timestamp;
   final MessageType messageType;
+  final Map<String, dynamic>? jsonResponse;
 
   Chat({
     required this.id,
@@ -14,6 +15,7 @@ class Chat {
     required this.message,
     required this.timestamp,
     required this.messageType,
+    this.jsonResponse,
   });
 
   // Convert a Map (usually from JSON) to a Chat object

frontend/lib/viewmodels/chat_viewmodel.dart

@@ -54,7 +54,9 @@ class ChatViewModel with ChangeNotifier {
       // Generate current timestamp
       DateTime currentTimestamp = DateTime.now();
 
-      for (Step step in steps) {
+      for (int i = 0; i < steps.length; i++) {
+        Step step = steps[i];
+
         // Create a Chat object for 'input' if it exists and is not empty
         if (step.input.isNotEmpty) {
           chats.add(Chat(
@@ -73,6 +75,8 @@ class ChatViewModel with ChangeNotifier {
           message: step.output,
           timestamp: currentTimestamp,
           messageType: MessageType.agent,
+          jsonResponse:
+              stepsJsonList[i], // Include the specific step's JSON here
         ));
       }
 
@@ -118,12 +122,12 @@ class ChatViewModel with ChangeNotifier {
 
       // Create a Chat object for the agent message
       final agentChat = Chat(
-        id: executedStep.stepId,
-        taskId: executedStep.taskId,
-        message: executedStep.output,
-        timestamp: DateTime.now(),
-        messageType: MessageType.agent,
-      );
+          id: executedStep.stepId,
+          taskId: executedStep.taskId,
+          message: executedStep.output,
+          timestamp: DateTime.now(),
+          messageType: MessageType.agent,
+          jsonResponse: executedStepResponse);
 
       // Add the user and agent chats to the list
       _chats.add(userChat);

frontend/lib/views/chat/agent_message_tile.dart

@@ -1,12 +1,15 @@
+import 'dart:convert';
+
+import 'package:auto_gpt_flutter_client/models/chat.dart';
 import 'package:auto_gpt_flutter_client/views/chat/json_code_snippet_view.dart';
 import 'package:flutter/material.dart';
 
 class AgentMessageTile extends StatefulWidget {
-  final String message;
+  final Chat chat;
 
   const AgentMessageTile({
     Key? key,
-    required this.message, // The agent message to be displayed
+    required this.chat, // The agent message to be displayed
   }) : super(key: key);
 
   @override
@@ -14,10 +17,11 @@ class AgentMessageTile extends StatefulWidget {
 }
 
 class _AgentMessageTileState extends State<AgentMessageTile> {
-  bool isExpanded = false; // State variable to toggle expanded view
+  bool isExpanded = false;
 
   @override
   Widget build(BuildContext context) {
+    String jsonString = jsonEncode(widget.chat.jsonResponse);
     return LayoutBuilder(
       builder: (context, constraints) {
         double chatViewWidth = constraints.maxWidth; // Get the chat view width
@@ -60,7 +64,7 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                         child: Container(
                           padding: const EdgeInsets.fromLTRB(0, 10, 20, 10),
                           child: Text(
-                            widget.message,
+                            widget.chat.message,
                             maxLines: null,
                           ),
                         ),
@@ -97,17 +101,15 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                 // Expanded view with JSON code snippet and copy button
                 if (isExpanded) ...[
                   const Divider(),
-                  const ClipRect(
+                  ClipRect(
                     child: SizedBox(
                       height: 200,
                       child: Padding(
-                        padding: EdgeInsets.only(
+                        padding: const EdgeInsets.only(
                             right: 20), // Padding for the right side
                         child: JsonCodeSnippetView(
                           // JSON code snippet view
-                          jsonString:
-                              // TODO: Include the appropriate string
-                              "{\"input\":\"Washington\",\"additional_input\":{\"file_to_refactor\":\"models.py\"},\"task_id\":\"50da533e-3904-4401-8a07-c49adf88b5eb\",\"step_id\":\"6bb1801a-fd80-45e8-899a-4dd723cc602e\",\"name\":\"Writetofile\",\"status\":\"created\",\"output\":\"Iamgoingtousethewrite_to_filecommandandwriteWashingtontoafilecalledoutput.txt<write_to_file('output.txt','Washington')\",\"additional_output\":{\"tokens\":7894,\"estimated_cost\":\"0,24\"},\"artifacts\":[],\"is_last\":false}",
+                          jsonString: jsonString,
                         ),
                       ),
                     ),

frontend/lib/views/chat/chat_view.dart

@@ -45,7 +45,7 @@ class _ChatViewState extends State<ChatView> {
                 if (chat.messageType == MessageType.user) {
                   return UserMessageTile(message: chat.message);
                 } else {
-                  return AgentMessageTile(message: chat.message);
+                  return AgentMessageTile(chat: chat);
                 }
               },
             ),