refactor entire frontend

frontend/lib/agent.dart

@@ -1,9 +0,0 @@
-import 'chat.dart';
-
-class Agent {
-  void receivedChatMessage(Chat chat, String message) {
-    // Simple response from the agent
-    String responseMessage = "Agent received: " + message;
-    chat.addAgentMessage(responseMessage);
-  }
-}

frontend/lib/app_menu.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'chat_list_screen.dart';
+
+class AppMenu extends StatelessWidget {
+  const AppMenu({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Menu')),
+      body: ListView(
+        children: <Widget>[
+          ListTile(
+            title: const Text('Chats'),
+            onTap: () {
+              Navigator.push(
+                context,
+                MaterialPageRoute(
+                  builder: (context) => const ChatListScreen(),
+                ),
+              );
+            },
+          ),
+          // Add other settings options here
+        ],
+      ),
+    );
+  }
+}

frontend/lib/backend.dart

@@ -1,27 +1,31 @@
+
 import 'dart:html';
 import 'dart:convert';
+import 'dart:async'; // Import for handling Completers
 
 class Backend {
   static WebSocket? _socket;
   static String? _url;
+  static String? _username;
+  static Map<int, Completer> _pendingActions = {};
+  static Map<int, StreamController<Map<String, dynamic>>> _chatControllers = {};
+  static int _nextNonce = 0; // Tracking nonce for each action
+  static StreamController<Map<String, dynamic>> _packetStreamController = StreamController.broadcast();
 
   static void setup(String url) {
     _url = url;
     connect();
   }
 
-  static void auth(username) {
-    _socket!.send(
-        json.encode({'username': username})
-    );
+  static void auth(String username, String password) {
+    _socket!.send(json.encode({'username': username, 'password': password}));
+    _username = username;
   }
 
   static void connect() {
     _socket = WebSocket(_url!);
     _socket!.onOpen.listen((event) {
       print('Connected to the WebSocket server');
-      auth("the-user");
-      ping(); 
     });
     _socket!.onError.listen((event) {
       print('Error: $event');
@@ -31,6 +35,9 @@ class Backend {
       print('Disconnected. Attempting to reconnect...');
       _reconnect();
     });
+    _socket!.onMessage.listen((event) {
+      _handleIncomingMessage(event.data);
+    });
   }
 
   static void _reconnect() {
@@ -39,8 +46,65 @@ class Backend {
     });
   }
 
+  static Future<dynamic> sendAction(String action, Map<String, dynamic> body) {
+    int nonce = _nextNonce++;
+    Completer completer = Completer();
+    _pendingActions[nonce] = completer;
+
+    final packet = {
+      'action': action,
+      'nonce': nonce,
+      'body': body,
+    };
+    _socket!.send(json.encode(packet));
+
+    return completer.future.then((response) {
+      _pendingActions.remove(nonce); // Clean up the mapping
+      return response;
+    });
+  }
+
+  static void _handleIncomingMessage(String data) {
+    var jsonData = json.decode(data);
+    print("Incoming Packet: $jsonData");
+    
+    if (jsonData['nonce'] != null) {
+      int nonce = jsonData['nonce'];
+      if (_pendingActions.containsKey(nonce)) {
+        // Complete the response
+        _pendingActions[nonce]!.complete(jsonData);
+      } else {
+        print("Orphan response for action nonce $nonce");
+      }
+    } else if (jsonData['action'] == 'chat-message') {
+      int chatId = jsonData['chatId'];
+      final controller = _chatControllers[chatId];
+      if (controller != null && !controller.isClosed) {
+        controller.add(jsonData);
+      } else {
+        print("No active listeners for chatId $chatId");
+      }
+    } else {
+      _packetStreamController.add(jsonData);
+    }
+  }
+
+  static Stream<Map<String, dynamic>> chatMessages(int chatId) {
+    if (!_chatControllers.containsKey(chatId) || _chatControllers[chatId]!.isClosed) {
+      _chatControllers[chatId] = StreamController<Map<String, dynamic>>.broadcast();
+    }
+    return _chatControllers[chatId]!.stream;
+  }
+
+  static void removeChatListener(int chatId) {
+    final controller = _chatControllers.remove(chatId);
+    if (controller != null && !controller.isClosed) {
+      controller.close();
+    }
+  }
+
   static void ping() {
-    if (_socket != null && _socket!.readyState == WebSocket.OPEN) {
+    if (_socket!= null && _socket!.readyState == WebSocket.OPEN) {
       final data = json.encode({'path': 'ping'});
       _socket!.send(data);
       print('Ping sent: $data');

frontend/lib/chat.dart

@@ -1,31 +0,0 @@
-import 'agent.dart'; // Import the Agent class
-
-class Message {
-  final String content;
-  final String sender;
-
-  Message(this.content, this.sender);
-}
-
-class Chat {
-  final String id;
-  final List<Message> _messages = [];
-  final Agent agent = Agent(); // Create an instance of Agent
-
-  Chat(this.id);
-
-  List<Message> get messages => List.unmodifiable(_messages);
-
-  void addUserMessage(String message) {
-    _messages.add(Message(message, 'user'));
-    agent.receivedChatMessage(this, message); // Call agent's method
-  }
-
-  void addAgentMessage(String message) {
-    _messages.add(Message(message, 'agent'));
-  }
-
-  void clearMessages() {
-    _messages.clear();
-  }
-}

frontend/lib/chat_list_screen.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'backend.dart';
+import 'chat_screen.dart';
+
+class ChatEntry {
+  final int id;
+  final String name;
+
+  ChatEntry({required this.id, required this.name});
+}
+
+class ChatListScreen extends StatelessWidget {
+  const ChatListScreen({super.key});
+
+  static Future<List<ChatEntry>> getChats() async {
+    final response = await Backend.sendAction("get-chats", {});
+    List<dynamic> chatObjects = response['chats'];
+    List<ChatEntry> chats = chatObjects
+        .map((msg) => ChatEntry(
+              id: msg['id'],
+              name: msg['name']?.isNotEmpty == true ? msg['name'] : '[Chat ${msg['id']}]',
+            ))
+        .toList();
+    return chats;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Chats')),
+      body: FutureBuilder<List<ChatEntry>>(
+        future: getChats(),
+        builder: (context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.waiting) {
+            return const Center(child: CircularProgressIndicator());
+          } else if (snapshot.hasError) {
+            return Center(child: Text('Error: ${snapshot.error}'));
+          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
+            return const Center(child: Text('No chats available.'));
+          } else {
+            final chats = snapshot.data!;
+            return ListView.builder(
+              itemCount: chats.length,
+              itemBuilder: (context, index) {
+                final chat = chats[index];
+                return ListTile(
+                  title: Text(chat.name),
+                  onTap: () {
+                    Navigator.push(
+                      context,
+                      MaterialPageRoute(
+                        builder: (context) => ChatScreen(chatId: chat.id),
+                      ),
+                    );
+                  },
+                );
+              },
+            );
+          }
+        },
+      ),
+    );
+  }
+}

frontend/lib/chat_screen.dart

@@ -1,56 +1,133 @@
 import 'package:flutter/material.dart';
-import 'chat.dart'; // Import the new Chat class
+import 'app_menu.dart';
+import 'styles.dart';
+import 'backend.dart';
+import 'dart:async';
+
+class Message {
+  final String sender;
+  final String text;
+  final bool isFromUser;
+
+  Message({required this.sender, required this.text}) : isFromUser = sender == "user";
+
+  Alignment get alignment => isFromUser ? Alignment.centerRight : Alignment.centerLeft;
+  EdgeInsets get padding => isFromUser ? EdgeInsets.zero : const EdgeInsets.only(left: 10);
+}
 
 class ChatScreen extends StatefulWidget {
-  const ChatScreen({super.key});
+  final int chatId;
+
+  ChatScreen({required this.chatId});
+
+  static Future<List<Message>> getChatMessages(int chatId) async {
+    final response = await Backend.sendAction("get-chat-messages", {'chatId': chatId});
+    print("get-chat-messages response: $response");
+    List<dynamic> messageObjects = response['messages'];
+    List<Message> messages = messageObjects.map((msg) => Message(sender: msg['sender'], text: msg['content'] as String)).toList();
+    return messages;
+  }
 
   @override
-  State<ChatScreen> createState() => _ChatScreenState();
+  _ChatScreenState createState() => _ChatScreenState();
 }
 
 class _ChatScreenState extends State<ChatScreen> {
-  final Chat _chat = Chat('chat1'); // Create an instance of Chat
-  final TextEditingController _controller = TextEditingController();
+  List<Message> _messages = [];
+  final TextEditingController _textController = TextEditingController();
+  StreamSubscription? _chatSubscription;
 
-  void _sendMessage() {
-    if (_controller.text.isNotEmpty) {
+  @override
+  void initState() {
+    super.initState();
+    _loadInitialMessages();
+    _chatSubscription = Backend.chatMessages(widget.chatId).listen((data) {
+      final message = Message(sender: data['sender'], text: data['content']);
+      if (!message.isFromUser) {
+        addMessage(message);
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    Backend.removeChatListener(widget.chatId);
+    super.dispose();
+  }
+
+  Future<void> _loadInitialMessages() async {
+    final initialMessages = await ChatScreen.getChatMessages(widget.chatId);
+    setState(() {
+      _messages.addAll(initialMessages);
+    });
+  }
+
+  void _handleNewMessage(Map<String, dynamic> message) {
+    final newMessage = Message(sender: message['sender'], text: message['content'] as String);
+    if (newMessage.sender!= "user") {
       setState(() {
-        _chat.addUserMessage(_controller.text); // Use the Chat instance to add the message
-        _controller.clear();
+        _messages.add(newMessage);
       });
     }
   }
 
+  void addMessage(Message message) {
+    setState(() {
+      _messages.add(message);
+    });
+  }
+
+  void sendMessage(String content) {
+    _textController.clear();
+    final newMessage = Message(sender: "user", text: content);
+    Backend.sendAction("send-chat-message", {'chatId': widget.chatId, 'content': content}).then((response) {
+      if (response['error'] != null) {
+        print("Error sending chat message: ${response['error']}");
+      }
+    });
+    addMessage(newMessage);
+  }
+
+  Color getMessageColor(BuildContext context) {
+    final backgroundColor = Theme.of(context).scaffoldBackgroundColor;
+    final messageColor = Color.alphaBlend(Colors.white.withOpacity(0.1), backgroundColor);
+    return messageColor;
+  }
+
   @override
   Widget build(BuildContext context) {
-    final width = MediaQuery.of(context).size.width; 
-    final isBigScreen = width > 600; // Define threshold for small screens
+    final isWideScreen = MediaQuery.of(context).size.width > 600;
 
     return Scaffold(
       appBar: AppBar(
-        title: const Text('Chat'),
+        title: Text('Chat Room ${widget.chatId}'),
+        actions: [
+          IconButton(icon: Icon(Icons.settings), onPressed: () {
+            Navigator.push(context, MaterialPageRoute(builder: (_) => AppMenu()));
+          }),
+        ],
       ),
       body: Column(
         children: [
           Expanded(
             child: ListView.builder(
-              itemCount: _chat.messages.length,
+              itemCount: _messages.length,
               itemBuilder: (context, index) {
-                final message = _chat.messages[index];
-                // Align all messages to left for big screens
-                final align = message.sender == 'user' && !isBigScreen ? CrossAxisAlignment.end : CrossAxisAlignment.start;
-                return Row(
-                  mainAxisAlignment: align == CrossAxisAlignment.end ? MainAxisAlignment.end : MainAxisAlignment.start,
-                  children: [
-                    Container(
-                      padding: const EdgeInsets.all(8.0),
-                      margin: const EdgeInsets.symmetric(vertical: 4.0),
-                      child: Text(
-                        '${message.content}',
-                        style: const TextStyle(color: Colors.white),
+                final message = _messages[index];
+                return Padding(
+                  padding: isWideScreen ? message.padding : EdgeInsets.zero,
+                  child: Align(
+                    alignment: isWideScreen ? Alignment.centerLeft : message.alignment,
+                    child: Container(
+                      margin: EdgeInsets.symmetric(vertical: 2, horizontal: 8),
+                      padding: EdgeInsets.all(10),
+                      decoration: BoxDecoration(
+                        color: getMessageColor(context),
+                        borderRadius: BorderRadius.circular(12),
                       ),
+                      child: Text(message.text),
                     ),
-                  ],
+                  ),
                 );
               },
             ),
@@ -61,14 +138,17 @@ class _ChatScreenState extends State<ChatScreen> {
               children: [
                 Expanded(
                   child: TextField(
-                    controller: _controller,
-                    decoration: const InputDecoration(hintText: 'Send a message'),
-                    onSubmitted: (_) => _sendMessage(),
+                    controller: _textController,
+                    decoration: inputDecoration(),
+                    onSubmitted: sendMessage, // Send message on Enter key
                   ),
                 ),
-                IconButton(
-                  icon: const Icon(Icons.send),
-                  onPressed: _sendMessage,
+                SizedBox(width: 8),
+                ElevatedButton(
+                  onPressed: () {
+                    sendMessage(_textController.text);
+                  },
+                  child: Text('Send'),
                 ),
               ],
             ),

frontend/lib/login_screen.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+
+class LoginScreen extends StatelessWidget {
+  final Function(String, String) onLogin;
+
+  LoginScreen({required this.onLogin});
+
+  final TextEditingController usernameController = TextEditingController();
+  final TextEditingController passwordController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Login')),
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              TextField(controller: usernameController, decoration: InputDecoration(labelText: 'Username')),
+              SizedBox(height: 20),
+              TextField(
+                controller: passwordController,
+                decoration: InputDecoration(labelText: 'Password'),
+                obscureText: true, // Hide password characters
+              ),
+              SizedBox(height: 20),
+              ElevatedButton(
+                onPressed: () {
+                  onLogin(usernameController.text, passwordController.text);
+                },
+                child: Text('Login'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/lib/main.dart

@@ -1,43 +1,46 @@
 import 'dart:html' as html;
 import 'dart:io' as io;
 import 'package:flutter/material.dart';
-import 'chat_screen.dart';
 import 'backend.dart';
+import 'user_checker.dart';
 
 class Config {
   static String? backendUrl; // Declare it as nullable
 
   static void loadConfig() {
-    // Check the platform for web or other
     if (html.window.location.origin.isNotEmpty) {
       // For web applications
       backendUrl = html.window.location.origin; // Get the server URL from window.location
-    } else if (io.Platform.environment.containsKey('BACKEND_URL')) {
-      // For Android or other platforms, check for the environment variable
+    }
+
+    // For Android or other platforms, check for the environment variable
+    /*if (io.Platform.environment.containsKey('BACKEND_URL')) {
       backendUrl = io.Platform.environment['BACKEND_URL'];
+    } else if (html.window.location.origin.isNotEmpty) {
+      // For web applications
+      backendUrl = html.window.location.origin; // Get the server URL from window.location
     } else {
       // If no value is determined, set it to null
       backendUrl = null;
-    }
+    }*/
   }
 }
 
 void main() {
+  print("Main");
   Config.loadConfig(); // Load the configuration before running the app
 
   Backend.setup('${Config.backendUrl}/ws');
-  runApp(const MyApp());
+  runApp(HubApp());
 }
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
+class HubApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Flutter Chat',
+      title: 'Horde Hub',
       theme: ThemeData.dark(),
-      home: const ChatScreen(),
+      home: UserChecker(),
     );
   }
 }

frontend/lib/styles.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+InputDecoration inputDecoration() {
+  return InputDecoration(
+    border: OutlineInputBorder(),
+    hintText: 'Send a message',
+  );
+}

frontend/lib/user_checker.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'backend.dart';
+import 'login_screen.dart';
+import 'chat_screen.dart';
+import 'chat_list_screen.dart';
+
+class UserChecker extends StatefulWidget {
+  @override
+  _UserCheckerState createState() => _UserCheckerState();
+}
+
+class _UserCheckerState extends State<UserChecker> {
+  String? username;
+  bool isLoading = false;
+
+  @override
+  void initState() {
+    super.initState();
+    username = null;
+  }
+
+  static void fetchChats(Function(List<int>) onSuccess) {
+    Backend.sendAction("get-chats", {}).then((response) {
+      print("chats response: $response");
+      List<dynamic> chatObjects = response['chats'];
+      List<int> chatIds = chatObjects.map((chat) => chat['id'] as int).toList();
+      onSuccess(chatIds);
+    });
+  }
+
+  void _handleLogin(String user, String password) {
+    Backend.auth(user, password);
+  
+    setState(() {
+      username = user;
+      isLoading = true; // Show loading spinner
+    });
+
+    fetchChats((chatIds) {
+      if (chatIds.isEmpty) {
+        Navigator.pushReplacement(
+          context,
+          MaterialPageRoute(builder: (_) => ChatListScreen()),
+        );
+      } else {
+        Navigator.pushReplacement(
+          context,
+          MaterialPageRoute(builder: (_) => ChatScreen(chatId: chatIds.first)),
+        );
+      }
+    });
+
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    print("Build UserChecker: $username $isLoading");
+    if (isLoading) {
+      return Center(child: CircularProgressIndicator()); // Loading state UI
+    }
+
+    return LoginScreen(onLogin: _handleLogin);
+  }
+}