Added Artifact Handling for Chat Messages

- Enhanced the `Chat` model to include an `artifacts` field to hold associated artifacts.
- Updated the `AgentMessageTile` widget to display the number of artifacts and added functionality to trigger artifact downloads upon button press.
- Introduced a method in `ChatViewModel` to leverage the `ChatService` for artifact downloads.

frontend/lib/views/chat/agent_message_tile.dart

@@ -6,10 +6,12 @@ import 'package:flutter/material.dart';
 
 class AgentMessageTile extends StatefulWidget {
   final Chat chat;
+  final VoidCallback onArtifactsButtonPressed;
 
   const AgentMessageTile({
     Key? key,
-    required this.chat, // The agent message to be displayed
+    required this.chat,
+    required this.onArtifactsButtonPressed,
   }) : super(key: key);
 
   @override
@@ -22,12 +24,12 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
   @override
   Widget build(BuildContext context) {
     String jsonString = jsonEncode(widget.chat.jsonResponse);
+    int artifactsCount = widget.chat.artifacts.length;
+
     return LayoutBuilder(
       builder: (context, constraints) {
-        double chatViewWidth = constraints.maxWidth; // Get the chat view width
-        double tileWidth = (chatViewWidth >= 1000)
-            ? 900
-            : chatViewWidth - 40; // Determine tile width
+        double chatViewWidth = constraints.maxWidth;
+        double tileWidth = (chatViewWidth >= 1000) ? 900 : chatViewWidth - 40;
 
         return Align(
           alignment: Alignment.center,
@@ -43,13 +45,11 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
             child: Column(
               mainAxisAlignment: MainAxisAlignment.start,
               children: [
-                // Container for Agent title, message, and controls
                 Container(
                   constraints: const BoxConstraints(minHeight: 50),
                   child: Row(
                     crossAxisAlignment: CrossAxisAlignment.center,
                     children: [
-                      // Agent title
                       const Text(
                         "Agent",
                         style: TextStyle(
@@ -59,7 +59,6 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                         ),
                       ),
                       const SizedBox(width: 20),
-                      // Message content
                       Expanded(
                         child: Container(
                           padding: const EdgeInsets.fromLTRB(0, 10, 20, 10),
@@ -69,9 +68,8 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                           ),
                         ),
                       ),
-                      // Artifacts button (static for now)
                       ElevatedButton(
-                        onPressed: () {},
+                        onPressed: widget.onArtifactsButtonPressed,
                         style: ElevatedButton.styleFrom(
                           backgroundColor: Colors.white,
                           foregroundColor: Colors.black,
@@ -80,7 +78,7 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                             borderRadius: BorderRadius.circular(8),
                           ),
                         ),
-                        child: const Text("2 Artifacts"),
+                        child: Text('$artifactsCount Artifacts'),
                       ),
                       const SizedBox(width: 20),
                       // Expand/Collapse button
@@ -91,7 +89,7 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                             : Icons.keyboard_arrow_down),
                         onPressed: () {
                           setState(() {
-                            isExpanded = !isExpanded; // Toggle expanded view
+                            isExpanded = !isExpanded;
                           });
                         },
                       ),
@@ -105,10 +103,8 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                     child: SizedBox(
                       height: 200,
                       child: Padding(
-                        padding: const EdgeInsets.only(
-                            right: 20), // Padding for the right side
+                        padding: const EdgeInsets.only(right: 20),
                         child: JsonCodeSnippetView(
-                          // JSON code snippet view
                           jsonString: jsonString,
                         ),
                       ),

frontend/lib/views/chat/chat_view.dart

@@ -8,8 +8,6 @@ import 'package:flutter/material.dart';
 import 'package:auto_gpt_flutter_client/viewmodels/chat_viewmodel.dart';
 import 'package:provider/provider.dart';
 
-// TODO: Implement artifacts
-
 class ChatView extends StatefulWidget {
   final ChatViewModel viewModel;
 
@@ -84,7 +82,24 @@ class _ChatViewState extends State<ChatView> {
                 if (chat.messageType == MessageType.user) {
                   return UserMessageTile(message: chat.message);
                 } else {
-                  return AgentMessageTile(chat: chat);
+                  return AgentMessageTile(
+                    chat: chat,
+                    onArtifactsButtonPressed: () {
+                      // TODO: Create an actual artifact object
+                      // Loop through each artifact and download it using the artifact_id
+                      for (var artifact in chat.artifacts) {
+                        if (artifact is Map) {
+                          final artifactMap = artifact.cast<String,
+                              dynamic>(); // Cast each item to Map<String, dynamic>
+
+                          final artifactId = artifactMap['artifact_id']
+                              .toString(); // Get the artifact_id
+                          widget.viewModel.downloadArtifact(
+                              chat.taskId, artifactId); // Download the artifact
+                        }
+                      }
+                    },
+                  );
                 }
               },
             ),