Replace Placeholder SkillTreeView with Full Implementation

This commit replaces the placeholder implementation of the SkillTreeView class with a complete, functional version.

Features:
- Initializes the skill tree from the SkillTreeViewModel during `initState`.
- Dynamically creates Node and Edge objects for GraphView based on ViewModel data.
- Utilizes the TreeNodeView to render individual nodes.
- Integrates node selection functionality from the ViewModel.
- Adds InteractiveViewer for zoom and pan capabilities.

The new SkillTreeView is designed to work closely with SkillTreeViewModel to manage and display the skill tree.

frontend/lib/views/skill_tree/skill_tree_view.dart

@@ -1,20 +1,69 @@
+import 'package:auto_gpt_flutter_client/viewmodels/skill_tree_viewmodel.dart';
+import 'package:auto_gpt_flutter_client/views/skill_tree/tree_node_view.dart';
 import 'package:flutter/material.dart';
+import 'package:graphview/GraphView.dart';
 
-class SkillTreeView extends StatelessWidget {
+class SkillTreeView extends StatefulWidget {
-  const SkillTreeView({super.key});
+  final SkillTreeViewModel viewModel;
+
+  const SkillTreeView({Key? key, required this.viewModel}) : super(key: key);
+
+  @override
+  _TreeViewPageState createState() => _TreeViewPageState();
+}
+
+class _TreeViewPageState extends State<SkillTreeView> {
+  @override
+  void initState() {
+    super.initState();
+
+    widget.viewModel.initializeSkillTree();
+
+    // Create Node and Edge objects for GraphView
+    final Map<int, Node> nodeMap = {};
+    for (var skillTreeNode in widget.viewModel.skillTreeNodes) {
+      final node = Node.Id(skillTreeNode.id);
+      widget.viewModel.graph.addNode(node);
+      nodeMap[skillTreeNode.id] = node;
+    }
+
+    for (var skillTreeEdge in widget.viewModel.skillTreeEdges) {
+      final fromNode = nodeMap[int.parse(skillTreeEdge.from)];
+      final toNode = nodeMap[int.parse(skillTreeEdge.to)];
+      widget.viewModel.graph.addEdge(fromNode!, toNode!);
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Scaffold(
-      color: Colors.blue[100], // Background color
+      body: Column(
-      child: const Center(
+        mainAxisSize: MainAxisSize.max,
-        child: Text(
+        children: [
-          'SkillTreeView',
+          Expanded(
-          style: TextStyle(
+            child: InteractiveViewer(
-            fontSize: 24,
+              constrained: false,
-            fontWeight: FontWeight.bold,
+              boundaryMargin: EdgeInsets.all(100),
+              minScale: 0.01,
+              maxScale: 5.6,
+              child: GraphView(
+                graph: widget.viewModel.graph,
+                algorithm: BuchheimWalkerAlgorithm(widget.viewModel.builder,
+                    TreeEdgeRenderer(widget.viewModel.builder)),
+                paint: Paint()
+                  ..color = Colors.green
+                  ..strokeWidth = 1
+                  ..style = PaintingStyle.stroke,
+                builder: (Node node) {
+                  int nodeId = node.key?.value as int;
+                  return TreeNodeView(
+                      nodeId: nodeId,
+                      selected: nodeId == widget.viewModel.selectedNode?.id);
+                },
+              ),
+            ),
           ),
-        ),
+        ],
       ),
     );
   }