From 3512254318c6c908f1a4e255fc653d8501dd28fe Mon Sep 17 00:00:00 2001 From: Ivan Date: Wed, 13 Mar 2024 02:21:34 +0800 Subject: [PATCH] show agent info we added description and status to be passed on the backend side, then we update the ui for sidebar to display agent info. --- src/agents.py | 2 +- web/src/classes/Agent.tsx | 6 ++++- web/src/components/Sidebar.module.css | 39 +++++++++++++++++++++------ web/src/components/Sidebar.tsx | 32 +++++++++++++--------- web/src/steps/NewAgentStep.ts | 16 ++++++----- 5 files changed, 67 insertions(+), 28 deletions(-) diff --git a/src/agents.py b/src/agents.py index 3bb46ca..bed7409 100644 --- a/src/agents.py +++ b/src/agents.py @@ -62,7 +62,7 @@ def __init__(self, agent_data={}): self.matrix = agent_data.get('matrix') if self.matrix: - self.matrix.add_to_logs({"agent_id":self.mid,"step_type":"agent_init","x":self.x,"y":self.y,"name":self.name,"goal":self.goal,"kind":self.kind}) + self.matrix.add_to_logs({"agent_id":self.mid,"step_type":"agent_init","x":self.x,"y":self.y,"name":self.name,"goal":self.goal,"kind":self.kind,"description":self.description,"status":self.status}) def update_goals(self): # this assumes 8+ importance is always worth changing /reevaluating goals diff --git a/web/src/classes/Agent.tsx b/web/src/classes/Agent.tsx index f0e45bb..8653728 100644 --- a/web/src/classes/Agent.tsx +++ b/web/src/classes/Agent.tsx @@ -16,14 +16,18 @@ export class Agent { isTalking: boolean; isThinking: boolean; status: string + description: string; + goal: string; - constructor(position: GridPosition, agentName: string, agentId: string, status: string) { + constructor(position: GridPosition, agentName: string, agentId: string, status: string, description: string, goal: string) { this.position = position; this.agentName = agentName; this.agentId = agentId; this.isTalking = false; this.isThinking = false; this.status = status; + this.description = description; + this.goal = goal; this.steps = []; } diff --git a/web/src/components/Sidebar.module.css b/web/src/components/Sidebar.module.css index 62faed7..93f0d77 100644 --- a/web/src/components/Sidebar.module.css +++ b/web/src/components/Sidebar.module.css @@ -5,7 +5,7 @@ top: 0; z-index: 3; max-height: 100vh; - width: 300px; + width: 350px; overflow: scroll; } @@ -20,7 +20,7 @@ } .gameControls:hover { - background-color: rgba(255, 255, 255, 1); + background-color: rgba(255, 255, 255, 1); } @@ -30,8 +30,7 @@ margin: 5px; } -.agentModule { - display: flex; +.agentInfoContainer { border: 3px dashed #00bcd4; background-color: sandybrown; margin-top: 15px; @@ -42,14 +41,38 @@ overflow: hidden; } +.agentModule { + display: flex; + align-items: center; + position: relative; +} + .agentName { font-size: x-large; - padding-left: 10px; + padding-left: 8px; } .thoughtSelector { - margin-left: auto; - display: flex; - align-items: center; + padding-left: 10px; + margin-left: auto; + display: flex; + align-items: center; + justify-content: center; +} + +.closeButton { + margin-left: auto; + display: flex; justify-content: flex-end; + color: black; + font-size: medium; + font-weight: bold; + border: 2px solid black; + border-radius: 8px; + padding: 4px 8px; + text-align: center; +} + +.agentInfo { + text-align: justify; } \ No newline at end of file diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index ac055a5..718117f 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -130,19 +130,27 @@ const Sidebar: React.FC = ( // JSX for the Sidebar component goes here
{renderControls()} - {agentPlacement &&
- -
{agentPlacement.agentName}
-
- + {agentPlacement &&
+
+ +
{agentPlacement.agentName}
+
+ +
+
- -
} +
+
+

Description: {agentPlacement.description}

+

Goal: {agentPlacement.goal}

+
+
+ } <> {renderTimeline()} diff --git a/web/src/steps/NewAgentStep.ts b/web/src/steps/NewAgentStep.ts index 7569cde..d8153a2 100644 --- a/web/src/steps/NewAgentStep.ts +++ b/web/src/steps/NewAgentStep.ts @@ -9,6 +9,8 @@ export interface NewAgentJSON extends StepJSON { name: string; agent_id: string; status: string; + description: string; + goal: string; } export class NewAgentStep extends Step { @@ -16,25 +18,27 @@ export class NewAgentStep extends Step { agentName: string; position: GridPosition; agentStatus: string; + agentDescription: string; + agentGoal: string; - constructor(stepId: number, substepId: number, agentId: string, agentName: string, position: GridPosition, agentStatus: string) { + constructor(stepId: number, substepId: number, agentId: string, agentName: string, position: GridPosition, agentStatus: string, agentDescription: string, agentGoal: string) { super(stepId, substepId); this.agentId = agentId; this.agentName = agentName; this.position = position; this.agentStatus = agentStatus; + this.agentDescription = agentDescription; + this.agentGoal = agentGoal; } applyStep(level: Level) { - const placement = new Agent(this.position, this.agentName, this.agentId, this.agentStatus); + const placement = new Agent(this.position, this.agentName, this.agentId, this.agentStatus, this.agentDescription, this.agentGoal); level.agents.push(placement); } static fromJSON(json: NewAgentJSON): NewAgentStep { const position: GridPosition = { x: json.y, y: json.x }; - return new NewAgentStep(json.step, json.substep, json.agent_id, json.name, position, json.status); + return new NewAgentStep(json.step, json.substep, json.agent_id, json.name, position, json.status, json.description, json.goal); } -} - - +} \ No newline at end of file