Feature: Multi Agent Improvements

playground/src/components/editor/code-editor.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import AceEditor from "react-ace";
-import "ace-builds/src-noconflict/theme-gruvbox_light_hard";
+import "ace-builds/src-noconflict/theme-gruvbox_dark_hard";
 import "./simulatrex-mode";
 
 const CodeEditor = ({
@@ -13,7 +13,12 @@ const CodeEditor = ({
   return (
     <AceEditor
       mode="simulatrex" // Use the custom mode
-      theme="light_hard"
+      theme={
+        typeof window !== "undefined" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "gruvbox_dark_hard"
+          : undefined
+      }
       onChange={setCode}
       name="code-editor"
       editorProps={{ $blockScrolling: true }}

playground/src/components/preview/simulation-preview.tsx

@@ -15,6 +15,7 @@ const Preview: React.FC<PreviewProps> = ({ agents }) => {
   const size = 20; // Example size, this can be dynamic
   const tileColor = "#EEF0F4"; // Light grey for the tiles
   const [hoveredAgentId, setHoveredAgentId] = useState<string | null>(null);
+  console.log(agents);
 
   return (
     <Canvas camera={{ position: [size / 2, size, size * 2], fov: 60 }}>

playground/src/components/resizebale-container.tsx

@@ -0,0 +1,107 @@
+import React, { useRef, useState, useCallback, useEffect } from "react";
+
+type ResizableContainerProps = {
+  children: React.ReactNode;
+  initialWidth: string; // Using percentages for relative sizing
+  initialHeight: string; // Using percentages for relative sizing
+  resizeDirection: "x" | "y" | "both";
+  className?: string;
+};
+
+const ResizableContainer: React.FC<ResizableContainerProps> = ({
+  children,
+  initialWidth,
+  initialHeight,
+  resizeDirection,
+  className,
+}) => {
+  const [dimensions, setDimensions] = useState({
+    width: initialWidth,
+    height: initialHeight,
+  });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const updateDimensions = useCallback(
+    (newWidth: number, newHeight: number) => {
+      setDimensions((prevDimensions) => ({
+        width:
+          resizeDirection === "x" || resizeDirection === "both"
+            ? `${newWidth}px`
+            : prevDimensions.width,
+        height:
+          resizeDirection === "y" || resizeDirection === "both"
+            ? `${newHeight}px`
+            : prevDimensions.height,
+      }));
+    },
+    [resizeDirection]
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleResize = (e: MouseEvent) => {
+      const { clientX, clientY } = e;
+      const { left, top, width, height } = container.getBoundingClientRect();
+
+      let newWidth = width;
+      let newHeight = height;
+
+      // Adjusting the condition to check if the mouse is near the border, not just at the border
+      const isNearRightBorder = clientX > left + width - 20; // 20px for the grab area
+      const isNearBottomBorder = clientY > top + height - 20; // 20px for the grab area
+
+      if (
+        (resizeDirection === "x" || resizeDirection === "both") &&
+        isNearRightBorder
+      ) {
+        newWidth = Math.max(100, clientX - left); // Adjusted to not add extra space
+      }
+      if (
+        (resizeDirection === "y" || resizeDirection === "both") &&
+        isNearBottomBorder
+      ) {
+        newHeight = Math.max(100, clientY - top); // Adjusted to not add extra space
+      }
+
+      updateDimensions(newWidth, newHeight);
+    };
+
+    const startResizing = (e: MouseEvent) => {
+      e.preventDefault();
+      document.addEventListener("mousemove", handleResize);
+      document.addEventListener("mouseup", stopResizing);
+    };
+
+    const stopResizing = () => {
+      document.removeEventListener("mousemove", handleResize);
+      document.removeEventListener("mouseup", stopResizing);
+    };
+
+    container.addEventListener("mousedown", startResizing);
+
+    return () => {
+      container.removeEventListener("mousedown", startResizing);
+    };
+  }, [resizeDirection, updateDimensions]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        width: dimensions.width,
+        height: dimensions.height,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {React.Children.map(children, (child, index) => {
+        return React.cloneElement(child as React.ReactElement, { key: index });
+      })}
+    </div>
+  );
+};
+
+export default ResizableContainer;

playground/src/pages/index.tsx

@@ -7,6 +7,7 @@ import useSimulation from "@/hooks/useRunSimulation";
 import { Inter } from "next/font/google";
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
+import ResizableContainer from "@/components/resizebale-container";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -64,7 +65,7 @@ export default function Home() {
   }, []);
 
   return (
-    <main className={`${inter.className} bg-white dark:bg-[#181818]`}>
+    <main className={`${inter.className} bg-white dark:bg-[#181818] h-screen`}>
       <div className="border-b">
         <div className="h-16 flex items-center px-4">
           <Navbar className="mx-6" />
@@ -89,19 +90,35 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="flex w-full">
-        <div className="w-1/2 h-screen p-4 bg-gray-50 dark:bg-gray-700">
+      <div className="flex w-full h-full">
+        <ResizableContainer
+          className="p-4 bg-gray-50 dark:bg-gray-700"
+          initialWidth="50%"
+          initialHeight="auto"
+          resizeDirection="x"
+        >
           <CodeEditor code={code} setCode={setCode} key={"code-editor"} />
-        </div>
-        <div className="w-1/2 h-screen p-4">
+        </ResizableContainer>
+        <ResizableContainer
+          className="p-4"
+          initialWidth="50%"
+          initialHeight="auto"
+          resizeDirection="x"
+        >
           <div className="w-full h-4/5">
             <Preview agents={agents} />
           </div>
-          <div className="h-1/5 mt-4 overflow-y-auto p-4 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-800 rounded-lg shadow">
-            <h2 className="text-lg font-semibold mb-2">Simulation Logs:</h2>
-            <p className="whitespace-pre-wrap font-mono">{simulationOutcome}</p>
+
+          <div className="w-full h-auto mt-4 overflow-y-auto p-4 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-800 rounded-lg shadow">
+            <h2 className="text-lg font-semibold mb-2 text-gray-700 dark:text-white">
+              Simulation Logs:
+            </h2>
+
+            <p className="whitespace-pre-wrap font-mono text-gray-600 dark:text-gray-200">
+              {simulationOutcome}
+            </p>
           </div>
-        </div>
+        </ResizableContainer>
       </div>
     </main>
   );

setup.py

@@ -16,13 +16,15 @@
     include_package_data=True,
     package_dir={"": "src"},
     package_data={
-        "simulatrex": ["llm_utils/prompt_templates/*.txt"],
+        "simulatrex": ["llms/prompts/prompt_templates/**/*.txt"],
     },
     install_requires=[
+        "pandas",
+        "numpy",
+        "chromadb",
         "openai",
         "uuid",
         "termcolor",
-        "chromadb",
         "pydantic",
         "python-dotenv",
         "requests",

src/simulatrex/__init__.py

@@ -4,7 +4,9 @@
 ROOT_DIR = os.path.dirname(BASE_DIR)
 
 from simulatrex.config import Config, SETTINGS
-from simulatrex.agents.agent import Agent
-from simulatrex.agents.agent_group import AgentGroup
+from simulatrex.agents.generative_agent import GenerativeAgent
 from simulatrex.experiments.scenarios.scenario import Scenario
 from simulatrex.experiments.surveys.survey import Survey
+from simulatrex.environment import Environment
+from simulatrex.simulation import Simulation
+from simulatrex.dsl_parser import parse_dsl

src/simulatrex/agents/__init__.py

@@ -1,2 +1,2 @@
-from simulatrex.agents.agent import Agent
+from simulatrex.agents.generative_agent import GenerativeAgent
 from simulatrex.agents.agent_group import AgentGroup

src/simulatrex/agents/agent_group.py

@@ -8,12 +8,12 @@
 
 from typing import List, Optional
 
-from simulatrex.agents.agent import Agent
+from simulatrex.agents.generative_agent import GenerativeAgent
 from simulatrex.base import Base
 
 
 class AgentGroup(Base, list):
-    def __init__(self, agents: Optional[List[Agent]] = None):
+    def __init__(self, agents: Optional[List[GenerativeAgent]] = None):
         super().__init__()
         if agents is not None:
             self.extend(agents)
@@ -24,5 +24,5 @@ def to_dict(self) -> dict:
     @classmethod
     def from_dict(cls, data: dict) -> "AgentGroup":
         agent_data = data.get("agent_group", [])
-        agents = [Agent.from_dict(agent_dict) for agent_dict in agent_data]
+        agents = [GenerativeAgent.from_dict(agent_dict) for agent_dict in agent_data]
         return cls(agents)

src/simulatrex/agents/target_audience.py → src/simulatrex/agents/generativ_audiences.py

@@ -1,8 +1,8 @@
 """
 Author: Dominik Scherm ([email protected])
 
-File: target_audience.py
-Description: Target Audience Class
+File: generative_audiences.py
+Description: Defines the generative audience class for the simulation
 
 """