diff --git a/gallery/undercover.json b/gallery/undercover.json
new file mode 100644
index 000000000..cf749b37b
--- /dev/null
+++ b/gallery/undercover.json
@@ -0,0 +1,471 @@
+{
+  "meta": {
+        "index": 4,
+        "title": "Undercover",
+        "author": "AgentScopeTeam",
+        "keywords": [
+            "undercover",
+            "game"
+        ],
+        "category": "game",
+        "time": "2024-09-23",
+        "thumbnail": ""
+    },
+    "drawflow": {
+        "Home": {
+            "data": {
+                "2": {
+                    "id": 2,
+                    "name": "dashscope_chat",
+                    "data": {
+                        "args": {
+                            "config_name": "qwen",
+                            "model_name": "qwen-max",
+                            "api_key": "****",
+                            "temperature": 0,
+                            "seed": 0,
+                            "model_type": "dashscope_chat"
+                        }
+                    },
+                    "class": "dashscope_chat",
+                    "typenode": false,
+                    "inputs": {},
+                    "outputs": {},
+                    "pos_x": -75,
+                    "pos_y": -31
+                },
+                "3": {
+                    "id": 3,
+                    "name": "MsgHub",
+                    "data": {
+                        "elements": [
+                            "4"
+                        ],
+                        "args": {
+                            "announcement": {
+                                "name": "主持人",
+                                "content": "游戏开始！"
+                            }
+                        }
+                    },
+                    "class": "GROUP",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 281,
+                    "pos_y": -34.111111111111114
+                },
+                "4": {
+                    "id": 4,
+                    "name": "ForLoopPipeline",
+                    "data": {
+                        "elements": [
+                            "5"
+                        ],
+                        "args": {
+                            "max_loop": 5,
+                            "condition_op": "contains",
+                            "target_value": "结束"
+                        }
+                    },
+                    "class": "GROUP",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 319,
+                    "pos_y": 27
+                },
+                "5": {
+                    "id": 5,
+                    "name": "SequentialPipeline",
+                    "data": {
+                        "elements": [
+                            "6",
+                            "7",
+                            "8",
+                            "9",
+                            "10",
+                            "11",
+                            "12",
+                            "13",
+                            "14",
+                            "15",
+                            "16",
+                            "17",
+                            "18",
+                            "19"
+                        ]
+                    },
+                    "class": "GROUP",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 357,
+                    "pos_y": 76
+                },
+                "6": {
+                    "id": 6,
+                    "name": "BroadcastAgent",
+                    "data": {
+                        "args": {
+                            "name": "主持人",
+                            "content": "现在是描述阶段，你需要用一句话来描述你的词。"
+                         }
+                    },
+                    "class": "BroadcastAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 387,
+                    "pos_y": 107
+                },
+                "7": {
+                    "id": 7,
+                    "name": "DialogAgent",
+                    "data": {
+                        "args": {
+                            "name": "玩家1",
+                            "sys_prompt": "《谁是卧底》游戏规则：\n\n概览：\n《谁是卧底》是一款基于推理的猜谜游戏，适合5名玩家：玩家1、玩家2、玩家3、玩家4和玩家5。\n\n目标：\n通过战略性的描述和投票揭露参与者中的卧底玩家，同时卧底的目标是保持不被发现。\n\n游戏设置：\n- 在游戏开始时，每位玩家秘密被分配一个词。四名玩家收到相同的词，而剩余的一名玩家得到一个不同的词，成为卧底。\n- 卧底的词应对其他玩家保密。\n\n游戏玩法：\n游戏由多个轮次组成，每个轮次分为两个阶段：描述阶段和投票阶段。\n\n1. 描述阶段：\n    - 玩家轮流用一句话描述他们的词，目标是微妙地向其他玩家指示自己的词，而不将其泄露给卧底。\n2. 投票阶段：\n    - 玩家投票选出他们怀疑是卧底的人。得票最多的玩家被淘汰。如果出现平票，游戏进入下一轮。\n    - 被淘汰的玩家在他们的回合中只能回应“该玩家已被淘汰”。\n    \n获胜条件：\n- 如果只剩下两名玩家，其中一名是卧底，卧底获胜。\n- 如果在此之前卧底被淘汰，其他玩家获胜。\n\n策略：\n- 玩家应该模糊地描述他们的词，以防卧底察觉。\n- 投票应被战略性地使用来识别并淘汰卧底。\n\n注意：\n一旦被淘汰，该玩家唯一允许的回复是“该玩家已被淘汰。”\n你的名字是玩家1。你的秘密词是“凤凰”。在游戏中使用第一人称视角进行交流，并记得在你的回复中避免使用你的名字。你的目标是微妙地描述你的词，并通过投票努力识别卧底，同时不暴露你的身份。回复中不要包含你的思考过程。只有在“计票员”说你被淘汰，你才是被淘汰。不要在回复中带有你的名字。",
+                            "model_config_name": "qwen"
+                        }
+                    },
+                    "class": "DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 437,
+                    "pos_y": 133
+                },
+                "8": {
+                    "id": 8,
+                    "name": "DialogAgent",
+                    "data": {
+                        "args": {
+                            "name": "玩家2",
+                            "sys_prompt": "《谁是卧底》游戏规则：\n\n概览：\n《谁是卧底》是一款基于推理的猜谜游戏，适合5名玩家：玩家1、玩家2、玩家3、玩家4和玩家5。\n\n目标：\n通过战略性的描述和投票揭露参与者中的卧底玩家，同时卧底的目标是保持不被发现。\n\n游戏设置：\n- 在游戏开始时，每位玩家秘密被分配一个词。四名玩家收到相同的词，而剩余的一名玩家得到一个不同的词，成为卧底。\n- 卧底的词应对其他玩家保密。\n\n游戏玩法：\n游戏由多个轮次组成，每个轮次分为两个阶段：描述阶段和投票阶段。\n\n1. 描述阶段：\n    - 玩家轮流用一句话描述他们的词，目标是微妙地向其他玩家指示自己的词，而不将其泄露给卧底。\n2. 投票阶段：\n    - 玩家投票选出他们怀疑是卧底的人。得票最多的玩家被淘汰。如果出现平票，游戏进入下一轮。\n    - 被淘汰的玩家在他们的回合中只能回应“该玩家已被淘汰”。\n    \n获胜条件：\n- 如果只剩下两名玩家，其中一名是卧底，卧底获胜。\n- 如果在此之前卧底被淘汰，其他玩家获胜。\n\n策略：\n- 玩家应该模糊地描述他们的词，以防卧底察觉。\n- 投票应被战略性地使用来识别并淘汰卧底。\n\n注意：\n一旦被淘汰，该玩家唯一允许的回复是“该玩家已被淘汰。”\n你的名字是玩家2。你的秘密词是“凤凰”。在游戏中使用第一人称视角进行交流，并记得在你的回复中避免使用你的名字。你的目标是微妙地描述你的词，并通过投票努力识别卧底，同时不暴露你的身份。回复中不要包含你的思考过程。只有在“计票员”说你被淘汰，你才是被淘汰。不要在回复中带有你的名字。",
+                            "model_config_name": "qwen"
+                        }
+                    },
+                    "class": "DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 477,
+                    "pos_y": 158
+                },
+                "9": {
+                    "id": 9,
+                    "name": "DialogAgent",
+                    "data": {
+                        "args": {
+                            "name": "玩家3",
+                            "sys_prompt": "《谁是卧底》游戏规则：\n\n概览：\n《谁是卧底》是一款基于推理的猜谜游戏，适合5名玩家：玩家1、玩家2、玩家3、玩家4和玩家5。\n\n目标：\n通过战略性的描述和投票揭露参与者中的卧底玩家，同时卧底的目标是保持不被发现。\n\n游戏设置：\n- 在游戏开始时，每位玩家秘密被分配一个词。四名玩家收到相同的词，而剩余的一名玩家得到一个不同的词，成为卧底。\n- 卧底的词应对其他玩家保密。\n\n游戏玩法：\n游戏由多个轮次组成，每个轮次分为两个阶段：描述阶段和投票阶段。\n\n1. 描述阶段：\n    - 玩家轮流用一句话描述他们的词，目标是微妙地向其他玩家指示自己的词，而不将其泄露给卧底。\n2. 投票阶段：\n    - 玩家投票选出他们怀疑是卧底的人。得票最多的玩家被淘汰。如果出现平票，游戏进入下一轮。\n    - 被淘汰的玩家在他们的回合中只能回应“该玩家已被淘汰”。\n    \n获胜条件：\n- 如果只剩下两名玩家，其中一名是卧底，卧底获胜。\n- 如果在此之前卧底被淘汰，其他玩家获胜。\n\n策略：\n- 玩家应该模糊地描述他们的词，以防卧底察觉。\n- 投票应被战略性地使用来识别并淘汰卧底。\n\n注意：\n一旦被淘汰，该玩家唯一允许的回复是“该玩家已被淘汰。”\n你的名字是玩家3。你的秘密词是“孔雀”。在游戏中使用第一人称视角进行交流，并记得在你的回复中避免使用你的名字。你的目标是微妙地描述你的词，并通过投票努力识别卧底，同时不暴露你的身份。回复中不要包含你的思考过程。只有在“计票员”说你被淘汰，你才是被淘汰。不要在回复中带有你的名字。",
+                            "model_config_name": "qwen"
+                        }
+                    },
+                    "class": "DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 512,
+                    "pos_y": 178.88888888888889
+                },
+                "10": {
+                    "id": 10,
+                    "name": "DialogAgent",
+                    "data": {
+                        "args": {
+                            "name": "玩家4",
+                            "sys_prompt": "《谁是卧底》游戏规则：\n\n概览：\n《谁是卧底》是一款基于推理的猜谜游戏，适合5名玩家：玩家1、玩家2、玩家3、玩家4和玩家5。\n\n目标：\n通过战略性的描述和投票揭露参与者中的卧底玩家，同时卧底的目标是保持不被发现。\n\n游戏设置：\n- 在游戏开始时，每位玩家秘密被分配一个词。四名玩家收到相同的词，而剩余的一名玩家得到一个不同的词，成为卧底。\n- 卧底的词应对其他玩家保密。\n\n游戏玩法：\n游戏由多个轮次组成，每个轮次分为两个阶段：描述阶段和投票阶段。\n\n1. 描述阶段：\n    - 玩家轮流用一句话描述他们的词，目标是微妙地向其他玩家指示自己的词，而不将其泄露给卧底。\n2. 投票阶段：\n    - 玩家投票选出他们怀疑是卧底的人。得票最多的玩家被淘汰。如果出现平票，游戏进入下一轮。\n    - 被淘汰的玩家在他们的回合中只能回应“该玩家已被淘汰”。\n    \n获胜条件：\n- 如果只剩下两名玩家，其中一名是卧底，卧底获胜。\n- 如果在此之前卧底被淘汰，其他玩家获胜。\n\n策略：\n- 玩家应该模糊地描述他们的词，以防卧底察觉。\n- 投票应被战略性地使用来识别并淘汰卧底。\n\n注意：\n一旦被淘汰，该玩家唯一允许的回复是“该玩家已被淘汰。”\n你的名字是玩家4。你的秘密词是“凤凰”。在游戏中使用第一人称视角进行交流，并记得在你的回复中避免使用你的名字。你的目标是微妙地描述你的词，并通过投票努力识别卧底，同时不暴露你的身份。回复中不要包含你的思考过程。只有在“计票员”说你被淘汰，你才是被淘汰。不要在回复中带有你的名字。",
+                            "model_config_name": "qwen"
+                        }
+                    },
+                    "class": "DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 545,
+                    "pos_y": 204
+                },
+                "11": {
+                    "id": 11,
+                    "name": "DialogAgent",
+                    "data": {
+                        "args": {
+                            "name": "玩家5",
+                            "sys_prompt": "《谁是卧底》游戏规则：\n\n概览：\n《谁是卧底》是一款基于推理的猜谜游戏，适合5名玩家：玩家1、玩家2、玩家3、玩家4和玩家5。\n\n目标：\n通过战略性的描述和投票揭露参与者中的卧底玩家，同时卧底的目标是保持不被发现。\n\n游戏设置：\n- 在游戏开始时，每位玩家秘密被分配一个词。四名玩家收到相同的词，而剩余的一名玩家得到一个不同的词，成为卧底。\n- 卧底的词应对其他玩家保密。\n\n游戏玩法：\n游戏由多个轮次组成，每个轮次分为两个阶段：描述阶段和投票阶段。\n\n1. 描述阶段：\n    - 玩家轮流用一句话描述他们的词，目标是微妙地向其他玩家指示自己的词，而不将其泄露给卧底。\n2. 投票阶段：\n    - 玩家投票选出他们怀疑是卧底的人。得票最多的玩家被淘汰。如果出现平票，游戏进入下一轮。\n    - 被淘汰的玩家在他们的回合中只能回应“该玩家已被淘汰”。\n    \n获胜条件：\n- 如果只剩下两名玩家，其中一名是卧底，卧底获胜。\n- 如果在此之前卧底被淘汰，其他玩家获胜。\n\n策略：\n- 玩家应该模糊地描述他们的词，以防卧底察觉。\n- 投票应被战略性地使用来识别并淘汰卧底。\n\n注意：\n一旦被淘汰，该玩家唯一允许的回复是“该玩家已被淘汰。”\n你的名字是玩家5。你的秘密词是“凤凰”。在游戏中使用第一人称视角进行交流，并记得在你的回复中避免使用你的名字。你的目标是微妙地描述你的词，并通过投票努力识别卧底，同时不暴露你的身份。回复中不要包含你的思考过程。只有在“计票员”说你被淘汰，你才是被淘汰。不要在回复中带有你的名字。",
+                            "model_config_name": "qwen"
+                        }
+                    },
+                    "class": "DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 583,
+                    "pos_y": 230
+                },
+                "12": {
+                    "id": 12,
+                    "name": "BroadcastAgent",
+                    "data": {
+                        "args": {
+                            "name": "主持人",
+                            "content": "现在是投票阶段，你需要为你认为最可能是卧底的玩家投票。不要投给已经被淘汰的玩家。只需回答玩家的名字。"
+                        }
+                    },
+                    "class": "BroadcastAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 373,
+                    "pos_y": 311.8888888888889
+                },
+                "13": {
+                    "id": 13,
+                    "name": "CopyNode",
+                    "data": {
+                        "elements": [
+                            "7"
+                        ]
+                    },
+                    "class": "node-DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 407,
+                    "pos_y": 341
+                },
+                "14": {
+                    "id": 14,
+                    "name": "CopyNode",
+                    "data": {
+                        "elements": [
+                            "8"
+                        ]
+                    },
+                    "class": "node-DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 439,
+                    "pos_y": 372
+                },
+                "15": {
+                    "id": 15,
+                    "name": "CopyNode",
+                    "data": {
+                        "elements": [
+                            "9"
+                        ]
+                    },
+                    "class": "node-DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 462.8888888888889,
+                    "pos_y": 399
+                },
+                "16": {
+                    "id": 16,
+                    "name": "CopyNode",
+                    "data": {
+                        "elements": [
+                            "10"
+                        ]
+                    },
+                    "class": "node-DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 488,
+                    "pos_y": 432
+                },
+                "17": {
+                    "id": 17,
+                    "name": "CopyNode",
+                    "data": {
+                        "elements": [
+                            "11"
+                        ]
+                    },
+                    "class": "node-DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 523.1111111111111,
+                    "pos_y": 473
+                },
+                "18": {
+                    "id": 18,
+                    "name": "DialogAgent",
+                    "data": {
+                        "args": {
+                            "name": "计票员",
+                            "sys_prompt": "作为《谁是卧底》游戏中的计票员，你的职责是准确地统计玩家的选择投票，并确定结果。遵循以下准则：\n- 如果多名玩家获得最高票数并出现平票，例如玩家1和玩家2，你应该回应：“平票，没有玩家被淘汰。\n- 如果某一名玩家获得最高票数，例如玩家1，你应宣布结果为：“玩家1被淘汰。\n- 不要回应其他任何内容，包括你的分析和想法。",
+                            "model_config_name": "qwen"
+                        }
+                    },
+                    "class": "DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 549,
+                    "pos_y": 512.8888888888889
+                },
+                "19": {
+                    "id": 19,
+                    "name": "DialogAgent",
+                    "data": {
+                        "args": {
+                            "name": "裁判",
+                            "sys_prompt": "《谁是卧底》游戏规则：\n\n概览：\n《谁是卧底》是一款基于推理的猜谜游戏，适合5名玩家：玩家1、玩家2、玩家3、玩家4和玩家5。\n\n目标：\n通过战略性的描述和投票揭露参与者中的卧底玩家，同时卧底的目标是保持不被发现。\n\n游戏设置：\n- 在游戏开始时，每位玩家秘密被分配一个词。四名玩家收到相同的词，而剩余的一名玩家得到一个不同的词，成为卧底。\n- 卧底的词应对其他玩家保密。\n\n游戏玩法：\n游戏由多个轮次组成，每个轮次分为两个阶段：描述阶段和投票阶段。\n\n1. 描述阶段：\n    - 玩家轮流用一句话描述他们的词，目标是微妙地向其他玩家指示自己的词，而不将其泄露给卧底。\n2. 投票阶段：\n    - 玩家投票选出他们怀疑是卧底的人。得票最多的玩家被淘汰。如果出现平票，游戏进入下一轮。\n    - 被淘汰的玩家在他们的回合中只能回应“该玩家已被淘汰”。\n    \n获胜条件：\n- 如果只剩下两名玩家，其中一名是卧底，卧底获胜。\n- 如果在此之前卧底被淘汰，其他玩家获胜。\n\n策略：\n- 玩家应该模糊地描述他们的词，以防卧底察觉。\n- 投票应被战略性地使用来识别并淘汰卧底。\n\n注意：\n一旦被淘汰，该玩家唯一允许的回复是“该玩家已被淘汰。”\n作为《谁是卧底》游戏中的裁判角色，你的唯一责任是评估游戏是否已达到其结局：\n如果卧底玩家3被淘汰，则回复：“游戏结束，卧底输了。”\n如果玩家3存活，并且游戏中只剩下两名玩家，则回复：“游戏结束，卧底赢了。”\n在所有其他情况下，简单地声明：“游戏继续。” 请将你的回复限制在这些具体的结果上，不要添加任何个人评论、分析或其他备注。\"\"\",",
+                            "model_config_name": "qwen"
+                        }
+                    },
+                    "class": "DialogAgent",
+                    "typenode": false,
+                    "inputs": {
+                        "input_1": {
+                            "connections": []
+                        }
+                    },
+                    "outputs": {
+                        "output_1": {
+                            "connections": []
+                        }
+                    },
+                    "pos_x": 586,
+                    "pos_y": 546
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/agentscope/studio/static/html-drag-components/agent-broadcastagent.html b/src/agentscope/studio/static/html-drag-components/agent-broadcastagent.html
new file mode 100644
index 000000000..aedb14fb1
--- /dev/null
+++ b/src/agentscope/studio/static/html-drag-components/agent-broadcastagent.html
@@ -0,0 +1,32 @@
+<div>
+    <div class="title-box" data-class="BroadcastAgent">
+        <div class="title-box-left-items">
+            <svg class="title-box-svg" viewBox="0 0 1024 1024"
+                 xmlns="http://www.w3.org/2000/svg">
+                <path d="M21.344 448h85.344v234.656H21.344V448zM554.656 192h64V106.656h-213.344V192h64v42.656h-320V896h725.344V234.656h-320V192z m234.688 128v490.656H234.688V320h554.656zM917.344 448h85.344v234.656h-85.344V448z"></path>
+                <path d="M341.344 512H448v106.656h-106.656V512zM576 512h106.656v106.656H576V512z"></path>
+            </svg>
+            <span>BroadcastAgent</span>
+        </div>
+        <button class="button copy-button"
+                i18n="agent-broadcast-Copy">Copy</button>
+        <span class="toggle-arrow">&#x25B2;</span></div>
+    <div class="box">
+        <div class="readme">
+            <span i18n="agent-broadcast-readme">
+            An agent that only broadcasts its content
+            </span>
+            <div>Node ID: <span class="node-id">ID_PLACEHOLDER</span></div>
+        </div>
+
+        <label i18n="agent-broadcast-labelName">Name</label>
+        <input type="text" df-args-name placeholder="Assistant"
+               i18n="agent-broadcast-labelName-Assistant"
+               data-required="true">
+        <br>
+
+        <label i18n="agent-broadcast-content">content</label>
+        <textarea type="text" df-args-content class="text-input"
+                  data-required="true"></textarea>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/agentscope/studio/static/html-drag-components/agent-copyagent.html b/src/agentscope/studio/static/html-drag-components/agent-copyagent.html
new file mode 100644
index 000000000..a6868005f
--- /dev/null
+++ b/src/agentscope/studio/static/html-drag-components/agent-copyagent.html
@@ -0,0 +1,19 @@
+<div>
+    <div class="title-box" data-class="node-DialogAgent">
+        <div class="title-box-left-items">
+            <svg class="title-box-svg" viewBox="0 0 1024 1024"
+                 xmlns="http://www.w3.org/2000/svg">
+                <path d="M21.344 448h85.344v234.656H21.344V448zM554.656 192h64V106.656h-213.344V192h64v42.656h-320V896h725.344V234.656h-320V192z m234.688 128v490.656H234.688V320h554.656zM917.344 448h85.344v234.656h-85.344V448z"></path>
+                <path d="M341.344 512H448v106.656h-106.656V512zM576 512h106.656v106.656H576V512z"></path>
+            </svg>
+            <span>NAME_PLACEHOLDER</span>
+        </div>
+        <span class="toggle-arrow">&#x25B2;</span></div>
+    <div class="box">
+        <div class="readme">
+            README_PLACEHOLDER
+            <div>Copy from Node ID:
+                <span class="node-id">ID_PLACEHOLDER</span></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/agentscope/studio/static/html-drag-components/tool-image-composition.html b/src/agentscope/studio/static/html-drag-components/tool-image-composition.html
index ef59afdcc..a373f9a69 100644
--- a/src/agentscope/studio/static/html-drag-components/tool-image-composition.html
+++ b/src/agentscope/studio/static/html-drag-components/tool-image-composition.html
@@ -10,7 +10,7 @@
     <span class="toggle-arrow">&#x25B2;</span>
 </div>
 <div class="box">
-    <div class="readme" i18n="tool-image-composition-readme">Image composition Configurations</div>
+    <div class="readme" i18n="tool-image-composition-readme">Composite images into one image</div>
     <br>
     <label i18n="tool-image-composition-Titles"> Titles </label>
     <textarea type="text" df-args-titles placeholder="['Title 1', 'Title 2', ... ]"
diff --git a/src/agentscope/studio/static/html-drag-components/tool-image-motion.html b/src/agentscope/studio/static/html-drag-components/tool-image-motion.html
index cd1dd42a4..ba0629d2e 100644
--- a/src/agentscope/studio/static/html-drag-components/tool-image-motion.html
+++ b/src/agentscope/studio/static/html-drag-components/tool-image-motion.html
@@ -10,7 +10,7 @@
     <span class="toggle-arrow">&#x25B2;</span>
 </div>
 <div class="box">
-    <div class="readme" i18n="tool-image-motion-readme">Image Motion Configurations</div>
+    <div class="readme" i18n="tool-image-motion-readme">Convert an image to an mp4 or a gif by shifting the perspective</div>
     <br>
 
     <label i18n="tool-image-motion-outputPath"> Output path </label>
diff --git a/src/agentscope/studio/static/html-drag-components/tool-post.html b/src/agentscope/studio/static/html-drag-components/tool-post.html
index be3ddc9f8..71ce55796 100644
--- a/src/agentscope/studio/static/html-drag-components/tool-post.html
+++ b/src/agentscope/studio/static/html-drag-components/tool-post.html
@@ -10,7 +10,7 @@
     <span class="toggle-arrow">&#x25B2;</span>
 </div>
 <div class="box">
-    <div class="readme" i18n="tool-post-readme">Post Configurations</div>
+    <div class="readme" i18n="tool-post-readme">Post a request and return the response</div>
     <br>
     <label> url </label>
     <input type="text" df-args-url placeholder=""
diff --git a/src/agentscope/studio/static/html-drag-components/tool-video-composition.html b/src/agentscope/studio/static/html-drag-components/tool-video-composition.html
index b0c6b4d1a..56075c653 100644
--- a/src/agentscope/studio/static/html-drag-components/tool-video-composition.html
+++ b/src/agentscope/studio/static/html-drag-components/tool-video-composition.html
@@ -10,7 +10,7 @@
     <span class="toggle-arrow">&#x25B2;</span>
 </div>
 <div class="box">
-    <div class="readme" i18n="tool-video-composition-readme">Video composition Configurations</div>
+    <div class="readme" i18n="tool-video-composition-readme">Composite videos into one video</div>
     <br>
 
     <label i18n="tool-video-composition-outputPath"> Output path </label>
diff --git a/src/agentscope/studio/static/i18n/i18n_en.json b/src/agentscope/studio/static/i18n/i18n_en.json
index 4cba00fd8..21ce31913 100644
--- a/src/agentscope/studio/static/i18n/i18n_en.json
+++ b/src/agentscope/studio/static/i18n/i18n_en.json
@@ -38,6 +38,11 @@
     "workstation-menu-btn-run": "Run the workflow",
     "workstation-menu-btn-save": "Save workflow",
     "workstation-menu-btn-workflow": "Load workflow",
+    "agent-broadcast-Copy": "Copy",
+    "agent-broadcast-readme": "An agent that only broadcasts its content",
+    "agent-broadcast-labelName": "Name",
+    "agent-broadcast-labelName-Assistant": "Assistant",
+    "agent-broadcast-content": "content",
     "agent-dialogagent-Copy": "Copy",
     "agent-dialogagent-readme": "An dialog agent that can interact with users or other agents.",
     "agent-dialogagent-labelName": "Name",
@@ -193,7 +198,7 @@
     "service-text-to-image-modelName": "Model Name",
     "service-text-to-image-numberofImages": "Number of Images",
     "service-text-to-image-size": "size",
-    "tool-image-composition-readme": "Image composition Configurations",
+    "tool-image-composition-readme": "Composite images into one image",
     "tool-image-composition-Titles": "Titles",
     "tool-image-composition-Outputpath": "Output path",
     "tool-image-composition-row": "Row",
@@ -201,15 +206,15 @@
     "tool-image-composition-Spacing": "Spacing",
     "tool-image-composition-titleHeight": "Title height",
     "tool-image-composition-fontName": "Font name",
-    "tool-image-motion-readme": "Image Motion Configurations",
+    "tool-image-motion-readme": "Convert an image to an mp4 or a gif by shifting the perspective",
     "tool-image-motion-outputPath": "Output path",
     "tool-image-motion-outputFormat": "Output Format",
     "tool-image-motion-labelDuration": "Duration",
     "tool-image-motion-labelMotiondirection": "Motion direction",
-    "tool-post-readme": "Post Configurations",
+    "tool-post-readme": "Post a request and return the response",
     "tool-post-label-outputPath": "Output path",
     "tool-post-label-outputtype": "Output type",
-    "tool-video-composition-readme": "Video composition Configurations",
+    "tool-video-composition-readme": "Composite videos into one video",
     "tool-video-composition-outputPath": "Output path",
     "tool-video-composition-targetVideoWidth": "Target Video Width",
     "tool-video-composition-targetVideoHeight": "Target Video Height",
diff --git a/src/agentscope/studio/static/i18n/i18n_zh.json b/src/agentscope/studio/static/i18n/i18n_zh.json
index 9790534fe..9fd12f0c0 100644
--- a/src/agentscope/studio/static/i18n/i18n_zh.json
+++ b/src/agentscope/studio/static/i18n/i18n_zh.json
@@ -38,6 +38,11 @@
     "workstation-menu-btn-run": "运行工作流",
     "workstation-menu-btn-save": "保存工作流",
     "workstation-menu-btn-workflow": "加载工作流",
+    "agent-broadcast-Copy": "复制",
+    "agent-broadcast-readme": "只会广播其内容框中文本的智能体",
+    "agent-broadcast-labelName": "名称",
+    "agent-broadcast-labelName-Assistant": "助理",
+    "agent-broadcast-content": "内容",
     "agent-dialogagent-Copy": "复制",
     "agent-dialogagent-readme": "可与用户或其他智能体互动的对话智能体。",
     "agent-dialogagent-labelName": "名称",
@@ -193,7 +198,7 @@
     "service-text-to-image-numberofImages": "图片数量",
     "service-text-to-image-size": "图片尺寸",
     "service-text-to-image-readme": "将文本转图像服务集成到 ReActAgent 中以增强智能体功能",
-    "tool-image-composition-readme": "图像合成配置",
+    "tool-image-composition-readme": "将多张图片合成一张",
     "tool-image-composition-Titles": "标题",
     "tool-image-composition-Outputpath": "输出路径",
     "tool-image-composition-row": "行",
@@ -201,15 +206,15 @@
     "tool-image-composition-Spacing": "间距",
     "tool-image-composition-titleHeight": "标题高度",
     "tool-image-composition-fontName": "字体名称",
-    "tool-image-motion-readme": "图像运动配置",
+    "tool-image-motion-readme": "通过视角移动将图片转化为mp4或者gif格式",
     "tool-image-motion-outputPath": "输出路径",
     "tool-image-motion-outputFormat": "输出格式",
     "tool-image-motion-labelDuration": "持续时间",
     "tool-image-motion-labelMotiondirection": "运动方向",
-    "tool-post-readme": "Post 配置",
+    "tool-post-readme": "提交Post请求并返回结果",
     "tool-post-label-outputPath": "输出路径",
     "tool-post-label-outputtype": "输出类型",
-    "tool-video-composition-readme": "视频合成配置",
+    "tool-video-composition-readme": "将多个视频合成一个",
     "tool-video-composition-outputPath": "输出路径",
     "tool-video-composition-targetVideoWidth": "目标视频宽度",
     "tool-video-composition-targetVideoHeight": "目标视频高度",
diff --git a/src/agentscope/studio/static/js/workstation.js b/src/agentscope/studio/static/js/workstation.js
index 32e6381db..9ea615ffb 100644
--- a/src/agentscope/studio/static/js/workstation.js
+++ b/src/agentscope/studio/static/js/workstation.js
@@ -24,6 +24,7 @@ const nameToHtmlFile = {
   "TextToImageAgent": "agent-texttoimageagent.html",
   "DictDialogAgent": "agent-dictdialogagent.html",
   "ReActAgent": "agent-reactagent.html",
+  "BroadcastAgent": "agent-broadcastagent.html",
   "Placeholder": "pipeline-placeholder.html",
   "MsgHub": "pipeline-msghub.html",
   "SequentialPipeline": "pipeline-sequentialpipeline.html",
@@ -44,6 +45,7 @@ const nameToHtmlFile = {
   // 'IF/ELSE': 'tool-if-else.html',
   "ImageMotion": "tool-image-motion.html",
   "VideoComposition": "tool-video-composition.html",
+  "CopyNode": "agent-copyagent.html"
 };
 
 const ModelNames48k = [
@@ -611,6 +613,7 @@ async function addNodeToDrawFlow(name, pos_x, pos_y) {
       }, htmlSourceCode);
     break;
 
+
     // Workflow-Agent
   case "DialogAgent":
     const DialogAgentID = editor.addNode("DialogAgent", 1, 1,
@@ -693,6 +696,34 @@ async function addNodeToDrawFlow(name, pos_x, pos_y) {
     }
     break;
 
+  case "BroadcastAgent":
+    const BroadcastAgentID = editor.addNode("BroadcastAgent", 1, 1,
+      pos_x,
+      pos_y,
+      "BroadcastAgent", {
+        "args": {
+          "name": "",
+          "content": ""
+        }
+      }, htmlSourceCode);
+    var nodeElement = document.querySelector(`#node-${BroadcastAgentID} .node-id`);
+    if (nodeElement) {
+      nodeElement.textContent = BroadcastAgentID;
+    }
+    break;
+
+  case "CopyNode":
+    const CopyNodeID = editor.addNode("CopyNode", 1, 1,
+      pos_x,
+      pos_y,
+      "CopyNode", {
+      }, htmlSourceCode);
+    var nodeElement = document.querySelector(`#node-${CopyNodeID} .node-id`);
+    if (nodeElement) {
+      nodeElement.textContent = nodeElement;
+    }
+    break;
+
     // Workflow-Pipeline
   case "Placeholder":
     editor.addNode("Placeholder", 1, 1,
@@ -947,7 +978,6 @@ function initializeMonacoEditor(nodeId) {
     parentNode.addEventListener("DOMNodeRemoved", function () {
       resizeObserver.disconnect();
     });
-
   }, function (error) {
     console.error("Error encountered while loading monaco editor: ", error);
   });
@@ -2349,20 +2379,40 @@ async function fetchHtmlSourceCodeByName(name) {
 
 async function addHtmlAndReplacePlaceHolderBeforeImport(data) {
   const idPlaceholderRegex = /ID_PLACEHOLDER/g;
+  const namePlaceholderRegex = /NAME_PLACEHOLDER/g;
+  const readmePlaceholderRegex = /README_PLACEHOLDER/g;
+
+  const classToReadmeDescription = {
+    "node-DialogAgent": "A dialog agent that can interact with users or other agents",
+    "node-UserAgent": "A proxy agent for user",
+    "node-TextToImageAgent": "Agent for text to image generation",
+    "node-DictDialogAgent": "Agent that generates response in a dict format",
+    "node-ReActAgent": "Agent for ReAct (reasoning and acting) with tools",
+    "node-BroadcastAgent": "A broadcast agent that only broadcasts the messages it receives"
+  };
+
   for (const nodeId of Object.keys(data.drawflow.Home.data)) {
     const node = data.drawflow.Home.data[nodeId];
+
     if (!node.html) {
       if (node.name === "readme") {
-        // Remove the node if its name is "readme"
         delete data.drawflow.Home.data[nodeId];
-        continue; // Skip to the next iteration
+        continue;
       }
-      console.log(node.name);
-      const sourceCode = await fetchHtmlSourceCodeByName(node.name);
 
-      // Add new html attribute to the node
-      console.log(sourceCode);
-      node.html = sourceCode.replace(idPlaceholderRegex, nodeId);
+      node.html = await fetchHtmlSourceCodeByName(node.name);
+
+      if (node.name === "CopyNode") {
+        node.html = node.html.replace(idPlaceholderRegex, node.data.elements[0]);
+        node.html = node.html.replace(namePlaceholderRegex, node.class.split("-").slice(-1)[0]);
+
+        const readmeDescription = classToReadmeDescription[node.class];
+        if (readmeDescription) {
+          node.html = node.html.replace(readmePlaceholderRegex, readmeDescription);
+        }
+      } else {
+        node.html = node.html.replace(idPlaceholderRegex, nodeId);
+      }
     }
   }
 }
diff --git a/src/agentscope/studio/templates/workstation.html b/src/agentscope/studio/templates/workstation.html
index d97f43cad..c1ec1403d 100644
--- a/src/agentscope/studio/templates/workstation.html
+++ b/src/agentscope/studio/templates/workstation.html
@@ -238,6 +238,11 @@
                                 draggable="true" ondragstart="drag(event)">
                                 ReActAgent
                             </li>
+                            <li class="workstation-sidebar-dragitem unselectable-text"
+                                data-node="BroadcastAgent"
+                                draggable="true" ondragstart="drag(event)">
+                                BroadcastAgent
+                            </li>
                         </ul>
                     </li>
                     <li>
diff --git a/src/agentscope/studio/tools/broadcast_agent.py b/src/agentscope/studio/tools/broadcast_agent.py
new file mode 100644
index 000000000..61f1d51b7
--- /dev/null
+++ b/src/agentscope/studio/tools/broadcast_agent.py
@@ -0,0 +1,66 @@
+# -*- coding: utf-8 -*-
+"""A dummy agent."""
+from typing import Optional, Union, Sequence
+
+from agentscope.agents import AgentBase
+from agentscope.message import Msg
+
+
+class BroadcastAgent(AgentBase):
+    """A dummy agent used to only speak what he gets."""
+
+    def __init__(
+        self,
+        name: str,
+        content: str,
+        sys_prompt: str = None,
+        model_config_name: str = None,
+        use_memory: bool = False,
+        memory_config: Optional[dict] = None,
+    ) -> None:
+        """Initialize the dummy agent.
+
+        Arguments:
+            name (`str`):
+                The name of the agent.
+            sys_prompt (`Optional[str]`):
+                The system prompt of the agent, which can be passed by args
+                or hard-coded in the agent.
+            model_config_name (`str`):
+                The name of the model config, which is used to load model from
+                configuration.
+            use_memory (`bool`, defaults to `True`):
+                Whether the agent has memory.
+            memory_config (`Optional[dict]`):
+                The config of memory.
+        """
+        super().__init__(
+            name=name,
+            sys_prompt=sys_prompt,
+            model_config_name=model_config_name,
+            use_memory=use_memory,
+            memory_config=memory_config,
+        )
+        self.content = content
+
+    def reply(self, x: Optional[Union[Msg, Sequence[Msg]]] = None) -> Msg:
+        """Reply function of the agent. Processes the input data,
+        generates a prompt using the current dialogue memory and system
+        prompt, and invokes the language model to produce a response. The
+        response is then formatted and added to the dialogue memory.
+
+        Args:
+            x (`Optional[Union[Msg, Sequence[Msg]]]`, defaults to `None`):
+                The input message(s) to the agent, which also can be omitted if
+                the agent doesn't need any input.
+
+        Returns:
+            `Msg`: The output message generated by the agent.
+        """
+
+        # Print/speak the message in this agent's voice
+        # Support both streaming and non-streaming responses by "or"
+        x = Msg(name=self.name, content=self.content, role="assistant")
+        self.speak(x)
+
+        return x
diff --git a/src/agentscope/web/workstation/workflow_node.py b/src/agentscope/web/workstation/workflow_node.py
index dd6f37e23..af0e01a63 100644
--- a/src/agentscope/web/workstation/workflow_node.py
+++ b/src/agentscope/web/workstation/workflow_node.py
@@ -50,6 +50,7 @@
 from agentscope.studio.tools.condition_operator import eval_condition_operator
 
 from agentscope.studio.tools.web_post import web_post
+from agentscope.studio.tools.broadcast_agent import BroadcastAgent
 
 DEFAULT_FLOW_VAR = "flow"
 
@@ -318,6 +319,31 @@ def compile(self) -> dict:
         }
 
 
+class BroadcastAgentNode(WorkflowNode):
+    """
+    A node representing a BroadcastAgent within a workflow.
+    """
+
+    node_type = WorkflowNodeType.AGENT
+
+    def _post_init(self) -> None:
+        super()._post_init()
+        self.pipeline = BroadcastAgent(**self.opt_kwargs)
+
+    def __call__(self, x: dict = None) -> dict:
+        return self.pipeline(x)
+
+    def compile(self) -> dict:
+        return {
+            "imports": "from agentscope.studio.tools.broadcast_agent "
+            "import BroadcastAgent",
+            "inits": f"{self.var_name} = BroadcastAgent("
+            f"{kwarg_converter(self.opt_kwargs)})",
+            "execs": f"{DEFAULT_FLOW_VAR} = {self.var_name}"
+            f"([{DEFAULT_FLOW_VAR}])",
+        }
+
+
 class MsgHubNode(WorkflowNode):
     """
     A node that serves as a messaging hub within a workflow.
@@ -1033,6 +1059,7 @@ def compile(self) -> dict:
     "TextToImageAgent": TextToImageAgentNode,
     "DictDialogAgent": DictDialogAgentNode,
     "ReActAgent": ReActAgentNode,
+    "BroadcastAgent": BroadcastAgentNode,
     "Placeholder": PlaceHolderNode,
     "MsgHub": MsgHubNode,
     "SequentialPipeline": SequentialPipelineNode,